/* -----------------------------------------------------------------------------
   CLOISONNEMENT AUTOMATIQUE — 2026-08-08
   Tous les selecteurs de cette feuille sont prefixes par `.elx-page`, le
   conteneur de la fiche produit. Aucune declaration n'a ete modifiee :
   chaque selecteur gagne la meme specificite, l'ordre de resolution de la
   landing est donc conserve a l'identique. Genere par _tools/scope-css.php
   -------------------------------------------------------------------------- */
/* =============================================================================
   ELAFYA - kinecomfort : feuille de style de la page produit
   -----------------------------------------------------------------------------
   EXTRACTION FIDELE. Ce fichier est la copie exacte du bloc <style> de la
   landing page d'origine :
     C:\Users\ECOLE SPEZZIA\kiné\index.html
   Aucune declaration n'a ete reecrite, reordonnee ni fusionnee. Les seules
   additions figurent en fin de fichier, dans une section clairement delimitee,
   et servent uniquement a raccorder le gabarit WooCommerce.
   Extrait le 2026-08-08.
   ========================================================================== */

/* ==========================================================================
   KINECONFORT PAR ELAFYA
   Palette Elafya conservee a l'identique (couche --el-*).
   Passe de finition 2026-08-03 :
     - hero reconstruit autour d'un detoure produit (le coussin est le sujet,
       le fauteuil ne sert plus de decor dominant) ;
     - section "Rester assis" remplacee par un comparateur a deux etats
       (probleme en noir et blanc, solution en couleur) ;
     - suppression de toute numerotation decorative et des fleches sans action ;
     - composition mobile propre a chaque section, page plus courte et plus
       dense, rythme de fonds alterne.
   ========================================================================== */

.elx-page{
  /* --- Couleurs Elafya (valeurs exactes du theme, inchangees) --- */
  --el-green:#0E3B2E;
  --el-green-hover:#0A2E23;
  --el-green-deep:#06241B;
  --el-ivory:#F8F5EE;
  --el-sand:#E9DECB;
  --el-paper:#FFFDF9;
  --el-studio:#F2EADB;
  --el-gold:#A8813F;
  --el-ink:#14211C;
  --el-muted:#4E5C55;
  --el-line:#E3DACA;
  --el-hair:rgba(248,245,238,.18);

  --el-sage:#E8EFEA;
  --el-gold-ink:#7A5C24;
  --el-gold-soft:#CDA96F;
  --el-plate:#FEFEFE;
  --el-body:#3D4B45;
  --el-placeholder:#6E7570;
  --el-on-dark:#F1EDE3;
  --el-on-dark-dim:rgba(241,237,227,.78);
  --el-err:#A8322A;

  /* Ivoire en composantes brutes : sert aux masques et voiles du hero. */
  --ivory-rgb:248,245,238;

  /* --- Typographie --- */
  --font-serif:'Newsreader',Georgia,'Times New Roman',serif;
  --font-sans:'Manrope',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;

  /* Echelle MOBILE (base). Les paliers 768 et 1024 la remplacent.
     H1 42 a 46, H2 32 a 36, H3 23 a 27, corps 17. Aucune valeur de texte
     utile ne descend sous 14px. */
  --fs-h1:clamp(42px,30.4px + 3.64vw,46px);
  --fs-h2:clamp(32px,20.4px + 3.64vw,36px);
  --fs-h3:clamp(23px,11.4px + 3.64vw,27px);
  --fs-h4:20px;
  --fs-lead:18px;
  --fs-body:17px;
  --fs-nav:15px;
  --fs-btn:15px;
  --fs-micro:14px;
  --fs-label:14px;

  /* --- Espacement : echelle unique 8 / 12 / 16 / 24 / 32 / 48 / 64 / 88 / 112 --- */
  --s1:8px;  --s2:12px; --s3:16px; --s4:24px; --s5:32px;
  --s6:48px; --s7:64px; --s8:88px; --s9:112px;

  --wrap:1320px;
  --gut:20px;
  --r:6px;
  --r-lg:12px;
  --nav-h:64px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.2s;
  --t-mid:.4s;
  --t-rise:.68s;
  --t-roll:.45s;
  --t-swap:.55s;

  --bleed:calc((100vw - min(100vw, var(--wrap))) / 2 + var(--gut));
}
@media (min-width:400px){ .elx-page{ --gut:24px; }}
@media (min-width:768px){
  .elx-page{
    --gut:40px; --nav-h:76px;
    --fs-h1:clamp(52px,10px + 5.47vw,66px);
    --fs-h2:clamp(40px,25px + 1.95vw,45px);
    --fs-h4:21px;
    --fs-lead:clamp(19px,1.2vw,20px);
    --fs-body:18px;
  }}
@media (min-width:1024px){
  .elx-page{
    --nav-h:84px;
    --fs-h1:clamp(64px,5.7vw,82px);
    --fs-h2:clamp(42px,4vw,58px);
    --fs-h3:clamp(27px,2.2vw,34px);
    --fs-h4:23px;
    --fs-lead:clamp(19px,1.35vw,21px);
  }}
@media (min-width:1200px){ .elx-page{ --gut:64px; }}
@media (min-width:1280px){ .elx-page .foot__top{ column-gap:var(--s6); }}

.elx-page *,.elx-page *::before,.elx-page *::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
  overflow-x:clip;
}
.elx-page{
  margin:0;
  background:var(--el-ivory);
  color:var(--el-ink);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.58;
  letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
}
.elx-page img{ display:block; max-width:100%; height:auto; }
.elx-page h1,.elx-page h2,.elx-page h3,.elx-page h4,.elx-page p,.elx-page ul,.elx-page ol,.elx-page figure,.elx-page dl,.elx-page dd{ margin:0; }
.elx-page ul,.elx-page ol{ padding:0; list-style:none; }
.elx-page a{ color:inherit; }
.elx-page button{ font:inherit; color:inherit; }
.elx-page ::selection{ background:var(--el-green); color:#fff; }
.elx-page :focus-visible{ outline:2px solid var(--el-green); outline-offset:3px; border-radius:2px; }
.elx-page .on-dark :focus-visible{ outline-color:var(--el-gold-soft); }

/* Retire par translation verticale et non par un decalage horizontal : le
   lien ne peut donc jamais deborder du cote oppose en lecture de droite a
   gauche. */
.elx-page .skip{
  position:absolute; inset-inline-start:0; top:0; z-index:200;
  transform:translateY(-200%);
  background:var(--el-green); color:#fff; padding:14px 20px;
  font-size:16px; font-weight:600; text-decoration:none;
}
.elx-page .skip:focus{ transform:none; }

/* ---------- Blocs typographiques ----------
   Newsreader : 500 pour les titres courants, 600 quand le titre doit peser
   davantage a petite taille. Aucun poids fin. */
.elx-page .h1{
  font-family:var(--font-serif); font-weight:500; font-size:var(--fs-h1);
  line-height:1.08; letter-spacing:-.018em;
}
.elx-page .h2{
  font-family:var(--font-serif); font-weight:500; font-size:var(--fs-h2);
  line-height:1.12; letter-spacing:-.015em;
}
.elx-page .h3{
  font-family:var(--font-serif); font-weight:600; font-size:var(--fs-h3);
  line-height:1.22; letter-spacing:-.008em;
}
.elx-page .eyebrow{
  font-size:var(--fs-label); font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--el-gold-ink); line-height:1.3;
}
.elx-page .lead{ font-size:var(--fs-lead); line-height:1.52; color:var(--el-body); letter-spacing:-.006em; }
.elx-page .body{ color:var(--el-body); }
.elx-page .micro{ font-size:var(--fs-micro); line-height:1.6; color:var(--el-muted); }

/* ---------- Structure ----------
   Mobile : 52px de padding vertical, aucune hauteur minimale, aucun vide
   superieur a 72px. Les paliers superieurs ouvrent progressivement. */
.elx-page .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.elx-page .section{ padding-block:48px; }
@media (min-width:600px){ .elx-page .section{ padding-block:58px; }}
@media (min-width:768px){ .elx-page .section{ padding-block:76px; }}
@media (min-width:1024px){ .elx-page .section{ padding-block:clamp(88px,7.2vw,112px); }}
.elx-page .bg-ivory{ background:var(--el-ivory); }
.elx-page .bg-paper{ background:var(--el-paper); }
.elx-page .bg-plate{ background:var(--el-plate); }
.elx-page .bg-sage{ background:var(--el-sage); }
.elx-page .bg-sand{ background:var(--el-sand); }
.elx-page .bg-studio{ background:var(--el-studio); }
.elx-page .bg-green{ background:var(--el-green); color:var(--el-on-dark); }

/* ==========================================================================
   SYSTEME DE MOUVEMENT
   Une courbe, quelques durees. Apparition par le bas, bascule de texte sur
   les elements interactifs, fondu croise sur les modules a etats.
   Les grands titres et les paragraphes ne recoivent jamais de bascule.
   ========================================================================== */
