/* ============================================================
   entete.css : l'entete du site pour les pages autonomes
   (pictup, sliceup, fitup) qui n'heritent pas de base.html.
   Regles recopiees telles quelles depuis labup.css.
   base.html ne charge PAS ce fichier : il porterait alors les memes
   regles deux fois. Une correction faite ici est donc a reporter dans
   labup.css, et inversement, jusqu'au socle commun du lot A.
   ============================================================ */

/* Les couleurs viennent de jetons.css, chargee avant cette feuille sur
   toutes les pages. Ce fichier portait ici un bloc de huit jetons
   recopies de labup.css, parce que les pages autonomes ne nomment leurs
   couleurs que --color-* ; jetons.css definit desormais les deux
   vocabulaires partout, le bloc local n a plus de raison d etre. */
/* Les pages autonomes ne remettent pas toujours la marge du navigateur
   a zero : sans ca, un liere apparait au-dessus de l'entete. */
body { margin: 0; }

/* Hauteur de l'entete : 64px. Le remplissage vertical de .site-header
   est a zero, c'est la hauteur minimale de .header-inner qui commande
   seule. UNE seule valeur a changer, celle de min-height.
   Ce fichier portait trois declarations concurrentes de .site-header,
   dont un padding a zero qu'une declaration plus bas ecrasait, d ou une
   barre de 93px la ou le commentaire en annoncait 64 : elles sont
   reunies ci-dessous.
   Ces valeurs sont les memes que dans labup.css. */
.site-header .header-inner { min-height: 64px; }
.site-header .brand img { height: 32px; width: auto; display: block; flex: 0 0 auto; }

.site-header {
  background: var(--ink);
  padding: 0;
}

.container {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* --- En-tête --- */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.3px;
}

.brand span { color: var(--green); }

.nav {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
}

.nav-user { color: #b9b6b0; font-size: 0.9rem; }

.nav-link { color: #ece9e4; text-decoration: none; font-size: 0.95rem; }

.nav-link:hover { color: #fff; text-decoration: underline; }

/* --- Boutons --- */
.btn {
    display: inline-block;
    background: var(--green);
    color: var(--ink);
    padding: 0.65rem 1.3rem;
    border-radius: var(--radius-pill);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    border: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.btn-sm { padding: 0.45rem 0.9rem; font-size: 0.9rem; }

.btn-outline {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--green);
}

/* Reserve toujours la place de la barre de defilement, sinon le logo
   et le contenu se decalent de quelques pixels entre une page longue
   et une page courte. */
html { scrollbar-gutter: stable; }