/* =============================================================================
   ELAFYA — KINÉBACK · FICHE PRODUIT
   -----------------------------------------------------------------------------
   Cette feuille dessine une FICHE PRODUIT, pas une page de présentation. Sa
   composition tient en une phrase : la galerie et l'achat occupent le premier
   écran, tout le reste vient après et pèse moins.

   CE QUE CETTE FEUILLE S'INTERDIT
   · Les filets empilés. Un séparateur horizontal n'apparaît que là où il
     sépare réellement deux éléments d'une même liste — entre deux accordéons,
     au-dessus d'un total. Jamais sous un titre, jamais entre deux paragraphes.
     Partout ailleurs, ce sont l'espace, la graisse et l'alignement qui
     découpent la page.
   · Les cartes. Une seule boîte est dessinée dans toute la feuille : la zone
     de saisie du formulaire de commande, parce qu'elle délimite un endroit où
     l'on écrit. Rien d'autre n'a de fond, de bordure ni d'ombre.
   · Les capsules, pastilles et pictogrammes décoratifs. Le seul symbole
     répété est la coche des trois lignes de réassurance.

   RYTHME DES FONDS
   Trois valeurs claires très proches, et un seul fond sombre dans toute la
   page — le module d'usage, où la photographie doit dominer :

       premier écran  papier      #FFFDF9
       pourquoi       ivoire      #F7F5EF
       usages         vert profond #06241B   ← l'unique respiration sombre
       forme+détails  papier
       rappel d'achat perle       #EFEDE6
       avis           papier
       questions      ivoire
       autres produits papier

   ORDRE DE CHARGEMENT
   `_shell.css` passe avant : il habille le prix, la disponibilité, le total et
   les messages WooCommerce à partir des alias `--el-*` définis ici même.
   ========================================================================== */

/* ==========================================================================
   1 . JETONS
   ========================================================================== */
.elx-page{
  /* --- Palette KinéBack ---
     Le produit est noir et maillé : la page reste claire et le seul fond
     sombre de la composition sert la texture. L'ivoire est légèrement plus
     gris que sur les autres fiches Kiné pour que le noir du coussin ne creuse
     pas un trou dans la page. */
  --kb-ivory:#F7F5EF;
  --kb-paper:#FFFDF9;
  --kb-pearl:#EFEDE6;
  --kb-studio:#F1ECE1;
  --kb-green:#0E3B2E;
  --kb-green-hover:#0A2E23;
  --kb-green-deep:#06241B;
  --kb-ink:#15201C;
  --kb-body:#404E48;
  --kb-muted:#55625C;
  --kb-gold:#A8813F;
  --kb-gold-ink:#7A5C24;
  --kb-gold-soft:#CDA96F;
  --kb-line:#E0D9CB;
  --kb-hair:rgba(241,237,227,.18);
  --kb-on-dark:#F1EDE3;
  --kb-on-dark-dim:rgba(241,237,227,.78);
  --kb-err:#A8322A;
  --kb-placeholder:#6E7570;
  --kb-ink-rgb:21,32,28;
  --ivory-rgb:247,245,239;

  /* --- Alias pour _shell.css (prix, stock, total, notices WooCommerce) --- */
  --el-green:var(--kb-green);
  --el-green-hover:var(--kb-green-hover);
  --el-green-deep:var(--kb-green-deep);
  --el-ivory:var(--kb-ivory);
  --el-paper:var(--kb-paper);
  --el-studio:var(--kb-studio);
  --el-gold:var(--kb-gold);
  --el-gold-ink:var(--kb-gold-ink);
  --el-gold-soft:var(--kb-gold-soft);
  --el-ink:var(--kb-ink);
  --el-body:var(--kb-body);
  --el-muted:var(--kb-muted);
  --el-line:var(--kb-line);
  --el-hair:var(--kb-hair);
  --el-on-dark:var(--kb-on-dark);
  --el-on-dark-dim:var(--kb-on-dark-dim);
  --el-err:var(--kb-err);
  --el-placeholder:var(--kb-placeholder);

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

  /* Échelle typographique — QUATRE niveaux de texte, pas douze.
     Le H1 est un NOM DE PRODUIT dans une colonne d'achat : il n'a plus à
     porter une phrase, donc il n'a plus besoin de la taille d'un titre de
     landing. C'est le changement d'échelle le plus visible de cette refonte. */
  --fs-h1:clamp(34px,26px + 2.4vw,40px);
  --fs-h2:clamp(28px,22px + 1.9vw,34px);
  --fs-h3:20px;
  --fs-lead:17px;
  --fs-body:16px;
  --fs-btn:15px;
  --fs-micro:14px;

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

  --wrap:1320px;
  --gut:20px;
  --r:6px;

  --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;
}
@media (min-width:400px){ .elx-page{ --gut:24px; }}
@media (min-width:768px){
  .elx-page{
    --gut:40px;
    --fs-h1:clamp(38px,3.4vw,44px);
    --fs-h2:clamp(32px,3vw,40px);
    --fs-h3:21px;
    --fs-lead:18px;
    --fs-body:17px;
  }}
@media (min-width:1200px){ .elx-page{ --gut:64px; }}

/* ==========================================================================
   2 . SOCLE
   ========================================================================== */
