/* =========================================================
   edulhopi.com — feuille de style principale
   Structure : header / .layout (nav + main) / footer
   ========================================================= */

/* ---------- 1. Variables ---------- */
:root {
    --brand-900: #0e3552;
    --brand-800: #14486f;
    --brand-700: #1b5c8a;
    --brand:     #2980b9;
    --brand-300: #6dd5fa;
    --accent:    #00b894;

    --bg:        #eef4f8;
    --surface:   #ffffff;
    --surface-2: #f6fafc;

    --text:      #1f2933;
    --text-soft: #55606b;
    --border:    #dce6ed;

    --radius:    12px;
    --radius-sm: 8px;
    --shadow:    0 1px 2px rgba(16, 42, 67, .06), 0 8px 24px rgba(16, 42, 67, .07);
    --shadow-sm: 0 1px 3px rgba(16, 42, 67, .10);

    --nav-width: 260px;
    --gap:       24px;

    --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: "JetBrains Mono", "Fira Mono", Consolas, "Courier New", monospace;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--text);
    background-color: var(--bg);
    -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; }

a { color: var(--brand-700); }

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- 3. En-tête ---------- */
header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 24px;
    background: linear-gradient(100deg, var(--brand-800) 0%, var(--brand) 45%, #34c3a4 100%);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

header a { display: inline-flex; }

header img.logo {
    width: 74px;
    height: auto;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .9);
    padding: 4px;
}

header .header-text {
    flex: 1;
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 1.6rem;
    letter-spacing: .2px;
    color: #fff;
}

header p {
    margin: 2px 0 0;
    font-size: .95rem;
    color: rgba(255, 255, 255, .92);
}

/* ---------- 4. Mise en page ---------- */
.layout {
    display: flex;
    align-items: flex-start;   /* indispensable pour la nav "sticky" */
    gap: var(--gap);
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--gap);
}

/* ---------- 5. Menu latéral (desktop) ---------- */
/* Fonctionne que la nav soit écrite en dur (<nav>) ou injectée
   dans <div id="nav-placeholder">. */
.layout > nav,
.layout > #nav-placeholder {
    flex: 0 0 var(--nav-width);
    width: var(--nav-width);
    position: sticky;
    top: var(--gap);
    max-height: calc(100vh - 2 * var(--gap));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: linear-gradient(180deg, var(--brand-800), var(--brand-900));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 10px;
    min-height: 0;
}

/* si le fichier injecté contient lui-même un <nav>, il ne doit pas
   redoubler le fond ni les marges */
#nav-placeholder > nav {
    width: 100%;
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    position: static;
    max-height: none;
    overflow: visible;
    min-height: 0;
}

.layout nav ul,
.layout #nav-placeholder ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.layout nav li,
.layout #nav-placeholder li { margin: 2px 0; }

.layout nav a,
.layout #nav-placeholder a {
    display: block;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, .88);
    font-size: .95rem;
    line-height: 1.35;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.layout nav a:hover,
.layout #nav-placeholder a:hover,
.layout nav a:focus-visible,
.layout #nav-placeholder a:focus-visible {
    background-color: rgba(255, 255, 255, .12);
    color: #fff;
}

/* page courante (classe posée par nav-active.js) */
.layout nav a.is-active,
.layout #nav-placeholder a.is-active,
.layout nav a[aria-current="page"],
.layout #nav-placeholder a[aria-current="page"] {
    background-color: rgba(109, 213, 250, .18);
    border-left-color: var(--brand-300);
    color: #fff;
    font-weight: 600;
}

/* sous-menus : indentation + filet vertical, plus de bloc cyan */
.layout nav ul ul,
.layout #nav-placeholder ul ul {
    margin: 2px 0 6px 14px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, .18);
    background: none;
}

.layout nav ul ul a,
.layout #nav-placeholder ul ul a {
    padding: 7px 12px;
    font-size: .88rem;
    color: rgba(255, 255, 255, .72);
}

