/* ==========================================================================
   Walexia — charte « Encre & aurore » (refonte de l'accueil, 29/10/2026, inspiration wati.io)
   Chargée après walexia.css, active sous body.wx-da2 : sur toutes les pages Walexia depuis la 5.34.0 (includes/home-v2.php).
   - Fond blanc cassé, titres encre très serrés (Plus Jakarta Sans 800), textes doux, beaucoup d'espace.
   - Halos pastel (menthe, ciel, lilas) au lieu des dégradés verts ; sections alternées blanc / teintes pastel.
   - Boutons principaux noirs en pilule ; le vert #34D36B ne sert plus qu'au logo, au surligneur et aux repères.
   - Étiquettes techniques en JetBrains Mono (« PUBLICITÉ INSTAGRAM · SUV HYBRIDE »).
   ========================================================================== */

/* 0. Police de secours recalée : Arial aux proportions de Plus Jakarta Sans (mesures du 29/10/2026 : 5,5 % plus large
   en texte courant, 1 à 2 % en gras ; ascendante 1,04 em, descendante 0,22 em). Quand Plus Jakarta Sans arrive, les
   lignes ne se redistribuent pas : aucun décalage de la page (article du 28/10 : CLS 0,107 sans elle). */
@font-face {
  font-family: "Plus Jakarta Sans Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400 599;
  size-adjust: 105.5%; ascent-override: 98.5%; descent-override: 20.8%; line-gap-override: 0%;
}
@font-face {
  font-family: "Plus Jakarta Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 900;
  size-adjust: 101.3%; ascent-override: 102.7%; descent-override: 21.7%; line-gap-override: 0%;
}

/* 1. Jetons ---------------------------------------------------------------- */
body.wx-da2, body.wx-da2 .wx {
  --wx-color-heading: #121417;
  --wx-color-text: #2B3036;
  --wx-color-text-muted: #5C636A;
  --wx-color-bg: #FAF9F6;
  --wx-color-bg-tint: #F4F2EE;
  --wx-color-surface: #FFFFFF;
  --wx-color-surface-muted: #F6F5F1;
  --wx-color-border: rgba(18, 20, 23, .08);
  --wx-color-border-strong: rgba(18, 20, 23, .16);
  --wx-color-action: #121417;
  --wx-color-action-hover: #2A2F35;
  --wx-color-on-action: #FFFFFF;
  --wx-color-marker: #CFF5DB;
  --wx-shadow-action: 0 1px 2px rgba(18, 20, 23, .18), 0 12px 26px -14px rgba(18, 20, 23, .6);
  /* Gamme neutre chaude à la place des teintes vertes : les dégradés du site en découlent */
  --wx-g-03: #FCFBF9;
  --wx-g-06: #F9F8F5;
  --wx-g-10: #F5F3EF;
  --wx-g-16: #EFECE6;
  --wx-g-24: #E8E4DC;
  --wx-g-32: #DFDAD0;
  /* Teintes pastel des sections (une par grande idée) */
  --wx-da2-mint: #EEF8F1;
  --wx-da2-sky: #EFF5FD;
  --wx-da2-lilac: #F5F2FC;
  --wx-da2-cream: #FCF7EA;
  --wx-da2-aurora:
    radial-gradient(38% 42% at 64% 34%, rgba(52, 211, 107, .22), transparent 70%),
    radial-gradient(30% 36% at 86% 62%, rgba(124, 196, 255, .26), transparent 70%),
    radial-gradient(28% 30% at 46% 78%, rgba(201, 167, 255, .22), transparent 70%);
  --wx-font-display: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", Arimo, Arial, sans-serif;
  --wx-font-text: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", Arimo, Arial, sans-serif;
  --wx-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --wx-da2-ticks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M1.5 8.5l4 4 8-9M8.5 11.5l1 1 8-9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --wx-fs-display: clamp(2.5rem, 1.3rem + 3.6vw, 4.1rem);
  --wx-fs-title: clamp(2rem, 1.35rem + 2.1vw, 3.25rem);
  --wx-fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --wx-r-xl: clamp(24px, 2.4vw, 32px);
  --wx-section-pad: clamp(56px, 36px + 5vw, 120px);
}
body.wx-page.wx-da2 { background: var(--wx-color-bg); }

