/* ==========================================================================
   forcevital.eu — feuille de style unique
   Theme : graphite froid, accent vert "verifie", bouton ambre.
   Volontairement different de loewenvital.de (rouge) et telehealthranks (bleu).
   ========================================================================== */

@font-face {
  font-family: "Serif FV";
  src: url("/assets/fonts/source-serif.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Lettres polonaises (03/11/2026) : la police du site ne les a pas, elles tombaient sur
   Georgia au milieu des mots. Sous-ensemble de Source Serif 4 (16 lettres, 6 Ko), que le
   navigateur ne telecharge que si une page en contient. */
@font-face {
  font-family: "Serif FV";
  src: url("/assets/fonts/source-serif-pl.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C;
}
/* Lettres hebraiques (09/11/2026) : Source Serif n'en a aucune. Frank Ruhl Libre (SIL OFL),
   sous-ensemble hebreu de Fontsource, variable de 300 a 900, 19 Ko, telecharge seulement par
   une page qui contient de l'hebreu. Le texte courant reste en police systeme (Segoe UI,
   Arial, Noto Sans ont l'hebreu). */
@font-face {
  font-family: "Serif FV";
  src: url("/assets/fonts/frank-ruhl-libre-he.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0590-05FF, U+20AA, U+FB1D-FB4F;
}

/* Hebreu, refait le 11/11/2026 : sur Windows, les titres en Frank Ruhl, les mots latins en
   Source Serif et le texte en Segoe UI donnaient trois polices dans une meme ligne, et le
   signe du shekel (U+20AA) manquait a Segoe UI : un carre a la place de chaque prix.
   Heebo (SIL OFL, Fontsource 5.2.8, variable de 100 a 900) sert desormais TOUT le texte des
   pages en hebreu, titres compris (bloc [dir="rtl"] en fin de feuille). Licence dans
   recherche/fonts-he/LICENSE-heebo.txt.
   "Hebreu FV" (le seul sous-ensemble hebreu, 12 Ko) passe en tete de --sans partout : une page
   gauche-droite qui cite un prix en shekels (Virdexis EN) l'affiche aussi, et ne telecharge
   rien si elle n'a ni hebreu ni shekel. */
@font-face {
  font-family: "Hebreu FV";
  src: url("/assets/fonts/heebo-he.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Heebo FV";
  src: url("/assets/fonts/heebo-he.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Heebo FV";
  src: url("/assets/fonts/heebo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
                 U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

:root {
  /* Sans cette ligne, les controles natifs (select, autofill, scrollbar) sont
     rendus en theme clair et deviennent illisibles sur fond sombre. */
  color-scheme: dark;

  --bg:        #0c1013;
  --bg-2:      #0f1519;
  --surface:   #151d21;
  --surface-2: #1b252a;
  --line:      #26333a;
  --line-soft: #1e2a30;

  --text:   #e9f0f2;
  --text-2: #a3b4bb;
  --text-3: #798d95;

  --accent:     #ff5fa2;
  --accent-hi:  #ff8cc0;
  --accent-dim: rgba(255, 95, 162, .11);

  --cta:     #ff8b2c;
  --cta-hi:  #ffa757;
  --cta-dim: rgba(255, 139, 44, .14);

  --warn:     #ff6b5e;
  --warn-dim: rgba(255, 107, 94, .11);

  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 20px;

  --shadow:    0 16px 38px -20px rgba(0, 0, 0, .9);
  --shadow-lg: 0 40px 80px -34px rgba(0, 0, 0, .95);

  --head-h: 62px;
  --maxw:   920px;
  /* colonne unique du corps : une largeur en px, jamais en ch. Un ch depend de la
     police de l'element, donc un tableau, un encart et un paragraphe tombaient a
     trois endroits differents et le bord droit sautait de bloc en bloc. */
  --col:    880px;
  --texte:  none;

  --sans: "Hebreu FV", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --serif: "Serif FV", Georgia, "Iowan Old Style", "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* laisse la place a la barre fixe du bas */
  padding-bottom: 92px;
}

img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.012em;
  margin: 0 0 .55em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.95rem, 1.3rem + 2.1vw, 2.72rem); }
h2 { font-size: clamp(1.42rem, 1.1rem + 1.35vw, 2.02rem); margin-top: 2.1em; }
h3 { font-size: clamp(1.12rem, 1.02rem + .42vw, 1.32rem); margin-top: 1.7em; }
h2 + h3 { margin-top: 1.1em; }

p  { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.3em; padding-left: 1.25em; }
li { margin-bottom: .45em; }
strong, b { font-weight: 650; color: #fff; }
small { font-size: .84rem; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #05130d; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 650;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* ---------------------------------------------------------------- en-tete */

.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(12, 16, 19, .88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.head-in {
  display: flex; align-items: center; gap: 14px;
  min-height: var(--head-h);
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 650; font-size: 1.03rem; letter-spacing: -.015em;
  text-decoration: none; color: var(--text); flex: 0 0 auto;
}
.brand .mark { width: 26px; height: 26px; flex: 0 0 auto; }
.brand b { color: var(--text-3); font-weight: 650; }

.nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.nav a {
  display: inline-block; padding: .45rem .62rem; border-radius: var(--radius-sm);
  color: var(--text-2); text-decoration: none; font-size: .935rem; font-weight: 520;
  transition: color .15s, background .15s;
}
.nav a:hover { color: var(--text); background: var(--surface); }
.nav a[aria-current] { color: var(--accent); }

.lang {
  flex: 0 0 auto; margin-left: 6px;
  padding: .4rem .72rem; border: 1px solid var(--line); border-radius: 999px;
  color: var(--text-2); text-decoration: none; font-size: .87rem; font-weight: 550;
  white-space: nowrap; transition: border-color .15s, color .15s;
}
.lang:hover { color: var(--text); border-color: var(--accent); }

.nav-btn {
  display: none; margin-left: auto; align-items: center; gap: 8px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .5rem .8rem;
  font: inherit; font-size: .9rem; font-weight: 550; cursor: pointer;
}
.nav-btn-l, .nav-btn-l::before, .nav-btn-l::after {
  display: block; width: 15px; height: 1.6px; background: currentColor; content: "";
  position: relative;
}
.nav-btn-l::before { top: -5px; position: absolute; }
.nav-btn-l::after  { top: 5px;  position: absolute; }

@media (max-width: 999px) {
  .nav-btn { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: var(--head-h);
    flex-direction: column; gap: 0; padding: 8px 20px 14px;
    background: var(--bg-2); border-bottom: 1px solid var(--line);
  }
  .nav.est-ouvert { display: flex; }
  .nav a { padding: .68rem .2rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .lang { margin-left: 0; }
}

/* Sept entrees de menu dans un wrap de 1000 px : sans resserrement, la derniere passe
   a la ligne. La largeur du wrap ne bouge plus au-dela, donc la regle ne s'arrete pas. */
@media (min-width: 1000px) {
  .nav { gap: 1px; }
  .nav a { padding: .45rem .35rem; font-size: .88rem; }
  .lang { margin-left: 4px; padding: .4rem .62rem; }
}

/* Sous 420 px, marque + bouton menu + bascule de langue ne tiennent plus sur une ligne :
   le mot "Menu" disparait, l'icone et l'aria-label suffisent. La bascule, elle, reste
   visible, c'est le seul acces a l'autre langue. */
@media (max-width: 420px) {
  .head-in { gap: 10px; }
  .nav-btn-t { display: none; }
  .nav-btn { padding: .5rem .7rem; }
  .lang { padding: .4rem .6rem; font-size: .84rem; }
  .brand { font-size: .97rem; gap: 7px; }
}

/* ---------------------------------------------------------------- entete de page */

.fil {
  max-width: var(--maxw); margin: 18px auto 0; padding-inline: 20px;
  font-size: .84rem; color: var(--text-3);
}
.fil a { color: var(--text-2); text-decoration: none; }
.fil a:hover { color: var(--accent); }
.fil span { margin-inline: .45em; }
.fil span:last-child { color: var(--text-3); margin-right: 0; }

/* .page reunit l'en-tete, la carte laterale et le corps. En dessous de 901 px elle
   reste un simple empilement, dans l'ordre du DOM : texte, carte, corps. C'est la
   mise en page mobile, et elle ne doit pas bouger. */
.page { padding: 30px 20px 60px; }
.page > .carte { margin-top: 26px; }
.page > .corps { padding-top: 32px; }
.page:not(.a-carte) > .corps { padding-top: 20px; }

/* A partir de 901 px, la carte remonte a droite du titre et le corps passe dessous,
   sur toute la largeur : c'est la mise en page desktop d'origine. */
@media (min-width: 901px) {
  .page.a-carte {
    display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    column-gap: 30px; align-items: start;
  }
  .page.a-carte > .entete-txt { grid-column: 1; grid-row: 1; }
  .page.a-carte > .carte { grid-column: 2; grid-row: 1; margin-top: 0; }
  .page.a-carte > .corps { grid-column: 1 / -1; grid-row: 2; }
}

/* Au-dela de 1240 px il y a la place pour deux vraies colonnes : le texte garde sa
   largeur de lecture, la carte descend le long de la page en position sticky, et
   l'ensemble occupe l'ecran au lieu de laisser 500 px de vide de chaque cote.
   Le CTA de la carte reste ainsi visible pendant toute la lecture. */
@media (min-width: 1240px) {
  :root { --maxw: 1300px; }
  .page.a-carte {
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: 44px;
  }
  .page.a-carte > .carte {
    grid-row: 1 / span 2;
    position: sticky; top: calc(var(--head-h) + 18px);
  }
  .page.a-carte > .corps { grid-column: 1; }
  /* les blocs remplissent la colonne, qui est deja bornee par la grille : sans ca
     ils resteraient a --col et le bord droit sauterait de nouveau. */
  .page.a-carte .corps > * { max-width: none; }

  /* Les pages legales n'ont pas de carte : sans colonne de droite a remplir, elles
     se centrent au lieu de laisser 380 px de vide sur leur droite. */
  .page:not(.a-carte) { max-width: calc(var(--col) + 40px); }
}

.eyebrow {
  margin: 0 0 .7em; font-size: .79rem; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.lead {
  font-size: 1.12rem; color: var(--text-2); max-width: 62ch;
  margin-bottom: 1.1em;
}
.signature {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: .875rem; color: var(--text-3); margin: 0;
}
.signature a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid var(--line); }
.signature a:hover { color: var(--accent); border-color: var(--accent); }
.signature .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); }

/* ---------------------------------------------------------------- corps */

.corps { min-width: 0; }
.corps > * { max-width: var(--col); }

.corps a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(53,211,154,.35); }
.corps a:hover { color: var(--accent-hi); border-color: var(--accent-hi); }

/* ---------------------------------------------------------------- boutons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 1.02rem 1.9rem; border: 0; border-radius: var(--radius);
  font: inherit; font-size: 1.03rem; font-weight: 700; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease;
}
.btn-cta {
  background: linear-gradient(180deg, var(--cta-hi), var(--cta));
  color: #2a1400;
  box-shadow: 0 0 0 1px rgba(255,167,87,.35), 0 12px 30px -12px rgba(255,139,44,.75);
  animation: halo 2.6s ease-in-out infinite;
}
.btn-cta:hover { transform: translateY(-2px); animation: none;
  box-shadow: 0 0 0 1px rgba(255,167,87,.6), 0 18px 38px -12px rgba(255,139,44,.85); }
.btn-cta:active { transform: translateY(0); }
@keyframes halo {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,167,87,.35), 0 12px 30px -12px rgba(255,139,44,.7); }
  50%      { box-shadow: 0 0 0 1px rgba(255,167,87,.55), 0 12px 40px -8px rgba(255,139,44,1); }
}
.btn-plein { width: 100%; }
.btn-sec {
  background: transparent; color: var(--text); border: 1px solid var(--line);
  font-weight: 600; font-size: .97rem; padding: .82rem 1.4rem;
}
.btn-sec:hover { border-color: var(--accent); color: var(--accent); }

.aff-note {
  display: block; margin-top: .6rem; font-size: .795rem; color: var(--text-3);
  line-height: 1.45;
}
.aff-note::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cta); margin-right: .5em; vertical-align: middle;
}

/* ---------------------------------------------------------------- carte de controle */

.carte {
  background: linear-gradient(168deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.carte-tete {
  padding: 16px 20px 14px; border-bottom: 1px solid var(--line-soft);
  background: rgba(53, 211, 154, .05);
}
.carte-tete p { margin: 0; }
.carte-titre { font-family: var(--serif); font-size: 1.16rem; font-weight: 600; }
.carte-sous { font-size: .84rem; color: var(--text-3); margin-top: .25em !important; }
.carte-corps { padding: 16px 20px 20px; }

.controles { list-style: none; margin: 0 0 18px; padding: 0; font-size: .935rem; }
.controles li {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: baseline;
  padding: .52rem 0; border-bottom: 1px solid var(--line-soft); margin: 0;
}
.controles li:last-child { border-bottom: 0; }
.controles .ok, .controles .ko, .controles .neutre { font-weight: 700; line-height: 1; }
.controles .ok { color: var(--accent); }
.controles .ko { color: var(--warn); }
.controles .neutre { color: var(--text-3); }
.controles .val { color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; }
.controles .lab { color: var(--text); }

/* ---------------------------------------------------------------- blocs editoriaux */

.essentiel {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 20px 22px 6px; margin: 0 0 2rem;
}
.essentiel-titre {
  font-family: var(--serif); font-size: 1.1rem; font-weight: 600;
  margin: 0 0 .7em; color: #fff;
}
.essentiel ul { list-style: none; padding: 0; margin-bottom: 1rem; }
.essentiel li { position: relative; padding-left: 1.6em; margin-bottom: .6em; }
.essentiel li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--accent);
}

.encart {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px 4px; margin: 1.8rem 0;
}
.encart p:last-child { margin-bottom: 1.1em; }
.encart-titre { font-weight: 650; color: #fff; margin-bottom: .4em; display: block; }

.avert {
  background: var(--warn-dim); border: 1px solid rgba(255,107,94,.3);
  border-radius: var(--radius); padding: 18px 20px 4px; margin: 1.8rem 0;
}
.avert .encart-titre { color: #ffb3ac; }

.cta-bloc {
  background: linear-gradient(150deg, rgba(255,139,44,.12), var(--surface) 65%);
  border: 1px solid rgba(255,139,44,.28); border-radius: var(--radius-lg);
  padding: 24px 24px 22px; margin: 2.4rem 0; text-align: center;
}
.cta-bloc p { margin-bottom: 1.1em; color: var(--text-2); }
.cta-bloc .cta-titre {
  font-family: var(--serif); font-size: 1.28rem; font-weight: 600; color: #fff;
  margin-bottom: .5em;
}

.chiffres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px; margin: 1.9rem 0;
}
.tuile {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 16px;
}
.tuile-val {
  display: block; font-family: var(--serif); font-size: 1.72rem; font-weight: 700;
  line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums;
}
.tuile-val.attention { color: var(--cta); }
.tuile-val.rouge { color: var(--warn); }
.tuile-lab { display: block; font-size: .855rem; color: var(--text-2); margin-top: .35em; }

.ouinon { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 1.9rem 0; }
@media (max-width: 640px) { .ouinon { grid-template-columns: 1fr; } }
.ouinon-c { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 4px; }
.ouinon-c.oui { background: var(--accent-dim); border-color: rgba(53,211,154,.28); }
.ouinon-c.non { background: var(--warn-dim); border-color: rgba(255,107,94,.26); }
.ouinon-t { font-weight: 700; margin-bottom: .6em; display: block; }
.ouinon-c.oui .ouinon-t { color: var(--accent-hi); }
.ouinon-c.non .ouinon-t { color: #ffb3ac; }
.ouinon-c ul { list-style: none; padding: 0; margin-bottom: 1rem; }
.ouinon-c li { padding-left: 1.4em; position: relative; font-size: .955rem; }
.ouinon-c.oui li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.ouinon-c.non li::before { content: "\2717"; position: absolute; left: 0; color: var(--warn); font-weight: 700; }

.barres { margin: 1.9rem 0; }
.barre { margin-bottom: 14px; }
.barre-tete {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  font-size: .92rem; margin-bottom: .38em;
}
.barre-tete b { color: var(--text); font-weight: 600; }
.barre-tete span { color: var(--text-2); font-variant-numeric: tabular-nums; }
.barre-piste { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.barre-jauge { height: 100%; border-radius: 999px; background: var(--text-3); }
.barre-jauge.haut { background: linear-gradient(90deg, #ff8b6b, var(--warn)); }
.barre-jauge.moyen { background: linear-gradient(90deg, #ffc46b, var(--cta)); }
.barre-jauge.bas { background: linear-gradient(90deg, #7ce8bd, var(--accent)); }

.tableau { overflow-x: auto; margin: 1.9rem 0; border: 1px solid var(--line); border-radius: var(--radius); }
.tableau table { width: 100%; border-collapse: collapse; font-size: .935rem; min-width: 520px; }
.tableau th, .tableau td { padding: .78rem .95rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
.tableau thead th {
  background: var(--surface-2); font-size: .81rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-2); font-weight: 650; white-space: nowrap;
}
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover { background: rgba(255,255,255,.018); }
.tableau td b { color: #fff; }
.tableau .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau .oui { color: var(--accent); font-weight: 700; }
.tableau .non { color: var(--warn); font-weight: 700; }

.citation {
  margin: 2rem 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent);
  font-family: var(--serif); font-size: 1.22rem; line-height: 1.5; color: #fff;
}
.citation cite { display: block; margin-top: .6em; font: inherit; font-size: .84rem;
  font-style: normal; color: var(--text-3); font-family: var(--sans); }

.source { font-size: .845rem; color: var(--text-3); margin-top: -.6em; }
.source a { color: var(--text-2); }

/* FAQ */
.faq { margin: 2rem 0; }
.q {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); margin-bottom: 10px; overflow: hidden;
}
.q > summary {
  cursor: pointer; list-style: none; padding: .95rem 3rem .95rem 1.1rem;
  font-weight: 600; color: var(--text); position: relative;
}
.q > summary::-webkit-details-marker { display: none; }
.q > summary::after {
  content: ""; position: absolute; right: 1.2rem; top: 1.35rem;
  width: 9px; height: 9px; border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent); transform: rotate(45deg);
  transition: transform .18s ease;
}
.q[open] > summary::after { transform: rotate(-135deg); top: 1.55rem; }
.q > div { padding: 0 1.1rem .3rem; color: var(--text-2); }
.q > div > p:first-child { margin-top: 0; }

.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 1.9rem 0; }
@media (max-width: 700px) { .grille-2 { grid-template-columns: 1fr; } }

.adresse-img {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); padding: 6px;
  /* min() et pas 330px seul : sur un ecran de 360 px la colonne de texte fait 305 px,
     et un max-width fixe ecrasait le max-width: 100% global, donc debordait. */
  max-width: min(330px, 100%);
}

/* liste de liens de page (sommaire du hub) */
.pistes { list-style: none; padding: 0; margin: 1.6rem 0; }
.pistes li { margin-bottom: 10px; }
.pistes a {
  display: block; padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s;
}
.pistes a:hover { border-color: var(--accent); transform: translateX(3px); }
.pistes b { display: block; font-family: var(--serif); font-size: 1.09rem; font-weight: 600; margin-bottom: .18em; }
.pistes span { display: block; font-size: .92rem; color: var(--text-2); }

/* ---------------------------------------------------------------- pied */

.pied {
  border-top: 1px solid var(--line); background: var(--bg-2);
  padding: 42px 0 34px; margin-top: 40px; font-size: .92rem; color: var(--text-2);
}
.pied-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; }
@media (max-width: 760px) { .pied-grille { grid-template-columns: 1fr; gap: 22px; } }
.pied-nom { font-family: var(--serif); font-size: 1.1rem; color: #fff; font-weight: 600; margin-bottom: .4em; }
.pied-signature { color: var(--text-3); font-size: .88rem; }
.pied-liens p { margin-bottom: .7em; }
.pied-liens a { color: var(--text-2); text-decoration: none; margin-right: 1.1em;
  border-bottom: 1px solid transparent; display: inline-block; }
.pied-liens a:hover { color: var(--accent); border-color: var(--accent); }
.pied-legal a { color: var(--text-3); font-size: .87rem; }
.pied-lang { font-weight: 600; }
.pied-aff, .pied-note {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-size: .845rem; color: var(--text-3); max-width: 88ch;
}
.pied-note { margin-top: 10px; padding-top: 0; border: 0; }
.pied-copy { margin: 18px 0 0; font-size: .82rem; color: var(--text-3); }

/* ---------------------------------------------------------------- barre fixe */

.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: rgba(15, 21, 25, .96);
  backdrop-filter: saturate(150%) blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -14px 34px -22px rgba(0, 0, 0, 1);
}
.sticky[hidden] { display: none; }
.sticky-in {
  display: flex; align-items: center; gap: 16px;
  padding-block: 11px;
}
.sticky-txt { display: flex; flex-direction: column; min-width: 0; }
.sticky-txt b { font-family: var(--serif); font-size: 1.06rem; color: #fff; }
.sticky-txt span {
  font-size: .84rem; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sticky .btn { margin-left: auto; flex: 0 0 auto; padding: .85rem 1.6rem; font-size: 1rem; }

/* Au-dessus de 720 px, le bouton etait colle a droite par le margin-left: auto.
   La grille 1fr / auto / 1fr le place au milieu exact de la barre, quelle que soit
   la longueur du texte a gauche, la troisieme colonne servant de contrepoids.
   En dessous de 720 px la barre garde sa mise en page mobile, deja centree. */
@media (min-width: 721px) {
  .sticky-in {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; column-gap: 16px;
  }
  .sticky-txt { grid-column: 1; }
  .sticky .btn { grid-column: 2; margin-left: 0; }
  .sticky small { grid-column: 3; justify-self: end; }
}
.sticky small { flex: 0 0 auto; max-width: 15ch; font-size: .72rem; color: var(--text-3); line-height: 1.3; }

@media (max-width: 720px) {
  body { padding-bottom: 130px; }   /* hauteur reelle de la barre fixe mesuree a 126 px */
  .sticky-in { flex-wrap: wrap; gap: 8px 12px; padding-block: 9px 10px; }
  .sticky-txt { flex: 1 1 100%; text-align: center; align-items: center; }
  .sticky-txt b { font-size: .98rem; }
  .sticky-txt span { font-size: .78rem; max-width: 100%; }
  .sticky .btn { margin-inline: auto; padding: .78rem 1.6rem; font-size: .95rem; }
  .sticky small { flex: 1 0 100%; max-width: none; text-align: left; }
}

/* ---------------------------------------------------------------- page d'entree */

.entree {
  min-height: 100vh; display: flex; flex-direction: column;
  justify-content: center; padding: 48px 20px 60px;
}
body.page-entree { padding-bottom: 0; }
.entree-in { width: 100%; max-width: 680px; margin-inline: auto; }
.entree .mark { width: 44px; height: 44px; margin-bottom: 18px; }
.entree h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); margin-bottom: .5em; }
.entree p { color: var(--text-2); max-width: 54ch; }
.acces { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; }
@media (max-width: 560px) { .acces { grid-template-columns: 1fr; } }
.acces a, .acces div {
  display: block; padding: 20px 22px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); text-decoration: none;
  color: var(--text); transition: border-color .15s, transform .15s;
}
.acces a:hover { border-color: var(--accent); transform: translateY(-2px); }
.acces b { display: block; font-family: var(--serif); font-size: 1.24rem; font-weight: 600; }
.acces span { display: block; font-size: .9rem; color: var(--text-2); margin-top: .25em; }
.acces div { opacity: .55; }
.entree-pied { margin-top: 40px; font-size: .85rem; color: var(--text-3); }
.entree-pied a { color: var(--text-2); }

/* ---------------------------------------------------------------- formulaire */

.formulaire { margin: 1.6rem 0 2rem; max-width: 34rem; }
.champ { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.15rem; }
.champ label { font-weight: 600; font-size: .95rem; color: var(--text); }
.champ .aide { font-size: .82rem; color: var(--text-3); }
.champ input, .champ select, .champ textarea {
  font: inherit; font-size: 1rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .68rem .8rem; width: 100%;
}
.champ textarea { resize: vertical; min-height: 8rem; line-height: 1.55; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.formulaire .btn-sec { padding: .9rem 1.8rem; font-size: 1rem; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .89em; background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: 5px; padding: .12em .4em; color: var(--accent-hi);
}

/* ---------------------------------------------------------------- encart verdict */

.verdict {
  background: linear-gradient(160deg, rgba(53,211,154,.10), var(--surface) 62%);
  border: 1px solid rgba(53,211,154,.3); border-radius: var(--radius-lg);
  padding: 24px 26px; margin: 0 0 2rem; box-shadow: var(--shadow);
}
.verdict-tete { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.note {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 92px; height: 92px; flex: 0 0 auto; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(53,211,154,.22), transparent 70%);
  border: 2px solid var(--accent);
}
.note b { font-family: var(--serif); font-size: 1.92rem; line-height: 1; color: var(--accent); }
.note span { font-size: .72rem; color: var(--text-2); margin-top: .25em; letter-spacing: .04em; }
.verdict-titre { flex: 1 1 220px; min-width: 0; }
.verdict-titre p { margin: 0; }
.etoiles { color: var(--cta); font-size: 1.32rem; letter-spacing: .12em; line-height: 1.2; }
.verdict-lab {
  font-size: .78rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); margin-top: .35em !important;
}
.verdict p { color: var(--text-2); }
.verdict p b, .verdict strong { color: #fff; }
.verdict .btn { margin-top: .4rem; }
.verdict-sous { font-size: .85rem; color: var(--text-3); margin: .8rem 0 0 !important; }

.avantages { list-style: none; padding: 0; margin: 0 0 1.3rem; }
.avantages li { position: relative; padding-left: 1.75em; margin-bottom: .6em; }
.avantages li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 700;
}

.offre-prix {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px; margin: 1.9rem 0;
}
.lot {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 20px 22px; text-align: center;
  display: flex; flex-direction: column;
}
.lot.est-meilleur { border-color: var(--cta); background: linear-gradient(170deg, rgba(255,139,44,.1), var(--surface) 60%); }
.lot-drapeau {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--cta); color: #2a1400; font-size: .72rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; padding: .22rem .7rem; border-radius: 999px;
  white-space: nowrap;
}
.lot-nom { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: #fff; margin-bottom: .15em; }
.lot-duree { font-size: .85rem; color: var(--text-3); margin-bottom: .9em; }
.lot-unite { font-family: var(--serif); font-size: 2.15rem; font-weight: 700; color: var(--accent); line-height: 1; }
.lot.est-meilleur .lot-unite { color: var(--cta); }
.lot-unite small { font-size: .95rem; font-weight: 400; color: var(--text-2); font-family: var(--sans); }
.lot-total { font-size: .9rem; color: var(--text-2); margin: .5em 0 .2em; }
.lot-port { font-size: .84rem; color: var(--accent); margin-bottom: 1.1em; }
.lot-port.payant { color: var(--text-3); }
.lot .btn { margin-top: auto; width: 100%; padding: .82rem 1rem; font-size: .96rem; }

/* Quatre formats (page Averos, 24/09/2026) : en auto-fit, la quatrieme carte
   tombait seule sur une deuxieme ligne. On force deux colonnes, une seule sous
   560 px, ou deux cartes cote a cote ne laissent plus la place au prix. */
.offre-prix.quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
.offre-prix.quatre .lot.est-meilleur .lot-img { max-width: 208px; }
@media (max-width: 560px) { .offre-prix.quatre { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- video

   Facade : la miniature est servie par ce site, l'iframe YouTube n'arrive qu'au clic.
   Le ratio est fige en CSS pour que le bloc ne provoque aucun decalage de mise en page
   pendant le chargement, et la meme regle s'applique a l'iframe substituee. */

.video-bloc {
  display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: 26px; align-items: start;
  margin: .6rem 0 2.4rem;
}

.video-cadre {
  position: relative; aspect-ratio: 16 / 9;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--surface);
  box-shadow: var(--shadow);
}
.video-cadre iframe, .video-cadre img {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  object-fit: cover;
}

.video-face {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer; display: block;
}
.video-face::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.55));
  transition: opacity .2s;
}
.video-face:hover::after { opacity: .55; }
.video-face:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 88px; z-index: 2; display: block; transition: transform .18s;
}
.video-play svg { width: 100%; height: auto; display: block; }
/* Rouge YouTube au repos comme au survol (demande de Daniele du 16/10), fleche blanche.
   Avant : gris fonce au repos, orange CTA au survol. */
.play-fond { fill: #ff0000; }
.play-fleche { fill: #fff; }
.video-play svg { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); }
.video-face:hover .video-play { transform: translate(-50%, -50%) scale(1.07); }
.video-face:hover .play-fond { fill: #ff2626; }

.video-duree {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  background: rgba(8, 11, 13, .85); color: #fff;
  font-size: .8rem; font-variant-numeric: tabular-nums;
  padding: .16em .5em; border-radius: 5px; line-height: 1.5;
}

/* Sans JS la facade ne peut rien charger : ce lien passe au-dessus d'elle. */
.video-noscript {
  position: absolute; inset: auto 0 0 0; z-index: 3; text-align: center;
  background: rgba(8, 11, 13, .9); color: #fff; padding: .7em 1em;
  font-size: .92rem; font-weight: 600; text-decoration: none;
}

.video-cote { min-width: 0; }
.video-eyebrow {
  margin: 0 0 .35em; font-size: .74rem; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.video-titre {
  font-family: var(--serif); font-size: 1.16rem; font-weight: 600;
  color: #fff; margin: 0 0 .9em; line-height: 1.4;
}

.video-chap-t {
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 .5em;
}
.video-chap ol {
  list-style: none; margin: 0; padding: 0 6px 26px 0;
  max-height: 300px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  /* Le fondu signale qu'il reste des chapitres sous la coupe. Le padding-bas de 26px
     fait qu'en fin de defilement le fondu tombe sur du vide, jamais sur un libelle. */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent);
}
.video-chap li { margin: 0; }
.corps .video-chap a {
  display: flex; gap: .7em; align-items: baseline;
  padding: .3em .5em; border-radius: var(--radius-sm);
  color: var(--text-2); border-bottom: 0; text-decoration: none;
  font-size: .93rem; line-height: 1.45;
}
.corps .video-chap a:hover { background: var(--surface); color: var(--text); }
.chap-t {
  flex: 0 0 auto; font-variant-numeric: tabular-nums;
  color: var(--accent); font-size: .86rem; font-weight: 600;
}
.video-chap a:hover .chap-t { color: var(--accent-hi); }
.chap-l { min-width: 0; }

/* Sans chapitres, la colonne de droite serait presque vide : le bloc passe sur une
   seule colonne et la video reprend la largeur de la colonne de texte. */
.video-bloc.sans-chap {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--col); gap: 16px;
}
.video-bloc.sans-chap .video-titre { margin-bottom: .5em; }

@media (max-width: 900px) {
  .video-bloc { grid-template-columns: 1fr; gap: 18px; margin-bottom: 2rem; }
  .video-play { width: 68px; }
  .video-chap ol { max-height: 232px; }
}

/* ---------------------------------------------------------------- figures */

figure { margin: 1.9rem 0; }
figure img {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
figure figcaption { margin-top: .7em; }
/* .source remonte de .6em pour se coller sous un tableau ou un bloc ; dans une
   figure cette marge negative faisait chevaucher la legende sur le bas de l'image,
   tres visible en mobile ou l'etiquette est basse. */
figure figcaption.source { margin-top: .7em; }
.corps > figure { max-width: none; }

/* Les boutons places dans le corps ne doivent pas heriter du style des liens
   de contenu (couleur d'accent + souligne), qui les rendait illisibles. */
.corps a.btn { border-bottom: 0; }
.corps a.btn-cta { color: #2a1400; }
.corps a.btn-sec { color: var(--text); }
.corps a.btn-sec:hover { color: var(--accent); }
.verdict a.btn, .cta-bloc a.btn, .lot a.btn { text-decoration: none; }

/* ---------------------------------------------------------------- visuels produit

   Les rendus du flacon sont fournis sur fond transparent : aucune bordure ni
   fond de carte autour, sinon le detourage ne sert a rien. L'ombre portee est
   posee en CSS, elle suit la silhouette grace a drop-shadow. */

.lot-img {
  display: block; width: 100%; max-width: 208px; height: auto;
  margin: -2px auto .55rem;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55));
}
.lot.est-meilleur .lot-img { max-width: 230px; }

/* Coupure de lecture : le flacon a cote d'une phrase courte, entre deux
   paragraphes. Sur mobile la carte passe en colonne, image en premier. */
.flacon-bloc {
  display: grid; grid-template-columns: 148px minmax(0, 1fr);
  gap: 22px; align-items: center;
  margin: 2rem 0; padding: 20px 24px;
  background: linear-gradient(150deg, var(--surface-2), var(--surface) 62%);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.flacon-bloc img {
  width: 100%; height: auto; border: 0; border-radius: 0; background: none;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .6));
}
.flacon-bloc figcaption { margin: 0; font-size: .96rem; color: var(--text-2); }
.flacon-bloc .flacon-titre {
  display: block; font-family: var(--serif); font-size: 1.16rem; font-weight: 600;
  color: var(--text); margin-bottom: .4em;
}
.flacon-bloc p { margin: 0; }
.flacon-bloc p + p { margin-top: .55em; }

/* Trois formats cote a cote, hors carte de prix : sert de rappel visuel sur la
   page pilier et la page d'achat. */
.packs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; margin: 1.9rem 0;
}
.packs figure {
  margin: 0; padding: 14px 12px 16px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.packs img {
  width: 100%; height: auto; border: 0; border-radius: 0; background: none;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .5));
}
.packs figcaption { margin-top: .5em; font-size: .88rem; color: var(--text-2); }
.packs b { display: block; color: var(--text); font-size: .98rem; }

@media (max-width: 640px) {
  .flacon-bloc { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .flacon-bloc img { max-width: 148px; margin: 0 auto; }
  .packs { grid-template-columns: 1fr; gap: 12px; }
  .packs img { max-width: 240px; margin: 0 auto; }
}

/* ------------------------------------------------------- grille du sommaire (blog)

   Cartes generees par build.py a la place du marqueur <!--ARTICLES-->. La miniature
   n'est posee que sur les pages qui portent une video : sa taille est connue, donc
   le width/height exige par les controles du build est sur. Les autres tombent sur
   .art.sans-img, une carte de texte, plutot que sur une image approximative. */

.articles {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; margin: 1.9rem 0 2.2rem;
}
.art {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
.art:hover { border-color: var(--accent); transform: translateY(-2px); }
.corps .art a {
  display: flex; flex-direction: column; height: 100%;
  color: inherit; text-decoration: none; border-bottom: 0;
}
.art-media { position: relative; display: block; background: var(--surface-2); }
.art-img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; border-bottom: 1px solid var(--line);
}
.art-duree {
  position: absolute; right: 8px; bottom: 10px;
  padding: .12rem .4rem; border-radius: 5px;
  background: rgba(0, 0, 0, .82); color: #fff;
  font-size: .76rem; font-variant-numeric: tabular-nums;
}
.art-txt { display: flex; flex-direction: column; flex: 1 1 auto; padding: 15px 17px 17px; }
.art-eyebrow {
  display: block; font-size: .73rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .45em;
}
.art-titre {
  margin: 0 0 .45em; font-family: var(--serif); font-size: 1.12rem;
  font-weight: 600; line-height: 1.32; color: #fff; text-wrap: balance;
}
.art:hover .art-titre { color: var(--accent-hi); }
.art-desc { display: block; font-size: .91rem; line-height: 1.55; color: var(--text-2); }
.art-date {
  display: block; margin-top: auto; padding-top: .9em;
  font-size: .8rem; color: var(--text-3);
}
.art.sans-img .art-txt { padding-top: 17px; }

@media (max-width: 700px) {
  .articles { grid-template-columns: 1fr; gap: 14px; }
}

/* Carte laterale a deux offres (pages Perforan, 30/09/2026) : la ligne qui suit le
   premier bouton ne doit pas coller a lui. Aucune autre carte n a de texte apres son bouton. */
.carte-corps .btn + p { margin-top: 1.1rem; }

/* Bouton plein des autres produits du portefeuille (Perforan, Vigortrix, les produits du
   comparatif), pose le 30/09/2026 : Daniele touche une commission sur chacun, donc un vrai
   bouton, pas un lien texte ni un simple contour. Vert du theme et sans halo : l'orange
   pulsant reste reserve au produit mis en avant sur la page. */
.btn-alt {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: #04261b;
  box-shadow: 0 0 0 1px rgba(98,229,181,.35), 0 10px 26px -12px rgba(53,211,154,.7);
}
.btn-alt:hover { transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(98,229,181,.6), 0 16px 32px -12px rgba(53,211,154,.85); }
.btn-alt:active { transform: translateY(0); }
.corps a.btn-alt, .corps a.btn-alt:hover { color: #04261b; }

/* Deux boutons cote a cote : le produit mis en avant, puis l'autre. Sous 560 px ils passent
   l'un sous l'autre, en pleine largeur. */
.btn-duo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.cta-bloc .btn-duo { justify-content: center; }
.verdict .btn-duo { margin-top: .4rem; }
.verdict .btn-duo .btn { margin-top: 0; }
@media (max-width: 560px) { .btn-duo .btn { flex: 1 1 100%; } }

/* Barre fixe a deux boutons (champs go2 / cta2 du front matter). */
.sticky-btns { display: flex; gap: 10px; flex: 0 0 auto; margin-left: auto; }
.sticky-btns .btn { margin: 0; }
@media (min-width: 721px) { .sticky-btns { grid-column: 2; margin-left: 0; } }
@media (max-width: 720px) {
  .sticky-btns { flex: 1 1 100%; justify-content: center; margin-left: 0; }
  .sticky-btns .btn { flex: 1 1 0; min-width: 0; max-width: 220px; padding-inline: .9rem; }
}

/* Image d'en-tete des pages sans video (30/09/2026) : meme place et meme cadre 16/9 que la
   facade video, pour que les pages allemandes sans video ne commencent pas a vide. */
.corps > figure.image-une {
  margin: .6rem 0 2.4rem; aspect-ratio: 16 / 9;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--surface); box-shadow: var(--shadow);
}
.image-une img { display: block; width: 100%; height: 100%; object-fit: cover;
  border: 0; border-radius: 0; box-shadow: none; }

/* Bloc « A lire aussi » en fin d'article (30/09/2026, audit du maillage) : les cartes du
   sommaire en plus compact, titre et image seulement. Deux colonnes jusqu'au plus petit
   mobile, pour que les quatre cartes tiennent en deux rangees courtes. */
.suite { margin: 2.8rem 0 .4rem; }
.suite-titre { margin: 0; font-family: var(--serif); font-size: 1.32rem; font-weight: 600; color: #fff; }
.suite .articles { margin: 1rem 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.suite .art-desc, .suite .art-date { display: none; }
.suite .art-txt { padding: 12px 14px 14px; }
.suite .art-titre { display: block; margin: 0; font-size: 1rem; }
@media (max-width: 480px) {
  .suite .articles { gap: 10px; }
  .suite .art-txt { padding: 9px 10px 11px; }
  .suite .art-eyebrow { font-size: .64rem; }
  .suite .art-titre { font-size: .9rem; line-height: 1.28; }
}

/* ------------------------------------------------------- choix de langue (01/10/2026)

   Quatre drapeaux et leur sigle, FR DE EN IT, demandes par Daniele ; l'anglais porte deux
   drapeaux, britannique et americain. build.py pose deux rendus dans chaque page, et un
   seul est visible a la fois :
   - .langs-ligne : les drapeaux cote a cote, a partir de 1240 px, ou l'en-tete a la place ;
   - .langs : en dessous, une pastille avec le drapeau de la langue courante, qui s'ouvre sur
     les autres. <details> s'ouvre sans script ; site.js ne fait que le refermer au clic
     ailleurs et a la touche Echap.
   Quatre drapeaux en ligne sous 1240 px feraient passer le menu sur deux lignes. */
.drapeau {
  display: block; flex: 0 0 auto; width: 21px; height: 14px; border-radius: 2px;
  /* sans ce lisere, le noir du drapeau allemand se perd sur le fond graphite */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}
.drapeau + .drapeau { margin-left: -1px; }
.lg b, .langs b { font-weight: inherit; color: inherit; }

.langs-ligne { display: none; }
.lg {
  display: inline-flex; align-items: center; gap: 6px;
  padding: .38rem .55rem; border: 1px solid transparent; border-radius: 999px;
  color: var(--text-2); text-decoration: none; white-space: nowrap;
  font-size: .82rem; font-weight: 650; letter-spacing: .04em; line-height: 1;
  transition: border-color .15s, color .15s, background .15s;
}
a.lg:hover { color: var(--text); background: var(--surface); border-color: var(--line); }
.lg.est-la { color: var(--text); border-color: var(--accent); }

.langs { position: relative; flex: 0 0 auto; margin-left: 6px; }
.langs > .lang {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 0;
  padding: .42rem .58rem; line-height: 1;
  font-size: .82rem; font-weight: 650; letter-spacing: .04em;
  list-style: none; cursor: pointer; user-select: none;
}
.langs > .lang::-webkit-details-marker { display: none; }
.langs > .lang::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform .18s ease;
}
.langs[open] > .lang { color: var(--text); border-color: var(--accent); }
.langs[open] > .lang::after { transform: rotate(-135deg); margin-top: 3px; }
.langs-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 80;
  display: flex; flex-direction: column; min-width: 100%; padding: 6px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.langs-menu a {
  display: flex; align-items: center; gap: 8px;
  padding: .56rem .7rem; border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; white-space: nowrap;
  font-size: .86rem; font-weight: 650; letter-spacing: .04em;
}
.langs-menu a span { color: var(--text-2); font-weight: 500; letter-spacing: 0; font-size: .9rem; }
.langs-menu .lg-d { display: inline-flex; gap: 5px; flex: 0 0 auto; }
.langs-menu .lg-d .drapeau + .drapeau { margin-left: 0; }
/* La ligne de l'anglais porte deux drapeaux : quand elle est dans le menu, les autres lignes
   reservent la meme largeur, pour que les sigles s'alignent. Sur une page anglaise, aucune
   ligne n'en a deux et la case garde sa largeur naturelle. */
.langs-menu:has(.drapeau + .drapeau) .lg-d { width: 47px; }
.langs-menu a:hover { background: var(--surface); }
@media (max-width: 999px) { .langs { margin-left: 0; } }
/* Sur les plus petits telephones, la pastille anglaise a deux drapeaux mordait sur la marge
   droite de l'en-tete : elle n'en garde qu'un, le menu ouvert montre toujours les deux. */
@media (max-width: 340px) { .langs > .lang .drapeau + .drapeau { display: none; } }
@media (min-width: 1000px) and (max-width: 1239px) {
  .langs { margin-left: 4px; }
  /* Entre 1000 et 1239 px le menu a huit entrees et l'en-tete ne fait que 880 px utiles :
     la pastille a drapeau est plus large de quelques pixels que l'ancien lien « Deutsch »,
     les liens du menu les lui rendent, et tout reste sur une ligne. */
  .nav a { padding-inline: .3rem; }
}
@media (min-width: 1240px) {
  .langs-ligne { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; margin-left: 12px; }
  .head-in > .langs { display: none; }
}
/* Six langues depuis le 09/11/2026 (hebreu) : le sixieme drapeau faisait passer le menu francais
   sur deux lignes a 1240 et 1280 px (tools/mesure_entete.py). La rangee se resserre : marges
   internes, ecart drapeau-sigle et ecart entre les langues, le sigle restant affiche. */
@media (min-width: 1240px) {
  .langs-ligne { gap: 0; margin-left: 8px; }
  .langs-ligne .lg { gap: 4px; padding: .34rem .36rem; font-size: .8rem; }
}

/* Les memes drapeaux sur la page d'entree, devant le nom de chaque langue. */
.acces b .drapeau { display: inline-block; vertical-align: -1px; margin-right: 8px; }
.acces b .drapeau + .drapeau { margin-left: -4px; }
/* Cinq langues depuis le 03/11/2026 : la derniere carte prend toute la largeur. */
.acces a:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Page sans barre fixe : une langue sans offre par defaut (it, en) n'en pose une que si
   la page porte `go:`. Le corps ne reserve alors pas la place de la barre. */
body.sans-barre { padding-bottom: 0; }

/* Un titre vise par une ancre (#schede, #reviews) ne doit pas finir sous l'en-tete fixe. */
.corps h2[id] { scroll-margin-top: calc(var(--head-h) + 18px); }

/* Page d'accueil d'une langue (it, en) : les themes couverts, en cartes de texte. Ce ne
   sont pas des liens tant que les pages de theme n'existent pas : aucun effet de survol,
   pour ne pas laisser croire qu'on peut cliquer. */
.themes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; margin: 1.7rem 0 2.2rem;
}
.theme {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px 4px;
}
.theme-nom {
  display: block; font-family: var(--serif); font-size: 1.16rem; font-weight: 600;
  line-height: 1.3; color: #fff; margin-bottom: .3em;
}
.theme-actifs {
  display: block; font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  line-height: 1.5; text-transform: uppercase; color: var(--accent); margin-bottom: .8em;
}
.theme p { font-size: .95rem; color: var(--text-2); margin-bottom: 1.05em; }
@media (max-width: 700px) { .themes { grid-template-columns: 1fr; gap: 12px; } }

/* Tableau nutritionnel recadre de l'etiquette (03/10/2026, page « Etikett lesen ») : l'image
   est presque carree, en pleine colonne elle ferait 750 px de haut. Bornee et centree. */
figure.etikett-tab img { display: block; max-width: 520px; height: auto; margin-inline: auto; }
figure.etikett-tab figcaption { text-align: center; }

/* Tableau a deux colonnes de texte (03/10/2026) : sans la largeur minimale de 520 px, il tient
   dans un mobile au lieu de faire defiler la seconde colonne hors de l'ecran. A reserver aux
   tableaux sans colonne de chiffres. */
.tableau.compact table { min-width: 0; }

/* ---------------------------------------------------------------- lettre d'information

   Fenetre d'inscription (05/10/2026), clonee par site.js depuis <template id="nl-modele">.
   Au-dessus de tout, barre fixe (70) et menu de langue (80) compris. Le bouton reprend
   l'orange pulsant des CTA : c'est un appel a l'action comme les autres. */
.nlp {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(5, 8, 10, .78);
  opacity: 0; transition: opacity .18s ease;
}
.nlp.est-on { opacity: 1; }
.nlp-carte {
  position: relative; width: 100%; max-width: 470px;
  max-height: calc(100vh - 32px); overflow: auto;
  background: linear-gradient(168deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 30px 28px 20px;
  transform: translateY(14px); transition: transform .18s ease;
}
.nlp.est-on .nlp-carte { transform: none; }
.nlp-carte:focus { outline: none; }
.nlp-kicker {
  display: inline-block; margin: 0 44px .85rem 0; padding: .2rem .72rem; border-radius: 99px;
  background: var(--accent-dim); color: var(--accent);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.nlp-titre {
  font-family: var(--serif); font-size: 1.62rem; line-height: 1.2; font-weight: 700;
  letter-spacing: -.01em; color: #fff; margin: 0 2rem 1rem 0;
}
.nlp-liste { list-style: none; margin: 0 0 1.3rem; padding: 0; }
.nlp-liste li {
  position: relative; padding-left: 28px; margin: 0 0 .55rem;
  font-size: .97rem; line-height: 1.45; color: var(--text-2);
}
.nlp-liste li b { color: var(--text); font-weight: 600; }
.nlp-liste li::before {
  content: ""; position: absolute; left: 4px; top: .2em; width: 6px; height: 12px;
  border: solid var(--accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.nlp-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.nlp-input {
  font: inherit; font-size: 1.02rem; color: var(--text); width: 100%;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .95rem 1rem;
}
.nlp-input::placeholder { color: var(--text-3); opacity: 1; }
.nlp-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-dim); }
.nlp-btn { width: 100%; font-size: 1.08rem; padding: 1.05rem 1.2rem; }
.nlp-btn[disabled] { opacity: .65; cursor: default; animation: none; }
.nlp-msg { margin: .75rem 0 0; font-size: .93rem; line-height: 1.45; color: var(--warn); }
.nlp-msg:empty { display: none; }
.nlp-msg.est-ok { margin-top: .2rem; font-size: 1.05rem; font-weight: 600; color: var(--accent-hi); }
.nlp-legal { margin: .9rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--text-3); }
.nlp-legal a { color: var(--text-2); }
.nlp-x {
  position: absolute; top: 8px; right: 10px; padding: 6px 10px;
  background: none; border: 0; color: var(--text-3);
  font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.nlp-x:hover { color: #fff; }
.nlp-non {
  display: block; width: 100%; margin: 0; padding: .8rem 0 0;
  background: none; border: 0; color: var(--text-3);
  font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer;
}
.nlp-non:hover { color: var(--text-2); }
.nlp-piege { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; }
.nlp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.nl-ouvert { overflow: hidden; }
@media (max-width: 560px) {
  .nlp-carte { padding: 26px 20px 16px; }
  .nlp-titre { font-size: 1.36rem; }
  .nlp-liste li { font-size: .93rem; }
}

/* Le lien du pied qui ouvre la fenetre. */
.pied-nl {
  color: var(--accent); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
}
.pied-nl:hover { color: var(--accent-hi); border-color: var(--accent-hi); }

/* ------------------------------------------------------- bouton YouTube du menu (07/10/2026)

   Demande de Daniele : un bouton rouge « YouTube » dans le menu de chaque langue, vers la
   chaine de cette langue. Un seul lien, dernier enfant de .nav, et trois rendus :
   - sous 1000 px, dans le menu deroulant : pastille rouge, logo blanc et libelle ;
   - de 1000 a 1279 px, le logo rouge seul. Le menu francais n'avait que 26 px de marge
     entre 1000 et 1239 px : la pastille complete l'aurait fait passer sur deux lignes ;
   - a partir de 1280 px, la pastille complete (jusqu'au 03/11/2026 : depuis, le logo seul).
   Rouge #e60000 et non le #ff0000 de YouTube : le texte blanc y passe le contraste AA
   (4,8:1 contre 4,0:1). La variable --yt colore aussi le triangle du logo. */
.nav a.yt {
  --yt: #e60000;
  display: inline-flex; align-items: center; align-self: center; gap: 7px;
  margin-left: 6px; padding: .45rem .85rem .45rem .72rem; border-radius: 999px;
  background: var(--yt); color: #fff;
  font-size: .86rem; font-weight: 700; line-height: 1; letter-spacing: .01em;
  white-space: nowrap;
}
.nav a.yt:hover { --yt: #ff2020; background: var(--yt); color: #fff; }
.yt-logo { display: block; flex: 0 0 auto; width: 20px; height: auto; }
.yt-fond { fill: #fff; }
.yt-tri { fill: var(--yt); }

@media (max-width: 999px) {
  .nav a.yt {
    align-self: flex-start; margin: 14px 0 2px; padding: .66rem 1.1rem .66rem .9rem;
    border-bottom: 0; font-size: .95rem;
  }
  .yt-logo { width: 22px; }
}

/* Entre 1000 et 1239 px, la place du logo est reprise sur l'en-tete : ecarts entre les blocs
   de 14 a 10 px, marge des liens du menu de .3 a .24rem. Mesure le 07/10 : 21 px de marge en
   francais, 30 en allemand (26 et 35 avant le bouton), 42 et 53 px a 1280 px. */
@media (min-width: 1000px) and (max-width: 1239px) {
  .head-in { gap: 10px; }
  .brand { gap: 7px; }
  .nav a { padding-inline: .24rem; }
  .langs { margin-left: 2px; }
}
/* Depuis l'ajout du cinquieme drapeau (polonais, 03/11/2026), le logo seul vaut aussi au-dela de
   1279 px : avec la pastille complete, le menu francais et allemand passait sur deux lignes a
   1280 px et plus (mesure par tools/mesure_entete.py). */
@media (min-width: 1000px) {
  .nav a.yt { margin-left: 2px; padding: 3px; border-radius: 6px; background: none; }
  .nav a.yt:hover { background: var(--surface); }
  .nav a.yt .yt-logo { width: 24px; }
  .nav a.yt .yt-fond { fill: var(--yt); }
  .nav a.yt .yt-tri { fill: #fff; }
  .yt-txt {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* Encart du flacon cliquable (18/10/2026, demande de Daniele sur /fr/torex-gummies-avis/) :
   <a class="flacon-lien" href="/<langue>/go/..." data-aff> autour du <figure class="flacon-bloc">,
   avec un <span class="btn btn-cta"> dans la legende pour que le lien se voie. */
.corps a.flacon-lien { display: block; margin: 2rem 0; color: inherit; border-bottom: 0; text-decoration: none; }
.corps a.flacon-lien:hover { color: inherit; }
.flacon-lien .flacon-bloc { margin: 0; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.flacon-lien:hover .flacon-bloc {
  border-color: rgba(255, 139, 44, .55); transform: translateY(-2px);
  box-shadow: 0 18px 38px -22px rgba(255, 139, 44, .7);
}
.flacon-lien .flacon-bloc .btn { margin-top: .95em; padding: .82rem 1.4rem; font-size: .98rem; }
.flacon-lien:hover .btn-cta { animation: none; }
@media (max-width: 640px) {
  .flacon-lien .flacon-bloc .btn { width: 100%; }
}

/* Images cliquables (28/10/2026, point 2bis de site.js) : chaque image du corps est enveloppee
   dans un lien vers l'offre. display: contents garde la mise en page de l'image telle quelle.
   L'encart qui l'entoure (.encart-lien) mene a la meme offre, avec le meme survol que .flacon-lien. */
a.img-lien { display: contents; }
.corps .encart-lien { cursor: pointer; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.corps .lot.encart-lien:hover, .corps .flacon-bloc.encart-lien:hover {
  border-color: rgba(255, 139, 44, .55); transform: translateY(-2px);
  box-shadow: 0 18px 38px -22px rgba(255, 139, 44, .7);
}
.corps figure.encart-lien:not(.lot):not(.flacon-bloc):hover img { filter: brightness(1.06); }


/* ==========================================================================
   Hebreu, de droite a gauche (09/11/2026)

   build.py pose dir="rtl" sur <html> pour l'hebreu. Flex et grilles suivent seuls le sens
   d'ecriture ; ce bloc retourne ce qui est ecrit en gauche/droite physiques plus haut
   (marges automatiques de l'en-tete, puces positionnees, bordures d'accent, croix de
   fermeture, menu des langues). Aucune regle ici ne touche une page en ecriture gauche-droite.
   ========================================================================== */

[dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 1.25em; }
[dir="rtl"] .skip { left: auto; right: -9999px; border-radius: 0 0 0 var(--radius-sm); }
[dir="rtl"] .skip:focus { right: 0; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: 0; }

/* en-tete : le menu se cale contre la bascule de langue, a gauche */
[dir="rtl"] .nav { margin-left: 0; margin-right: auto; }
[dir="rtl"] .nav-btn { margin-left: 0; margin-right: auto; }
[dir="rtl"] .lang { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .langs { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .langs > .lang { margin-right: 0; }
[dir="rtl"] .langs-menu { right: auto; left: 0; }
[dir="rtl"] .drapeau + .drapeau { margin-left: 0; margin-right: -1px; }
[dir="rtl"] .langs-menu .lg-d .drapeau + .drapeau { margin-right: 0; }
@media (max-width: 999px) {
  [dir="rtl"] .lang, [dir="rtl"] .langs { margin-right: 0; }
}
@media (min-width: 1000px) {
  [dir="rtl"] .lang { margin-right: 4px; }
}
@media (min-width: 1000px) and (max-width: 1239px) {
  [dir="rtl"] .langs { margin-right: 2px; }
}
@media (min-width: 1240px) {
  [dir="rtl"] .langs-ligne { margin-left: 0; margin-right: 8px; }
}

[dir="rtl"] .fil span:last-child { margin-right: .45em; margin-left: 0; }

/* blocs editoriaux */
[dir="rtl"] .controles .val { text-align: left; }
[dir="rtl"] .essentiel { border-left: 1px solid var(--line); border-right: 3px solid var(--accent); }
[dir="rtl"] .essentiel li { padding-left: 0; padding-right: 1.6em; }
[dir="rtl"] .essentiel li::before { left: auto; right: 0; }
[dir="rtl"] .ouinon-c li { padding-left: 0; padding-right: 1.4em; }
[dir="rtl"] .ouinon-c.oui li::before, [dir="rtl"] .ouinon-c.non li::before { left: auto; right: 0; }
[dir="rtl"] .avantages li { padding-left: 0; padding-right: 1.75em; }
[dir="rtl"] .avantages li::before { left: auto; right: 0; }
[dir="rtl"] .tableau th, [dir="rtl"] .tableau td { text-align: right; }
[dir="rtl"] .citation { padding: 4px 22px 4px 0; border-left: 0; border-right: 3px solid var(--accent); }
[dir="rtl"] .q > summary { padding: .95rem 1.1rem .95rem 3rem; }
[dir="rtl"] .q > summary::after { right: auto; left: 1.2rem; }
[dir="rtl"] .pistes a:hover { transform: translateX(-3px); }
[dir="rtl"] .video-duree { right: auto; left: 10px; }
[dir="rtl"] .video-chap ol { padding: 0 0 26px 6px; }

/* pied et barre fixe */
[dir="rtl"] .pied-liens a { margin-right: 0; margin-left: 1.1em; }
[dir="rtl"] .sticky .btn, [dir="rtl"] .sticky-btns { margin-left: 0; margin-right: auto; }
@media (min-width: 721px) {
  [dir="rtl"] .sticky .btn, [dir="rtl"] .sticky-btns { margin-right: 0; }
}
@media (max-width: 720px) {
  [dir="rtl"] .sticky .btn { margin-inline: auto; }
  [dir="rtl"] .sticky-btns { margin-right: 0; }
  [dir="rtl"] .sticky small { text-align: right; }
}

/* fenetre de la lettre : la croix passe a gauche */
[dir="rtl"] .nlp-x { right: auto; left: 10px; }
[dir="rtl"] .nlp-kicker { margin: 0 0 .85rem 44px; }
[dir="rtl"] .nlp-titre { margin: 0 0 1rem 2rem; }
[dir="rtl"] .nlp-liste li { padding-left: 0; padding-right: 28px; }
[dir="rtl"] .nlp-liste li::before { left: auto; right: 4px; }
/* adresses e-mail et URL : toujours de gauche a droite, meme dans un paragraphe hebreu */
[dir="rtl"] .nlp-input[type="email"], [dir="rtl"] input[type="email"] { direction: ltr; text-align: right; }
/* page d'entree : la carte hebraique porte dir="rtl", le drapeau passe a droite du nom */
[dir="rtl"] .acces b .drapeau { margin-right: 0; margin-left: 8px; }
/* Une liste dont toutes les lignes visaient des pages programmees (masquer_programmees retire
   la ligne entiere) reste vide jusqu au jour J : elle ne doit pas laisser de marge. */
.avantages:not(:has(li)) { display: none; }

/* Hebreu (11/11/2026) : une seule police, Heebo, pour le texte et les titres, mots latins
   compris. Voir les @font-face en tete de feuille. */
[dir="rtl"] {
  --sans: "Heebo FV", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Heebo FV", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
[dir="rtl"] h1, [dir="rtl"] h2 { font-weight: 700; }