/* ============================================================
   JOUR V2 · la page Aujourd'hui au dessin de la maquette
   « 01 - aujourdhui.dc.html » (09/09 15h39) + tokens du handoff
   React (Bosphorus). Tout est préfixé jv2- ; la palette du jour
   vit en variables sur #jour-v2 (posées par jour-v2.js).
   Typo : Bricolage Grotesque (display) · Hanken Grotesk (texte) ·
   JetBrains Mono (libellés) — chargées par polices/refonte-v2.css.
   ============================================================ */

/* quand le slider est monté, les blocs v1 de l'écran restent dans le
   DOM (leurs peintres continuent d'écrire) mais ne s'affichent plus */
#e-jour.jv2-actif > :not(#jour-v2) { display: none !important; }
/* le temps que la v2 monte (module charge, profil present), la v1 de
   l'ecran jour reste invisible : plus d'« ancienne maquette » au
   demarrage ; la garde tombe toute seule si la v2 ne monte pas */
/* opacity, PAS visibility : innerText d'un element visibility:hidden
   est VIDE et le lecteur v1 -> v2 (lireContenus) en depend */
html.jv2-attendu #e-jour > :not(#jour-v2) { opacity: 0 !important; pointer-events: none; }
#e-jour.jv2-actif { padding: 0 !important; background: var(--fond, #F5DAA9); transition: background 0.45s ease; }
/* la maquette n'a pas l'en-tête global sur Aujourd'hui (la date vit
   dans la page 1) ; dégradation douce si :has n'existe pas */