.elx-page .rise{
  opacity:0; transform:translateY(16px);
  transition:opacity var(--t-rise) var(--ease-out), transform var(--t-rise) var(--ease-out);
  transition-delay:var(--d,0s);
}
.elx-page .rise.is-in{ opacity:1; transform:none; }

/* Bascule de texte sur liens et boutons. Le duplicata vient de ::after via
   data-t : aucun noeud supplementaire. Le texte alternatif vide de la
   propriete content ("/ \"\"") retire ce duplicata de l'arbre
   d'accessibilite, sinon chaque libelle serait annonce deux fois. La
   declaration simple qui precede sert de repli. La hauteur du bouton ne
   change jamais, les accents restent entiers. */
.elx-page .roll{
  display:inline-block; overflow:hidden; vertical-align:top;
  line-height:1.35; white-space:nowrap; max-width:100%; min-width:0;
}
.elx-page .roll__i{
  display:block; position:relative; line-height:1.35;
  transition:transform var(--t-roll) var(--ease-out);
}
.elx-page .roll__i::after{
  content:attr(data-t);
  content:attr(data-t) / "";
  position:absolute; inset-inline-start:0; top:100%; width:100%;
  white-space:nowrap;
}
.elx-page a:hover .roll__i,
.elx-page a:focus-visible .roll__i,
.elx-page button:hover .roll__i,
.elx-page button:focus-visible .roll__i{ transform:translateY(-100%); }

/* Fleche : reservee aux elements qui declenchent reellement une action. */
.elx-page .arw{ width:17px; height:17px; flex:none; transition:transform var(--t-mid) var(--ease-out); }
.elx-page a:hover .arw, .elx-page button:hover .arw, .elx-page a:focus-visible .arw, .elx-page button:focus-visible .arw{ transform:translateX(5px); }

/* Filet qui se deploie sous un titre de section */
.elx-page .rule{
  height:1px; width:0; background:var(--el-gold); opacity:.5;
  transition:width 1s var(--ease-out) .12s;
}
.elx-page .is-in .rule, .elx-page .rise.is-in > .rule{ width:56px; }
.elx-page .on-dark .rule{ background:var(--el-gold-soft); opacity:.62; }

/* ---------- Boutons ---------- */
.elx-page .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px;
  font-size:var(--fs-btn); font-weight:600; line-height:1.25; letter-spacing:-.004em;
  text-decoration:none; cursor:pointer;
  padding:14px 26px; border:1px solid transparent; border-radius:var(--r);
  transition:background-color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease);
}
.elx-page .btn--primary{ background:var(--el-green); border-color:var(--el-green); color:#fff; }
.elx-page .btn--primary:hover{ background:var(--el-green-hover); border-color:var(--el-green-hover); }
.elx-page .btn--ghost{ background:transparent; border-color:rgba(20,33,28,.24); color:var(--el-ink); }
.elx-page .btn--ghost:hover{ border-color:var(--el-green); color:var(--el-green); }
.elx-page .btn--onDark{ background:var(--el-ivory); border-color:var(--el-ivory); color:var(--el-green-deep); }
.elx-page .btn--onDark:hover{ background:#fff; border-color:#fff; }
.elx-page .btn--sm{ min-height:44px; padding:11px 20px; font-size:15px; }
.elx-page .btn--lg{ min-height:56px; padding:18px 30px; font-size:16px; }
.elx-page .btn--block{ width:100%; }

/* ==========================================================================
   1 . BARRE DE CONFIANCE
   Desktop : les trois promesses sur une ligne.
   Sous 900px : une seule promesse visible a la fois, rotation lente, hauteur
   fixe de 38px. Aucune compression sur plusieurs lignes.
   ========================================================================== */
.elx-page .trustbar{ background:var(--el-green); color:rgba(241,237,227,.94); }
.elx-page .trustbar__list{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:4px 24px; padding-block:9px;
  font-size:14px; font-weight:500; letter-spacing:.012em; line-height:1.55;
}
.elx-page .trustbar__i + .trustbar__i{ position:relative; padding-inline-start:24px; }
.elx-page .trustbar__i + .trustbar__i::before{
  content:''; position:absolute; inset-inline-start:0; top:50%; width:1px; height:12px;
  margin-top:-6px; background:var(--el-hair);
}
@media (max-width:899px){
  .elx-page .trustbar__list{
    display:block; position:relative; height:38px; padding-block:0; gap:0;
  }
  .elx-page .trustbar__i{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .5s var(--ease); text-align:center;
  }
  .elx-page .trustbar__i.is-on{ opacity:1; }
  .elx-page .trustbar__i + .trustbar__i{ padding-inline-start:0; }
  .elx-page .trustbar__i + .trustbar__i::before{ display:none; }}

/* ==========================================================================
   2 . NAVBAR
   Hauteur compacte, logo toujours lisible, bouton menu de 44px minimum.
   ========================================================================== */
.elx-page .nav{
  position:sticky; top:0; z-index:60;
  background:rgba(255,253,249,.93);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--el-line);
}
.elx-page .nav__in{ display:flex; align-items:center; gap:var(--s4); height:var(--nav-h); }

.elx-page .brand{ display:inline-flex; align-items:center; flex:none; min-height:44px; line-height:0; }
.elx-page .brand img{ width:142px; height:auto; }
@media (min-width:400px){ .elx-page .brand img{ width:154px; }}
@media (min-width:768px){ .elx-page .brand img{ width:168px; }}
@media (min-width:1024px){ .elx-page .brand img{ width:180px; }}
@media (min-width:1280px){ .elx-page .brand img{ width:196px; }}

.elx-page .nav__links{ display:none; align-items:center; gap:26px; margin-inline-start:auto; }
.elx-page .nav__links a{
  font-size:var(--fs-nav); font-weight:500; color:var(--el-body);
  text-decoration:none; padding-block:4px;
  border-bottom:1px solid transparent;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.elx-page .nav__links a:hover,
.elx-page .nav__links a.is-active{ color:var(--el-green); border-color:var(--el-gold); }
.elx-page .nav__end{ display:none; align-items:center; gap:18px; }
.elx-page .nav__side{
  font-size:var(--fs-nav); font-weight:600; color:var(--el-gold-ink);
  text-decoration:none; white-space:nowrap;
  border-bottom:1px solid transparent;
  transition:border-color var(--t-fast) var(--ease);
}
.elx-page .nav__side:hover{ border-color:var(--el-gold-ink); }
.elx-page .burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; margin-inline-start:auto; margin-inline-end:-6px;
  background:transparent; border:1px solid var(--el-line); border-radius:var(--r);
  cursor:pointer; transition:border-color var(--t-fast) var(--ease);
}
.elx-page .burger:hover{ border-color:var(--el-green); }
.elx-page .burger svg{ width:20px; height:20px; }
.elx-page .burger .i-close{ display:none; }
.elx-page .burger[aria-expanded="true"] .i-menu{ display:none; }
.elx-page .burger[aria-expanded="true"] .i-close{ display:block; }
.elx-page .navdrawer{ background:var(--el-paper); border-top:1px solid var(--el-line); }
.elx-page .navdrawer[hidden]{ display:none; }
.elx-page .navdrawer ul{ padding-block:4px 14px; }
.elx-page .navdrawer ul a{
  display:block; padding:14px 0; text-decoration:none;
  font-size:17px; font-weight:500; color:var(--el-ink);
  border-bottom:1px solid var(--el-line);
}
.elx-page .navdrawer .btn{ margin-top:16px; }
.elx-page .navdrawer .nav__side{ display:inline-block; margin-top:18px; margin-bottom:4px; }
@media (min-width:1024px){
  .elx-page .nav__links,.elx-page .nav__end{ display:flex; }
  .elx-page .burger{ display:none; }
  .elx-page .navdrawer{ display:none !important; }}
/* Entre 1024 et 1199px, cinq entrees de navigation, le lien de marque et le
   bouton ne tiennent pas sur une ligne. Le lien secondaire vers Elafya cede
   sa place : il reste present dans le bridge et dans le pied de page. */
@media (min-width:1024px) and (max-width:1199px){
  .elx-page .nav__links{ gap:20px; }
  .elx-page .nav__end .nav__side{ display:none; }}

/* ==========================================================================
   3 . HERO
   Le sujet est le coussin, pas le fauteuil. Le visuel est un detoure pose
   sur un champ studio, avec ombre de contact : le produit occupe la plus
   grande part de la surface visuelle a toutes les largeurs.

   MOBILE  : bande photo pleine largeur en premier (42 a 50 svh), puis un
             bloc texte compact. Aucun mot pose sur l'image, aucun voile.
   DESKTOP : texte a gauche sur l'ivoire, champ produit a droite, son bord
             gauche dissout par un masque incline.
   ========================================================================== */
.elx-page .hero{ position:relative; background:var(--el-ivory); }

/* MOBILE : bande photo pleine largeur, cadrage carre dedie ou le coussin
   occupe l'essentiel du cadre. Aucun texte pose sur l'image, aucun voile. */
.elx-page .hero__panel{
  position:relative; overflow:hidden;
  height:clamp(300px,46svh,430px);
  background:var(--el-studio);
}
.elx-page .hero__stage{ position:relative; width:100%; height:100%; }
.elx-page .hero__stage img{
  width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  animation:heroIn 1.3s var(--ease-out) both;
}
@keyframes heroIn{ from{ opacity:0; transform:scale(1.045); } to{ opacity:1; transform:none; } }

.elx-page .hero__in{ position:relative; padding-block:24px 36px; }
.elx-page .hero h1{ margin-bottom:14px; text-wrap:balance; }
.elx-page .hero__sub{ margin-bottom:24px; max-width:40ch; }
.elx-page .hero__cta .btn{ width:100%; }

/* Prix et conditions dans un seul bloc compact, une ligne de separation. */
.elx-page .hero__deal{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 14px;
  margin-top:22px; padding-top:18px;
  border-top:1px solid rgba(20,33,28,.16);
}
.elx-page .hero__price{
  font-family:var(--font-serif); font-weight:500; font-size:32px;
  line-height:1.1; letter-spacing:-.02em; color:var(--el-green);
}
.elx-page .hero__note{
  font-size:15px; font-weight:500; line-height:1.5;
  color:var(--el-ink); max-width:34ch;
}

@media (min-width:768px){
  .elx-page .hero__panel{ height:clamp(340px,44svh,460px); }
  .elx-page .hero__in{ padding-block:var(--s6) var(--s7); }
  .elx-page .hero__copy{ max-width:660px; }
  .elx-page .hero__sub{ max-width:46ch; }
  .elx-page .hero__cta .btn{ width:auto; }
  .elx-page .hero__price{ font-size:38px; }
  .elx-page .hero__note{ font-size:16px; max-width:36ch; }}

/* --- Desktop : composition editoriale a masque doux --- */
@media (min-width:1024px){
  .elx-page .hero{
    display:flex; align-items:center; isolation:isolate; overflow:hidden;
    min-height:clamp(560px,74svh,860px);
  }
  .elx-page .hero__panel{
    position:absolute; inset-block:0; inset-inline:45% 0; height:auto; z-index:-1;
    background:var(--el-ivory);
    /* Dissolution inclinee du bord gauche sur environ 15% de la largeur du
       panneau : la photo emerge de l'ivoire, sans arete ni bande visible.
       Le fondu se termine avant le coussin, qui reste entierement net. */
    -webkit-mask-image:linear-gradient(96deg,
        rgba(0,0,0,0) 0%,   rgba(0,0,0,.07) 2.5%, rgba(0,0,0,.22) 5%,
        rgba(0,0,0,.46) 7.5%, rgba(0,0,0,.70) 10%, rgba(0,0,0,.89) 12.5%,
        rgba(0,0,0,1) 15%);
    mask-image:linear-gradient(96deg,
        rgba(0,0,0,0) 0%,   rgba(0,0,0,.07) 2.5%, rgba(0,0,0,.22) 5%,
        rgba(0,0,0,.46) 7.5%, rgba(0,0,0,.70) 10%, rgba(0,0,0,.89) 12.5%,
        rgba(0,0,0,1) 15%);
  }
  /* Le cadrage garde le coussin entier et centre dans le panneau : la partie
     gauche de la scene est recadree, jamais le produit. */
  .elx-page .hero__stage img{ object-position:86% 50%; animation-duration:1.5s; }
  /* Coins adoucis vers l'ivoire : la photo n'a aucun bord de carte. */
  .elx-page .hero__panel::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(120% 110% at 64% 50%,
        rgba(var(--ivory-rgb),0) 58%,
        rgba(var(--ivory-rgb),.18) 82%,
        rgba(var(--ivory-rgb),.44) 100%),
      linear-gradient(to bottom,
        rgba(var(--ivory-rgb),.30) 0%,
        rgba(var(--ivory-rgb),0) 14%,
        rgba(var(--ivory-rgb),0) 74%,
        rgba(var(--ivory-rgb),.38) 100%);
  }

  .elx-page .hero__in{ width:100%; padding-block:var(--s5); }
  .elx-page .hero__copy{ max-width:none; }
  .elx-page .hero h1{ max-width:min(37%,560px); margin-bottom:var(--s4); }
  .elx-page .hero__sub{ max-width:min(33%,440px); margin-bottom:var(--s4); }
  .elx-page .hero__cta{ max-width:min(33%,440px); }
  .elx-page .hero__deal{ max-width:min(33%,440px); margin-top:var(--s4); padding-top:var(--s4); }
  .elx-page .hero__price{ font-size:42px; }}
