/* ==========================================================================
   Thème « crème » de la barre de navigation et du pied de page
   --------------------------------------------------------------------------
   Pages publiques uniquement : le template pose class="theme-cream" sur
   <body> (bloc Jinja body_class de base.html) et charge cette feuille dans
   son bloc extra_css. Sans la classe, base.html rend la barre et le pied de
   page marine/teal habituels : dashboard, pages connectées et pages
   d'authentification ne chargent même pas ce fichier.

   Toutes les règles sont préfixées body.theme-cream : elles l'emportent sur
   les règles « body .navbar » / « body .footer » de base.html par
   spécificité, sans !important. Couleurs en variables --tc-* déclarées sur
   body.theme-cream ; ./check_css.py les signale comme hors palette du site,
   c'est attendu pour cette feuille.
   ========================================================================== */
body.theme-cream {
    --tc-bg: #FAF8F4;                       /* fond de la barre au repos */
    --tc-bg-glass: rgba(250, 248, 244, .85);/* fond de la barre au défilement */
    --tc-line: #E8E2D9;                     /* bordure basse au repos */
    --tc-line-glass: rgba(232, 226, 217, .6);
    --tc-line-light: #F0EBE3;               /* séparateurs du menu mobile */
    --tc-ink: #1C1814;                      /* logo, lien actif, hamburger */
    --tc-mute: #6B5F54;                     /* encre secondaire (bordures de survol) */
    --tc-link: #4A4038;                     /* liens de la barre au repos (≥ 4,5:1 sur le verre, pire pixel compris) */
    --tc-accent: #D97757;                   /* soulignement, bouton S'inscrire */
    --tc-accent-dark: #B85E3F;              /* survol du bouton */
    --tc-accent-light: #F0A882;             /* icônes de contact du pied de page */
    --tc-accent-bg: #FDF0E8;                /* fond de l'entrée active du panneau mobile */
    --tc-secondary: #A0522D;                /* mot-symbole : contour de « Bein », « Sciences.org » (5,3:1 sur crème) */
    --tc-secondary-light: #C88A6A;          /* survols des liens du pied de page (6,1:1 sur #1C1814) */
    --tc-secondary-dark: #7D3F22;           /* liens de la page d'erreur (8,1:1 sur blanc) ; = --of-secondary-dark de offres.css */
    --tc-foot-1: #1C1814;                   /* pied de page : dégradé */
    --tc-foot-2: #2A2018;
    --tc-foot-text: rgba(255, 255, 255, .72);
    --tc-foot-legal: rgba(255, 255, 255, .55);
    --tc-foot-sep: rgba(255, 255, 255, .12);
    --tc-foot-chip: rgba(255, 255, 255, .06);
    --tc-white: #FFFFFF;
    --tc-font: "Inter", system-ui, -apple-system, sans-serif;
}

/* ---- Barre de navigation ---------------------------------------------- */
body.theme-cream .navbar {
    background: var(--tc-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--tc-line);
    box-shadow: none;
    transition: background 200ms ease, border-color 200ms ease;
}
/* Au défilement (classe .scrolled posée par main.js après 50 px) : verre.
   Lisible au-dessus d'une section blanche comme d'une section #F3EFE8 : le
   fond à 72 % ne laisse passer qu'une teinte, pas du texte. */
body.theme-cream .navbar.scrolled {
    background: var(--tc-bg-glass);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    border-bottom-color: var(--tc-line-glass);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.theme-cream .navbar.scrolled { background: var(--tc-bg); border-bottom-color: var(--tc-line); }
}
/* Logo : image inchangée (le client la refera) ; encre pour un éventuel texte. */
body.theme-cream .navbar .logo { color: var(--tc-ink); }

/* ---- Mot-symbole (pages publiques) ------------------------------------
   « Bein » en Pacifico, « Sciences.org » en Nunito Black, à la place de
   headerlogo.png (75 Ko pour 28 px, et 2,0:1 sur le pied de page sombre).
   Fond clair : « Bein » blanc cerné de terracotta, « Sciences.org »
   terracotta (5,3:1 sur crème). Pied de page : blanc plein, « Sciences.org »
   en --tc-secondary-light (5,5:1 sur le dégradé). Polices en display=swap :
   les replis système tiennent la ligne en attendant. */
body.theme-cream .bs-mark {
    display: inline-flex;
    align-items: baseline;
    gap: .1em;
    font-size: 24px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}
