/* =============================================================
   MES COURS — Interface du site (pas la mise en page des cours)
   Tous les composants commencent par « site- ».
   Le css propre aux fragments HTML des cours reste indépendant.
   ============================================================= */

/* 1. Palette, typographie et bases */
:root {
    color-scheme: light;
    --site-navy: #181850;
    --site-blue: #4169e1;
    --site-blue-dark: #294aaf;
    --site-blue-light: #e9efff;
    --site-sky: #f5f8ff;
    --site-ink: #20274a;
    --site-muted: #58647e;
    --site-border: #dce4f3;
    --site-white: #fff;
    --site-error: #942b35;
    --site-error-bg: #fff1f2;
    --site-focus: #f6a623;
    --site-radius: 18px;
    --site-shadow: 0 18px 55px rgb(24 24 80 / 8%);
    --site-font-body: Arial, Helvetica, sans-serif;
    --site-font-title: Garamond, "Palatino Linotype", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { min-height: 100%; }

body.site-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    background: var(--site-sky);
    color: var(--site-ink);
    font: 16px/1.6 var(--site-font-body);
    -webkit-font-smoothing: antialiased;
}

.site-body button, .site-body input { font: inherit; }

.site-body a { color: inherit; }

.site-body :focus-visible {
    outline: 3px solid var(--site-focus);
    outline-offset: 3px;
}

/* 2. En-tête et navigation */
.site-header {
    position: relative;
    z-index: 2;
    background: var(--site-white);
    border-bottom: 1px solid var(--site-border);
}

.site-header::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: linear-gradient(100deg, var(--site-navy), var(--site-blue) 72%, #96b0fb);
    content: "";
}

.site-header__inner, .site-footer__inner, .site-container {
    width: min(100% - 40px, 1100px);
    margin-inline: auto;
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    min-height: 96px;
    padding-block: 15px 12px;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
}

.site-brand__mark {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: linear-gradient(140deg, var(--site-blue), var(--site-navy));
    box-shadow: 0 5px 14px rgb(65 105 225 / 17%);
    color: var(--site-white);
    font: bold 31px/1 var(--site-font-title);
}

.site-brand__text { display: grid; line-height: 1.25; }
.site-brand__text strong {
    color: var(--site-navy);
    font: bold 27px/1.1 var(--site-font-title);
}
.site-brand__text small {
    margin-top: 5px;
    color: var(--site-muted);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.site-nav {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.site-nav__link, .site-nav__group {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
}

.site-nav__link {
    text-decoration: none;
    transition: background 180ms ease, color 180ms ease;
}
.site-nav__link:hover, .site-nav__link--active {
    background: var(--site-blue-light);
    color: var(--site-blue-dark);
}
.site-nav__group {
    background: #f1f4fa;
    color: var(--site-muted);
}
.site-logout { margin: 0; }

/* 3. Contenu général */
.site-main { flex: 1; padding-block: clamp(28px, 5vw, 65px) 76px; }
.site-main--login {
    display: flex;
    align-items: center;
    background:
            radial-gradient(circle at 90% 10%, rgb(65 105 225 / 11%), transparent 35%),
            linear-gradient(180deg, #fbfcff, #eef3fc);
}
.site-content { min-width: 0;  }
.site-content--course {
    padding: clamp(16px, 4vw, 48px);
    border: 10px solid var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-white);
    box-shadow: var(--site-shadow);
}
.site-content--course img, .site-content--course video,
.site-content--course iframe { max-width: 100%; }
.site-content--course pre { max-width: 100%; overflow-x: auto; }

.site-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--site-blue-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.site-page-heading { margin-bottom: 32px; }
.site-page-heading h1, .site-login__intro h1 {
    margin: 0 0 12px;
    color: var(--site-navy);
    font: 700 clamp(34px, 4vw, 50px)/1.12 var(--site-font-title);
}
.site-page-heading p {
    max-width: 65ch;
    margin: 0;
    color: var(--site-muted);
}

.site-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 23px;
    color: var(--site-muted);
    font-size: 14px;
}
.site-breadcrumb a { color: var(--site-blue-dark); text-decoration: none; }
.site-breadcrumb a:hover { text-decoration: underline; }
.site-breadcrumb [aria-current] { color: var(--site-ink); font-weight: 700; }

/* 4. Connexion */
.site-login {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    align-items: center;
    gap: clamp(25px, 7vw, 100px);
    padding-block: 24px;
}
.site-login__intro h1 { max-width: 10ch; }
.site-login__intro p {
    max-width: 42ch;
    margin: 0;
    color: var(--site-muted);
    font-size: 17px;
}
.site-login__card {
    overflow: hidden;
    padding: clamp(25px, 4vw, 38px);
    border: 1px solid var(--site-border);
    border-top: 5px solid var(--site-blue);
    border-radius: var(--site-radius);
    background: var(--site-white);
    box-shadow: var(--site-shadow);
}
.site-login__card-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}
.site-login__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: var(--site-blue-light);
    font-size: 22px;
}
.site-login__card-heading h2 {
    margin: 0;
    color: var(--site-navy);
    font: bold 29px/1.15 var(--site-font-title);
}
.site-login__card-heading p {
    margin: 4px 0 0;
    color: var(--site-muted);
    font-size: 13px;
}
.site-form { display: grid; gap: 21px; }
.site-field { display: grid; gap: 8px; }
.site-field__label { color: var(--site-ink); font-size: 14px; font-weight: 700; }
.site-field__input {
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 1.5px solid #b7c4db;
    border-radius: 10px;
    background: #fff;
    color: var(--site-ink);
    font-size: 18px;
    letter-spacing: 0.03em;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}