@media (min-width:1440px){
  .elx-page .hero h1{ max-width:min(37%,600px); }
  .elx-page .hero__sub,.elx-page .hero__cta,.elx-page .hero__deal{ max-width:min(33%,450px); }}

/* Revelation d'entree : courte, le contenu est lisible avant la fin. */
.elx-page .hl{ opacity:0; transform:translateY(14px); animation:hlIn .7s var(--ease-out) forwards; animation-delay:var(--d,0s); }
@keyframes hlIn{ to{ opacity:1; transform:none; } }

/* ==========================================================================
   4 . POUR QUI
   Grille editoriale : intitule fort, description courte, filets fins.
   Aucun numero, aucune icone, aucune carte, aucune hauteur minimale.
   Desktop 2x2, mobile empile dans le meme ordre.
   ========================================================================== */
.elx-page .who__head{ max-width:760px; }
.elx-page .who__head .eyebrow{ margin-bottom:10px; }
.elx-page .who__head .h2{ text-wrap:balance; }
.elx-page .who__sub{ margin-top:10px; color:var(--el-muted); }
.elx-page .who__list{ display:grid; gap:16px; margin-top:24px; }
.elx-page .who__item{ padding-top:16px; border-top:1px solid rgba(20,33,28,.16); }
.elx-page .who__t{
  font-family:var(--font-serif); font-weight:600; font-size:var(--fs-h3);
  line-height:1.24; letter-spacing:-.008em; color:var(--el-green);
}
.elx-page .who__item p{ margin-top:7px; color:var(--el-body); }
@media (min-width:600px){
  .elx-page .who__list{ gap:24px; margin-top:32px; }}
@media (min-width:900px){
  .elx-page .who__list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(40px,4.6vw,var(--s8)); row-gap:var(--s5);
    margin-top:var(--s6);
  }
  .elx-page .who__t{ font-size:26px; }
  .elx-page .who__item p{ max-width:46ch; }}
@media (min-width:1024px){
  .elx-page .who__list{ row-gap:var(--s6); }
  .elx-page .who__t{ font-size:28px; }}

/* ==========================================================================
   5 . COMPARATEUR PROBLEME / SOLUTION
   Deux etats controles par le visiteur : clic, clavier, tap et balayage.
   Etat 1 en noir et blanc, etat 2 en couleur naturelle. Les deux panneaux
   sont empiles dans la meme cellule de grille : la hauteur est celle du plus
   grand, elle ne bouge donc jamais pendant la bascule.

   Passe conversion 2026-08-03 : le fond vert profond de cette section a ete
   remplace par un fond creme (--el-studio). Le vert ne sert plus de fond, il
   reste uniquement en accent (onglet actif, titre de l'etat solution, filet).
   ========================================================================== */
.elx-page .cmp__head{ max-width:720px; }
.elx-page .cmp__head .eyebrow{ color:var(--el-gold-ink); margin-bottom:10px; }
.elx-page .cmp__head .h2{ color:var(--el-ink); text-wrap:balance; }
.elx-page .cmp__head .rule{ margin-top:16px; }

.elx-page .cmp{ margin-top:26px; }

/* Deux boutons libelles, jamais une fleche seule. */
.elx-page .cmp__switch{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
  margin-bottom:18px;
}
/* Sous 400px, deux colonnes ne laissent plus assez de place au libelle
   « Avec KinéConfort » : le duplicata du text-roll etant en nowrap, il serait
   coupe en plein mot. Les deux boutons passent donc l'un sous l'autre. */
@media (max-width:399px){
  .elx-page .cmp__switch{ grid-template-columns:minmax(0,1fr); }
  .elx-page .cmp__btn{ padding:12px 10px; }}
.elx-page .cmp__btn{
  min-height:48px; padding:12px 14px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,253,249,.62); color:var(--el-muted);
  border:1px solid rgba(20,33,28,.14); border-radius:var(--r);
  font-size:15px; font-weight:600; letter-spacing:-.004em;
  cursor:pointer;
  transition:background-color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease);
}
.elx-page .cmp__btn:hover{ border-color:rgba(20,33,28,.3); color:var(--el-ink); }
.elx-page .cmp__btn[aria-selected="true"]{
  background:var(--el-green); border-color:var(--el-green); color:#fff;
}

