/* -----------------------------------------------------------------------------
   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 - kinemoon : 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é\kinemoon\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.
   ========================================================================== */

/* ==========================================================================
   KINÉMOON PAR ELAFYA
   Territoire visuel « nuit calme » : l'ivoire et le vert profond Elafya
   restent la structure, deux surfaces seulement reçoivent le bleu-gris
   lunaire (Pour qui, Commander). L'or ne sert que de filet et d'accent.
   La page repose sur la typographie, les proportions et de très grandes
   images : aucune carte flottante, aucune ombre molle, aucun dégradé visible.
   ========================================================================== */

.elx-page{
  /* --- Palette --- */
  --km-ivory:#FAF8F3;
  --km-paper:#FFFDF9;
  --km-pearl:#F0EEE8;
  --km-mist:#E6EEEC;
  --km-moon:#DCE7E8;
  --km-green:#0E3B2E;
  --km-green-hover:#0A2E23;
  --km-green-deep:#06241B;
  --km-night:#102D29;
  --km-ink:#17231F;
  --km-body:#44534D;
  --km-muted:#68736E;
  --km-gold:#A8813F;
  --km-gold-ink:#7A5C24;
  --km-gold-soft:#CDA96F;
  --km-line:#DED8CC;
  --km-hair:rgba(250,248,243,.18);
  --km-on-dark:#F1EDE3;
  --km-on-dark-dim:rgba(241,237,227,.78);
  --km-err:#A8322A;
  --km-placeholder:#6E7570;
  --ivory-rgb:250,248,243;

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

  /* Échelle mobile. H1 43→49, H2 34→39, corps 17. Aucun texte utile sous 14px. */
  --fs-h1:clamp(43px,31px + 3.75vw,49px);
  --fs-h2:clamp(34px,26px + 2.5vw,39px);
  --fs-h3:clamp(23px,17px + 1.88vw,26px);
  --fs-h4:20px;
  --fs-lead:18px;
  --fs-body:17px;
  --fs-nav:15px;
  --fs-btn:15px;
  --fs-micro:14px;
  --fs-label:14px;

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

  --wrap:1320px;
  --gut:20px;
  --r:6px;
  --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:.72s;
  --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(54px,6.3vw,68px);
    --fs-h2:clamp(40px,4.6vw,48px);
    --fs-h3:clamp(26px,2.4vw,29px);
    --fs-h4:21px;
    --fs-lead:clamp(19px,1.3vw,20px);
    --fs-body:18px;
  }}
/* Le H1 porte deux phrases, soit une douzaine de mots : sur desktop c'est
   le nombre de lignes qui commande l'échelle, pas la taille disponible. La
   colonne de texte mesure de 425 à 500 px selon la largeur d'écran ; les
   paliers ci-dessous sont ceux qui maintiennent le titre en quatre lignes.
   Au-delà, le titre passe à cinq lignes, le hero s'allonge, le bouton sort
   du premier écran et le panneau photo, devenu nettement plus haut que
   large, finit par rogner les extrémités des oreillers. */
@media (min-width:1024px){
  .elx-page{
    --nav-h:84px;
    --fs-h1:clamp(50px,4.4vw,56px);
    /* Les titres de section suivent le H1 vers le bas : le hero doit rester
       le plus gros bloc de la page. Le rapport reste d'environ 1,15 entre
       les deux niveaux, l'écart de masse se joue ensuite sur le nombre de
       lignes et sur la mesure, pas sur la seule taille de corps. */
    --fs-h2:clamp(42px,3.6vw,52px);
    --fs-h3:clamp(28px,2.3vw,32px);
    --fs-h4:23px;
    --fs-lead:clamp(19px,1.35vw,21px);
  }}
@media (min-width:1200px){ .elx-page{ --gut:64px; }}
@media (min-width:1280px){ .elx-page{ --fs-h1:clamp(56px,4.2vw,60px); }}

.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(--km-ivory);
  color:var(--km-ink);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.6;
  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,.elx-page figcaption{ 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(--km-green); color:#fff; }
.elx-page :focus-visible{ outline:2px solid var(--km-green); outline-offset:3px; border-radius:2px; }
.elx-page .on-dark :focus-visible{ outline-color:var(--km-gold-soft); }

.elx-page .skip{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:200;
  background:var(--km-green); color:#fff; padding:14px 20px;
  font-size:16px; font-weight:600; text-decoration:none;
}
.elx-page .skip:focus{ inset-inline-start:0; }

/* ---------- Blocs typographiques ----------
   Newsreader 500 pour les grands titres, 600 quand le titre doit peser à
   petite taille. Aucun poids fin, aucun mot entier en majuscules. */
.elx-page .h1{
  font-family:var(--font-serif); font-weight:500; font-size:var(--fs-h1);
  line-height:1.04; letter-spacing:-.021em; text-wrap:balance;
}
.elx-page .h2{
  font-family:var(--font-serif); font-weight:500; font-size:var(--fs-h2);
  line-height:1.1; letter-spacing:-.018em; text-wrap:balance;
}
.elx-page .h3{
  font-family:var(--font-serif); font-weight:600; font-size:var(--fs-h3);
  line-height:1.2; letter-spacing:-.008em;
}
.elx-page .eyebrow{
  font-size:var(--fs-label); font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--km-gold-ink); line-height:1.3;
}
.elx-page .lead{ font-size:var(--fs-lead); line-height:1.55; color:var(--km-body); letter-spacing:-.006em; }
.elx-page .body{ color:var(--km-body); }
.elx-page .micro{ font-size:var(--fs-micro); line-height:1.6; color:var(--km-muted); }
.elx-page .measure{ max-width:52ch; }
/* Saut de ligne éditorial : il n'existe qu'à partir de 600 px. Sous cette
   largeur le titre se répartit tout seul et une coupe forcée creuserait une
   ligne presque vide. L'espace qui suit la balise assure la séparation des
   mots quand celle-ci est retirée du rendu. */
.elx-page .brk{ display:none; }
@media (min-width:600px){ .elx-page .brk{ display:inline; }}

/* ---------- Structure ----------
   Rythme éditorial volontairement lent : les sections signature respirent
   davantage, sans jamais créer de vide sans fonction. */
