/* Espace client « à l'identique de Podia » (addendum du 14/10/2026).
   Mesures relevées sur l'espace membre d'origine : ~/Documents/replique-podia/recon/client/
   (styles.json de chaque écran, captures 04 à 07 et 01). Feuille écrite par nous à partir de
   ces mesures (aucun fichier de Podia repris) ; mêmes jetons que le back-office (jetons.css).
   Gris secondaire #717073 comme Podia (contraste 4,9:1 sur blanc : AA). Relevé au pixel du 19/10 : styles calculés
   de l'espace membre de Podia vus en client (tmp/lms-19-10, rapport RAPPORT-LMS-IDENTIQUE-19-10). */

/* Inter 3.7 (version 3.007, OFL, fichiers « web hinted » de la publication officielle rsms/inter v3.7) : la même
   que celle que sert Podia (fichiers identiques octet pour octet) ; Inter 4 avait des chasses différentes. */
/* Inter 3.7 en deux fichiers par graisse (levier C du 01/11) : « -latin » (≈ 39 Ko au lieu de ≈ 120) porte TOUT ce que
   l'école affiche aujourd'hui (latin, latin étendu A, ponctuation, €, ™, flèches, et chaque caractère relevé dans la
   base et le code qu'Inter dessine) ; le fichier complet d'origine sert le reste (grec, cyrillique, vietnamien…), et
   le navigateur ne le télécharge que si une page en contient. Plages disjointes : un caractère = une seule police.
   Mêmes tracés, mêmes chasses, mêmes crénages : façonnage HarfBuzz identique sur 143 501 lignes de texte réel × 4
   graisses (0 écart). Ne pas toucher aux plages sans refaire cette vérification. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Inter-3.7-Regular.woff2") format("woff2");
  unicode-range: U+180-1C3, U+1C5-1F2, U+1F4-2B2, U+2B4-2BA, U+2BD-2C5, U+2C7-2D9, U+2DB, U+2DD-2FF, U+303, U+305-307, U+309-31E, U+321-326, U+328, U+32A-346, U+348-36E, U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3E1, U+3F0-49D, U+4A0-4FF, U+52F, U+146B, U+1D43, U+1D47-1D48, U+1D4D, U+1D4F-1D50, U+1D52, U+1D56-1D58, U+1D5B, U+1D62-1D65, U+1D9C, U+1DA0, U+1DBB, U+1DBF-1DF5, U+1DFC-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2070-2071, U+2074-208E, U+2090-209C, U+20A0-20AB, U+20AD-20BE, U+20DB-20DC, U+20E3, U+20E8, U+20F0, U+2100-2101, U+2103, U+2105-2106, U+2109, U+2113, U+2116-2117, U+211E-2121, U+2123, U+2126, U+212A-212B, U+212E, U+2132, U+213B, U+214D, U+214F, U+2153, U+215A-2188, U+2202, U+2205-2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2264, U+2303, U+2305, U+2318, U+2325-2327, U+232B, U+2387, U+238B, U+23CE-23CF, U+2423, U+25B2, U+25BC, U+25C0, U+25C6-25C7, U+25CA-25CB, U+25E6, U+2600, U+2605-2606, U+263C, U+2661, U+2665, U+2717, U+2756, U+27EF, U+27F5-27F7, U+2B06, U+2C7C, U+2C7F, U+2DFF, U+2E18, U+A69F, U+A7FF, U+A92E, U+E000, U+E002-E12A, U+F6C3, U+FE20-FE2D, U+1F16A-1F16B; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Inter-3.7-Regular-latin.woff2") format("woff2");
  unicode-range: U+0000-0148, U+014A-017F, U+02B3, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0302, U+0304, U+0308, U+0327, U+0329, U+036F, U+1D49, U+2000-200B, U+2010-2027, U+202F-205F, U+20AC, U+2122, U+2190-2199, U+21A9-21AA, U+21B0-21B1, U+21B3-21B5, U+21BA-21BB, U+21DE-21DF, U+21E4-21E5, U+21E7, U+21EA, U+2212, U+2248, U+2260, U+2265, U+25BA, U+25CF, U+2713, U+2764, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Inter-3.7-Medium.woff2") format("woff2");
  unicode-range: U+180-1C3, U+1C5-1F2, U+1F4-2B2, U+2B4-2BA, U+2BD-2C5, U+2C7-2D9, U+2DB, U+2DD-2FF, U+303, U+305-307, U+309-31E, U+321-326, U+328, U+32A-346, U+348-36E, U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3E1, U+3F0-49D, U+4A0-4FF, U+52F, U+146B, U+1D43, U+1D47-1D48, U+1D4D, U+1D4F-1D50, U+1D52, U+1D56-1D58, U+1D5B, U+1D62-1D65, U+1D9C, U+1DA0, U+1DBB, U+1DBF-1DF5, U+1DFC-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2070-2071, U+2074-208E, U+2090-209C, U+20A0-20AB, U+20AD-20BE, U+20DB-20DC, U+20E3, U+20E8, U+20F0, U+2100-2101, U+2103, U+2105-2106, U+2109, U+2113, U+2116-2117, U+211E-2121, U+2123, U+2126, U+212A-212B, U+212E, U+2132, U+213B, U+214D, U+214F, U+2153, U+215A-2188, U+2202, U+2205-2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2264, U+2303, U+2305, U+2318, U+2325-2327, U+232B, U+2387, U+238B, U+23CE-23CF, U+2423, U+25B2, U+25BC, U+25C0, U+25C6-25C7, U+25CA-25CB, U+25E6, U+2600, U+2605-2606, U+263C, U+2661, U+2665, U+2717, U+2756, U+27EF, U+27F5-27F7, U+2B06, U+2C7C, U+2C7F, U+2DFF, U+2E18, U+A69F, U+A7FF, U+A92E, U+E000, U+E002-E12A, U+F6C3, U+FE20-FE2D, U+1F16A-1F16B; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Inter-3.7-Medium-latin.woff2") format("woff2");
  unicode-range: U+0000-0148, U+014A-017F, U+02B3, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0302, U+0304, U+0308, U+0327, U+0329, U+036F, U+1D49, U+2000-200B, U+2010-2027, U+202F-205F, U+20AC, U+2122, U+2190-2199, U+21A9-21AA, U+21B0-21B1, U+21B3-21B5, U+21BA-21BB, U+21DE-21DF, U+21E4-21E5, U+21E7, U+21EA, U+2212, U+2248, U+2260, U+2265, U+25BA, U+25CF, U+2713, U+2764, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Inter-3.7-SemiBold.woff2") format("woff2");
  unicode-range: U+180-1C3, U+1C5-1F2, U+1F4-2B2, U+2B4-2BA, U+2BD-2C5, U+2C7-2D9, U+2DB, U+2DD-2FF, U+303, U+305-307, U+309-31E, U+321-326, U+328, U+32A-346, U+348-36E, U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3E1, U+3F0-49D, U+4A0-4FF, U+52F, U+146B, U+1D43, U+1D47-1D48, U+1D4D, U+1D4F-1D50, U+1D52, U+1D56-1D58, U+1D5B, U+1D62-1D65, U+1D9C, U+1DA0, U+1DBB, U+1DBF-1DF5, U+1DFC-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2070-2071, U+2074-208E, U+2090-209C, U+20A0-20AB, U+20AD-20BE, U+20DB-20DC, U+20E3, U+20E8, U+20F0, U+2100-2101, U+2103, U+2105-2106, U+2109, U+2113, U+2116-2117, U+211E-2121, U+2123, U+2126, U+212A-212B, U+212E, U+2132, U+213B, U+214D, U+214F, U+2153, U+215A-2188, U+2202, U+2205-2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2264, U+2303, U+2305, U+2318, U+2325-2327, U+232B, U+2387, U+238B, U+23CE-23CF, U+2423, U+25B2, U+25BC, U+25C0, U+25C6-25C7, U+25CA-25CB, U+25E6, U+2600, U+2605-2606, U+263C, U+2661, U+2665, U+2717, U+2756, U+27EF, U+27F5-27F7, U+2B06, U+2C7C, U+2C7F, U+2DFF, U+2E18, U+A69F, U+A7FF, U+A92E, U+E000, U+E002-E12A, U+F6C3, U+FE20-FE2D, U+1F16A-1F16B; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Inter-3.7-SemiBold-latin.woff2") format("woff2");
  unicode-range: U+0000-0148, U+014A-017F, U+02B3, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0302, U+0304, U+0308, U+0327, U+0329, U+036F, U+1D49, U+2000-200B, U+2010-2027, U+202F-205F, U+20AC, U+2122, U+2190-2199, U+21A9-21AA, U+21B0-21B1, U+21B3-21B5, U+21BA-21BB, U+21DE-21DF, U+21E4-21E5, U+21E7, U+21EA, U+2212, U+2248, U+2260, U+2265, U+25BA, U+25CF, U+2713, U+2764, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Inter-3.7-Bold.woff2") format("woff2");
  unicode-range: U+180-1C3, U+1C5-1F2, U+1F4-2B2, U+2B4-2BA, U+2BD-2C5, U+2C7-2D9, U+2DB, U+2DD-2FF, U+303, U+305-307, U+309-31E, U+321-326, U+328, U+32A-346, U+348-36E, U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3E1, U+3F0-49D, U+4A0-4FF, U+52F, U+146B, U+1D43, U+1D47-1D48, U+1D4D, U+1D4F-1D50, U+1D52, U+1D56-1D58, U+1D5B, U+1D62-1D65, U+1D9C, U+1DA0, U+1DBB, U+1DBF-1DF5, U+1DFC-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2070-2071, U+2074-208E, U+2090-209C, U+20A0-20AB, U+20AD-20BE, U+20DB-20DC, U+20E3, U+20E8, U+20F0, U+2100-2101, U+2103, U+2105-2106, U+2109, U+2113, U+2116-2117, U+211E-2121, U+2123, U+2126, U+212A-212B, U+212E, U+2132, U+213B, U+214D, U+214F, U+2153, U+215A-2188, U+2202, U+2205-2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2264, U+2303, U+2305, U+2318, U+2325-2327, U+232B, U+2387, U+238B, U+23CE-23CF, U+2423, U+25B2, U+25BC, U+25C0, U+25C6-25C7, U+25CA-25CB, U+25E6, U+2600, U+2605-2606, U+263C, U+2661, U+2665, U+2717, U+2756, U+27EF, U+27F5-27F7, U+2B06, U+2C7C, U+2C7F, U+2DFF, U+2E18, U+A69F, U+A7FF, U+A92E, U+E000, U+E002-E12A, U+F6C3, U+FE20-FE2D, U+1F16A-1F16B; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Inter-3.7-Bold-latin.woff2") format("woff2");
  unicode-range: U+0000-0148, U+014A-017F, U+02B3, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0302, U+0304, U+0308, U+0327, U+0329, U+036F, U+1D49, U+2000-200B, U+2010-2027, U+202F-205F, U+20AC, U+2122, U+2190-2199, U+21A9-21AA, U+21B0-21B1, U+21B3-21B5, U+21BA-21BB, U+21DE-21DF, U+21E4-21E5, U+21E7, U+21EA, U+2212, U+2248, U+2260, U+2265, U+25BA, U+25CF, U+2713, U+2764, U+FEFF, U+FFFD; }

:root {
  --police: "Inter", sans-serif;
  --c-texte: #06040e;
  --c-attenue: #717073;
  --c-filet: rgba(6, 4, 14, .15);
  --c-bordure: #d6d6d7;
  --c-survol: #ededed;
  --c-survol-leger: #f5f5f5;
  --c-page: #f5f5f5;
  --c-rail: #e9e9e9;
  --c-surface: #fff;
  --c-marque: #fcb900;
  --c-pdf: #d93025;
  --c-danger: #a01910; --c-danger-fond: #f6ebeb;
  --c-succes: #006d3c; --c-succes-fond: #ebf5f1;
  --rail: 60px;
  --barre: 240px;
  --marge-panneau: 8px;
  --ombre-panneau: 0 0 0 1px rgba(6, 4, 14, .15);
  --ombre-popover: 0 0 0 1px rgba(13, 22, 27, .15), 0 8px 16px rgba(13, 22, 27, .15);
  --filet: 0 1px rgba(6, 4, 14, .18);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--police); font-size: 14px; line-height: 24px; font-weight: 400; color: var(--c-texte);
  background: var(--c-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img, svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--c-texte); outline-offset: 2px; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.i-plein { fill: currentColor; stroke: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.attenue { color: var(--c-attenue); }
.mt-16 { margin-top: 16px; }

/* ---------- Boutons (btn-md 36 px, rayon 8, 14 px / 500) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 36px; padding: 6px 12px;
  border-radius: 8px; font-size: 14px; line-height: 24px; font-weight: 500; white-space: nowrap; color: var(--c-texte);
}
.btn-gris { color: var(--c-attenue); }
.btn-gris:hover, .btn-gris[aria-expanded="true"], details[open] > summary.btn-gris { background: rgba(6, 4, 14, .05); color: var(--c-texte); }
@media (max-width: 991.98px) { [data-basculer-apropos][aria-expanded="true"]:not(:hover) { background: none; color: var(--c-attenue); } }
.btn-sombre:hover { background: rgba(6, 4, 14, .05); }
.btn-primaire { background: var(--c-texte); color: #fff; }
.btn-primaire:hover { background: #2b2933; }
.btn-primaire:disabled { background: #9b9b9b; cursor: default; }
.btn-contour { color: var(--c-attenue); box-shadow: inset 0 0 0 1px var(--c-bordure); }
.btn-contour:hover { color: var(--c-texte); box-shadow: inset 0 0 0 1px var(--c-texte); }
.btn-contour[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn-bloc { display: flex; width: 100%; }
.btn-icone { width: 36px; padding: 0; }
.btn-sm { height: 28px; padding: 2px 10px; border-radius: 6px; }
.btn-sm.btn-icone { width: 28px; padding: 0; }
.btn-lien { color: var(--c-texte); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.btn-lien:disabled { color: var(--c-attenue); text-decoration: none; cursor: default; }

.badge {
  display: inline-flex; align-items: center; gap: 4px; min-height: 20px; padding: 2px 6px; border-radius: 6px;
  font-size: 13px; line-height: 13px; color: var(--c-attenue); box-shadow: inset 0 0 0 1px var(--c-bordure); white-space: nowrap;
}
.badges { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------- Coque : rail 60 px + barre latérale 240 px + panneau arrondi ---------- */
.coque { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.navigation { display: flex; flex: none; height: 100%; }
.rail {
  width: var(--rail); flex: none; background: var(--c-rail); padding: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
}
.ecole-icone {
  width: 36px; height: 36px; border-radius: 8px; background: var(--c-texte); display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(6, 4, 14, .18); flex: none;
}
.ecole-icone { overflow: hidden; }
.ecole-icone img { width: 100%; height: 100%; display: block; }
.ecole-icone--petite { width: 28px; height: 28px; border-radius: 6px; }
.rail__bas { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* École active dans le rail (Podia : main-nav-item--active) : carré 36 px teinté, vignette 28 px. */
.rail__ecole { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: rgba(6, 4, 14, .15); flex: none; }
.rail__ecole img { width: 28px; height: 28px; border-radius: 6px; display: block; }
.rail__compte { width: 36px; height: 36px; padding: 4px; border-radius: 8px; display: block; }
.rail__compte:hover { background: rgba(6, 4, 14, .05); }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #eee; color: #999;
  font-size: 14px; line-height: 20px; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(6, 4, 14, .18);
}
.barre {
  width: var(--barre); flex: none; padding: 12px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto;
}
.barre__entete { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 36px; }
.barre__entete .menu { min-width: 0; }
.nom-site { width: 176px; height: 32px; padding: 6px 12px; margin-left: -4px; color: var(--c-texte); justify-content: flex-start; gap: 0; }
.nom-site span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 15px; line-height: 20px; font-weight: 600; text-align: left; }
.nom-site .caret { width: 12px; height: 12px; margin-left: 4px; flex: none; }
.barre__entete .btn-icone { color: var(--c-texte); }
.tiroir-ouvert .barre__entete [data-replier] { background: rgba(6, 4, 14, .08); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 4px 8px; border-radius: 8px; color: var(--c-texte); white-space: nowrap;
  font-size: 14px; line-height: 21px; font-weight: 500;
}
.nav-item:hover { background: rgba(6, 4, 14, .04); }
.nav-item.actif { background: var(--c-survol); }
/* Titre de groupe de la barre latérale (Podia : « Espaces ») : ici « Boutique », livres et formations du site. */
.nav__groupe { margin: 16px 0 6px; padding: 0 8px; font-size: 13px; line-height: 20px; font-weight: 400; color: var(--c-attenue); }
.coque.barre-repliee .barre { display: none; }
@media (min-width: 992px) { .coque--compte .barre { display: none; } .coque--compte .panneau { margin-left: var(--marge-panneau); } }