.elx-page *,.elx-page *::before,.elx-page *::after{ box-sizing:border-box; }
.elx-page{
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:1.62;
  color:var(--kb-ink);
  background:var(--kb-paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.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 figcaption,
.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(--kb-green); color:#fff; }
.elx-page :focus-visible{ outline:2px solid var(--kb-green); outline-offset:3px; border-radius:2px; }
.elx-page .on-dark :focus-visible{ outline-color:var(--kb-gold-soft); }

@media (prefers-reduced-motion:reduce){
  .elx-page *,.elx-page *::before,.elx-page *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   3 . TYPOGRAPHIE — quatre niveaux
   ========================================================================== */
.elx-page .h1,.elx-page h1{
  font-family:var(--font-serif); font-size:var(--fs-h1); font-weight:500;
  line-height:1.06; letter-spacing:-.022em; color:var(--kb-ink);
}
.elx-page .h2{
  font-family:var(--font-serif); font-size:var(--fs-h2); font-weight:500;
  line-height:1.12; letter-spacing:-.018em; color:var(--kb-ink);
}
.elx-page .h3{
  font-family:var(--font-serif); font-size:var(--fs-h3); font-weight:500;
  line-height:1.24; letter-spacing:-.01em; color:var(--kb-ink);
}
/* Le surtitre en capitales ne subsiste QU'À un seul endroit : le fil
   commercial de la colonne d'achat. Il a disparu des sept autres sections. */
.elx-page .eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--kb-gold-ink);
}
.elx-page .lead{ font-size:var(--fs-lead); line-height:1.58; color:var(--kb-body); }
.elx-page .body{ color:var(--kb-body); }
.elx-page .micro{ font-size:var(--fs-micro); line-height:1.6; color:var(--kb-muted); }
.elx-page .kb-body{ color:var(--kb-body); max-width:58ch; }
.elx-page .kb-body p + p{ margin-top:14px; }
.elx-page .on-dark,.elx-page .on-dark .h2,.elx-page .on-dark h2{ color:var(--kb-on-dark); }
.elx-page .on-dark .kb-body,.elx-page .on-dark p{ color:var(--kb-on-dark-dim); }

/* Bascule de langue : seul le bloc arabe change de pile. */
.elx-page[data-lang="ar"]{ font-family:'IBM Plex Sans Arabic','Noto Naskh Arabic',var(--font-sans); }
.elx-page[data-lang="ar"] .h1,.elx-page[data-lang="ar"] h1,
.elx-page[data-lang="ar"] .h2,.elx-page[data-lang="ar"] .h3{
  font-family:'Noto Naskh Arabic','IBM Plex Sans Arabic',var(--font-serif);
  letter-spacing:0; line-height:1.3;
}
.elx-page [data-only="ar"]{ display:none; }
.elx-page[data-lang="ar"] [data-only="ar"]{ display:block; }

/* ==========================================================================
   4 . STRUCTURE ET RYTHME
   ========================================================================== */
.elx-page .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

/* La fiche est plus courte que la landing : ses sections respirent moins
   large, sinon huit sections aérées redonneraient la longueur qu'on retire. */
.elx-page .section{ padding-block:56px; }
@media (min-width:768px){  .elx-page .section{ padding-block:76px; }}
@media (min-width:1024px){ .elx-page .section{ padding-block:clamp(84px,6.4vw,104px); }}

.elx-page .bg-ivory{ background:var(--kb-ivory); }
.elx-page .bg-paper{ background:var(--kb-paper); }
.elx-page .bg-pearl{ background:var(--kb-pearl); }

/* Le filet doré subsiste comme primitive — la passerelle partagée s'en sert —
   mais AUCUNE section de KinéBack ne l'emploie plus. */
.elx-page .rule{ width:0; height:1px; background:var(--kb-gold); opacity:.55; transition:width .8s var(--ease-out) .1s; }
.elx-page .is-in .rule,.elx-page .rise.is-in > .rule{ width:56px; }

/* ==========================================================================
   5 . SYSTÈME DE MOUVEMENT
   ========================================================================== */
@keyframes kbIn{ to{ opacity:1; transform:none; } }

.elx-page .rise{
  opacity:0; transform:translateY(18px);
  transition:opacity var(--t-rise) var(--ease-out) var(--d,0s),
             transform var(--t-rise) var(--ease-out) var(--d,0s);
}
.elx-page .rise.is-in{ opacity:1; transform:none; }
.elx-page .hl{ opacity:0; transform:translateY(14px); animation:kbIn .7s var(--ease-out) forwards; animation-delay:var(--d,0s); }

/* Libellé roulant. Le duplicata est un pseudo-élément nourri par `data-t` :
   aucun nœud supplémentaire, et `content: attr(data-t) / ""` lui donne un
   texte alternatif vide, ce qui le retire de l'arbre d'accessibilité.

   TROIS DÉCLARATIONS SONT SOLIDAIRES, et les séparer casse le composant :
   `overflow:hidden` sur `.roll` découpe, `position:relative` sur `.roll__i`
   donne au duplicata son référentiel, et `top:100%` le range dessous. Sans le
   `position:relative`, le pseudo se cale sur le premier ancêtre positionné —
   il sort du cadre découpé, et le libellé s'affiche DEUX FOIS, l'un sous
   l'autre. C'est exactement ce qui s'est produit ici avant correction. */
.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%); }

.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[dir="rtl"] .arw{ transform:scaleX(-1); }
.elx-page[dir="rtl"] a:hover .arw{ transform:scaleX(-1) translateX(5px); }

/* ==========================================================================
   6 . BOUTONS ET LIENS D'ACTION
   ========================================================================== */
.elx-page .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 26px;
  font-size:var(--fs-btn); font-weight:600; letter-spacing:.01em;
  text-decoration:none; cursor:pointer;
  border:1px solid transparent; border-radius:var(--r);
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.elx-page .btn--primary{ background:var(--kb-green); border-color:var(--kb-green); color:#fff; }
.elx-page .btn--primary:hover{ background:var(--kb-green-hover); border-color:var(--kb-green-hover); }
.elx-page .btn--onDark{ background:var(--kb-ivory); border-color:var(--kb-ivory); color:var(--kb-green-deep); }
.elx-page .btn--onDark:hover{ background:var(--kb-paper); border-color:var(--kb-paper); }
.elx-page .btn--ghost{ background:transparent; border-color:rgba(var(--kb-ink-rgb),.24); color:var(--kb-ink); }
.elx-page .btn--ghost:hover{ border-color:var(--kb-green); color:var(--kb-green); }
.elx-page .btn--lg{ min-height:58px; padding:18px 30px; font-size:16px; }
.elx-page .btn--block{ width:100%; }

.elx-page .tlink{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-micro); font-weight:600; text-decoration:none; color:var(--kb-ink);
}
.elx-page .tlink > .roll{ border-bottom:1px solid rgba(var(--kb-ink-rgb),.28); transition:border-color var(--t-fast) var(--ease); }
.elx-page .tlink:hover > .roll{ border-color:var(--kb-green); }
.elx-page .on-dark .tlink{ color:var(--kb-on-dark); }
.elx-page .on-dark .tlink > .roll{ border-bottom-color:var(--kb-gold-soft); }