/* séparateur discret entre grandes rubriques, si besoin */
.layout nav hr,
.layout #nav-placeholder hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .15);
    margin: 12px 6px;
}

.layout nav h2,
.layout #nav-placeholder h2,
.layout nav .nav-title,
.layout #nav-placeholder .nav-title {
    margin: 14px 14px 6px;
    font-size: .72rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    font-weight: 600;
}

.layout nav img,
.layout #nav-placeholder img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
}

/* barre de défilement sobre dans la nav */
.layout > nav::-webkit-scrollbar,
.layout > #nav-placeholder::-webkit-scrollbar { width: 8px; }
.layout > nav::-webkit-scrollbar-thumb,
.layout > #nav-placeholder::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .22);
    border-radius: 8px;
}

/* ---------- 6. Contenu principal ---------- */
main {
    flex: 1 1 auto;
    min-width: 0;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px 40px 40px;
}

main h1 {
    margin: 0 0 .6em;
    font-size: 1.85rem;
    line-height: 1.25;
    color: var(--brand-900);
}

main h1 + section h1,
main section + h1 {
    margin-top: 1.4em;
    padding-top: .8em;
    border-top: 1px solid var(--border);
}

main h2 {
    margin: 1.8em 0 .6em;
    font-size: 1.3rem;
    color: var(--brand-700);
    display: flex;
    align-items: center;
    gap: .55em;
}

main h2::before {
    content: "";
    width: 6px;
    height: 1.05em;
    background: var(--brand-300);
    border-radius: 3px;
    flex-shrink: 0;
}

main h3 {
    margin: 1.4em 0 .4em;
    font-size: 1.08rem;
    color: var(--brand-800);
}

main section { margin-bottom: 1.6em; }

main p {
    max-width: 78ch;
    margin: 0 0 1em;
}

main a {
    color: var(--brand-700);
    text-decoration-color: rgba(41, 128, 185, .4);
    text-underline-offset: 3px;
    transition: color .15s ease, text-decoration-color .15s ease;
}

main a:hover {
    color: var(--accent);
    text-decoration-color: currentColor;
}

/* Listes de documents */
main ul, main ol {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1em;
    padding-left: 1.4em;
    max-width: 90ch;
}

main li { margin-bottom: .5em; }

main ul { list-style: none; padding-left: 0; }

main ul > li {
    position: relative;
    padding-left: 1.35em;
}

main ul > li::before {
    content: "";
    position: absolute;
    left: .35em;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--brand-300);
}

main ul ul {
    margin: .45em 0 0;
    padding-left: .6em;
    border-left: 2px solid var(--border);
}

main ul ul > li::before {
    background: none;
    border: 2px solid var(--brand-300);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    top: .6em;
}

/* les menus mobiles vivent dans <main> : on annule le style des listes de contenu */
main .mobile-only ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    max-width: none;
    font-size: 1rem;
}

main .mobile-only li {
    margin: 0;
    padding-left: 0;
}

main .mobile-only li::before { content: none; }

code {
    font-family: var(--mono);
    font-size: .9em;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: .1em .38em;
    color: var(--brand-900);
}

pre {
    background: var(--brand-900);
    color: #e8f2f8;
    padding: 16px 18px;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    line-height: 1.55;
}

pre code {
    background: none;
    border: 0;
    color: inherit;
    padding: 0;
}

blockquote {
    margin: 1.2em 0;
    padding: .8em 1.1em;
    background: var(--surface-2);
    border-left: 4px solid var(--brand-300);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-soft);
}

/* ---------- 7. Tableaux ---------- */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2em 0 1.8em;
    font-size: .96rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

thead th {
    background: var(--brand-700);
    color: #fff;
    font-weight: 600;
    text-align: left;
}

th, td {
    border: 0;
    border-bottom: 1px solid var(--border);
    padding: 11px 14px;
    text-align: left;
    vertical-align: top;
}