.elx-page .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.elx-page .section{ padding-block:52px; }
@media (min-width:600px){ .elx-page .section{ padding-block:64px; }}
@media (min-width:768px){ .elx-page .section{ padding-block:84px; }}
@media (min-width:1024px){ .elx-page .section{ padding-block:clamp(96px,8vw,124px); }}
.elx-page .bg-ivory{ background:var(--km-ivory); }
.elx-page .bg-paper{ background:var(--km-paper); }
.elx-page .bg-pearl{ background:var(--km-pearl); }
.elx-page .bg-mist{ background:var(--km-mist); }
.elx-page .bg-moon{ background:var(--km-moon); }
.elx-page .bg-night{ background:var(--km-night); color:var(--km-on-dark); }

/* ==========================================================================
   SYSTÈME DE MOUVEMENT
   Une courbe, trois durées. Apparition par le bas de 16 px au maximum,
   bascule de texte sur les éléments interactifs. Rien ne bouge en continu,
   aucune galerie ne tourne toute seule.
   ========================================================================== */
.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 nœud supplémentaire. Le texte alternatif vide de la
   propriété content ("/ \"\"") retire ce duplicata de l'arbre
   d'accessibilité, sinon chaque libellé serait annoncé deux fois. La
   déclaration simple qui précède sert de repli. */
.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%); }

/* Flèches : réservées aux éléments qui déclenchent réellement 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); }
.elx-page .arw--down{ transition:transform var(--t-mid) var(--ease-out); }
.elx-page a:hover .arw--down, .elx-page a:focus-visible .arw--down{ transform:translateY(4px); }

/* Filet qui se déploie sous un titre de section */
.elx-page .rule{
  height:1px; width:0; background:var(--km-gold); opacity:.55;
  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(--km-gold-soft); opacity:.66; }

/* ---------- 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(--km-green); border-color:var(--km-green); color:#fff; }
.elx-page .btn--primary:hover{ background:var(--km-green-hover); border-color:var(--km-green-hover); }
.elx-page .btn--onDark{ background:var(--km-ivory); border-color:var(--km-ivory); color:var(--km-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%; }

/* Lien d'action discret : souligné par un filet, jamais un faux bouton. */
.elx-page .tlink{
  display:inline-flex; align-items:center; gap:9px; min-height:44px;
  font-size:15px; font-weight:600; color:var(--km-green);
  text-decoration:none;
}
.elx-page .tlink > .roll{ border-bottom:1px solid rgba(14,59,46,.32); transition:border-color var(--t-fast) var(--ease); }
.elx-page .tlink:hover > .roll{ border-color:var(--km-green); }

/* ==========================================================================
   1 . BARRE DE CONFIANCE
   Trois engagements Elafya déjà publiés sur la page Livraison du site.
   Sous 900 px, un seul est visible à la fois : rotation lente, hauteur fixe.
   ========================================================================== */
