.entete {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-entete);
    padding-block: 1rem;
    transition:
        transform 0.5s var(--ease-sortie),
        background-color 0.4s var(--ease-sortie),
        backdrop-filter 0.4s var(--ease-sortie),
        border-color 0.4s var(--ease-sortie);
    border-block-end: 1px solid transparent;
}

/* Posée : on a quitté le haut de page, l'en-tête reprend un fond. Opaque : en
   transparence, le grand titre de l'accueil se lisait au travers de la barre. */
.entete--posee {
    background-color: var(--fond);
    backdrop-filter: blur(14px) saturate(140%);
    border-block-end-color: var(--trait);
}

/*
 * Menu ouvert : l'en-tête passe AU-DESSUS du voile. Sans cela, le bouton de
 * fermeture se retrouve derrière le menu et il ne reste que la touche Échap
 * pour en sortir.
 */
.menu-ouvert .entete {
    z-index: calc(var(--z-menu) + 1);
    transform: none;
    background-color: transparent;
    backdrop-filter: none;
    border-block-end-color: transparent;
}

.entete__barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.entete__logo {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: var(--texte);
}

.entete__image {
    display: block;
    block-size: 2.5rem;
    inline-size: auto;
    transition: opacity 0.4s var(--ease-sortie);
}

.entete__logo:hover .entete__image {
    opacity: 0.8;
}

.entete__nav {
    display: none;
    gap: 2rem;
}

.entete__nav a {
    position: relative;
    font-size: var(--t-sm);
    color: var(--texte-doux);
    text-decoration: none;
    transition: color 0.3s var(--ease-sortie);
}

/* La rubrique où l'on est : texte plein, soulignement tracé et pastille. */
.entete__nav a[aria-current] {
    color: var(--texte);
    font-weight: 600;
}

.entete__nav a[aria-current]::after {
    block-size: 2px;
    background: var(--accent);
    transform: scaleX(1);
}

/* Le soulignement se dessine depuis la gauche, comme une piste du circuit. */
.entete__nav a::after {
    content: "";
    position: absolute;
    inset-block-end: -0.4em;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s var(--ease-sortie);
}

.entete__nav a:hover {
    color: var(--texte);
}

.entete__nav a:hover::after {
    transform: scaleX(1);
}

/*
 * « Informatique et télécoms » et ses sous-catégories : la liste s'ouvre au
 * survol et quand un de ses liens a le focus (clavier). Un pont invisible
 * (padding-block-start) évite qu'elle se referme entre le libellé et la liste.
 */
.entete__rubrique {
    position: relative;
    display: inline-flex;
}

.entete__chevron {
    margin-inline-start: 0.35em;
    font-size: 0.75em;
}

.entete__sous {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: -1rem;
    z-index: 1;
    min-inline-size: 16rem;
    margin: 0;
    padding: 1.1rem 0 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.4rem);
    transition:
        opacity 0.25s var(--ease-sortie),
        transform 0.25s var(--ease-sortie),
        visibility 0s linear 0.25s;
}

.entete__rubrique:hover .entete__sous,
.entete__rubrique:focus-within .entete__sous {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.entete__sous li {
    background: var(--fond);
    border-inline: 1px solid var(--trait);
}

.entete__sous li:first-child {
    border-block-start: 1px solid var(--trait);
    border-start-start-radius: 0.75rem;
    border-start-end-radius: 0.75rem;
    padding-block-start: 0.4rem;
}

.entete__sous li:last-child {
    border-block-end: 1px solid var(--trait);
    border-end-start-radius: 0.75rem;
    border-end-end-radius: 0.75rem;
    padding-block-end: 0.4rem;
    box-shadow: 0 1.2rem 2.4rem -1.2rem color-mix(in srgb, var(--texte) 35%, transparent);
}

.entete__nav .entete__sous a {
    display: block;
    padding: 0.5rem 1rem;
}

.entete__nav .entete__sous a::after {
    content: none;
}

.entete__nav .entete__sous a:hover,
.entete__nav .entete__sous a[aria-current] {
    color: var(--accent);
}

.entete__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.entete__tel {
    display: none;
    color: var(--texte-doux);
    text-decoration: none;
    transition: color 0.3s var(--ease-sortie);
}

.entete__tel:hover {
    color: var(--accent-3);
}

.entete__jauge {
    position: absolute;
    inset-block-end: -1px;
    inset-inline: 0;
    block-size: 2px;
    overflow: hidden;
}

.entete__jauge span {
    display: block;
    block-size: 100%;
    background: var(--flux);
    transform: scaleX(0);
    transform-origin: left center;
}

/* — Bascule du menu — */
.bascule {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--trait-fort);
    border-radius: var(--rayon-plein);
    color: var(--texte);
    transition: border-color 0.3s var(--ease-sortie), background-color 0.3s var(--ease-sortie);
}

