/* ============================================================
   OPTERIA : parcours de lecture du blog, v2 (19/10/2026, demande Axel « plus moderne, plus smooth, moins fade »).
   Bulle givrée sur la peinture avec anneau de progression, frise d'étapes reliées avec la vignette de chaque ressource,
   étapes qui apparaissent en cascade, bouton vers la prochaine étape non lue (labo-parcours.js). Sans ombre.
   Posé par outils/generer_blog.py (carte_parcours).
   ============================================================ */
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.lp-carte { --lp-doux: cubic-bezier(.22,1,.36,1); padding: 8px; border-radius: 28px; }

/* ---------- Tête : peinture et bulle givrée ---------- */
.lp-carte .lx-parcours__tete { min-height: 250px; padding: 18px; border-radius: 22px; }
.lp-carte .lx-parcours__bulle { width: min(440px, 100%); max-width: none; padding: 16px 18px 18px; border-radius: 18px;
  background: rgba(255,255,255,.84); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  transition: transform .8s var(--lp-doux); }
@media (hover: hover) { .lp-carte:hover .lx-parcours__bulle { transform: translateY(-3px); } }
.lp-haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.lp-carte .lx-parcours__num { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding-top: 4px; font-size: 12.5px; color: #77777d; }
.lp-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: rgba(251,77,23,.1); color: #d43d0e; font-weight: 500; }
.lp-carte .lx-parcours__bulle h3 { font-size: 23px; line-height: 1.15; letter-spacing: -.025em; }
.lp-carte .lx-parcours__bulle p:last-child { margin-top: 8px; }

/* anneau de progression : labo.js pose --p (0 à 1) sur le <i> */
.lp-carte .lx-progres { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; gap: 0; }
.lp-carte .lx-progres__barre { position: absolute; inset: 0; height: auto; border-radius: 50%; background: rgba(21,23,27,.08); overflow: visible;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); }
.lp-carte .lx-progres__barre i, html[data-theme="nuit"] .lp-carte .lx-progres__barre i { inset: 0; border-radius: 50%; transform: none;
  background: conic-gradient(from -90deg, #FB4D17 calc(var(--p) * 1turn), transparent 0); transition: --p 1.2s var(--lp-doux); }
.lp-carte .lx-progres__txt { position: relative; font-size: 11.5px; color: #77777d; font-variant-numeric: tabular-nums; }
.lp-carte .lx-progres__txt b { color: #15171b; font-weight: 600; }

/* ---------- Frise des étapes ---------- */
.lp-carte .lx-etapes { padding: 12px 4px 4px; margin-bottom: 8px; }
.lp-carte .lx-etapes li { position: relative; }
.lp-carte .lx-etapes li::before, .lp-carte .lx-etapes li::after { content: ""; position: absolute; left: 25px; width: 1.5px; margin-left: -.75px; border-radius: 2px;
  background: var(--line-2, rgba(41,41,41,.14)); transform-origin: 50% 0; transition: background .5s ease; }
.lp-carte .lx-etapes li::before { top: 0; height: calc(50% - 19px); }
.lp-carte .lx-etapes li::after { top: calc(50% + 19px); bottom: 0; }
.lp-carte .lx-etapes li:first-child::before, .lp-carte .lx-etapes li:last-child::after { display: none; }
.lp-carte .lx-etapes li.is-lu::after, .lp-carte .lx-etapes li.is-lu + li::before { background: #2f7d3e; }
html[data-theme="nuit"] .lp-carte .lx-etapes li.is-lu::after, html[data-theme="nuit"] .lp-carte .lx-etapes li.is-lu + li::before { background: #7fd08e; }

.lp-carte .lx-etapes a { display: grid; grid-template-columns: 30px 68px minmax(0, 1fr) auto 28px; align-items: center; gap: 14px; padding: 12px 10px; border-radius: 18px;
  transition: background .35s ease; }
.lp-carte .lx-etape__num { background: var(--lx-carte); transition: background .35s ease, color .35s ease, transform .5s var(--lx-ressort); }
.lp-vig { display: block; width: 68px; height: 51px; border-radius: 12px; overflow: hidden; background: #fefdf9; }
/* cadrée sur la mascotte (le titre de la couverture serait illisible en vignette) : --z, --tx, --ty mesurés par generer_blog.py (cadrage) */
@property --zz { syntax: '<number>'; inherits: true; initial-value: 0; }
.lp-vig { --zz: 0; transition: --zz .9s var(--lp-doux); }
.lp-vig img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%;
  transform: translate(calc(var(--tx, -70%) + (var(--z, 2.4) / 2 - .5) * 100%), calc(var(--ty, -48%) + (var(--z, 2.4) / 2 - .5) * 100%)) scale(calc(var(--z, 2.4) * (1 + var(--zz)))); }
.lp-carte .lx-etape__txt b { font-size: 15.5px; }
.lp-carte .lx-etape__txt small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp-duree { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(41,41,41,.06); font-size: 12px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
html[data-theme="nuit"] .lp-duree { background: rgba(255,255,255,.08); }
.lp-fleche { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--lp-sur-encre, #fff);
  opacity: 0; transform: translateX(-6px) scale(.85); transition: opacity .3s ease, transform .5s var(--lp-doux); }
html[data-theme="nuit"] .lp-carte { --lp-sur-encre: #191919; }
.lp-fleche svg { width: 13px; height: 13px; }
@media (hover: hover) {
  .lp-carte .lx-etapes a:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
  .lp-carte .lx-etapes a:hover .lp-vig { --zz: .06; }
  .lp-carte .lx-etapes a:hover .lp-fleche { opacity: 1; transform: none; }
  .lp-carte .lx-etapes a:hover .lx-etape__num { transform: scale(1.08); }
}
.lp-carte .lx-etapes a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.lp-carte .lx-etapes a:focus-visible .lp-fleche { opacity: 1; transform: none; }

/* ---------- Bouton : commencer, continuer ou relire ---------- */
.lp-go { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; margin: auto 4px 4px; border-radius: 999px;
  background: #191919; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: -.01em; transition: background .25s ease, transform .5s var(--lx-ressort); }
.lp-go svg { width: 15px; height: 15px; transition: transform .45s var(--lp-doux); }
.lp-go:hover { background: #000; } .lp-go:hover svg { transform: translateX(3px); }
.lp-go:active { transform: scale(.985); }
.lp-go:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
html[data-theme="nuit"] .lp-go { background: #fff; color: #191919; } html[data-theme="nuit"] .lp-go:hover { background: #ececec; }
.lp-carte.is-fini .lp-go { background: rgba(47,125,62,.12); color: #2f7d3e; }
html[data-theme="nuit"] .lp-carte.is-fini .lp-go { background: rgba(127,208,142,.14); color: #7fd08e; }

/* ---------- Apparition en cascade quand la carte entre à l'écran (script.js pose .is-in) ---------- */
html.js .lp-carte.reveal .lx-etapes li, html.js .lp-carte.reveal .lp-go { opacity: 0; transform: translateY(14px); }
html.js .lp-carte.reveal .lx-etapes li::before, html.js .lp-carte.reveal .lx-etapes li::after { transform: scaleY(0); }
html.js .lp-carte.reveal.is-in .lx-etapes li { opacity: 1; transform: none;
  transition: opacity .7s ease calc(.2s + var(--i, 0) * .1s), transform .9s var(--lp-doux) calc(.2s + var(--i, 0) * .1s); }
html.js .lp-carte.reveal.is-in .lx-etapes li::before, html.js .lp-carte.reveal.is-in .lx-etapes li::after { transform: none;
  transition: transform .6s var(--lp-doux) calc(.45s + var(--i, 0) * .1s), background .5s ease; }
html.js .lp-carte.reveal.is-in .lp-go { opacity: 1; transform: none; transition: opacity .7s ease .55s, transform .9s var(--lp-doux) .55s, background .25s ease; }

/* ---------- Téléphone ---------- */
@media (max-width: 640px) {
  .lp-carte .lx-parcours__tete { min-height: 210px; padding: 12px; }
  .lp-carte .lx-parcours__bulle h3 { font-size: 20px; }
  .lp-carte .lx-etapes a { grid-template-columns: 30px 56px minmax(0, 1fr); gap: 12px; padding: 10px 6px; }
  .lp-vig { width: 56px; height: 42px; border-radius: 10px; }
  .lp-duree, .lp-fleche { display: none; }
  .lp-carte .lx-etapes li::before, .lp-carte .lx-etapes li::after { left: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-carte *, .lp-carte *::before, .lp-carte *::after, .lp-go { transition: none !important; }
  html.js .lp-carte.reveal .lx-etapes li, html.js .lp-carte.reveal .lp-go, html.js .lp-carte.reveal .lx-etapes li::before, html.js .lp-carte.reveal .lx-etapes li::after { opacity: 1; transform: none; }
}