/* ==========================================================================
   Walexia — touches « conversation » sur la DA classique (5.15, 25/10/2026)
   Couche légère chargée après walexia.css quand config/da.json vaut « accents » (includes/assets.php).
   Retenu de l'essai « Conversation vive » (5.14, archivé dans backups/) parce que propre à WhatsApp et à Walexia :
   - le mot clé du H1 devient un message WhatsApp envoyé : la bulle se remplit, puis les coches passent au bleu « lu » ;
   - trois points « en train d'écrire » dans les surtitres en pastille ;
   - coches doubles dans les listes ; FAQ en bulles ; texture de conversation dans le bandeau d'appel à l'action ;
   - reflet sur la fin verte des titres de section à leur apparition.
   La DA classique reste la base : Arimo, fins de titres en #34D36B, boutons verts, en-tête et pied de page validés.
   Tout mouvement est coupé en mode « mouvement réduit » ; sans JavaScript, l'état final s'affiche.
   ========================================================================== */

.wx {
  --wx-msg-out: #D9FDD3;
  --wx-msg-read: #53BDEB;
  --wx-msg-sent: #8696A0;
  --wx-msg-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");
}

/* 1. Mot clé du H1 : un message WhatsApp envoyé ------------------------------------
   Bulle vert clair (fond en image : le style en ligne des patterns ne fixe que la couleur de fond), coin de la pointe
   en haut à droite, ombre douce de WhatsApp, coches en fin de message. */
.wx .wx-display mark {
  color: var(--wx-color-heading);
  background-image: linear-gradient(var(--wx-msg-out), var(--wx-msg-out));
  background-repeat: no-repeat; background-size: 100% 100%; background-position: 0 0;
  padding: .02em .18em .07em; margin-inline: .02em;
  border-radius: .26em .06em .26em .26em;
  box-shadow: 0 .03em .06em color-mix(in srgb, #0B141A 16%, transparent), 0 .35em .7em -.35em color-mix(in srgb, var(--wx-color-accent) 70%, transparent);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.wx .wx-display mark::after {
  content: ""; display: inline-block; width: .46em; height: .37em; margin-left: .14em; vertical-align: .03em;
  background: var(--wx-msg-read);
  -webkit-mask: var(--wx-msg-ticks) center / contain no-repeat; mask: var(--wx-msg-ticks) center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  /* La bulle se remplit de gauche à droite (message en cours d'envoi), puis les coches grises passent au bleu (lu). */
  .wx-motion .wx .wx-display mark { animation: wx-msg-fill 900ms var(--wx-ease) 650ms both; }
  .wx-motion .wx .wx-display mark::after { animation: wx-msg-read 1500ms var(--wx-ease-soft) 1400ms both; }
}
@keyframes wx-msg-fill {
  from { background-size: 0% 100%; box-shadow: none; }
  to { background-size: 100% 100%; }
}
@keyframes wx-msg-read {
  0% { opacity: 0; transform: scale(.4); background-color: var(--wx-msg-sent); }
  25% { opacity: 1; transform: scale(1.15); background-color: var(--wx-msg-sent); }
  40%, 62% { transform: scale(1); background-color: var(--wx-msg-sent); }
  80% { transform: scale(1.2); background-color: var(--wx-msg-read); }
  100% { opacity: 1; transform: scale(1); background-color: var(--wx-msg-read); }
}

/* 2. Fin verte des titres de section : reflet lumineux à l'apparition ------------------ */
@media (prefers-reduced-motion: no-preference) {
  .wx .wx-title.is-inview :is(mark, .wx-title__accent) {
    background-image: linear-gradient(100deg, var(--wx-color-accent) 0%, var(--wx-color-accent) 42%, #B6F5CB 50%, var(--wx-color-accent) 58%, var(--wx-color-accent) 100%);
    background-size: 260% 100%; background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    animation: wx-title-shine 1600ms var(--wx-ease-soft) 250ms both;
  }
}
@keyframes wx-title-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* 3. Surtitres en pastille : trois points « en train d'écrire » --------------------------- */
.wx .wx-eyebrow--dot::before {
  width: 21px; height: 12px; border-radius: 0; box-shadow: none;
  background:
    radial-gradient(circle, var(--wx-color-accent-text) 2.3px, transparent 2.8px) 0 50% / 7px 7px no-repeat,
    radial-gradient(circle, var(--wx-color-accent-text) 2.3px, transparent 2.8px) 7px 50% / 7px 7px no-repeat,
    radial-gradient(circle, var(--wx-color-accent-text) 2.3px, transparent 2.8px) 14px 50% / 7px 7px no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .wx .wx-eyebrow--dot::before { animation: wx-typing 1.5s ease-in-out infinite; }
}
@keyframes wx-typing {
  0%, 60%, 100% { background-position: 0 50%, 7px 50%, 14px 50%; }
  15% { background-position: 0 0, 7px 50%, 14px 50%; }
  30% { background-position: 0 50%, 7px 0, 14px 50%; }
  45% { background-position: 0 50%, 7px 50%, 14px 0; }
}

/* 4. Listes : coches doubles dans la pastille verte ------------------------------------ */
.wx .wx-checklist li::after {
  left: 4px; top: 6px; width: 16px; height: 13px;
  -webkit-mask: var(--wx-msg-ticks) center / contain no-repeat; mask: var(--wx-msg-ticks) center / contain no-repeat;
}

/* 5. FAQ en bulles : une carte douce par question, la réponse ouverte en bulle verte ------ */
.wx .wx-faq__list { display: grid; gap: 10px; }
.wx .wx-faq__item, .wx .wx-faq__item:first-child {
  border: 0; border-radius: 20px 20px 20px 6px; background: var(--wx-color-surface);
  box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm);
  transition: background-color 240ms var(--wx-ease-soft), box-shadow 240ms var(--wx-ease-soft);
}
.wx .wx-faq__item summary { padding: 20px 64px 20px 20px; border-radius: inherit; }
.wx .wx-faq__item summary::after { right: 14px; }
.wx .wx-faq__item summary::before { right: 24px; }
.wx .wx-faq__item:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 55%, transparent), var(--wx-shadow-sm); }
.wx .wx-faq__item[open] { background: var(--wx-msg-out); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 45%, transparent), var(--wx-shadow-md); }
.wx .wx-faq__item[open] summary::after { background-color: var(--wx-color-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 50%, transparent); }
.wx .wx-faq__item > :not(summary) { padding: 0 20px 22px; color: var(--wx-color-text); }

/* 6. Bandeau d'appel à l'action : texture discrète d'une conversation WhatsApp ----------- */
.wx .wx-cta-band__card {
  background:
    radial-gradient(color-mix(in srgb, var(--wx-color-heading) 7%, transparent) 1px, transparent 1.3px) 0 0 / 18px 18px,
    radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--wx-color-accent) 26%, transparent), transparent 70%),
    var(--wx-grad-card);
}

@media (forced-colors: active) {
  .wx .wx-display mark::after, .wx .wx-checklist li::after { background: CanvasText; }
  .wx .wx-title :is(mark, .wx-title__accent) { -webkit-text-fill-color: currentColor; }
}