.bascule:hover {
    border-color: var(--texte);
    background-color: var(--fond-eleve);
}

.bascule__traits {
    display: grid;
    gap: 4px;
    inline-size: 18px;
}

.bascule__traits i {
    display: block;
    block-size: 1.5px;
    background: currentColor;
    transition: transform 0.4s var(--ease-sortie);
}

.menu-ouvert .bascule__traits i:first-child {
    transform: translateY(2.75px) rotate(45deg);
}

.menu-ouvert .bascule__traits i:last-child {
    transform: translateY(-2.75px) rotate(-45deg);
}

.bascule__mot {
    font-family: var(--police-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/*
 * Le menu en ligne n'apparaît que lorsqu'il tient sans retour à la ligne :
 * logo, liens (dont « Informatique et télécoms ») et actions demandent
 * environ 1 300 px,
 * le numéro de téléphone tient à partir de 98rem. En dessous,
 * le bouton « Menu » prend le relais.
 */
.entete__nav a {
    white-space: nowrap;
}

@media (min-width: 88rem) {
    .entete__nav {
        display: inline-flex;
    }

    /* Rubriques en ligne : le bouton du menu se contente de son icône. */
    .bascule__mot {
        display: none;
    }
}

@media (min-width: 112rem) {
    .entete__tel {
        display: inline-flex;
    }
}

@media (max-width: 34rem) {
    .entete__image {
        block-size: 2.1rem;
    }

    /* Page des particuliers : sur téléphone, le numéro seul, sans sa pastille. */
    .entete__particuliers .tel-pastille {
        display: none;
    }

    /* Le numéro est plus large que « Prendre RDV » : on resserre pour garder le bouton Menu à l'écran. */
    .entete .entete__particuliers {
        padding-inline: 0.75rem;
    }

    .page-particuliers .entete__barre {
        gap: 0.75rem;
    }

    .page-particuliers .entete__actions {
        gap: 0.5rem;
    }

    .bascule__mot {
        display: none;
    }
}

/* « Maintenance » : la prise en main à distance (Assist). Libellé sur grand
   écran, icône seule sur téléphone. */
.entete__maintenance {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    block-size: 2.5rem;
    padding-inline: 0.9rem;
    border: 1px solid var(--trait-fort);
    border-radius: var(--rayon-plein);
    color: var(--texte);
    font-size: var(--t-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.3s var(--ease-sortie), color 0.3s var(--ease-sortie), box-shadow 0.3s var(--ease-sortie);
}

.entete__maintenance:hover,
.entete__maintenance:focus-visible {
    border-color: var(--cyan);
    color: var(--electrique);
    box-shadow: 0 0 0 4px rgb(46 163 242 / 0.15);
}

.entete__maintenance svg {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Icône seule sur téléphone, et quand le menu s'affiche en ligne sans assez de place. */
@media (max-width: 47.99rem), (min-width: 88rem) {
    .entete__maintenance {
        justify-content: center;
        inline-size: 2.5rem;
        padding: 0;
    }

    .entete__maintenance-mot {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Téléphone : « RDV » au lieu de « Prendre RDV », et des actions plus serrées,
   pour que le bouton du menu reste dans l'écran. */
@media (max-width: 47.99rem) {
    .entete__actions {
        gap: 0.5rem;
    }

    .entete__rdv-prefixe {
        display: none;
    }
}