/* Bandeau commun a Skin'Fu : la page d'accueil et l'atelier portent le meme,
   pour qu'on sache toujours ou l'on est. Les couleurs viennent des variables
   de la page hote. */
.sf-entete {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 26px;
    /* Hauteur figee et meme mise a l'echelle que les cadres : le bandeau
       garde ainsi les memes proportions que le reste, quel que soit le zoom
       du navigateur ou la definition de l'ecran. La hauteur est reprise par
       le calcul de l'echelle, elle ne doit donc pas changer sans lui. */
    height: 80px; box-sizing: border-box;
    zoom: var(--sf-echelle-entete, 1);
    padding: 7px 22px;
    /* Meme verre que le bandeau de Letter'Fu : un fond nettement transparent,
       degrade du haut vers le bas, et un flou d'arriere-plan sature qui laisse
       deviner le decor sans nuire a la lisibilite. */
    background: linear-gradient(180deg, rgba(11, 15, 22, .82) 0%, rgba(11, 15, 22, .52) 100%);
    border-bottom: 1px solid rgba(46, 226, 122, .18);
    backdrop-filter: blur(16px) saturate(1.25);
    -webkit-backdrop-filter: blur(16px) saturate(1.25);
}
.sf-entete a { color: inherit; text-decoration: none; }
.sf-marque {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Uncial Antiqua', 'Rajdhani', serif;
    font-size: 17px; font-weight: 400; letter-spacing: .01em;
}
.sf-marque img { height: 26px; width: auto; filter: drop-shadow(0 0 10px rgba(46, 226, 122, .45)); }
.sf-accent { color: var(--vert); }
/* Logo Stratfu : le retour a l'accueil du site, seul tout a gauche. */
.sf-logo {
    display: inline-flex; align-items: center; flex: none;
    padding: 2px 4px;
    transition: transform 160ms ease, filter 160ms ease;
}
.sf-logo img {
    height: 46px; width: auto; display: block;
    filter: drop-shadow(0 0 12px rgba(236, 72, 153, .45));
}
.sf-logo:hover { transform: translateY(-1px); }
.sf-logo:hover img { filter: drop-shadow(0 0 18px rgba(236, 72, 153, .75)); }

/* Onglets : la meme typographie que la barre du builder — capitales
   espacees et soulignement en degrade — pour que les deux outils se
   repondent. La couleur d'accent, elle, reste celle de Skin'Fu. */
/* Onglets centres sur le bandeau, et non sur la place qui reste : le logo
   et le compte n'ont pas la meme largeur, une simple marge automatique les
   aurait poses de travers. */
.sf-nav {
    position: absolute; left: 50%; transform: translateX(-50%);
    top: 0; bottom: 0;
    display: flex; gap: 2px; align-items: center;
}
.sf-nav a {
    position: relative;
    display: flex; align-items: center;
    padding: 9px 14px 11px;
    font-size: 15px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--attenue);
    transition: color .2s;
}
.sf-nav a:hover { color: var(--texte); }
.sf-nav a.actif {
    color: var(--vert);
    text-shadow: 0 0 16px rgba(46, 226, 122, .5);
}
/* Le soulignement rejoint la ligne de separation du bandeau. */
.sf-nav a.actif::after {
    content: '';
    position: absolute; bottom: 0; left: 14px; right: 14px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--vert), transparent);
    box-shadow: 0 0 10px rgba(46, 226, 122, .7);
}
.sf-entete-action { margin-left: auto; }

/* Le bouton d'action du bandeau, repris de la page d'accueil. */
.sf-bouton {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 22px; border-radius: 12px; cursor: pointer;
    font-weight: 600; white-space: nowrap;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.sf-bouton svg { width: 18px; height: 18px; fill: currentColor; }
.sf-bouton:hover { transform: translateY(-1px); }
.sf-bouton-vert {
    color: #04240f; border: 1px solid rgba(255, 255, 255, .35);
    background: linear-gradient(180deg, #57f0a0 0%, var(--vert) 48%, #16a355 100%);
    box-shadow: 0 8px 22px rgba(46, 226, 122, .32), inset 0 1px 0 rgba(255, 255, 255, .55);
    text-shadow: none;
}
.sf-bouton-vert:hover { box-shadow: 0 12px 30px rgba(46, 226, 122, .45), inset 0 1px 0 rgba(255, 255, 255, .6); }
.sf-bouton-vitre {
    border: 1px solid var(--bord); background: var(--panneau-clair);
    backdrop-filter: blur(8px);
}
.sf-bouton-vitre:hover { border-color: var(--bord-vif); }
.sf-entete-action { padding: 6px 14px; font-size: 14px; border-radius: 10px; }
.sf-fleche { margin-left: 2px; }

/* ── Compte connecté ────────────────────────────────────────────────────────
   Au coin droit du bandeau : qui l'on est, et l'entrée vers son profil. */
.sf-compte { margin-left: auto; display: flex; align-items: center; }
.sf-compte-bloc {
    display: flex; align-items: center; gap: 9px;
    padding: 4px 12px 4px 5px; border-radius: 999px;
    border: 1px solid rgba(86, 120, 150, .35);
    background: rgba(12, 20, 32, .6);
    font-size: 14px; color: var(--texte);
    transition: border-color 140ms ease, background 140ms ease;
}
.sf-compte-bloc:hover { border-color: var(--vert); background: rgba(16, 32, 26, .75); }
.sf-compte-bloc img,
.sf-compte-initiale {
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    object-fit: cover; background: var(--panneau-clair);
}
.sf-compte-initiale {
    display: grid; place-items: center;
    font-weight: 700; font-size: 13px; color: var(--vert);
}
.sf-compte-nom { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-compte-lien {
    padding: 6px 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(46, 226, 122, .4);
    background: rgba(16, 32, 26, .5); color: var(--vert);
    font-size: 14px; font-weight: 600;
}
.sf-compte-lien:hover { background: rgba(22, 48, 36, .75); }

/* ── Passage d'une page à l'autre ────────────────────────────────────────
   Les trois pages de Skin'Fû sont des documents distincts : sans rien, le
   navigateur blanchit entre les deux. Cette transition les enchaîne — le
   contenu s'efface, le décor reste.

   Le navigateur qui ne la connaît pas navigue comme avant : la règle est
   ignorée, rien ne casse. */
@view-transition { navigation: auto; }

/* Le décor et le bandeau sont les mêmes d'une page à l'autre : nommés, ils
   deviennent un seul élément aux yeux de la transition et ne clignotent
   donc pas. Le reste de la page, lui, se croise en fondu. */
body::before { view-transition-name: sf-decor; }
.sf-entete { view-transition-name: sf-entete; }

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 340ms;
    animation-timing-function: cubic-bezier(.22, .7, .28, 1);
}
/* Le décor traverse plus lentement : c'est ce qui donne l'impression de ne
   jamais quitter la page. */
::view-transition-old(sf-decor),
::view-transition-new(sf-decor) {
    animation-duration: 620ms;
    animation-timing-function: ease-in-out;
}
/* Le bandeau ne bouge pas : inutile de le faire clignoter. */
::view-transition-old(sf-entete),
::view-transition-new(sf-entete) { animation-duration: 180ms; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(*),
    ::view-transition-new(*) { animation-duration: 1ms; }
}

/* Version chargée, réservée à l'administration : discrète, à côté du
   compte, juste assez lisible pour savoir ce que sert le navigateur. */
.sf-version {
    align-self: center; margin-right: 10px;
    padding: 3px 9px; border-radius: 999px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px; letter-spacing: .02em; color: #9fb3c8;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .3);
    white-space: nowrap;
}