.elx-page .cmp__stack{ display:grid; }
.elx-page .cmp__pane{
  grid-area:1 / 1;
  opacity:0; visibility:hidden; transform:translateX(16px);
  transition:opacity var(--t-swap) var(--ease-out),
             transform var(--t-swap) var(--ease-out),
             visibility 0s linear var(--t-swap);
}
.elx-page .cmp__pane.is-active{
  opacity:1; visibility:visible; transform:none;
  transition:opacity var(--t-swap) var(--ease-out),
             transform var(--t-swap) var(--ease-out),
             visibility 0s linear 0s;
}
.elx-page .cmp__fig{
  margin:0; overflow:hidden; border-radius:var(--r-lg);
  background:var(--el-sand);
  box-shadow:0 1px 0 rgba(20,33,28,.05), 0 18px 40px -28px rgba(20,33,28,.35);
}
.elx-page .cmp__fig img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; }
/* Etat solution : cadrage recentre a la main sur la personne assise. La
   regle d'aspect-ratio ci-dessus reste commune aux deux panneaux, donc les
   deux vignettes gardent exactement la meme hauteur. */
.elx-page .cmp__fig--assise img{ object-position:55% 50%; }
/* Etat probleme : noir et blanc reel, contraste legerement renforce.
   Aucune teinte bleue, aucun effet dramatique. */
.elx-page .cmp__fig--bw img{ filter:grayscale(1) contrast(1.07) brightness(.99); }
.elx-page .cmp__txt{ margin-top:20px; }
.elx-page .cmp__txt h3{ color:var(--el-green); margin-bottom:10px; text-wrap:balance; }
.elx-page .cmp__txt p{ color:var(--el-body); max-width:52ch; }
/* Etat solution : les trois benefices en lignes courtes, sans ponctuation. */
.elx-page .cmp__points{ display:grid; gap:9px; max-width:52ch; }
.elx-page .cmp__points li{
  position:relative; padding-inline-start:20px; color:var(--el-body); line-height:1.5;
}
.elx-page .cmp__points li::before{
  content:''; position:absolute; inset-inline-start:0; top:.62em;
  width:7px; height:7px; border-radius:50%;
  background:var(--el-gold); opacity:.75;
}
.elx-page .cmp__hint{ margin-top:18px; font-size:14px; color:var(--el-muted); }

@media (min-width:600px){
  .elx-page .cmp__fig img{ aspect-ratio:4/3; }}
@media (min-width:768px){
  .elx-page .cmp{ margin-top:var(--s5); }
  .elx-page .cmp__switch{ display:inline-grid; grid-auto-flow:column; grid-template-columns:none; gap:10px; }
  .elx-page .cmp__btn{ padding:12px 26px; }}
@media (min-width:1024px){
  .elx-page .cmp__pane{
    display:grid; grid-template-columns:minmax(0,58fr) minmax(0,42fr);
    column-gap:clamp(36px,3.6vw,var(--s7)); align-items:center;
  }
  .elx-page .cmp__fig img{ aspect-ratio:16/10; }
  .elx-page .cmp__txt{ margin-top:0; }
  .elx-page .cmp__hint{ margin-top:var(--s4); }}

/* ==========================================================================
   6 . COMMENT IL FONCTIONNE
   Grand packshot (au moins 78% de la largeur utile sur mobile), trois
   explications, caracteristiques en grille 2x2 puis 4 colonnes.
   ========================================================================== */
.elx-page .how__grid{ display:grid; gap:20px; align-items:start; }
.elx-page .how__figure{ margin:0; }
.elx-page .how__figure img{ width:100%; border-radius:var(--r-lg); }
.elx-page .how__caption{ margin-top:10px; }
.elx-page .how__head .eyebrow{ margin-bottom:10px; }
.elx-page .how__head .h2{ text-wrap:balance; }
.elx-page .how__head p{ margin-top:12px; }
.elx-page .levers{ display:grid; gap:18px; margin-top:24px; }
.elx-page .lever{ padding-top:16px; border-top:1px solid var(--el-line); }
.elx-page .lever h3{
  font-family:var(--font-serif); font-weight:600; font-size:var(--fs-h3);
  line-height:1.22; letter-spacing:-.008em; color:var(--el-green);
  margin-bottom:6px;
}
.elx-page .lever p{ color:var(--el-body); max-width:52ch; }
.elx-page .specs{
  margin-top:26px; padding-top:22px; border-top:1px solid var(--el-line);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px var(--s4);
}
.elx-page .spec dt{
  font-size:var(--fs-label); letter-spacing:.15em; text-transform:uppercase;
  color:var(--el-muted); margin-bottom:5px; font-weight:600;
}
.elx-page .spec dd{
  font-family:var(--font-serif); font-weight:500; font-size:var(--fs-h4);
  color:var(--el-ink); line-height:1.25;
}

/* --- Bloc de reassurance : prolongement des seances ---
   Encadre sobre, filet or, fond creme. Il ferme la section technique sans
   ajouter de bruit visuel. */
.elx-page .extend{
  margin-top:26px; padding:20px 22px;
  background:var(--el-studio); border-radius:var(--r-lg);
  border:1px solid var(--el-line);
}
.elx-page .extend h3{
  font-family:var(--font-serif); font-weight:600; font-size:var(--fs-h3);
  line-height:1.22; letter-spacing:-.008em; color:var(--el-green);
  margin-bottom:10px; text-wrap:balance;
}
.elx-page .extend p{ color:var(--el-body); max-width:66ch; }

/* --- Bloc protection produit ---
   Discret mais credible : filet or vertical, majuscules espacees sur le
   titre, trois lignes courtes. Il remplace l'ancienne note fabricant. */
.elx-page .guard{
  margin-top:22px; padding-block:14px; padding-inline:18px 0;
  border-inline-start:2px solid var(--el-gold);
  display:grid; grid-template-columns:auto minmax(0,1fr);
  column-gap:14px; align-items:start;
}
.elx-page .guard__ico{
  width:19px; height:19px; margin-top:2px;
  color:var(--el-gold-ink); flex:none;
}
.elx-page .guard__t{
  font-size:var(--fs-label); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--el-gold-ink); line-height:1.3;
  margin-bottom:6px;
}
.elx-page .guard__l{ display:grid; gap:3px; }
.elx-page .guard__l li{ font-size:14px; line-height:1.55; color:var(--el-muted); }
@media (min-width:900px){
  .elx-page .how__grid{ grid-template-columns:minmax(0,54fr) minmax(0,46fr); gap:clamp(40px,4.4vw,var(--s7)); }
  .elx-page .how__figure{ align-self:center; }
  .elx-page .levers{ gap:var(--s5); margin-top:var(--s6); }
  .elx-page .specs{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s5); margin-top:var(--s6); padding-top:var(--s5); }
  .elx-page .extend{ margin-top:var(--s6); padding:var(--s4) var(--s5); }
  .elx-page .guard{ margin-top:var(--s5); padding-block:var(--s2); }
  .elx-page .guard__l{ display:flex; flex-wrap:wrap; column-gap:var(--s4); row-gap:4px; }
  .elx-page .guard__l li{ font-size:15px; }
  .elx-page .guard__l li + li{ position:relative; padding-inline-start:var(--s4); }
  .elx-page .guard__l li + li::before{
    content:''; position:absolute; inset-inline-start:0; top:50%; transform:translateY(-50%);
    width:3px; height:3px; border-radius:50%; background:var(--el-gold); opacity:.6;
  }}

/* ==========================================================================
   7 . UTILISATIONS
   Quatre categories : maison, travail et etudes, voyage, attente.
   Chaque categorie porte sa propre mini galerie. Une seule photo est
   visible a la fois, le passage se fait en fondu doux, et la hauteur de
   la scene ne bouge jamais : ni au changement de categorie, ni au
   changement de photo. Rien ne defile tout seul.
   Desktop : liste editoriale a gauche, grande scene a droite.
   Mobile   : scene, puis onglets, puis indicateurs, puis description.
              L'ordre du document garde les onglets en premier pour que le
              clavier atteigne la liste avant les commandes de galerie.
   ========================================================================== */
.elx-page .uses__head .eyebrow{ margin-bottom:10px; }
.elx-page .uses__head .h2{ text-wrap:balance; }
.elx-page .uses__head p{ margin-top:12px; max-width:56ch; }

.elx-page .uses__grid{
  display:flex; flex-direction:column; gap:16px; margin-top:26px;
}
.elx-page .uses__nav{ order:2; }
.elx-page .uses__stage{ order:1; }
.elx-page .uses__ind{ order:3; }
.elx-page .uses__desc{ order:4; }

/* --- La scene ------------------------------------------------------------
   aspect-ratio fixe : la hauteur est connue avant le decodage des images,
   donc aucun saut de mise en page. touch-action:pan-y laisse le defilement
   vertical a la page et reserve le geste horizontal a la galerie. */
.elx-page .uses__stage{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  border-radius:var(--r-lg); background:var(--el-studio);
  touch-action:pan-y;
}
/* Panneau = une categorie. Diapo = une photo dans cette categorie.
   Les deux se comportent pareil : opacite pour le fondu, visibilite pour
   sortir de l'arbre d'accessibilite une fois le fondu termine. */