/* ==========================================================================
   7 . PREMIER ÉCRAN — GALERIE | ACHAT
   --------------------------------------------------------------------------
   58 / 42. C'est la seule proportion de la page qui compte : elle dit que la
   photographie et l'achat sont à égalité de dignité, et que rien d'autre ne
   partage cet écran.
   ========================================================================== */
.elx-page .kb-top{ background:var(--kb-paper); }
/* Sur téléphone, chaque pixel entre le haut de page et le prix est un pixel
   que le visiteur doit franchir avant de savoir combien coûte l'objet. D'où
   ces valeurs serrées : la galerie occupe la largeur, mais elle ne pousse pas
   l'achat hors du premier écran. */
.elx-page .kb-top__in{
  display:grid; gap:20px;
  padding-block:12px 40px;
}
@media (min-width:768px){ .elx-page .kb-top__in{ padding-block:28px 60px; } }
@media (min-width:1024px){
  .elx-page .kb-top__in{
    grid-template-columns:58fr 42fr;
    gap:clamp(36px,3.6vw,64px);
    align-items:start;
    padding-block:36px 76px;
  }
}

/* --------------------------------------------------------------- GALERIE */
.elx-page .gal{ position:relative; }

/* La scène est carrée : les six fichiers sont des carrés 1254 × 1254, donc
   `cover` ne recadre rien et aucune image n'est ni déformée ni rognée. */
.elx-page .gal__stage{
  position:relative;
  background:var(--kb-studio);
  border-radius:var(--r);
  overflow:hidden;
}
.elx-page .galslide{ position:relative; margin:0; }
.elx-page .galslide picture{ display:block; }
.elx-page .galslide img{
  width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center;
}

/* — Sous 1024px : rail à balayage. Pas de flèches, pas de vignettes : le
     doigt et les pastilles suffisent, et une vignette de 40px ne se vise pas. */
@media (max-width:1023.98px){
  .elx-page .gal__stage{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
  }
  .elx-page .gal__stage::-webkit-scrollbar{ display:none; }
  /* `scroll-snap-align:center` seul. PAS de `scroll-snap-stop:always` : cette
     déclaration interdit à TOUT défilement — le doigt comme le script — de
     franchir plus d'un point d'accroche à la fois. Les pastilles devenaient
     alors inertes au-delà de la voisine : cliquer la sixième n'avançait que
     d'une vue, et la galerie paraissait cassée. */
  .elx-page .galslide{ flex:0 0 100%; scroll-snap-align:center; }
  .elx-page .galarr{ display:none; }
}

/* — À partir de 1024px : diapositives empilées, vignettes en dessous. */
@media (min-width:1024px){
  .elx-page .gal__stage{ display:grid; }
  .elx-page .galslide{
    grid-area:1 / 1;
    opacity:0; visibility:hidden;
    transition:opacity .42s var(--ease-out),visibility 0s linear .42s;
  }
  .elx-page .galslide.is-active{
    opacity:1; visibility:visible;
    transition:opacity .42s var(--ease-out),visibility 0s;
  }
  /* La scène s'agrandit d'un cheveu au survol : l'image est cliquable, et
     c'est le seul indice qu'on en donne. Aucun cartouche « cliquez ici ». */
  .elx-page .gal__stage.is-zoomable{ cursor:zoom-in; }
  .elx-page .gal__stage.is-zoomable .galslide img{ transition:transform .6s var(--ease-out); }
  .elx-page .gal__stage.is-zoomable:hover .galslide.is-active img{ transform:scale(1.022); }
}

/* Flèches — discrètes, sur la scène, jamais deux gros ronds noirs. */
.elx-page .galarr{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,253,249,.86); border:1px solid rgba(var(--kb-ink-rgb),.08);
  border-radius:50%; cursor:pointer; color:var(--kb-ink);
  opacity:0; transition:opacity var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.elx-page .gal:hover .galarr,
.elx-page .galarr:focus-visible{ opacity:1; }
.elx-page .galarr:hover{ background:var(--kb-paper); }
.elx-page .galarr svg{ width:19px; height:19px; }
.elx-page .galarr--prev{ inset-inline-start:14px; }
.elx-page .galarr--next{ inset-inline-end:14px; }
.elx-page .galarr--prev svg{ transform:scaleX(-1); }
.elx-page[dir="rtl"] .galarr--prev svg{ transform:none; }
.elx-page[dir="rtl"] .galarr--next svg{ transform:scaleX(-1); }

/* Pastilles du mode balayage — traits, pas billes. */
.elx-page .gal__dots{
  display:flex; justify-content:center; gap:7px; margin-top:14px;
}
@media (min-width:1024px){ .elx-page .gal__dots{ display:none; } }
.elx-page .galdot{
  width:26px; height:3px; padding:0; border:0; border-radius:2px; cursor:pointer;
  background:rgba(var(--kb-ink-rgb),.16);
  transition:background var(--t-fast) var(--ease);
}
.elx-page .galdot[aria-current="true"]{ background:var(--kb-green); }

/* Vignettes — six, alignées, sans cadre. Le repère de sélection est un filet
   sous la vignette active : rien d'autre ne bouge.

   ELLES N'EXISTENT QU'À PARTIR DE 1024px, et la règle DOIT donc porter sa
   propre requête média. La masquer plus haut dans la feuille, dans le bloc
   `max-width:1023.98px`, ne suffisait pas : cette déclaration-ci a la même
   spécificité et vient après, donc elle l'emportait — et six vignettes de
   55px apparaissaient sur téléphone, exactement ce que la direction de page
   interdit. */
