html, body {
    height: 100%;
    margin: 0;
    font-size: 16px;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
}

a {
    color: var(--gold);
    text-decoration: none;
    font-weight: 600;
}

a:hover {
    color: var(--gold-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Les liens "bouton", contrôles segmentés (toggles / pills) et cartes cliquables
   ne se soulignent jamais au survol. */
.ui-btn:hover,
.liquid-glass-btn:hover,
.nav-spaces .nav-space:hover,
.seg label:hover,
.season-pill:hover,
.scope-toggle a:hover,
.wk-step:hover,
.course-card:hover,
.course-pill:hover,
.license-card:hover,
.license-renew:hover {
    text-decoration: none;
}

.root-content {
    display: flex;
    height: 100vh;
    z-index: 1;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg);
}

.layout-container {
    padding: 0 12px;
    /* Pages AVEC barre latérale : sidebar (~220px) + zone de contenu (~1100px). */
    max-width: 1320px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.layout-container.container,
.layout-container.container-sm,
.layout-container.container-md,
.layout-container.container-lg,
.layout-container.container-xl,
.layout-container.container-xxl {
    /* Pages SANS barre latérale : contenu ~1100px centré, comme les POCs. */
    max-width: 1100px;
    margin: 0 auto;
}

.layout-content-wrapper {
    border-radius: var(--radius);
    margin: 0;
    min-height: 0;
    padding: 0 0 0.5rem 0;
    display: flex;
    flex-direction: row;
    flex: 1;
}

.wrapper-content {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex-grow: 1;
}

/* Fond uni : le contenu repose directement sur le fond de page (--bg),
   plus de panneau ni de glow. Seules les cartes ressortent. */
.layout-content-wrapper .wrapper-content {
    padding: 0;
    color: var(--text);
    background: transparent;
    overflow: hidden;
}

/* Onglets pills */
.nav-pills .nav-link {
    padding: 10px 12px;
    margin: 2px;
    font-size: 0.875rem;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
}

.nav-pills .nav-link:hover {
    color: var(--text);
    background-color: var(--hover);
}

.nav-pills .nav-link.active {
    background-color: var(--gold-soft);
    color: var(--gold-strong);
    border-radius: var(--radius-sm);
}

/** MAIN CONTENT **/
main {
    flex-grow: 1;
    z-index: 2;
    display: flex;
    flex-direction: column;
    background: transparent;
    /* padding-top = hauteur navbar : le contenu démarre sous la barre et scrolle dessous. */
    padding: var(--navbar-height) 0.75rem 0 !important;
    margin: 0 !important;
    border-radius: var(--radius);
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.classic-content {
    margin: 0 auto;
    /* Padding vertical seulement : on garde la gouttière horizontale de colonne
       (.row > *) pour que le contenu ne soit pas rogné par overflow-x. */
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Pages "contenu" : remplir le conteneur (neutralise les col-xl-10 / col-11 hérités).
   Exclut les formulaires centrés volontairement étroits (login, inscription… en .mx-auto). */
.classic-content:not(.mx-auto) {
    width: 100%;
    max-width: 100%;
}

/* Titres en casse normale, hiérarchie par taille/poids. */
.classic-content h1 {
    margin: 1rem 0 0.5rem 0;
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--text);
}

.classic-content h2 {
    padding: 10px 0;
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--text);
}

.classic-content h3 {
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--text);
}

/* h5 / h6 = "eyebrow" : le seul endroit où l'on garde les petites capitales. */
h5 {
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    font-weight: 600;
}

h6 {
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    font-size: 0.72rem;
}

.col.text-end {
    display: flex;
    justify-content: right;
    align-items: center;
}

/* =========================================================
   Desktop compact (1200–1400px, typiquement 1366×768). Écrans
   larges mais peu hauts : on densifie légèrement pour limiter
   le scroll vertical et faire tenir la page. Root font-size
   réduit → tout le dimensionnement en rem se resserre d'un bloc.
   Au-delà de 1400px : strictement inchangé.
   (navbar/logo/sidebar resserrés dans menu.css, même media query)
   ========================================================= */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    :root { --navbar-height: 70px; }
    html { font-size: 15px; }
}

/* =========================================================
   Fondations mobile (≤ 860px). Le shell (header/offcanvas/
   tabbar) est stylé dans menu.css ; ici : hauteur de barre,
   gouttières, safe-area et place réservée à la barre basse.
   ========================================================= */
@media (max-width: 860px) {
    /* Header compact : le token pilote la hauteur de la navbar
       ET le padding-top du contenu (qui démarre sous la barre). */
    :root { --navbar-height: 58px; }

    .layout-container { padding: 0 8px; }

    /* Réécrit le shorthand !important de main : gouttières + safe-area latérale. */
    main {
        padding: var(--navbar-height) calc(0.75rem + env(safe-area-inset-right)) 0 calc(0.75rem + env(safe-area-inset-left)) !important;
    }

    /* Plus de header sur mobile (repris par la barre d'onglets) : le contenu démarre
       tout en haut (juste la safe-area), et scrolle au-dessus de la barre basse. */
    .has-bottom-nav main {
        padding-top: calc(0.5rem + env(safe-area-inset-top)) !important;
        padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important;
    }

    /* La barre d'onglets remplace le footer sur mobile (légal accessible via le menu). */
    .has-bottom-nav .site-footer { display: none; }

    /* Le conteneur de contenu (souvent .col-11) prend toute la largeur : la
       gouttière ~8% à droite serrait inutilement les pages/formulaires. */
    .layout-container .row > .classic-content:not(.mx-auto) {
        flex: 0 0 100%;
        max-width: 100%;
    }
}