.elx-page .usepanel,
.elx-page .useslide{
  position:absolute; inset:0; margin:0;
  opacity:0; visibility:hidden;
  transition:opacity var(--t-swap) var(--ease-out),
             visibility 0s linear var(--t-swap);
}
.elx-page .usepanel.is-active{
  opacity:1; visibility:visible;
  transition:opacity var(--t-swap) var(--ease-out), visibility 0s linear 0s;
}
/* inherit et non visible : la visibilite est une propriete qu'un enfant peut
   rallumer sous un parent eteint. La photo active d'une categorie inactive
   doit rester eteinte, sinon elle resterait annoncee par les lecteurs
   d'ecran alors qu'elle n'est pas a l'ecran. */
.elx-page .useslide.is-active{
  opacity:1; visibility:inherit;
  transition:opacity var(--t-swap) var(--ease-out), visibility 0s linear 0s;
}
.elx-page .useslide img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:50% 62%;
}
/* Photo verticale : jamais recadree de force, jamais deformee. Elle est
   posee entiere sur le fond studio, qui est deja la couleur de la scene. */
.elx-page .useslide--fit img{ object-fit:contain; object-position:50% 50%; }

/* --- Precedent et suivant ------------------------------------------------
   Affiches par le script uniquement quand la categorie active compte
   plusieurs photos. Absolus dans la scene : les montrer ou les cacher ne
   deplace aucun element. */
.elx-page .usearr{
  position:absolute; top:50%; z-index:3;
  width:44px; height:44px; margin-top:-22px;
  display:none; place-items:center;
  padding:0; border:1px solid var(--el-line); border-radius:50%;
  background:rgba(255,253,249,.92); color:var(--el-green);
  cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
}
.elx-page .uses__stage.has-gallery .usearr{ display:grid; }
.elx-page .usearr:hover{ background:var(--el-paper); border-color:var(--el-gold-soft); }
.elx-page .usearr--prev{ inset-inline-start:12px; }
.elx-page .usearr--next{ inset-inline-end:12px; }
.elx-page .usearr svg{ width:20px; height:20px; }
.elx-page .usearr--prev svg{ transform:scaleX(-1); }

/* --- Indicateurs ---------------------------------------------------------
   La rangee garde toujours sa hauteur, meme vide : passer d'une categorie
   a plusieurs photos a une categorie a photo unique ne fait rien bouger. */
.elx-page .uses__ind{
  display:flex; align-items:center; justify-content:center;
  gap:2px; min-height:44px;
  /* La zone tactile fait bien 44 px, le trait reste discret : la marge
     negative rattrape l'air en trop autour de la rangee. */
  margin-block:-8px;
}
.elx-page .usedot{
  width:34px; height:44px; padding:0; border:0;
  background:transparent; cursor:pointer;
  display:grid; place-items:center;
}
.elx-page .usedot::before{
  content:''; width:22px; height:3px; border-radius:2px;
  background:var(--el-line);
  transition:background var(--t-fast) var(--ease), width var(--t-fast) var(--ease);
}
.elx-page .usedot[aria-current="true"]::before{ background:var(--el-green); width:28px; }

/* --- Description active --------------------------------------------------
   Les quatre descriptions sont empilees dans la meme cellule de grille :
   le bloc prend la hauteur de la plus longue et ne bouge plus jamais. */
.elx-page .uses__desc{ display:grid; }
.elx-page .uses__d{
  grid-area:1/1; margin:0; max-width:56ch;
  color:var(--el-body); font-size:var(--fs-body); line-height:1.55;
  opacity:0; visibility:hidden;
  transition:opacity var(--t-mid) var(--ease), visibility 0s linear var(--t-mid);
}
.elx-page .uses__d.is-active{
  opacity:1; visibility:visible;
  transition:opacity var(--t-mid) var(--ease), visibility 0s linear 0s;
}

.elx-page .uses__nav{ display:grid; }
.elx-page .use{
  position:relative; width:100%; text-align:start; cursor:pointer;
  background:transparent; border:0;
  transition:padding-inline-start var(--t-mid) var(--ease),
             background-color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease);
}
.elx-page .use__t{
  font-family:var(--font-serif); font-weight:600;
  line-height:1.2; letter-spacing:-.01em;
  transition:color var(--t-fast) var(--ease);
}

/* --- Mobile et tablette : onglets compacts sur une ligne defilante --- */
@media (max-width:1023px){
  .elx-page .uses__nav{
    display:flex; gap:8px; overflow-x:auto; overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--gut)); padding-inline:var(--gut);
    padding-block:2px 4px;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .elx-page .uses__nav::-webkit-scrollbar{ display:none; }
  .elx-page .use{
    width:auto; flex:0 0 auto; min-height:44px; padding:11px 18px;
    display:inline-flex; align-items:center;
    background:var(--el-paper); border:1px solid var(--el-line);
    border-radius:999px;
  }
  .elx-page .use__t{ font-family:var(--font-sans); font-size:15px; font-weight:600; color:var(--el-ink); }
  .elx-page .use[aria-selected="true"]{ background:var(--el-green); border-color:var(--el-green); }
  .elx-page .use[aria-selected="true"] .use__t{ color:#fff; }}
@media (min-width:768px) and (max-width:1023px){
  .elx-page .uses__stage{ aspect-ratio:4/3; }}

/* --- Desktop : liste editoriale, filet vertical sur l'onglet actif --- */
@media (min-width:1024px){
  .elx-page .uses__grid{
    display:grid;
    grid-template-columns:minmax(0,40fr) minmax(0,60fr);
    grid-template-areas:
      "nav stage"
      "nav ind"
      "nav desc";
    column-gap:clamp(40px,4.4vw,var(--s7));
    row-gap:var(--s3);
    margin-top:var(--s6);
    align-items:start;
  }
  .elx-page .uses__nav{ grid-area:nav; border-top:1px solid var(--el-line); }
  .elx-page .uses__stage{ grid-area:stage; aspect-ratio:auto; min-height:clamp(460px,38vw,560px); }
  .elx-page .uses__ind{ grid-area:ind; justify-content:flex-start; margin-inline-start:-6px; }
  .elx-page .uses__desc{ grid-area:desc; }
  .elx-page .use{
    display:grid; gap:6px; min-height:48px;
    border-bottom:1px solid var(--el-line); padding:var(--s4) 0;
  }
  .elx-page .use::before{
    content:''; position:absolute; inset-inline-start:0; top:-1px; bottom:-1px; width:2px;
    background:var(--el-green); transform:scaleY(0); transform-origin:top;
    transition:transform var(--t-mid) var(--ease-out);
  }
  .elx-page .use[aria-selected="true"]{ padding-inline-start:var(--s3); }
  .elx-page .use[aria-selected="true"]::before{ transform:scaleY(1); }
  .elx-page .use__t{ font-size:clamp(26px,2vw,32px); color:var(--el-ink); }
  .elx-page .use[aria-selected="true"] .use__t{ color:var(--el-green); }}

/* ==========================================================================
   8 . QUALITE ET ENTRETIEN
   Image pleine largeur, titre et texte juste dessous, section courte.
   ========================================================================== */
.elx-page .care__in{ display:grid; gap:18px; align-items:center; }
.elx-page .care__img{
  margin:0 calc(-1 * var(--gut)); aspect-ratio:16/9; overflow:hidden;
}
@media (min-width:768px){ .elx-page .care__img{ aspect-ratio:16/10; }}
.elx-page .care__img img{ width:100%; height:100%; object-fit:cover; object-position:50% 52%; }
.elx-page .care__copy .eyebrow{ margin-bottom:10px; }
.elx-page .care__copy h2{ margin-bottom:12px; max-width:20ch; text-wrap:balance; }
.elx-page .care__copy p{ max-width:46ch; color:var(--el-body); }
.elx-page .care__copy p + p{ margin-top:10px; }
@media (min-width:1024px){
  .elx-page .care__in{ grid-template-columns:minmax(0,56fr) minmax(0,44fr); gap:clamp(44px,4.4vw,var(--s8)); }
  .elx-page .care__img{
    margin:0; margin-inline-start:calc(-1 * var(--bleed));
    width:calc(100% + var(--bleed));
    border-start-end-radius:var(--r-lg);
    border-end-end-radius:var(--r-lg);
  }}

/* ==========================================================================
   9 . OFFRE ET COMMANDE
   Mobile : nom du produit, prix, avantages, formulaire. Le packshot de
   soutien reste sur desktop uniquement : sur mobile il repeterait une image
   deja vue et rallongerait la section sans rien apporter.
   ========================================================================== */
.elx-page .order{ background:var(--el-sage); }
.elx-page .order__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:26px; align-items:start; }
.elx-page .order__shot{ display:none; position:relative; margin-bottom:var(--s5); }
.elx-page .order__shot::after{
  content:''; position:absolute; z-index:0; left:16%; right:14%; bottom:9%;
  height:22px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(20,33,28,.16), rgba(20,33,28,0) 70%);
}
.elx-page .order__shot img{ position:relative; z-index:1; width:100%; }
.elx-page .order__summary{ min-width:0; }
.elx-page .order__summary .eyebrow{ margin-bottom:10px; }
.elx-page .order__summary h2{ margin-bottom:14px; text-wrap:balance; }
.elx-page .order__price{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px;
  font-family:var(--font-serif); font-weight:500;
  font-size:clamp(44px,4.4vw,64px);
  color:var(--el-green); line-height:1; margin-bottom:18px;
  letter-spacing:-.02em;
}
.elx-page .order__price span{
  font-family:var(--font-sans); font-size:15px; font-weight:600;
  color:#41504A; letter-spacing:0;
}
.elx-page .incl{ display:grid; }
.elx-page .incl li{
  display:flex; gap:12px; align-items:flex-start;
  padding-block:11px; font-size:var(--fs-body); line-height:1.5;
  border-bottom:1px solid rgba(20,33,28,.12);
}
.elx-page .incl li:first-child{ border-top:1px solid rgba(20,33,28,.12); }
.elx-page .incl svg{ width:18px; height:18px; color:var(--el-green); flex:none; margin-top:4px; }

