/* La Clique — le menu du haut, le même sur toutes les pages (27 oct. 2026).
   Copie exacte du menu de la page Présentation (index.html). Le menu lui-même est écrit par js/menu-site.js. */
.ms{position:relative;z-index:60;background:transparent;font-family:'Outfit',system-ui,sans-serif;color:#e6f1ff}
.ms-in{box-sizing:content-box;max-width:1240px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap}
.ms-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#e6f1ff}
.ms-brand svg{transition:filter .25s}
.ms-brand:hover svg{filter:drop-shadow(0 0 8px rgba(0,255,255,.9))}
.ms-brand span{font-weight:700;letter-spacing:.24em;font-size:15px;white-space:nowrap}
.ms-nav{display:flex;gap:28px;font-size:15px;margin-left:12px}
.ms-nav a{color:#c8d6ea;text-decoration:none;transition:color .2s,text-shadow .2s}
.ms-nav a:hover,.ms-nav a[aria-current="page"]{color:#fff;text-shadow:0 0 12px rgba(0,255,255,.8)}
.ms-act{display:flex;gap:10px;align-items:center;flex-shrink:0}
.ms-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;font:inherit;font-size:15px;border:1px solid rgba(255,255,255,.3);border-radius:999px;color:#e6f1ff;background:rgba(2,5,12,.25);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-decoration:none;cursor:pointer;white-space:nowrap}
.ms-go{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:#fff;color:#07142e;text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap}
.ms-btn,.ms-go{transition:transform .2s ease,box-shadow .25s ease}
.ms-btn:hover,.ms-go:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(0,255,255,.55),0 10px 34px rgba(0,255,255,.45)}
.ms-btn:active,.ms-go:active{transform:translateY(0) scale(.98)}
.ms-ham{display:none;width:44px;padding:0}
.ms-ham:hover{border-color:#00ffff}
.ms a:focus-visible,.ms button:focus-visible{outline:2px solid #00ffff;outline-offset:2px}
@media (max-width:820px){.ms-nav,.ms-go{display:none}.ms-ham{display:inline-flex}}
@media (max-width:420px){
  .ms-in{gap:8px;padding-left:16px;padding-right:16px}
  .ms-act{gap:8px}
  .ms-brand span{letter-spacing:.16em;font-size:14px}
  .ms-compte{padding:0 14px;font-size:14px}
}
@media print{.ms{display:none}}

/* Les barres d'outils propres à une page (progression des cours, retour aux cours…) passent sous le menu
   et restent collées en haut quand on défile, au lieu d'avoir leur propre logo et leur propre menu. */
body .c-top{position:sticky;top:0}

/* Ces pages laissaient de la place pour leur ancienne barre fixe : la barre est maintenant à sa place sous le menu,
   alors on enlève cet espace en trop. --ms-haut = hauteur du menu + de la barre (calculée par js/menu-site.js). */
.c-main{padding-top:28px}
.cm-wrap .c-main{padding-top:32px}
.cm-rail{padding-top:46px}
.a-main,.x-main{padding-top:20px}
@media (max-width:980px){.a-main{padding-top:16px}}
@media (max-width:820px){.cm-wrap .c-main{padding-top:24px}}
@media (min-width:981px){
  body[data-clic] .a-main{height:calc(100vh - var(--ms-haut,150px));padding-top:14px}
}

/* Cours : Mon profil, Paramètres et Déconnexion restent dans la barre ; sur cellulaire, juste les icônes */
.c-nav-ico{display:none}
@media (max-width:820px){
  .c-top{gap:10px}
  .c-nav-user{gap:6px}
  .c-nav-tab{padding:0;width:38px;height:38px;justify-content:center}
  .c-nav-tab span{display:none}
  .c-nav-ico{display:block}
  .c-nav-avatar{width:26px;height:26px}
}