.elx-page .trustbar{ background:var(--km-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(--km-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
   ========================================================================== */
.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(--km-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; }
/* Le lien occupe 44 px de haut : la cible reste confortable sur un écran
   large mais tactile. Le filet de survol est porté par le libellé lui-même,
   il reste donc collé au texte. */
.elx-page .nav__links a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--fs-nav); font-weight:500; color:var(--km-body);
  text-decoration:none;
  transition:color var(--t-fast) var(--ease);
}
.elx-page .nav__links a .roll{
  border-bottom:1px solid transparent;
  transition:border-color var(--t-fast) var(--ease);
}
.elx-page .nav__links a:hover,
.elx-page .nav__links a.is-active{ color:var(--km-green); }
.elx-page .nav__links a:hover .roll,
.elx-page .nav__links a.is-active .roll{ border-color:var(--km-gold); }
.elx-page .nav__end{ display:none; align-items:center; gap:18px; }
.elx-page .nav__side{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--fs-nav); font-weight:600; color:var(--km-gold-ink);
  text-decoration:none; white-space:nowrap;
}
.elx-page .nav__side .roll{
  border-bottom:1px solid transparent;
  transition:border-color var(--t-fast) var(--ease);
}
.elx-page .nav__side:hover .roll{ border-color:var(--km-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(--km-line); border-radius:var(--r);
  cursor:pointer; transition:border-color var(--t-fast) var(--ease);
}
.elx-page .burger:hover{ border-color:var(--km-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(--km-paper); border-top:1px solid var(--km-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(--km-ink);
  border-bottom:1px solid var(--km-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 1199 px, cinq entrées, le lien de marque et le bouton ne
   tiennent pas sur une ligne : le lien secondaire cède sa place, il reste
   présent dans le bridge et dans le pied de page. */
@media (min-width:1024px) and (max-width:1199px){
  .elx-page .nav__links{ gap:19px; }
  .elx-page .nav__end .nav__side{ display:none; }}

/* ==========================================================================
   3 . HERO
   MOBILE  : la photographie d'abord, pleine largeur, 40 à 50 svh. Le texte
             vient dessous. Aucun mot posé sur l'image, aucun voile.
   DESKTOP : texte sur 44 %, photographie sur 56 %, pleine hauteur, le bord
             gauche dissous dans l'ivoire par un masque incliné.
   ========================================================================== */
.elx-page .hero{ position:relative; background:var(--km-ivory); }

/* La hauteur suit la hauteur d'écran (45 svh sur un téléphone) mais ne
   descend jamais sous la moitié de la largeur : sur une tablette ou un
   écran couché, le bandeau ne s'aplatit pas au point de rogner l'oreiller.
   Le cadrage est calé un peu sous le centre : c'est le plafond qui sort du
   cadre, jamais la paire d'oreillers. */
.elx-page .hero__panel{
  position:relative; overflow:hidden;
  height:clamp(272px, max(45svh, 50vw), 540px);
  background:var(--km-pearl);
}
.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% 66%;
  animation:heroIn 1.2s var(--ease-out) both;
}
@keyframes heroIn{ from{ opacity:0; transform:scale(1.035); } to{ opacity:1; transform:none; } }

.elx-page .hero__in{ position:relative; padding-block:26px 40px; }
.elx-page .hero__eyebrow{ margin-bottom:14px; }
.elx-page .hero h1{ margin-bottom:16px; }
.elx-page .hero__sub{ margin-bottom:26px; max-width:44ch; }
.elx-page .hero__cta{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.elx-page .hero__cta .btn{ width:100%; }

/* Note du hero : un filet d'or et deux lignes, posés sous les actions. Ce
   n'est ni une carte ni un encadré : pas de fond, pas de bordure fermée,
   pas d'ombre, pas d'icône. Elle nomme le geste du produit sans disputer
   la place au bouton, qui reste au-dessus d'elle. */
.elx-page .hero__note{
  margin-top:26px; padding-inline-start:16px;
  border-inline-start:1px solid var(--km-gold);
  max-width:46ch;
}
.elx-page .hero__note-t{
  font-size:var(--fs-label); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--km-gold-ink); line-height:1.3;
}
.elx-page .hero__note-p{ margin-top:6px; font-size:var(--fs-micro); line-height:1.6; color:var(--km-body); }

@media (min-width:600px){
  .elx-page .hero__cta{ flex-direction:row; align-items:center; gap:var(--s4); }
  .elx-page .hero__cta .btn{ width:auto; }}
@media (min-width:768px){
  .elx-page .hero__in{ padding-block:var(--s6) var(--s7); }
  .elx-page .hero__sub{ max-width:46ch; }}

/* --- Desktop : composition éditoriale à masque doux --- */
@media (min-width:1024px){
  .elx-page .hero{
    display:flex; align-items:center; isolation:isolate; overflow:hidden;
    /* Le rapport du panneau reste compris entre 1:1 et 1.4:1 sur toute la
       plage desktop : la source carrée n'est donc jamais recadrée au point
       de rogner l'oreiller. */
    min-height:min(86svh, clamp(560px,56vw,820px));
  }
  /* Entre 1024 et 1279 px, le panneau cède un peu de largeur au texte : à
     cette largeur, un H1 de 72 px a besoin d'une colonne d'au moins 420 px
     pour tenir en quatre lignes. Sans cela le hero s'allonge, le panneau
     devient nettement plus haut que large et le recadrage finirait par
     mordre sur le bord droit de l'oreiller. */
  .elx-page .hero__panel{
    position:absolute; inset:0; inset-inline-start:48%; height:auto; z-index:-1;
    background:var(--km-ivory);
    -webkit-mask-image:linear-gradient(97deg,
        rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 3%, rgba(0,0,0,.20) 6%,
        rgba(0,0,0,.44) 9%, rgba(0,0,0,.70) 12%, rgba(0,0,0,.90) 15%,
        rgba(0,0,0,1) 18%);
    mask-image:linear-gradient(97deg,
        rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 3%, rgba(0,0,0,.20) 6%,
        rgba(0,0,0,.44) 9%, rgba(0,0,0,.70) 12%, rgba(0,0,0,.90) 15%,
        rgba(0,0,0,1) 18%);
  }
  /* Les deux oreillers occupent la bande centrale de la scène : le cadrage
     reste donc proche du centre. Quand le panneau devient plus étroit que
     haut, ce sont le rideau à gauche et le bord du lit à droite qui sortent
     du cadre, jamais l'un des deux produits. */
  .elx-page .hero__stage img{ object-position:56% 52%; animation-duration:1.4s; }
  /* Les bords de la photographie s'éteignent vers l'ivoire : aucune arête,
     aucune apparence de carte. */
  .elx-page .hero__panel::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(125% 112% at 66% 52%,
        rgba(var(--ivory-rgb),0) 56%,
        rgba(var(--ivory-rgb),.16) 80%,
        rgba(var(--ivory-rgb),.42) 100%),
      linear-gradient(to bottom,
        rgba(var(--ivory-rgb),.34) 0%,
        rgba(var(--ivory-rgb),0) 15%,
        rgba(var(--ivory-rgb),0) 72%,
        rgba(var(--ivory-rgb),.40) 100%);
  }

  .elx-page .hero__in{ width:100%; padding-block:var(--s6); }
  .elx-page .hero__copy{ max-width:min(45%,600px); }
  .elx-page .hero__sub{ max-width:min(40ch,470px); }}
/* À partir de 1280 px, le bord du panneau est calé sur la grille de contenu
   et non sur la largeur de la fenêtre : au-delà de 1320 px, toute la largeur
   supplémentaire va à la photographie et la colonne de texte garde exactement
   la même mesure, du portable 13 pouces à l'écran très large. */
@media (min-width:1280px){
  .elx-page .hero__panel{
    inset-inline-start:calc((100% - min(100%, var(--wrap))) / 2 + min(100%, var(--wrap)) * .43);
  }
  /* La colonne s'élargit juste assez pour tenir le titre en quatre lignes.
     Son bord droit s'arrête au bord du panneau photo, où le masque rend
     encore l'image totalement transparente. */
  .elx-page .hero__copy{ max-width:min(42%,500px); }}

/* Révélation d'entrée : 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
   Surface lunaire n° 1. Quatre situations en lignes éditoriales, filets
   fins, aucune carte, aucune icône, aucun numéro décoratif.
   ========================================================================== */
.elx-page .who__head{ max-width:820px; }
.elx-page .who__head .eyebrow{ margin-bottom:12px; }
.elx-page .who__sub{ margin-top:14px; color:var(--km-body); max-width:56ch; }
.elx-page .who__list{ display:grid; gap:18px; margin-top:32px; }
.elx-page .who__item{ padding-top:18px; border-top:1px solid rgba(23,35,31,.16); }
.elx-page .who__t{
  font-family:var(--font-serif); font-weight:600; font-size:var(--fs-h3);
  line-height:1.2; letter-spacing:-.008em; color:var(--km-green);
}
.elx-page .who__item p{ margin-top:8px; color:var(--km-body); max-width:48ch; }
@media (min-width:600px){ .elx-page .who__list{ gap:26px; margin-top:40px; }}
@media (min-width:900px){
  .elx-page .who__list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(44px,5vw,var(--s8)); row-gap:var(--s6);
    margin-top:var(--s7);
  }}

/* ==========================================================================
   5 . L'ÉCHANCRURE  —  AVANT ET APRÈS
   Deux colonnes de même poids : la situation d'abord, la réponse ensuite.
   Aucune carte, aucun cadre, aucune ombre : chaque colonne est une
   photographie suivie d'un filet et d'un bloc de texte. Seuls le filet et
   l'intitulé de la seconde colonne passent à l'or, cela suffit à désigner la
   réponse sans ajouter ni badge ni pastille.
   ========================================================================== */
.elx-page .cmp__head{ max-width:820px; }
.elx-page .cmp__head .eyebrow{ margin-bottom:12px; }
.elx-page .cmp__head .rule{ margin-top:18px; }

.elx-page .cmp{ display:grid; gap:var(--s6); margin-top:32px; }
.elx-page .cmp__fig{ margin:0 calc(-1 * var(--gut)); background:var(--km-pearl); }
.elx-page .cmp__fig img{ width:100%; }
/* La colonne de gauche passe en niveaux de gris : la couleur reste du côté
   de la réponse. Le fichier source n'est pas retouché, seule sa restitution
   change, et le contraste est à peine relevé pour que le gris ne devienne
   pas terne à côté de l'ivoire de la page. */
.elx-page .cmp__fig--mute img{ filter:grayscale(1) contrast(1.04) brightness(1.02); }
.elx-page .cmp__body{ margin-top:20px; padding-top:16px; border-top:1px solid var(--km-line); }
.elx-page .cmp__lab{
  font-size:var(--fs-label); font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--km-muted); line-height:1.3;
}
.elx-page .cmp__t{
  font-family:var(--font-serif); font-weight:600; font-size:var(--fs-h3);
  line-height:1.2; letter-spacing:-.008em; color:var(--km-green); margin-top:8px;
}
.elx-page .cmp__body p{ margin-top:10px; color:var(--km-body); max-width:46ch; }
.elx-page .cmp__col--sol .cmp__body{ border-top-color:var(--km-gold); }
.elx-page .cmp__col--sol .cmp__lab{ color:var(--km-gold-ink); }

/* La phrase de fin n'est pas un slogan posé au centre : elle garde la mesure
   et l'alignement du reste de la page. */
.elx-page .cmp__foot{
  margin-top:36px; padding-top:20px; border-top:1px solid var(--km-line);
  font-family:var(--font-serif); font-weight:500;
  font-size:clamp(20px,1.7vw,26px); line-height:1.28; letter-spacing:-.01em;
  color:var(--km-ink); max-width:30ch; text-wrap:balance;
}

@media (min-width:768px){
  .elx-page .cmp{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(32px,4vw,var(--s7)); row-gap:0;
    margin-top:40px;
  }
  .elx-page .cmp__fig{ margin:0; }
  .elx-page .cmp__foot{ margin-top:var(--s6); max-width:38ch; }}
@media (min-width:1024px){
  .elx-page .cmp{ margin-top:var(--s7); }
  .elx-page .cmp__foot{ margin-top:var(--s7); }}

/* ==========================================================================
   6 . LA FORME  —  SECTION SIGNATURE
   La vue de dessus est le moment fort de la page : elle sort du cadre à
   gauche et occupe 56 % de la largeur utile. Les quatre caractéristiques
   sont observables sur l'image, rien n'est déduit.
   ========================================================================== */
.elx-page .shape__in{ display:grid; gap:30px; }
.elx-page .shape__head{ max-width:760px; }
.elx-page .shape__head .eyebrow{ margin-bottom:12px; }
.elx-page .shape__head .rule{ margin-top:18px; }
.elx-page .shape__intro{ margin-top:18px; max-width:56ch; color:var(--km-body); }

.elx-page .shape__fig{ margin:0 calc(-1 * var(--gut)); }
.elx-page .shape__fig img{ width:100%; }

.elx-page .traits{ display:grid; gap:20px; }
.elx-page .trait{ padding-top:16px; border-top:1px solid var(--km-line); }
.elx-page .trait h3{
  font-family:var(--font-serif); font-weight:600; font-size:var(--fs-h4);
  line-height:1.22; letter-spacing:-.006em; color:var(--km-green);
  margin-bottom:6px;
}
.elx-page .trait p{ color:var(--km-body); max-width:46ch; }

@media (min-width:768px){
  .elx-page .shape__in{ gap:var(--s6); }
  .elx-page .traits{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--s5); row-gap:26px; }}