.elx-page .card{
  background:#fff; border:1px solid var(--el-line); border-radius:var(--r-lg);
  padding:22px 20px; min-width:0;
}
.elx-page .card h2{ margin-bottom:10px; }
.elx-page .card__intro{ margin-bottom:20px; }
.elx-page .field + .field{ margin-top:20px; }
.elx-page .field label{
  display:block; font-size:var(--fs-label); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--el-ink);
  margin-bottom:6px;
}
.elx-page .field input{
  width:100%; font:inherit; font-size:17px; color:var(--el-ink);
  background:transparent; border:0; border-bottom:1px solid var(--el-line);
  padding:12px 2px; border-radius:0; min-height:48px;
  transition:border-color var(--t-fast) var(--ease);
}
.elx-page .field input:focus{ outline:none; border-color:var(--el-green); border-bottom-width:2px; padding-bottom:11px; }
.elx-page .field input::placeholder{ color:var(--el-placeholder); }
.elx-page .field .err{ display:none; margin-top:7px; font-size:14px; font-weight:500; color:var(--el-err); }
.elx-page .field.is-invalid input{ border-color:var(--el-err); }
.elx-page .field.is-invalid .err{ display:block; }
.elx-page .form__submit{ margin-top:22px; }
.elx-page .form__foot{
  display:flex; align-items:flex-start; justify-content:center; gap:8px;
  margin-top:14px; text-align:start;
}
.elx-page .form__foot svg{ width:15px; height:15px; color:var(--el-muted); flex:none; margin-top:4px; }
.elx-page .form__status{
  display:none; margin-top:var(--s4); padding:14px 18px;
  border-radius:var(--r); background:var(--el-ivory);
  border:1px solid var(--el-line);
  font-size:15px; line-height:1.55; text-align:center; color:var(--el-ink);
}
.elx-page .form__status.is-visible{ display:block; }
.elx-page .form__status.is-error{ border-color:rgba(168,50,42,.4); color:var(--el-err); }
@media (min-width:600px){ .elx-page .card{ padding:var(--s5); }}
@media (min-width:1024px){
  .elx-page .order__grid{ grid-template-columns:minmax(0,47fr) minmax(0,53fr); gap:clamp(44px,4.6vw,var(--s8)); }
  .elx-page .order__shot{ display:block; }
  .elx-page .card{ padding:clamp(32px,3vw,48px); }}

/* ==========================================================================
   10 . QUESTIONS
   Une seule reponse ouverte a la fois, questions de 17 a 19px sur mobile,
   zones tactiles de 48px minimum.
   ========================================================================== */
.elx-page .faq__head .eyebrow{ margin-bottom:10px; }
.elx-page .faq__head .h2{ max-width:24ch; text-wrap:balance; }
.elx-page .faq__head .rule{ margin-top:14px; }
.elx-page .faq__grid{ display:grid; gap:24px; align-items:start; }
.elx-page .acc{ border-top:1px solid var(--el-line); }
.elx-page .acc__item{ border-bottom:1px solid var(--el-line); }
.elx-page .acc__btn{
  width:100%; min-height:48px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:transparent; border:0; text-align:start; cursor:pointer;
  padding:14px 0; font-family:var(--font-serif); font-weight:600;
  font-size:18px; line-height:1.3; letter-spacing:-.008em;
  color:var(--el-ink);
  transition:color var(--t-fast) var(--ease);
}
.elx-page .acc__btn:hover{ color:var(--el-green); }
.elx-page .acc__btn svg{ width:18px; height:18px; flex:none; color:var(--el-gold); transition:transform var(--t-mid) var(--ease); }
.elx-page .acc__btn[aria-expanded="true"] svg{ transform:rotate(45deg); }
.elx-page .acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-mid) var(--ease); }
.elx-page .acc__panel > div{ overflow:hidden; }
.elx-page .acc__btn[aria-expanded="true"] + .acc__panel{ grid-template-rows:1fr; }
.elx-page .acc__panel p{ padding-bottom:18px; color:var(--el-body); font-size:var(--fs-body); max-width:62ch; }
@media (min-width:768px){
  .elx-page .acc__btn{ font-size:clamp(20px,1.5vw,25px); padding:20px 0; }
  .elx-page .acc__panel p{ padding-bottom:22px; }}
@media (min-width:1024px){
  .elx-page .faq__grid{ grid-template-columns:minmax(0,34fr) minmax(0,66fr); gap:clamp(44px,4.6vw,var(--s8)); }
  .elx-page .faq__head{ position:sticky; top:calc(var(--nav-h) + 28px); }}

/* ==========================================================================
   11 . BRIDGE ELAFYA ET FOOTER
   ========================================================================== */
.elx-page .bridge{ background:var(--el-green); color:var(--el-on-dark); padding-block:48px; }
.elx-page .bridge__in{ display:grid; gap:24px; align-items:center; }
.elx-page .bridge h2{ color:var(--el-on-dark); max-width:22ch; text-wrap:balance; }
.elx-page .bridge p{ color:var(--el-on-dark-dim); max-width:52ch; margin-top:12px; }
.elx-page .bridge .eyebrow{ color:var(--el-gold-soft); margin-bottom:10px; }
.elx-page .bridge .btn{ width:100%; }
@media (min-width:600px){ .elx-page .bridge .btn{ width:auto; }}
@media (min-width:768px){ .elx-page .bridge{ padding-block:80px; }}
@media (min-width:1024px){
  .elx-page .bridge{ padding-block:clamp(88px,7vw,104px); }
  .elx-page .bridge__in{ grid-template-columns:minmax(0,1fr) auto; gap:var(--s7); }}

.elx-page .foot{ background:var(--el-green-deep); color:var(--el-on-dark-dim); padding-block:40px 26px; }
.elx-page .foot__top{ display:grid; gap:0; }
.elx-page .foot__brandcol{ padding-bottom:20px; }
.elx-page .foot__brand{ display:inline-flex; align-items:center; min-height:44px; line-height:0; margin-bottom:14px; }
.elx-page .foot__brand img{ width:186px; height:auto; }
@media (min-width:768px){ .elx-page .foot__brand img{ width:240px; }}
.elx-page .foot__slogan{
  font-family:var(--font-serif); font-weight:500;
  font-size:clamp(21px,1.7vw,27px); line-height:1.26;
  color:var(--el-on-dark); max-width:24ch; letter-spacing:-.01em; text-wrap:balance;
}
.elx-page .foot__baseline{ font-size:15px; line-height:1.55; max-width:40ch; margin-top:8px; }

/* Groupes de liens repliables sur mobile, colonnes ouvertes sur desktop.
   Sans JavaScript les trois groupes restent ouverts : aucun lien n'est perdu. */
.elx-page .foot__col{ border-top:1px solid var(--el-hair); }
.elx-page .foot__col > summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:52px; padding-block:14px; cursor:pointer; list-style:none;
  font-size:var(--fs-label); letter-spacing:.15em; text-transform:uppercase;
  color:var(--el-on-dark); font-weight:600; font-family:var(--font-sans);
}
.elx-page .foot__col > summary::-webkit-details-marker{ display:none; }
.elx-page .foot__col > summary svg{
  width:15px; height:15px; flex:none; color:var(--el-gold-soft);
  transition:transform var(--t-mid) var(--ease);
}
.elx-page .foot__col[open] > summary svg{ transform:rotate(45deg); }
.elx-page .foot__col ul{ padding-bottom:12px; }
.elx-page .foot__col a{
  display:inline-flex; align-items:center; min-height:44px; padding-block:6px;
  font-size:16px; line-height:1.45; text-decoration:none; color:var(--el-on-dark-dim);
  transition:color var(--t-fast) var(--ease);
}
.elx-page .foot__col a:hover{ color:var(--el-on-dark); }
.elx-page .foot__bottom{
  display:flex; flex-wrap:wrap; gap:8px var(--s5);
  align-items:center; justify-content:space-between;
  margin-top:20px; padding-top:16px; border-top:1px solid var(--el-hair);
  font-size:14px;
}
.elx-page .foot__disclaimer{
  margin-top:12px; font-size:14px; line-height:1.55;
  color:rgba(241,237,227,.7); max-width:78ch;
}
@media (min-width:1024px){
  .elx-page .foot{ padding-block:var(--s7) var(--s5); }
  .elx-page .foot__top{
    grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
    gap:var(--s5); padding-bottom:var(--s5);
  }
  .elx-page .foot__brandcol{ padding-bottom:0; }
  .elx-page .foot__col{ border-top:0; }
  .elx-page .foot__col > summary{ min-height:0; padding-block:0; margin-bottom:12px; cursor:default; }
  .elx-page .foot__col > summary svg{ display:none; }
  .elx-page .foot__col ul{ padding-bottom:0; }
  .elx-page .foot__col li + li{ margin-top:2px; }}