.elx-page .gal__thumbs{ display:none; }
@media (min-width:1024px){
  .elx-page .gal__thumbs{
    display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:14px;
  }
}
.elx-page .galthumb{
  display:block; padding:0; border:0; background:none; cursor:pointer;
  border-radius:4px; overflow:hidden; position:relative;
  opacity:.62; transition:opacity var(--t-fast) var(--ease);
}
.elx-page .galthumb img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--kb-studio); }
.elx-page .galthumb::after{
  content:''; position:absolute; inset-inline:0; bottom:0; height:2px;
  background:var(--kb-green); transform:scaleX(0); transform-origin:center;
  transition:transform var(--t-fast) var(--ease);
}
.elx-page .galthumb:hover{ opacity:.9; }
.elx-page .galthumb.is-on{ opacity:1; }
.elx-page .galthumb.is-on::after{ transform:scaleX(1); }
/* L'intitulé de la vignette n'est là que pour les lecteurs d'écran : six
   légendes sous six vignettes de 90px seraient illisibles. */
.elx-page .galthumb__t{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.elx-page .gal__cap{
  margin-top:9px; font-size:13px; color:var(--kb-muted); text-align:center;
}
@media (min-width:1024px){ .elx-page .gal__cap{ text-align:start; margin-top:12px; font-size:var(--fs-micro); } }

/* --------------------------------------------------------------- ACHAT */
/* CE QUI EMPÊCHAIT LA COLONNE DE COLLER, ET POURQUOI LA RÈGLE EST ICI
   -----------------------------------------------------------------------
   Le thème pose `body{ overflow-x:hidden }`. Une seule valeur, et toute la
   mécanique tombe : quand un axe vaut `hidden`, la spécification force
   l'autre axe de `visible` à `auto` — `body` devient donc une boîte de
   défilement. `position:sticky` se règle alors sur CE conteneur, qui ne
   défile jamais (c'est la fenêtre qui défile), et l'élément suit bêtement la
   page. Rien ne le signale : la déclaration `sticky` est bien appliquée, elle
   n'a simplement plus rien contre quoi coller.

   `clip` découpe exactement comme `hidden` mais NE crée PAS de boîte de
   défilement : `overflow-y` reste `visible`, `body` cesse d'être un conteneur,
   et le collage retrouve la fenêtre. La protection contre les débordements
   horizontaux est conservée — ici comme sur `.elx-page`, qui utilise déjà
   `clip`.

   La règle est portée par `:has()` pour ne viser QUE cette fiche : les deux
   autres fiches et le reste du site gardent le `body` du thème, intact. Un
   navigateur sans `:has()` ignore la règle et retrouve le comportement
   d'aujourd'hui — la colonne défile, la fiche reste utilisable. */
body:has(.elx-page--kineback){ overflow-x:clip; overflow-y:visible; }

@media (min-width:1024px){
  /* La colonne suit le défilement tant que la galerie défile sous elle :
     l'achat ne quitte jamais l'écran pendant qu'on regarde le produit. */
  .elx-page .kb-top__buy{
    position:sticky;
    top:calc(var(--elx-header-h,84px) + 20px);
  }
}
.elx-page .kb-buy{ max-width:520px; }

.elx-page .kb-buy__cat{
  font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--kb-gold-ink);
}
.elx-page .kb-buy__cat a{ text-decoration:none; }
.elx-page .kb-buy__cat a:hover{ color:var(--kb-green); }

.elx-page .kb-buy__h1{
  margin-top:10px;
  font-family:var(--font-serif); font-size:var(--fs-h1); font-weight:500;
  line-height:1.02; letter-spacing:-.026em; color:var(--kb-ink);
}
.elx-page .kb-buy__sub{
  margin-top:6px;
  font-size:var(--fs-lead); font-weight:400; color:var(--kb-body);
}
.elx-page .kb-buy__desc{
  margin-top:16px; max-width:44ch;
  font-size:var(--fs-body); line-height:1.6; color:var(--kb-body);
}

/* Le prix : le seul endroit de la page où la graisse monte d'un cran sans
   qu'un titre l'annonce. Pas de filet au-dessus — l'espace suffit. */
.elx-page .kb-buy__deal{ margin-top:26px; }
.elx-page .kb-buy__deal .elx-price{ font-size:clamp(28px,3vw,34px); }
.elx-page .kb-buy__deal .elx-stock{ margin-top:10px; }

/* L'ABSENCE de prix ne se compose PAS comme un prix.
   Rendue à la taille du montant, la phrase « Prix non communiqué » devenait
   l'élément le plus fort de la colonne — elle criait plus haut que le nom du
   produit, et la fiche semblait annoncer une mauvaise nouvelle. Elle reprend
   ici l'échelle et la couleur d'une mention de service : l'information reste
   parfaitement lisible, mais elle cesse d'être le sujet de la page. */
.elx-page .kb-buy__deal .elx-price--none{
  font-size:clamp(18px,1.9vw,21px);
  color:var(--kb-muted);
}
.elx-page .kb-buy__deal .elx-price--none .elx-price-none{ font-weight:500; }

.elx-page .kb-buy__act{ margin-top:24px; }

/* Commande fermée : un état, pas une carte. Un filet vertical doré tient lieu
   de repère — il ne ferme rien et n'ajoute aucune boîte à la page. */
.elx-page .kb-buy__off{
  padding-inline-start:16px;
  border-inline-start:2px solid var(--kb-gold);
}
.elx-page .kb-buy__off-t{ font-weight:600; color:var(--kb-ink); }
.elx-page .kb-buy__off-p{ margin-top:6px; font-size:var(--fs-micro); line-height:1.6; color:var(--kb-muted); max-width:40ch; }

/* Réassurance : trois lignes, une coche, aucun encadré. Le filet supérieur
   sépare l'achat de ses garanties — c'est un des trois filets de la page. */