body.theme-cream .bs-mark__script {
    font-family: 'Pacifico', cursive;
    font-weight: 400;
    font-size: 1.08em;
    color: var(--tc-white);
    -webkit-text-stroke: .075em var(--tc-secondary);   /* ≈ 2 px à 26 px : l'épaisseur du contour du logo d'origine */
    paint-order: stroke fill;
}
body.theme-cream .bs-mark__sans {
    font-family: 'Nunito', var(--tc-font);
    font-weight: 900;
    color: var(--tc-secondary);
    letter-spacing: -0.01em;
}
body.theme-cream .navbar .logo-wordmark { height: 34px; align-items: center; }   /* même encombrement vertical que l'image */
body.theme-cream .navbar .logo-wordmark::after { content: none; }                 /* style.css souligne tout lien hors .btn/.nav-link */
body.theme-cream .navbar .logo-wordmark:hover .bs-mark,
body.theme-cream .navbar .logo-wordmark:focus-visible .bs-mark { opacity: .85; }
body.theme-cream .footer .bs-mark--dark .bs-mark__script { -webkit-text-stroke: 0; }
body.theme-cream .footer .bs-mark--dark .bs-mark__sans { color: var(--tc-secondary-light); }
@media (max-width: 480px) {
    body.theme-cream .navbar .bs-mark { font-size: 21px; }
}

/* Liens : encre douce, encre pleine au survol avec soulignement animé. */
body.theme-cream .nav-link {
    color: var(--tc-link);
    font-family: var(--tc-font);
    font-size: 15px;
    font-weight: 500;
    background: transparent;
}
body.theme-cream .nav-link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 2px;
    height: 2px;
    border-radius: 1px;
    background: var(--tc-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 200ms ease;
}
body.theme-cream .nav-link:hover,
body.theme-cream .nav-link:focus-visible { color: var(--tc-ink); background: transparent; }
body.theme-cream .nav-link:hover::after,
body.theme-cream .nav-link:focus-visible::after { transform: scaleX(1); }
body.theme-cream .nav-link[aria-current="page"],
body.theme-cream .nav-link.is-active,
body.theme-cream .nav-link.active { color: var(--tc-ink); font-weight: 600; }
body.theme-cream .nav-link[aria-current="page"]::after,
body.theme-cream .nav-link.is-active::after,
body.theme-cream .nav-link.active::after { transform: scaleX(1); background: var(--tc-accent); }
@media (prefers-reduced-motion: reduce) {
    body.theme-cream .nav-link::after, body.theme-cream .navbar { transition: none; }
}

/* Boutons de la barre : le système du site public (offres.css), taille
   compacte. Connexion = secondaire (contour et texte terracotta, 5,3:1 sur
   crème), S'inscrire = principal (blanc sur terracotta, 5,6:1). Survols :
   voile + terracotta foncé / terracotta foncé. Anneau de focus terracotta. */
body.theme-cream .btn-nav-login,
body.theme-cream .btn-nav-register {
    font-family: var(--tc-font);
    font-weight: 600;
    border-width: 2px;
    border-radius: 9999px;
    box-shadow: none;
}
body.theme-cream .btn-nav-login {
    color: var(--tc-secondary);
    border-color: var(--tc-secondary);
    background: transparent;
}
body.theme-cream .btn-nav-login:hover,
body.theme-cream .btn-nav-login:focus-visible { background: var(--tc-accent-bg); border-color: var(--tc-secondary-dark); color: var(--tc-secondary-dark); }
body.theme-cream .btn-nav-register {
    background: var(--tc-secondary);
    color: var(--tc-white);
    border-color: var(--tc-secondary);
}
body.theme-cream .btn-nav-register:hover,
body.theme-cream .btn-nav-register:focus-visible { background: var(--tc-secondary-dark); border-color: var(--tc-secondary-dark); color: var(--tc-white); transform: none; box-shadow: none; }
body.theme-cream .btn-nav-login:focus-visible,
body.theme-cream .btn-nav-register:focus-visible { outline: 2px solid var(--tc-secondary); outline-offset: 3px; }

/* Hamburger et menu mobile déployé. */
/* Le comportement du voile vit dans style.css (toutes les pages) ; seule
   sa teinte est propre au theme : encre chaude plutot qu'ardoise. */
body.theme-cream .nav-overlay { background: rgba(28, 24, 20, .45); }
body.theme-cream .mobile-menu-toggle { color: var(--tc-ink); }
body.theme-cream .mobile-menu-toggle:hover { background: var(--tc-line-light); }
body.theme-cream .menu-icon,
body.theme-cream .menu-icon::before,
body.theme-cream .menu-icon::after { background: var(--tc-ink); }
body.theme-cream .mobile-menu-toggle.active .menu-icon { background: transparent; }
/* Entre 769 et 920 px, base.html empile déjà les liens sous le logo alors que
   style.css n'affiche le bouton hamburger qu'à partir de 768 px : la barre
   était cassée dans cet intervalle. On y garde la disposition bureau. */