body:has(#e-jour.actif.jv2-actif) header { display: none; }
/* le bandeau v1 « Tu consultes le… » recouvrait l'en-tête : sur cet
   écran il est masqué et re-dessiné dans la page (.jv2-bandeau) */
body:has(#e-jour.actif.jv2-actif) #bandeau-date { display: none !important; }
/* le bandeau INTÉGRÉ du handoff couverture (jamais un slab pleine
   largeur) : coin 14, fond d'encre à 7 %, liseré 14 % */
.jv2-bandeau {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 14px;
  background: rgba(25, 17, 53, 0.07);
  box-shadow: inset 0 0 0 1.5px rgba(25, 17, 53, 0.14);
  color: var(--encre, #191135);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex: none;
}
.jv2-bandeau button {
  background: none;
  border: 0;
  color: var(--titre, #C35945);
  font: inherit;
  font-weight: 600;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}
/* mode application : le fond du jour couvre TOUT l'écran (barre de
   statut comprise en plein écran installé), pas seulement la carte */
body:has(#e-jour.actif.jv2-actif),
html:has(#e-jour.actif.jv2-actif) { background: var(--jv2-fond, #F5DAA9); }
/* le #cadre v1 (crème) doit suivre le jour lui aussi */
body:has(#e-jour.actif.jv2-actif) #cadre { background: var(--jv2-fond, #F5DAA9); }
/* audit 15/09 : l'air v1 sous main (112px) faisait défiler le body sous
   l'écran plein cadre : tout glissait vers le haut en fin d'élan (l'en-tête
   « flottait »). Écran du jour actif = zéro air fantôme, zéro scroll body. */
body:has(#e-jour.actif.jv2-actif) main { padding-bottom: 0; }
#jour-v2 { overscroll-behavior: none; }
.jv2-quatrieme, .jv2-guette { overscroll-behavior: contain; }

#jour-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  /* la hauteur VRAIE mesurée par calerViewport (100dvh se fige parfois
     trop court en app installée : points et partage au milieu de l'écran) */
  height: var(--jv2-vh, 100dvh);
  background: var(--fond, #F5DAA9);
  color: var(--encre, #191135);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
}

/* ---- l'en-tête : le signe + « orbe », sur chaque page ---- */
.jv2-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* retour Marine 09/09 : le logo TOUT en haut, on s'étale : juste
     sous la barre de statut, plus les 68px d'air de la maquette */
  padding: calc(env(safe-area-inset-top, 14px) + 6px) 24px 10px;
  flex: none;
}
.jv2-marque { display: flex; align-items: center; gap: 7px; }
.jv2-compteur { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--encre, #191135); }
.jv2-tete .jv2-mot {
  font-family: 'Bricolage Grotesque', system-ui;
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* ---- le défilement horizontal : 7 pages qui se glissent ---- */
.jv2-defile {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.jv2-defile::-webkit-scrollbar { display: none; }
.jv2-page {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 24px calc(var(--jv2-nav, 118px) + 28px);
  overflow-y: auto;
  box-sizing: border-box;
}

/* ---- les rôles typographiques (valeurs du handoff) ---- */
.jv2-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
/* le repère des panneaux : « Au tap » tel quel, jamais en capitales */
.jv2-au-tap { font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.jv2-titre {
  margin: 0;
  font-family: 'Bricolage Grotesque', system-ui;
  font-weight: 800;
  font-size: 50px;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--titre, #C35945);
}
.jv2-texte { margin: 0; font-size: 20px; line-height: 1.45; }
.jv2-centre {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  min-height: 0;
}
/* la quote : la vedette, taille FIGÉE 70 (handoff couverture) ;
   Bricolage culmine à 800, le « 900 » du handoff n'existe pas */
.jv2-citation {
  margin: 0;
  font-family: 'Bricolage Grotesque', system-ui;
  font-weight: 800;
  font-size: 70px;
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--titre, #C35945);
  text-wrap: pretty;
  padding-bottom: 6px;
}
.jv2-source { font-size: 20px; color: var(--encre, #191135); }

/* ---- la couverture (handoff « couverture_aujourdhui ») ---- */
.jv2-page.jv2-couv { padding: 92px 24px calc(var(--jv2-nav, 118px) + 28px); gap: 16px; }
.jv2-logo { display: flex; align-items: center; gap: 12px; flex: none; color: var(--encre, #191135); }
.jv2-logo svg { width: 50px; height: 50px; }
.jv2-logo-mot {
  font-family: 'Bricolage Grotesque', system-ui;
  font-weight: 800;
  font-size: calc(42px * var(--jv2-k, 1));
  line-height: 1;
  letter-spacing: -0.04em;
}
.jv2-centre-couv { flex: none; min-height: 0; gap: 18px; }
/* les cales du centrage souple : elles grandissent pour centrer, fondent
   jusqu'au minimum quand la quote prend la hauteur (ecart garanti sous
   la date, le surplus pousse la reference et le CTA vers le bas) */
.jv2-couv-cale { flex: 1 1 0; min-height: 18px; }
.jv2-couv-cale-basse { flex-grow: 1.15; min-height: 10px; }
.jv2-cta-rose {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  border: 0;
  background: none;
  padding: 0;
  min-height: 44px;
  font-family: 'Hanken Grotesk', system-ui;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cta-orbe, #9E2568);
  cursor: pointer;
  margin-top: 10px;
}
.jv2-cta-rose svg { flex: none; }

.jv2-tldv {
  margin: 0;
  font-family: 'Bricolage Grotesque', system-ui;
  font-weight: 800;
  font-size: calc(65px * var(--jv2-k, 1));
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--titre, #C35945);
}
.jv2-sous-titre {
  margin: 0;
  font-family: 'Bricolage Grotesque', system-ui;
  font-weight: 800;
  font-size: 30px;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--titre, #C35945);
}
/* les listes : numéro mono + item display 34 */
.jv2-rang { display: flex; align-items: baseline; gap: 14px; }
.jv2-rang .jv2-num { font-family: 'JetBrains Mono', monospace; font-size: 13px; flex: none; }
.jv2-rang .jv2-item {
  font-family: 'Bricolage Grotesque', system-ui;
  font-weight: 800;
  font-size: calc(34px * var(--jv2-k, 1));
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.jv2-filet { height: 1px; background: rgba(25, 17, 53, 0.12); margin-top: 18px; }
.jv2-h34 {
  margin: 0;
  font-family: 'Bricolage Grotesque', system-ui;
  font-weight: 800;
  font-size: 34px;
  line-height: 0.94; /* le titre de la Lune, valeur de la maquette DC */
  letter-spacing: -0.03em;
  color: var(--titre, #C35945);
  text-wrap: pretty;
}
.jv2-p15 { margin: 0; font-size: 15px; line-height: 1.5; }

/* le son du jour : la vague décorative */
.jv2-vague { display: flex; align-items: flex-end; gap: 5px; height: 150px; }
.jv2-vague span { flex: 1; border-radius: 999px; background: var(--motif, #87D6EC); }
.jv2-titre-son {
  margin: 0;
  font-family: 'Bricolage Grotesque', system-ui;
  font-weight: 800;
  font-size: calc(34px * var(--jv2-k, 1));
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--encre, #191135); /* la couleur des textes, plus le rose (Marine 10/09) */
}
.jv2-artiste { margin: 0; font-size: 20px; font-weight: 600; }
.jv2-lecture { height: 4px; border-radius: 999px; background: rgba(25, 17, 53, 0.3); overflow: hidden; }
.jv2-lecture-fill { display: block; height: 100%; width: 0%; background: var(--motif, #87D6EC); }
/* la Lune (SPEC 05) */
.jv2-sousligne { margin: 0; font-size: 15px; line-height: 1.4; }
.jv2-guette {
  margin-top: 30px; /* l'air avant « À guetter » (Marine 10/09) */ flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 11px; }
.jv2-mono13 {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.jv2-guette-ligne { margin: 0; font-size: 15px; line-height: 1.38; padding-bottom: 11px; border-bottom: 1px solid rgba(25, 17, 53, 0.16); }
.jv2-guette-ligne:last-child { border-bottom: 0; }

/* les cartes des proches (page 7, SPEC ecran 07) */
.jv2-titre40 {
  margin: 0;
  font-family: 'Bricolage Grotesque', system-ui;
  font-weight: 800;
  font-size: 40px;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--titre, #C35945);
}
.jv2-carte-proche {
  border-radius: 22px;
  color: var(--encre, #191135);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
}
.jv2-carte-haut { display: flex; align-items: center; gap: 12px; }
.jv2-pastille {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  color: var(--encre, #191135);
}
.jv2-identite { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jv2-carte-proche .jv2-nom { font-weight: 600; font-size: 18px; }
.jv2-signes { font-size: 13px; white-space: nowrap; }
.jv2-chevron { font-size: 22px; flex: none; }
.jv2-phrase { margin: 0; font-size: 17px; line-height: 1.45; }

/* ---- le pied commun : le renvoi ✦ + les 7 segments ---- */
.jv2-pied { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 8px 24px 10px; }
.jv2-renvoi {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--titre, #C35945);
}
.jv2-renvoi u { text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.jv2-segments { display: flex; align-items: center; gap: 6px; }
.jv2-segments button {
  height: 3px;
  flex: 1;
  border: 0;
  border-radius: 99px;
  padding: 0;
  min-height: 3px;
  cursor: pointer;
  background: rgba(25, 17, 53, 0.2);
}
.jv2-segments button.on { background: var(--titre, #C35945); }
.jv2-partage {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--titre, #C35945);
  margin-left: auto;
  display: flex;
}

/* (l ancien bottom-sheet à voile a été retiré : les transits
   ouvrent le panneau pleine page .jv2-panneau, loi Marine) */

/* ============================================================
   LA BARRE DU BAS · socle Bosphorus (handoff React TabBar) :
   fond poudre, filet, Orbe AI au centre, actif = 600 + opacité 1
   ============================================================ */
nav.jv2-barre {
  background: #D8DADC; /* Ocean : le fond commun, Aujourd'hui compris (Marine 15/09) */
  box-shadow: inset 0 1px 0 rgba(25, 17, 53, 0.16);
  /* plus FINE (Marine 10/09) : l'air du bas suit la vraie safe-area */
  padding: 4px 8px max(12px, env(safe-area-inset-bottom, 12px));
  gap: 2px;
}
nav.jv2-barre button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  flex: 1;
  color: #191135;
  background: none;
  border: 0;
  font-family: 'Hanken Grotesk', system-ui;
  font-size: 11px;
  letter-spacing: -0.01em;
  text-transform: none;
  font-weight: 400;
  opacity: 0.55;
}
/* les libellés longs (Mes proches, Code Source) passent sur deux lignes
   plutôt que de se manger l'un l'autre (Marine 14/09) */
nav.jv2-barre button { white-space: normal; text-align: center; line-height: 1.08; padding: 8px 2px 10px; }
nav.jv2-barre button .ng { font-size: 0; height: 26px; display: flex; align-items: center; }
nav.jv2-barre button.actif { font-weight: 600; opacity: 1; }

/* Marine 10/09 : la barre REPREND le fond du jour sur Aujourd'hui
   (la continuité d'origine, rétablie contre l'invariant du handoff) */
body:has(#e-jour.actif.jv2-actif) nav.jv2-barre { background: var(--jv2-fond, #F5DAA9); transition: background 0.45s ease; }
/* l'onglet actif est PLEIN : deux tracés dans le bouton, l'état choisit */
nav.jv2-barre button .g-plein { display: none; }
nav.jv2-barre button.actif .g-plein { display: flex; }
nav.jv2-barre button.actif .g-trait { display: none; }

/* ============================================================
   LES PANNEAUX AU TAP (Lot A) : superpositions plein écran à la
   palette du jour, en-tête « orbe » + « Au tap », pas de rail
   ============================================================ */
.jv2-panneau {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: var(--fond, #F5DAA9);
  color: var(--encre, #191135);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: calc(env(safe-area-inset-top, 14px) + 6px) 24px 10px;
  overflow-y: auto;
}
.jv2-panneau-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex: none; min-height: 44px; }
.jv2-panneau-tete .jv2-mot {
  font-family: 'Bricolage Grotesque', system-ui;
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.jv2-panneau-titre {
  margin: 0;
  font-family: 'Bricolage Grotesque', system-ui;
  font-weight: 800;
  font-size: 34px;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--titre, #C35945);
}
.jv2-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.jv2-pastille-info {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(25, 17, 53, 0.16);
}
.jv2-panneau-corps { display: flex; flex-direction: column; gap: 16px; }
.jv2-accroche { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.35; }
.jv2-corps17 { margin: 0; font-size: 17px; line-height: 1.5; }
.jv2-panneau-pied { margin-top: auto; display: flex; flex-direction: column; gap: 14px; padding-bottom: 6px; }
.jv2-panneau-pied .jv2-partage { margin-left: auto; }
.jv2-carte-oai {
  border-radius: 22px;
  background: rgba(25, 17, 53, 0.08);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}
.jv2-carte-oai-q { font-size: 17px; font-weight: 600; }
/* la liste des transits du panneau (prime sur l'ancien style de feuille) */
.jv2-rang-transit {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(25, 17, 53, 0.16);
  cursor: pointer;
}
.jv2-rang-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.jv2-rang-transit .jv2-t-nom { font-family: 'Hanken Grotesk', system-ui; font-weight: 600; font-size: 20px; }
.jv2-t-marge { font-family: 'JetBrains Mono', monospace; font-size: 13px; }

/* ============================================================
   LE GABARIT « 4e DE COUVERTURE » (retour Marine 10/09) : sur les
   pages 2 à 7, le bloc est centré verticalement (titre baissé,
   vraie respiration), et défile quand il dépasse. Une seule taille
   de titre de page.
   ============================================================ */
.jv2-quatrieme { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.jv2-quatrieme-bloc { margin: auto 0; display: flex; flex-direction: column; gap: 16px; }
.jv2-titre-page {
  margin: 0;
  font-family: 'Bricolage Grotesque', system-ui;
  font-weight: 800;
  font-size: calc(65px * var(--jv2-k, 1));
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--titre, #C35945);
}

/* ============================================================
   Retour Marine 10/09 (midi) : UN niveau de titre commun sur les
   pages 3 à 7 (plus de centrage variable qui saute pendant le
   slide) ; tl;dv reste le seul écran-résumé centré. Le contenu des
   listes ne bouge pas (centré dans l'espace restant) ; la Lune et
   Tes proches respirent après le titre et défilent.
   ============================================================ */
.jv2-titre-zone {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 44px;
}
.jv2-sous-titre-page {
  font-family: 'Bricolage Grotesque', system-ui;
  font-weight: 800;
  font-size: 24px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--titre, #C35945);
}
.jv2-corps-zone {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
/* Marine 16/09 : sur une page qui défile (la Lune), TOUT défile ensemble,
   le titre monte avec le contenu : c'est la PAGE qui porte le défilement */
.jv2-page.jv2-defilable { overflow-y: auto; }
.jv2-page.jv2-defilable .jv2-corps-zone { flex: none; overflow-y: visible; }
/* offset FIXE : le centrage dépendait de la hauteur du contenu et
   bougeait d'une page à l'autre pendant le slide (Marine 10/09) */
.jv2-corps-centre { margin-top: 0; }
/* la cale souple : 110px quand il y a la place (l'ecartement valide du
   14/09), elle fond jusqu'a 16px quand le contenu prend la hauteur */
.jv2-cale-haute { flex: 0 1 110px; min-height: 16px; }
/* Marine 14/09 : espace titre -> paragraphes resserré un peu */
.jv2-corps-espace { margin-top: 22px; }

/* ============================================================
   LE CADRE DE PARTAGE (Marine 14/09) : la page du carrousel réutilisée
   telle quelle, estampillée logo + @orbe.astro, en story 9:16. Rendu hors
   écran puis photographié (html2canvas). On neutralise juste le plein écran
   et le défilement du clone : le contenu, lui, ne bouge pas.
   ============================================================ */
.jv2-shot {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* logo descendu, comme sur la page Aujourd'hui (Marine 14/09) */
  padding: 76px 44px 40px;
  background: var(--fond, #D8DADC);
  color: var(--encre, #191135);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  overflow: hidden;
}
.jv2-shot-logo { flex: none; margin-bottom: 4px; }
.jv2-shot-corps { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.jv2-shot-page {
  width: 100% !important;
  min-width: 0;
  flex: 1 !important;
  min-height: 0;
  height: auto !important;
  padding: 0 !important;
  gap: 16px;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
}
.jv2-shot-page .jv2-citation,
.jv2-shot-page .jv2-titre-page,
.jv2-shot-page .jv2-tldv,
.jv2-shot-page .jv2-titre,
.jv2-shot-page .jv2-sous-titre,
.jv2-shot-page .jv2-sous-titre-page {
  max-width: 100%;
  overflow-wrap: break-word;
  /* html2canvas n'honore pas le letter-spacing NÉGATIF : il rend les gros
     titres plus larges que le navigateur et les coupe. On l'annule dans la
     carte seulement (le wrapping redevient cohérent, zéro coupe) */
  letter-spacing: 0;
}
/* la citation partagée : marge de sécurité à droite pour qu'elle ne touche
   jamais le bord (html2canvas rend un poil plus large que mesuré) — Marine 14/09 */
.jv2-shot-page .jv2-citation { width: calc(100% - 30px); }
/* dans la carte, rien ne scrolle ni ne se coupe : tout est visible */
.jv2-shot-page .jv2-centre,
.jv2-shot-page .jv2-quatrieme,
.jv2-shot-page .jv2-corps-zone { overflow: visible !important; }
.jv2-shot-sign {
  flex: none;
  width: 100%;
  align-self: center;
  text-align: center;
  font-family: 'Hanken Grotesk', system-ui;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--encre, #191135);
  margin-top: 12px;
}


/* ============================================================
   Marine 10/09 : le rail devient des POINTS compacts centrés, le
   partage vit à droite avec de l'air, le pied est sur TOUTES les
   pages (couverture comprise).
   ============================================================ */
.jv2-pied-points {
  /* ANCRE GARANTIE (Marine 15/09, « que ça arrête de péter ») : le pied
     est FIXÉ au viewport, juste au-dessus de la barre d'onglets dont la
     position réelle est mesurée en JS (--jv2-nav = distance bas d'écran
     -> haut de barre). Il ne dépend plus d'aucune hauteur calculée. */
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--jv2-nav, 118px);
  max-width: 430px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 2px 24px;
  z-index: 6;
}
.jv2-pied-cale { display: flex; }
.jv2-pied-droite { justify-content: flex-end; }
.jv2-pied-points .jv2-segments { display: flex; align-items: center; gap: 2px; }
.jv2-pied-points .jv2-segments button {
  flex: none;
  width: 14px; /* resserré (Marine 15/09) : la cible tactile garde 22px de haut */
  height: 22px;
  min-height: 22px;
  border: 0;
  background: none;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  padding: 0;
}
.jv2-pied-points .jv2-segments button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(25, 17, 53, 0.25);
}
.jv2-pied-points .jv2-segments button.on::before {
  width: 8px;
  height: 8px;
  background: var(--titre, #C35945);
}

/* la bascule VO/VF de la couverture (Marine 10/09) : toute petite,
   sous la phrase, a droite de la source */
.jv2-ligne-source { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.jv2-vovf { flex: none; margin-left: auto; align-self: center; background: none; border: 0; box-shadow: inset 0 0 0 1px currentColor; opacity: 0.6; color: inherit; padding: 5px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 0; transition: opacity 0.15s; }
.jv2-vovf:hover { opacity: 0.9; }
.jv2-vovf.on { opacity: 1; box-shadow: inset 0 0 0 1.5px currentColor; }