.panneau {
  flex: 1 1 auto; min-width: 0; margin: var(--marge-panneau) var(--marge-panneau) var(--marge-panneau) 0;
  background: var(--c-surface); border-radius: 8px; box-shadow: var(--ombre-panneau);
  overflow-y: auto; overflow-x: hidden; position: relative;
}
.coque.barre-repliee .panneau { margin-left: var(--marge-panneau); }
.voile { display: none; }

/* En-tête de panneau : 52 px, titre et filtres à gauche, actions à droite. */
.entete-panneau {
  position: sticky; top: 0; z-index: 5; background: var(--c-surface); border-radius: 8px 8px 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 60px; padding: 12px 32px;
}
.entete-panneau--filet { box-shadow: var(--filet); }
.entete-panneau__debut { display: flex; align-items: center; gap: 8px; min-width: 0; }
.entete-panneau__debut > .btn-icone:first-child { margin-left: -10px; }
.entete-panneau__fin { display: flex; align-items: center; gap: 2px; min-width: 0; }
.entete-panneau__fin > .btn-icone:last-child { margin-right: -10px; }
.entete-panneau__fin { flex-shrink: 0; }
.entete-panneau__titre { font-size: 15px; line-height: 20px; font-weight: 600; margin: 0; white-space: nowrap; }
.bouton-tiroir { display: none; }