@media (min-width: 769px) and (max-width: 920px) {
    body.theme-cream .nav-links { width: auto; border-top: 0; padding-top: 0; }
    body.theme-cream .navbar .container { flex-wrap: nowrap; }
}
/* Panneau mobile (≤ 768 px, là où style.css affiche le hamburger). */
@media (max-width: 768px) {
    body.theme-cream .nav-links {
        background: var(--tc-bg);              /* opaque, jamais en verre */
        border-top: 1px solid var(--tc-line-light);
        position: relative;
        z-index: 51;
    }
    body.theme-cream .nav-link {
        background: transparent;
        border-bottom: 1px solid var(--tc-line-light);
        border-left: 3px solid transparent;
        border-radius: 0;
        min-height: 48px;
        padding: 12px 16px;
        font-size: 16px;
        justify-content: flex-start;
        text-align: left;
    }
    body.theme-cream .nav-link:hover { background: var(--tc-line-light); }
    body.theme-cream .nav-link::after { content: none; }
    body.theme-cream .nav-link[aria-current="page"] { background: var(--tc-accent-bg); border-left-color: var(--tc-accent); }
    /* Boutons en bas, pleine largeur, séparés des entrées par un espace ;
       15 px et 48 px de haut. !important : style.css impose « .btn {
       font-size: .875rem !important } » sous 480 px (12,25 px rendus). */
    body.theme-cream .btn-nav-login,
    body.theme-cream .btn-nav-register { font-size: 15px !important; padding: 12px 20px !important; min-height: 48px; }
    body.theme-cream .btn-nav-login { order: 0; margin-top: 16px; }   /* style.css : order 2 / 1 → Connexion d'abord */
    /* Connexion d'abord, S'inscrire ensuite : style.css inverse l'ordre (order: 1
       sur S'inscrire) et lui ajoute un filet ; neutralisés ici. */
    body.theme-cream .btn-nav-register { order: 0; border-top-width: 2px; margin-top: 0; }
    /* Voile derrière le panneau et blocage du défilement pendant qu'il est ouvert. */
    body.theme-cream.nav-open { overflow: hidden; }
}
@media (max-width: 480px) {
    /* style.css : .navbar { height: 56px } fait déborder le panneau ouvert ;
       et base.html masque les <span> des liens (libellés vides) : les deux
       sont neutralisés sur les pages publiques, le dashboard garde les siens. */
    body.theme-cream .navbar { height: auto; }
    body.theme-cream .nav-link span { display: inline; }
}