/* Desktop : la vue de dessus sort du cadre à gauche et tient toute la
   hauteur du bloc ; le titre et les quatre caractéristiques s'empilent dans
   la colonne de droite. Le titre n'est pas posé au-dessus de la grille :
   sinon la moitié droite de l'en-tête resterait vide. */
@media (min-width:1024px){
  .elx-page .shape__in{
    grid-template-columns:minmax(0,56fr) minmax(0,44fr);
    column-gap:clamp(48px,4.8vw,var(--s8));
    row-gap:var(--s6);
    align-items:start;
  }
  .elx-page .shape__head{ grid-column:2; grid-row:1; max-width:none; }
  .elx-page .shape__fig{
    grid-column:1; grid-row:1 / span 2; align-self:center;
    margin:0; margin-inline-start:calc(-1 * var(--bleed));
    width:calc(100% + var(--bleed));
  }
  .elx-page .traits{ grid-column:2; grid-row:2; grid-template-columns:minmax(0,1fr); gap:var(--s5); }
  .elx-page .trait{ padding-top:18px; }}

/* ==========================================================================
   7 . LE SOUTIEN
   Fond nuit Elafya. La photographie devient un plan clair pleine hauteur
   qui sort du cadre à droite : le produit paraît grand et tactile, sans
   carte ni ombre portée. Les trois bénéfices sont trois colonnes séparées
   par des filets, jamais trois cartes identiques.
   ========================================================================== */