/* 2. Typographie ----------------------------------------------------------- */
body.wx-da2 .wx :where(h1, h2, h3, h4) { font-family: var(--wx-font-display); }
body.wx-da2 .wx .wx-display { font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
body.wx-da2 .wx .wx-title { font-weight: 800; line-height: 1.04; letter-spacing: -.04em; }
body.wx-da2 .wx :is(.wx-subtitle, .wx-tile__title, .wx-panel__label, .wx-card__title, .wx-usage__lead) { font-weight: 700; letter-spacing: -.025em; }
/* Fin de titre : surligneur menthe sous le texte encre (plus de texte vert) */
body.wx-da2 .wx :is(.wx-title, .wx-display) :is(mark, .wx-title__accent, .has-wx-accent-color),
body.wx-da2 .wx .wx-title.is-inview :is(mark, .wx-title__accent) {
  color: var(--wx-color-heading) !important; -webkit-text-fill-color: currentColor; /* les classes de couleur de WordPress sont en !important */
  background-image: linear-gradient(180deg, transparent 24%, var(--wx-color-marker) 24%, var(--wx-color-marker) 96%, transparent 96%);
  background-size: 100% 100%; background-repeat: no-repeat; background-position: 0 0;
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-inline: .05em; border-radius: .1em; animation: none;
}
/* Le surligneur se pose de gauche à droite quand le titre apparaît */
@media (prefers-reduced-motion: no-preference) {
  body.wx-da2 .wx .wx-title.is-inview :is(mark, .wx-title__accent) { animation: wx-da2-marker 900ms var(--wx-ease) 200ms both; }
  body.wx-da2 .wx .wx-v2hero__title mark { animation: wx-da2-marker 900ms var(--wx-ease) 500ms both; }
}
@keyframes wx-da2-marker { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
/* Fin de titre surlignée = message WhatsApp envoyé : coches doubles, grises puis bleues (« lu ») une fois le surligneur posé */
body.wx-da2 .wx :is(.wx-v2hero__title, .wx-title) mark:last-child::after {
  content: ""; display: inline-block; width: .42em; height: .34em; margin-left: .12em; vertical-align: .05em;
  background: #53BDEB;
  -webkit-mask: var(--wx-da2-ticks) center / contain no-repeat; mask: var(--wx-da2-ticks) center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  body.wx-da2 .wx .wx-v2hero__title mark:last-child::after { animation: wx-da2-read 1500ms var(--wx-ease-soft) 1400ms both; }
  body.wx-da2 .wx .wx-title.is-inview mark:last-child::after { animation: wx-da2-read 1500ms var(--wx-ease-soft) 1100ms both; }
  .wx-js body.wx-da2 .wx .wx-title.wx-reveal:not(.is-inview) mark:last-child::after { opacity: 0; }
}
@keyframes wx-da2-read {
  0% { opacity: 0; transform: scale(.4); background-color: #8696A0; }
  25% { opacity: 1; transform: scale(1.15); background-color: #8696A0; }
  40%, 62% { transform: scale(1); background-color: #8696A0; }
  80% { transform: scale(1.2); background-color: #53BDEB; }
  100% { opacity: 1; transform: none; background-color: #53BDEB; }
}
body.wx-da2 .wx .wx-eyebrow {
  font-family: var(--wx-font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .1em; color: var(--wx-color-text-muted);
}
body.wx-da2 .wx .wx-eyebrow::before { content: "● "; color: var(--wx-color-accent); }
body.wx-da2 .wx .wx-eyebrow--dot::before, body.wx-da2 .wx .wx-eyebrow--wa::before { content: none; }
body.wx-da2 .wx .wx-lead { font-weight: 400; color: var(--wx-color-text-muted); }
body.wx-da2 .wx .wx-link-arrow a { color: var(--wx-color-heading); }
/* Grands titres des pages (secteurs, produit, ressources) : surligneur net, sans l'ombre « bulle » de l'ancienne charte */
body.wx-da2 .wx .wx-display mark { box-shadow: none; padding: 0 .05em; margin-inline: 0; border-radius: .1em; }
/* Liens des textes : encre, soulignés de vert */
body.wx-da2 .wx a:not([class]) { color: var(--wx-color-heading); text-decoration-color: var(--wx-color-accent); text-decoration-thickness: 2px; }
body.wx-da2 .wx a:not([class]):hover { text-decoration-color: var(--wx-color-heading); }
/* Étiquettes des articles (sommaire) : comme les surtitres */
body.wx-da2 .wx .wx-article__toc-title { font-family: var(--wx-font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .1em; color: var(--wx-color-text-muted); }

/* 3. Boutons ---------------------------------------------------------------- */
body.wx-da2 .wx .wx-btn .wp-block-button__link, body.wx-da2 .wx .wx-button {
  border-radius: 999px; font-family: var(--wx-font-text); font-weight: 700; letter-spacing: -.005em;
}
body.wx-da2 .wx .wx-btn--primary .wp-block-button__link, body.wx-da2 .wx .wx-button--ink, body.wx-da2 .wx .wx-button--primary {
  background: var(--wx-color-action); color: var(--wx-color-on-action); box-shadow: var(--wx-shadow-action);
}
body.wx-da2 .wx .wx-btn--primary .wp-block-button__link:hover, body.wx-da2 .wx .wx-button--ink:hover, body.wx-da2 .wx .wx-button--primary:hover {
  background: var(--wx-color-action-hover); color: var(--wx-color-on-action);
}
body.wx-da2 .wx .wx-btn--ghost .wp-block-button__link, body.wx-da2 .wx .wx-button--ghost {
  background: var(--wx-color-surface); color: var(--wx-color-heading); box-shadow: inset 0 0 0 1px var(--wx-color-border-strong);
}

/* 4. Sections : blanc et teintes pastel, sans liseré vert ------------------ */
body.wx-da2 .wx.wx-section--tint { background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border); }
body.wx-da2 .wx.wx-kpis { background: var(--wx-da2-mint); box-shadow: none; }
body.wx-da2 .wx.wx-product { background: var(--wx-da2-lilac); border-radius: var(--wx-r-xl); margin-inline: var(--wx-inset); }
body.wx-da2 .wx.wx-integrations { background: var(--wx-da2-sky); box-shadow: none; }
body.wx-da2 .wx.wx-v2cases { background: var(--wx-da2-cream); border-radius: var(--wx-r-xl); margin-inline: var(--wx-inset); }
@media (min-width: 1520px) { body.wx-da2 .wx:is(.wx-product, .wx-v2cases) { max-width: calc(1480px - 2 * var(--wx-inset)); margin-inline: auto; } }

/* Chiffres clés : nombres en encre (le vert clair sur fond menthe se lisait mal), unité en vert foncé lisible */
body.wx-da2 .wx :is(.wx-statmsg__num, .wx-statmsg__unit.is-pct) { color: var(--wx-color-heading); background: none; -webkit-text-fill-color: currentColor; letter-spacing: -.045em; }
body.wx-da2 .wx .wx-statmsg__unit { color: var(--wx-color-accent-text); }

/* 5. En-tête et bandeau ----------------------------------------------------- */
body.wx-da2 .wx-topbar { --wx-topbar-ink: #F4F6F8; --wx-topbar-soft: rgba(244, 246, 248, .6); background: #121417; color: #F4F6F8; }
body.wx-da2 .wx .wx-topbar__flip { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
body.wx-da2 .wx-topbar__pulse { background: var(--wx-color-accent); }
body.wx-da2 .wx .wx-topbar__login, body.wx-da2 .wx .wx-topbar__lang, body.wx-da2 .wx .wx-topbar__lang a { color: #F4F6F8; }
/* Sélecteur FR / EN sur le bandeau encre : l'autre langue en clair (la règle des liens en encre la rendait invisible),
   la langue courante en pastille claire, le globe en clair. */
body.wx-da2 .wx.wx-header .wx-lang a { color: #F4F6F8; text-decoration: none; }
body.wx-da2 .wx.wx-header .wx-lang a[aria-current] { color: #121417; background: #F4F6F8; }
body.wx-da2 .wx.wx-header .wx-lang a:not([aria-current]):hover { background: rgba(244, 246, 248, .16); }
body.wx-da2 .wx.wx-header .wx-lang .wx-ico { color: #F4F6F8; }
/* Menu « verre liquide » (inspiration Wati) : transparent en haut de page, sur les halos ; dès le défilement, le
   bandeau noir s'en va et la barre devient une pilule de verre flottante, floutée, avec un reflet clair.
   Seuls l'opacité, le flou et un transform changent : aucun décalage de mise en page. */
body.wx-da2 .wx.wx-header {
  top: -40px; background: transparent; box-shadow: none; border-bottom: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.wx-da2 .wx.wx-header::after { content: none; }
body.wx-da2 .wx-header__bar { position: relative; isolation: isolate; }
body.wx-da2 .wx-header__bar::before {
  content: ""; position: absolute; z-index: -1; inset: 7px max(4px, calc(var(--wx-gutter) - 16px)); border-radius: 22px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .56));
  -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(18, 20, 23, .07), 0 16px 36px -22px rgba(18, 20, 23, .42);
  opacity: 0; transform: scale(.985); transition: opacity 320ms var(--wx-ease-soft), transform 420ms var(--wx-ease);
}
body.wx-da2 .wx.wx-header.is-scrolled .wx-header__bar::before { opacity: 1; transform: none; }
@media (max-width: 1099px) { body.wx-da2 .wx.wx-header { top: -36px; } }
@media (prefers-reduced-motion: reduce) { body.wx-da2 .wx-header__bar::before { transition: none; } }

/* 6. Haut de page « conversation » (patterns, accueil) --------------------- */
body.wx-da2 .wx.wx-v2hero { position: relative; overflow: hidden; padding: clamp(40px, 5vw, 88px) 0 clamp(48px, 6vw, 96px); }
body.wx-da2 .wx.wx-v2hero::before {
  content: ""; position: absolute; inset: -10% -8% -10% 30%; z-index: 0; pointer-events: none; background: var(--wx-da2-aurora); filter: blur(12px);
}
.wx .wx-v2hero__inner {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 64px); align-items: center;
  width: 100%; max-width: calc(var(--wx-max) + 2 * var(--wx-gutter)); margin-inline: auto; padding-inline: var(--wx-gutter);
}
@media (min-width: 1040px) { .wx .wx-v2hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.wx .wx-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; font: 500 .75rem/1.2 var(--wx-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--wx-color-text-muted); }
.wx .wx-kicker::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--wx-color-accent); }
.wx .wx-v2hero__title { font-family: var(--wx-font-display); font-size: var(--wx-fs-display); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; color: var(--wx-color-heading); }
.wx .wx-v2hero__title mark {
  padding-inline: .06em; border-radius: .12em; color: inherit;
  background: linear-gradient(180deg, transparent 22%, var(--wx-color-marker) 22%, var(--wx-color-marker) 96%, transparent 96%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.wx .wx-v2hero__lead { max-width: 33em; margin: 24px 0 32px; font-size: var(--wx-fs-lead); line-height: 1.55; color: var(--wx-color-text-muted); }
/* Pages secteur (5.35.0) : fil d'Ariane au-dessus du surtitre, titre plus long donc un cran plus petit que l'accueil. */
.wx .wx-v2hero--sector .wx-crumbs { margin: 0 0 28px; }
.wx .wx-v2hero--sector .wx-v2hero__title { font-size: clamp(2.125rem, 1.2rem + 2.3vw, 3.125rem); line-height: 1.05; }
.wx .wx-v2hero--sector .wx-actions { margin: 0; }
.wx .wx-v2hero--sector .wx-hero__note { margin: 20px 0 0; }
/* Signature des pages signées (5.50.0) : sous la réassurance, nom souligné vers l'équipe. */
.wx .wx-hero__by { margin: 10px 0 0; font-size: var(--wx-fs-small); color: var(--wx-color-text-muted); }
.wx .wx-hero__by a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.wx .wx-hero__by a:hover { color: var(--wx-color-text); }
.wx .wx-v2actions { display: flex; flex-wrap: wrap; gap: 12px; }
.wx .wx-v2btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 999px;
  font: 700 1rem/1 var(--wx-font-text); text-decoration: none; transition: transform 200ms var(--wx-ease), background-color 200ms var(--wx-ease-soft);
}
.wx .wx-v2btn--main { background: var(--wx-color-action); color: var(--wx-color-on-action); box-shadow: var(--wx-shadow-action); }
.wx .wx-v2btn--main:hover { background: var(--wx-color-action-hover); transform: translateY(-1px); }
.wx .wx-v2btn--alt { background: var(--wx-color-surface); color: var(--wx-color-heading); box-shadow: inset 0 0 0 1px var(--wx-color-border-strong); }
.wx .wx-v2btn--alt:hover { box-shadow: inset 0 0 0 1px var(--wx-color-heading); }
.wx .wx-v2hero__proof { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 36px 0 0; padding: 0; list-style: none; font-size: .875rem; color: var(--wx-color-text-muted); }
.wx .wx-v2hero__proof li { display: inline-flex; align-items: center; gap: 8px; }
.wx .wx-v2hero__proof i { width: 8px; height: 8px; border-radius: 50%; background: var(--wx-color-accent); box-shadow: 0 0 0 4px rgba(52, 211, 107, .18); }

/* Conversation : panneau blanc, fil à hauteur fixe qui remonte par transform, confirmations en cartes */
.wx .wx-v2chat { position: relative; display: grid; gap: 14px; width: 100%; max-width: 500px; justify-self: center; }
@media (min-width: 1040px) { .wx .wx-v2chat { justify-self: end; } }
.wx .wx-v2chat__panel { overflow: hidden; border-radius: 28px; background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px var(--wx-color-border), 0 30px 60px -36px rgba(18, 20, 23, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* Cadre WhatsApp (29/10, demande de Walexia : reconnaître WhatsApp au premier coup d'œil) : en-tête de l'application
   (retour, photo avec pastille WhatsApp, nom et badge bleu de compte vérifié, « Compte professionnel », vidéo et appel),
   fond beige à motif de WhatsApp, bulles vertes #D9FDD3 avec coches bleues, barre « Message » et micro. */
.wx .wx-v2chat__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 10px; background: #FFFFFF; border-bottom: 1px solid rgba(11, 20, 26, .08); }
.wx .wx-v2chat__back { display: grid; place-items: center; flex: none; width: 22px; color: #54656F; }
.wx .wx-v2chat__back .wx-ico { width: 20px; height: 20px; stroke-width: 2.2; }
.wx .wx-v2chat__avatar { position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #121417; color: #FFFFFF; font: 700 .8125rem/1 var(--wx-font-text); }
.wx .wx-v2chat__wa { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #25D366; box-shadow: 0 0 0 2px #FFFFFF; }
.wx .wx-v2chat__wa .wx-wa-glyph { width: 11px; height: 11px; }
.wx .wx-v2chat__who { display: grid; min-width: 0; line-height: 1.25; }
.wx .wx-v2chat__who b { display: inline-flex; align-items: center; gap: 4px; font-size: .9375rem; font-weight: 700; color: #111B21; }
.wx .wx-v2chat__verified { flex: none; width: 16px; height: 16px; }
.wx .wx-v2chat__who > span { font-size: .75rem; color: #667781; }
.wx .wx-v2chat__tools { display: flex; align-items: center; gap: 18px; margin-left: auto; color: #54656F; }
.wx .wx-v2chat__tools .wx-ico { width: 20px; height: 20px; }
.wx .wx-v2chat__thread { position: relative; height: 404px; overflow: hidden; padding: 0 14px; background-color: #EFEAE2;
  background-image: radial-gradient(rgba(11, 20, 26, .055) 1px, transparent 1.4px), radial-gradient(rgba(11, 20, 26, .035) 1px, transparent 1.4px);
  background-size: 22px 22px, 22px 22px; background-position: 0 0, 11px 11px; }
.wx .wx-v2chat__composer { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px; background: #EFEAE2; }
.wx .wx-v2chat__input { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; height: 40px; padding: 0 14px; border-radius: 999px; background: #FFFFFF; color: #8696A0; font-size: .875rem; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wx .wx-v2chat__input > span { flex: 1; }
.wx .wx-v2chat__input .wx-ico { width: 19px; height: 19px; }
.wx .wx-v2chat__mic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #25D366; color: #FFFFFF; }
.wx .wx-v2chat__mic .wx-ico { width: 19px; height: 19px; stroke-width: 2; }
.wx .wx-v2tick { display: inline-block; width: 15px; height: 11px; margin-left: 5px; vertical-align: -1px; background: #53BDEB; -webkit-mask: var(--wx-da2-ticks) center / contain no-repeat; mask: var(--wx-da2-ticks) center / contain no-repeat; }
.wx .wx-v2chat__track { display: grid; gap: 10px; margin: 0; padding: 18px 0; list-style: none; transition: transform 700ms var(--wx-ease); }
.wx .wx-v2tag { justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border); font: 500 .6875rem/1 var(--wx-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--wx-color-text-muted); }
.wx .wx-v2tag i { width: 7px; height: 7px; border-radius: 50%; background: #D62976; }
.wx .wx-v2tag--google i { background: #EA4335; }
.wx .wx-v2tag--site i { background: #6366F1; }
.wx .wx-v2tag--sms i { background: #0EA5E9; }
.wx .wx-v2tag--facebook i { background: #1877F2; }
.wx .wx-v2tag--email i { background: #F97316; }
.wx .wx-v2tag--display i { background: #F43F5E; }
.wx .wx-v2tag--qr i { background: #EAB308; }
.wx .wx-v2tag--wa i { background: #25D366; }
/* Photo envoyée par le client et devis en PDF (conversations des métiers) */
.wx .wx-v2photo { display: block; width: 100%; max-width: 220px; height: auto; aspect-ratio: 8 / 5; margin-top: 8px; border-radius: 12px; object-fit: cover; }
.wx .wx-v2doc { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 11px; border-radius: 12px; background: #F0F2F5; }
.wx .wx-v2doc__ico { display: grid; place-items: center; flex: none; width: 34px; height: 40px; border-radius: 6px; background: #E5484D; font: 700 .625rem/1 var(--wx-font-text); letter-spacing: .04em; color: #FFFFFF; }
.wx .wx-v2doc__txt { display: grid; min-width: 0; line-height: 1.3; }
.wx .wx-v2doc__txt b { overflow: hidden; font-size: .8125rem; color: #111B21; white-space: nowrap; text-overflow: ellipsis; }
.wx .wx-v2doc__txt span { font-size: .6875rem; color: #667781; }
.wx .wx-v2msg { max-width: 84%; padding: 11px 14px 9px; border-radius: 18px; font-size: .9375rem; line-height: 1.45; box-shadow: 0 1px 1px rgba(18, 20, 23, .06); }
.wx .wx-v2msg p { margin: 0; }
.wx .wx-v2msg small { display: block; margin-top: 6px; font: 500 .625rem/1 var(--wx-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--wx-color-text-muted); }
.wx .wx-v2msg--in { justify-self: start; background: #FFFFFF; color: #111B21; border-bottom-left-radius: 6px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wx .wx-v2msg--out { justify-self: end; background: #D9FDD3; color: #111B21; border-bottom-right-radius: 6px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wx .wx-v2msg--out small { color: #5B7A63; }
.wx .wx-v2msg small { display: flex; align-items: center; justify-content: flex-end; }
.wx .wx-v2slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wx .wx-v2slots span { padding: 7px 11px; border-radius: 999px; background: #FFFFFF; font-size: .8125rem; font-weight: 700; color: #15803D; box-shadow: inset 0 0 0 1px rgba(21, 128, 61, .22); transition: background-color 300ms var(--wx-ease-soft), color 300ms var(--wx-ease-soft); }
.wx .wx-v2chat:not(.is-enhanced) .wx-v2slots .is-picked, .wx .wx-v2chat.is-booked .wx-v2slots .is-picked { background: #121417; color: #FFFFFF; box-shadow: none; }
.wx .wx-v2cards { justify-self: stretch; margin-inline: -16px; }
.wx .wx-v2cards__rail { display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: 10px; overflow-x: auto; padding: 2px 16px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.wx .wx-v2cards__rail::-webkit-scrollbar { display: none; }
.wx .wx-v2card { overflow: hidden; margin: 0; border-radius: 18px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border); scroll-snap-align: start; }
.wx .wx-v2card img { display: block; width: 100%; height: 118px; object-fit: cover; }
.wx .wx-v2card figcaption { display: grid; gap: 2px; padding: 10px 12px 4px; font-style: normal; }
.wx .wx-v2card figcaption b { font-size: .875rem; color: var(--wx-color-heading); }
.wx .wx-v2card figcaption span { font-size: .75rem; color: var(--wx-color-text-muted); }
.wx .wx-v2card__btn { display: block; margin: 8px 12px 12px; padding: 8px 0; border-radius: 999px; text-align: center; font-size: .8125rem; font-weight: 700; color: #15803D; box-shadow: inset 0 0 0 1px rgba(21, 128, 61, .22); }
.wx .wx-v2card__btn { transition: background-color 300ms var(--wx-ease-soft), color 300ms var(--wx-ease-soft); }
.wx .wx-v2chat:not(.is-enhanced) .wx-v2card.is-picked .wx-v2card__btn, .wx .wx-v2chat.is-chosen .wx-v2card.is-picked .wx-v2card__btn { background: #121417; color: #FFFFFF; box-shadow: none; }
/* Confirmations : événements du fil, centrés, après le dernier message */
.wx .wx-v2note { justify-self: stretch; display: flex; align-items: center; gap: 12px; margin-inline: 6%; padding: 10px 12px; border-radius: 16px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border), 0 12px 28px -22px rgba(18, 20, 23, .5); }
.wx .wx-v2note + .wx-v2note { margin-top: -2px; }
.wx .wx-v2note__ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; }
.wx .wx-v2note__ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wx .wx-v2note__ico--mail { background: #FFF1E6; color: #C2410C; }
.wx .wx-v2note__ico--sms { background: #E8F4FD; color: #0369A1; }
.wx .wx-v2note__ico--crm { background: #121417; color: #34D36B; }
.wx .wx-v2note__txt { display: grid; min-width: 0; line-height: 1.3; }
.wx .wx-v2note__txt b { font-size: .8125rem; color: var(--wx-color-heading); }
.wx .wx-v2note__txt span { overflow: hidden; font-size: .75rem; color: var(--wx-color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
/* Lecture : chaque élément occupe sa place dès le départ et apparaît en fondu */
.wx-js .wx .wx-v2chat:not(.is-static) [data-at]:not(.is-on) { opacity: 0; transform: translate3d(0, 10px, 0) scale(.98); }
.wx .wx-v2chat [data-at] { transition: opacity 450ms var(--wx-ease), transform 450ms var(--wx-ease); }
.wx .wx-v2chat.is-ending [data-at] { opacity: 0; transition-duration: 450ms; }
@media (prefers-reduced-motion: reduce) {
  .wx .wx-v2chat [data-at] { opacity: 1 !important; transform: none !important; }
  .wx .wx-v2chat__track { transition: none; }
}
@media (max-width: 599px) {
  .wx .wx-v2chat__thread { height: 372px; padding: 0 12px; }
  .wx .wx-v2chat__tools { gap: 14px; }
  .wx .wx-v2cards { margin-inline: -12px; }
  .wx .wx-v2cards__rail { padding-inline: 12px; grid-auto-columns: 80%; }
}

/* 7. Section « canaux » : motion des points de contact + démonstration ----- */
body.wx-da2 .wx.wx-v2channels { position: relative; }
body.wx-da2 .wx.wx-v2channels .wx-chflow { margin: 0 auto clamp(32px, 4vw, 56px); }
/* Démonstration allégée sur l'accueil : sans la liste de l'équipe */
body.wx-da2 .wx.wx-v2channels .wx-oc__team { display: none; }
body.wx-da2 .wx .wx-chflow { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border), 0 18px 40px -28px rgba(18, 20, 23, .35); }

/* 8. Cas clients ------------------------------------------------------------ */
.wx .wx-v2cases__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 900px) { .wx .wx-v2cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wx .wx-v2case { display: grid; gap: 18px; align-content: start; padding: clamp(24px, 3vw, 36px); border-radius: 24px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border); text-decoration: none; color: inherit; transition: transform 220ms var(--wx-ease), box-shadow 220ms var(--wx-ease); }
.wx .wx-v2case:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--wx-color-border-strong), 0 24px 48px -32px rgba(18, 20, 23, .4); }
.wx .wx-v2case img { height: 34px; width: auto; filter: grayscale(1); }
.wx .wx-v2case h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 800; line-height: 1.2; letter-spacing: -.025em; color: var(--wx-color-heading); }
.wx .wx-v2case p { color: var(--wx-color-text-muted); }
.wx .wx-v2case__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.wx .wx-v2case__stats li { display: grid; gap: 4px; padding: 14px; border-radius: 16px; background: var(--wx-da2-cream); }
.wx .wx-v2case__stats b { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 800; letter-spacing: -.03em; color: var(--wx-color-heading); line-height: 1.05; }
.wx .wx-v2case__stats span { font-size: .8125rem; line-height: 1.35; color: var(--wx-color-text-muted); }
.wx .wx-v2case__more { font-weight: 700; color: var(--wx-color-heading); }
.wx .wx-v2case__more::after { content: " →"; }
.wx .wx-v2case__note { margin-top: 20px; font-size: .8125rem; color: var(--wx-color-text-muted); }

/* 9. Démo, encart et pied de page : neutres chauds, halos pastel, bande du bas encre conservée */
body.wx-da2 .wx .wx-demo__card { background: var(--wx-da2-aurora), #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border), 0 40px 80px -60px rgba(18, 20, 23, .4); }
body.wx-da2 .wx .wx-nudge { background: #FFFFFF; }
body.wx-da2 .wx.wx-footer {
  --wx-footer-muted: #4A5056; --wx-footer-accent: #121417;
  background: radial-gradient(40% 60% at 0% 0%, rgba(52, 211, 107, .14), transparent 70%), radial-gradient(40% 60% at 100% 100%, rgba(124, 196, 255, .16), transparent 70%), #F3F1EC;
  box-shadow: inset 0 1px 0 var(--wx-color-border);
}
body.wx-da2 .wx.wx-footer::before { content: none; }

/* 10. Parcours client en motion (includes/reel.php, assets/js/reel-v2.js) : à gauche les quatre étapes, à droite un
   téléphone où les canaux tournent comme une roulette, puis le support, la discussion WhatsApp et l'arrivée.
   Cadre de taille fixe ; seules opacity et transform changent (le trajet du plan : stroke-dashoffset). */
body.wx-da2 .wx.wx-parcours { background: var(--wx-da2-sky); border-radius: var(--wx-r-xl); margin-inline: var(--wx-inset); }
@media (min-width: 1520px) { body.wx-da2 .wx.wx-parcours { max-width: calc(1480px - 2 * var(--wx-inset)); margin-inline: auto; } }
.wx .wx-parcours__grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) { .wx .wx-parcours__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); } }
.wx .wx-parcours__copy { display: grid; gap: 20px; justify-items: start; }
.wx .wx-parcours__steps { display: grid; gap: 8px; width: 100%; max-width: 34em; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: wx-step; }
.wx .wx-parcours__steps li {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; margin: 0; padding: 12px 16px 12px 12px; border-radius: 18px;
  counter-increment: wx-step; transition: background-color 400ms var(--wx-ease-soft), box-shadow 400ms var(--wx-ease-soft);
}
.wx .wx-parcours__steps li::before {
  content: counter(wx-step); grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border); font: 500 .8125rem/1 var(--wx-font-mono); color: var(--wx-color-heading);
  transition: background-color 400ms var(--wx-ease-soft), color 400ms var(--wx-ease-soft);
}
.wx .wx-parcours__steps b { align-self: end; font-size: 1rem; line-height: 1.3; color: var(--wx-color-heading); }
.wx .wx-parcours__steps span { font-size: .9375rem; line-height: 1.5; color: var(--wx-color-text-muted); }
.wx .wx-parcours__steps li.is-on { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border), 0 18px 36px -28px rgba(18, 20, 23, .45); }
.wx .wx-parcours__steps li.is-on::before { background: #121417; color: #FFFFFF; box-shadow: none; }
.wx .wx-parcours__steps li.is-done::before { background: var(--wx-color-marker); box-shadow: none; }
.wx .wx-parcours__media { position: relative; display: grid; gap: 12px; justify-items: center; margin: 0; }
.wx .wx-parcours__media figcaption { font-size: var(--wx-fs-caption); color: var(--wx-color-text-muted); text-align: center; }

/* Téléphone */
.wx .wx-reel { position: relative; width: min(100%, 330px); }
.wx .wx-reel__phone { padding: 9px; border-radius: 46px; background: #121417; box-shadow: inset 0 0 0 1.5px #2C3136, 0 40px 80px -40px rgba(18, 20, 23, .6); }
.wx .wx-reel__screen { position: relative; overflow: hidden; aspect-ratio: 9 / 18; border-radius: 38px; background: #FAF9F6; isolation: isolate; }
.wx .wx-reel__island { position: absolute; top: 10px; left: 50%; z-index: 5; width: 84px; height: 24px; margin-left: -42px; border-radius: 999px; background: #121417; }
.wx .wx-reel__scene {
  position: absolute; inset: 0; display: flex; flex-direction: column; padding: 52px 16px 18px; opacity: 0; visibility: hidden;
  transform: translate3d(0, 14px, 0) scale(.985); transition: opacity 500ms var(--wx-ease), transform 600ms var(--wx-ease), visibility 0s linear 600ms;
}
.wx .wx-reel__scene.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 500ms var(--wx-ease), transform 600ms var(--wx-ease), visibility 0s; }
.wx .wx-reel.is-out .wx-reel__scene.is-on { opacity: 0; }
.wx .wx-reel [data-ch]:not(.is-current) { display: none; }
.wx .wx-reel__label { margin: 0; text-align: center; font: 500 .6875rem/1.2 var(--wx-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--wx-color-text-muted); }
.wx .wx-reel [data-src="instagram"] { --ch: var(--wx-ch-instagram); --ch-fill: var(--wx-ch-instagram-fill); }
.wx .wx-reel [data-src="facebook"] { --ch: var(--wx-ch-facebook); }
.wx .wx-reel [data-src="google"] { --ch: var(--wx-ch-google); }
.wx .wx-reel [data-src="sms"] { --ch: var(--wx-ch-sms); }
.wx .wx-reel [data-src="email"] { --ch: var(--wx-ch-email); }
.wx .wx-reel [data-src="qr"] { --ch: var(--wx-ch-qr); --ch-glyph: var(--wx-color-heading); }
.wx .wx-reel [data-src="display"] { --ch: var(--wx-ch-display); }
.wx .wx-reel [data-src="site"] { --ch: var(--wx-ch-site); }
.wx .wx-reel__ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--ch-fill, var(--ch)); color: var(--ch-glyph, #FFFFFF); }
.wx .wx-reel__ico .wx-ico { width: 19px; height: 19px; stroke-width: 2; }

/* Scène 1 : la roulette des canaux */
.wx .wx-reel__scene--spin {
  justify-content: center; gap: 18px;
  background: radial-gradient(120% 55% at 50% 0%, #E6F6EC 0%, transparent 62%), radial-gradient(90% 50% at 100% 100%, #E6EEFA 0%, transparent 62%), #FAF9F6;
}
.wx .wx-reel__window {
  position: relative; height: 290px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 28%, #000 72%, transparent 100%);
}
.wx .wx-reel__strip { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; will-change: transform; }
.wx .wx-reel__strip.is-moving { transition: transform 2600ms cubic-bezier(.12, .72, .14, 1); }
.wx .wx-reel__item { display: flex; align-items: center; gap: 12px; height: 58px; margin: 0; padding: 0 12px; opacity: .5; transition: opacity 300ms var(--wx-ease-soft); }
.wx .wx-reel__item b { flex: 1; min-width: 0; overflow: hidden; font-size: 1rem; font-weight: 750; color: var(--wx-color-heading); white-space: nowrap; text-overflow: ellipsis; }
.wx .wx-reel__go { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #25D366; opacity: 0; transform: scale(.6); transition: opacity 300ms var(--wx-ease-soft), transform 450ms var(--wx-ease); }
.wx .wx-reel__item.is-picked { opacity: 1; }
.wx .wx-reel__item.is-picked .wx-reel__go { opacity: 1; transform: none; }
.wx .wx-reel.is-landed .wx-reel__item:not(.is-picked) { opacity: .28; }
.wx .wx-reel__picker {
  position: absolute; top: 116px; left: 0; right: 0; z-index: 0; height: 58px; border-radius: 18px; background: #FFFFFF;
  box-shadow: inset 0 0 0 1.5px #121417, 0 14px 30px -20px rgba(18, 20, 23, .5); transition: background-color 350ms var(--wx-ease-soft), transform 450ms var(--wx-ease);
}
.wx .wx-reel.is-landed .wx-reel__picker { background: var(--wx-color-marker); transform: scale(1.03); }

/* Scène 2 : le support du canal, le client touche le bouton WhatsApp */
.wx .wx-reel__scene--ad { justify-content: center; background: #F1F0EC; }
.wx .wx-reel__ad { display: flex; flex-direction: column; gap: 10px; overflow: hidden; padding: 14px; border-radius: 22px; background: #FFFFFF; box-shadow: 0 26px 46px -30px rgba(18, 20, 23, .5); }
.wx .wx-reel__ad-head { display: flex; align-items: center; gap: 10px; line-height: 1.25; }
.wx .wx-reel__ad-head .wx-reel__ico { width: 32px; height: 32px; border-radius: 50%; }
.wx .wx-reel__ad-head .wx-reel__ico .wx-ico { width: 16px; height: 16px; }
.wx .wx-reel__ad-head b { display: block; font-size: .8125rem; color: var(--wx-color-heading); }
.wx .wx-reel__ad-head small { display: block; font-size: .6875rem; color: var(--wx-color-text-muted); }
.wx .wx-reel__photo { display: block; width: calc(100% + 28px); max-width: none; height: 168px; margin-inline: -14px; object-fit: cover; }
.wx .wx-reel__qr { display: grid; place-items: center; height: 168px; border-radius: 16px; background: #FFF6D6; }
.wx .wx-reel__qr .wx-ico { width: 104px; height: 104px; stroke-width: 1.6; color: #121417; }
.wx .wx-reel__ad-body { display: grid; gap: 6px; }
.wx .wx-reel__ad-body:empty { display: none; }
.wx .wx-reel__ad-title { font-size: .9375rem; line-height: 1.3; color: var(--wx-color-heading); }
.wx .wx-reel__ad-text { font-size: .8125rem; line-height: 1.45; color: var(--wx-color-text); }
.wx .wx-reel__ad-text u { color: #0A66D8; text-underline-offset: 2px; }
.wx .wx-reel__ad[data-src="sms"] .wx-reel__ad-text { padding: 10px 12px; border-radius: 18px 18px 18px 6px; background: #E9E9EB; color: #111B21; }
.wx .wx-reel__ad-actions { display: flex; gap: 6px; }
.wx .wx-reel__gtools { display: contents; }
.wx .wx-reel__gtools span { display: inline-flex; align-items: center; flex: none; min-height: 40px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px #DADCE0; font-size: .75rem; font-weight: 600; color: #1A73E8; }
.wx .wx-reel__cta {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1; min-width: 0; min-height: 40px; overflow: hidden; padding: 8px 14px;
  border-radius: 999px; background: #25D366; color: #FFFFFF; font-size: .8125rem; font-weight: 700; line-height: 1.2; text-align: center; transition: transform 200ms var(--wx-ease);
}
.wx .wx-reel__cta::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(255, 255, 255, .6); opacity: 0; transform: scale(.3); }
.wx .wx-reel.is-tapped .wx-reel__cta { transform: scale(.96); }
.wx .wx-reel.is-tapped .wx-reel__cta::after { animation: wx-reel-tap 700ms var(--wx-ease) both; }
@keyframes wx-reel-tap { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(4.5); } }

/* Scène 3 : la discussion, vue du téléphone du client (ses messages à droite) */
.wx .wx-reel__scene--chat { padding: 40px 0 0; background: #FFFFFF; }
.wx .wx-reel .wx-v2chat__head { padding: 6px 12px 10px 8px; }
.wx .wx-reel .wx-v2chat__avatar { width: 34px; height: 34px; font-size: .75rem; }
.wx .wx-reel__thread {
  position: relative; flex: 1; overflow: hidden; padding: 0 12px; background-color: #EFEAE2;
  background-image: radial-gradient(rgba(11, 20, 26, .055) 1px, transparent 1.4px), radial-gradient(rgba(11, 20, 26, .035) 1px, transparent 1.4px);
  background-size: 22px 22px, 22px 22px; background-position: 0 0, 11px 11px;
}
.wx .wx-reel__track { display: grid; gap: 8px; margin: 0; padding: 14px 0; list-style: none; transition: transform 700ms var(--wx-ease); }
.wx .wx-reel__sys { justify-self: center; max-width: 92%; padding: 5px 10px; border-radius: 8px; background: #FFF3C4; font-size: .6875rem; line-height: 1.35; color: #54656F; text-align: center; box-shadow: 0 1px .5px rgba(11, 20, 26, .1); }
.wx .wx-reel .wx-v2msg { max-width: 86%; padding: 8px 11px 6px; border-radius: 14px; font-size: .8125rem; line-height: 1.4; }
.wx .wx-reel .wx-v2msg--in { border-bottom-left-radius: 5px; }
.wx .wx-reel .wx-v2msg--out { border-bottom-right-radius: 5px; }
.wx .wx-reel .wx-v2msg small { margin-top: 4px; font-size: .5625rem; }
.wx .wx-reel .wx-v2slots { gap: 5px; margin-top: 8px; }
.wx .wx-reel .wx-v2slots span { padding: 5px 9px; font-size: .75rem; }
.wx .wx-reel:not(.is-enhanced) .wx-v2slots .is-picked, .wx .wx-reel.is-booked .wx-v2slots .is-picked { background: #121417; color: #FFFFFF; box-shadow: none; }
.wx .wx-reel .wx-v2note { gap: 10px; margin-inline: 4%; padding: 8px 10px; border-radius: 14px; }
.wx .wx-reel .wx-v2note__ico { width: 30px; height: 30px; border-radius: 10px; }
.wx .wx-reel .wx-v2note__ico svg { width: 16px; height: 16px; }
.wx .wx-reel [data-at] { transition: opacity 400ms var(--wx-ease), transform 400ms var(--wx-ease); }
.wx .wx-reel.is-enhanced [data-at]:not(.is-on) { opacity: 0; transform: translate3d(0, 8px, 0) scale(.98); }

/* Scène 4 : le jour du rendez-vous */
.wx .wx-reel__scene--visit { justify-content: center; gap: 14px; }
.wx .wx-reel__map { display: block; width: 100%; height: auto; }
.wx .wx-reel__map text { font-family: var(--wx-font-text); }
.wx .wx-reel__route { stroke-dasharray: 1; stroke-dashoffset: 0; }
.wx .wx-reel.is-enhanced .wx-reel__route { stroke-dashoffset: 1; }
.wx .wx-reel.is-enhanced.is-route .wx-reel__route { stroke-dashoffset: 0; transition: stroke-dashoffset 1400ms cubic-bezier(.45, 0, .2, 1); }
.wx .wx-reel :is(.wx-reel__pin, .wx-reel__pin-label) { transform-box: fill-box; transform-origin: 50% 100%; transition: opacity 300ms var(--wx-ease-soft), transform 500ms cubic-bezier(.34, 1.56, .64, 1); }
.wx .wx-reel.is-enhanced:not(.is-arrived) :is(.wx-reel__pin, .wx-reel__pin-label) { opacity: 0; transform: translate(0, -8px) scale(.6); }
.wx .wx-reel__arrive {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--wx-color-border), 0 18px 36px -26px rgba(18, 20, 23, .45); transition: opacity 450ms var(--wx-ease), transform 450ms var(--wx-ease);
}
.wx .wx-reel.is-enhanced:not(.is-arrived) .wx-reel__arrive { opacity: 0; transform: translate3d(0, 10px, 0); }
.wx .wx-reel__arrive-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #121417; color: #34D36B; }
.wx .wx-reel__arrive-ico .wx-ico { width: 20px; height: 20px; stroke-width: 2.4; }
.wx .wx-reel__arrive-txt { display: grid; gap: 2px; min-width: 0; line-height: 1.3; }
.wx .wx-reel__arrive-txt b { font-size: .9375rem; color: var(--wx-color-heading); }
.wx .wx-reel__arrive-txt span { font-size: .8125rem; color: var(--wx-color-text); }
.wx .wx-reel__arrive-txt small { font: 500 .625rem/1.3 var(--wx-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--wx-color-text-muted); }
@media (prefers-reduced-motion: reduce) {
  .wx .wx-reel__strip, .wx .wx-reel__track, .wx .wx-reel__scene { transition: none; }
}

/* 11. Page Walexia IA (includes/ia-page.php) : « En clair » en trois colonnes, différence avec un parcours à boutons
   (comparaison en listes), offre au démarrage et chaque mois. */
.wx .wx-ia-clair__grid { display: grid; gap: 16px; margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 900px) { .wx .wx-ia-clair__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wx .wx-ia-clair__col { display: grid; align-content: start; gap: 16px; padding: clamp(22px, 3vw, 30px); border-radius: 24px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx .wx-ia-clair__col--not { background: #F3F1EC; box-shadow: none; }
.wx .wx-ia-clair__label { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 .75rem/1.2 var(--wx-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--wx-color-heading); }
.wx .wx-ia-clair__label .wx-ico { width: 20px; height: 20px; padding: 6px; box-sizing: content-box; border-radius: 10px; background: var(--wx-color-marker); color: var(--wx-color-heading); stroke-width: 2; }
.wx .wx-ia-clair__col--not .wx-ia-clair__label .wx-ico { background: #E4E1DA; }
.wx .wx-ia-clair__col ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.wx .wx-ia-clair__col li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: .9375rem; line-height: 1.5; color: var(--wx-color-text); }
.wx .wx-ia-clair__col li .wx-ico { width: 18px; height: 18px; margin-top: 2px; color: #15803D; stroke-width: 2.2; }
.wx .wx-ia-clair__col--not li .wx-ico { color: var(--wx-color-text-muted); }
.wx .wx-compare--list .wx-compare__steps { gap: 10px; }
.wx .wx-compare--list .wx-compare__steps li { padding: 12px 16px 12px 46px; }
.wx .wx-compare--list .wx-compare__steps li::before, .wx .wx-compare--list .wx-compare__steps li + li::after { content: none; }
.wx .wx-compare--list .wx-compare__steps .wx-ico { position: absolute; top: 14px; left: 16px; width: 18px; height: 18px; color: var(--wx-color-text-muted); stroke-width: 2.2; }
.wx .wx-compare--list .wx-compare__col--wa .wx-compare__steps .wx-ico { color: #15803D; }
.wx .wx-compare--list .wx-compare__head span { display: inline-flex; align-items: center; gap: 8px; }
.wx .wx-ia-offre__grid { display: grid; gap: 16px; margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 900px) { .wx .wx-ia-offre__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wx .wx-ia-offre__card { display: grid; align-content: start; gap: 14px; padding: clamp(24px, 3vw, 34px); border-radius: 24px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border), 0 24px 48px -40px rgba(18, 20, 23, .45); }
.wx .wx-ia-offre__when { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 .75rem/1.2 var(--wx-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--wx-color-text-muted); }
.wx .wx-ia-offre__when .wx-ico { width: 20px; height: 20px; padding: 6px; box-sizing: content-box; border-radius: 10px; background: #121417; color: #34D36B; stroke-width: 2; }
.wx .wx-ia-offre__card h3 { margin: 0; font-family: var(--wx-font-display); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--wx-color-heading); }
.wx .wx-ia-offre__card .wx-checklist { gap: 10px; margin: 4px 0 0; padding: 0; }
.wx .wx-ia-offre__link { margin: 24px 0 0; }
body.wx-da2 .wx.wx-ia-offre { background: var(--wx-da2-lilac); border-radius: var(--wx-r-xl); margin-inline: var(--wx-inset); }
@media (min-width: 1520px) { body.wx-da2 .wx.wx-ia-offre { max-width: calc(1480px - 2 * var(--wx-inset)); margin-inline: auto; } }

/* 12. Valeur ajoutée des pages (includes/page-values.php) : trois atouts en ligne, puis une bande « clé en main » */
.wx .wx-valeur__grid { display: grid; gap: 16px; margin-top: clamp(24px, 3vw, 36px); }
@media (min-width: 900px) { .wx .wx-valeur__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px) { .wx .wx-valeur__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .wx .wx-valeur__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wx .wx-valeur__item { display: grid; align-content: start; gap: 8px; padding: clamp(20px, 2.6vw, 28px); border-radius: 22px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx .wx-valeur__ico { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 6px; border-radius: 13px; background: var(--wx-color-marker); color: var(--wx-color-heading); }
.wx .wx-valeur__ico .wx-ico { width: 21px; height: 21px; stroke-width: 2; }
.wx .wx-valeur__item b { font-size: 1.0625rem; line-height: 1.3; color: var(--wx-color-heading); }
.wx .wx-valeur__item p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--wx-color-text-muted); }
.wx .wx-valeur__band { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 16px 0 0; padding: 16px 20px; border-radius: 18px; background: #121417; font-size: .9375rem; line-height: 1.45; color: #F4F6F8; }
.wx .wx-valeur__key { flex: none; padding: 5px 11px; border-radius: 999px; background: #34D36B; font: 500 .6875rem/1 var(--wx-font-mono); letter-spacing: .08em; text-transform: uppercase; color: #121417; }
.wx .wx-valeur__band > span:not(.wx-valeur__key) { flex: 1 1 320px; }
body.wx-da2 .wx.wx-valeur .wx-valeur__band a { flex: none; font-weight: 700; color: #F4F6F8; text-decoration: underline; text-decoration-color: #34D36B; text-decoration-thickness: 2px; text-underline-offset: 4px; }
body.wx-da2 .wx.wx-valeur .wx-valeur__band a:hover { text-decoration-color: #F4F6F8; }

/* 13. Cas clients par secteur (blocks/case-library, assets/js/cases-v2.js) : neuf onglets en pastilles, un secteur à la
   fois, cartes en cascade et chiffres animés ; un secteur sans cas publié montre sa carte « prochain cas client ». */
body.wx-da2 .wx .wx-caselib__sectors { display: flex; flex-wrap: wrap; gap: 8px; }
body.wx-da2 .wx .wx-caselib__sector {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px 6px 6px; border: 0; border-radius: 999px; background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--wx-color-border); font: inherit; color: var(--wx-color-heading); cursor: pointer;
  transition: background-color 250ms var(--wx-ease-soft), box-shadow 250ms var(--wx-ease-soft), transform 200ms var(--wx-ease);
}
body.wx-da2 .wx .wx-caselib__sector:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--wx-color-border-strong); }
body.wx-da2 .wx .wx-caselib__sector.is-active { background: #121417; color: #FFFFFF; box-shadow: 0 12px 26px -18px rgba(18, 20, 23, .6); }
body.wx-da2 .wx .wx-caselib__sector:focus-visible { outline: 2px solid var(--wx-color-accent); outline-offset: 2px; }
body.wx-da2 .wx .wx-caselib__sector-ico { width: 36px; height: 36px; border-radius: 50%; background: var(--wx-color-marker); color: var(--wx-color-heading); }
body.wx-da2 .wx .wx-caselib__sector-ico .wx-ico { width: 18px; height: 18px; }
body.wx-da2 .wx .wx-caselib__sector b { font-size: .9375rem; font-weight: 700; white-space: nowrap; }
body.wx-da2 .wx .wx-caselib__sector-count { padding: 3px 9px; border-radius: 999px; background: #34D36B; color: #121417; font: 500 .6875rem/1.2 var(--wx-font-mono); letter-spacing: .04em; }
body.wx-da2 .wx .wx-caselib__sector.is-soon .wx-caselib__sector-count { background: #F0EEE8; color: var(--wx-color-text-muted); }
body.wx-da2 .wx .wx-caselib__sector.is-active.is-soon .wx-caselib__sector-count { background: rgba(255, 255, 255, .16); color: #F4F6F8; }
body.wx-da2 .wx .wx-caselib__group-title { margin: 0; font: 500 .75rem/1.3 var(--wx-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--wx-color-text-muted); }
/* Avant le script : seul le premier secteur (sans décalage à l'arrivée du script) ; sans JavaScript : tout est visible. */
.wx-js .wx .wx-caselib:not(.is-enhanced) .wx-caselib__group:not(.is-first) { display: none; }
.wx .wx-caselib__group[hidden] { display: none; }
body.wx-da2 .wx .wx-casecard { position: relative; border-radius: 24px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border), 0 24px 48px -40px rgba(18, 20, 23, .45); }
body.wx-da2 .wx .wx-casecard::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: 24px 24px 0 0; pointer-events: none;
  background: linear-gradient(90deg, #34D36B, #7CC4FF); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--wx-ease);
}
body.wx-da2 .wx .wx-caselib__group.is-shown .wx-casecard::before, body.wx-da2 .wx .wx-casecard:hover::before { transform: none; }
body.wx-da2 .wx .wx-casecard__cat { font: 500 .6875rem/1.2 var(--wx-font-mono); letter-spacing: .1em; color: var(--wx-color-text-muted); }
body.wx-da2 .wx .wx-casecard__stats b { font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.wx .wx-caselib.is-enhanced .wx-caselib__group .wx-casecard { opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); }
.wx .wx-caselib.is-enhanced .wx-caselib__group.is-shown .wx-casecard {
  opacity: 1; transform: none;
  transition: opacity 500ms var(--wx-ease) calc(var(--i, 0) * 110ms), transform 650ms var(--wx-ease) calc(var(--i, 0) * 110ms), box-shadow 250ms var(--wx-ease-soft);
}
.wx .wx-caselib.is-enhanced .wx-caselib__group.is-shown .wx-casecard:hover { transform: translate3d(0, -4px, 0); transition-delay: 0s; box-shadow: inset 0 0 0 1px var(--wx-color-border-strong), 0 30px 60px -36px rgba(18, 20, 23, .5); }
body.wx-da2 .wx .wx-casecard--soon { background: radial-gradient(70% 80% at 100% 0%, rgba(52, 211, 107, .14), transparent 70%), #FFFFFF; }
body.wx-da2 .wx .wx-casecard--soon .wx-casecard__title { font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); }
.wx .wx-casecard__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 6px 0 0; }
body.wx-da2 .wx .wx-casecard__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--wx-color-heading); text-decoration: underline; text-decoration-color: var(--wx-color-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
body.wx-da2 .wx .wx-casecard__link .wx-ico { width: 16px; height: 16px; }
body.wx-da2 .wx .wx-casecard__link--demo { padding: 8px 16px; border-radius: 999px; background: #121417; color: #FFFFFF; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .wx .wx-caselib.is-enhanced .wx-caselib__group .wx-casecard { opacity: 1; transform: none; }
}
@media (max-width: 599px) {
  body.wx-da2 .wx .wx-caselib__sectors { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px 8px; scrollbar-width: none; }
  body.wx-da2 .wx .wx-caselib__sectors::-webkit-scrollbar { display: none; }
  body.wx-da2 .wx .wx-caselib__sector { flex: none; }
}

/* 14. Scoring IA (includes/scoring.php) : trois étapes à gauche, fiche transmise d'exemple à droite ; le score monte
   jusqu'à sa valeur et la jauge se remplit quand la fiche apparaît (classe is-inview de walexia.js). */
@property --wx-n { syntax: '<integer>'; inherits: false; initial-value: 0; }
body.wx-da2 .wx.wx-scoring { background: var(--wx-da2-mint); border-radius: var(--wx-r-xl); margin-inline: var(--wx-inset); }
@media (min-width: 1520px) { body.wx-da2 .wx.wx-scoring { max-width: calc(1480px - 2 * var(--wx-inset)); margin-inline: auto; } }
.wx .wx-scoring__grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) { .wx .wx-scoring__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); } }
.wx .wx-scoring__copy { display: grid; gap: 20px; justify-items: start; }
.wx .wx-scoring__steps { display: grid; gap: 14px; margin: 4px 0 0; padding: 0; list-style: none; counter-reset: wx-sc; }
.wx .wx-scoring__steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; counter-increment: wx-sc; }
.wx .wx-scoring__steps li::before { content: counter(wx-sc); grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #121417; color: #34D36B; font: 500 .8125rem/1 var(--wx-font-mono); }
.wx .wx-scoring__steps b { font-size: 1rem; color: var(--wx-color-heading); }
.wx .wx-scoring__steps span { font-size: .9375rem; line-height: 1.5; color: var(--wx-color-text-muted); }
.wx .wx-scoring__note { margin: 0; font: 500 .75rem/1.4 var(--wx-font-mono); letter-spacing: .04em; color: var(--wx-color-text-muted); }
.wx .wx-scoring__card { display: grid; gap: 18px; margin: 0; padding: clamp(22px, 3vw, 30px); border-radius: 26px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border), 0 36px 70px -44px rgba(18, 20, 23, .5); }
.wx .wx-scoring__tag { justify-self: start; margin: 0; padding: 5px 11px; border-radius: 999px; background: #F3F1EC; font: 500 .6875rem/1 var(--wx-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--wx-color-text-muted); }
.wx .wx-scoring__who { display: flex; align-items: center; gap: 12px; }
.wx .wx-scoring__avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: #E6EEFA; font-weight: 800; font-size: .8125rem; color: #121417; }
.wx .wx-scoring__id { display: grid; min-width: 0; line-height: 1.3; }
.wx .wx-scoring__id b { font-size: 1rem; color: var(--wx-color-heading); }
.wx .wx-scoring__id small { font-size: .8125rem; color: var(--wx-color-text-muted); }
.wx .wx-scoring__prio { margin-left: auto; padding: 5px 11px; border-radius: 999px; background: #121417; color: #34D36B; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.wx .wx-scoring__score { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; column-gap: 6px; row-gap: 10px; padding: 16px 18px; border-radius: 18px; background: #FAF9F6; box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx .wx-scoring__score .wx-scoring__label { grid-column: 1 / -1; }
.wx .wx-scoring__label { margin: 0; font: 500 .6875rem/1 var(--wx-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--wx-color-text-muted); }
.wx .wx-scoring__value { --wx-n: 0; counter-reset: wx-n var(--wx-n); font: 800 2.75rem/1 var(--wx-font-display); letter-spacing: -.04em; color: #121417; font-variant-numeric: tabular-nums; transition: --wx-n 1300ms cubic-bezier(.2, .7, .2, 1) 200ms; }
/* Le compteur est posé sur l'élément : le pseudo-élément n'hérite pas de --wx-n (propriété non héritée). */
.wx .wx-scoring__value::before { content: counter(wx-n); }
.wx .wx-scoring__max { font-weight: 700; color: var(--wx-color-text-muted); }
.wx .wx-scoring__bar { grid-column: 1 / -1; position: relative; height: 10px; overflow: hidden; border-radius: 999px; background: #E9EDE8; }
.wx .wx-scoring__bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #34D36B, #15803D); transform: scaleX(0); transform-origin: left; transition: transform 1300ms cubic-bezier(.2, .7, .2, 1) 200ms; }
.wx .wx-scoring__card.is-inview .wx-scoring__value, html:not(.wx-js) .wx .wx-scoring__value { --wx-n: var(--to); }
.wx .wx-scoring__card.is-inview .wx-scoring__bar i, html:not(.wx-js) .wx .wx-scoring__bar i { transform: scaleX(var(--p)); }
.wx .wx-scoring__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.wx .wx-scoring__facts div { display: grid; gap: 4px; }
.wx .wx-scoring__facts dt { font: 500 .6875rem/1 var(--wx-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--wx-color-text-muted); }
.wx .wx-scoring__facts dd { margin: 0; font-size: .9375rem; font-weight: 700; line-height: 1.35; color: var(--wx-color-heading); }
.wx .wx-scoring__summary { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--wx-color-border); }
.wx .wx-scoring__summary ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wx .wx-scoring__summary li { position: relative; padding-left: 18px; font-size: .9375rem; line-height: 1.45; color: var(--wx-color-text); }
.wx .wx-scoring__summary li::before { content: ""; position: absolute; top: .55em; left: 2px; width: 7px; height: 7px; border-radius: 50%; background: #34D36B; }
.wx-js .wx .wx-scoring__card:not(.is-inview) .wx-scoring__summary li { opacity: 0; transform: translate3d(0, 6px, 0); }
.wx .wx-scoring__summary li { transition: opacity 450ms var(--wx-ease) calc(700ms + var(--i, 0) * 180ms), transform 450ms var(--wx-ease) calc(700ms + var(--i, 0) * 180ms); }
.wx .wx-scoring__foot { margin: 0; font-size: .8125rem; font-weight: 700; color: #15803D; }
@media (prefers-reduced-motion: reduce) {
  .wx .wx-scoring__value, .wx .wx-scoring__bar i, .wx .wx-scoring__summary li { transition: none; }
}
body.wx-da2 .wx .wx-casecard__title { font-family: var(--wx-font-display); font-weight: 800; letter-spacing: -.03em; }

/* 15. Page Tarifs (5.35.0) : on comprend que la fiche de cadrage se remplit, ce n'est pas une démonstration.
   - En haut, exemple de fiche (includes/tarifs-v2.php, assets/js/cadrage-v2.js) : champs vides en pointillés, valeurs
     qui s'écrivent, coches, compteur et barre, puis « Prête à envoyer » et « Envoyée ». Sans JavaScript : fiche remplie.
   - Configurateur présenté comme un formulaire : fond à points, trois temps reliés, repère « Commencez ici » et premiers
     choix qui s'allument doucement tant que rien n'est choisi, fiche en direct au même dessin que l'exemple du haut. */
.wx .wx-cadrage { display: grid; justify-items: center; gap: 34px; width: 100%; max-width: 470px; margin-inline: auto; }
.wx .wx-cadrage__sheet { position: relative; isolation: isolate; display: grid; gap: 14px; width: 100%; padding: clamp(20px, 2.6vw, 28px); }
.wx .wx-cadrage__sheet::before, .wx .wx-cadrage__sheet::after { content: ""; position: absolute; inset: 0; border-radius: 26px; pointer-events: none; }
.wx .wx-cadrage__sheet::before { z-index: -2; background: #FCF7EA; box-shadow: inset 0 0 0 1px var(--wx-color-border); transform: rotate(-4deg) translate3d(-8px, 10px, 0); }
.wx .wx-cadrage__sheet::after { z-index: -1; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border), 0 40px 80px -46px rgba(18, 20, 23, .55); }
.wx .wx-cadrage__head { display: flex; align-items: center; gap: 12px; margin: 0; }
.wx .wx-cadrage__ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: #121417; color: #34D36B; }
.wx .wx-cadrage__ico .wx-ico { width: 20px; height: 20px; }
.wx .wx-cadrage__head > span:nth-child(2) { display: grid; min-width: 0; line-height: 1.3; }
.wx .wx-cadrage__head b { font: 800 1.0625rem/1.25 var(--wx-font-display); letter-spacing: -.02em; color: var(--wx-color-heading); }
.wx .wx-cadrage__head small { font: 500 .6875rem/1.4 var(--wx-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--wx-color-text-muted); }
.wx .wx-cadrage__count { margin-left: auto; padding: 6px 11px; border-radius: 999px; background: #F3F1EC; font: 500 .8125rem/1 var(--wx-font-mono); font-variant-numeric: tabular-nums; color: var(--wx-color-text-muted); white-space: nowrap; }
.wx .wx-cadrage__n { font-weight: 700; color: var(--wx-color-heading); }
.wx .wx-cadrage__bar { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: #EFEDE8; }
.wx .wx-cadrage__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #34D36B, #7BE5A3); transform: scaleX(var(--p, 1)); transform-origin: left; transition: transform 600ms var(--wx-ease); }
.wx .wx-cadrage__rows { display: grid; margin: 0; padding: 0; list-style: none; }
.wx .wx-cadrage__rows li { position: relative; display: grid; grid-template-columns: minmax(92px, 34%) minmax(0, 1fr) 22px; align-items: center; column-gap: 12px; min-height: 44px; padding: 8px 10px; }
.wx .wx-cadrage__rows li + li { border-top: 1px dashed var(--wx-color-border-strong); }
.wx .wx-cadrage__rows span { grid-area: 1 / 1; font: 500 .6875rem/1.3 var(--wx-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--wx-color-text-muted); }
.wx .wx-cadrage__rows b { grid-area: 1 / 2; font-size: .875rem; font-weight: 700; line-height: 1.35; color: var(--wx-color-heading); }
/* Champ vide : trait gris à la place de la réponse */
.wx .wx-cadrage__rows li::before { content: ""; grid-area: 1 / 2; justify-self: start; width: 72%; height: 10px; border-radius: 6px; background: #EFEDE8; opacity: 0; }
.wx .wx-cadrage__tick { grid-area: 1 / 3; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #121417; color: #34D36B; }
.wx .wx-cadrage__tick .wx-ico { width: 12px; height: 12px; stroke-width: 3.2; }
.wx .wx-cadrage__status { display: grid; margin: 4px 0 0; }
.wx .wx-cadrage__status > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px; font-size: .9375rem; font-weight: 700; transition: opacity 350ms var(--wx-ease), transform 450ms var(--wx-spring); }
.wx .wx-cadrage__ready { background: #121417; color: #FFFFFF; }
.wx .wx-cadrage__sent { background: linear-gradient(90deg, #34D36B, #7BE5A3); color: #121417; opacity: 0; transform: translate3d(0, 8px, 0); }
.wx .wx-cadrage__sent .wx-ico { width: 18px; height: 18px; }
body.wx-da2 .wx a.wx-cadrage__you { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px #121417; color: #121417; font-weight: 800; text-decoration: none; transition: background-color 180ms var(--wx-ease-soft), color 180ms var(--wx-ease-soft); }
body.wx-da2 .wx a.wx-cadrage__you:hover { background: #121417; color: #FFFFFF; }
body.wx-da2 .wx a.wx-cadrage__you:focus-visible { outline: 2px solid var(--wx-focus); outline-offset: 3px; }
.wx .wx-cadrage__you .wx-ico { width: 18px; height: 18px; }
/* Petit écran : intitulé au-dessus de la réponse, lien « À vous » plus compact. */
@media (max-width: 479px) {
  .wx .wx-cadrage__rows li { grid-template-columns: minmax(0, 1fr) 22px; row-gap: 4px; }
  .wx .wx-cadrage__rows b, .wx .wx-cadrage__rows li::before { grid-area: 2 / 1; }
  .wx .wx-cadrage__tick { grid-area: 1 / 2 / span 2; }
  body.wx-da2 .wx a.wx-cadrage__you { padding: 0 16px; font-size: .875rem; }
}
/* Animation (classe is-anim posée par cadrage-v2.js) */
.wx .wx-cadrage.is-anim .wx-cadrage__rows li::before { opacity: 1; transition: opacity 200ms var(--wx-ease-soft); }
.wx .wx-cadrage.is-anim .wx-cadrage__rows li.is-on::before { opacity: 0; }
.wx .wx-cadrage.is-anim .wx-cadrage__rows b { clip-path: inset(0 100% 0 0); transition: clip-path 750ms steps(18, end); }
.wx .wx-cadrage.is-anim .wx-cadrage__rows li.is-on b { clip-path: inset(0 -4px 0 0); }
.wx .wx-cadrage.is-anim .wx-cadrage__tick { transform: scale(0); transition: transform 420ms var(--wx-spring) 700ms; }
.wx .wx-cadrage.is-anim li.is-on .wx-cadrage__tick { transform: none; }
.wx .wx-cadrage.is-anim .wx-cadrage__rows li { transition: background-color 300ms var(--wx-ease-soft), box-shadow 300ms var(--wx-ease-soft); }
.wx .wx-cadrage.is-anim:not(.is-ready) li.is-new { background: linear-gradient(90deg, rgba(52, 211, 107, .13), transparent 85%); box-shadow: inset 2px 0 0 #34D36B; }
.wx .wx-cadrage.is-anim:not(.is-ready) li.is-new b::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.15em; background: #121417; animation: wx-cad-caret 900ms steps(1) infinite; }
.wx .wx-cadrage.is-anim:not(.is-ready) .wx-cadrage__ready { opacity: .22; }
.wx .wx-cadrage.is-ready:not(.is-sent) .wx-cadrage__ready { animation: wx-cad-pop 520ms var(--wx-spring); }
.wx .wx-cadrage.is-sent .wx-cadrage__ready { opacity: 0; transform: translate3d(0, -8px, 0); }
.wx .wx-cadrage.is-sent .wx-cadrage__sent { opacity: 1; transform: none; }
.wx .wx-cadrage.is-sent .wx-cadrage__sent .wx-ico { animation: wx-cad-fly 700ms var(--wx-ease) both; }
.wx .wx-cadrage.is-sent .wx-cadrage__sheet { animation: wx-cad-lift 900ms var(--wx-ease); }
.wx .wx-cadrage.is-reset :is(.wx-cadrage__rows, .wx-cadrage__status) { opacity: 0; transition: opacity 400ms var(--wx-ease-soft); }
.wx .wx-cadrage.is-reset :is(.wx-cadrage__rows b, .wx-cadrage__tick, .wx-cadrage__status > span) { transition: none; }
.wx .wx-cadrage :is(.wx-cadrage__rows, .wx-cadrage__status) { transition: opacity 400ms var(--wx-ease-soft); }
@keyframes wx-cad-caret { 50% { opacity: 0; } }
@keyframes wx-cad-pop { 0% { transform: scale(.96); } 45% { transform: scale(1.04); } 100% { transform: none; } }
@keyframes wx-cad-fly { from { opacity: 0; transform: translate3d(-18px, 8px, 0) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes wx-cad-lift { 0%, 100% { transform: none; } 40% { transform: translate3d(0, -8px, 0) rotate(.6deg); } }
@keyframes wx-cad-bob { 0%, 100% { transform: none; } 50% { transform: translate3d(0, 4px, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .wx .wx-cadrage__you .wx-ico { animation: wx-cad-bob 1.6s ease-in-out infinite; }
}

/* Section du configurateur : fond à points (feuille à remplir), surtitre en pastille, trois temps reliés. */
body.wx-da2 .wx .wx-cfg-spot { background: radial-gradient(circle at 1px 1px, rgba(18, 20, 23, .1) 1px, transparent 1.6px) 0 0 / 22px 22px, var(--wx-da2-mint); box-shadow: inset 0 0 0 1px var(--wx-color-border); }
body.wx-da2 .wx.wx-cfg-section .wx-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; border-radius: 999px; background: #121417; color: #FFFFFF; }
body.wx-da2 .wx.wx-cfg-section .wx-eyebrow.wx-eyebrow--dot::before { content: ""; position: static; flex: none; width: 7px; height: 7px; margin: 0; border-radius: 50%; background: #34D36B; box-shadow: 0 0 0 4px rgba(52, 211, 107, .25); }
body.wx-da2 .wx .wx-cfg-spot .wx-cfg-trio li { position: relative; align-content: start; background: none; box-shadow: none; padding: 10px 14px; }
body.wx-da2 .wx .wx-cfg-spot .wx-cfg-trio__ico { position: relative; z-index: 1; width: 50px; height: 50px; border-radius: 50%; background: #121417; color: #34D36B; box-shadow: 0 0 0 6px var(--wx-da2-mint); }
body.wx-da2 .wx .wx-cfg-spot .wx-cfg-trio b { font: 800 1rem/1.3 var(--wx-font-display); letter-spacing: -.015em; }
/* Trait pointillé entre deux temps : vertical sur mobile, horizontal à partir de 760 px */
body.wx-da2 .wx .wx-cfg-spot .wx-cfg-trio li:not(:last-child)::after { content: ""; position: absolute; top: 66px; bottom: -14px; left: 38px; width: 2px; background: repeating-linear-gradient(180deg, rgba(18, 20, 23, .32) 0 6px, transparent 6px 12px); transform-origin: top; --lx: 1; --ly: 0; }
@media (min-width: 760px) {
  body.wx-da2 .wx .wx-cfg-spot .wx-cfg-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 880px; }
  body.wx-da2 .wx .wx-cfg-spot .wx-cfg-trio li { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 6px; text-align: center; }
  body.wx-da2 .wx .wx-cfg-spot .wx-cfg-trio__ico { grid-row: auto; margin-bottom: 6px; }
  body.wx-da2 .wx .wx-cfg-spot .wx-cfg-trio li:not(:last-child)::after { top: 34px; bottom: auto; left: calc(50% + 40px); right: calc(-50% + 40px); width: auto; height: 2px; background: repeating-linear-gradient(90deg, rgba(18, 20, 23, .32) 0 6px, transparent 6px 12px); transform-origin: left; --lx: 0; --ly: 1; }
}
.wx .wx-cfg-formnote { display: flex; align-items: center; justify-content: center; gap: 9px; max-width: 700px; margin: 0 auto clamp(22px, 3vw, 30px); font-size: .875rem; line-height: 1.45; color: var(--wx-color-text-muted); }
.wx .wx-cfg-formnote .wx-ico { flex: none; width: 18px; height: 18px; color: var(--wx-color-heading); }
body.wx-da2 .wx .wx-cfg-spot .wx.wx-cfg { border-radius: 28px; box-shadow: inset 0 0 0 1px var(--wx-color-border-strong), 0 44px 90px -54px rgba(18, 20, 23, .55); }
@keyframes wx-cad-line { from { transform: scale(var(--lx), var(--ly)); } to { transform: none; } }
@keyframes wx-cad-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(1.3); } }
@media (prefers-reduced-motion: no-preference) {
  .wx-js body.wx-da2 .wx .wx-cfg-spot .wx-cfg-trio:not(.is-inview) li::after { transform: scale(var(--lx), var(--ly)); }
  body.wx-da2 .wx .wx-cfg-spot .wx-cfg-trio.is-inview li::after { animation: wx-cad-line 620ms var(--wx-ease) both; animation-delay: calc(var(--i, 0) * 160ms + 480ms); }
  body.wx-da2 .wx.wx-cfg-section .wx-eyebrow.wx-eyebrow--dot::before { animation: wx-cad-dot 2s ease-in-out infinite; }
}

/* Dans le formulaire : repère « Commencez ici » (view.js, tant que rien n'est choisi), choix qui s'allument l'un après
   l'autre, cartes qui se soulèvent au survol, choix retenu cerclé d'encre. */
.wx .wx-cfg__start { display: flex; width: max-content; max-width: 100%; align-items: center; gap: 10px; max-height: 80px; margin: 18px 0 -8px !important; padding: 9px 16px 9px 12px; overflow: hidden; border-radius: 22px; background: #121417; color: #FFFFFF; font-size: .9375rem; font-weight: 700; transition: opacity 260ms var(--wx-ease), transform 260ms var(--wx-ease), max-height 260ms var(--wx-ease), margin 260ms var(--wx-ease), padding 260ms var(--wx-ease); }
.wx .wx-cfg__start .wx-ico { flex: none; width: 18px; height: 18px; color: #34D36B; transform: rotate(90deg); }
.wx .wx-cfg__start.is-gone { max-height: 0; margin: 0 !important; padding-block: 0; opacity: 0; transform: translate3d(0, -6px, 0); }
body.wx-da2 .wx .wx-cfg__opts--cards .wx-cfg__optbox { transition: transform 200ms var(--wx-ease), box-shadow 200ms var(--wx-ease-soft), background-color 200ms var(--wx-ease-soft); }
body.wx-da2 .wx .wx-cfg__opts--cards .wx-cfg__opt:hover .wx-cfg__optbox { transform: translate3d(0, -2px, 0); box-shadow: inset 0 0 0 1.5px #121417, 0 16px 28px -20px rgba(18, 20, 23, .55); }
body.wx-da2 .wx .wx-cfg__opt input:checked + .wx-cfg__optbox { background: var(--wx-da2-mint); box-shadow: inset 0 0 0 2px #121417; }
body.wx-da2 .wx .wx-cfg__opts:not(.wx-cfg__opts--cards) .wx-cfg__opt input:checked + .wx-cfg__optbox { background: #121417; color: #FFFFFF; box-shadow: none; }
body.wx-da2 .wx .wx-cfg__opt input:checked + .wx-cfg__optbox .wx-cfg__optcheck { background: #34D36B; color: #121417; }
body.wx-da2 .wx .wx-cfg__opticon { background: #F3F1EC; color: #121417; }
body.wx-da2 .wx .wx-cfg__opt input:checked + .wx-cfg__optbox .wx-cfg__opticon { background: #121417; color: #34D36B; }
@keyframes wx-cad-point { 0%, 100% { transform: rotate(90deg); } 50% { transform: rotate(90deg) translate3d(4px, 0, 0); } }
@keyframes wx-cad-invite { 0%, 100% { opacity: 0; } 22% { opacity: .95; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .wx .wx-cfg__start { animation: wx-cfg-pop 420ms var(--wx-spring) 300ms backwards; }
  .wx .wx-cfg__start .wx-ico { animation: wx-cad-point 1.4s ease-in-out infinite; }
  .wx .wx-cfg.is-fresh .wx-cfg__step > .wx-cfg__q:first-of-type .wx-cfg__opt::after { content: ""; position: absolute; inset: 0; border-radius: 14px; box-shadow: 0 0 0 2px #34D36B; opacity: 0; pointer-events: none; animation: wx-cad-invite 3.2s ease-in-out infinite; animation-delay: calc(var(--o, 0) * 110ms + 1200ms); }
  .wx .wx-cfg.is-fresh .wx-cfg__step > .wx-cfg__q:first-of-type .wx-cfg__opts--cards .wx-cfg__opt::after { border-radius: 18px; }
}

/* Fiche en direct (grand écran) : même dessin que l'exemple du haut, champs vides en traits gris. */
@media (min-width: 980px) {
  body.wx-da2 .wx .wx-cfg__layout.has-live .wx-cfg__live { gap: 12px; border-radius: 22px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border-strong), 0 30px 60px -44px rgba(18, 20, 23, .55); }
}
body.wx-da2 .wx .wx-cfg__livehead b { font-family: var(--wx-font-display); font-weight: 800; letter-spacing: -.02em; }
body.wx-da2 .wx .wx-cfg__livehead small { font: 500 .6875rem/1.4 var(--wx-font-mono); letter-spacing: .06em; text-transform: uppercase; }
body.wx-da2 .wx .wx-cfg__livering { width: 54px; height: 54px; background: conic-gradient(#34D36B calc(var(--p) * 1%), #EFEDE8 0); }
body.wx-da2 .wx .wx-cfg__livering b { width: 44px; height: 44px; font: 700 .75rem/1 var(--wx-font-mono) !important; color: var(--wx-color-heading); }
body.wx-da2 .wx .wx-cfg__livelist { gap: 0; }
body.wx-da2 .wx .wx-cfg__livelist li { gap: 5px; padding: 9px 4px; }
body.wx-da2 .wx .wx-cfg__livelist li + li { border-top: 1px dashed var(--wx-color-border-strong); }
body.wx-da2 .wx .wx-cfg__livelist span { font: 500 .625rem/1.3 var(--wx-font-mono); letter-spacing: .08em; }
body.wx-da2 .wx .wx-cfg__livelist b { align-items: center; padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: .8125rem; font-weight: 700; color: var(--wx-color-heading); }
body.wx-da2 .wx .wx-cfg__livelist b svg { stroke: #34D36B; }
body.wx-da2 .wx .wx-cfg__livelist .is-empty b { width: 70%; height: 9px; overflow: hidden; border-radius: 6px; background: #EFEDE8; box-shadow: none; color: transparent; font-size: 0; }
@keyframes wx-cad-flash { from { background-color: rgba(52, 211, 107, .18); } to { background-color: transparent; } }
@media (prefers-reduced-motion: no-preference) {
  body.wx-da2 .wx .wx-cfg__livelist .is-new { animation: wx-cad-flash 1.2s var(--wx-ease-soft) both; }
}
/* Bouton flottant en encre, comme les autres boutons principaux */
body.wx-da2 .wx .wx-stickycta { background: #121417; color: #FFFFFF; }
body.wx-da2 .wx .wx-stickycta .wx-ico { color: #34D36B; }
body.wx-da2 .wx .wx-stickycta:hover { background: #2A2F35; }

/* 16. Base de connaissances (page Walexia IA, includes/ia-page.php) : trois étapes à gauche ; à droite, les sources lues
   tour à tour, la base qui se remplit par thème et la réponse qui cite ses sources (classe is-inview de walexia.js). */
body.wx-da2 .wx.wx-kb { background: var(--wx-da2-sky); border-radius: var(--wx-r-xl); margin-inline: var(--wx-inset); }
@media (min-width: 1520px) { body.wx-da2 .wx.wx-kb { max-width: calc(1480px - 2 * var(--wx-inset)); margin-inline: auto; } }
.wx .wx-kb__grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
.wx .wx-kb__copy .wx-section-head { margin: 0 0 6px; }
@media (min-width: 960px) { .wx .wx-kb__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); } }
.wx .wx-kb__copy { display: grid; gap: 22px; }
.wx .wx-kb__steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: wx-kb; }
.wx .wx-kb__steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; counter-increment: wx-kb; }
.wx .wx-kb__steps li::before { content: counter(wx-kb); grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #121417; color: #34D36B; font: 500 .8125rem/1 var(--wx-font-mono); }
.wx .wx-kb__steps b { font-size: 1.0625rem; color: var(--wx-color-heading); }
.wx .wx-kb__steps span { font-size: .9375rem; line-height: 1.5; color: var(--wx-color-text-muted); }
.wx .wx-kb__note { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 14px 16px; border-radius: 16px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border); font-size: .9375rem; font-weight: 600; line-height: 1.5; color: var(--wx-color-heading); }
.wx .wx-kb__note .wx-ico { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.wx .wx-kb__visual { display: grid; justify-items: center; margin: 0; padding: clamp(18px, 3vw, 28px); border-radius: 26px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border), 0 36px 70px -44px rgba(18, 20, 23, .5); }
.wx .wx-kb__sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wx .wx-kb__sources li { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: #FAF9F6; box-shadow: inset 0 0 0 1px var(--wx-color-border); font-size: .8125rem; font-weight: 700; color: var(--wx-color-heading); }
.wx .wx-kb__sources li::after { content: ""; position: absolute; inset: -3px; border-radius: 999px; box-shadow: 0 0 0 2px #34D36B; opacity: 0; pointer-events: none; }
.wx .wx-kb__file { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; font: 700 .5625rem/1 var(--wx-font-mono); letter-spacing: .02em; }
.wx .wx-kb__file .wx-ico { width: 15px; height: 15px; }
.wx .wx-kb__file--site { background: #E6EEFA; color: #121417; }
.wx .wx-kb__file--drive { background: #FCF0CF; color: #121417; }
.wx .wx-kb__file--pdf { background: #FDE8E8; color: #B42318; }
.wx .wx-kb__file--xls { background: #DDF5E5; color: #121417; }
.wx .wx-kb__file--doc { background: #E3EBFC; color: #1D4ED8; }
.wx .wx-kb__pipe { position: relative; display: block; width: 2px; height: 30px; margin: 10px 0; background: repeating-linear-gradient(180deg, rgba(18, 20, 23, .22) 0 4px, transparent 4px 8px); }
.wx .wx-kb__pipe i { position: absolute; top: 0; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #34D36B; opacity: 0; }
.wx .wx-kb__base { width: 100%; padding: 16px; border-radius: 20px; background: #FAF9F6; box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx .wx-kb__basehead { display: flex; align-items: center; gap: 12px; margin: 0; }
.wx .wx-kb__baseico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: #121417; color: #34D36B; }
.wx .wx-kb__baseico .wx-ico { width: 19px; height: 19px; }
.wx .wx-kb__basehead > span:last-child { display: grid; min-width: 0; line-height: 1.3; }
.wx .wx-kb__basehead b { font: 800 1rem/1.25 var(--wx-font-display); letter-spacing: -.02em; color: var(--wx-color-heading); }
.wx .wx-kb__basehead small { font: 500 .6875rem/1.4 var(--wx-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--wx-color-text-muted); }
.wx .wx-kb__themes { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.wx .wx-kb__themes li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 7px 8px 7px 12px; border-radius: 12px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border); font-size: .8125rem; font-weight: 700; color: var(--wx-color-heading); }
.wx .wx-kb__themes .wx-ico { flex: none; width: 20px; height: 20px; padding: 4px; box-sizing: border-box; border-radius: 50%; background: #121417; color: #34D36B; stroke-width: 3; }
.wx .wx-kb__chat { display: grid; gap: 8px; width: 100%; padding: 14px; border-radius: 18px; background: #EFEAE2; }
.wx .wx-kb__msg { max-width: 88%; margin: 0; padding: 8px 11px; font-size: .875rem; line-height: 1.4; color: #111B21; box-shadow: 0 1px 1px rgba(11, 20, 26, .13); }
.wx .wx-kb__msg--in { justify-self: start; border-radius: 4px 14px 14px 14px; background: #FFFFFF; }
.wx .wx-kb__msg--out { justify-self: end; border-radius: 14px 4px 14px 14px; background: #D9FDD3; }
.wx .wx-kb__from { display: flex; align-items: center; gap: 5px; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(17, 27, 33, .08); font: 500 .6875rem/1.35 var(--wx-font-mono); color: #54656F; overflow-wrap: anywhere; }
.wx .wx-kb__from .wx-ico { flex: none; width: 12px; height: 12px; }
@keyframes wx-kb-read { 0%, 100% { opacity: 0; } 6%, 16% { opacity: 1; } 24% { opacity: 0; } }
@keyframes wx-kb-drop { 0% { opacity: 0; transform: translate3d(0, -2px, 0); } 20%, 75% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, 26px, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .wx-js .wx .wx-kb__visual:not(.is-inview) :is(.wx-kb__sources li, .wx-kb__themes li, .wx-kb__msg) { opacity: 0; }
  .wx .wx-kb__visual.is-inview .wx-kb__sources li { animation: wx-cfg-pop 420ms var(--wx-spring) both; animation-delay: calc(var(--i, 0) * 90ms + 100ms); }
  .wx .wx-kb__visual.is-inview .wx-kb__sources li::after { animation: wx-kb-read 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 800ms + 900ms); }
  .wx .wx-kb__visual.is-inview .wx-kb__pipe i { animation: wx-kb-drop 1.5s linear infinite; }
  .wx .wx-kb__visual.is-inview .wx-kb__pipe i:nth-child(2) { animation-delay: .5s; }
  .wx .wx-kb__visual.is-inview .wx-kb__pipe i:nth-child(3) { animation-delay: 1s; }
  .wx .wx-kb__visual.is-inview .wx-kb__themes li { animation: wx-cfg-rise 460ms var(--wx-ease) both; animation-delay: calc(var(--i, 0) * 220ms + 900ms); }
  .wx .wx-kb__visual.is-inview .wx-kb__themes .wx-ico { animation: wx-cfg-pop 360ms var(--wx-spring) both; animation-delay: calc(var(--i, 0) * 220ms + 1200ms); }
  .wx .wx-kb__visual.is-inview .wx-kb__msg--in { animation: wx-convmsg 420ms var(--wx-spring) 2300ms both; }
  .wx .wx-kb__visual.is-inview .wx-kb__msg--out { animation: wx-convmsg 420ms var(--wx-spring) 3000ms both; }
}

/* 17. Articles, guides et pages légales en version essentielle (includes/articles.php, classe wx-article--v2) :
   - en-tête sous un halo pastel, en deux colonnes à partir de 1100 px : titre surligné, chapô et auteur à gauche ;
     sommaire (ou, pour une page légale, les autres documents) dans une carte à droite ;
   - colonne de lecture centrée ; pages légales : sommaire à gauche, fixe au défilement ;
   - barre d'avancement de la lecture en haut de l'écran (défilement lié, navigateurs qui le permettent) ;
   - tableaux, encadrés et exemples de messages allégés, encart démo en encre. */
body.wx-da2 .wx.wx-article--v2 { position: relative; overflow-x: clip; }
body.wx-da2 .wx.wx-article--v2::before { content: ""; position: absolute; top: -40px; right: 0; left: 35%; height: 640px; z-index: 0; pointer-events: none; background: var(--wx-da2-aurora); filter: blur(12px); }
body.wx-da2 .wx.wx-article--v2 > :is(.wx-article__head, .wx-article__layout) { position: relative; z-index: 1; }
body.wx-da2 .wx.wx-article--v2 .wx-article__head { display: grid; gap: clamp(24px, 3vw, 32px); align-items: end; justify-items: stretch; }
body.wx-da2 .wx.wx-article--v2 .wx-article__head > * { max-width: none; }
body.wx-da2 .wx.wx-article--v2 .wx-article__intro { display: grid; gap: 18px; justify-items: start; min-width: 0; }
body.wx-da2 .wx.wx-article--v2 .wx-article__intro > * { max-width: 860px; margin: 0; }
@media (min-width: 1100px) {
  body.wx-da2 .wx.wx-article--v2 .wx-article__head { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); column-gap: clamp(40px, 5vw, 88px); }
}
/* Surtitre : point vert et capitales mono, sans pastille */
body.wx-da2 .wx.wx-article--v2 .wx-eyebrow { display: flex; align-items: center; gap: 8px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
body.wx-da2 .wx.wx-article--v2 .wx-eyebrow.wx-eyebrow--dot::before { content: ""; position: static; flex: none; width: 7px; height: 7px; margin: 0; border-radius: 50%; background: #34D36B; }
body.wx-da2 .wx.wx-article--v2 .wx-article__title { font-family: var(--wx-font-display); font-size: clamp(2.25rem, 1.3rem + 2.8vw, 3.75rem); font-weight: 800; line-height: 1.03; letter-spacing: -.045em; color: var(--wx-color-heading); }
body.wx-da2 .wx.wx-article--v2 .wx-article__title mark {
  padding-inline: .06em; border-radius: .12em; color: inherit;
  background: linear-gradient(180deg, transparent 22%, var(--wx-color-marker) 22%, var(--wx-color-marker) 96%, transparent 96%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
body.wx-da2 .wx.wx-article--v2 .wx-article__intro .wx-lead { max-width: 40em; font-size: var(--wx-fs-lead); line-height: 1.55; }
/* Signature : pastille de l'auteur, puis date et temps de lecture */
body.wx-da2 .wx.wx-article--v2 .wx-article__meta { align-items: center; gap: 6px 14px; font-size: .875rem; }
body.wx-da2 .wx.wx-article--v2 .wx-article__meta span + span::before { margin-right: 14px; }
body.wx-da2 .wx.wx-article--v2 .wx-article__meta .wx-article__avatar + span::before { content: none; }
body.wx-da2 .wx.wx-article--v2 .wx-article__meta > span:nth-child(2) { font-weight: 700; color: var(--wx-color-heading); }
/* Petit écran : auteur sur la première ligne, date et temps de lecture dessous, sans point en début de ligne */
@media (max-width: 599px) {
  body.wx-da2 .wx.wx-article--v2 .wx-article__meta > .wx-article__avatar + span { flex-basis: calc(100% - 50px); }
  body.wx-da2 .wx.wx-article--v2 .wx-article__meta > .wx-article__avatar + span + span::before { content: none; }
}
body.wx-da2 .wx.wx-article--legal .wx-article__meta > span { padding: 6px 12px; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border); font: 500 .75rem/1 var(--wx-font-mono); letter-spacing: .04em; color: var(--wx-color-text-muted); }
.wx .wx-article__avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #121417; color: #34D36B; font: 700 .75rem/1 var(--wx-font-mono); letter-spacing: .02em; }
.wx .wx-article__avatar .wx-ico { width: 17px; height: 17px; }
/* Carte du sommaire (et des documents légaux) */
body.wx-da2 .wx.wx-article--v2 :is(.wx-article__toc, .wx-article__docs) { display: grid; gap: 12px; align-self: end; padding: 20px 22px; border-radius: 22px; background: rgba(255, 255, 255, .86); box-shadow: inset 0 0 0 1px var(--wx-color-border), 0 30px 60px -46px rgba(18, 20, 23, .5); }
body.wx-da2 .wx.wx-article--v2 :is(.wx-article__toc, .wx-article__docs) p { margin: 0; }
body.wx-da2 .wx.wx-article--v2 .wx-article__toc ol { counter-reset: wx-toc; gap: 2px; margin: 0; padding: 0; list-style: none; }
body.wx-da2 .wx.wx-article--v2 .wx-article__toc ol li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: baseline; counter-increment: wx-toc; }
body.wx-da2 .wx.wx-article--v2 .wx-article__toc ol li::before { content: counter(wx-toc, decimal-leading-zero); font: 500 .6875rem/1 var(--wx-font-mono); color: var(--wx-color-text-muted); }
body.wx-da2 .wx.wx-article--v2 .wx-article__toc a { padding-block: 5px; font-size: .9375rem; font-weight: 600; color: var(--wx-color-heading); transition: color 160ms var(--wx-ease-soft); }
body.wx-da2 .wx.wx-article--v2 .wx-article__toc a:hover { color: var(--wx-color-heading); text-decoration: underline; text-decoration-color: #34D36B; text-decoration-thickness: 2px; text-underline-offset: .22em; }
body.wx-da2 .wx.wx-article--v2 .wx-casefacts { margin: 0 0 6px; }
body.wx-da2 .wx.wx-article--v2 .wx-article__docs .wx-legal-links { flex-direction: column; align-items: stretch; gap: 8px; margin: 0; }
body.wx-da2 .wx.wx-article--v2 .wx-article__docs .wx-legal-links a { display: flex; justify-content: space-between; gap: 14px; min-height: 46px; border-radius: 14px; }
body.wx-da2 .wx.wx-article--v2 .wx-article__docs .wx-legal-links a::after { content: "→"; color: var(--wx-color-text-muted); }
body.wx-da2 .wx.wx-article--v2 .wx-article__docs .wx-legal-links a:hover { box-shadow: inset 0 0 0 1.5px #121417; }
/* Colonne de lecture : centrée (articles, guides), sommaire à gauche (pages légales) */
@media (min-width: 1100px) {
  body.wx-da2 .wx.wx-article--v2:not(.wx-article--legal) .wx-article__layout { grid-template-columns: minmax(0, 760px); justify-content: center; }
  body.wx-da2 .wx.wx-article--v2:not(.wx-article--legal) .wx-article__toc { position: static; max-height: none; overflow: visible; }
  body.wx-da2 .wx.wx-article--legal .wx-article__toc { align-self: start; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border); }
}
body.wx-da2 .wx.wx-article--v2 .wx-article__body > h2 { font-weight: 800; letter-spacing: -.035em; line-height: 1.12; color: var(--wx-color-heading); }
body.wx-da2 .wx.wx-article--v2 .wx-article__body > h3 { font-weight: 700; letter-spacing: -.02em; color: var(--wx-color-heading); }
body.wx-da2 .wx.wx-article--v2 .wx-article__body { color: var(--wx-color-text); }
body.wx-da2 .wx.wx-article--v2 .wx-article__body li::marker { color: #34D36B; }
/* Tableaux : carte blanche aux filets fins (le thème met des bordures noires et des lignes grisées) */
body.wx-da2 .wx.wx-article--v2 .wx-article__table { border-radius: 16px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border); }
body.wx-da2 .wx.wx-article--v2 .wx-article__table table { margin: 0; border: 0; }
body.wx-da2 .wx.wx-article--v2 .wx-article__table :is(thead, tfoot) { border: 0; } /* trait de 3 px des tableaux de WordPress */
body.wx-da2 .wx.wx-article--v2 .wx-article__table :is(th, td) { padding: 12px 16px; border: 0; border-bottom: 1px solid var(--wx-color-border); background: transparent; }
body.wx-da2 .wx.wx-article--v2 .wx-article__table tr:last-child td { border-bottom: 0; }
body.wx-da2 .wx.wx-article--v2 .wx-article__table th { background: #F3F1EC; font: 500 .6875rem/1.3 var(--wx-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--wx-color-text-muted); }
body.wx-da2 .wx.wx-article--v2 .wx-article__table td:first-child { font-weight: 700; color: var(--wx-color-heading); }
body.wx-da2 .wx.wx-article--v2 .wx-callout { border-radius: 18px; background: var(--wx-da2-mint); box-shadow: none; }
body.wx-da2 .wx.wx-article--v2 .wx-article-msg { border-radius: 4px 16px 16px 16px; background: #D9FDD3; box-shadow: 0 1px 1px rgba(11, 20, 26, .13); color: #111B21; }
body.wx-da2 .wx.wx-article--v2 .wx-article-msg__label { font: 500 .6875rem/1.2 var(--wx-font-mono); letter-spacing: .08em; color: #54656F; }
/* Encart démo : carte encre, bouton clair */
body.wx-da2 .wx.wx-article--v2 .wx-article-cta { margin-top: 20px; padding: clamp(24px, 3vw, 36px); border-radius: 24px; background: radial-gradient(60% 120% at 100% 0%, rgba(52, 211, 107, .3), transparent 70%), #121417; box-shadow: none; color: #C9CDD2; }
body.wx-da2 .wx.wx-article--v2 .wx-article-cta p { margin: 0; }
body.wx-da2 .wx.wx-article--v2 .wx-article-cta__title { font-weight: 800; letter-spacing: -.03em; color: #FFFFFF; }
body.wx-da2 .wx.wx-article--v2 .wx-article-cta .wx-btn--primary .wp-block-button__link { background: #FFFFFF; color: #121417; }
body.wx-da2 .wx.wx-article--v2 .wx-article-cta .wx-btn--primary .wp-block-button__link:hover { background: #E9F9EE; }
/* Barre d'avancement de la lecture */
.wx .wx-readbar { display: none; }
@supports (animation-timeline: scroll()) {
  body.wx-da2 .wx .wx-readbar { position: fixed; top: 0; left: 0; right: 0; z-index: 80; display: block; height: 3px; background: linear-gradient(90deg, #34D36B, #7BE5A3); transform: scaleX(0); transform-origin: left; pointer-events: none; animation: wx-readbar linear both; animation-timeline: scroll(root); }
}
@keyframes wx-readbar { to { transform: scaleX(1); } }
/* Arrivée de la carte du sommaire (le titre, élément principal de la page, s'affiche sans attendre) */
@media (prefers-reduced-motion: no-preference) {
  body.wx-da2 .wx.wx-article--v2 .wx-article__head > :is(.wx-article__toc, .wx-article__docs) { animation: wx-cfg-rise 600ms var(--wx-ease) 240ms both; }
}

/* 18. Bandeau du haut (29/10/2026, demande de Walexia) : défilé plus vif et bouton Connexion en verre liquide.
   - Mots-clés : toutes les 2,2 s (blocks/site-header/view.js), les lettres du mot suivant montent en cascade pendant que
     celles du mot sortant s'envolent ; un reflet traverse la pastille à chaque mot. Mouvement réduit : mot fixe.
   - Connexion : pilule de verre clair, sans couleur (fond translucide flouté, reflet en haut, liseré blanc très fin),
     un reflet liquide glisse lentement dedans ; au survol elle s'éclaire et se soulève. Le contour vert a été retiré le
     29/10 à la demande de Walexia. */
body.wx-da2 .wx .wx-topbar__flip { overflow: hidden; isolation: isolate; border-radius: 999px; padding-inline: 11px 14px; }
body.wx-da2 .wx .wx-topbar__flip::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .16) 44%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, .16) 56%, transparent 70%); transform: translate3d(-110%, 0, 0); opacity: 0; }
@keyframes wx-topbar-sheen { 0% { transform: translate3d(-110%, 0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate3d(110%, 0, 0); opacity: 0; } }
@media screen and (prefers-reduced-motion: no-preference) {
  /* Lettres : le mot lui-même ne bascule plus, ce sont ses lettres qui bougent. Depuis la 5.51.1, elles montent d'un tiers
     de ligne en se précisant, sans sortir du cadre : une capture prise pendant le mouvement ne montre plus de lettres coupées. */
  body.wx-da2 .wx .wx-topbar__board.is-animated.is-split .wx-topbar__word { opacity: 1; transform: none; transition: none; }
  body.wx-da2 .wx .wx-topbar__board.is-animated.is-split .wx-topbar__word:not(.is-current):not(.is-leaving) { visibility: hidden; }
  body.wx-da2 .wx .wx-topbar__board.is-split .wx-topbar__ch { display: inline-block; opacity: 0; transform: translate3d(0, .32em, 0); filter: blur(2px); transition: transform 420ms var(--wx-spring), filter 300ms var(--wx-ease-soft), opacity 260ms var(--wx-ease-soft); transition-delay: calc(var(--c, 0) * 18ms); }
  body.wx-da2 .wx .wx-topbar__board.is-split .wx-topbar__word.is-current .wx-topbar__ch { opacity: 1; transform: none; filter: none; }
  body.wx-da2 .wx .wx-topbar__board.is-split .wx-topbar__word.is-leaving .wx-topbar__ch { opacity: 0; transform: translate3d(0, -.32em, 0); filter: blur(2px); transition-duration: 280ms, 200ms, 200ms; transition-delay: calc(var(--c, 0) * 8ms); }
  body.wx-da2 .wx .wx-topbar__flip.is-tick::before { animation: wx-topbar-sheen 760ms var(--wx-ease) both; }
}

/* Connexion en verre liquide */
body.wx-da2 .wx.wx-header .wx-topbar__login {
  gap: 7px; min-height: 30px; padding: 0 15px 0 12px; overflow: visible; isolation: isolate;
  color: #FFFFFF; font-weight: 700; letter-spacing: .005em;
  background:
    radial-gradient(45% 130% at var(--wx-gx, 20%) 0%, rgba(255, 255, 255, .38), transparent 72%),
    radial-gradient(60% 90% at calc(100% - var(--wx-gx, 20%)) 120%, rgba(255, 255, 255, .14), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05));
  -webkit-backdrop-filter: blur(12px) saturate(1.8); backdrop-filter: blur(12px) saturate(1.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 1px rgba(255, 255, 255, .12),
    inset 0 0 0 1px rgba(255, 255, 255, .2),
    0 6px 16px -10px rgba(0, 0, 0, .7);
  transition: transform 220ms var(--wx-ease), box-shadow 220ms var(--wx-ease-soft), background-color 220ms var(--wx-ease-soft);
}
body.wx-da2 .wx.wx-header .wx-topbar__login .wx-ico { color: #FFFFFF; }
body.wx-da2 .wx.wx-header .wx-topbar__login:hover {
  color: #FFFFFF; background-color: rgba(255, 255, 255, .1); transform: translate3d(0, -1px, 0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 1px rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .34), 0 8px 18px -10px rgba(0, 0, 0, .8);
}
@property --wx-gx { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@keyframes wx-login-liquid { 0%, 100% { --wx-gx: 16%; } 50% { --wx-gx: 84%; } }
@media screen and (prefers-reduced-motion: no-preference) {
  body.wx-da2 .wx.wx-header .wx-topbar__login { animation: wx-login-liquid 5s ease-in-out infinite; }
  body.wx-da2 .wx.wx-header .wx-topbar__login:hover { animation-duration: 2.4s; }
}
/* Petit écran : Connexion et langue resserrées, pour laisser la place au mot du bandeau */
@media (max-width: 759px) {
  body.wx-da2 .wx.wx-header .wx-topbar__login { gap: 5px; padding: 0 11px 0 9px; }
  body.wx-da2 .wx.wx-header .wx-lang .wx-ico { display: none; }
  body.wx-da2 .wx-topbar__tools { gap: 8px; }
}

/* 19. Menus de l'en-tête à la manière de Wati (29/10/2026, demande de Walexia) : un grand panneau centré sous la barre,
   des colonnes titrées, chaque entrée en texte seul (nom, puis une description courte en gris), les listes longues
   sur deux colonnes. Les pictogrammes restent sur mobile.
   30/10 (« beaucoup moins lisible ») : titres de colonnes en gras, en minuscules et en noir, soulignés d'un filet qui
   délimite la colonne (et non plus en petites capitales grises espacées) ; descriptions sur une seule ligne ; colonnes
   à la largeur de leur texte, sans retour à la ligne. */
@media (min-width: 1100px) {
  /* Panneau centré sous la barre (et non sous l'entrée) : il ne déborde plus à gauche de l'écran */
  body.wx-da2 .wx-header__item { position: static; }
  body.wx-da2 .wx .wx-menu__panel {
    top: calc(100% - 6px); left: 50%; transform: translateX(-50%);
    width: max-content; gap: 0 36px; max-width: min(1180px, calc(100vw - 48px)); padding: 24px 26px 20px; border-radius: 22px;
    background: #FFFFFF; box-shadow: 0 0 0 1px var(--wx-color-border), 0 34px 70px -30px rgba(18, 20, 23, .38);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  body.wx-da2 .wx .wx-menu__group { min-width: 200px; }
  body.wx-da2 .wx .wx-menu__title {
    margin: 0 0 8px; padding: 0 12px 12px; border-bottom: 1px solid rgba(18, 20, 23, .1);
    font: 700 .875rem/1.2 var(--wx-font-text); letter-spacing: -.005em; text-transform: none; color: var(--wx-color-heading);
  }
  body.wx-da2 .wx .wx-menu__group ul { gap: 2px; min-width: 0; width: auto; grid-template-columns: max-content; }
  body.wx-da2 .wx .wx-menu__group:has(li:nth-child(5)) ul { grid-template-columns: repeat(2, max-content); column-gap: 8px; }
  body.wx-da2 .wx.wx-header .wx-menu__group a,
  body.wx-da2 .wx.wx-header .wx-menu__group a.wx-menu__link--plain { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 3px; align-content: center; min-height: 0; padding: 10px 12px; border-radius: 12px; }
  body.wx-da2 .wx.wx-header .wx-menu__group a.wx-menu__link--solo { padding-block: 9px; }
  body.wx-da2 .wx .wx-menu__icon { display: none; }
  body.wx-da2 .wx .wx-menu__label { font-size: .9375rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; white-space: nowrap; color: var(--wx-color-heading); }
  body.wx-da2 .wx .wx-menu__desc { font-size: .8125rem; font-weight: 400; line-height: 1.35; white-space: nowrap; color: var(--wx-color-text-muted); }
  body.wx-da2 .wx.wx-header .wx-menu__group a:hover { background: #F6F5F1; }
  body.wx-da2 .wx.wx-header .wx-menu__group a:hover .wx-menu__label { text-decoration: underline; text-decoration-color: #34D36B; text-decoration-thickness: 2px; text-underline-offset: .2em; }
  body.wx-da2 .wx.wx-header .wx-menu__group a[aria-current="page"] .wx-menu__label { color: var(--wx-color-heading); text-decoration: underline; text-decoration-color: #34D36B; text-decoration-thickness: 2px; text-underline-offset: .2em; }
  body.wx-da2 .wx.wx-header .wx-menu__group a:focus-visible { outline: 2px solid var(--wx-focus); outline-offset: 1px; }
}
/* Écrans de 1100 à 1239 px : colonnes plafonnées, la description repasse à la ligne plutôt que de sortir du panneau */
@media (min-width: 1100px) and (max-width: 1239px) {
  body.wx-da2 .wx .wx-menu__panel { gap: 0 24px; padding-inline: 20px; }
  body.wx-da2 .wx .wx-menu__group ul { grid-template-columns: fit-content(230px); }
  body.wx-da2 .wx .wx-menu__group:has(li:nth-child(5)) ul { grid-template-columns: repeat(2, fit-content(230px)); }
  body.wx-da2 .wx .wx-menu__desc { white-space: normal; }
}
/* Menu Solutions (03/11/2026, « il s'affiche mal ») : avec Constructeurs et Après-vente, la colonne Automobile passait
   à six entrées et les trois colonnes dépassaient le panneau (Constructeurs, Garages et Location auto chevauchaient
   « Autres secteurs »). Le dernier groupe, sans descriptions, passe en bandeau pleine largeur sur quatre colonnes sous
   « Par équipe » et « Automobile ». (Un :has() ne peut pas en contenir un autre : le panneau est repéré par les liens
   sans description de son troisième groupe.) */
@media (min-width: 1100px) {
  body.wx-da2 .wx .wx-menu__panel:has(> .wx-menu__group:nth-child(3):last-child .wx-menu__link--solo) { grid-auto-flow: row; grid-template-columns: repeat(2, auto); row-gap: 18px; }
  body.wx-da2 .wx .wx-menu__panel > .wx-menu__group:nth-child(3):last-child:not(:has(.wx-menu__desc)) { grid-column: 1 / -1; }
  body.wx-da2 .wx .wx-menu__panel > .wx-menu__group:nth-child(3):last-child:not(:has(.wx-menu__desc)) ul { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 8px; }
}
/* De 1100 à 1259 px, « Voir Walexia en action » passait sous « Parler de votre projet » : il s'efface (il reste dans le menu
   Produit et dans le haut des pages). Jusqu'à 1359 px depuis la 5.51.1 : le bouton Apparence prend 70 px de plus. */
@media (min-width: 1100px) and (max-width: 1359px) {
  body.wx-da2 .wx.wx-header .wx-header__action { display: none; }
}

/* 20. Lien vers Walexia IA dans la phrase de définition de l'accueil (5.35.2) */
body.wx-da2 .wx .wx-v2hero__lead a { font-weight: 600; color: var(--wx-color-heading); text-decoration: underline; text-decoration-color: #34D36B; text-decoration-thickness: 2px; text-underline-offset: .2em; }

/* 21. Pied de page : liens légaux lisibles sur la barre sombre. La règle des liens encre (section des liens, plus précise)
   les rendait noirs sur noir depuis la 5.34.0 (constat du 30/10/2026). */
body.wx-da2 .wx.wx-footer .wx-footer__bar a:not([class]) { color: #DCEBE2; text-decoration-color: rgba(220, 235, 226, .45); }
body.wx-da2 .wx.wx-footer .wx-footer__bar a:not([class]):hover { color: #FFFFFF; text-decoration-color: #34D36B; }

/* 22. Tableaux des articles et guides sur mobile : tenus dans la largeur de l'écran, sans glisser (5.36.0) */
@media (max-width: 600px) {
  body.wx-da2 .wx.wx-article--v2 .wx-article__table table { font-size: .8125rem; line-height: 1.4; }
  body.wx-da2 .wx.wx-article--v2 .wx-article__table :is(th, td) { padding: 10px 9px; }
  body.wx-da2 .wx.wx-article--v2 .wx-article__table th { font-size: .59375rem; letter-spacing: .04em; }
}

/* 23. Blocs-réponses des pages métier et équipe (5.37.0) : du texte seul, séparé par un filet, pour rester léger */
.wx .wx-reponses__grid { display: grid; gap: 0 clamp(32px, 5vw, 72px); margin-top: clamp(20px, 2.6vw, 32px); }
@media (min-width: 760px) { .wx .wx-reponses__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .wx .wx-reponses__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wx .wx-reponses__item { display: grid; align-content: start; gap: 8px; padding: 22px 0 26px; border-top: 1px solid rgba(18, 20, 23, .1); }
.wx .wx-reponses__item h3 { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--wx-color-heading); }
.wx .wx-reponses__item p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--wx-color-text-muted); }
body.wx-da2 .wx .wx-reponses__item a { justify-self: start; margin-top: 4px; font-size: .9375rem; font-weight: 600; color: var(--wx-color-heading); text-decoration: underline; text-decoration-color: #34D36B; text-decoration-thickness: 2px; text-underline-offset: .2em; }
body.wx-da2 .wx .wx-reponses__item a:hover { text-decoration-color: var(--wx-color-heading); }

/* 24. Tarifs : encadré « Ce que contient votre proposition » (patterns/tarifs-proposition.php). */
.wx .wx-proposition__box { padding: clamp(24px, 4vw, 48px); border-radius: 28px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(18, 20, 23, .08); }

/* 25. Cas Rousseau : parcours animé (includes/case-flow.php), sur la page du cas et sur Walexia IA. */
.wx .wx-flowcase { position: relative; isolation: isolate; overflow: hidden; margin: 0; padding: clamp(20px, 3.2vw, 44px); border-radius: 32px; background: #121417; color: #FFFFFF; box-shadow: 0 30px 60px -36px rgba(18, 20, 23, .6); }
.wx .wx-flowcase::before, .wx .wx-flowcase::after { content: ""; position: absolute; z-index: -1; width: 62%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; }
.wx .wx-flowcase::before { top: -46%; right: -14%; background: radial-gradient(closest-side, rgba(52, 211, 107, .36), transparent); animation: wx-flow-drift 16s ease-in-out infinite alternate; }
.wx .wx-flowcase::after { bottom: -52%; left: -16%; background: radial-gradient(closest-side, rgba(124, 92, 255, .3), transparent); animation: wx-flow-drift 20s ease-in-out infinite alternate-reverse; }
.wx .wx-flowcase__grid { display: grid; gap: 14px; }
.wx .wx-flowcase__src, .wx .wx-flowcase__res { display: grid; gap: 12px; align-content: stretch; }
.wx .wx-flowcase p { margin: 0; }
.wx .wx-fsrc { display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.wx .wx-fsrc__tag { font-family: var(--wx-font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #34D36B; }
.wx .wx-fsrc__ads { display: flex; flex-wrap: wrap; gap: 8px; }
.wx .wx-fsrc__ads span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .875rem; font-weight: 600; }
.wx .wx-flowcase svg:not(.wx-flowcase__link) { flex: none; width: 18px; height: 18px; }
.wx .wx-fsrc__cta { position: relative; display: inline-flex; align-items: center; justify-self: start; gap: 8px; padding: 9px 16px; border-radius: 999px; background: linear-gradient(120deg, #34D36B, #7BE8A2); color: #0E1F18; font-size: .9375rem; font-weight: 700; animation: wx-flow-pulse 2.4s ease-out infinite; }
.wx .wx-fsrc__text { display: flex; align-items: flex-start; gap: 8px; font-size: .9375rem; color: rgba(255, 255, 255, .82); }
.wx .wx-fsrc__num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.wx .wx-fsrc__num b { font: 700 clamp(1.875rem, 1.4rem + 1.2vw, 2.5rem)/1 var(--wx-font-display); letter-spacing: -.03em; }
.wx .wx-fsrc__num span { font-size: .9375rem; color: rgba(255, 255, 255, .78); }
.wx .wx-fsrc__num em { padding: 2px 10px; border-radius: 999px; background: rgba(52, 211, 107, .16); color: #34D36B; font-size: .875rem; font-style: normal; font-weight: 700; }
.wx .wx-fhub { position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; padding: 38px 8px; text-align: center; }
.wx .wx-fhub::before, .wx .wx-fhub::after { content: ""; position: absolute; left: 50%; width: 2px; height: 30px; margin-left: -1px; background: repeating-linear-gradient(180deg, #34D36B 0 6px, transparent 6px 14px); background-size: 2px 28px; animation: wx-flow-down 1s linear infinite; }
.wx .wx-fhub::before { top: 0; }
.wx .wx-fhub::after { bottom: 0; }
.wx .wx-fhub__ico { position: relative; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: linear-gradient(140deg, #34D36B, #7BE8A2); color: #0E1F18; }
.wx .wx-fhub__ico::before, .wx .wx-fhub__ico::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px rgba(52, 211, 107, .7); animation: wx-flow-ring 2.6s ease-out infinite; }
.wx .wx-fhub__ico::after { animation-delay: 1.3s; }
.wx .wx-flowcase .wx-fhub__ico svg { width: 28px; height: 28px; }
.wx .wx-fhub b { margin-top: 8px; font: 700 1.125rem/1.2 var(--wx-font-display); }
.wx .wx-fhub > span:last-child { font-size: .875rem; line-height: 1.35; color: rgba(255, 255, 255, .72); }
.wx .wx-fres { display: grid; gap: 4px; align-content: center; padding: 16px 20px; border-radius: 20px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.wx .wx-fres b { font: 800 clamp(2.5rem, 1.7rem + 2.4vw, 3.5rem)/1 var(--wx-font-display); letter-spacing: -.035em; }
.wx .wx-fres span { font-size: .9375rem; color: rgba(255, 255, 255, .8); }
.wx .wx-fres--key { background: linear-gradient(130deg, #34D36B, #7BE8A2); box-shadow: 0 16px 36px -18px rgba(52, 211, 107, .9); color: #0E1F18; }
.wx .wx-fres--key span { color: #0E1F18; font-weight: 600; }
.wx .wx-flowcase__link { display: none; }
@media (min-width: 1040px) {
  .wx .wx-flowcase__grid { grid-template-columns: minmax(0, 1.3fr) 64px minmax(0, .62fr) 64px minmax(0, .9fr); gap: 0; align-items: stretch; }
  .wx .wx-flowcase__link { display: block; width: 100%; height: 100%; align-self: stretch; }
  .wx .wx-flowcase__link path { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .wx .wx-flowcase__link path.is-flow { stroke: #34D36B; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 16; animation: wx-flow-dash 1.1s linear infinite; animation-delay: calc(var(--i) * -240ms); }
  .wx .wx-fhub { padding: 8px; }
  .wx .wx-fhub::before, .wx .wx-fhub::after { display: none; }
}
@keyframes wx-flow-dash { to { stroke-dashoffset: -18; } }
@keyframes wx-flow-down { to { background-position: 0 14px; } }
@keyframes wx-flow-ring { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@keyframes wx-flow-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 107, .55); } 80%, 100% { box-shadow: 0 0 0 14px rgba(52, 211, 107, 0); } }
@keyframes wx-flow-drift { to { transform: translate3d(-8%, 8%, 0) scale(1.12); } }
@media (prefers-reduced-motion: no-preference) {
  .wx-js .wx .wx-flowcase :is(.wx-fsrc, .wx-fhub, .wx-fres) { transition: opacity 700ms var(--wx-ease), transform 700ms var(--wx-ease); transition-delay: calc(var(--i, 0) * 140ms + 150ms); }
  .wx-js .wx .wx-flowcase .wx-fhub { --i: 2; }
  .wx-js .wx .wx-flowcase .wx-fres { transition-delay: calc(var(--i, 0) * 140ms + 500ms); }
  .wx-js .wx .wx-flowcase:not(.is-inview) :is(.wx-fsrc, .wx-fhub, .wx-fres) { opacity: 0; transform: translate3d(0, 18px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .wx .wx-flowcase, .wx .wx-flowcase *, .wx .wx-flowcase::before, .wx .wx-flowcase::after, .wx .wx-flowcase *::before, .wx .wx-flowcase *::after { animation: none !important; }
}
.wx .wx-ia-preuve .wx-casestats__note { margin: 14px 0 0; }
.wx .wx-ia-preuve .wx-link-arrow { margin: 10px 0 0; }
body.wx-da2 .wx.wx-article--v2 > .wx-article__visual { position: relative; z-index: 1; max-width: calc(var(--wx-max) + 2 * var(--wx-gutter)); margin: clamp(28px, 4vw, 48px) auto; padding-inline: var(--wx-gutter); box-sizing: border-box; }

/* 26. Intégrations : panneau Sécurité et intégrations pour les DSI (patterns/integrations-securite.php). */
.wx .wx-secu__panel { position: relative; isolation: isolate; overflow: hidden; padding: clamp(24px, 4vw, 56px); border-radius: 32px; background: #121417; color: #FFFFFF; box-shadow: 0 30px 60px -36px rgba(18, 20, 23, .6); }
.wx .wx-secu__panel::before, .wx .wx-secu__panel::after { content: ""; position: absolute; z-index: -1; width: 60%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; }
.wx .wx-secu__panel::before { top: -42%; right: -12%; background: radial-gradient(closest-side, rgba(52, 211, 107, .32), transparent); animation: wx-flow-drift 16s ease-in-out infinite alternate; }
.wx .wx-secu__panel::after { bottom: -48%; left: -14%; background: radial-gradient(closest-side, rgba(124, 92, 255, .28), transparent); animation: wx-flow-drift 20s ease-in-out infinite alternate-reverse; }
.wx .wx-secu__panel .wx-section-head { margin-bottom: clamp(22px, 3vw, 34px); }
body.wx-da2 .wx .wx-secu__panel .wx-eyebrow { color: #34D36B; }
body.wx-da2 .wx .wx-secu__panel .wx-title { color: #FFFFFF; }
body.wx-da2 .wx .wx-secu__panel .wx-title mark { color: #0E1F18; }
body.wx-da2 .wx .wx-secu__panel .wx-lead { color: rgba(255, 255, 255, .78); }
.wx .wx-secu__figs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wx .wx-secu__fig { display: grid; gap: 6px; align-content: start; min-width: 0; padding: 18px 20px; border-radius: 20px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.wx .wx-secu__fig b { font: 800 clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem)/1.05 var(--wx-font-display); letter-spacing: -.03em; }
.wx .wx-secu__fig b i { font-style: normal; }
.wx .wx-secu__fig span { font-size: .9375rem; line-height: 1.4; color: rgba(255, 255, 255, .8); }
.wx .wx-secu__fig--key { background: linear-gradient(130deg, #34D36B, #7BE8A2); box-shadow: 0 16px 36px -18px rgba(52, 211, 107, .9); color: #0E1F18; }
.wx .wx-secu__fig--key span { color: #0E1F18; font-weight: 600; }
.wx .wx-secu__cards { display: grid; gap: 12px; margin-top: 12px; }
.wx .wx-secu__card { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: background 300ms var(--wx-ease), transform 300ms var(--wx-ease); }
.wx .wx-secu__card:hover { background: rgba(255, 255, 255, .08); transform: translate3d(0, -2px, 0); }
.wx .wx-secu__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(52, 211, 107, .16); color: #34D36B; }
.wx .wx-secu__ico svg { width: 20px; height: 20px; }
.wx .wx-secu__card h3 { margin: 4px 0 0; font: 700 1.0625rem/1.3 var(--wx-font-display); color: #FFFFFF; }
.wx .wx-secu__card p { margin: 0; font-size: .9375rem; line-height: 1.5; color: rgba(255, 255, 255, .76); }
.wx .wx-secu__meta { margin-top: 20px; }
body.wx-da2 .wx .wx-secu__panel .wx-link-arrow { margin: 20px 0 0; }
body.wx-da2 .wx .wx-secu__panel .wx-link-arrow a { color: #FFFFFF; }
@media (min-width: 760px) { .wx .wx-secu__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .wx .wx-secu__figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .wx .wx-secu__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .wx .wx-secu__panel::before, .wx .wx-secu__panel::after { animation: none !important; } .wx .wx-secu__card:hover { transform: none; } }

/* 27. Sous les logos : un résultat et le renvoi aux cas clients (includes/display.php). */
.wx .wx-trust__more { margin: 20px 0 0; text-align: center; font-size: .9375rem; line-height: 1.5; color: var(--wx-color-text-muted); }
.wx .wx-trust__more strong { font-weight: 700; color: var(--wx-color-heading); }
.wx .wx-trust__more a { font-weight: 600; color: var(--wx-color-heading); text-decoration: underline; text-decoration-color: #34D36B; text-decoration-thickness: 2px; text-underline-offset: .2em; white-space: nowrap; }
.wx .wx-trust__more a:hover { text-decoration-color: var(--wx-color-heading); }

/* 28. À propos : l'équipe (patterns/a-propos-equipe.php). */
.wx .wx-equipe__grid { display: grid; gap: 12px; margin: clamp(24px, 4vw, 40px) 0 0; padding: 0; list-style: none; }
.wx .wx-equipe__card { display: grid; gap: 6px; align-content: start; padding: 24px; border-radius: 24px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(18, 20, 23, .08); transition: box-shadow 300ms var(--wx-ease), transform 300ms var(--wx-ease); }
.wx .wx-equipe__card:hover { box-shadow: inset 0 0 0 1px rgba(18, 20, 23, .16), 0 18px 36px -24px rgba(18, 20, 23, .28); transform: translate3d(0, -2px, 0); }
.wx .wx-equipe__avatar { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 10px; border-radius: 50%; background: #121417; color: #34D36B; font: 700 1rem/1 var(--wx-font-mono); letter-spacing: .02em; }
.wx .wx-equipe__card h3 { margin: 0; font: 700 1.125rem/1.3 var(--wx-font-display); color: var(--wx-color-heading); }
.wx .wx-equipe__card p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--wx-color-text-muted); }
.wx .wx-equipe__card .wx-equipe__link a { font-weight: 600; color: var(--wx-color-heading); text-decoration: underline; text-decoration-color: #34D36B; text-decoration-thickness: 2px; text-underline-offset: .2em; }
body.wx-da2 .wx .wx-caselib__sectors:has(> :only-child) { display: none; }
.wx .wx-caselib__other { margin: 28px 0 0; text-align: center; font-size: .9375rem; color: var(--wx-color-text-muted); }
.wx .wx-caselib__other a { font-weight: 600; color: var(--wx-color-heading); text-decoration: underline; text-decoration-color: #34D36B; text-decoration-thickness: 2px; text-underline-offset: .2em; white-space: nowrap; }
.wx .wx-equipe__card .wx-equipe__role { font-weight: 600; color: var(--wx-color-heading); }
@media (min-width: 640px) { .wx .wx-equipe__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .wx .wx-equipe__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .wx .wx-equipe__card:hover { transform: none; } }

/* 29. Pied de page : partenaire aux Émirats, en bas de la carte des certifications (includes/parts.php). */
.wx.wx-footer .wx-footer__partner { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); color: #FFFFFF; text-decoration: none; }
.wx .wx-footer__partner svg { flex: none; width: 36px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
.wx .wx-footer__partner-text { display: grid; gap: 3px; min-width: 0; }
.wx .wx-footer__partner-label { font-size: .6875rem; font-weight: 700; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; text-wrap: balance; color: #E6F2EA; }
.wx .wx-footer__partner-name { display: inline-flex; align-items: center; gap: 6px; font: 700 1.125rem/1.25 var(--wx-font-display); letter-spacing: -.01em; color: #FFFFFF; transition: color 200ms var(--wx-ease); }
.wx .wx-footer__partner-name::after { content: ""; flex: none; width: 15px; height: 15px; background: currentColor; -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-footer__partner-desc { font-size: .8125rem; line-height: 1.3; color: #E6F2EA; }
.wx.wx-footer .wx-footer__partner:hover .wx-footer__partner-name { color: #34D36B; }
.wx.wx-footer .wx-footer__partner:hover .wx-footer__partner-name::after { transform: translateX(3px); }
.wx.wx-footer .wx-footer__partner:focus-visible { outline: 2px solid #34D36B; outline-offset: 4px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .wx.wx-footer .wx-footer__partner:hover .wx-footer__partner-name::after { transform: none; } }

/* 30. Accueil : accroche sous le titre, voyant « en ligne » et reflet sur les mots forts (patterns/home-hero.php). */
.wx .wx-v2hero__hook { margin: 24px 0 0; font-family: var(--wx-font-display); font-size: clamp(1.25rem, 1.05rem + .9vw, 1.625rem); font-weight: 700; line-height: 1.25; letter-spacing: -.025em; color: var(--wx-color-heading); }
.wx .wx-v2hero__hook::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .6em; border-radius: 50%; background: #34D36B; vertical-align: .12em; }
.wx .wx-v2hero__hook-key { white-space: nowrap; }
.wx .wx-v2hero__hook + .wx-v2hero__lead { margin-top: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .wx .wx-v2hero__hook::before { animation: wx-hook-ping 2200ms ease-in-out infinite; }
  .wx .wx-v2hero__hook-key { background: linear-gradient(100deg, var(--wx-color-heading) 42%, #34D36B 50%, var(--wx-color-heading) 58%); background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: wx-hook-sweep 7s var(--wx-ease) 1200ms 3; }
}
@keyframes wx-hook-ping { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.35); } }
@keyframes wx-hook-sweep { 0% { background-position: 100% 0; } 24%, 100% { background-position: 0 0; } }

/* 31. Accueil : points de contact en anneau autour de la conversation, sans la toucher (walexia_site_v2_orbit(),
   includes/home-v2.php). L'anneau a son propre espace (padding), les deux colonnes sont égales pour laisser place à la conversation. */
.wx .wx-v2orbit { position: relative; width: 100%; max-width: 500px; justify-self: center; }
.wx .wx-v2orbit__list { display: none; }
@media (min-width: 1200px) {
  .wx .wx-v2hero:has(.wx-v2orbit) .wx-v2hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wx .wx-v2orbit { max-width: 628px; padding: 66px 64px; justify-self: end; }
  .wx .wx-v2orbit__list { display: block; position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
  .wx .wx-v2orbit__item { --delay: calc(var(--i) * 2.2s + 1.4s); position: absolute; left: var(--x); top: var(--y); pointer-events: auto; }
  .wx .wx-v2orbit__item.is-l { --tx: 44px; --ty: 0px; }
  .wx .wx-v2orbit__item.is-r { --tx: -44px; --ty: 0px; }
  .wx .wx-v2orbit__item.is-t { --tx: 0px; --ty: 44px; }
  .wx .wx-v2orbit__item.is-b { --tx: 0px; --ty: -44px; }
  .wx .wx-v2orbit__item:hover { z-index: 3; }
  .wx .wx-v2orbit__chip { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #FFFFFF; color: #121417; box-shadow: inset 0 0 0 1px rgba(18, 20, 23, .07), 0 12px 22px -12px rgba(18, 20, 23, .4); cursor: default; }
  .wx .wx-v2orbit__chip svg { width: 23px; height: 23px; }
  .wx .wx-v2orbit__chip::before { content: ""; position: absolute; inset: -3px; border-radius: 16px; box-shadow: 0 0 0 2px #34D36B, 0 0 18px 3px rgba(52, 211, 107, .6); opacity: 0; pointer-events: none; }
  .wx .wx-v2orbit__chip::after { content: ""; position: absolute; left: calc(50% - 3.5px); top: calc(50% - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: #34D36B; box-shadow: 0 0 10px 2px rgba(52, 211, 107, .8); opacity: 0; pointer-events: none; }
  .wx .wx-v2orbit__label { position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 1; padding: 6px 10px; border-radius: 10px; background: #121417; color: #FFFFFF; font: 600 .75rem/1.2 var(--wx-font-text); white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(-50%); transition: opacity 160ms var(--wx-ease-soft); }
  .wx .wx-v2orbit__item.is-l .wx-v2orbit__label { left: 0; transform: none; }
  .wx .wx-v2orbit__item.is-r .wx-v2orbit__label { left: auto; right: 0; transform: none; }
  .wx .wx-v2orbit__item.is-b .wx-v2orbit__label { bottom: auto; top: calc(100% + 8px); }
  .wx .wx-v2orbit__item:hover .wx-v2orbit__label { animation: none; opacity: 1; }
}
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  .wx .wx-v2orbit__item { animation: wx-orbit-in 600ms var(--wx-ease) calc(var(--i) * 70ms + 500ms) both; }
  .wx .wx-v2orbit__chip { animation: wx-orbit-float var(--t) ease-in-out calc(var(--i) * -.7s) infinite alternate; }
  .wx .wx-v2orbit__chip::before, .wx .wx-v2orbit__label { animation: wx-orbit-spot 24.2s linear var(--delay) infinite; }
  .wx .wx-v2orbit__chip::after { animation: wx-orbit-dot 24.2s ease-in var(--delay) infinite; }
  .wx .wx-v2orbit__item:hover .wx-v2orbit__chip { animation-play-state: paused; }
}
@keyframes wx-orbit-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes wx-orbit-float { from { transform: translate3d(calc(var(--dx) * -1), calc(var(--dy) * -1), 0); } to { transform: translate3d(var(--dx), var(--dy), 0); } }
@keyframes wx-orbit-spot { 0% { opacity: 0; } 1.2%, 7.6% { opacity: 1; } 9.1%, 100% { opacity: 0; } }
@keyframes wx-orbit-dot { 0% { opacity: 0; transform: translate3d(calc(var(--tx) * .5), calc(var(--ty) * .5), 0); } 1.4% { opacity: 1; } 5.6% { opacity: 1; transform: translate3d(var(--tx), var(--ty), 0); } 6.4%, 100% { opacity: 0; transform: translate3d(var(--tx), var(--ty), 0); } }

/* 32. Accueil : trois piliers sous les logos (includes/home-pillars.php). Visuels en HTML et CSS, animés à l'apparition. */
body.wx-da2 .wx.wx-piliers { padding-block: clamp(36px, 4vw, 64px) clamp(44px, 5vw, 76px); }
.wx .wx-piliers .wx-section-head { margin-bottom: clamp(24px, 3vw, 38px); }
.wx .wx-piliers .wx-title { max-width: none; }
.wx .wx-piliers .wx-lead { max-width: 52ch; margin-inline: auto; }
.wx .wx-piliers__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 900px) { .wx .wx-piliers__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.wx .wx-pilier { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(20px, 2.2vw, 28px); border-radius: var(--wx-r-xl); background: var(--wx-da2-mint); }
.wx .wx-pilier--sky { background: var(--wx-da2-sky); }
.wx .wx-pilier--cream { background: var(--wx-da2-cream); }
.wx .wx-pilier:nth-child(2) { transition-delay: 120ms; }
.wx .wx-pilier:nth-child(3) { transition-delay: 240ms; }
.wx .wx-pilier .wx-eyebrow { margin: 6px 0 0; }
.wx .wx-pilier__title { margin: 0; font-family: var(--wx-font-display, inherit); font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; color: var(--wx-color-heading); }
.wx .wx-pilier__text { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--wx-color-text); }
.wx .wx-pilier__link { margin-top: auto; padding-top: 8px; font-weight: 700; color: var(--wx-color-heading); text-decoration: underline; text-decoration-color: #34D36B; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.wx .wx-pilier__link::after { content: " →"; display: inline-block; margin-left: .3em; transition: transform 200ms var(--wx-ease); }
.wx .wx-pilier__link:hover::after { transform: translateX(4px); }
.wx .wx-pilier__vis { display: flex; align-items: center; width: 100%; min-height: 156px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .78); box-sizing: border-box; overflow: hidden; }
.wx .wx-pilier__vis p { margin: 0; }
/* Agent IA : le logo Walexia répond au client */
.wx .wx-pv-agent { flex-direction: column; align-items: stretch; justify-content: center; gap: 9px; }
.wx .wx-pv-agent p { font-size: .8125rem; line-height: 1.35; color: var(--wx-color-heading); }
.wx .wx-pv-agent__client { align-self: flex-end; max-width: 86%; padding: 7px 11px; border-radius: 13px 13px 3px 13px; background: #D9FDD3; }
.wx .wx-pv-agent__client svg { width: 14px; height: auto; margin-left: 5px; vertical-align: -1px; }
.wx .wx-pv-agent__row { display: flex; align-items: flex-end; gap: 9px; }
.wx .wx-pv-agent__logo { flex: none; width: 42px; height: 42px; border-radius: 0; }
.wx .wx-pv-agent__talk { position: relative; flex: 1; min-width: 0; }
.wx .wx-pv-agent__reply { padding: 7px 11px; border-radius: 13px 13px 13px 3px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(18, 20, 23, .12); }
.wx .wx-pv-agent__reply b { display: block; margin-bottom: 1px; font-size: .6875rem; font-weight: 700; color: var(--wx-color-text-muted); }
.wx .wx-pv-agent__typing { position: absolute; left: 0; bottom: 0; display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 13px 13px 13px 3px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(18, 20, 23, .12); opacity: 0; }
.wx .wx-pv-agent__typing i { width: 6px; height: 6px; border-radius: 50%; background: #8696A0; }
.wx-js .wx-pilier:not(.is-inview) :is(.wx-pv-agent__client, .wx-pv-agent__reply) { opacity: 0; }
.wx-js .wx-pilier.is-inview .wx-pv-agent__client { animation: wx-pv-in 500ms var(--wx-ease) .35s both; }
.wx-js .wx-pilier.is-inview .wx-pv-agent__typing { animation: wx-pv-typing 1.5s ease .9s both; }
.wx-js .wx-pilier.is-inview .wx-pv-agent__typing i { animation: wx-pv-dot 750ms ease-in-out .95s 2; }
.wx-js .wx-pilier.is-inview .wx-pv-agent__typing i:nth-child(2) { animation-delay: 1.07s; }
.wx-js .wx-pilier.is-inview .wx-pv-agent__typing i:nth-child(3) { animation-delay: 1.19s; }
.wx-js .wx-pilier.is-inview .wx-pv-agent__reply { animation: wx-pv-in 500ms var(--wx-ease) 2.35s both; }
@keyframes wx-pv-in { from { opacity: 0; transform: translateY(7px); } }
@keyframes wx-pv-typing { 0% { opacity: 0; } 10%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes wx-pv-dot { 0%, 100% { opacity: .45; transform: none; } 45% { opacity: 1; transform: translateY(-3px); } }
/* Lead management : fiches et barre de progression */
.wx .wx-pv-lead { flex-direction: column; align-items: stretch; justify-content: center; gap: 13px; }
.wx .wx-pv-lead__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; column-gap: 9px; row-gap: 7px; }
.wx .wx-pv-lead__who { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #121417; color: #FFFFFF; font-size: .6875rem; font-weight: 700; }
.wx .wx-pv-lead__who--2 { background: #34D36B; color: #0E1F18; }
.wx .wx-pv-lead__id { min-width: 0; line-height: 1.25; }
.wx .wx-pv-lead__id b { display: block; font-size: .8125rem; font-weight: 700; color: var(--wx-color-heading); }
.wx .wx-pv-lead__id small { display: block; overflow: hidden; font-size: .6875rem; color: var(--wx-color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.wx .wx-pv-lead__row em { padding: 3px 8px; border-radius: 999px; background: #CFF5DB; font-size: .6875rem; font-style: normal; font-weight: 700; color: var(--wx-color-heading); }
.wx .wx-pv-lead__bar { grid-column: 1 / -1; display: block; height: 10px; border-radius: 5px; background: rgba(18, 20, 23, .08); overflow: hidden; }
.wx .wx-pv-lead__bar i { display: block; height: 100%; border-radius: 5px; background: #34D36B; transform: scaleX(var(--wx-pv)); transform-origin: left; transition: transform 1100ms var(--wx-ease) 400ms; }
.wx-js .wx-pilier:not(.is-inview) .wx-pv-lead__bar i { transform: scaleX(0); }
/* Campagnes : inbound, outbound, nurturing */
.wx .wx-pv-camp { flex-direction: column; align-items: stretch; justify-content: center; gap: 16px; }
.wx .wx-pv-camp p { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 10px; }
.wx .wx-pv-camp b { font-size: .875rem; font-weight: 700; color: var(--wx-color-heading); }
.wx .wx-pv-camp span { display: block; height: 12px; border-radius: 6px; background: rgba(18, 20, 23, .07); overflow: hidden; }
.wx .wx-pv-camp i { display: block; height: 100%; border-radius: 6px; background: #121417; transform: scaleX(var(--wx-pv)); transform-origin: left; transition: transform 1000ms var(--wx-ease) 300ms; }
.wx .wx-pv-camp p:nth-child(2) i { background: #34D36B; transition-delay: 450ms; }
.wx .wx-pv-camp p:nth-child(3) i { background: #53BDEB; transition-delay: 600ms; }
.wx-js .wx-pilier:not(.is-inview) .wx-pv-camp i { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
  .wx .wx-pilier :is(.wx-pv-agent__client, .wx-pv-agent__reply, .wx-pv-agent__typing i) { animation: none !important; opacity: 1 !important; }
  .wx .wx-pv-agent__typing { display: none; }
}
.wx .wx-piliers__socle { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin: clamp(18px, 2.4vw, 28px) 0 0; font-size: .9375rem; }
.wx .wx-piliers__socle span { padding: 7px 14px; border-radius: 999px; background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border); font-weight: 600; color: var(--wx-color-heading); }
.wx .wx-piliers__socle a { margin-left: 6px; font-weight: 700; color: var(--wx-color-heading); text-decoration: underline; text-decoration-color: #34D36B; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 899px) {
  .wx .wx-pilier__vis { min-height: 0; padding: 12px 14px; }
}
/* E-mail masqué là où la carte est trop étroite pour le garder sur une ligne. */
@media (max-width: 479px), (min-width: 900px) and (max-width: 1399px) {
  .wx .wx-pv-lead__mail { display: none; }
}

/* 28 bis. À propos : histoire racontée au défilement (patterns/a-propos-histoire.php, assets/js/histoire.js, 5.46.3). Par défaut : chapitres empilés, scènes animées à l'apparition. */
.wx .wx-hs__track { position: relative; margin: clamp(28px, 4vw, 48px) 0 0; }
.wx .wx-hs__ch { display: grid; gap: 20px; align-items: center; margin: 0 0 clamp(40px, 6vw, 72px); }
.wx .wx-hs__scene svg { display: block; overflow: hidden; width: 100%; height: auto; border-radius: 24px; shape-rendering: crispEdges; box-shadow: inset 0 0 0 1px rgba(18, 20, 23, .08); }
.wx .wx-hs__scene text { font-family: var(--wx-font-mono); font-weight: 700; }
.wx .wx-hs__label { margin: 0 0 10px; font: 500 .75rem/1.3 var(--wx-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--wx-color-text-muted); }
.wx .wx-hs__label b { color: #34D36B; font-weight: 700; }
.wx .wx-hs__text h3 { margin: 0 0 14px; font: 800 clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem)/1.08 var(--wx-font-display); letter-spacing: -.035em; color: var(--wx-color-heading); }
.wx .wx-hs__text p { margin: 0 0 12px; max-width: 34em; font-size: 1.0625rem; line-height: 1.6; color: var(--wx-color-text-muted); }
.wx .wx-hs__rail { display: none; }
@media (min-width: 760px) { .wx .wx-hs__ch { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; } .wx .wx-hs__scene { order: 2; } }

/* Ordinateur : la scène reste fixe, les chapitres se succèdent au défilement. */
.wx .wx-hs.is-motion .wx-hs__track { height: 400vh; }
.wx .wx-hs.is-motion .wx-hs__sticky { position: sticky; top: 92px; height: calc(100vh - 120px); min-height: 540px; }
.wx .wx-hs.is-motion .wx-hs__ch { position: absolute; inset: 0 0 56px; margin: 0; opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 500ms ease, transform 600ms cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.wx .wx-hs.is-motion .wx-hs__ch.is-active { opacity: 1; transform: none; pointer-events: auto; }
.wx .wx-hs.is-motion .wx-hs__scene svg { max-height: calc(100vh - 200px); width: auto; max-width: 100%; margin-left: auto; }
.wx .wx-hs.is-motion .wx-hs__rail { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; }
.wx .wx-hs__dot { width: 36px; height: 36px; border: 0; border-radius: 10px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(18, 20, 23, .14); font: 700 .8125rem/1 var(--wx-font-mono); color: var(--wx-color-text-muted); cursor: pointer; transition: background-color 200ms ease, color 200ms ease; }
.wx .wx-hs__dot[aria-current="step"] { background: #121417; color: #34D36B; box-shadow: none; }
.wx .wx-hs__bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(18, 20, 23, .1); overflow: hidden; }
.wx .wx-hs__fill { display: block; height: 100%; background: #34D36B; transform: scaleX(0); transform-origin: left; }

/* Animations des scènes : uniquement transform et opacity, jouées quand le chapitre est actif. */
.wx .wx-hs__scene g[class^="hs-"] { transform-box: fill-box; }
.wx .wx-hs__ch.is-on .hs-pop { animation: hs-pop 420ms steps(4) both; animation-delay: var(--d); transform-origin: center; }
.wx .wx-hs__ch.is-on .hs-fall { animation: hs-fall 900ms cubic-bezier(.3, 0, .2, 1) both; animation-delay: var(--d); transform-origin: bottom; }
.wx .wx-hs__ch.is-on .hs-grow { animation: hs-grow 900ms steps(8) both; animation-delay: var(--d); transform-origin: bottom; }
.wx .wx-hs__ch.is-on .hs-grow--long { animation-duration: 1600ms; animation-timing-function: steps(16); }
.wx .wx-hs__ch.is-on .hs-float { animation: hs-float 3s linear infinite both; animation-delay: var(--d); }
.wx .wx-hs__ch.is-on .hs-fly { animation: hs-fly 7s linear infinite; }
.wx .wx-hs__ch.is-on .hs-jump { animation: hs-jump 900ms steps(3) infinite; }
.wx .wx-hs__ch.is-on .hs-blink { animation: hs-blink 1.2s steps(2) infinite; animation-delay: var(--d); }
.wx .wx-hs__ch.is-on .hs-slide { animation: hs-slide 600ms steps(6) both; animation-delay: var(--d); }
.wx .wx-hs__ch.is-on .hs-glow { animation: hs-glow 1.6s ease-in-out infinite both; animation-delay: var(--d); }
.wx .wx-hs__ch.is-on .hs-confetti { animation: hs-confetti 1.8s steps(6) infinite both; animation-delay: var(--d); }
.wx .wx-hs .hs-glow { opacity: .35; }
@keyframes hs-pop { from { opacity: 0; transform: scale(0); } }
@keyframes hs-fall { from { transform: scaleY(1.9); } }
@keyframes hs-grow { from { transform: scaleY(0); } }
@keyframes hs-float { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(34px, -30px); } }
@keyframes hs-fly { from { transform: translateX(-40px); } to { transform: translateX(230px); } }
@keyframes hs-jump { 50% { transform: translateY(-6px); } }
@keyframes hs-blink { 50% { opacity: 0; } }
@keyframes hs-slide { from { opacity: 0; transform: translateX(-24px); } }
@keyframes hs-glow { 50% { opacity: .85; } }
@keyframes hs-confetti { from { opacity: 1; transform: translateY(-8px); } to { opacity: 0; transform: translateY(40px); } }
@media (prefers-reduced-motion: reduce) { .wx .wx-hs__ch, .wx .wx-hs__ch * { animation: none !important; transition: none !important; } }