.contenu { padding: 20px 32px; container-type: inline-size; }
.contenu--etroit { max-width: 832px; }

/* ---------- Menus déroulants (details) ---------- */
.menu { position: relative; }
.popover {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 220px; padding: 4px; background: #fff;
  border-radius: 8px; box-shadow: var(--ombre-popover);
}
.popover--droite { left: auto; right: 0; }
.popover--haut { top: auto; bottom: 0; left: calc(100% + 8px); }
.popover__titre { padding: 6px 8px 2px; font-size: 13px; line-height: 20px; color: var(--c-attenue); }
.popover__sep { height: 1px; margin: 4px 0; background: var(--c-bordure); }
.menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 4px 8px; border-radius: 6px;
  text-align: left; color: var(--c-texte); white-space: nowrap;
}
.menu-item:hover { background: var(--c-survol); }
.menu-item__desc { display: block; font-size: 13px; line-height: 18px; color: var(--c-attenue); white-space: normal; }
.menu-item__coche { margin-left: auto; visibility: hidden; }
.menu-item[aria-current="true"] .menu-item__coche { visibility: visible; }
.menu-item--texte { align-items: flex-start; flex-direction: column; gap: 0; padding-right: 32px; position: relative; }
.menu-item--texte .menu-item__coche { position: absolute; right: 8px; top: 8px; }