.elx-page .hold{ position:relative; background:var(--km-night); color:var(--km-on-dark); overflow:hidden; }
.elx-page .hold__grid{ display:grid; }
.elx-page .hold__fig{ margin:0 calc(-1 * var(--gut)); background:#FCF6F1; }
.elx-page .hold__fig img{ width:100%; }
.elx-page .hold__copy{ padding-block:44px 0; }
.elx-page .hold__copy .eyebrow{ color:var(--km-gold-soft); margin-bottom:12px; }
.elx-page .hold__copy h2{ color:var(--km-on-dark); }
.elx-page .hold__copy p{ margin-top:18px; color:var(--km-on-dark-dim); max-width:52ch; }

.elx-page .gains{
  display:grid; gap:0; margin-top:36px;
  border-top:1px solid var(--km-hair);
}
.elx-page .gains li{
  padding-block:18px;
  border-bottom:1px solid var(--km-hair);
  font-family:var(--font-serif); font-weight:500;
  font-size:clamp(19px,1.5vw,22px);
  line-height:1.25; letter-spacing:-.008em; color:var(--km-on-dark);
  text-wrap:balance;
}

@media (min-width:768px){
  .elx-page .hold__copy{ padding-block:var(--s7) 0; }
  .elx-page .gains{
    grid-template-columns:repeat(3,minmax(0,1fr));
    border-bottom:1px solid var(--km-hair);
    margin-top:var(--s6);
  }
  .elx-page .gains li{
    border-bottom:0; padding-block:22px 24px; padding-inline-end:var(--s4);
    border-inline-start:1px solid var(--km-hair); padding-inline-start:var(--s4);
  }
  .elx-page .gains li:first-child{ border-inline-start:0; padding-inline-start:0; }}
@media (min-width:1024px){
  .elx-page .hold__grid{
    grid-template-columns:minmax(0,50fr) minmax(0,50fr);
    column-gap:clamp(48px,4.8vw,var(--s8));
    align-items:center;
  }
  .elx-page .hold__copy{ padding-block:clamp(96px,8vw,124px); }
  .elx-page .hold__fig{
    margin:0; margin-inline-end:calc(-1 * var(--bleed));
    width:calc(100% + var(--bleed));
    align-self:stretch;
  }
  /* Le plan est plus haut que large : un recadrage « cover » mordrait sur
     les deux extrémités de l'oreiller. L'image est donc contenue, et le
     fond du panneau reprend exactement l'ivoire du packshot (#FCF6F1
     relevé sur le fichier) : le plan clair reste continu du haut vers le
     bas du bloc, sans bande ni raccord visible, et le produit reste entier. */
  .elx-page .hold__fig img{ width:100%; height:100%; object-fit:contain; object-position:50% 50%; }
  /* Ordre visuel : le texte à gauche, le plan photographique à droite. */
  .elx-page .hold__copy{ order:1; }
  .elx-page .hold__fig{ order:2; }}

/* ==========================================================================
   8 . GALERIE
   Galerie manuelle : boutons précédent et suivant, indicateurs, clavier,
   balayage. Aucune rotation automatique. La scène a un rapport fixe de 4:3
   et les fichiers sont produits exactement à ce rapport : aucune image
   n'est recadrée par le navigateur, la hauteur ne bouge jamais.
   ========================================================================== */
.elx-page .gal__head{ max-width:760px; }
.elx-page .gal__head .eyebrow{ margin-bottom:12px; }
.elx-page .gal__head .rule{ margin-top:18px; }

.elx-page .gal{ margin-top:32px; }
.elx-page .gal__stage{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:#FAF4F0;
  margin:0 calc(-1 * var(--gut));
}
.elx-page .galslide{
  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 .galslide.is-active{
  opacity:1; visibility:visible;
  transition:opacity var(--t-swap) var(--ease-out), visibility 0s linear 0s;
}
.elx-page .galslide img{ width:100%; height:100%; object-fit:cover; }

.elx-page .galarr{
  position:absolute; top:50%; z-index:3; transform:translateY(-50%);
  width:46px; height:46px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,253,249,.9); color:var(--km-ink);
  border:1px solid rgba(23,35,31,.14); border-radius:50%;
  cursor:pointer;
  transition:background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.elx-page .galarr:hover{ background:#fff; border-color:rgba(23,35,31,.3); }
.elx-page .galarr svg{ width:18px; height:18px; }
.elx-page .galarr--prev{ inset-inline-start:12px; }
.elx-page .galarr--next{ inset-inline-end:12px; }
.elx-page .galarr--prev svg{ transform:rotate(180deg); }
/* Les flèches de galerie ne glissent pas au survol : elles ne sont pas des
   boutons d'action, elles changent une vue. */
.elx-page .galarr:hover svg, .elx-page .galarr:focus-visible svg{ transform:none; }
.elx-page .galarr--prev:hover svg, .elx-page .galarr--prev:focus-visible svg{ transform:rotate(180deg); }

.elx-page .gal__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); margin-top:18px;
}
/* --km-body et non --km-muted : sur le fond perle, le gris sourd tombait
   à 4.24 et passait sous le seuil de contraste de 4.5. */
.elx-page .gal__cap{ font-size:15px; color:var(--km-body); line-height:1.5; min-height:1.5em; }
.elx-page .gal__ind{ display:flex; align-items:center; gap:2px; flex:none; margin-inline-end:-6px; }
/* Le trait mesure 24 px, la cible tactile en fait 44. */
.elx-page .galdot{
  width:34px; height:44px; padding:0;
  background:transparent; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.elx-page .galdot::before{
  content:''; width:24px; height:2px; background:rgba(23,35,31,.22);
  transition:background-color var(--t-fast) var(--ease);
}
.elx-page .galdot[aria-current="true"]::before{ background:var(--km-green); }
.elx-page .galdot:hover::before{ background:rgba(23,35,31,.45); }

@media (min-width:768px){
  .elx-page .gal{ margin-top:var(--s6); }
  .elx-page .gal__stage{ margin:0; }
  .elx-page .galarr--prev{ inset-inline-start:16px; }
  .elx-page .galarr--next{ inset-inline-end:16px; }}
@media (min-width:1024px){
  /* La scène occupe toute la largeur de la grille : elle s'aligne sur le
     titre et sur la ligne de légende, sans marge latérale morte. Le rapport
     passe en 3:2, un peu plus large que les fichiers 4:3 : le recentrage se
     fait uniquement en hauteur et laisse plus de 40 px de marge au-dessus
     et au-dessous du produit sur les trois vues. */
  .elx-page .gal__stage{ aspect-ratio:3/2; }}

/* ==========================================================================
   9 . DÉTAILS ET FINITIONS
   Composition asymétrique : cadrage portrait serré sur l'étiquette d'un
   côté, liste de finitions de l'autre. La liste mêle des éléments visibles
   sur la photographie et les deux matières documentées du produit.
   ========================================================================== */
.elx-page .fin__in{ display:grid; gap:28px; align-items:center; }
.elx-page .fin__fig{ margin:0 calc(-1 * var(--gut)); }
.elx-page .fin__fig img{ width:100%; }
.elx-page .fin__copy .eyebrow{ margin-bottom:12px; }
.elx-page .fin__copy p{ margin-top:16px; color:var(--km-body); max-width:48ch; }
.elx-page .fin__list{ margin-top:28px; border-top:1px solid var(--km-line); }
.elx-page .fin__list li{
  padding-block:14px; border-bottom:1px solid var(--km-line);
  font-size:var(--fs-body); color:var(--km-ink); line-height:1.5;
}
@media (min-width:1024px){
  .elx-page .fin__in{
    grid-template-columns:minmax(0,46fr) minmax(0,54fr);
    column-gap:clamp(48px,5vw,var(--s8));
  }
  .elx-page .fin__fig{
    margin:0; margin-left:calc(-1 * var(--bleed));
    width:calc(100% + var(--bleed));
  }}

/* ==========================================================================
   10 . OFFRE ET COMMANDE
   Surface lunaire n° 2. Aucun prix KinéMoon n'est documenté dans ce projet :
   le bloc prix n'existe pas, et rien ne le remplace. Seules les modalités
   Elafya réellement publiées sur la page Livraison sont affichées.
   ========================================================================== */
.elx-page .order{ background:var(--km-moon); }
.elx-page .order__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:30px; align-items:start; }
.elx-page .order__summary{ min-width:0; }
.elx-page .order__summary .eyebrow{ margin-bottom:12px; }
.elx-page .order__summary h2{ margin-bottom:18px; }
.elx-page .order__summary > p{ color:var(--km-body); max-width:48ch; }
.elx-page .incl{ display:grid; margin-top:26px; }
.elx-page .incl li{
  display:flex; gap:12px; align-items:flex-start;
  padding-block:13px; font-size:var(--fs-body); line-height:1.5;
  border-bottom:1px solid rgba(23,35,31,.14);
}
.elx-page .incl li:first-child{ border-top:1px solid rgba(23,35,31,.14); }
.elx-page .incl svg{ width:18px; height:18px; color:var(--km-green); flex:none; margin-top:4px; }

.elx-page .card{
  background:var(--km-paper); border:1px solid var(--km-line); border-radius:var(--r);
  padding:24px 20px; min-width:0;
}
.elx-page .card h2{ margin-bottom:10px; }
.elx-page .card__intro{ margin-bottom:22px; color:var(--km-body); }
.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(--km-ink);
  margin-bottom:6px;
}
.elx-page .field input{
  width:100%; font:inherit; font-size:17px; color:var(--km-ink);
  background:transparent; border:0; border-bottom:1px solid var(--km-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(--km-green); border-bottom-width:2px; padding-bottom:11px; }
.elx-page .field input::placeholder{ color:var(--km-placeholder); }
.elx-page .field .err{ display:none; margin-top:7px; font-size:14px; font-weight:500; color:var(--km-err); }
.elx-page .field.is-invalid input{ border-color:var(--km-err); }
.elx-page .field.is-invalid .err{ display:block; }

/* Sélecteur de quantité : un seul groupe compact − / nombre / +, aligné sur
   le filet et le rayon déjà employés par les champs de la carte. Pas de
   carte générique, pas de sous-titre d'usage : la page ne suppose rien du
   lit du client. Le nombre reste librement saisissable, sans plafond, et
   n'entraîne ni remise, ni prix de lot, ni offre duo. */
.elx-page .qty{ margin-top:24px; min-width:0; }
.elx-page .qty__label{
  display:block; margin-bottom:10px;
  font-size:var(--fs-label); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--km-ink);
}
.elx-page .qty__ctrl{
  display:inline-flex; align-items:stretch; max-width:100%;
  border:1px solid var(--km-line); border-radius:var(--r);
  background:var(--km-paper);
  transition:border-color var(--t-fast) var(--ease);
}
.elx-page .qty__ctrl:focus-within{ border-color:var(--km-green); }
/* Cibles tactiles de 48 px, au-dessus du minimum de 44 px et cohérentes
   avec le reste des commandes de la page. */