.elx-page .kb-rea{
  margin-top:26px; padding-top:20px;
  border-top:1px solid var(--kb-line);
  display:grid; gap:11px;
}
.elx-page .kb-rea li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:var(--fs-micro); line-height:1.5; color:var(--kb-body);
}
.elx-page .kb-rea__i{ width:16px; height:16px; flex:none; margin-top:3px; color:var(--kb-gold); }

/* ==========================================================================
   8 . FORMULAIRE DE COMMANDE
   --------------------------------------------------------------------------
   Rendu par `elafya_pdp_order_form()` dès qu'un tarif est saisi en boutique.
   Il est habillé ici pour que ce jour-là rien ne soit à reprendre.
   ========================================================================== */
.elx-page .elx-form{ display:block; }
.elx-page .field{ margin-bottom:14px; }
.elx-page .field label{
  display:block; margin-bottom:6px;
  font-size:var(--fs-micro); font-weight:600; color:var(--kb-ink);
}
.elx-page .field input{
  width:100%; min-height:50px; padding:12px 14px;
  font:inherit; font-size:var(--fs-body); color:var(--kb-ink);
  background:var(--kb-paper);
  border:1px solid var(--kb-line); border-radius:var(--r);
  transition:border-color var(--t-fast) var(--ease);
}
.elx-page .field input::placeholder{ color:var(--kb-placeholder); }
.elx-page .field input:focus{ border-color:var(--kb-green); outline:none; box-shadow:0 0 0 3px rgba(14,59,46,.1); }
.elx-page .field .err{ display:none; margin-top:5px; font-size:13px; color:var(--kb-err); }
.elx-page .field.is-bad input{ border-color:var(--kb-err); }
.elx-page .field.is-bad .err{ display:block; }

.elx-page .qty{ display:inline-flex; align-items:center; border:1px solid var(--kb-line); border-radius:var(--r); overflow:hidden; }
.elx-page .qty__b{
  width:46px; height:48px; display:flex; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; font-size:18px; color:var(--kb-ink);
  transition:background var(--t-fast) var(--ease);
}
.elx-page .qty__b:hover{ background:var(--kb-ivory); }
.elx-page .qty__in{ width:58px; height:48px; border:0; text-align:center; font:inherit; font-weight:600; background:none; color:var(--kb-ink); }
.elx-page .qty__hint{ margin-top:7px; }

.elx-page .form__submit{ margin-top:6px; }
.elx-page .form__foot{
  display:flex; align-items:center; gap:8px; justify-content:center;
  margin-top:12px; font-size:13px; color:var(--kb-muted);
}
.elx-page .form__foot svg{ width:15px; height:15px; flex:none; }
.elx-page .form__status{ margin-top:10px; font-size:var(--fs-micro); color:var(--kb-body); }
.elx-page .form__status:empty{ display:none; }

/* ==========================================================================
   9 . POURQUOI — une section, trois points
   ========================================================================== */
.elx-page .kb-why{ background:var(--kb-ivory); }
.elx-page .kb-why__in{ display:grid; gap:32px; }
@media (min-width:1024px){
  .elx-page .kb-why__in{
    grid-template-columns:48fr 52fr;
    gap:clamp(40px,4.4vw,76px);
    align-items:center;
  }
}
.elx-page .kb-why__fig{ margin:0; border-radius:var(--r); overflow:hidden; background:var(--kb-studio); }
.elx-page .kb-why__fig img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.elx-page .kb-why__lead{ margin-top:16px; max-width:46ch; }

/* Les trois points. Le chiffre est un repère d'échelle, pas une décoration :
   il dit qu'il y en a trois, et qu'il n'y en aura pas un quatrième. */
.elx-page .kb-why__list{ margin-top:34px; display:grid; gap:24px; counter-reset:none; }
.elx-page .kb-why__list li{ display:flex; gap:18px; align-items:flex-start; }
.elx-page .kb-why__n{
  flex:none; width:34px; padding-top:3px;
  font-family:var(--font-serif); font-size:16px; font-weight:500;
  color:var(--kb-gold); letter-spacing:.02em;
}
.elx-page .kb-why__b{ display:block; }
.elx-page .kb-why__b strong{
  display:block; font-size:var(--fs-lead); font-weight:600; color:var(--kb-ink); line-height:1.32;
}
.elx-page .kb-why__b span{ display:block; margin-top:6px; color:var(--kb-body); max-width:46ch; }

/* ==========================================================================
   10 . USAGES — l'unique respiration sombre
   --------------------------------------------------------------------------
   Deux photographies à parts égales, sur le vert profond. Aucun titre de
   section au-dessus : les deux intitulés SONT les titres.
   ========================================================================== */
.elx-page .kb-use{
  background:var(--kb-green-deep); color:var(--kb-on-dark);
  padding-block:56px;
}
@media (min-width:768px){  .elx-page .kb-use{ padding-block:76px; } }
@media (min-width:1024px){ .elx-page .kb-use{ padding-block:clamp(84px,6.4vw,104px); } }