/* ==========================================================================
   CTA STICKY MOBILE
   Il se retire des que la section Commander ou le pied de page entre dans
   le champ : il ne recouvre jamais le formulaire ni le footer.
   ========================================================================== */
.elx-page .sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:flex; align-items:center; gap:var(--s2);
  background:var(--el-paper); border-top:1px solid var(--el-line);
  padding:9px var(--gut) calc(9px + env(safe-area-inset-bottom));
  transition:transform var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease);
}
.elx-page .sticky.is-off{ transform:translateY(110%); opacity:0; pointer-events:none; }
.elx-page .sticky__price{
  font-family:var(--font-serif); font-weight:500; font-size:24px;
  color:var(--el-green); flex:none; line-height:1.1;
}
.elx-page .sticky .btn{ flex:1; min-height:48px; padding:12px 16px; }
.elx-page{ padding-bottom:74px; }
@media (min-width:1024px){
  .elx-page .sticky{ display:none; }
  .elx-page{ padding-bottom:0; }}

/* ==========================================================================
   12 . SELECTEUR DE LANGUE
   Discret : deux libelles separes d'un filet, jamais un drapeau. Presente
   dans la navbar sur grand ecran, dans le tiroir sur mobile.
   ========================================================================== */
.elx-page .langsw{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14px; line-height:1;
}
.elx-page .langsw__b{
  min-height:44px; padding:4px 2px;
  background:transparent; border:0; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--el-muted);
  border-bottom:1px solid transparent;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.elx-page .langsw__b:hover{ color:var(--el-green); }
.elx-page .langsw__b[aria-pressed="true"]{ color:var(--el-green); border-color:var(--el-gold); }
.elx-page .langsw__b[lang="ar"]{ font-size:15px; }
.elx-page .langsw__sep{ color:var(--el-line); font-size:13px; }
/* Dans le tiroir mobile, le selecteur est pose sur sa propre ligne, sous le
   lien secondaire, separe par un filet : il ne se confond pas avec la
   navigation. */
.elx-page .navdrawer .langsw{
  display:flex; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--el-line);
}

/* ==========================================================================
   13 . QUANTITE
   Un pas moins, un champ, un pas plus. Le minimum est 1, aucun maximum
   n'est impose : le champ accepte la saisie directe de 1, 3, 10 ou 5000.
   Le champ reste en lecture de gauche a droite meme en arabe : un nombre
   se lit toujours dans le meme sens.
   ========================================================================== */
