/* ==========================================================================
   Walexia — thème sombre « Encre & aurore, nuit » et bouton Apparence (5.51.0, 04/11/2026)
   Les couleurs en dur des feuilles sont converties à part (walexia-theme-auto.css, généré par tools/theme/gen-dark.js).
   Actif quand <html data-wx-theme="dark"> : attribut posé avant le premier rendu par le script de l'en-tête,
   d'après le choix du visiteur (localStorage « walexia-theme ») ou, par défaut, le réglage du système.
   Principes : fonds encre neutres (jamais de vert foncé), halos de l'aurore conservés, textes clairs, boutons
   principaux inversés (pilule claire, texte encre), surligneur en dégradé construit sur #34D36B avec le texte en
   encre #0E1F18, verts des textes en #34D36B. Les maquettes de WhatsApp (téléphones, conversations) restent claires,
   comme l'application qu'elles montrent.
   ========================================================================== */

/* 1. Bouton Apparence (barre du menu, à gauche de « Parler de votre projet ») ------- */
.wx .wx-theme { position: relative; flex: none; display: flex; }
.wx .wx-theme[hidden] { display: none; }
.wx .wx-theme__btn {
  display: grid; place-items: center; width: 42px; height: 42px; margin: 0; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  color: var(--wx-color-heading); background: color-mix(in srgb, var(--wx-color-surface) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--wx-color-border-strong), 0 1px 2px rgba(18, 20, 23, .06);
  transition: background-color 200ms var(--wx-ease-soft), box-shadow 260ms var(--wx-ease-soft), transform 200ms var(--wx-ease);
}
.wx .wx-theme__btn:hover, .wx .wx-theme.is-open .wx-theme__btn {
  background: var(--wx-color-surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #34D36B 55%, transparent), 0 0 0 4px color-mix(in srgb, #34D36B 16%, transparent), 0 10px 24px -14px rgba(18, 20, 23, .45);
}
.wx .wx-theme__btn:active { transform: scale(.94); }
.wx .wx-theme__btn:focus-visible { outline: 2px solid var(--wx-color-focus); outline-offset: 3px; }
/* Soleil ↔ lune : le disque grossit, une ombre le croque, les rayons tournent et s'effacent. */
.wx .wx-theme__orb { width: 21px; height: 21px; overflow: visible; }
.wx .wx-theme__core { fill: currentColor; transform-box: fill-box; transform-origin: center; transition: transform 520ms cubic-bezier(.34, 1.4, .5, 1); }
.wx .wx-theme__bite { transform-box: fill-box; transform-origin: center; transition: transform 520ms cubic-bezier(.34, 1.2, .5, 1); }
.wx .wx-theme__rays { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transform-origin: 12px 12px; transition: transform 520ms var(--wx-ease), opacity 320ms var(--wx-ease-soft); }
html[data-wx-theme="dark"] .wx .wx-theme__core { transform: scale(1.66); }
html[data-wx-theme="dark"] .wx .wx-theme__bite { transform: translate(-6.5px, 3.2px); }
html[data-wx-theme="dark"] .wx .wx-theme__rays { opacity: 0; transform: rotate(-90deg) scale(.4); }
html[data-wx-theme="dark"] .wx .wx-theme__btn:hover .wx-theme__core { transform: scale(1.66) rotate(-12deg); }
html:not([data-wx-theme="dark"]) .wx .wx-theme__btn:hover .wx-theme__rays { transform: rotate(45deg); }
/* Menu */
.wx .wx-theme__menu {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 80; width: 248px; padding: 8px; border-radius: 22px;
  background: color-mix(in srgb, var(--wx-color-surface) 96%, transparent);
  box-shadow: 0 0 0 1px var(--wx-color-border), 0 30px 60px -24px color-mix(in srgb, #121417 40%, transparent);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.wx .wx-theme__menu[hidden] { display: none; }
@keyframes wx-theme-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@media (prefers-reduced-motion: no-preference) { .wx .wx-theme__menu:not([hidden]) { animation: wx-theme-in 200ms var(--wx-ease) both; transform-origin: top right; } }
.wx .wx-theme__title { margin: 6px 10px 6px; font-size: .75rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--wx-color-text-muted); }
.wx .wx-theme__menu ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.wx .wx-theme__item {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 20px; align-items: center; column-gap: 12px; width: 100%; min-height: 54px; margin: 0; padding: 6px 10px 6px 6px;
  border: 0; border-radius: 15px; background: transparent; color: var(--wx-color-heading); font: inherit; text-align: left; cursor: pointer;
  transition: background-color 160ms var(--wx-ease-soft);
}
.wx .wx-theme__item:hover, .wx .wx-theme__item:focus-visible { background: var(--wx-color-bg); outline: 0; }
.wx .wx-theme__item:focus-visible { box-shadow: inset 0 0 0 2px var(--wx-color-focus); }
.wx .wx-theme__ico {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--wx-color-bg-tint); color: var(--wx-color-heading);
  box-shadow: inset 0 0 0 1px var(--wx-color-border); transition: background 200ms var(--wx-ease-soft), color 200ms var(--wx-ease-soft);
}
.wx .wx-theme__ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wx .wx-theme__txt { display: grid; gap: 1px; min-width: 0; }
.wx .wx-theme__txt b { font-size: .9375rem; font-weight: 700; line-height: 1.25; }
.wx .wx-theme__txt small { font-size: .8125rem; font-weight: 500; line-height: 1.3; color: var(--wx-color-text-muted); }
.wx .wx-theme__check { width: 18px; height: 18px; fill: none; stroke: #34D36B; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: opacity 160ms, transform 260ms var(--wx-ease); }
.wx .wx-theme__item[aria-checked="true"] .wx-theme__check { opacity: 1; transform: none; }
/* Choix en cours : pastille en dégradé construit sur #34D36B, pictogramme en encre */
.wx .wx-theme__item[aria-checked="true"] .wx-theme__ico { background: linear-gradient(145deg, #6FE597, #34D36B 70%); color: #0E1F18; box-shadow: none; }
/* Petits écrans : le bouton se place avant « Parler de votre projet », le menu s'aligne sur le bord droit de la barre. */
@media (max-width: 1099px) {
  .wx.wx-header .wx-theme { order: 1; margin-left: auto; position: static; }
  .wx.wx-header .wx-theme ~ .wx-header__cta { margin-left: 0; }
  .wx .wx-theme__btn { width: 40px; height: 40px; }
  .wx .wx-theme__menu { right: max(12px, calc(var(--wx-gutter) - 4px)); top: calc(100% - 2px); }
}
/* Petits téléphones (jusqu'à 479 px) : la pastille quitte la barre, le choix passe dans le menu (5.51.2).
   À 390 px, logo, pastille, « Parler de votre projet » et menu demandaient 402 px pour 390. */
.wx .wx-theme-row { display: none; }
@media (max-width: 479px) {
  .wx.wx-header .wx-theme { display: none; }
  .wx.wx-header .wx-theme ~ .wx-header__cta { margin-left: auto; }
  .wx.wx-header .wx-theme-row:not([hidden]) { display: grid; gap: 10px; margin-top: 22px; }
  .wx .wx-theme-row__title { margin: 0; font-size: .75rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--wx-color-text-muted); }
  .wx .wx-theme-row__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 18px; background: var(--wx-color-bg-tint); box-shadow: inset 0 0 0 1px var(--wx-color-border); }
  .wx .wx-theme-row__opt {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 0; padding: 0 8px; border: 0; border-radius: 14px;
    background: transparent; color: var(--wx-color-heading); font: 650 .9375rem/1.2 var(--wx-font-text); cursor: pointer;
    transition: background-color 160ms var(--wx-ease-soft), color 160ms var(--wx-ease-soft);
  }
  .wx .wx-theme-row__opt svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .wx .wx-theme-row__opt[aria-checked="true"] { background: linear-gradient(145deg, #6FE597, #34D36B 70%); color: #0E1F18; box-shadow: 0 6px 16px -10px rgba(14, 31, 24, .6); }
  .wx .wx-theme-row__opt:focus-visible { outline: 2px solid var(--wx-color-focus); outline-offset: 2px; }
}

/* 2. Jetons ------------------------------------------------------------------ */
html[data-wx-theme="dark"] { color-scheme: dark; background: #0E1012; }
html[data-wx-theme="dark"] body.wx-da2,
html[data-wx-theme="dark"] body.wx-da2 .wx {
  --wx-color-heading: #F4F6F8;
  --wx-color-text: #D5DADF;
  --wx-color-text-muted: #9EA7AF;
  --wx-color-bg: #0E1012;
  --wx-color-bg-tint: #131619;
  --wx-color-surface: #171A1E;
  --wx-color-surface-muted: #1C2024;
  --wx-color-border: rgba(244, 246, 248, .09);
  --wx-color-border-strong: rgba(244, 246, 248, .18);
  --wx-color-action: #F4F6F8;
  --wx-color-action-hover: #FFFFFF;
  --wx-color-on-action: #121417;
  --wx-color-accent-text: #34D36B;
  --wx-color-marker: #34D36B;
  --wx-color-focus: #F4F6F8;
  --wx-shadow-action: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 26px -14px rgba(0, 0, 0, .9);
  --wx-g-03: #121417;
  --wx-g-06: #14171A;
  --wx-g-10: #171A1E;
  --wx-g-16: #1B1F23;
  --wx-g-24: #20242A;
  --wx-g-32: #262B31;
  --wx-grad-soft: linear-gradient(180deg, #0E1012 0%, #121417 100%);
  --wx-da2-mint: #121618;
  --wx-da2-sky: #12151B;
  --wx-da2-lilac: #15141B;
  --wx-da2-cream: #171613;
  --wx-da2-aurora:
    radial-gradient(38% 42% at 64% 34%, rgba(52, 211, 107, .16), transparent 70%),
    radial-gradient(30% 36% at 86% 62%, rgba(124, 196, 255, .14), transparent 70%),
    radial-gradient(28% 30% at 46% 78%, rgba(201, 167, 255, .13), transparent 70%);
  --wx-color-on-deep: #F2FBF5;
  --wx-color-warn-bg: #2B2210;
  --wx-color-warn-text: #F5C76B;
  --wx-color-danger: #FF8A80;
  --wx-color-danger-bg: #2A1513;
  /* Pastilles vertes des maquettes produit : gris relevé (pas de vert foncé), le vert reste au texte */
  --wx-green-100: #252A30;
  --wx-green-50: #1A1D21;
  --wx-color-car-stage: #1F2226;
  /* Conversations hors maquettes WhatsApp (questions ouvertes de la FAQ, extraits) : bulles grises sur l'encre */
  --wx-msg-out: #22272C; --wx-color-bubble-out: #2A3036; --wx-color-bubble-in: #1F2328; --wx-color-chat: #101315; --wx-color-wa-bar: #1A1D21;
  /* Encres des canaux (textes et pastilles) éclaircies pour rester lisibles sur l'encre */
  --wx-ch-instagram-ink: #FFA0CB; --wx-ch-facebook-ink: #8BCFFF; --wx-ch-site-ink: #B8C7FF; --wx-ch-email-ink: #FFA178;
  --wx-ch-sms-ink: #85D7FF; --wx-ch-rcs-ink: #D2B9FF; --wx-ch-qr-ink: #FFC189; --wx-ch-display-ink: #FF9EA7; --wx-ch-google-ink: #FF9F8F;
  /* Ombres : noires, plus marquées (elles étaient construites sur la couleur des titres, devenue claire) */
  --wx-shadow-color: #000000;
  --wx-shadow-sm: 0 1px 1px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --wx-shadow-md: 0 2px 4px rgba(0, 0, 0, .3), 0 22px 48px -20px rgba(0, 0, 0, .7);
  --wx-shadow-lg: 0 4px 12px rgba(0, 0, 0, .35), 0 48px 100px -36px rgba(0, 0, 0, .8);
}

/* 3. Surligneur : dégradé sur #34D36B, texte encre #0E1F18 (charte des fonds verts) */
html[data-wx-theme="dark"] body.wx-da2 .wx :is(.wx-title, .wx-display) :is(mark, .wx-title__accent, .has-wx-accent-color),
html[data-wx-theme="dark"] body.wx-da2 .wx .wx-title.is-inview :is(mark, .wx-title__accent),
html[data-wx-theme="dark"] body.wx-da2 .wx .wx-v2hero__title mark {
  color: #0E1F18 !important;
  background-image: linear-gradient(180deg, transparent 18%, #5BE08A 18%, #34D36B 98%, transparent 98%);
}

/* 4. En-tête : bandeau plus profond que la page, barre de verre sombre ------- */
html[data-wx-theme="dark"] body.wx-da2 .wx-topbar { background: #08090A; box-shadow: inset 0 -1px 0 rgba(244, 246, 248, .06); }
html[data-wx-theme="dark"] body.wx-da2 .wx-header__bar::before {
  background: linear-gradient(180deg, rgba(28, 32, 36, .82), rgba(20, 23, 26, .7));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(244, 246, 248, .08), 0 16px 36px -22px rgba(0, 0, 0, .8);
}
/* Logo Walexia : version de nuit (lettres claires, vert inchangé), partout où le logo apparaît, pied de page enregistré
   compris. L'en-tête a en plus sa propre image de nuit (.wx-header__logo-nuit), pour les navigateurs sans « content » sur une image. */
/* En clair, l'image de nuit reste masquée : la règle « display: block » des images du logo passait avant l'attribut hidden (5.51.1). */
.wx-header__logo .wx-header__logo-nuit { display: none; }
html[data-wx-theme="dark"] .wx-header__logo img:not(.wx-header__logo-nuit) { display: none; }
html[data-wx-theme="dark"] .wx-header__logo .wx-header__logo-nuit[hidden] { display: block; }
html[data-wx-theme="dark"] img[src*="walexia-logo.webp"] { content: url("../media/walexia-logo-nuit.webp"); }
html[data-wx-theme="dark"] img[src*="walexia-logo-2x.webp"] { content: url("../media/walexia-logo-nuit-2x.webp"); }

/* 5. Maquettes WhatsApp : elles restent claires, avec les jetons du thème clair -- */
html[data-wx-theme="dark"] body.wx-da2 :is(.wx-v2chat, .wx-phone, .wx-chatstats, .wx-wa__thread, .wx-msg, .wx-oc__chat, .wx-wagen__phone, .wx-wagen__preview, .wx-reel__screen) {
  --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-accent-text: #15803D; --wx-color-marker: #CFF5DB; --wx-color-focus: #121417;
  --wx-g-03: #FCFBF9; --wx-g-06: #F9F8F5; --wx-g-10: #F5F3EF; --wx-g-16: #EFECE6; --wx-g-24: #E8E4DC; --wx-g-32: #DFDAD0;
  --wx-green-100: #D9FDD3; --wx-green-50: #EDFBF2;
  --wx-msg-out: #D9FDD3; --wx-color-bubble-out: #D9FDD3; --wx-color-bubble-in: #FFFFFF; --wx-color-chat: #EFEAE2; --wx-color-wa-bar: #F7F8F6;
  color-scheme: light;
}
/* Le verre dépoli de la conversation du haut : opaque sur fond encre, pour garder le blanc de WhatsApp. */
html[data-wx-theme="dark"] body.wx-da2 .wx .wx-v2chat__panel { background: rgba(255, 255, 255, .96); box-shadow: 0 0 0 1px rgba(244, 246, 248, .1), 0 40px 80px -40px rgba(0, 0, 0, .85); }

/* 6. Logos clients : ni carré blanc ni gris terne. Le filtre #wx-logo-nuit (SVG de l'en-tête) rend le fond clair du
   logo transparent et dessine le logo en blanc, quelle que soit l'image (PNG à fond blanc ou détouré). */
html[data-wx-theme="dark"] .wx :is(.wx-marquee__track, .wx-logos, .wx-trust, .wx-v2case, .wx-casecard, .wx-caselib) img:not(.wx-wa-glyph),
html[data-wx-theme="dark"] .wx .wx-marquee__track img:hover { filter: url("#wx-logo-nuit"); opacity: .8; }
html[data-wx-theme="dark"] .wx .wx-marquee__track figure:hover img, html[data-wx-theme="dark"] .wx .wx-marquee__track img:hover { opacity: 1; }

/* 7. Panneaux encre : ils restent plus sombres que la page (ils étaient construits sur la couleur des titres) */
html[data-wx-theme="dark"] .wx .wx-footer__badges { background: linear-gradient(150deg, #0A0C0E, #111417); box-shadow: inset 0 0 0 1px rgba(244, 246, 248, .08), 0 22px 40px -26px rgba(0, 0, 0, .8); }
html[data-wx-theme="dark"] .wx .wx-footer__bar { background: linear-gradient(150deg, #08090B, #0C0E10 60%); box-shadow: inset 0 1px 0 rgba(244, 246, 248, .06); }
html[data-wx-theme="dark"] .wx .wx-footer__watermark { opacity: .06; }
html[data-wx-theme="dark"] .wx .wx-ugc__video { background: #000000; }
/* Accroche du héros : texte encre sur le surligneur vert, reflet clair qui passe */
@media (prefers-reduced-motion: no-preference) {
  html[data-wx-theme="dark"] .wx .wx-v2hero__hook-key { background-image: linear-gradient(100deg, #0E1F18 42%, #FFFFFF 50%, #0E1F18 58%); }
}

/* 8. Pastille verte du comparatif : texte encre */
html[data-wx-theme="dark"] .wx .wx-compare__col--wa .wx-compare__head b { color: #0E1F18; }

/* Bascule instantanée : aucune transition de couleur pendant le changement de thème */
html.wx-theme-switching *, html.wx-theme-switching *::before, html.wx-theme-switching *::after { transition: none !important; }