/* theme-visiteur.css — variables ET classes de l'espace visiteur. */

@font-face {
    font-family: 'Inter';
    src: url('/static2/fonts/inter-regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('/static2/fonts/source-sans-pro-regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Merriweather';
    src: url('/static2/fonts/merriweather-regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Nunito';
    src: url('/static2/fonts/nunito-regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/static2/fonts/ibm-plex-sans-regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

:root {
    /* ── Couleurs ── */
    --visiteur-hue-primary:        68;
    --visiteur-sat-primary:        45;
    --visiteur-light-primary:      45;

    --visiteur-hue-secondary:      35;
    --visiteur-sat-secondary:      50;
    --visiteur-light-secondary:    40;

    --visiteur-hue-accent:         15;
    --visiteur-sat-accent:         40;
    --visiteur-light-accent:       32;

    --visiteur-light-bg:           97;
    --visiteur-bg-darken-step:     15;  /* points de luminosité retirés
                                            pour le fond "légèrement
                                            plus sombre" sans photo */

    --visiteur-hue-text:            0;
    --visiteur-sat-text:            0;
    --visiteur-light-text:         17;

    --visiteur-font-family-choice: 'Nunito';
    --visiteur-font-size-scale:    50;
    --visiteur-spacing-scale:      50;
    --visiteur-radius-scale:       70;

    --visiteur-color-primary:   hsl(calc(var(--visiteur-hue-primary) * 3.6), calc(var(--visiteur-sat-primary) * 1%), calc(var(--visiteur-light-primary) * 1%));
    --visiteur-color-secondary: hsl(calc(var(--visiteur-hue-secondary) * 3.6), calc(var(--visiteur-sat-secondary) * 1%), calc(var(--visiteur-light-secondary) * 1%));
    --visiteur-color-accent:    hsl(calc(var(--visiteur-hue-accent) * 3.6), calc(var(--visiteur-sat-accent) * 1%), calc(var(--visiteur-light-accent) * 1%));
    --visiteur-color-bg:        hsl(200, 30%, calc(var(--visiteur-light-bg) * 1%));
    --visiteur-color-bg-darker: hsl(200, 30%, calc((var(--visiteur-light-bg) - var(--visiteur-bg-darken-step)) * 1%));
    --visiteur-color-text:      hsl(calc(var(--visiteur-hue-text) * 3.6), calc(var(--visiteur-sat-text) * 1%), calc(var(--visiteur-light-text) * 1%));

    --visiteur-font-family-base: var(--visiteur-font-family-choice), sans-serif;
    --visiteur-font-size-base:   calc(var(--visiteur-font-size-scale) * 0.02rem);
    --visiteur-radius-base:  calc(var(--visiteur-radius-scale) * 0.01rem);
    --visiteur-spacing-base: calc(var(--visiteur-spacing-scale) * 0.02rem);

    /* ── Hiérarchie de contenu Markdown — h1, h2, h3 uniquement ── */
    --visiteur-content-h1-size:      1.8rem;
    --visiteur-content-heading-step: 0.85;
    --visiteur-content-indent-unit:  1.25rem;

    --visiteur-content-h2-size: calc(var(--visiteur-content-h1-size) * var(--visiteur-content-heading-step));
    --visiteur-content-h3-size: calc(var(--visiteur-content-h2-size) * var(--visiteur-content-heading-step));

    /* ── Nav — variable propre, découplée de content-h2-size même
       si la valeur initiale est identique (formule dupliquée
       volontairement pour pouvoir diverger plus tard) ── */
    --visiteur-nav-pill-font-size:   calc(var(--visiteur-content-h1-size) * var(--visiteur-content-heading-step));
    --visiteur-nav-pill-font-weight: 700;
    --visiteur-nav-pill-bg-alpha:    0.85;

    /* ── Dimensions images ── */
    --visiteur-card-img-height-standard: 200px;
    --visiteur-card-img-height-compact:  180px;
    --visiteur-thumb-size:                50px;
    --visiteur-detail-img-height:        400px;
    --visiteur-detail-img-contain-height: 600px;

    --visiteur-title-group-min-width: 12ch;
}

body {
    font-family: var(--visiteur-font-family-base);
    font-size: var(--visiteur-font-size-base);
    color: var(--visiteur-color-text);
    background-color: var(--visiteur-color-bg);
}

/* ── Logo et bannière ── */
.logo-nav {
    max-height: 50px;
}
.site-banner {
    position: relative;
    width: 100vw;
    height: 300px;
    overflow-x: hidden;   /* ← au lieu de overflow: hidden */
    overflow-y: visible;  /* ← le menu peut dépasser vers le bas */
    left: 50%;
    margin-left: -50vw;
}
.site-banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.site-banner-nav-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
}

/* ── Nav — pastilles semi-transparentes, police agrandie ── */
.site-nav {
    background-color: transparent;
    /* rôle : la barre nav elle-même reste transparente sur l'image */
}
.site-nav .navbar-toggler {
    background-color: hsla(0, 0%, 100%, var(--visiteur-nav-pill-bg-alpha));
    border-radius: var(--visiteur-radius-base);
    border: none;
}
@media (max-width: 991.98px) {
    .site-nav .navbar-collapse.show {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-height: 100vh;
        overflow-y: auto;
        background-color: hsla(0, 0%, 100%, 0.95);
        z-index: 1050;
        padding: var(--visiteur-spacing-base);
        /* rôle : menu ouvert visible en entier sans scroll de page */
    }
}
.navbar-nav .nav-link.nav-pill {
    background-color: hsla(0, 0%, 100%, var(--visiteur-nav-pill-bg-alpha));
    color: var(--visiteur-color-text);
    border-radius: var(--visiteur-radius-base);
    padding: calc(var(--visiteur-spacing-base) * 0.5) var(--visiteur-spacing-base);
    margin: 0 calc(var(--visiteur-spacing-base) * 0.25);
    font-size: var(--visiteur-nav-pill-font-size);
    font-weight: var(--visiteur-nav-pill-font-weight);
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.navbar-nav .nav-link.nav-pill:hover {
    background-color: var(--visiteur-color-primary);
    color: var(--visiteur-color-bg);
}
.nav-pill:hover {
    background-color: var(--visiteur-color-primary);
    color: var(--visiteur-color-bg);
}

/* ── Images de listes/détails ── */
.card-img-cover {
    height: var(--visiteur-card-img-height-standard);
    object-fit: cover;
    width: 100%;
}
.card-img-cover-compact {
    height: var(--visiteur-card-img-height-compact);
    object-fit: cover;
    width: 100%;
}
.thumb-50 {
    height: var(--visiteur-thumb-size);
    width: var(--visiteur-thumb-size);
    object-fit: cover;
}
.detail-img-cover {
    max-height: var(--visiteur-detail-img-height);
    object-fit: cover;
    width: 100%;
}
.detail-img-contain {
    max-height: var(--visiteur-detail-img-contain-height);
    object-fit: contain;
}

/* ── Bloc titre+résumé sur fond image ou fond assombri —
   utilisé à l'identique pour le bloc "page" de l'accueil ET pour
   la page indépendante ── */
.page-block-banner {
    position: relative;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--visiteur-radius-base);
    margin-bottom: var(--visiteur-spacing-base);
}
.page-block-banner.page-banner-tall { min-height: var(--visiteur-page-banner-height); }
.page-block-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.page-block-banner-nofoto {
    background-color: var(--visiteur-color-bg-darker);
}
.page-block-title-group {
    position: relative;   /* ← plus "absolute + transform centré" */
    z-index: 1;
    background-color: hsla(0, 0%, 100%, 0.75);
    border-radius: var(--visiteur-radius-base);
    padding: calc(var(--visiteur-spacing-base) * 0.5) var(--visiteur-spacing-base);
    text-align: center;
    max-width: 90%;
    min-width: var(--visiteur-title-group-min-width);
    width: max-content;
    margin: calc(var(--visiteur-spacing-base) * 0.5) 0;
}
.page-block-title {
    font-weight: bold;
    margin: 0;
    font-size: var(--visiteur-content-h2-size);
}
.page-block-banner-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.page-block-resume {
    margin: 0;
    font-size: calc(var(--visiteur-content-h2-size) * 0.6);
}

/* ── Grille de cards — largeur uniforme, centrage automatique
   des lignes incomplètes via flexbox ── */
.content-cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--visiteur-spacing-base);
    margin-bottom: var(--visiteur-spacing-base);
}
.cards-cols-1 .content-card { flex: 0 1 100%; }
.cards-cols-2 .content-card { flex: 0 1 calc(50% - var(--visiteur-spacing-base) / 2); }
.cards-cols-3 .content-card { flex: 0 1 calc(33.333% - var(--visiteur-spacing-base) * 2 / 3); }
.cards-cols-4 .content-card { flex: 0 1 calc(25% - var(--visiteur-spacing-base) * 3 / 4); }
.cards-cols-5 .content-card { flex: 0 1 calc(20% - var(--visiteur-spacing-base) * 4 / 5); }
@media (max-width: 991.98px) {
    .content-cards-container .content-card { flex-basis: 100% !important; }
}

.content-card {
    background-color: var(--visiteur-color-bg);
    border-radius: var(--visiteur-radius-base);
    padding: var(--visiteur-spacing-base);
    box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.08);
    transition: box-shadow 0.15s ease-in-out;
}
.content-card:hover {
    box-shadow: 0 4px 10px hsla(0, 0%, 0%, 0.12);
}
.content-card-title {
    font-size: var(--visiteur-content-h2-size);
    font-weight: bold;
}
.content-card h2 { font-size: var(--visiteur-content-h2-size); }
.content-card h3 { font-size: var(--visiteur-content-h3-size); }
.content-card ul { padding-left: var(--visiteur-content-indent-unit); }
.content-card strong { font-weight: 700; }
.content-card em { font-style: italic; }
.content-card p { margin-bottom: calc(var(--visiteur-spacing-base) * 0.75); }

.cards-cols-max4 .content-card {
    flex: 0 1 calc(25% - var(--visiteur-spacing-base) * 3 / 4);
}
@media (max-width: 991.98px) {
    .cards-cols-max4 .content-card { flex-basis: 100% !important; }
}
.cards-cols-max4 {
    justify-content: flex-start;
}

/* ── Page indépendante — contenu sous le bloc titre+résumé ── */
.page-standalone h1 {
    text-align: center;
    font-size: var(--visiteur-content-h1-size);
}
.page-standalone h2 {
    text-align: left;
    font-size: var(--visiteur-content-h2-size);
}
.page-standalone h3 {
    text-align: left;
    font-size: var(--visiteur-content-h3-size);
}

.page-standalone ul { padding-left: var(--visiteur-content-indent-unit); }
.page-standalone strong { font-weight: 700; }
.page-standalone em { font-style: italic; }
.page-standalone p { margin-bottom: calc(var(--visiteur-spacing-base) * 0.75); }