.elx-page .qty__btn{
  flex:none; width:48px; min-height:48px;
  display:flex; align-items:center; justify-content:center;
  padding:0; background:transparent; border:0; border-radius:var(--r);
  color:var(--km-ink); cursor:pointer;
  transition:color var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease);
}
.elx-page .qty__btn svg{ width:16px; height:16px; }
.elx-page .qty__btn:hover{ color:var(--km-green); background:var(--km-mist); }
.elx-page .qty__btn:disabled{ color:var(--km-placeholder); background:transparent; cursor:default; opacity:.45; }
.elx-page .qty__input{
  flex:none; width:76px; min-width:0;
  font:inherit; font-size:18px; font-weight:600; text-align:center;
  color:var(--km-ink); background:transparent;
  border:0; border-inline:1px solid var(--km-line);
  border-radius:0; padding:0 6px; min-height:48px;
  -moz-appearance:textfield; appearance:textfield;
}
/* Les flèches natives doubleraient les boutons − et + : elles se retirent. */
.elx-page .qty__input::-webkit-outer-spin-button,
.elx-page .qty__input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.elx-page .qty__input:focus{ outline:none; }
.elx-page .qty__input:focus-visible{ outline:2px solid var(--km-green); outline-offset:-2px; }
.elx-page .qty__help{ margin-top:10px; font-size:var(--fs-micro); line-height:1.6; color:var(--km-muted); }

.elx-page .form__submit{ margin-top:24px; }
/* Sous 380 px, la largeur utile de la carte tombe à environ 230 px et le
   libellé du bouton d'envoi ne tient plus à côté de la flèche : il était
   coupé en son milieu par le masque de la bascule. La flèche, purement
   décorative, se retire, et le libellé retrouve sa longueur entière sans
   perdre un point de corps. */
@media (max-width:379px){
  .elx-page .form__submit{ padding-inline:16px; }
  .elx-page .form__submit .arw{ display:none; }}
