/* Préchargeur d'accueil (22 octobre 2026) : quatre écrans composés d'après des références d'onboarding mobile.
   Haut : retour, segments de progression, fermer. Milieu : visuel puis titre lourd et texte, alignés à gauche.
   Bas : pilule carbone « Continuer » (lime au dernier écran) et lien « Passer ». Jetons du site, clair et sombre. */

/* Avant que le script ouvre la présentation, la page reste masquée ; une sécurité la rend visible au bout de 1,5 s si le script échoue. */
html.onb-attente body > *:not(#onboarding) { visibility: hidden; }
html.onb-attente { background: var(--background, #f4f4f1); animation: onb-securite 0s 1.5s forwards; }
@keyframes onb-securite { to { background: transparent; } }
html.onb-attente.onb-libre body > *:not(#onboarding), html.onb-ouvert body > *:not(#onboarding) { visibility: visible; }
@media (scripting: none) { html.onb-attente body > *:not(#onboarding) { visibility: visible; } }
html.onb-ouvert { overflow: hidden; }

.onb { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--background); color: var(--foreground); }
.onb::backdrop { background: rgb(12 12 12 / .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.onb[open] { display: block; }
@media (min-width: 640px) {
  .onb { inset: 0; width: min(440px, 92vw); height: min(780px, 92dvh); margin: auto; border-radius: 36px; box-shadow: 0 40px 100px rgb(0 0 0 / .35); }
}
.onb-cadre { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; padding: max(16px, env(safe-area-inset-top)) 22px max(20px, env(safe-area-inset-bottom)); }

/* Haut : retour (ordinateur) et « Passer ». */
.onb-haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.onb-rond { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--soft); color: var(--foreground); cursor: pointer; }
.onb-rond[hidden] { display: none; }
.onb-rond:hover { background: color-mix(in srgb, var(--foreground) 12%, var(--soft)); }
.onb-rond svg { width: 20px; height: 20px; }
.onb-passer { margin-inline-start: auto; min-height: 44px; padding: 0 14px; border-radius: 99px; border: 0; background: none; color: var(--muted-foreground); font: 600 15px/1 var(--police-texte); cursor: pointer; }
.onb-passer:hover { color: var(--foreground); }

/* Points de progression, en bas à gauche : le point actif s'allonge et se remplit pendant l'avance automatique. */
.onb-points { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.onb-points li { position: relative; width: 8px; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--foreground) 18%, transparent); overflow: hidden; transition: width .35s cubic-bezier(.16, 1, .3, 1); }
.onb-points li::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--foreground); transform: scaleX(0); transform-origin: left center; }
html[dir="rtl"] .onb-points li::after { transform-origin: right center; }
.onb-points li.actif { width: 30px; }
.onb-points li.actif::after { transform: scaleX(1); }
.onb-cadre.auto .onb-points li.actif::after { transform: scaleX(0); animation: onb-remplit var(--duree, 4200ms) linear forwards; }
.onb-cadre.pause .onb-points li.actif::after { animation-play-state: paused; }
@keyframes onb-remplit { to { transform: scaleX(1); } }

/* Écrans : empilés, un seul visible. */
.onb-pistes { position: relative; display: grid; min-height: 0; }
.onb-slide { grid-area: 1 / 1; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; padding-top: 14px; opacity: 0; visibility: hidden; transform: translateX(calc(var(--sens, 1) * 26px)); transition: opacity .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1), visibility 0s .5s; }
.onb-slide.is-active { opacity: 1; visibility: visible; transform: translateX(var(--glisse, 0px)); transition-delay: 0s; }
.onb-slide.is-passee { transform: translateX(calc(var(--sens, 1) * -26px)); }
.onb-pistes.glisse .onb-slide { transition-duration: 0s; }
.onb-visuel { position: relative; min-height: 0; display: grid; place-items: center; }
.onb-texte { padding-top: 14px; }
.onb-texte h2 { margin: 0 0 10px; max-width: 14ch; font-size: clamp(30px, 8.4vw, 38px); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.onb-texte p { margin: 0; max-width: 36ch; color: var(--muted-foreground); font-size: 16px; line-height: 1.55; }

/* Écran 1 : collage de couvertures en tuiles inclinées, estompé vers le bas. */
.onb-collage { overflow: hidden; border-radius: 24px; background: var(--soft); -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
.onb-tuiles { position: absolute; inset: -18% -22% -10% -22%; display: flex; gap: 12px; transform: rotate(-13deg); }
.onb-col { flex: 1; min-width: 0; align-self: flex-start; display: flex; flex-direction: column; will-change: transform; }
.onb-col:nth-child(2) { margin-top: -90px; }
.onb-col img { flex: none; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; margin-bottom: 12px; border-radius: 16px; box-shadow: 0 14px 30px rgb(0 0 0 / .22); }

/* Écran 2 : page de lecture avec aperçu gratuit, une ligne surlignée et un marque-page. */
.onb-lecteur { position: relative; width: min(100%, 330px); padding: 18px; border-radius: 26px; background: var(--card); box-shadow: 0 24px 50px rgb(0 0 0 / .16); border: 1px solid var(--border); }
.onb-lecteur-tete { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; }
.onb-lecteur-tete img { width: 52px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; box-shadow: 0 6px 14px rgb(0 0 0 / .2); }
.onb-lecteur-tete strong { display: block; font: 650 15px/1.25 var(--police-titre); letter-spacing: -.02em; }
.onb-lecteur-tete span { font-size: 13px; color: var(--muted-foreground); }
.onb-etiquette { grid-column: 1 / -1; justify-self: start; padding: 5px 11px; border-radius: 99px; background: var(--accent-citron); color: var(--accent-ink); font-size: 12px; font-weight: 650; }
.onb-lignes { display: grid; gap: 11px; margin: 20px 4px 8px; }
.onb-lignes i { display: block; height: 9px; border-radius: 6px; background: color-mix(in srgb, var(--foreground) 14%, transparent); transform-origin: left center; }
html[dir="rtl"] .onb-lignes i { transform-origin: right center; }
.onb-lignes i.court { width: 58%; }
.onb-lignes i.surligne { background: color-mix(in srgb, var(--accent-citron) 70%, transparent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-citron) 70%, transparent); }
.onb-signet { position: absolute; inset-block-end: -16px; inset-inline-end: 22px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--foreground); color: var(--background); box-shadow: 0 10px 24px rgb(0 0 0 / .25); }
.onb-signet svg { width: 22px; height: 22px; }

/* Écran 3 : ordinateur et téléphone avec la même position de lecture, reliés par une coche. */
.onb-appareils { position: relative; display: grid; gap: 0; justify-items: center; width: min(100%, 320px); }
.onb-pc, .onb-tel { display: grid; gap: 10px; padding: 18px; border-radius: 24px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 20px 44px rgb(0 0 0 / .14); }
.onb-pc { width: 100%; }
.onb-tel { width: 72%; justify-self: end; margin-top: -10px; }
.onb-appareil-nom { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: var(--muted-foreground); }
.onb-appareil-nom svg { width: 18px; height: 18px; }
.onb-barre { display: block; height: 8px; border-radius: 6px; background: color-mix(in srgb, var(--foreground) 12%, transparent); overflow: hidden; }
.onb-barre b { display: block; width: 42%; height: 100%; border-radius: inherit; background: var(--foreground); transform-origin: left center; }
html[dir="rtl"] .onb-barre b { transform-origin: right center; }
.onb-position { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.onb-sync { position: absolute; z-index: 2; inset-inline-start: 6%; inset-block-end: 22%; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent-citron); color: var(--accent-ink); box-shadow: 0 10px 24px rgb(0 0 0 / .22); }
.onb-sync svg { width: 22px; height: 22px; }

/* Écran 4 : carte de l'offre. */
.onb-offre { width: min(100%, 330px); padding: 26px; border-radius: 28px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 24px 50px rgb(0 0 0 / .14); }
.onb-prix { display: flex; align-items: baseline; gap: 8px; margin: 0 0 18px; }
.onb-prix strong { font: 700 clamp(44px, 12vw, 58px)/1 var(--police-titre); letter-spacing: -.04em; }
.onb-prix span { color: var(--muted-foreground); font-size: 17px; }
.onb-offre ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.onb-offre li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 550; }
.onb-offre li svg { flex: none; box-sizing: content-box; width: 14px; height: 14px; padding: 4px; border-radius: 50%; background: color-mix(in srgb, var(--accent-citron) 75%, transparent); color: var(--accent-ink); }

/* Bas : points à gauche, bouton compact à droite ; au dernier écran, deux boutons côte à côte. */
.onb-bas { display: grid; padding-top: 14px; }
.onb-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.onb-fin { display: none; }
.onb-cadre.dernier .onb-suite { display: none; }
.onb-cadre.dernier .onb-fin { display: flex; }
.onb-principal, .onb-secondaire { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border: 1px solid transparent; border-radius: 99px; font: 650 15px/1.15 var(--police-texte); text-align: center; text-decoration: none; cursor: pointer; transition: transform .15s ease, background-color .2s ease; }
.onb-principal { background: var(--foreground); color: var(--background); }
.onb-principal svg { width: 18px; height: 18px; }
.onb-principal:hover { background: color-mix(in srgb, var(--foreground) 86%, var(--background)); }
.onb-principal.onb-lime { background: var(--accent-citron); color: var(--accent-ink); }
.onb-principal.onb-lime:hover { background: var(--accent-citron-hover); }
.onb-secondaire { background: transparent; border-color: var(--border); color: var(--foreground); }
.onb-secondaire:hover { background: var(--soft); }
.onb-fin .onb-principal, .onb-fin .onb-secondaire { flex: 1 1 0; min-width: 0; padding-inline: 14px; }
.onb-principal:active, .onb-secondaire:active { transform: scale(.98); }
.onb:focus { outline: none; }
.onb :focus, .onb :focus-visible { outline: none; }
.onb[data-clavier] :focus-visible { outline: 3px solid var(--accent-trait, var(--foreground)); outline-offset: 3px; }
html[dir="rtl"] .onb-principal svg { transform: scaleX(-1); }

/* Mouvement : chaque écran actif rejoue son visuel. Rien ne bouge si le visiteur refuse les animations. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes onb-monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes onb-trace { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes onb-pop { 0% { transform: scale(0); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } }
  @keyframes onb-defile { to { transform: translateY(-50%); } }
  .onb-slide.is-active .onb-texte h2 { animation: onb-monte .6s .1s cubic-bezier(.16, 1, .3, 1) both; }
  .onb-slide.is-active .onb-texte p { animation: onb-monte .6s .22s cubic-bezier(.16, 1, .3, 1) both; }
  .onb-col { animation: onb-defile var(--vitesse, 30s) linear infinite; animation-play-state: paused; }
  .onb-col:nth-child(1) { --vitesse: 34s; }
  .onb-col:nth-child(2) { --vitesse: 26s; animation-direction: reverse; }
  .onb-col:nth-child(3) { --vitesse: 38s; animation-delay: -9s; }
  .onb-slide.is-active .onb-col { animation-play-state: running; }
  .onb-cadre.pause .onb-col { animation-play-state: paused; }
  .onb-slide.is-active .onb-lecteur, .onb-slide.is-active .onb-offre { animation: onb-monte .7s .05s cubic-bezier(.16, 1, .3, 1) both; }
  .onb-slide.is-active .onb-lignes i { animation: onb-trace .55s cubic-bezier(.16, 1, .3, 1) both; }
  .onb-slide.is-active .onb-lignes i:nth-child(1) { animation-delay: .35s; } .onb-slide.is-active .onb-lignes i:nth-child(2) { animation-delay: .5s; }
  .onb-slide.is-active .onb-lignes i:nth-child(3) { animation: onb-trace .7s .85s cubic-bezier(.16, 1, .3, 1) both; }
  .onb-slide.is-active .onb-lignes i:nth-child(4) { animation-delay: .65s; } .onb-slide.is-active .onb-lignes i:nth-child(5) { animation-delay: .8s; }
  .onb-slide.is-active .onb-lignes i:nth-child(6) { animation-delay: .95s; }
  .onb-slide.is-active .onb-signet, .onb-slide.is-active .onb-sync { animation: onb-pop .55s 1.3s cubic-bezier(.34, 1.56, .64, 1) both; }
  .onb-slide.is-active .onb-pc, .onb-slide.is-active .onb-tel { animation: onb-monte .7s cubic-bezier(.16, 1, .3, 1) both; }
  .onb-slide.is-active .onb-tel { animation-delay: .2s; }
  .onb-slide.is-active .onb-barre b { animation: onb-trace 1s .5s cubic-bezier(.16, 1, .3, 1) both; }
  .onb-slide.is-active .onb-offre li { animation: onb-monte .5s cubic-bezier(.16, 1, .3, 1) both; }
  .onb-slide.is-active .onb-offre li:nth-child(1) { animation-delay: .35s; } .onb-slide.is-active .onb-offre li:nth-child(2) { animation-delay: .47s; } .onb-slide.is-active .onb-offre li:nth-child(3) { animation-delay: .59s; }
}
@media (prefers-reduced-motion: reduce) { .onb-slide, .onb-principal, .onb-secondaire { transition: none; } }
@media (max-height: 640px) { .onb-texte h2 { font-size: 26px; } .onb-texte p { font-size: 14.5px; } .onb-lignes { margin-block: 12px 4px; } }

/* Sur téléphone : pas de flèche de retour (on revient en glissant vers la droite) ; « Passer » reste en haut à droite. */
@media (max-width: 639px) {
  .onb-rond { display: none; }
}

/* ===== Ordinateur (900 px et plus) : plein écran, texte à gauche sur 5/12, grand visuel à droite sur 7/12, comme le reste du site.
   Les points et le bouton se placent sous le texte, dans la colonne de gauche. Entre 640 et 899 px, la carte centrée reste. ===== */
@media (min-width: 900px) {
  .onb { inset: 0; width: 100%; height: 100dvh; margin: 0; border-radius: 0; box-shadow: none; }
  .onb-cadre { --gouttiere: clamp(40px, 6vw, 96px); position: relative; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: var(--gouttiere); padding: clamp(24px, 3.5vw, 48px) clamp(32px, 5vw, 80px); }
  .onb-haut { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 2; }
  .onb-pistes { grid-column: 1 / -1; grid-row: 2 / 4; }
  .onb-bas { grid-column: 1; grid-row: 3; align-self: end; position: relative; z-index: 2; padding-top: 0; }
  .onb-slide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr); column-gap: var(--gouttiere); padding-top: 0; }
  .onb-texte { grid-column: 1; grid-row: 1; align-self: end; padding: 0 0 clamp(96px, 14vh, 132px); }
  .onb-texte h2 { max-width: 13ch; margin-bottom: 18px; font-size: clamp(40px, min(4.8vw, 8vh), 76px); line-height: 1; }
  .onb-texte p { max-width: 38ch; font-size: clamp(16px, 1.35vw, 20px); }
  .onb-visuel { grid-column: 2; grid-row: 1; background: var(--soft); border-radius: 40px; overflow: hidden; }
  .onb-collage { border-radius: 40px; -webkit-mask-image: none; mask-image: none; }
  .onb-tuiles { inset: -20% -10% -20% -10%; gap: 18px; }
  .onb-col img { margin-bottom: 18px; border-radius: 22px; }
  .onb-col:nth-child(2) { margin-top: -140px; }
  .onb-lecteur, .onb-appareils, .onb-offre { zoom: 1.45; }
  .onb-actions { justify-content: flex-start; gap: 28px; }
  .onb-suite { justify-content: space-between; max-width: 480px; }
  .onb-principal, .onb-secondaire { min-height: 58px; padding: 0 30px; font-size: 16px; }
  .onb-fin { max-width: 560px; }
  .onb-points li { width: 9px; height: 9px; }
  .onb-points li.actif { width: 36px; }
}
@media (min-width: 900px) and (max-height: 720px) { .onb-lecteur, .onb-appareils, .onb-offre { zoom: 1.15; } .onb-texte { padding-bottom: 88px; } }

/* Écriture de droite à gauche (arabe, hébreu) : la flèche de retour pointe vers la droite. */
html[dir="rtl"] .onb-rond svg { transform: scaleX(-1); }