/* Menus de choix de la bibliothèque (Podia : action-list--inset) : en-tête gris, puce ronde à gauche, libellé medium. */
.popover--choix { padding: 8px; min-width: 265px; top: 100%; display: flex; flex-direction: column; gap: 2px; }
.popover--descriptions { width: 280px; }
.popover--choix .popover__titre { padding: 8px; font-size: 13px; line-height: 20px; }
.popover--choix .popover__sep { margin: 8px -8px; } /* filet bord à bord, comme Podia */
.menu-choix { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 8px; border-radius: 8px; color: var(--c-texte); }
.menu-choix:hover { background: rgba(6, 4, 14, .04); }
.menu-choix__radio { width: 16px; height: 16px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(6, 4, 14, .25); }
.menu-choix[aria-current="true"] .menu-choix__radio { background: var(--c-texte); box-shadow: inset 0 0 0 5px var(--c-texte), inset 0 0 0 16px #fff; }
.menu-choix__libelle { font-weight: 500; min-width: 0; }
/* « Expiré » est une case à cocher chez Podia (une bascule, pas un choix exclusif). */
.menu-choix__radio--case { border-radius: 4px; position: relative; }
.menu-choix[aria-current="true"] .menu-choix__radio--case { background: var(--c-texte); box-shadow: none; }
.menu-choix[aria-current="true"] .menu-choix__radio--case::after {
  content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.menu-choix--texte .menu-choix__libelle { margin-top: -2px; }
.popover--choix .menu-item__desc { font-weight: 400; line-height: 20px; }
.barre-filtres details[open] > summary.btn-gris { background: none; color: var(--c-attenue); }

/* ---------- Bibliothèque « Produits » ---------- */
.barre-filtres { display: flex; align-items: center; gap: 2px; min-width: 0; }
.recherche { display: inline-flex; align-items: center; position: relative; }
.recherche .i { position: absolute; left: 12px; color: var(--c-attenue); pointer-events: none; }
.recherche input {
  width: 128px; height: 36px; padding: 6px 12px 6px 34px; border: 0; border-radius: 8px; background: transparent;
  font-weight: 500; color: var(--c-texte); transition: width .15s ease;
}
.recherche input::placeholder { color: var(--c-attenue); opacity: 1; }
.recherche input:hover { background: rgba(6, 4, 14, .05); }
.recherche input:focus, .recherche input:not(:placeholder-shown) {
  width: 220px; background: #fff; box-shadow: inset 0 0 0 1px var(--c-texte); outline: none; font-weight: 400;
}
.recherche input::-webkit-search-decoration { display: none; }

/* Grille des produits (retour de Jérémie du 31/10 : cartes « énormes », puis « sur la gauche ») : colonnes de
   largeur fixe 220-240 px calées à gauche, jamais étirées ni centrées quand le client n'a que 2 ou 3 produits.
   4 par ligne en 1440, 6 en 2000. Sous 768 px de contenu, des colonnes de 240 px laisseraient un trou à droite :
   3 colonnes souples, puis 2 sur téléphone. */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 240px)); justify-content: start; gap: 28px 20px; }
@container (max-width: 767px) { .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 599px) { .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } } /* 20 px comme Podia (01/11) */
.groupe + .groupe { margin-top: 32px; }
.groupe__titre { font-size: 16px; line-height: 24px; font-weight: 600; margin-bottom: 12px; }

.ressource { position: relative; display: flex; border-radius: 8px; }
.ressource:hover { background: var(--c-survol-leger); }
.ressource--carte { flex-direction: column; gap: 12px; padding: 8px; margin: -8px; }
.ressource--ligne { flex-direction: row; align-items: flex-start; gap: 12px; padding: 8px; margin: -8px; }
/* Carte : vignette carrée, image entière (contain) sur fond neutre, jamais rognée (couvertures de livres) ;
   filet de 1 px par-dessus pour détacher les images à fond blanc ; carré gris avec un sac s'il n'y en a pas.
   Le ratio fixe réserve aussi la place avant le chargement de l'image (pas de saut de mise en page). */
.ressource__image {
  position: relative; flex: none; display: grid; place-items: center; width: 100%; border-radius: 6px;
  background: var(--c-survol-leger); color: var(--c-attenue); overflow: hidden;
}
.ressource--carte .ressource__image { aspect-ratio: 1 / 1; }
.ressource--carte .ressource__image::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(6, 4, 14, .06); pointer-events: none;
}
.ressource--ligne .ressource__image--vide { box-shadow: inset 0 0 0 1px rgba(6, 4, 14, .06); }
.ressource__image img { width: 100%; height: auto; }
/* En absolu : un height: 100% dans la rangée « auto » de la grille retomberait sur la hauteur naturelle
   (une couverture 2:3 déborderait du carré et serait coupée en bas). */