.elx-page .qty{
  display:inline-flex; align-items:center; width:auto; max-width:100%;
  border:1px solid var(--el-line); border-radius:var(--r);
  background:#fff; overflow:hidden;
}
.elx-page .qty__b{
  width:48px; min-height:48px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer;
  font-size:20px; font-weight:500; line-height:1; color:var(--el-green);
  transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.elx-page .qty__b:hover{ background:var(--el-sage); }
.elx-page .qty__b:focus-visible{ outline-offset:-3px; }
/* Le champ de quantite est un champ de saisie comme les autres : il herite
   donc de la regle .field input, qui l'etirerait sur toute la largeur et lui
   redonnerait un filet inferieur. Ces selecteurs, plus precis, le ramenent a
   sa vraie nature : une case de nombre au milieu de deux pas. */
.elx-page .field .qty__in{
  width:92px; min-height:48px; flex:0 0 92px;
  font:inherit; font-size:18px; font-weight:600; color:var(--el-ink);
  text-align:center; direction:ltr;
  background:transparent; border:0;
  border-inline:1px solid var(--el-line);
  padding:10px 6px; border-radius:0;
  -moz-appearance:textfield;
}
.elx-page .field .qty__in::-webkit-outer-spin-button,
.elx-page .field .qty__in::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.elx-page .field .qty__in:focus{
  outline:none; background:var(--el-ivory);
  border-block:0; border-inline:1px solid var(--el-line); padding-bottom:10px;
}
/* La navigation au clavier garde un reperage visible : le champ ne se
   contente pas d'un changement de fond. */
.elx-page .field .qty__in:focus-visible{ outline:2px solid var(--el-green); outline-offset:-2px; }
.elx-page .field--qty .qty__hint{ margin-top:8px; }

/* ==========================================================================
   14 . VERSION ARABE
   ---------------------------------------------------------------------------
   a) Blocs propres a l'arabe
      Ils existent dans le document mais restent hors ecran tant que la langue
      arabe n'est pas active : la composition francaise n'est jamais modifiee.
   b) Typographie
      Titres  : Noto Naskh Arabic, 500 a 600, interlignes 1,3 a 1,4.
      Textes  : IBM Plex Sans Arabic, 400 a 500, interlignes 1,75 a 1,8.
      Chaque pile commence par la police latine de la marque : « Elafya »,
      « KinéConfort » et les chiffres gardent la typographie Elafya, les
      glyphes arabes retombent sur la police arabe.
      L'interlettrage est remis a zero partout : en arabe il casserait les
      ligatures et donnerait un rendu de traduction automatique.
   c) Sens de lecture
      Les proprietes logiques du reste de la feuille suffisent presque
      partout. Ne restent ici que les cas qu'aucune propriete logique ne
      couvre : masques, positions d'image, translations, icones de direction.
   ========================================================================== */

/* --- a) Blocs propres a l'arabe --- */
.elx-page [data-only="ar"]{ display:none; }
.elx-page[data-lang="ar"] [data-only="ar"]{ display:block; }

/* Moment editorial : la typographie seule. Aucune carte, aucune icone,
   aucun degrade. */
.elx-page .sig{
  font-family:var(--font-ar-serif); font-weight:500;
  font-size:clamp(23px,18px + 1.6vw,32px); line-height:1.4;
  color:var(--el-green); text-wrap:balance;
}
.elx-page .sig__p{ margin-top:12px; max-width:58ch; color:var(--el-body); }
.elx-page .hero__eyebrow{ margin-bottom:14px; }
.elx-page .cmp__sig{ margin-top:26px; padding-top:20px; border-top:1px solid rgba(20,33,28,.16); }
.elx-page .cmp__lede{ margin-bottom:14px; max-width:56ch; color:var(--el-body); }
.elx-page .who__sig{ margin-bottom:32px; }
@media (min-width:768px){
  .elx-page .who__sig{ margin-bottom:var(--s6); }
  .elx-page .cmp__sig{ margin-top:var(--s5); padding-top:var(--s4); }}

/* --- b) Typographie arabe --- */
.elx-page{
  --font-ar-serif:'Newsreader','Noto Naskh Arabic',Georgia,'Times New Roman',serif;
  --font-ar-sans:'Manrope','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}
.elx-page[dir="rtl"]{ font-family:var(--font-ar-sans); line-height:1.8; }

/* Echelle des grands titres arabes.
   Le titre du hero est ecrit en deux lignes voulues. Le mot arabe est plus
   long que le mot francais et la colonne de texte du hero est bornee par le
   panneau photo : a taille francaise, la deuxieme ligne se brise en deux.
   Le rapport est donc repris a chaque palier pour que la composition tienne
   exactement en deux lignes, de 360 px a 1680 px. Le Naskh porte plus loin
   qu'une antique latine : la presence reste celle d'un titre de une. */
.elx-page[dir="rtl"] .h1{
  font-family:var(--font-ar-serif); font-weight:600;
  font-size:calc(var(--fs-h1) * .84); line-height:1.32;
}
@media (min-width:768px){ .elx-page[dir="rtl"] .h1{ font-size:calc(var(--fs-h1) * .82); }}
@media (min-width:1024px){ .elx-page[dir="rtl"] .h1{ font-size:calc(var(--fs-h1) * .7); }}
.elx-page[dir="rtl"] .h2{
  font-family:var(--font-ar-serif); font-weight:600;
  font-size:calc(var(--fs-h2) * .86); line-height:1.34;
}
.elx-page[dir="rtl"] .h3,
.elx-page[dir="rtl"] .who__t,
.elx-page[dir="rtl"] .lever h3,
.elx-page[dir="rtl"] .extend h3,
.elx-page[dir="rtl"] .foot__slogan{ font-family:var(--font-ar-serif); font-weight:600; line-height:1.38; }
.elx-page[dir="rtl"] .acc__btn{ font-family:var(--font-ar-serif); line-height:1.42; }
.elx-page[dir="rtl"] .use__t{ font-family:var(--font-ar-serif); line-height:1.36; }
.elx-page[dir="rtl"] .hero__price,
.elx-page[dir="rtl"] .order__price,
.elx-page[dir="rtl"] .sticky__price,
.elx-page[dir="rtl"] .spec dd{ font-family:var(--font-ar-serif); line-height:1.3; }

.elx-page[dir="rtl"] p,
.elx-page[dir="rtl"] li,
.elx-page[dir="rtl"] dd,
.elx-page[dir="rtl"] .uses__d{ line-height:1.8; }
.elx-page[dir="rtl"] .lead{ line-height:1.75; }
.elx-page[dir="rtl"] .micro,
.elx-page[dir="rtl"] .field .err,
.elx-page[dir="rtl"] .guard__l li,
.elx-page[dir="rtl"] .foot__baseline,
.elx-page[dir="rtl"] .foot__disclaimer{ line-height:1.75; }
.elx-page[dir="rtl"] .cmp__points li{ line-height:1.7; }

/* Interlettrage : remis a zero partout ou la feuille francaise en pose un.
   Les majuscules espacees des intitules deviennent des intitules normaux :
   l'arabe n'a pas de casse, forcer la capitale n'a aucun sens. */
.elx-page[dir="rtl"],
.elx-page[dir="rtl"] .h1,.elx-page[dir="rtl"] .h2,.elx-page[dir="rtl"] .h3,
.elx-page[dir="rtl"] .eyebrow,.elx-page[dir="rtl"] .lead,.elx-page[dir="rtl"] .btn,
.elx-page[dir="rtl"] .cmp__btn,.elx-page[dir="rtl"] .trustbar__list,
.elx-page[dir="rtl"] .hero__price,.elx-page[dir="rtl"] .order__price,
.elx-page[dir="rtl"] .who__t,.elx-page[dir="rtl"] .lever h3,.elx-page[dir="rtl"] .extend h3,
.elx-page[dir="rtl"] .use__t,.elx-page[dir="rtl"] .acc__btn,
.elx-page[dir="rtl"] .foot__slogan,.elx-page[dir="rtl"] .foot__col > summary,
.elx-page[dir="rtl"] .field label,.elx-page[dir="rtl"] .spec dt,.elx-page[dir="rtl"] .guard__t,
.elx-page[dir="rtl"] .nav__links a,.elx-page[dir="rtl"] .navdrawer ul a,.elx-page[dir="rtl"] .nav__side,
.elx-page[dir="rtl"] .sticky__price,.elx-page[dir="rtl"] .langsw__b{ letter-spacing:normal; }

.elx-page[dir="rtl"] .eyebrow,
.elx-page[dir="rtl"] .spec dt,
.elx-page[dir="rtl"] .field label,
.elx-page[dir="rtl"] .guard__t,
.elx-page[dir="rtl"] .foot__col > summary{ text-transform:none; }
.elx-page[dir="rtl"] .eyebrow{ font-size:15px; font-weight:600; }
.elx-page[dir="rtl"] .field label{ font-size:15px; }
.elx-page[dir="rtl"] .spec dt{ font-size:15px; }

/* L'arabe occupe une largeur de ligne differente du francais : les mesures
   de confort sont elargies plutot que la taille de texte reduite. */
.elx-page[dir="rtl"] .hero__note{ max-width:44ch; }
.elx-page[dir="rtl"] .cmp__txt p,
.elx-page[dir="rtl"] .cmp__points,
.elx-page[dir="rtl"] .lever p,
.elx-page[dir="rtl"] .who__item p{ max-width:56ch; }
.elx-page[dir="rtl"] .care__copy h2{ max-width:24ch; }
.elx-page[dir="rtl"] .care__copy p{ max-width:52ch; }
.elx-page[dir="rtl"] .faq__head .h2{ max-width:26ch; }

/* --- c) Sens de lecture : les cas qu'aucune propriete logique ne couvre --- */

/* Fleche d'action : elle designe le sens de lecture, elle se retourne donc
   avec lui. Le deplacement au survol suit le meme axe. */
.elx-page[dir="rtl"] .arw{ transform:scaleX(-1); }
.elx-page[dir="rtl"] a:hover .arw,
.elx-page[dir="rtl"] button:hover .arw,
.elx-page[dir="rtl"] a:focus-visible .arw,
.elx-page[dir="rtl"] button:focus-visible .arw{ transform:scaleX(-1) translateX(5px); }

/* Le fondu croise du comparateur entre par le cote oppose. */
.elx-page[dir="rtl"] .cmp__pane{ transform:translateX(-16px); }
.elx-page[dir="rtl"] .cmp__pane.is-active{ transform:none; }

/* Galerie : « precedent » passe a droite grace aux proprietes logiques ;
   restent les pointes de fleche, qui doivent suivre. */
.elx-page[dir="rtl"] .usearr--prev svg{ transform:none; }
.elx-page[dir="rtl"] .usearr--next svg{ transform:scaleX(-1); }

/* Barre de confiance mobile : l'arabe respire davantage, la bande gagne
   quelques pixels plutot que de rapetisser le texte. */
.elx-page[dir="rtl"] .trustbar__i{ line-height:1.5; padding-inline:10px; }
@media (max-width:899px){
  .elx-page[dir="rtl"] .trustbar__list{ height:44px; }}

/* Numero de telephone : le champ reste en lecture de gauche a droite, mais
   reste cale du cote ou commence la lecture arabe. L'intitule, lui, suit la
   direction de la page. */
.elx-page[dir="rtl"] #f-tel{ direction:ltr; text-align:right; }
.elx-page[dir="rtl"] #f-tel::placeholder{ text-align:right; }

/* Hero desktop : le panneau photo passe de l'autre cote. L'image n'est
   jamais retournee, seul son cadrage est repris en miroir pour que le
   coussin reste entier et loin du bord dissous. */
@media (min-width:1024px){
  .elx-page[dir="rtl"] .hero__panel{
    -webkit-mask-image:linear-gradient(264deg,
        rgba(0,0,0,0) 0%,   rgba(0,0,0,.07) 2.5%, rgba(0,0,0,.22) 5%,
        rgba(0,0,0,.46) 7.5%, rgba(0,0,0,.70) 10%, rgba(0,0,0,.89) 12.5%,
        rgba(0,0,0,1) 15%);
    mask-image:linear-gradient(264deg,
        rgba(0,0,0,0) 0%,   rgba(0,0,0,.07) 2.5%, rgba(0,0,0,.22) 5%,
        rgba(0,0,0,.46) 7.5%, rgba(0,0,0,.70) 10%, rgba(0,0,0,.89) 12.5%,
        rgba(0,0,0,1) 15%);
  }
  .elx-page[dir="rtl"] .hero__stage img{ object-position:14% 50%; }
  .elx-page[dir="rtl"] .hero__panel::after{
    background:
      radial-gradient(120% 110% at 36% 50%,
        rgba(var(--ivory-rgb),0) 58%,
        rgba(var(--ivory-rgb),.18) 82%,
        rgba(var(--ivory-rgb),.44) 100%),
      linear-gradient(to bottom,
        rgba(var(--ivory-rgb),.30) 0%,
        rgba(var(--ivory-rgb),0) 14%,
        rgba(var(--ivory-rgb),0) 74%,
        rgba(var(--ivory-rgb),.38) 100%);
  }
  /* Les phrases arabes sont plus longues que les phrases francaises : la
     colonne de texte gagne quelques points, sans jamais atteindre le
     panneau photo. */
  .elx-page[dir="rtl"] .hero h1{ max-width:min(42%,620px); }
  .elx-page[dir="rtl"] .hero__sub,
  .elx-page[dir="rtl"] .hero__cta,
  .elx-page[dir="rtl"] .hero__deal{ max-width:min(38%,500px); }}

/* Entretien : rien a corriger ici. Le debord et les deux angles arrondis de
   l'image sont deja ecrits en proprietes logiques (margin-inline-start,
   border-*-end-radius) : ils passent d'eux-memes de l'autre cote. */

/* ==========================================================================
   MOUVEMENT REDUIT
   Toutes les animations decoratives sont neutralisees : rien ne bouge,
   tout reste lisible et atteignable. La bascule des deux modules a etats
   devient instantanee.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .elx-page *,.elx-page *::before,.elx-page *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    animation-delay:0s !important;
    transition-duration:.001ms !important; transition-delay:0s !important;
  }
  .elx-page .rise{ opacity:1; transform:none; }
  .elx-page .hl{ opacity:1; transform:none; }
  .elx-page .hero__stage img{ opacity:1; transform:none; }
  .elx-page .roll__i{ transform:none !important; }
  .elx-page .rule{ width:56px; }
  .elx-page .usepanel,
  .elx-page .useslide{ transform:none; }
  .elx-page .cmp__pane{ transform:none; }
  .elx-page .trustbar__i{ transition:none; }}