tbody tr:nth-child(even) { background: var(--surface-2); }
tbody tr:hover { background: #eaf4fb; }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- 8. Pied de page ---------- */
footer {
    background: var(--brand-900);
    color: rgba(255, 255, 255, .82);
    padding: 32px 24px 40px;
    font-size: .93rem;
    text-align: center;
}

footer h2 {
    margin: 0 0 .3em;
    font-size: .78rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--brand-300);
}

footer p {
    margin: 0 auto 1.6em;
    max-width: 70ch;
}

footer p:last-child { margin-bottom: 0; }

footer a {
    color: #cfe9f7;
    text-underline-offset: 3px;
}

footer a:hover { color: #fff; }

/* ---------- 9. Menus mobiles ---------- */
.mobile-only { display: none; }

@media (max-width: 900px) {
    :root { --gap: 14px; }

    .desktop-only { display: none !important; }
    .mobile-only  { display: block; }

    header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 14px 16px;
    }

    header .header-text { margin: 0; }
    header h1 { font-size: 1.3rem; }
    header p  { font-size: .88rem; }

    .layout {
        flex-direction: column;
        align-items: stretch;   /* sinon le contenu large fait déborder la page */
        padding: var(--gap);
        gap: var(--gap);
    }

    main {
        padding: 22px 18px 28px;
        border-radius: var(--radius);
    }

    main h1 { font-size: 1.45rem; }
    main h2 { font-size: 1.15rem; }

    /* bouton ☰ */
    .menu-toggle {
        display: flex;
        align-items: center;
        gap: .5em;
        width: 100%;
        margin-bottom: 10px;
        padding: 13px 16px;
        font-family: inherit;
        font-size: 1.05rem;
        font-weight: 600;
        color: #fff;
        background: linear-gradient(100deg, var(--brand-800), var(--brand));
        border: 0;
        border-radius: var(--radius-sm);
        cursor: pointer;
        box-shadow: var(--shadow-sm);
    }

    .menu-toggle:hover { filter: brightness(1.08); }

    .mobile-menu {
        list-style: none;
        max-height: 0;
        overflow: hidden;
        margin: 0 0 10px;
        padding: 0;
        background: var(--surface);
        border-radius: var(--radius-sm);
        transition: max-height .3s ease-out;
    }

    .mobile-menu.show {
        max-height: 70vh;
        overflow-y: auto;
        border: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
    }

    .mobile-menu a {
        display: block;
        padding: 14px 18px;
        font-size: 1.02rem;
        font-weight: 500;
        color: var(--brand-900);
        text-decoration: none;
        border-bottom: 1px solid var(--border);
        border-left: 3px solid transparent;
    }

    .mobile-menu a:hover,
    .mobile-menu a:focus {
        background-color: #eaf4fb;
        color: var(--brand-700);
    }

    .mobile-menu a.is-active,
    .mobile-menu a[aria-current="page"] {
        background-color: #eaf4fb;
        border-left-color: var(--brand);
        font-weight: 600;
    }

    .mobile-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-menu ul a {
        padding-left: 36px;
        font-size: .95rem;
        color: var(--text-soft);
    }

    .mobile-menu > li:last-child > a { border-bottom: none; }

    /* tableaux défilables plutôt que débordants */
    table {
        display: block;
        overflow-x: auto;
        font-size: .92rem;
    }

    th, td { padding: 9px 11px; }

    footer { padding: 24px 18px 32px; }
}

@media (max-width: 480px) {
    main { padding: 18px 14px 24px; }
    main h1 { font-size: 1.28rem; }
}

/* ---------- 10. Confort de lecture / impression ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}

@media print {
    body { background: #fff; }
    .layout > nav,
    .layout > #nav-placeholder,
    .mobile-only,
    footer { display: none !important; }
    main { border: 0; box-shadow: none; padding: 0; }
    header { background: none; color: #000; }
}