/* Pages de contenu de moovini.app (blog, fiches exercices, pages « Pour qui », questions fréquentes) : design system de
   l'app (src/theme.ts du dépôt Moovini) : fond crème #F5F0E8, cartes blanches, texte et titres en pétrole #225B65,
   turquoise #2E8F86, action corail #D16850, rayons 20 et 999, Plus Jakarta Sans 400, 600 et 700. En-tête et pied
   pétrole nuit comme l'accueil. */
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
}
:root {
  /* Jetons de l'app : surface, card, ink, titleInk, muted, faint, brand, brandLight, cta, line, sunken, cardShadow. */
  --nuit: #14292E; --creme: #FAF7F1; --fond: #F5F0E8; --sable: #EFEAE1; --petrole: #225B65; --encre: #225B65; --gris: #5A7177; --pale: #8FA3A8;
  --filet: #D9D3C8; --turquoise: #45B9AD; --vert-eau: #2E8F86; --corail: #EA8069; --corail-fonce: #D16850; --corail-encre: #B84F38;
  --ombre: 0 6px 20px rgba(34,91,101,.12); --ombre-haute: 0 10px 24px rgba(34,91,101,.12);
  --mobilite: #E6F5F2; --mobilite-encre: #2E8F86; --cardio: #FDF1D6; --cardio-encre: #B07A10;
  --force: #E4EEF0; --force-encre: #225B65; --calme: #FCE9E3; --calme-encre: #C4553D;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--fond); color: var(--encre); font: 400 1.0625rem/1.65 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--vert-eau); text-underline-offset: 3px; }
a:hover { color: var(--petrole); }
strong, b { font-weight: 700; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 3px; border-radius: 6px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
svg { width: 15px; height: 18px; flex: none; translate: 0 -2px; }

/* En-tête */
/* La barre reste collée en haut pendant le défilement ; les ancres s'arrêtent sous elle. */
html { scroll-padding-top: 96px; }
.barre { position: sticky; top: 0; z-index: 10; transition: box-shadow .2s; background: var(--nuit); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px max(20px, calc(50% - 540px)); }
.barre .marque img { width: 52px; }
.barre nav { display: flex; align-items: center; gap: 6px 22px; flex-wrap: wrap; justify-content: flex-end; }
.barre nav a { color: var(--creme); text-decoration: none; font-weight: 600; font-size: .95rem; }
.barre nav a[aria-current] { color: var(--turquoise); }
.barre nav a:hover { color: #fff; text-decoration: underline; }
.barre .appli, .bouton { display: inline-flex; align-items: center; gap: 9px; background: var(--corail-fonce); color: #fff !important; border-radius: 999px; padding: 9px 18px 11px; text-decoration: none !important; font-weight: 700; }
.barre .appli:hover, .bouton:hover { background: var(--corail-encre); }
.barre.decollee { box-shadow: 0 4px 18px rgba(20,41,46,.28); }
/* Sur téléphone, le menu tient sur une ligne avec « La séance ». */
@media (max-width: 560px) { .barre nav .long { display: none; } }

/* Retour en haut : apparaît après un écran de défilement. */
.haut-page { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 10; width: 48px; height: 48px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--petrole); color: var(--creme); box-shadow: var(--ombre-haute); cursor: pointer; opacity: 0; visibility: hidden; translate: 0 8px; transition: opacity .2s, translate .2s, visibility .2s, background .2s; }
.haut-page.visible { opacity: 1; visibility: visible; translate: 0 0; }
.haut-page:hover { background: var(--nuit); }
.haut-page:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 3px; }
.haut-page svg { width: 20px; height: 20px; translate: none; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Contenu */
main { max-width: 1080px; margin: 0 auto; padding: 18px 20px 56px; }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .85rem; color: var(--gris); margin-bottom: 22px; }
.ariane li + li::before { content: "›"; margin-right: 8px; color: var(--filet); }
.ariane a { color: var(--gris); }
.entete-page { max-width: 760px; margin-bottom: 26px; }
.surtitre { font-size: .85rem; font-weight: 600; color: var(--corail-encre); letter-spacing: .02em; margin-bottom: 8px; }
h1 { color: var(--petrole); font-size: clamp(1.85rem, 4.4vw, 2.6rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
.chapeau, .chapeau p { font-size: 1.15rem; color: var(--gris); margin-top: 12px; line-height: 1.6; }
h2 { color: var(--petrole); font-size: 1.4rem; line-height: 1.25; letter-spacing: -.01em; font-weight: 700; margin: 38px 0 12px; }
h3 { color: var(--petrole); font-size: 1.12rem; font-weight: 700; margin: 26px 0 8px; }
.texte { max-width: 760px; }
.texte p, .texte ul, .texte ol, .texte blockquote { margin-bottom: 16px; }
.texte ul, .texte ol { padding-left: 22px; }
.texte li { margin-bottom: 6px; }
.texte blockquote { border-left: 4px solid var(--turquoise); padding: 6px 16px; background: var(--mobilite); border-radius: 0 12px 12px 0; }
.texte strong { color: var(--petrole); }

/* Cartes (blog, à lire aussi) */
.cartes { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cartes a { display: flex; flex-direction: column; gap: 6px; height: 100%; background: #fff; border-radius: 20px; padding: 20px; text-decoration: none; color: var(--encre); box-shadow: var(--ombre); border: 1px solid transparent; }
.cartes a:hover { border-color: var(--vert-eau); box-shadow: var(--ombre-haute); }
.cartes strong { color: var(--petrole); font-size: 1.1rem; line-height: 1.3; font-weight: 700; }
.cartes span { color: var(--gris); font-size: .95rem; }
.cartes time { font-size: .8rem; font-weight: 600; color: var(--corail-encre); }
.cartes.grandes strong { font-size: 1.25rem; }
.voisins { margin-top: 44px; }
/* Photo de couverture des articles et des pages « Pour qui », vignette des cartes. */
.couverture { max-width: 960px; margin: 6px 0 30px; }
.couverture img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; box-shadow: var(--ombre); background: var(--sable); }
.cartes a > img { width: calc(100% + 40px); max-width: none; margin: -20px -20px 8px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px 20px 0 0; background: var(--sable); }

/* Exercices */
.groupe h2 span { font-size: .9rem; color: var(--gris); font-weight: 600; margin-left: 6px; }
.grille-fiches { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.grille-fiches a { display: flex; flex-direction: column; gap: 8px; height: 100%; background: #fff; border-radius: 20px; padding: 10px; text-decoration: none; color: var(--petrole); font-weight: 600; box-shadow: var(--ombre); font-size: .95rem; line-height: 1.3; border: 1px solid transparent; }
.grille-fiches a:hover { border-color: var(--vert-eau); }
.grille-fiches img, .grille-fiches video, .grille-fiches .sans-photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--sable); }
/* Image au sol (3:2) : montrée entière dans le carré, la personne allongée n'est pas coupée. */
.grille-fiches .large, .fiche-tete > .large { object-fit: contain; }
.grille-fiches small { color: var(--gris); font-weight: 600; font-size: .78rem; }
.sans-photo { display: grid; place-items: center; font-size: 2.4rem; font-weight: 800; border-radius: 16px; }
.sans-photo.mobilite { background: var(--mobilite) !important; color: var(--mobilite-encre); }
.sans-photo.cardio { background: var(--cardio) !important; color: var(--cardio-encre); }
.sans-photo.force { background: var(--force) !important; color: var(--force-encre); }
.sans-photo.calme { background: var(--calme) !important; color: var(--calme-encre); }
.fiche-tete { display: flex; gap: 22px; align-items: center; max-width: 860px; }
.fiche-tete > img, .fiche-tete > video, .fiche-tete > .sans-photo { width: 140px; height: 140px; flex: none; border-radius: 22px; object-fit: cover; background: var(--sable); }
.pastilles { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pastilles li { background: #fff; border: 1px solid var(--filet); border-radius: 999px; padding: 3px 12px; font-size: .85rem; font-weight: 600; color: var(--petrole); }
.pastilles .famille.mobilite { background: var(--mobilite); color: var(--mobilite-encre); border-color: transparent; }
.pastilles .famille.cardio { background: var(--cardio); color: var(--cardio-encre); border-color: transparent; }
.pastilles .famille.force { background: var(--force); color: var(--force-encre); border-color: transparent; }
.pastilles .famille.calme { background: var(--calme); color: var(--calme-encre); border-color: transparent; }
.reperes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 26px 0 8px; max-width: 860px; }
.reperes div { background: #fff; border-radius: 20px; padding: 12px 16px; box-shadow: var(--ombre); }
.reperes dt { font-size: .8rem; font-weight: 700; color: var(--gris); }
.reperes dd { font-weight: 600; color: var(--petrole); }
.variante { max-width: 860px; }
.variante-corps { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; }
.variante-corps:not(:has(img, video)) { grid-template-columns: 1fr; }
.variante .photo { width: 240px; border-radius: 18px; background: var(--sable); }
.variante .photo.large { width: 240px; }
.accroche { font-weight: 600; color: var(--petrole); }
.etapes, .astuces { padding-left: 22px; margin-bottom: 8px; }
.etapes li, .astuces li { margin-bottom: 8px; }
.objets, .precaution, .prudence { max-width: 860px; }
.precaution { margin-top: 24px; background: var(--cardio); border-radius: 20px; padding: 14px 18px; }
.prudence { margin-top: 24px; font-size: .92rem; color: var(--gris); }
.dans-appli { max-width: 860px; margin-top: 26px; background: var(--nuit); color: var(--creme); border-radius: 20px; padding: 6px 24px 20px; }
.dans-appli h2 { color: var(--creme); margin-top: 18px; }

/* Questions fréquentes */
.faq { max-width: 760px; display: flex; flex-direction: column; gap: 12px; }
.faq details { background: #fff; border-radius: 20px; padding: 4px 20px; box-shadow: var(--ombre); }
.faq summary { cursor: pointer; list-style: none; padding: 12px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h2 { display: inline; font-size: 1.12rem; margin: 0; }
.faq summary::after { content: "+"; float: right; font-weight: 700; color: var(--corail-fonce); font-size: 1.3rem; line-height: 1.4; transition: rotate .2s; }
.faq details[open] summary::after { rotate: 45deg; }
.faq .reponse { padding-bottom: 14px; }
.faq .reponse p + p { margin-top: 10px; }

/* Pied */
.pied { background: var(--nuit); color: #D5E3E2; padding: 44px max(20px, calc(50% - 540px)) 80px; }
.appel { max-width: 760px; }
.appel h2 { color: var(--creme); margin: 0 0 10px; font-size: 1.8rem; }
.appel h2 em { font-style: normal; color: var(--corail); }
.appel p { margin-bottom: 20px; }
.liens { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(250,247,241,.15); }
.liens a { color: var(--creme); text-decoration: none; font-weight: 600; font-size: .94rem; }
.liens a:hover { text-decoration: underline; }
.mention { margin-top: 18px; font-size: .88rem; color: #A9BEBF; }

@media (max-width: 720px) {
  /* Barre compacte sur téléphone : logo et bouton App Store sur une ligne, les liens dessous. */
  html { scroll-padding-top: 112px; }
  .barre { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .barre .marque img { width: 40px; }
  .barre nav { justify-content: flex-start; gap: 6px 18px; }
  .barre .appli { position: absolute; top: 12px; right: 20px; padding: 7px 14px 9px; font-size: .88rem; }
  .fiche-tete { flex-direction: column; align-items: flex-start; }
  .variante-corps { grid-template-columns: 1fr; }
  .variante .photo { width: 100%; max-width: 360px; }
}

/* Page « L'app » (/application/, 24 octobre 2026) : vraies captures de l'app dans un cadre de téléphone, textes et
   écrans en alternance. Source : contenu/application.html. */
.tel { display: block; width: 100%; height: auto; aspect-ratio: 640 / 1387; border-radius: 30px; background: var(--sable);
  border: 6px solid var(--nuit); box-shadow: 0 22px 40px -22px rgba(20,41,46,.55); }
.app-tete { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; align-items: center;
  background: var(--nuit); color: var(--creme); border-radius: 28px; padding: 44px 44px 0; overflow: hidden; }
.app-tete-texte { min-width: 0; padding-bottom: 44px; }
.app-tete h1 { color: var(--creme); font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 800; line-height: 1.08; text-wrap: balance; }
.app-tete h1 em { display: block; font-style: normal; color: var(--corail); }
.app-tete .surtitre { color: var(--turquoise); }
.app-tete .chapeau { color: #D5E3E2; }
.app-appel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; }
.app-appel span { color: #A9BEBF; font-size: .95rem; font-weight: 600; }
.app-tete-tels { position: relative; height: 100%; min-height: 380px; display: flex; justify-content: center; align-items: flex-end; }
.app-tete-tels .tel { position: absolute; bottom: -90px; width: 46%; max-width: 210px; border-color: #050708; }
.app-tete-tels .tel:nth-child(1) { left: 2%; transform: rotate(-8deg); bottom: -130px; opacity: .92; }
.app-tete-tels .tel:nth-child(2) { z-index: 1; width: 52%; max-width: 236px; }
.app-tete-tels .tel:nth-child(3) { right: 2%; transform: rotate(8deg); bottom: -130px; opacity: .92; }

.app-chiffres { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; }
.app-chiffres li { background: #fff; border-radius: 20px; padding: 14px 16px; box-shadow: var(--ombre); color: var(--gris); font-size: .92rem; line-height: 1.4; }
.app-chiffres b { display: block; color: var(--petrole); font-size: 1.12rem; margin-bottom: 2px; }

.app-partie { margin-top: 72px; scroll-margin-top: 20px; }
.app-partie > h2 { margin: 0; font-size: clamp(1.55rem, 3.4vw, 2.1rem); max-width: 760px; }
/* Titre de la partie en tête de la colonne de texte, à côté de l'écran : le numéro sur sa ligne, centré sur sa hauteur. */
/* Les titres tiennent sur une ligne : leur taille suit la largeur de la colonne (le plus long fait environ 18,4 fois sa
   taille, numéro compris), sans descendre sous 1,4rem ; plus étroit, ils passent à la ligne. */
.titre-partie { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; container-type: inline-size; }
.titre-partie h2 { margin: 0; font-size: clamp(1.4rem, calc((100cqw - 56px) / 18.4), 2.1rem); text-wrap: balance; }
.numero { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--corail-fonce); color: #fff; font-weight: 800; }
.app-partie .intro { max-width: 760px; font-size: 1.1rem; color: var(--gris); margin-top: 14px; }
.app-partie > .grille-fiches { margin-top: 18px; }

/* Blocs texte et écrans : la colonne de texte et l'écran restent proches, le couple centré dans la page. */
.bloc { display: grid; grid-template-columns: minmax(0, 660px) auto; justify-content: center; gap: 64px; align-items: center; }
.app-partie .bloc + * { margin-top: 48px; }
.bloc.inverse { grid-template-columns: auto minmax(0, 660px); }
.bloc.inverse .bloc-texte { order: 2; }
.bloc-texte { max-width: 660px; }
.bloc-texte p + p, .bloc-texte p + ul, .bloc-texte ul + p { margin-top: 14px; }
.bloc-tels { display: flex; gap: 18px; justify-content: center; }
.bloc-tels .tel { width: 250px; }
.bloc-tels .tel + .tel { margin-top: 48px; }
.liste { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.liste li { position: relative; padding-left: 28px; }
.liste li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--turquoise); box-shadow: 0 0 0 4px var(--mobilite); }
.ressentis { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ressentis li { border-radius: 16px; padding: 12px 14px; font-size: .98rem; }
.ressentis b { display: block; }
.ressentis .facile { background: var(--cardio); } .ressentis .facile b { color: var(--cardio-encre); }
.ressentis .bien { background: var(--mobilite); } .ressentis .bien b { color: var(--mobilite-encre); }
.ressentis .dur { background: var(--calme); } .ressentis .dur b { color: var(--calme-encre); }

.app-encart { margin-top: 56px; background: var(--nuit); color: var(--creme); border-radius: 24px; padding: 24px 28px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.app-encart p { max-width: 560px; }

.suite { margin-top: 24px; text-align: center; }

@media (max-width: 900px) {
  .app-tete { grid-template-columns: minmax(0, 1fr); padding: 32px 22px 0; }
  .app-tete-texte { padding-bottom: 0; }
  .app-tete-tels { min-height: 400px; margin-top: 8px; }
  .app-tete-tels .tel { bottom: -110px; width: 40%; }
  .app-tete-tels .tel:nth-child(2) { width: 52%; }
  .app-tete-tels .tel:nth-child(1), .app-tete-tels .tel:nth-child(3) { bottom: -150px; }
  .app-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloc, .bloc.inverse { grid-template-columns: 1fr; gap: 24px; }
  .bloc.inverse .bloc-texte { order: 0; }
}
@media (max-width: 560px) {
  .bloc-tels { gap: 12px; }
  .bloc-tels .tel { width: min(250px, 100%); }
  .bloc-tels .tel + .tel { margin-top: 32px; }
  .bloc-tels:has(.tel + .tel) .tel { width: calc(50% - 6px); }
  .app-encart { padding: 20px; }
  .app-tete-tels { min-height: 280px; }
  .app-tete-tels .tel { border-width: 4px; border-radius: 22px; bottom: -70px; }
  .app-tete-tels .tel:nth-child(1), .app-tete-tels .tel:nth-child(3) { bottom: -100px; }
  .app-tete-tels .tel:nth-child(1) { left: -2%; } .app-tete-tels .tel:nth-child(3) { right: -2%; }
}

/* Boutiques : même présentation que sur l’accueil. */
  /* Deux boutons de boutique assortis ; l'annonce reste explicite tant que les apps ne sont pas publiques. */
  .boutiques { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; width: 360px; max-width: 100%; }
  .bientot { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 140px;
    min-height: 64px; min-width: 0; padding: 11px 10px; border-radius: 18px;
    border: 1px solid rgba(250,247,241,.28); background: #203B40; color: #fff;
    text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
  .bientot.apple { background: var(--corail-fonce); border-color: transparent; }
  .bientot:hover { background: #2B4B50; border-color: var(--turquoise); }
  .bientot.apple:hover { background: #B04A33; }
  .bientot:focus-visible { border-radius: 18px; }
  .bientot svg { width: 24px; height: 28px; flex: none; }
  .bientot span { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  .bientot small { font-size: .7rem; font-weight: 600; line-height: 1.2; opacity: .85; }
  .bientot strong { font-size: 1rem; font-weight: 800; white-space: nowrap; line-height: 1.2; letter-spacing: -.02em; }
  @media (max-width: 860px) { .boutiques { justify-content: center; } }
  @media (max-width: 360px) { .boutiques { gap: 8px; } .bientot { min-width: 0; padding: 11px 12px; gap: 8px; } }

.boutiques a, .boutiques a:hover { color: #fff; text-decoration: none; }
.boutiques svg { translate: none; }
.boutiques strong { color: inherit; }

/* La séance de la semaine : une carte par exercice, avec l'image du lecteur de l'app. */
.seance-dates { margin-top: 10px; font-weight: 600; color: var(--vert-eau); }
.seance[hidden] { display: none; }
.seance-tete { position: relative; background: var(--petrole); color: var(--creme); border-radius: 20px; padding: 18px 96px 18px 22px; box-shadow: var(--ombre-haute); }
.seance-tete p { font-size: .85rem; font-weight: 600; color: #A9DDD6; }
.seance-tete h2 { margin: 2px 0 0; color: #fff; font-size: 1.5rem; line-height: 1.25; }
.seance-duree { position: absolute; top: 18px; right: 18px; background: #fff; color: var(--petrole); border-radius: 999px; padding: 3px 12px; font-size: .92rem; font-weight: 700; white-space: nowrap; }
.seance .reperes { max-width: none; margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.mouvements { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-top: 26px; }
.mouvement { display: flex; flex-direction: column; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--ombre); }
.lecteur { position: relative; margin: 0; overflow: hidden; background: var(--sable); }
.lecteur img { width: 100%; aspect-ratio: 480 / 1041; object-fit: cover; }
/* Le clip posé sur le lecteur : invisible jusqu'à sa première image (pas 0, Safari ne jouerait pas une vidéo masquée), fondu en haut et en bas pour ne pas laisser de bord. */
.lecteur video { position: absolute; max-width: none; object-fit: fill; opacity: .01; transition: opacity .25s; -webkit-mask-image: linear-gradient(transparent, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent); mask-image: linear-gradient(transparent, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent); }
.lecteur video.joue { opacity: 1; }
.lecteur picture { display: block; }
/* Sur ordinateur, le lecteur en paysage : le clip remplit l'image, et un calque transparent (titre, temps, consigne, bouton) reste au-dessus de la personne, comme dans l'app. */
@media (min-width: 561px) {
  .mouvements { grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 20px; }
  .lecteur img { aspect-ratio: 852 / 393; }
}
.lecteur video.plein { inset: 0; width: 100%; height: 100%; -webkit-mask-image: none; mask-image: none; }
.lecteur .calque { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; opacity: 0; transition: opacity .25s; }
.lecteur video.joue ~ .calque { opacity: 1; }
.mouvement > div { padding: 14px 16px 16px; }
.mouvement h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; color: var(--petrole); }
.mouvement h3 a { color: inherit; }
.mouvement .rang { color: var(--gris); font-weight: 600; }
.mouvement .pastilles { margin-top: 10px; gap: 6px; }
.mouvement .pastilles li { padding: 2px 10px; font-size: .78rem; }
.pastilles .position { background: var(--petrole); color: #fff; border-color: transparent; }
.pastilles .position.assis { background: var(--vert-eau); }
.pastilles .position.sol { background: var(--corail-encre); }
.pastilles .niveau { display: inline-flex; align-items: center; gap: 6px; }
.crans { display: inline-flex; gap: 2px; }
.crans i { width: 5px; height: 11px; border-radius: 3px; background: var(--filet); }
.crans i.plein { background: var(--vert-eau); }
.mouvement-detail, .mouvement-variantes { margin-top: 10px; font-size: .88rem; line-height: 1.45; color: var(--gris); }
.mouvement-variantes strong { color: var(--petrole); }
@media (max-width: 560px) {
  .mouvements { grid-template-columns: 1fr; gap: 14px; }
  .mouvement > div { padding: 12px 14px; min-width: 0; }
}