/* ---- Pied de page ----------------------------------------------------- */
body.theme-cream .footer {
    color: var(--tc-foot-text);
    background: linear-gradient(160deg, var(--tc-foot-1) 0%, var(--tc-foot-2) 100%);
}
body.theme-cream .footer .f-brand { color: var(--tc-white); }
body.theme-cream .footer .f-blurb { color: var(--tc-foot-text); font-family: var(--tc-font); }
body.theme-cream .footer .f-col h3.f-title {
    color: var(--tc-white);
    font-family: var(--tc-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
body.theme-cream .footer .f-col a { color: var(--tc-foot-text); font-family: var(--tc-font); }
body.theme-cream .footer .f-col a:hover,
body.theme-cream .footer .f-col a:focus-visible { color: var(--tc-secondary-light); }
body.theme-cream .footer .f-contact a svg { color: var(--tc-accent-light); }
body.theme-cream .footer .socials a {
    color: var(--tc-foot-text);
    background: var(--tc-foot-chip);
    border-color: var(--tc-foot-sep);
}
body.theme-cream .footer .socials a:hover,
body.theme-cream .footer .socials a:focus-visible {
    color: var(--tc-secondary-light);
    background: var(--tc-foot-chip);
    border-color: var(--tc-secondary-light);
}
body.theme-cream .footer-bottom { border-top: 1px solid var(--tc-foot-sep); }
body.theme-cream .footer-bottom p,
body.theme-cream .footer-bottom .f-badges span { color: var(--tc-foot-legal); font-family: var(--tc-font); }
body.theme-cream .footer-bottom .f-badges a { color: var(--tc-foot-legal); }
body.theme-cream .footer-bottom .f-badges a:hover { color: var(--tc-secondary-light); }

/* ---- Pages d'erreur 404 / 403 / 500 ------------------------------------
   Leurs styles sont dans un <style> propre à chaque template (violet, rouge,
   ambre, marine). Ces règles, plus spécifiques (body.theme-cream …), les
   ramènent au crème / orange : cercle et code en orange (dégradés SVG
   passés en #D97757 → #B85E3F dans les templates), titre encre, texte
   #6B5F54, bouton principal orange plein, secondaire en variante encre. */
body.theme-cream {
    --tc-page-ink: #1C1814;
    --tc-page-mute: #6B5F54;
    --tc-page-surface: #FFFFFF;
    --tc-page-line: #E8E2D9;
    --tc-page-accent-bg: #FDF0E8;
    --tc-page-tinted: #F3EFE8;
}
body.theme-cream { background: var(--tc-bg); }   /* fond de page : plus de bande grise entre le contenu et le pied de page */
body.theme-cream .error-page-wrapper { background: var(--tc-bg); }
body.theme-cream .error-title,
body.theme-cream .error-title.error-forbidden,
body.theme-cream .error-title.error-server {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: var(--tc-page-ink);
    color: var(--tc-page-ink);
    font-family: var(--tc-font);
    letter-spacing: -0.02em;
}
body.theme-cream .error-message,
body.theme-cream .detail-card p,
body.theme-cream .error-info { color: var(--tc-page-mute); font-family: var(--tc-font); }
body.theme-cream .error-illustration svg { color: var(--tc-accent); }
/* Boutons : le système du site public — principal blanc sur terracotta
   (5,6:1), secondaire contour et texte terracotta (5,3:1 sur crème). */
body.theme-cream .error-actions .btn {
    font-family: var(--tc-font);
    font-weight: 600;
    border-radius: 9999px;
    box-shadow: none;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
body.theme-cream .error-actions .btn-primary {
    background: var(--tc-secondary);
    border: 2px solid var(--tc-secondary);
    color: var(--tc-white);
}
body.theme-cream .error-actions .btn-primary:hover,
body.theme-cream .error-actions .btn-primary:focus-visible { background: var(--tc-secondary-dark); border-color: var(--tc-secondary-dark); color: var(--tc-white); transform: none; }
body.theme-cream .error-actions .btn-outline {
    background: transparent;
    border: 2px solid var(--tc-secondary);
    color: var(--tc-secondary);
}
body.theme-cream .error-actions .btn-outline:hover,
body.theme-cream .error-actions .btn-outline:focus-visible { background: var(--tc-accent-bg); border-color: var(--tc-secondary-dark); color: var(--tc-secondary-dark); transform: none; }
body.theme-cream .error-actions .btn:focus-visible { outline: 2px solid var(--tc-secondary); outline-offset: 3px; }
@media (max-width: 480px) {
    /* style.css : « .btn { font-size: .875rem !important } » → 12,25 px rendus ; on impose la taille standard. */
    body.theme-cream .error-actions .btn { font-size: 15px !important; padding: 12px 24px !important; }
}
/* Cartes de suggestions et de détails. */
body.theme-cream .error-suggestions,
body.theme-cream .detail-card {
    background: var(--tc-page-surface);
    border: 1px solid var(--tc-page-line);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05), 0 4px 16px rgba(0, 0, 0, .05);
}
body.theme-cream .detail-card { border-left: 4px solid var(--tc-accent); }
body.theme-cream .detail-card svg { color: var(--tc-accent); }
body.theme-cream .error-suggestions h3,
body.theme-cream .detail-card h4 { color: var(--tc-page-ink); font-family: var(--tc-font); }
body.theme-cream .error-suggestions a { color: var(--tc-secondary-dark); font-family: var(--tc-font); }   /* l'accent foncé ne faisait que 4,46:1 sur blanc */
body.theme-cream .error-suggestions a:hover,
body.theme-cream .error-suggestions a:focus-visible { color: var(--tc-page-ink); }
body.theme-cream .error-suggestions a::before { color: var(--tc-accent); }
body.theme-cream .error-info { background: var(--tc-page-tinted); }
body.theme-cream .error-code { background: var(--tc-page-surface); border-color: var(--tc-page-line); }
body.theme-cream .error-code code { color: var(--tc-page-ink); }
/* Traceback (admin / tuteur seulement) : bloc sombre aux teintes du pied de page. */
body.theme-cream .traceback-pre { background: var(--tc-foot-2); color: var(--tc-foot-text); }
@media (prefers-reduced-motion: reduce) {
    body.theme-cream .error-illustration { animation: none; }
}