/* ==========================================================================
   TFE HEADER — extrait et adapté de base.css (Courrier International)
   Squelette conservé : header-wrap, header-logo, header-tools (sans data-icon
   font), header-user. Supprimés : header-menu (burger), header-hebdo (CTA),
   site-menu (drawer complet), dark mode switch.
   ========================================================================== */

:root {
    /* Variables réduites au strict nécessaire pour le header */
    --siteBoxBackground: #fff;
    --siteBoxBackgroundRGB: 255,255,255;
    --siteBoxShadow: #0000001a;
    --siteText: #282828;          /* TFE text color (remplace #111 d'origine) */
    --siteTextRGB: 40,40,40;
    --sitePrimary: #6d2929;       /* TFE primary (déjà aligné dans le fichier source) */
    --menuBackground: #eee;
    --menuText: #111;
    --sans: Arial, Helvetica, sans-serif; /* TFE body/labels */
    --serif: Georgia, serif;              /* TFE headlines */
    --radius: 0px;                /* TFE design system : border-radius: 0 */
    --headerHeight: 70px;
}

@media screen and (min-width: 1000px) {
    :root {
        --headerHeight: 84px;
    }
}

/* Reset minimal nécessaire (extrait du reset global de base.css) */
.tfe-site-header,
.tfe-site-header *,
.tfe-site-header *:before,
.tfe-site-header *:after {
    box-sizing: border-box;
}

.tfe-site-header a,
.tfe-site-header a:any-link {
    color: inherit;
    text-decoration: none;
}

.tfe-site-header img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

.sr-only {
    border: 0 !important;
    clip: rect(1px,1px,1px,1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
}

/* ==========================================================================
   .site-header — header sticky, fond blanc, ombre basse
   ========================================================================== */
.tfe-site-header {
    background-color: var(--siteBoxBackground);
    box-shadow: 0 -10px 20px 10px var(--siteBoxShadow);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;
    overflow: hidden;
}

.tfe-site-header .header-wrap {
    font-size: 0;
    overflow: hidden;
    padding: 16px;
    position: relative;
    text-align: center;
    height: var(--headerHeight);
}

/* ==========================================================================
   .header-logo — centré, image/svg
   ========================================================================== */
.tfe-site-header .header-logo {
    display: inline-block;
}

.tfe-site-header .header-logo img,
.tfe-site-header .header-logo svg {
    height: 38px;
    width: auto;
}

@media screen and (min-width: 1000px) {
    .tfe-site-header .header-logo svg,
    .tfe-site-header .header-logo img {
        height: 52px;
    }
}

/* ==========================================================================
   .header-user — icône "silhouette" dessinée en pur CSS (pas de font icon)
   Positionnée à droite. Conserve le dessin :before (tête) / :after (buste)
   de l'original.
   ========================================================================== */
.tfe-site-header .header-user {
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
}

.tfe-site-header .header-user:before,
.tfe-site-header .header-user:after {
    background-color: var(--siteText);
    content: "";
    display: block;
}

.tfe-site-header .header-user:before {
    border-radius: 50%;
    height: 12px;
    margin: 0 auto;
    width: 12px;
}

.tfe-site-header .header-user:after {
    border-radius: 0; /* TFE design system : border-radius strict à 0 partout */
    height: 6px;
    margin: 1px auto 0;
    width: 20px;
}

@media screen and (min-width: 1000px) {
    .tfe-site-header .header-user {
        width: 68px;
    }
}

/* ==========================================================================
   .header-tools — icône(s) de contact à gauche (desktop only dans l'original,
   ici on l'affiche aussi en mobile car le burger menu a été retiré)
   ========================================================================== */
.tfe-site-header .header-tools {
    display: flex;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
}

.tfe-site-header .header-tools .item {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--siteText);
    cursor: pointer;
    display: flex;
    font-size: 16px;
    justify-content: center;
    line-height: 1;
    outline: 0;
    width: 50px;
}

@media screen and (min-width: 1000px) {
    .tfe-site-header .header-tools {
        left: 0;
    }
    .tfe-site-header .header-tools .item {
        font-size: 20px;
        width: 68px;
    }
}

/* ==========================================================================
   .header-a11y — liens d'accessibilité (skip links), masqués sauf au focus
   Technique sr-only standard : invisible sans occuper d'espace, visible
   uniquement au focus clavier (Tab). Robuste indépendamment du contexte
   de positionnement du parent.
   ========================================================================== */
.tfe-header-a11y {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.tfe-header-a11y a {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    z-index: 200;
}

.tfe-header-a11y a:focus {
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    text-decoration: underline;
}

/* ==========================================================================
   Backdrop blur desktop (effet "glass" optionnel au scroll, repris de l'original)
   ========================================================================== */
@media screen and (min-width: 1000px) {
    @supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
        .tfe-site-header {
            -webkit-backdrop-filter: blur(10px) saturate(2);
            backdrop-filter: blur(10px) saturate(2);
            background-color: rgba(var(--siteBoxBackgroundRGB), .9);
        }
    }
}