.elx-page .kb-use__in{ display:grid; gap:36px; }
@media (min-width:768px){
  .elx-page .kb-use__in{ grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,48px); }
}
.elx-page .kb-use__item{ margin:0; }
.elx-page .kb-use__item picture{ display:block; border-radius:var(--r); overflow:hidden; background:#0A2E23; }
.elx-page .kb-use__item img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.elx-page .kb-use__cap{ margin-top:20px; }
.elx-page .kb-use__t{
  font-family:var(--font-serif); font-size:clamp(23px,2.2vw,28px); font-weight:500;
  line-height:1.16; letter-spacing:-.014em; color:var(--kb-on-dark);
}
.elx-page .kb-use__cap p{
  margin-top:9px; font-size:var(--fs-micro); line-height:1.6;
  color:var(--kb-on-dark-dim); max-width:38ch;
}

/* ==========================================================================
   11 . FORME & DÉTAILS
   ========================================================================== */
.elx-page .kb-det{ background:var(--kb-paper); }

.elx-page .kb-form{ display:grid; gap:32px; }
@media (min-width:1024px){
  .elx-page .kb-form{
    grid-template-columns:44fr 56fr;
    gap:clamp(40px,4.4vw,72px);
    align-items:center;
  }
}
.elx-page .kb-form__copy .kb-body{ margin-top:18px; }

/* Deux vues studio complémentaires. La seconde est décalée vers le bas : deux
   images strictement alignées auraient l'air d'un tableau de spécifications. */
.elx-page .kb-form__figs{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media (min-width:768px){ .elx-page .kb-form__figs{ gap:24px; } }
@media (min-width:1024px){ .elx-page .kb-form__figs .kb-form__fig:last-child{ margin-top:44px; } }
.elx-page .kb-form__fig{ margin:0; }
.elx-page .kb-form__fig picture{ display:block; border-radius:var(--r); overflow:hidden; background:var(--kb-studio); }
.elx-page .kb-form__fig img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.elx-page .kb-form__fig figcaption{
  margin-top:10px; font-size:13px; color:var(--kb-muted);
}

/* ==========================================================================
   12 . ACCORDÉONS — compacts, fermés au repos
   --------------------------------------------------------------------------
   Le filet entre deux items est un séparateur de liste : il sépare deux
   éléments de même nature. C'est le seul emploi de filet que cette feuille
   autorise, avec le total du formulaire et la réassurance.
   ========================================================================== */
.elx-page .kb-acc-wrap{ margin-top:clamp(56px,6vw,88px); max-width:760px; }
.elx-page .kb-acc-h{
  font-family:var(--font-serif); font-size:var(--fs-h3); font-weight:500;
  letter-spacing:-.012em; color:var(--kb-ink); margin-bottom:6px;
}

.elx-page .acc{ border-top:1px solid var(--kb-line); }
.elx-page .acc__item{ border-bottom:1px solid var(--kb-line); }
.elx-page .acc__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:17px 0; background:none; border:0; cursor:pointer; text-align:start;
  font-size:var(--fs-body); font-weight:600; color:var(--kb-ink);
  transition:color var(--t-fast) var(--ease);
}
.elx-page .acc__btn:hover{ color:var(--kb-green); }
.elx-page .acc__btn svg{ width:17px; height:17px; flex:none; color:var(--kb-gold-ink); transition:transform var(--t-mid) var(--ease-out); }
.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-out);
}
.elx-page .acc__btn[aria-expanded="true"] + .acc__panel{ grid-template-rows:1fr; }
.elx-page .acc__panel > div{ overflow:hidden; }
.elx-page .acc__panel p,
.elx-page .acc__panel ul,
.elx-page .acc__panel dl{ padding-bottom:20px; color:var(--kb-body); font-size:var(--fs-micro); line-height:1.66; }
.elx-page .acc__panel > div > :first-child{ padding-top:2px; }

.elx-page .kb-acc__lab{
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--kb-muted); padding-bottom:8px !important;
}
.elx-page .kb-acc__ul{ display:grid; gap:9px; }
.elx-page .kb-acc__ul li{ position:relative; padding-inline-start:16px; }
.elx-page .kb-acc__ul li::before{
  content:''; position:absolute; inset-inline-start:0; top:9px;
  width:5px; height:5px; border-radius:50%; background:var(--kb-gold);
}

.elx-page .kb-dl{ display:grid; gap:0; padding-bottom:14px !important; }
.elx-page .kb-dl > div{
  display:grid; grid-template-columns:minmax(96px,26%) 1fr; gap:14px;
  padding:9px 0; border-bottom:1px solid rgba(var(--kb-ink-rgb),.07);
}
.elx-page .kb-dl > div:last-child{ border-bottom:0; }
.elx-page .kb-dl dt{ font-weight:600; color:var(--kb-ink); font-size:var(--fs-micro); }
.elx-page .kb-dl dd{ color:var(--kb-body); font-size:var(--fs-micro); }

/* ==========================================================================
   13 . RAPPEL D'ACHAT — une bande, une ligne
   ========================================================================== */
.elx-page .kb-recall{ background:var(--kb-pearl); padding-block:26px; }
@media (min-width:768px){ .elx-page .kb-recall{ padding-block:30px; } }

.elx-page .kb-recall__in{
  display:grid; grid-template-columns:auto 1fr; gap:16px 18px; align-items:center;
}
@media (min-width:768px){
  .elx-page .kb-recall__in{ grid-template-columns:auto 1fr auto auto; gap:24px; }
}
.elx-page .kb-recall__shot{ margin:0; width:76px; flex:none; }
@media (min-width:768px){ .elx-page .kb-recall__shot{ width:96px; } }
.elx-page .kb-recall__shot picture{ display:block; border-radius:4px; overflow:hidden; background:var(--kb-studio); }
.elx-page .kb-recall__shot img{ width:100%; aspect-ratio:1/1; object-fit:cover; }

.elx-page .kb-recall__n{ font-family:var(--font-serif); font-size:21px; font-weight:500; letter-spacing:-.014em; color:var(--kb-ink); line-height:1.15; }
.elx-page .kb-recall__s{ margin-top:3px; font-size:var(--fs-micro); color:var(--kb-muted); }

.elx-page .kb-recall__deal{ grid-column:1 / -1; }
@media (min-width:768px){ .elx-page .kb-recall__deal{ grid-column:auto; text-align:end; } }
.elx-page .kb-recall__deal .elx-price{ font-size:clamp(21px,2.2vw,26px); }
.elx-page .kb-recall__deal .elx-price--none{ font-size:var(--fs-micro); color:var(--kb-muted); }
@media (min-width:768px){ .elx-page .kb-recall__deal .elx-price{ justify-content:flex-end; } }
.elx-page .kb-recall__deal .elx-stock{ margin-top:5px; }

.elx-page .kb-recall__act{ grid-column:1 / -1; }
@media (min-width:768px){ .elx-page .kb-recall__act{ grid-column:auto; } }
.elx-page .kb-recall__act .btn{ width:100%; }
@media (min-width:768px){ .elx-page .kb-recall__act .btn{ width:auto; } }