.site-field__input:hover { border-color: var(--site-blue); }
.site-field__input:focus {
    border-color: var(--site-blue-dark);
    box-shadow: 0 0 0 4px rgb(65 105 225 / 12%);
}
.site-field__input[aria-invalid="true"] { border-color: var(--site-error); }
.site-field__hint { margin: 0; color: var(--site-muted); font-size: 12px; }
.site-alert {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
}
.site-alert--error {
    border: 1px solid #f1c4c8;
    background: var(--site-error-bg);
    color: var(--site-error);
}
.site-login__help {
    margin: 22px 0 0;
    padding-top: 19px;
    border-top: 1px solid var(--site-border);
    color: var(--site-muted);
    font-size: 13px;
    text-align: center;
}

/* 5. Boutons */
.site-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1.5px solid transparent;
    border-radius: 11px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.site-button--primary {
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    background: var(--site-blue-dark);
    color: #fff;
}
.site-button--primary:hover {
    transform: translateY(-2px);
    background: var(--site-navy);
    box-shadow: 0 8px 22px rgb(24 24 80 / 18%);
}
.site-button--outline {
    border-color: var(--site-border);
    background: #fff;
    color: var(--site-navy);
}
.site-button--outline:hover { background: var(--site-blue-light); }

/* 6. Futures pages : tuiles de chapitres et liste des cours */
.site-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 20px;
}
.site-tile {
    display: flex;
    flex-direction: column;
    gap: 13px;
    min-height: 170px;
    padding: 23px;
    border: 1px solid var(--site-border);
    border-left: 5px solid var(--site-blue);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgb(24 24 80 / 4%);
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.site-tile:hover, .site-course-item:hover {
    transform: translateY(-3px);
    border-color: var(--site-blue);
    box-shadow: 0 14px 30px rgb(24 24 80 / 10%);
}
.site-tile__number, .site-badge {
    align-self: flex-start;
    padding: 4px 9px;
    border-radius: 7px;
    background: var(--site-blue-light);
    color: var(--site-blue-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.site-tile__title {
    margin: 0;
    color: var(--site-navy);
    font: bold 25px/1.2 var(--site-font-title);
}
.site-tile__action { margin-top: auto; color: var(--site-blue-dark); font-size: 13px; font-weight: 800; }
.site-tile--special { border-left-color: #d1851d; }
.site-tile--special .site-tile__number { background: #fff3e1; color: #884d05; }
.site-course-list { display: grid; gap: 14px; }
.site-course-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    border: 1px solid var(--site-border);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 22px rgb(24 24 80 / 4%);
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.site-course-item__body { display: grid; flex: 1; min-width: 0; gap: 4px; }
.site-course-item__title { color: var(--site-navy); font-weight: 800; overflow-wrap: anywhere; }
.site-course-item__arrow { color: var(--site-blue-dark); font-size: 23px; }

/* 7. Pied de page */
.site-footer {
    padding-block: 20px;
    background: linear-gradient(105deg, var(--site-navy), #292f81 76%, var(--site-blue));
    color: #e8edff;
}
.site-footer__inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 12px;
}

/* 8. Responsive et accessibilité */
@media (max-width: 820px) {
    .site-login { grid-template-columns: 1fr; max-width: 550px; margin-inline: auto; gap: 28px; }
    .site-login__intro h1 { max-width: none; }
    .site-header__inner { min-height: 78px; }
    .site-nav { justify-content: flex-start; }
}
@media (max-width: 520px) {
    .site-header__inner, .site-footer__inner, .site-container {
        width: min(100% - 28px, 1100px);
    }
    .site-header__inner { gap: 14px; }
    .site-brand__mark { width: 44px; height: 44px; }
    .site-brand__text strong { font-size: 24px; }
    .site-nav { flex-basis: 100%; order: 3; }
    .site-logout { margin-left: auto; }
    .site-login__card { padding: 25px 19px; }
    .site-course-item { gap: 11px; padding: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .site-body *, .site-body *::before, .site-body *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}