.elx-page .form__foot{
  display:flex; align-items:flex-start; gap:8px;
  margin-top:14px; text-align:start;
}
.elx-page .form__foot svg{ width:15px; height:15px; color:var(--km-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(--km-ivory);
  border:1px solid var(--km-line);
  font-size:15px; line-height:1.55; color:var(--km-ink);
}
.elx-page .form__status.is-visible{ display:block; }
.elx-page .form__status.is-error{ border-color:rgba(168,50,42,.4); color:var(--km-err); }
@media (min-width:600px){ .elx-page .card{ padding:var(--s5); }}
@media (min-width:1024px){
  .elx-page .order__grid{ grid-template-columns:minmax(0,46fr) minmax(0,54fr); gap:clamp(48px,5vw,var(--s8)); }
  .elx-page .card{ padding:clamp(32px,3vw,48px); }}

/* ==========================================================================
   11 . QUESTIONS
   Une seule réponse ouverte à la fois, zones tactiles de 48 px minimum.
   ========================================================================== */
.elx-page .faq__head .eyebrow{ margin-bottom:12px; }
.elx-page .faq__head .h2{ max-width:22ch; }
.elx-page .faq__head .rule{ margin-top:18px; }
.elx-page .faq__grid{ display:grid; gap:28px; align-items:start; }
.elx-page .acc{ border-top:1px solid var(--km-line); }
.elx-page .acc__item{ border-bottom:1px solid var(--km-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:16px 0; font-family:var(--font-serif); font-weight:600;
  font-size:18px; line-height:1.28; letter-spacing:-.008em;
  color:var(--km-ink);
  transition:color var(--t-fast) var(--ease);
}
.elx-page .acc__btn:hover{ color:var(--km-green); }
.elx-page .acc__btn svg{ width:18px; height:18px; flex:none; color:var(--km-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:20px; color:var(--km-body); font-size:var(--fs-body); max-width:62ch; }
.elx-page .acc__panel a{ color:var(--km-green); text-underline-offset:3px; }
@media (min-width:768px){
  .elx-page .acc__btn{ font-size:clamp(20px,1.5vw,24px); padding:22px 0; }
  .elx-page .acc__panel p{ padding-bottom:24px; }}
@media (min-width:1024px){
  .elx-page .faq__grid{ grid-template-columns:minmax(0,34fr) minmax(0,66fr); gap:clamp(48px,5vw,var(--s8)); }
  .elx-page .faq__head{ position:sticky; top:calc(var(--nav-h) + 28px); }}

/* ==========================================================================
   12 . BRIDGE ELAFYA ET PIED DE PAGE
   ========================================================================== */
.elx-page .bridge{ background:var(--km-green); color:var(--km-on-dark); padding-block:52px; }
.elx-page .bridge__in{ display:grid; gap:26px; align-items:center; }
.elx-page .bridge h2{ color:var(--km-on-dark); max-width:22ch; }
.elx-page .bridge p{ color:var(--km-on-dark-dim); max-width:52ch; margin-top:14px; }
.elx-page .bridge .eyebrow{ color:var(--km-gold-soft); margin-bottom:12px; }
.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:84px; }}
@media (min-width:1024px){
  .elx-page .bridge{ padding-block:clamp(92px,7.4vw,112px); }
  .elx-page .bridge__in{ grid-template-columns:minmax(0,1fr) auto; gap:var(--s7); }}

.elx-page .foot{ background:var(--km-green-deep); color:var(--km-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(--km-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; }
.elx-page .foot__col{ border-top:1px solid var(--km-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(--km-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(--km-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(--km-on-dark-dim);
  transition:color var(--t-fast) var(--ease);
}
.elx-page .foot__col a:hover{ color:var(--km-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(--km-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; }
  .elx-page .foot__top{ column-gap:var(--s6); }}

/* ==========================================================================
   CTA STICKY MOBILE
   Aucun prix n'étant publié, la barre ne porte que l'action. Elle se retire
   dès que la section Commander ou le pied de page entre dans le champ.
   ========================================================================== */
.elx-page .sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:flex; align-items:center; gap:var(--s2);
  background:var(--km-paper); border-top:1px solid var(--km-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 .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; }}

/* ==========================================================================
   MOUVEMENT RÉDUIT
   Rien ne bouge, tout reste lisible et atteignable.
   ========================================================================== */
@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 .trustbar__i{ transition:none; }}

/* ==========================================================================
   14 . VERSION ARABE : TYPOGRAPHIE ET SENS DE LECTURE
   Le reste de la feuille est écrit en propriétés logiques : le miroir se
   fait donc de lui-même. Ne subsiste ici que ce qu'une propriété logique
   ne sait pas exprimer — angles de dégradé, cadrage photographique,
   translations — et la direction typographique arabe.
   ========================================================================== */

/* Deux variables portent tout le système : les redéfinir sur la racine
   arabe suffit à changer chaque titre et chaque libellé de la page.
   Newsreader et Manrope ne touchent jamais un texte arabe. */
.elx-page[lang="ar"]{
  --font-serif:'Noto Naskh Arabic','Amiri',Georgia,serif;
  --font-sans:'IBM Plex Sans Arabic','Noto Naskh Arabic',system-ui,sans-serif;
}

/* Le crénage serré et les capitales espacées sont dessinés pour l'alphabet
   latin. Sur de l'arabe, ils défont les ligatures et détachent les lettres
   d'un même mot : ils sont neutralisés, jamais hérités. */
.elx-page[lang="ar"],

.elx-page[lang="ar"] .h1,  .elx-page[lang="ar"] .h2,  .elx-page[lang="ar"] .h3,

.elx-page[lang="ar"] .lead,  .elx-page[lang="ar"] .btn,  .elx-page[lang="ar"] .trustbar__list,

.elx-page[lang="ar"] .who__t,  .elx-page[lang="ar"] .cmp__t,  .elx-page[lang="ar"] .cmp__foot,

.elx-page[lang="ar"] .trait h3,  .elx-page[lang="ar"] .gains li,  .elx-page[lang="ar"] .acc__btn,

.elx-page[lang="ar"] .foot__slogan,  .elx-page[lang="ar"] .shape__intro{ letter-spacing:normal; }

.elx-page[lang="ar"] .eyebrow,

.elx-page[lang="ar"] .hero__note-t,

.elx-page[lang="ar"] .cmp__lab,

.elx-page[lang="ar"] .field label,

.elx-page[lang="ar"] .qty__label,

.elx-page[lang="ar"] .foot__col > summary{ letter-spacing:normal; text-transform:none; }

/* L'arabe respire davantage : ses hampes montent et ses queues descendent
   plus loin que celles du latin. Aucune hauteur n'est figée pour autant. */
.elx-page[lang="ar"] .h1{ line-height:1.3; font-weight:600; }
.elx-page[lang="ar"] .h2{ line-height:1.32; font-weight:600; }
.elx-page[lang="ar"] .h3{ line-height:1.4; }
.elx-page[lang="ar"] .lead{ line-height:1.85; }
.elx-page[lang="ar"] p,  .elx-page[lang="ar"] li,  .elx-page[lang="ar"] .acc__panel div{ line-height:1.8; }
.elx-page[lang="ar"] .who__t,  .elx-page[lang="ar"] .cmp__t,

.elx-page[lang="ar"] .trait h3,  .elx-page[lang="ar"] .cmp__foot{ line-height:1.45; }
.elx-page[lang="ar"] .gains li,  .elx-page[lang="ar"] .acc__btn,

.elx-page[lang="ar"] .foot__slogan{ line-height:1.5; }
.elx-page[lang="ar"] .btn{ line-height:1.5; }
/* Le libellé roulant est masqué par overflow : sans cette réserve, les
   descendantes arabes seraient rognées au ras du texte. */
.elx-page[lang="ar"] .roll,  .elx-page[lang="ar"] .roll__i,  .elx-page[lang="ar"] .roll__i::after{ line-height:1.75; }
.elx-page[lang="ar"] .trustbar__i{ line-height:1.7; }

/* --- Sens de lecture --- */
/* La flèche d'action montre la fin de la ligne : à gauche en arabe. Elle
   est retournée, pas l'image ni le logo. */
.elx-page[dir="rtl"] .arw:not(.arw--down){ transform:scaleX(-1); }
.elx-page[dir="rtl"] a:hover .arw:not(.arw--down),
.elx-page[dir="rtl"] button:hover .arw:not(.arw--down),
.elx-page[dir="rtl"] a:focus-visible .arw:not(.arw--down),
.elx-page[dir="rtl"] button:focus-visible .arw:not(.arw--down){ transform:scaleX(-1) translateX(5px); }

/* Les propriétés logiques ont déjà déplacé les deux boutons de galerie :
   « précédente » passe à droite, « suivante » à gauche. Restent les
   pointes, qui doivent suivre le mouvement. */
.elx-page[dir="rtl"] .galarr--prev svg,
.elx-page[dir="rtl"] .galarr--prev:hover svg,
.elx-page[dir="rtl"] .galarr--prev:focus-visible svg{ transform:none; }
.elx-page[dir="rtl"] .galarr--next svg,
.elx-page[dir="rtl"] .galarr--next:hover svg,
.elx-page[dir="rtl"] .galarr--next:focus-visible svg{ transform:rotate(180deg); }

/* Les suites de chiffres se lisent de gauche à droite dans les deux
   langues. Le libellé reste arabe, seule la valeur est retournée, et le
   champ garde son alignement sur le bord de départ. */
.elx-page[dir="rtl"] input[type="tel"]{ direction:ltr; text-align:right; }
.elx-page[dir="rtl"] .qty__input{ direction:ltr; }

@media (min-width:1024px){
  /* Le panneau photographique est déjà passé à gauche par inset-inline.
     Son masque doit s'ouvrir depuis le bord opposé : l'angle est
     symétrique, et le cadrage se recentre en miroir. La photographie,
     elle, n'est jamais retournée. */
  .elx-page[dir="rtl"] .hero__panel{
    -webkit-mask-image:linear-gradient(-97deg,
        rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 3%, rgba(0,0,0,.20) 6%,
        rgba(0,0,0,.44) 9%, rgba(0,0,0,.70) 12%, rgba(0,0,0,.90) 15%,
        rgba(0,0,0,1) 18%);
    mask-image:linear-gradient(-97deg,
        rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 3%, rgba(0,0,0,.20) 6%,
        rgba(0,0,0,.44) 9%, rgba(0,0,0,.70) 12%, rgba(0,0,0,.90) 15%,
        rgba(0,0,0,1) 18%);
  }
  .elx-page[dir="rtl"] .hero__stage img{ object-position:44% 52%; }
  .elx-page[dir="rtl"] .hero__panel::after{
    background:
      radial-gradient(125% 112% at 34% 52%,
        rgba(var(--ivory-rgb),0) 56%,
        rgba(var(--ivory-rgb),.16) 80%,
        rgba(var(--ivory-rgb),.42) 100%),
      linear-gradient(to bottom,
        rgba(var(--ivory-rgb),.34) 0%,
        rgba(var(--ivory-rgb),0) 15%,
        rgba(var(--ivory-rgb),0) 72%,
        rgba(var(--ivory-rgb),.40) 100%);
  }}

/* --- Bascule de langue --- */
/* Un seul libellé, jamais deux : celui de la langue vers laquelle on
   bascule, écrit dans cette langue. Pas de menu déroulant, pas de drapeau,
   pas de globe. L'allure d'un lien de navigation, avec le même filet d'or
   au survol et la même hauteur de cible que les autres liens. */
.elx-page .lang{
  display:inline-flex; align-items:center; flex:none;
  min-height:44px; padding:0 1px;
  background:transparent; border:0; cursor:pointer;
  font-size:var(--fs-nav); font-weight:500; line-height:1.2;
  color:var(--km-body); white-space:nowrap;
  border-bottom:1px solid transparent;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.elx-page .lang:hover{ color:var(--km-green); border-color:var(--km-gold); }
/* Chaque libellé garde la police de sa propre langue, quelle que soit celle
   de la page : « العربية » n'est jamais rendu par Manrope, et « Français »
   jamais par IBM Plex Sans Arabic. */
.elx-page .lang[lang="ar"]{ font-family:'IBM Plex Sans Arabic','Noto Naskh Arabic',sans-serif; font-size:15px; }
.elx-page .lang[lang="fr"]{ font-family:'Manrope',system-ui,sans-serif; }
/* Dans le tiroir, le sélecteur ferme la liste : un filet le sépare du
   reste, et le survol ne souligne pas — il n'y a rien sous quoi glisser. */
.elx-page .navdrawer .lang{
  display:flex; width:100%; min-height:48px;
  align-items:flex-end; justify-content:flex-start;
  margin-top:14px; padding-top:16px; padding-bottom:2px;
  font-size:16px; border-top:1px solid var(--km-line); border-bottom:0;
}
.elx-page .navdrawer .lang:hover{ border-top-color:var(--km-line); }

/* --- Comparateur : deux respirations propres à la version arabe ---
   Une légende brève sous chaque photographie, et une chute de deux lignes
   après le paragraphe. Elles n'existent pas en français, où les éléments
   restent vides : « :empty » les retire alors entièrement du flux, sans
   laisser la moindre marge. */
.elx-page .cmp__cue{
  display:flex; align-items:baseline; gap:9px; margin-top:13px;
  font-size:var(--fs-micro); line-height:1.6; color:var(--km-muted);
}
.elx-page .cmp__cue::before{
  content:''; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--km-gold); transform:translateY(-2px);
}
.elx-page .cmp__col--sol .cmp__cue::before{ background:var(--km-green); }
.elx-page .cmp__body .cmp__micro{
  margin-top:16px; padding-inline-start:14px;
  border-inline-start:1px solid var(--km-gold);
  font-size:15px; line-height:1.75; color:var(--km-body);
}
.elx-page .cmp__cue:empty, .elx-page .cmp__body .cmp__micro:empty{ display:none; }