/* ==========================================================================
   14 . AVIS — module WooCommerce, habillé
   --------------------------------------------------------------------------
   La mécanique reste celle de WooCommerce. On ne masque qu'UNE chose : sa
   phrase « no reviews yet », qui est en anglais sur ce site et que la fiche
   remplace par la sienne, en français et traduite en arabe.
   ========================================================================== */
.elx-page .kb-avis{ background:var(--kb-paper); }
.elx-page .kb-avis__in{ max-width:820px; }
.elx-page .kb-avis__none{ margin-top:14px; font-size:var(--fs-lead); color:var(--kb-body); }
.elx-page .kb-avis__cta{ margin-top:6px; font-size:var(--fs-micro); color:var(--kb-muted); }
.elx-page .kb-avis__woo{ margin-top:30px; }

/* Deux titres pour une seule section, c'est un titre de trop : la fiche pose
   déjà « Avis clients », et WooCommerce ajoutait « Reviews » juste en dessous.
   Sa phrase « There are no reviews yet. » disparaît pour la même raison — la
   fiche l'a écrite au-dessus, en français, et traduite en arabe. */
.elx-page .kb-avis #comments > h2,
.elx-page .kb-avis .woocommerce-noreviews{ display:none; }
.elx-page .kb-avis #reviews{ margin:0; }
.elx-page .kb-avis__head .elx-rating{ margin-top:12px; }
.elx-page .kb-avis .commentlist{ display:grid; gap:22px; margin:0 0 30px; padding:0; list-style:none; }
.elx-page .kb-avis .commentlist .comment_container{ display:flex; gap:14px; align-items:flex-start; }
.elx-page .kb-avis .commentlist img.avatar{ width:42px; height:42px; border-radius:50%; flex:none; }
.elx-page .kb-avis .comment-text{ flex:1; }
.elx-page .kb-avis .woocommerce-review__author{ font-weight:600; color:var(--kb-ink); }
.elx-page .kb-avis .woocommerce-review__published-date{ font-size:13px; color:var(--kb-muted); }
.elx-page .kb-avis .star-rating{ color:var(--kb-gold); }
.elx-page .kb-avis .description{ margin-top:8px; color:var(--kb-body); font-size:var(--fs-micro); line-height:1.66; }

.elx-page .kb-avis #review_form_wrapper{ padding-top:26px; border-top:1px solid var(--kb-line); }
.elx-page .kb-avis .comment-reply-title{
  display:block; font-family:var(--font-serif); font-size:var(--fs-h3); font-weight:500;
  letter-spacing:-.012em; color:var(--kb-ink); margin-bottom:14px;
}
.elx-page .kb-avis .comment-form label{
  display:block; margin-bottom:6px; font-size:var(--fs-micro); font-weight:600; color:var(--kb-ink);
}
.elx-page .kb-avis .comment-form input[type="text"],
.elx-page .kb-avis .comment-form input[type="email"],
.elx-page .kb-avis .comment-form textarea{
  width:100%; padding:12px 14px; font:inherit; font-size:var(--fs-body); color:var(--kb-ink);
  background:var(--kb-paper); border:1px solid var(--kb-line); border-radius:var(--r);
}
.elx-page .kb-avis .comment-form textarea{ min-height:120px; resize:vertical; }
.elx-page .kb-avis .comment-form input:focus,
.elx-page .kb-avis .comment-form textarea:focus{ border-color:var(--kb-green); outline:none; box-shadow:0 0 0 3px rgba(14,59,46,.1); }
.elx-page .kb-avis .comment-form p{ margin-bottom:14px; }
.elx-page .kb-avis .comment-form-rating .stars a{ color:var(--kb-gold); }
.elx-page .kb-avis .comment-form .submit{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:14px 28px; cursor:pointer;
  font-size:var(--fs-btn); font-weight:600;
  background:var(--kb-green); color:#fff;
  border:1px solid var(--kb-green); border-radius:var(--r);
  transition:background var(--t-fast) var(--ease);
}
.elx-page .kb-avis .comment-form .submit:hover{ background:var(--kb-green-hover); }

/* ==========================================================================
   15 . QUESTIONS
   ========================================================================== */
.elx-page .kb-faq{ background:var(--kb-ivory); }
.elx-page .kb-faq__in{ max-width:760px; }
.elx-page .kb-faq .acc{ margin-top:26px; }

/* ==========================================================================
   16 . COMPLÉTEZ VOTRE CONFORT
   --------------------------------------------------------------------------
   Les cartes sont celles de la boutique. Deux précautions seulement :
   neutraliser leur système de révélation propre — qui dépend d'un script de
   thème dont on ne dépend pas ici, et laisserait sinon la grille invisible —
   et rendre au lien de carte la couleur que `.elx-page a{color:inherit}` lui
   avait retirée.
   ========================================================================== */
.elx-page .kb-cross{ background:var(--kb-paper); }
.elx-page .kb-cross__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-bottom:32px;
}
.elx-page .kb-cross__grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
@media (min-width:768px){ .elx-page .kb-cross__grid{ gap:26px; } }