.ressource--carte .ressource__image img { position: absolute; inset: 0; height: 100%; object-fit: contain; }
.ressource__image .i { width: 32px; height: 32px; stroke-width: 1.5; }
.ressource--ligne .ressource__image { width: 72px; height: 72px; }
.ressource--ligne .ressource__contenu { gap: 6px; }
.ressource--ligne .ressource__image img { height: 100%; object-fit: cover; }
.ressource--ligne .ressource__image .i { width: 20px; height: 20px; }
.ressource__contenu { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ressource__titre {
  font-size: 16px; line-height: 20px; font-weight: 500; color: var(--c-texte);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ressource--ligne .ressource__titre { font-size: 14px; -webkit-line-clamp: 2; }
.ressource__titre:hover { text-decoration: underline; }
.ressource__titre::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ressource__etat { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; color: var(--c-attenue); }
.ressource__actions {
  position: absolute; z-index: 2; top: 16px; right: 16px; display: none; gap: 4px; padding: 4px; background: #fff;
  border-radius: 6px; box-shadow: 0 0 0 1px rgba(13, 22, 27, .15), 0 2px 4px rgba(13, 22, 27, .15);
}
.ressource--ligne .ressource__actions { top: 50%; right: 8px; transform: translateY(-50%); }
.ressource:hover .ressource__actions, .ressource:focus-within .ressource__actions { display: flex; }
.colonnes.apropos-replie > aside { display: none; }
.colonnes.apropos-replie { grid-template-columns: minmax(0, 1fr); }
.liste-ressources { display: flex; flex-direction: column; gap: 16px; }
.anneau { width: 16px; height: 16px; flex: none; }
.anneau circle { fill: none; stroke-width: 2.5; }
.anneau .fond { stroke: var(--c-bordure); }
.anneau .plein { stroke: var(--c-texte); stroke-linecap: round; }
.vide { padding: 80px 20px; text-align: center; color: var(--c-attenue); }
.vide h2 { color: var(--c-texte); font-size: 16px; line-height: 24px; font-weight: 600; margin-bottom: 4px; }
.vide a:not(.btn) { color: var(--c-texte); text-decoration: underline; }

/* ---------- Page d'un produit (livre, cours) : colonne 768 + carte 320 ---------- */
.colonnes { display: grid; grid-template-columns: minmax(0, 768px) 320px; column-gap: 32px; justify-content: center; }
.titre-page { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.72px; margin: 0 0 32px; }
.colonnes > .titre-page { grid-column: 1; grid-row: 1; }
.colonnes > aside { grid-column: 2; grid-row: 2; }
.colonne-principale { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* Repliable (Podia : collapsable-list--flush) : résumé 32 px décalé de 8 px, titre 16/24, triangle 12 px. */
.repliable { margin: 0 -8px; }
.repliable > summary { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 8px; }
.repliable > summary h2 { font-size: 16px; line-height: 24px; font-weight: 600; }
.repliable > summary .caret { width: 12px; height: 12px; transition: transform .15s ease; }
.repliable:not([open]) > summary .caret { transform: rotate(-90deg); }
.repliable__corps { margin: 0 8px; }
.texte { font-size: 14px; line-height: 24px; white-space: pre-line; }
.taille-totale { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--c-attenue); }
/* Fichiers d'un livre (Podia : action-list, vignette 24 px teintée, nom 14/21 medium, taille grise). */
.fichiers { display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; }
.fichier { display: flex; align-items: center; min-height: 32px; padding: 4px 8px; border-radius: 8px; font-size: 14px; line-height: 21px; font-weight: 500; }
.fichier:hover { background: rgba(6, 4, 14, .04); }
.fichier a { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; color: var(--c-texte); }
.fichier__icone {
  flex: none; width: 24px; height: 24px; margin-right: 8px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  color: var(--c-attenue); background: rgba(6, 4, 14, .08);
}
.fichier__icone--pdf { color: #c0392b; background: #f6ebeb; }
.fichier__icone--audio { color: #b45309; background: #fff4e6; }
.fichier__icone .i { width: 16px; height: 16px; }
.fichier__nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 8px; }
/* Taille : rétrécissable comme chez Podia (sur téléphone, « 985 ko » passe sur deux lignes et la rangée fait 50 px). */
.fichier__taille { color: var(--c-attenue); font-weight: 400; flex: 0 1 auto; }
.carte { background: #fff; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--c-bordure); overflow: hidden; }
.carte__image { aspect-ratio: 1 / 1; background: var(--c-survol-leger); display: grid; place-items: center; color: var(--c-attenue); border-bottom: 1px solid var(--c-bordure); }
.carte__image img { width: 100%; height: 100%; object-fit: cover; }
.carte__image .i { width: 40px; height: 40px; stroke-width: 1.4; }
.carte__corps { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.carte--image .carte__image { border-bottom: 0; }
.carte__titre { font-size: 15px; line-height: 20px; font-weight: 600; }
.progression { display: flex; flex-direction: column; gap: 8px; }
/* Barre de progression de Podia : 4 px, fond #e9ecef, remplissage vert vif #04ce73, rayon 8. */
progress.barre-progression {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 4px; border: 0; border-radius: 8px;
  background: #e9ecef; color: #04ce73; overflow: hidden;
}
progress.barre-progression::-webkit-progress-bar { background: #e9ecef; border-radius: 8px; }
progress.barre-progression::-webkit-progress-value { background: #04ce73; }
progress.barre-progression::-moz-progress-bar { background: #04ce73; }
.progression__texte { font-size: 13px; line-height: 20px; color: var(--c-attenue); }
/* Leçons (Podia : action-list--card) : rangées de 32 px, icône 16 + 8, libellé 14/21 medium, active teintée. */
.lecons { display: flex; flex-direction: column; gap: 4px; margin: 0 -8px; }
.lecon-ligne {
  display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 8px; border-radius: 8px; color: var(--c-texte);
  font-size: 14px; line-height: 21px; font-weight: 500;
}
.lecon-ligne:hover { background: rgba(6, 4, 14, .04); }
.lecon-ligne .i { color: var(--c-texte); }
.lecon-ligne.terminee .i { color: var(--c-succes); }
.lecon-ligne.actif { background: rgba(6, 4, 14, .08); }
/* Section pas encore ouverte (diffusion) : leçons sans lien, date ou condition d'ouverture */
.lecon-ligne.verrouillee { cursor: default; }
.lecon-ligne.verrouillee:hover { background: none; }
.verrou { display: block; margin: 0 0 8px; font-size: 13px; line-height: 20px; font-weight: 400; color: var(--c-attenue); }
.section-desc { margin: 4px 0 4px; font-size: 13px; line-height: 20px; color: var(--c-attenue); }
.message-statut { margin-bottom: 20px; padding: 10px 14px; border-radius: 8px; background: var(--c-succes-fond); color: var(--c-succes); }
.message-erreur { margin-bottom: 20px; padding: 10px 14px; border-radius: 8px; background: var(--c-danger-fond); color: var(--c-danger); }

/* ---------- Lecteur de leçon (plein écran, plan latéral) ---------- */
.lecteur { display: flex; min-height: 100vh; background: #fff; }
.plan {
  position: sticky; top: 0; flex: none; width: 320px; height: 100vh; height: 100svh; overflow-y: auto; overflow-x: hidden;
  border-right: 1px solid var(--c-filet); background: #fff; z-index: 20;
}
.lecteur.plan-ferme .plan { display: none; }
.plan__entete {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  height: 53px; padding: 8px; background: #fff; border-bottom: 1px solid var(--c-filet);
}
.plan__corps { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.plan__titre { padding: 4px 0 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.plan__progression { display: flex; flex-direction: column; gap: 8px; margin-top: -8px; padding-bottom: 4px; }
.plan .repliable > summary h3 { font-size: 15px; line-height: 20px; font-weight: 600; }
.plan .lecons { gap: 0; }
.lecon-ligne__commentaires { display: inline-flex; align-items: center; margin-left: 8px; font-size: 13px; line-height: 20px; color: var(--c-attenue); white-space: nowrap; }
.lecon-ligne__commentaires .i { width: 12px; height: 12px; margin-right: 4px; }
.lecteur__principal { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.lecteur__barre {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  height: 53px; padding: 8px 20px; background: #fff; border-bottom: 1px solid var(--c-filet);
}
.lecteur__barre > .ouvrir-plan { margin-left: -10px; }
.lecteur:not(.plan-ferme) .lecteur__barre .ouvrir-plan { visibility: hidden; }
.lecteur__actions { display: flex; align-items: center; gap: 8px; }
.lecteur__actions a[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.case-terminer { gap: 4px; color: var(--c-attenue); }
.case-terminer .case {
  width: 12px; height: 12px; margin: 2px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px currentColor; display: grid; place-items: center;
}
.case-terminer[aria-pressed="true"] { color: var(--c-texte); }
.case-terminer[aria-pressed="true"] .case { background: var(--c-texte); box-shadow: none; color: #fff; }
.case-terminer .case .i { width: 10px; height: 10px; stroke-width: 3; }
.lecteur__contenu { flex-grow: 1; width: 100%; max-width: calc(768px + 40px); margin: 0 auto; padding: 32px 20px; }
.lecteur__titre { font-size: 24px; line-height: 24px; font-weight: 600; letter-spacing: -.03em; margin-bottom: 20px; }
.lecteur__bas { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.lecteur__bas form { display: contents; }

/* Texte riche des leçons, relevé chez Podia le 19/10 (text-longform text-lg) : 16 px / 28 px, marges en bas de bloc. */
.texte-long { font-size: 16px; line-height: 28px; overflow-wrap: anywhere; }
.texte-long > * { margin: 0 0 16px; }
.texte-long > :last-child { margin-bottom: 0; }
.texte-long h1 { font-size: 18px; line-height: 24px; font-weight: 600; margin: 24px 0 12px; }
.texte-long h2 { font-size: 16px; line-height: 24px; font-weight: 600; margin: 20px 0 8px; }
.texte-long h3 { font-size: 15px; line-height: 20px; font-weight: 600; margin: 20px 0 8px; }
.texte-long h4 { font-size: 14px; line-height: 20px; font-weight: 600; margin: 16px 0 4px; }
.texte-long > :first-child { margin-top: 0; }
.texte-long strong, .texte-long b { font-weight: 500; }
.texte-long a { color: var(--c-attenue); text-decoration: underline; }
.texte-long a:hover { color: var(--c-texte); }
.texte-long ul { list-style: disc; padding-left: 32px; }
.texte-long ol { list-style: decimal; padding-left: 32px; }
.texte-long li { margin: 0 0 8px; }
.texte-long li p { margin: 0; }
.texte-long blockquote { margin: 0 0 16px; padding-left: 16px; border-left: 3px solid var(--c-bordure); color: var(--c-attenue); }
.texte-long img { max-width: 100%; height: auto; border-radius: 4px; }
.texte-long .aligne-centre { text-align: center; }
.texte-long .aligne-droite { text-align: right; }
.video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video--vide { display: grid; place-items: center; color: #fff; background: #26242c; }
/* Pièce jointe d'une leçon (Podia : rich-text--file) : cadre blanc, nom souligné, taille entre parenthèses. */
.texte-long > .fichier-joint-bloc { margin: 0; }
.fichier-joint {
  display: inline-block; max-width: 100%; padding: 6px 14px; margin: 0 0 16px; background: #fff; border-radius: 8px;
  box-shadow: 0 0 0 1px var(--c-bordure); color: var(--c-attenue) !important; text-decoration: none !important;
}
.fichier-joint__apercu { display: flex; align-items: center; gap: 8px; }
.fichier-joint .i { flex: 0 1 auto; min-width: 0; }
.fichier-joint__nom { color: var(--c-texte); text-decoration: underline; }
.fichier-joint__taille { color: var(--c-attenue); }

/* ---------- Pages de connexion (fond gris, carte blanche centrée) ---------- */
.auth { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 48px; gap: 20px; }
.auth__marque { display: flex; align-items: center; gap: 8px; font-size: 18px; line-height: 24px; font-weight: 600; }
.auth__carte {
  width: 100%; max-width: 482px; background: #fff; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--c-bordure);
  padding: 20px 24px; display: flex; flex-direction: column; gap: 16px;
}
.auth__titre h1, .auth__titre h2 { font-size: 16px; line-height: 24px; font-weight: 600; }
.auth__titre p { margin-top: 4px; color: var(--c-attenue); }
.auth__carte form { display: flex; flex-direction: column; gap: 16px; }
.champ-groupe { display: flex; flex-direction: column; gap: 2px; }
.champ-groupe label { font-weight: 500; }
/* Connexion par lien, à la mise en page de Podia (01/11) : fond gris #f3f3f3 à toutes les largeurs, titre à gauche,
   bouton noir. Champ et bouton de 44 px et texte du champ en 16 px (Podia : 36 px et 14 px) : cible tactile, et
   Safari sur iPhone zoome sur un champ en dessous de 16 px. */
body.page-auth { background: #f3f3f3; }
.champ--grand { height: 44px; font-size: 16px; }
.btn-grand { min-height: 44px; }
.champ {
  width: 100%; height: 36px; padding: 4.75px 12px; border: 1px solid var(--c-bordure); border-radius: 8px; background: #fff; color: var(--c-texte);
}
.champ::placeholder { color: #98989a; }
.champ:focus { outline: none; border-color: var(--c-texte); box-shadow: 0 0 0 3px rgba(6, 4, 14, .25); }
.champ-code { height: 48px; font-size: 24px; letter-spacing: 10px; text-align: center; font-variant-numeric: tabular-nums; }
.auth__aide { font-size: 13px; line-height: 20px; color: var(--c-attenue); }
.auth__aide a { color: var(--c-texte); text-decoration: underline; text-underline-offset: 2px; }
.auth__liens { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; line-height: 20px; }
.auth__liens form { display: inline; }
/* Pied de Podia (« Propulsé par Podia ») : liens dans une pastille à contour, séparés par des filets. */
.auth__pied {
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--c-bordure);
  font-size: 13px; line-height: 20px; color: var(--c-attenue);
}
.auth__pied a { display: inline-flex; align-items: center; min-height: 24px; }
.auth__pied .sep { width: 1px; height: 16px; background: var(--c-bordure); }
.auth__pied a:hover { color: var(--c-texte); }
.alerte { padding: 10px 12px; border-radius: 8px; background: var(--c-danger-fond); color: var(--c-danger); font-size: 13px; line-height: 20px; }
.cf-turnstile { min-height: 72px; }

/* Toast noir en bas au centre (« Avant de pouvoir continuer, vous devez vous connecter »). */
/* Toast de Podia : pastille noire à 90 %, rayon 32, 13/22 medium sur une ligne, 402 px, à 20 px du bas, centrée
   (sur téléphone elle déborde de l'écran comme chez Podia). */
.toast {
  position: fixed; z-index: 100; left: 50%; bottom: 20px; width: 402px; margin-left: -201px; display: flex; align-items: center;
  padding: 8px 12px 8px 20px; border-radius: 32px; background: rgba(6, 4, 14, .9); color: #fff; white-space: nowrap;
  font-size: 13px; line-height: 22.2857px; font-weight: 500; box-shadow: 0 8px 16px rgba(26, 38, 45, .2); animation: toast-fin .3s ease 8s forwards;
}
.toast span { margin-right: auto; }
.toast button { width: 22px; height: 22px; margin-left: 4px; display: grid; place-items: center; color: #fff; }
.toast button .i { width: 16px; height: 16px; stroke-width: 2.5; }
@keyframes toast-fin { to { opacity: 0; visibility: hidden; } }

/* ---------- Compte et facturation ---------- */
.sections-compte { display: flex; flex-direction: column; gap: 20px; }
.carte--compte { padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.carte--compte h2 { font-size: 15px; line-height: 20px; font-weight: 600; }
.carte--compte p { color: var(--c-texte); }
.carte--compte .aide { color: var(--c-attenue); font-size: 13px; line-height: 20px; }
.carte--compte .aide a { color: var(--c-texte); text-decoration: underline; }
.carte--compte form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.carte--compte form .champ-groupe { width: 100%; max-width: 360px; }
.carte--compte h3 { font-size: 14px; line-height: 24px; font-weight: 600; margin-top: 4px; }
.carte--compte form.en-ligne { flex-direction: row; align-items: center; }
.lignes { display: flex; flex-direction: column; }
.ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 0; border-top: 1px solid var(--c-bordure); }
.ligne:first-child { border-top: 0; }
.ligne__titre { font-weight: 500; }
.ligne__meta { color: var(--c-attenue); font-size: 13px; line-height: 20px; }
.ligne__fin { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ligne__fin a { text-decoration: underline; text-underline-offset: 2px; }
.plan-client + .plan-client { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-bordure); }
.plan-client h3 { font-size: 14px; line-height: 24px; font-weight: 600; }

/* Bouton « Rechercher » de la bibliothèque : icône + libellé sur ordinateur (Podia), icône seule sur téléphone. */
.barre-filtres [data-ouvrir-recherche] { width: auto; padding: 6px 12px; }

/* ---------- Mobile (< 992 px) : rail et barre latérale en tiroir ---------- */
@media (max-width: 991.98px) {
  /* Tiroir de Podia (« nav-push ») : la navigation reste en place, le panneau glisse de 300 px vers la droite et
     s'estompe (opacité 0,2) en 0,2 s ; un voile transparent ferme le tiroir au toucher. */
  .navigation {
    position: fixed; z-index: 50; left: 0; top: 0; bottom: 0; background: var(--c-page);
    visibility: hidden; transition: visibility 0s .2s; /* tiroir fermé : ni visible ni atteignable au clavier */
  }
  .tiroir-ouvert .navigation { visibility: visible; transition: none; }
  .coque { overflow-x: clip; }
  .panneau { transition: transform .2s cubic-bezier(.4, 0, .2, 1), opacity .2s; }
  .tiroir-ouvert .panneau { transform: translateX(300px); opacity: .2; }
  .tiroir-ouvert .voile { display: block; position: fixed; inset: 0; z-index: 40; background: transparent; }
  .coque.barre-repliee .barre { display: flex; }
  /* Sous 992 px, Podia fait défiler la page entière (sur téléphone, la barre de Safari se replie). */
  body { background: #fff; }
  .coque { height: auto; overflow: visible; }
  .panneau, .coque.barre-repliee .panneau { margin: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .entete-panneau { border-radius: 0; box-shadow: none; }
  .bouton-tiroir { display: inline-flex; }
  .colonnes { grid-template-columns: minmax(0, 1fr); }
  .colonnes > aside, .colonne-principale, .colonnes > .titre-page { grid-column: 1; grid-row: auto; }
  .colonnes > aside { display: none; }
  .colonnes > .titre-page { margin-bottom: 32px; }
  .progression { margin-top: 0; }
  /* Lecteur : plan fermé par défaut ; ouvert, il pousse le contenu (320 px), en plein écran sous 576 px. */
  .lecteur:not(.plan-ouvert-mobile) .plan { display: none; }
  .lecteur:not(.plan-ouvert-mobile) .lecteur__barre .ouvrir-plan { visibility: visible; }
  /* Cartes de la bibliothèque comme chez Podia sur téléphone (01/11) : image à ses proportions, sans case grise ni
     filet. Carré réservé tant que l'image n'est pas arrivée (aspect-ratio « auto 1 / 1 ») : pas de saut au chargement
     des couvertures carrées, les plus nombreuses. Sur ordinateur, la vignette carrée du 31/10 reste. */
  .ressource--carte .ressource__image { aspect-ratio: auto; display: block; background: none; }
  .ressource--carte .ressource__image::after { content: none; }
  .ressource--carte .ressource__image img { position: static; height: auto; aspect-ratio: auto 1 / 1; }
  .ressource--carte .ressource__image--vide { aspect-ratio: 1 / 1; display: grid; background: var(--c-survol-leger); box-shadow: inset 0 0 0 1px rgba(6, 4, 14, .06); }
}
/* Sous 576 px (Podia : btn-sm-responsive, container-padding) : boutons en icônes seules, marges de 20 px,
   en-tête qui défile avec la page, plan du lecteur en plein écran. */
@media (max-width: 575.98px) {
  .entete-panneau { position: static; padding: 12px 20px; }
  .barre-filtres .btn span, .entete-panneau__fin .btn span.etiquette { display: none; }
  /* Menus de la barre : calés à 12 px du bord droit de l'écran, sous l'en-tête (Podia). */
  .entete-panneau { position: relative; }
  .barre-filtres .menu { position: static; }
  .barre-filtres .popover { top: 48px; left: auto; right: 12px; }
  .barre-filtres .btn, .barre-filtres [data-ouvrir-recherche] { width: 36px; padding: 0; }
  .recherche input { width: 36px; padding-right: 0; }
  .recherche input::placeholder { color: transparent; }
  .recherche input:focus, .recherche input:not(:placeholder-shown) { width: 160px; }
  .contenu { padding: 0 20px 20px; }
  .plan { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; }
  .auth { padding: 24px 0; }
  .auth__carte { max-width: none; border-radius: 0; box-shadow: inset 0 1px var(--c-bordure), inset 0 -1px var(--c-bordure); padding: 20px; }
}

/* ---------- Quiz (leçon « Quiz ») ---------- */
/* Accueil du quiz (Podia : course-viewer-quiz) : statut en badge à contour, score en texte simple. */
.quiz-accueil { margin: 0; padding-top: 20px; display: flex; flex-direction: column; gap: 20px; }
.quiz-etat { display: flex; gap: 32px; margin: 0; }
.quiz-etat > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.quiz-etat dt { font-size: 13px; line-height: 20px; color: var(--c-attenue); }
.quiz-etat dd { margin: 0; font-weight: 400; }
.pastille { display: inline-flex; align-items: center; margin-top: 3px; padding: 2px 6px; border-radius: 6px; font-size: 13px; line-height: 16px; color: var(--c-attenue); box-shadow: inset 0 0 0 1px var(--c-bordure); }
.pastille--succes { background: var(--c-succes-fond); color: var(--c-succes); box-shadow: none; }
.pastille--echec { background: #fdecea; color: #a61b1b; box-shadow: none; }
.quiz-questions { display: flex; flex-direction: column; gap: 20px; margin: 16px 0 0; padding-left: 20px; }
.quiz-question fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.quiz-question__texte { margin: 0 0 8px; font-weight: 600; }
.quiz-question__description { margin: 0 0 8px; color: var(--c-attenue); }
.quiz-choix { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; cursor: pointer; }
.quiz-choix input { margin-top: 5px; }
.quiz-resultat { margin: 16px 0; padding: 14px 16px; border-radius: 8px; }
.quiz-resultat.reussi { background: var(--c-succes-fond); color: var(--c-succes); }
.quiz-resultat.echoue { background: var(--c-danger-fond); color: var(--c-danger); }
.quiz-resultat__note { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.quiz-verdict { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--c-attenue); }
.quiz-question.juste .quiz-verdict { color: var(--c-succes); }
.quiz-question.fausse .quiz-verdict { color: var(--c-danger); }
.quiz-reponses { margin: 0; padding: 0; list-style: none; }
.quiz-reponses li { padding: 3px 0; color: var(--c-attenue); }
.quiz-reponses li.cochee, .quiz-reponses li.bonne { color: var(--c-texte); }
.quiz-bonne { font-size: 13px; color: var(--c-succes); }
.quiz-libre { margin: 0; white-space: pre-wrap; }

/* ---------- Compte : lignes « libellé · valeur · Modifier », suppression du compte ---------- */
.ligne-reglage { display: flex; align-items: baseline; gap: 16px; padding: 8px 0; }
.ligne-reglage__libelle { min-width: 120px; color: var(--c-attenue); }
.ligne-reglage__valeur { flex: 1; overflow-wrap: anywhere; }
.lien-modifier, .lien-danger { text-decoration: underline; }
.lien-danger { color: #a61b1b; }
.actions-formulaire { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.btn-danger { background: #c62828; color: #fff; }
.btn-danger:disabled { background: #e8a5a5; }
.case-groupe { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; }
.liste-ecoles { margin: 4px 0 16px; padding-left: 20px; }

/* Reçu d'un achat fait chez Podia (Compte › Facturation › Reçu) ; imprimable. */
.recu__entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.recu__parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 16px 0; }
.recu__totaux { margin-top: 8px; }
.recu .ligne--total { border-top: 1px solid currentColor; padding-top: 8px; }
@media print {
  nav, .barre, .voile, .entete-panneau, .recu__imprimer, .recu a.btn, .recu p:last-child { display: none !important; }
  .recu { box-shadow: none; border: 0; }
}

/* Commentaires sous une leçon (Podia, relevés le 19/10) : « N Commentaire(s) » 16/24, entrée à avatar 28 px, nom medium,
   date 12 px grise, texte 14/24 décalé de 36 px ; champ d'une ligne « Ajouter un commentaire », envoi quand il est rempli. */
.commentaires { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.commentaires > h2 { font-size: 16px; line-height: 24px; font-weight: 600; }
.commentaires__fil { display: flex; flex-direction: column; gap: 8px; }
.commentaire { padding: 4px 8px; margin: 0 -8px; border-radius: 8px; }
.commentaire__entete { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; font-size: 14px; line-height: 24px; }
.commentaire__entete strong { font-weight: 500; }
.commentaire__date { font-size: 12px; line-height: 18px; color: var(--c-attenue); }
.commentaire__texte { margin: 0; padding-left: 36px; font-size: 14px; line-height: 24px; overflow-wrap: anywhere; }
.commentaire__actions { padding-left: 32px; }
.commentaire--reponse { margin: 8px 0 0 36px; }
.commentaire__repondre { margin: 4px 0 0 36px; font-size: 14px; }
.commentaire__repondre summary { cursor: pointer; color: var(--c-attenue); font-weight: 500; }
.commentaire-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 4px 0; }
.commentaire-form textarea { width: 100%; min-height: 38px; height: 38px; resize: none; }
.commentaire-form textarea:not(:placeholder-shown) { height: auto; min-height: 76px; }
.commentaire-form textarea:placeholder-shown + .btn { display: none; }
.avatar--xs { width: 28px; height: 28px; font-size: 14px; flex: none; }
.btn-lien { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Page « Non trouvé » (Podia : placeholder centré, largeur fixe 480 px). */
.contenu--centre { overflow: hidden; min-height: calc(100vh - 76px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.placeholder { width: 480px; flex: none; padding: 32px 0; display: flex; flex-direction: column; gap: 16px; text-align: center; }
.placeholder__visuel { margin: 0; }
.pastille-sable { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #f8f0e7; border: 1px solid #edd9c3; }
.pastille-sable .disque { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #a05910; }
.placeholder__entete { display: flex; flex-direction: column; gap: 4px; }
.placeholder__entete h2 { font-size: 16px; line-height: 24px; font-weight: 600; }
.placeholder__entete p { color: var(--c-attenue); }
@media (max-width: 991.98px) { .contenu--centre { min-height: calc(100vh - 60px); } }

/* Page Compte (Podia : /account) : lignes « libellé · valeur · Modifier » dans une colonne de 768 px. */
.contenu--compte { max-width: 832px; margin: 0 auto; }
.reglages { display: flex; flex-direction: column; }
.reglage { display: grid; grid-template-columns: 1fr 1.6fr auto; align-items: center; gap: 16px; min-height: 35px; }
.reglage__libelle { font-weight: 500; }
.reglage__modifier { color: var(--c-attenue); }
.reglage__modifier:hover { color: var(--c-texte); }
.reglages__supprimer { margin-top: 16px; font-size: 13px; }
.reglages__supprimer a { color: var(--c-attenue); text-decoration: underline; }
.contenu--compte .carte { margin-top: 20px; }
/* Compte sur téléphone : colonne de libellé fixe de 76 px, l'adresse e-mail garde la place (elle ne se coupe plus en
   « client- / lms@… »). Après la règle de base : même spécificité, c'est l'ordre qui tranche. */
@media (max-width: 575.98px) { .reglage { grid-template-columns: 76px minmax(0, 1fr) auto; } }
/* Toast sur téléphone : Podia le laisse déborder de l'écran (croix de fermeture coupée à 360 px). Ici il tient dans
   l'écran, à 8 px des bords, sur deux lignes s'il le faut : même pastille noire, croix toujours atteignable. */
@media (max-width: 420px) { .toast { left: 8px; right: 8px; width: auto; margin-left: 0; white-space: normal; border-radius: 20px; } }