.elx-page .kb-cross__grid .el-rise{ opacity:1 !important; transform:none !important; }
.elx-page .kb-cross__grid .el-pcard{ color:var(--kb-ink); text-decoration:none; display:block; }
.elx-page .kb-cross__grid .el-pcard-media{ display:block; position:relative; background:var(--kb-studio); border-radius:var(--r); overflow:hidden; }
.elx-page .kb-cross__grid .el-pcard-media img{ width:100%; aspect-ratio:1/1; object-fit:contain; transition:transform .6s var(--ease-out); }
.elx-page .kb-cross__grid .el-pcard:hover .el-pcard-media img{ transform:scale(1.03); }
.elx-page .kb-cross__grid .el-pcard-body{ display:block; padding-top:14px; }
.elx-page .kb-cross__grid .el-pcard-title{ display:block; font-family:var(--font-serif); font-size:19px; font-weight:500; letter-spacing:-.012em; color:var(--kb-ink); }
.elx-page .kb-cross__grid .el-pcard-type{ display:block; margin-top:3px; font-size:13px; color:var(--kb-muted); }
.elx-page .kb-cross__grid .el-price{ display:flex; align-items:baseline; gap:10px; margin-top:9px; font-size:var(--fs-body); font-weight:600; color:var(--kb-green); }
.elx-page .kb-cross__grid .el-price .was{ font-size:14px; font-weight:400; color:var(--kb-muted); text-decoration:line-through; }
.elx-page .kb-cross__grid .el-price-none{ font-size:var(--fs-micro); font-weight:500; color:var(--kb-muted); }
.elx-page .kb-cross__grid .el-rate{ display:inline-flex; align-items:center; gap:7px; margin-top:8px; font-size:13px; color:var(--kb-muted); }
.elx-page .kb-cross__grid .el-rate .star-rating{ color:var(--kb-gold); }
.elx-page .kb-cross__grid .el-rate--new{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--kb-gold-ink); }
.elx-page .kb-cross__grid .el-rate--void{ display:none; }
.elx-page .kb-cross__grid .el-tag{
  position:absolute; top:10px; inset-inline-start:10px; z-index:2;
  padding:4px 9px; border-radius:3px; font-size:11px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  background:var(--kb-ink); color:var(--kb-paper);
}
.elx-page .kb-cross__grid .el-tag--sale{ background:var(--kb-err); }

/* ==========================================================================
   17 . MENTION DE FIN
   ========================================================================== */
.elx-page .kb-disclaimer{
  max-width:var(--wrap); margin-inline:auto;
  padding:0 var(--gut) 44px;
  font-size:13px; line-height:1.6; color:var(--kb-muted);
}

/* ==========================================================================
   18 . BARRE D'ACHAT MOBILE
   --------------------------------------------------------------------------
   Elle n'existe qu'en dessous de 1024px : au-dessus, la colonne d'achat est
   collante, et une seconde barre ferait doublon.
   Deux classes d'effacement, deux observateurs indépendants : `.is-off` est
   posée par `_core.js` (colonne d'achat, pied de page), `.is-off2` par
   `kineback.js` (bande de rappel). Un seul propriétaire par classe.
   ========================================================================== */
.elx-page .sticky{
  position:fixed; inset-inline:0; bottom:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px calc(var(--gut) - 4px);
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(255,253,249,.94);
  -webkit-backdrop-filter:saturate(1.6) blur(12px);
  backdrop-filter:saturate(1.6) blur(12px);
  border-top:1px solid var(--kb-line);
  transform:translateY(0); opacity:1;
  transition:transform var(--t-mid) var(--ease-out),opacity var(--t-mid) var(--ease-out);
}
.elx-page .sticky.is-off,
.elx-page .sticky.is-off2{ transform:translateY(105%); opacity:0; pointer-events:none; }
@media (min-width:1024px){ .elx-page .sticky{ display:none; } }

.elx-page .kb-sticky__id{ min-width:0; }
.elx-page .kb-sticky__n{
  font-family:var(--font-serif); font-size:16px; font-weight:500;
  color:var(--kb-ink); line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.elx-page .kb-sticky__p{ display:block; margin-top:1px; font-size:14px; font-weight:600; color:var(--kb-green); }
.elx-page .kb-sticky__p .woocommerce-Price-amount,
.elx-page .kb-sticky__p bdi{ font:inherit; color:inherit; }
.elx-page .kb-sticky__p--none{ font-weight:500; color:var(--kb-muted); }
.elx-page .kb-sticky .btn{ flex:none; min-height:46px; padding:12px 20px; }

/* ==========================================================================
   19 . VISIONNEUSE
   --------------------------------------------------------------------------
   Fabriquée par `kineback.js`, jamais présente dans le document servi : sans
   script, elle n'existe pas et la galerie reste simplement statique.
   ========================================================================== */
.elx-page .kb-lb{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,56px);
  background:rgba(6,36,27,.94);
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease-out),visibility 0s linear .3s;
}
.elx-page .kb-lb.is-open{ opacity:1; visibility:visible; transition:opacity .3s var(--ease-out),visibility 0s; }
.elx-page .kb-lb__img{
  max-width:min(92vw,1000px); max-height:86vh;
  width:auto; height:auto; object-fit:contain; border-radius:var(--r);
}
.elx-page .kb-lb__cap{
  position:absolute; inset-inline:0; bottom:clamp(14px,3vw,28px);
  text-align:center; font-size:var(--fs-micro); color:var(--kb-on-dark-dim);
}
.elx-page .kb-lb__b{
  position:absolute; display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:rgba(241,237,227,.1); border:1px solid rgba(241,237,227,.2);
  color:var(--kb-on-dark);
  transition:background var(--t-fast) var(--ease);
}
.elx-page .kb-lb__b:hover{ background:rgba(241,237,227,.2); }
.elx-page .kb-lb__b svg{ width:20px; height:20px; }
.elx-page .kb-lb__x{ top:clamp(14px,3vw,28px); inset-inline-end:clamp(14px,3vw,28px); }
.elx-page .kb-lb__prev{ top:50%; margin-top:-23px; inset-inline-start:clamp(10px,2.4vw,28px); }
.elx-page .kb-lb__next{ top:50%; margin-top:-23px; inset-inline-end:clamp(10px,2.4vw,28px); }
.elx-page .kb-lb__prev svg{ transform:scaleX(-1); }
.elx-page[dir="rtl"] .kb-lb__prev svg{ transform:none; }
.elx-page[dir="rtl"] .kb-lb__next svg{ transform:scaleX(-1); }
body.kb-lb-open{ overflow:hidden; }

/* ==========================================================================
   20 . RACCORDS
   ========================================================================== */
/* La fiche vit dans le <main> du thème : on neutralise toute largeur héritée. */
.elx-page .elx-main{ display:block; }
/* Le pied de page suit immédiatement la dernière section. */
.elx-page > :last-child{ margin-bottom:0; }