/* =====================================================================
   Header Sinozia — feuille unique, chargee en dernier sur toutes les pages
   statiques.

   Pourquoi un fichier et non un enieme bloc <style> par page : le header
   existait en trois implementations (le gabarit Vuetify compile au
   chargement pour l'accueil et les pages sombres, le rendu pre-calcule des
   pages produit, le composant React). Chacune avait derive de son cote, et
   c'est exactement ce que le cahier des charges interdit : la version
   claire et la version sombre doivent etre le MEME header, seules les
   couleurs et le logo changent. Une source unique rend la promesse
   verifiable.

   Ce qui disparait : la capsule vitree autour de la navigation. C'est elle
   qui faisait lire le menu comme un composant flottant pose sur la page.
   Les liens vivent maintenant directement dans la barre.

   Pourquoi tout est prefixe par #szEntete : les blocs historiques de chaque
   page enchainent des selecteurs du type
   "body.dark-header .app-nav .text-center a.black--text.nav-active", qui
   comptent cinq classes et l'emportent sur n'importe quelle chaine de
   classes raisonnable, !important des deux cotes. Un identifiant passe
   devant sans avoir a supprimer l'existant ni a empiler des repetitions de
   classes illisibles. L'identifiant est pose sur le header des 23 pages.

   Structure et theme sont separes volontairement : toutes les valeurs de
   geometrie (hauteur, conteneur, grille, espacements, tailles) sont hors
   theme, les blocs de theme ne contiennent que des couleurs. C'est ce qui
   garantit que le clair et le sombre sont le meme header.
   ===================================================================== */

:root {
    /* Geometrie, commune aux deux themes */
    --sz-ent-hauteur: 76px;
    --sz-ent-largeur: 1464px;   /* 1416 de contenu + 2 x 24 de gouttiere */
    --sz-ent-gouttiere: 24px;
    --sz-ent-logo-h: 40px;
    --sz-ent-lien-h: 40px;

    /* Le panneau se pose sous la BARRE, pas sous le lien. L'ecart part donc du
       bas du lien, traverse la demi-barre qui reste dessous, puis ajoute la
       respiration voulue. Ecrit ainsi, il suit tout seul un changement de
       hauteur de barre ou de lien. */
    --sz-ent-panneau-ecart: calc(
        (var(--sz-ent-hauteur) - var(--sz-ent-lien-h)) / 2 + 4px);
    /* Panneau centre sous son declencheur, puis pousse legerement a droite. */
    --sz-ent-panneau-decalage: 20px;

    /* Theme clair (accueil, SinoVoice, SinoFace) */
    --sz-ent-fond: #ffffff;
    --sz-ent-filet: rgba(16, 16, 20, 0.09);
    --sz-ent-lien: rgba(20, 20, 26, 0.70);
    --sz-ent-lien-fort: #14141a;
    --sz-ent-accent: #6243ce;
    --sz-ent-survol-fond: rgba(20, 20, 26, 0.05);
    --sz-ent-cta-fond: #6243ce;
    --sz-ent-cta-survol: #573bb8;
    /* Le trait de soulignement ne depend PAS du theme : c'est le violet de
       marque des deux cotes. C'est la regle explicite du cahier des charges,
       et c'est ce qui manquait quand il tirait sa couleur de l'accent. */
    --sz-ent-trait: #6243ce;
    --sz-ent-panneau: #ffffff;
    --sz-ent-filet-panneau: rgba(16, 16, 20, 0.10);
    --sz-ent-filet-fort: rgba(16, 16, 20, 0.18);
    --sz-ent-filet-fort-survol: rgba(16, 16, 20, 0.30);
}

/* Theme sombre : couleurs uniquement, aucune valeur de structure. */
body.dark-header {
    --sz-ent-fond: #0b0b0b;
    --sz-ent-filet: rgba(255, 255, 255, 0.10);
    --sz-ent-lien: rgba(255, 255, 255, 0.68);
    --sz-ent-lien-fort: #ffffff;
    --sz-ent-accent: #a996f5;
    --sz-ent-survol-fond: rgba(255, 255, 255, 0.07);
    --sz-ent-cta-fond: #6243ce;
    --sz-ent-cta-survol: #7355e0;
    /* Le trait garde la teinte de marque, remontee en luminosite pour
       rester lisible sur fond noir. Le panneau, lui, doit se distinguer du
       fond de page sans l'eclairer. */
    --sz-ent-trait: #8b6ff0;
    --sz-ent-panneau: #17171d;
    --sz-ent-filet-panneau: rgba(255, 255, 255, 0.12);
    --sz-ent-filet-fort: rgba(255, 255, 255, 0.22);
    --sz-ent-filet-fort-survol: rgba(255, 255, 255, 0.36);
}

/* ---------------------------------------------------------------------
   0. Typographie
   Les pages React n'avaient pas la police du site : les memes sept
   intitules y rendaient a une largeur differente, ce qui suffit a faire
   deux headers. La face est declaree ici avec les fichiers deja utilises
   par les pages statiques, qui ne telechargent donc rien de plus.
   --------------------------------------------------------------------- */
@font-face {
    font-family: SuisseIntl;
    font-weight: 400;
    font-display: swap;
    src: url("/misc/fonts/Suisse/SuisseIntl-Regular-WebM.woff") format("woff");
}
@font-face {
    font-family: SuisseIntl;
    font-weight: 600;
    font-display: swap;
    src: url("/misc/fonts/Suisse/SuisseIntl-SemiBold-WebM.woff") format("woff");
}

#szEntete,
#szEntete a,
#szEntete button,
#szEntete span {
    font-family: SuisseIntl, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* ---------------------------------------------------------------------
   1. La barre
   Fond plein et filet de separation, en permanence et dans les deux
   themes. Une barre transparente a ete essayee : elle ne tient pas, et
   pour deux raisons opposees selon les pages. Sur l'accueil le contenu
   commence sous le header, la bande du haut laissait donc voir le fond
   noir de l'application derriere un texte sombre. Sur les pages sombres
   le contenu passe sous le header, la barre flottait alors au-dessus de
   l'illustration, ce qui est precisement l'effet dont il fallait sortir.
   Un fond plein regle les deux cas avec la meme regle.
   --------------------------------------------------------------------- */
#szEntete {
    /* Le gabarit produit ne declare aucune largeur sur son header. Un element
       en position fixe sans largeur s'ajuste a son contenu : la barre faisait
       413 px dans un ecran de 390, le bouton menu sortait donc a moitie de
       l'ecran et le tap tombait a cote. Les autres gabarits posaient bien
       width=100%, d'ou un defaut visible sur ces deux pages seulement. */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: var(--sz-ent-hauteur) !important;
    background: var(--sz-ent-fond) !important;
    background-color: var(--sz-ent-fond) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    /* Aucune separation en haut de page : le header a la couleur du hero, un
       filet n'y marquerait qu'une coupure arbitraire. La bordure est declaree
       transparente plutot qu'absente pour que son apparition au defilement ne
       decale rien d'un pixel. */
    border-bottom: 1px solid transparent !important;
    box-shadow: none !important;
    transition: border-color 0.18s ease !important;
}

/* Au defilement seulement, et uniquement pour garder le header lisible
   au-dessus d'un contenu qui bouge. */
body.sz-entete-defile #szEntete,
#szEntete[data-sz-defile="oui"] {
    border-bottom-color: var(--sz-ent-filet) !important;
}

/* Vuetify peint aussi un calque enfant, qui doit laisser passer le fond
   pose ci-dessus au lieu d'imposer le sien. */
#szEntete .v-toolbar__background,
#szEntete .v-toolbar__content {
    background: transparent !important;
    background-color: transparent !important;
}

/* ---------------------------------------------------------------------
   2. Le conteneur et les trois zones
   Le header s'alignait sur le bord de l'ecran, a 56 px. Il tient maintenant
   dans un conteneur centre, plus large que la colonne de 1200 px du reste du
   site : c'est ce qui donne au logo sa propre zone a gauche au lieu de le
   laisser coller au premier lien.

   Les deux pistes exterieures sont strictement egales, pas dimensionnees sur
   leur contenu. Mesure avant : le groupe de droite passait de 235 px en
   visiteur a 331 px une fois connecte, et la navigation se decalait d'autant.
   Avec des pistes egales elle tombe sur l'axe de la page, quoi qu'il y ait a
   droite.
   --------------------------------------------------------------------- */
#szEntete > .v-toolbar__content {
    height: var(--sz-ent-hauteur) !important;
    max-width: var(--sz-ent-largeur) !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 var(--sz-ent-gouttiere) !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 48px !important;
}



/* Les pages produit calaient le logo et le bloc de connexion en position
   absolue a 56 px des bords, sous un commentaire "NUCLEAR". Un element
   absolu sort du flux : il ne dimensionne aucune colonne de la grille et se
   place sur la boite du header, pas sur le conteneur centre. C'est ce qui
   laissait leur logo 56 px plus a droite que celui de toutes les autres
   pages. On le remet dans le flux. */
#szEntete > .v-toolbar__content > div {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: auto !important;
    flex: unset !important;
    max-width: none !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#szEntete > .v-toolbar__content > div:nth-of-type(1) { justify-self: start !important; }
#szEntete > .v-toolbar__content > div:nth-of-type(2) { justify-self: center !important; }
#szEntete > .v-toolbar__content > div:nth-of-type(3) { justify-self: end !important; }

/* ---------------------------------------------------------------------
   3. Logo
   Deux gabarits servaient deux tailles differentes (172 et 142). Une seule
   valeur, sinon la parite annoncee entre les themes est fausse des le
   premier element. Le choix du fichier clair ou sombre reste porte par la
   page, comme avant.
   --------------------------------------------------------------------- */
/* La colonne du logo est plus haute que le lien qu'elle contient : le
   composant image de Vuetify reserve sa boite par un calage bas. Le lien
   restait donc en haut de la colonne et le logo sortait de 3,5 px du centre
   optique de la barre, alors que liens et boutons y sont exactement. */
#szEntete > .v-toolbar__content > div:nth-of-type(1) {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
}
#szEntete > .v-toolbar__content > div:nth-of-type(1) a {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 0 !important;
}
#szEntete > .v-toolbar__content > div:nth-of-type(1) img,
#szEntete > .v-toolbar__content > div:nth-of-type(1) .v-image,
#szEntete > .v-toolbar__content > div:nth-of-type(1) .v-img {
    height: var(--sz-ent-logo-h) !important;
    width: auto !important;
    max-width: none !important;
    aspect-ratio: 71 / 20 !important;
    display: block !important;
    vertical-align: middle !important;
}

/* ---------------------------------------------------------------------
   4. Navigation
   Plus de capsule : l'ancien conteneur cumulait fond degrade, bordure,
   rayon de 999 px, ombre portee et flou d'arriere-plan. Les liens vivent
   dans la barre. Sept entrees devenaient trop, deux d'entre elles ouvrent
   maintenant un panneau.

   Le soulignement est un pseudo-element a couleur EXPLICITE. Il tirait sa
   couleur d'une variable de theme : elle valait un violet clair sur les
   pages sombres, ou il ressortait, et le meme mecanisme rendait le trait
   quasi invisible ailleurs. Une seule couleur de marque, la meme dans les
   deux themes, comme demande.
   --------------------------------------------------------------------- */
#szEntete .v-toolbar__content > div:nth-of-type(2) > div,
#szEntete .sz-nav {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Le panneau doit pouvoir sortir de la barre. */
#szEntete,
#szEntete > .v-toolbar__content,
#szEntete .sz-nav,
#szEntete .sz-nav-groupe {
    overflow: visible !important;
}
#szEntete .sz-nav-groupe {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Lien de navigation : meme boite pour un <a> et pour le declencheur d'un
   panneau, sinon les deux ne partagent ni la hauteur ni la ligne de base. */
#szEntete .sz-nav-lien {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: var(--sz-ent-lien-h) !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    text-transform: none !important;
    color: var(--sz-ent-lien-fort) !important;
    cursor: pointer !important;
    transition: color 0.16s ease !important;
}
#szEntete .sz-nav-lien:hover,
#szEntete .sz-nav-lien[aria-expanded="true"] {
    color: var(--sz-ent-lien-fort) !important;
    background: none !important;
    background-color: transparent !important;
}

/* Le trait : couleur de marque explicite, jamais heritee du texte. Il se
   deploie de la gauche vers la droite. */
#szEntete .sz-nav-lien::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--sz-ent-trait);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.18s ease;
    pointer-events: none;
}
#szEntete .sz-nav-lien:hover::after,
#szEntete .sz-nav-lien:focus-visible::after,
#szEntete .sz-nav-lien[aria-expanded="true"]::after,
#szEntete .sz-nav-lien[aria-current="page"]::after,
#szEntete .sz-nav-lien.sz-nav-actif::after {
    transform: scaleX(1);
}
#szEntete .sz-nav-lien[aria-current="page"],
#szEntete .sz-nav-lien.sz-nav-actif {
    color: var(--sz-ent-lien-fort) !important;
}

#szEntete .sz-nav-chevron {
    flex: 0 0 auto;
    opacity: 0.65;
    transition: transform 0.18s ease;
}
#szEntete .sz-nav-lien[aria-expanded="true"] .sz-nav-chevron {
    transform: rotate(180deg);
}

/* Panneau : compact, sobre, centre sous son declencheur et detache de la
   barre. Le decalage evite l'axe strict, qui donne un panneau visiblement
   plus lourd a gauche du fait de son texte aligne a gauche. */
#szEntete .sz-nav-panneau {
    position: absolute !important;
    top: calc(100% + var(--sz-ent-panneau-ecart));
    left: 50%;
    transform: translateX(calc(-50% + var(--sz-ent-panneau-decalage)));
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 232px;
    padding: 8px;
    text-align: left;
    border: 1px solid var(--sz-ent-filet-panneau);
    border-radius: 12px;
    background-color: var(--sz-ent-panneau);
    box-shadow: 0 8px 24px rgba(8, 8, 12, 0.10);
}
#szEntete .sz-nav-panneau[hidden] { display: none; }
/* Bande transparente entre le lien et le panneau : sans elle, le curseur
   traverse un vide et le panneau se referme en cours de route. Elle doit
   couvrir tout l'ecart, d'ou la meme mesure des deux cotes. */
#szEntete .sz-nav-panneau::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--sz-ent-panneau-ecart));
    height: var(--sz-ent-panneau-ecart);
}
#szEntete .sz-nav-panneau a {
    display: flex !important;
    align-items: center;
    width: 100%;
    margin: 0 !important;
    padding: 8px 12px !important;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background-color 0.14s ease;
}
#szEntete .sz-nav-panneau a:hover,
#szEntete .sz-nav-panneau a:focus-visible {
    background-color: var(--sz-ent-survol-fond);
}
#szEntete .sz-nav-panneau .sz-nav-titre {
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--sz-ent-lien-fort);
}
#szEntete .sz-nav-panneau a[aria-current="page"] .sz-nav-titre {
    color: var(--sz-ent-trait);
}

/* Les deux anciens marquages d'etat actif ne doivent plus rien peindre.
   Ils posaient aussi une graisse de 700, qui laissait le lien courant
   des pages produit plus gras que partout ailleurs. */
#szEntete a.nav-active,
#szEntete a.sz-nav-active {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

/* ---------------------------------------------------------------------
   5. Connexion et Inscription : un groupe, pas deux elements isoles
   --------------------------------------------------------------------- */
#szEntete > .v-toolbar__content > div:nth-of-type(3) > div {
    align-items: center !important;
    gap: 6px !important;
}
/* Visible a partir de 960 px seulement : en dessous, Vuetify replie ce
   groupe dans le tiroir et le forcer ici le faisait ressortir sur
   mobile, a cote du bouton menu. */
@media (min-width: 960px) {
    #szEntete > .v-toolbar__content > div:nth-of-type(3) > div {
        display: flex !important;
    }
}
#szEntete .v-btn + .v-btn { margin-left: 0 !important; }

#szEntete #login {
    height: 40px !important;
    min-width: 0 !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
    opacity: 1 !important;
    transition: background-color 0.16s ease !important;
}
/* Pas de fond au survol : le cahier des charges demande une simple variation
   de couleur, pas une capsule. Le remplissage reste, il sert la zone de clic. */
#szEntete #login:hover {
    background-color: transparent !important;
}
#szEntete #login:hover .v-btn__content,
#szEntete #login:hover .v-btn__content span,
#szEntete #login:hover span {
    color: var(--sz-ent-accent) !important;
}
#szEntete #login .v-btn__content,
#szEntete #login .v-btn__content span,
#szEntete #login span {
    font-size: 14.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    opacity: 1 !important;
    color: var(--sz-ent-lien-fort) !important;
}
#szEntete #login .v-btn__overlay,
#szEntete #login .v-btn__underlay,
#szEntete #signup .v-btn__overlay,
#szEntete #signup .v-btn__underlay,
#szEntete #logout .v-btn__overlay,
#szEntete #logout .v-btn__underlay {
    display: none !important;
}
#szEntete #login::before,
#szEntete #signup::before,
#szEntete #logout::before {
    display: none !important;
    background-color: transparent !important;
    opacity: 0 !important;
}

/* Inscription : violet plein, angles sobres, aucune lueur. L'ancien bouton
   cumulait degrade, rayon de 999 px, ombre coloree large et deplacement au
   survol ; c'est ce qui lui donnait son air de gabarit. */
#szEntete #signup {
    height: 40px !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: var(--sz-ent-cta-fond) !important;
    background-color: var(--sz-ent-cta-fond) !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    transition: background-color 0.16s ease !important;
}
#szEntete #signup:hover {
    background: var(--sz-ent-cta-survol) !important;
    background-color: var(--sz-ent-cta-survol) !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}
#szEntete #signup .v-btn__content,
#szEntete #signup .v-btn__content span,
#szEntete #signup span {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    color: #ffffff !important;
}

/* Deconnexion : gabarit de Connexion, contour discret pour le distinguer. */
#szEntete #logout {
    height: 40px !important;
    min-width: 0 !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    background: none !important;
    background-color: transparent !important;
    border: 1px solid var(--sz-ent-filet) !important;
    box-shadow: none !important;
}
#szEntete #logout:hover { background-color: var(--sz-ent-survol-fond) !important; }
#szEntete #logout .v-btn__content,
#szEntete #logout .v-btn__content span {
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: var(--sz-ent-lien-fort) !important;
}

/* Pastille du compte connecte : meme hauteur que le reste du groupe. */
#szEntete .user-dropdown-trigger {
    width: 40px !important;
    height: 40px !important;
    border-radius: 9px !important;
}

/* ---------------------------------------------------------------------
   6. Bouton menu
   Cible tactile de 44 px, sans contour ni fond : le cahier des charges
   demande un burger simple.
   --------------------------------------------------------------------- */
#szEntete .v-app-bar__nav-icon,
#szEntete .v-app-bar-nav-icon,
#szEntete > .v-toolbar__content > button.v-btn {
    /* Sans cette declaration, le navigateur attend de savoir si le geste est
       un defilement ou un double-tap avant d'admettre qu'il s'agit d'un
       appui : le bouton parait alors ne repondre qu'une fois sur trois. */
    touch-action: manipulation !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: var(--sz-ent-lien-fort) !important;
    justify-self: end !important;
}
/* Aucun fond au survol : sur un ecran tactile l'etat de survol reste colle
   apres l'appui, et le carre gris restait affiche autour de l'icone. Vuetify
   ajoute par-dessus son calque et son ondulation, retires ici aussi. */
#szEntete .v-app-bar__nav-icon .v-btn__overlay,
#szEntete .v-app-bar__nav-icon .v-btn__underlay,
#szEntete .v-app-bar__nav-icon .v-ripple__container,
#szEntete .v-app-bar-nav-icon .v-btn__overlay,
#szEntete .v-app-bar-nav-icon .v-btn__underlay,
#szEntete .v-app-bar-nav-icon .v-ripple__container,
#szEntete > .v-toolbar__content > button.v-btn .v-btn__overlay,
#szEntete > .v-toolbar__content > button.v-btn .v-ripple__container {
    display: none !important;
}
#szEntete .v-app-bar__nav-icon::before,
#szEntete .v-app-bar-nav-icon::before,
#szEntete > .v-toolbar__content > button.v-btn::before {
    display: none !important;
    opacity: 0 !important;
}
#szEntete .v-app-bar__nav-icon .v-icon,
#szEntete .v-app-bar__nav-icon i,
#szEntete .v-app-bar-nav-icon .v-icon,
#szEntete .v-app-bar-nav-icon i,
#szEntete > .v-toolbar__content > button.v-btn i {
    color: var(--sz-ent-lien-fort) !important;
    font-size: 19px !important;
}

/* ---------------------------------------------------------------------
   7. Accessibilite : le focus clavier doit rester visible, y compris sur
   les elements dont Vuetify supprime le contour.
   --------------------------------------------------------------------- */
#szEntete a:focus-visible,
#szEntete button:focus-visible {
    outline: 2px solid var(--sz-ent-accent) !important;
    outline-offset: 2px !important;
    border-radius: 8px;
}

/* ---------------------------------------------------------------------
   8. Points de rupture

   Mesure faite apres le passage a cinq entrees : logo 142, navigation 553,
   groupe de droite 235, plus les gouttieres, soit environ 1042 px. Le seuil
   Avec des pistes exterieures egales, la contrainte n'est plus la somme des
   trois zones mais deux fois la plus large. Il faut donc 645 de navigation,
   deux pistes de 231 et deux gouttieres de 48, soit 1203 px de contenu :
   le seuil est pose a 1270 px, avec de la marge.

   Ce que cela corrige aussi : les deux pages produit masquaient leur
   navigation des 1280 px alors que leur bouton menu n'apparaissait qu'a
   960 px. Entre les deux, elles n'offraient aucune navigation du tout.
   --------------------------------------------------------------------- */
@media (min-width: 1270px) {
    /* Le gabarit produit masque sa navigation sous 1280 px : on la rend. */
    #szEntete .sz-nav { display: inline-flex !important; }
    #szEntete .v-toolbar__content > div:nth-of-type(2) > div.hidden-md-and-down {
        display: inline-flex !important;
    }
    #szEntete .v-app-bar__nav-icon,
#szEntete .v-app-bar-nav-icon,
    #szEntete > .v-toolbar__content > button.v-btn {
        display: none !important;
    }
}

/* Juste au-dessus du seuil, on resserre plutot que de laisser la ligne
   toucher les bords. */
/* Juste au-dessus du seuil, on resserre le remplissage des liens plutot que
   de reduire leur taille : la lisibilite ne doit pas payer la largeur. */
@media (min-width: 1270px) and (max-width: 1340px) {
    #szEntete > .v-toolbar__content { gap: 20px !important; }
    #szEntete > .v-toolbar__content > div:nth-of-type(3) { margin-left: 6px !important; }
    #szEntete .v-toolbar__content > div:nth-of-type(2) a {
        padding: 0 11px !important;
    }
    #szEntete .v-toolbar__content > div:nth-of-type(2) a::after {
        left: 11px;
        right: 11px;
    }
}

@media (max-width: 1269px) {
    /* Disposition en ligne simple : le logo a gauche, ce qui reste a
       droite. La grille en trois colonnes n'a plus d'objet une fois la
       navigation centrale repliee, et elle renvoyait le bouton menu du
       gabarit produit a la ligne suivante. */
    #szEntete > .v-toolbar__content {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }
    #szEntete .v-toolbar__content > div:nth-of-type(2),
    #szEntete .sz-nav {
        display: none !important;
    }
    /* Vuetify masque le bouton menu des 960 px : sans cette regle, la
       tranche 960-1269 se retrouverait sans aucune navigation. */
    #szEntete .v-app-bar__nav-icon,
#szEntete .v-app-bar-nav-icon,
    #szEntete > .v-toolbar__content > button.v-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
    }
    #szEntete > .v-toolbar__content > div:nth-of-type(1) { flex: 0 0 auto !important; }
    #szEntete > .v-toolbar__content > div:nth-of-type(3) {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }
    #szEntete > .v-toolbar__content > div:nth-of-type(2) { margin-left: 0 !important; }
}

/* La hauteur ne varie pas avec la largeur. Reduite a 64 px sur mobile, elle
   laissait une bande vide sous la barre sur les pages claires : le contenu y
   est decale de la hauteur declaree par le composant, 76 px, et les 12 px
   d'ecart montraient le fond noir de l'application. Seules les gouttieres et
   le logo se resserrent. */
@media (max-width: 599px) {
    :root {
        --sz-ent-gouttiere: 24px;
        --sz-ent-logo-h: 34px;
    }
}

/* =====================================================================
   9. Gabarit React (docs, blog, presse, a-propos, espace, credits)

   Ces pages ne passent pas par Vuetify : leur header est un composant.
   Il porte le meme identifiant, donc il herite deja de la barre, du fond,
   du filet et de la hauteur definis plus haut. Ne restent que ses propres
   classes, calees sur exactement les memes valeurs.

   Le theme est porte par un attribut sur le header et non par une classe
   sur <body> : dans une application a navigation cliente, le corps est
   partage entre toutes les routes, alors que le blog est clair et la
   documentation sombre.
   ===================================================================== */
#szEntete[data-sz-theme="sombre"] {
    --sz-ent-fond: #0b0b0b;
    --sz-ent-filet: rgba(255, 255, 255, 0.10);
    --sz-ent-lien: rgba(255, 255, 255, 0.68);
    --sz-ent-lien-fort: #ffffff;
    --sz-ent-accent: #a996f5;
    --sz-ent-survol-fond: rgba(255, 255, 255, 0.07);
    --sz-ent-cta-fond: #6243ce;
    --sz-ent-cta-survol: #7355e0;
    /* Le trait garde la teinte de marque, remontee en luminosite pour
       rester lisible sur fond noir. Le panneau, lui, doit se distinguer du
       fond de page sans l'eclairer. */
    --sz-ent-trait: #8b6ff0;
    --sz-ent-panneau: #17171d;
    --sz-ent-filet-panneau: rgba(255, 255, 255, 0.12);
    --sz-ent-filet-fort: rgba(255, 255, 255, 0.22);
    --sz-ent-filet-fort-survol: rgba(255, 255, 255, 0.36);
}
#szEntete[data-sz-theme="clair"] {
    --sz-ent-fond: #ffffff;
    --sz-ent-filet: rgba(16, 16, 20, 0.09);
    --sz-ent-lien: rgba(20, 20, 26, 0.70);
    --sz-ent-lien-fort: #14141a;
    --sz-ent-accent: #6243ce;
    --sz-ent-survol-fond: rgba(20, 20, 26, 0.05);
    --sz-ent-cta-fond: #6243ce;
    --sz-ent-cta-survol: #573bb8;
    /* Le trait de soulignement ne depend PAS du theme : c'est le violet de
       marque des deux cotes. C'est la regle explicite du cahier des charges,
       et c'est ce qui manquait quand il tirait sa couleur de l'accent. */
    --sz-ent-trait: #6243ce;
    --sz-ent-panneau: #ffffff;
    --sz-ent-filet-panneau: rgba(16, 16, 20, 0.10);
}

.sz-ent-barre {
    height: var(--sz-ent-hauteur);
    max-width: var(--sz-ent-largeur);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--sz-ent-gouttiere);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 48px;
}
.sz-ent-barre > * { min-width: 0; }
.sz-ent-logo { justify-self: start; display: inline-flex; align-items: center; }
.sz-ent-logo img {
    height: var(--sz-ent-logo-h);
    width: auto;
    max-width: none;
    aspect-ratio: 71 / 20;
    display: block;
}


.sz-ent-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sz-ent-lien-sec {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    color: var(--sz-ent-lien-fort);
    background: none;
    border: 0;
    cursor: pointer;
    transition: background-color 0.16s ease;
}
.sz-ent-lien-sec:hover { color: var(--sz-ent-accent); }

.sz-ent-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    border-radius: 9px;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    color: #ffffff;
    background-color: var(--sz-ent-cta-fond);
    transition: background-color 0.16s ease;
}
.sz-ent-cta:hover { background-color: var(--sz-ent-cta-survol); }

.sz-ent-menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--sz-ent-lien-fort);
    cursor: pointer;
}


.sz-ent-barre a:focus-visible,
.sz-ent-barre button:focus-visible {
    outline: 2px solid var(--sz-ent-accent);
    outline-offset: 2px;
}

@media (min-width: 1270px) and (max-width: 1340px) {
    .sz-ent-barre { gap: 20px; }
}

@media (max-width: 1269px) {
    .sz-ent-barre {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .sz-nav { display: none !important; }
    .sz-ent-menu { display: inline-flex; }
    .sz-ent-actions { margin-left: auto; }
}

@media (max-width: 959px) {
    .sz-ent-actions .sz-ent-lien-sec,
    .sz-ent-actions .sz-ent-cta { display: none; }
}

/* Tiroir mobile : meme grammaire que la barre, cibles tactiles de 48 px. */
.sz-ent-voile {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, 0.55);
}
.sz-ent-tiroir {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 88vw);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px 26px;
    overflow-y: auto;
    background: var(--sz-ent-fond);
    border-left: 1px solid var(--sz-ent-filet);
}
.sz-ent-tiroir-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--sz-ent-hauteur);
    margin-bottom: 8px;
}
.sz-ent-tiroir-tete img {
    height: var(--sz-ent-logo-h);
    width: auto;
    aspect-ratio: 71 / 20;
    display: block;
}
.sz-ent-tiroir a,
.sz-ent-tiroir button {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    color: var(--sz-ent-lien);
    cursor: pointer;
}
.sz-ent-tiroir a:hover,
.sz-ent-tiroir button:hover { background-color: var(--sz-ent-survol-fond); }
.sz-ent-tiroir a[aria-current="page"] {
    color: var(--sz-ent-accent);
}
.sz-ent-tiroir-sep {
    height: 1px;
    margin: 12px 4px;
    background: var(--sz-ent-filet);
}
.sz-ent-tiroir .sz-ent-cta {
    justify-content: center;
    height: 48px;
    margin-top: 4px;
    color: #ffffff;
    font-weight: 600;
    background-color: var(--sz-ent-cta-fond);
}
.sz-ent-tiroir .sz-ent-cta:hover { background-color: var(--sz-ent-cta-survol); }
.sz-ent-tiroir .sz-ent-fermer {
    width: 44px;
    height: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 0;
    color: var(--sz-ent-lien-fort);
}

/* ---------------------------------------------------------------------
   10. Tiroir mobile des pages statiques
   Sections plutot qu'accordeons : douze entrees tiennent dans un panneau
   defilant, et un accordeon ajouterait un clic avant chaque lien.
   --------------------------------------------------------------------- */
.sz-tiroir-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0 8px;
}
.sz-tiroir-nav .sz-tiroir-titre {
    margin: 16px 12px 4px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--sz-ent-lien);
    opacity: 0.75;
}
.sz-tiroir-nav .sz-tiroir-titre:first-child { margin-top: 4px; }
.sz-drawer .sz-tiroir-nav a,
.sz-drawer .sz-tiroir-nav .sz-tiroir-titre {
    color: rgba(255, 255, 255, 0.92) !important;
}
.sz-drawer .sz-tiroir-nav .sz-tiroir-titre {
    color: rgba(255, 255, 255, 0.55) !important;
}
.sz-drawer .sz-tiroir-nav a:hover {
    background-color: rgba(255, 255, 255, 0.07) !important;
}
.sz-drawer .sz-tiroir-nav a[aria-current="page"] {
    color: #8b6ff0 !important;
}
.sz-drawer .sz-tiroir-nav a.sz-tiroir-cta {
    color: #ffffff !important;
    background-color: #6243ce !important;
}

.sz-tiroir-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    color: var(--sz-ent-lien-fort);
}
.sz-tiroir-nav a:hover { background-color: var(--sz-ent-survol-fond); }
.sz-tiroir-nav a[aria-current="page"] { color: var(--sz-ent-trait); }
.sz-tiroir-nav a.sz-tiroir-cta {
    justify-content: center;
    margin-top: 10px;
    color: #ffffff;
    font-weight: 600;
    background-color: var(--sz-ent-cta-fond);
}
.sz-tiroir-nav a.sz-tiroir-cta:hover { background-color: var(--sz-ent-cta-survol); }

.sz-tiroir-nav .sz-tiroir-bouton {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    color: var(--sz-ent-lien-fort);
    cursor: pointer;
}
.sz-tiroir-nav .sz-tiroir-bouton:hover { background-color: var(--sz-ent-survol-fond); }

/* Le tiroir React n'a plus de liens directs : ses anciennes regles ne
   ciblaient que .sz-ent-tiroir > a, desormais tout passe par .sz-tiroir-nav. */
.sz-ent-tiroir .sz-tiroir-nav { padding-top: 0; }

/* ---------------------------------------------------------------------
   11. Groupe de droite selon l'etat de connexion
   Un visiteur voit Connexion et Commencer. Une fois connecte, il voit
   Telechargement et son compte : celui qui a paye ne doit pas chercher ou
   telecharger. Telechargement est donc une action affirmee, mais pas le
   violet plein, qui reste reserve a l'inscription.
   --------------------------------------------------------------------- */
#szEntete .sz-ent-secondaire {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--sz-ent-filet-fort);
    border-radius: 9px;
    background: none;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: var(--sz-ent-lien-fort);
    transition: background-color 0.16s ease, border-color 0.16s ease;
}
#szEntete .sz-ent-secondaire:hover {
    background-color: var(--sz-ent-survol-fond);
    border-color: var(--sz-ent-filet-fort-survol);
}
#szEntete .sz-ent-secondaire[aria-current="page"] {
    border-color: var(--sz-ent-trait);
    color: var(--sz-ent-trait);
}

/* Le declencheur du compte n'affichait qu'une silhouette : on nomme
   l'action, comme les autres elements de la barre. */
#szEntete .user-dropdown-trigger {
    width: auto !important;
    height: 40px !important;
    gap: 8px;
    padding: 0 14px !important;
    border-radius: 9px !important;
    font-size: 14.5px;
    font-weight: 500;
}
#szEntete .sz-compte-libelle {
    color: var(--sz-ent-lien-fort);
    white-space: nowrap;
}
@media (max-width: 1469px) {
    #szEntete .sz-compte-libelle { display: none; }
    #szEntete .user-dropdown-trigger { width: 40px !important; padding: 0 !important; }
}

/* =====================================================================
   12. Menu mobile plein ecran

   Remplace le tiroir de 300 px ancre a droite. Celui-ci laissait voir la
   page derriere sur toute la gauche et imposait un fond noir aux pages
   blanches, parce que ses classes de couleur etaient ecrites dans le
   gabarit au lieu d'etre deduites du theme.

   Le panneau vit hors du header, en fin de document : il herite donc des
   memes variables que la page et devient clair ou sombre tout seul. Sa
   structure, ses espacements et son comportement sont identiques dans les
   deux themes, seules les couleurs et le logo changent.

   Tout est prefixe par l'identifiant : les regles a une seule classe
   perdaient contre celles des gabarits, et le libelle Ressources comme la
   croix ressortaient en blanc sur blanc sur les pages claires.
   ===================================================================== */
#szMenuMobile {
    font-family: Inter, SuisseIntl, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    position: fixed;
    inset: 0;
    /* Au-dessus de toutes les barres. Le gabarit produit declare la sienne a
       9000 : le panneau s'ouvrait sous elle, la croix restait couverte, le
       bouton menu restait visible par-dessus, et chaque clic suivant ne
       faisait que refermer ce qu'on croyait n'avoir jamais ouvert. */
    z-index: 10000;
    display: flex;
    flex-direction: column;
    background-color: var(--sz-ent-fond);
    overscroll-behavior: contain;
}
#szMenuMobile[hidden] { display: none; }

/* Ouverture sobre : une fondue courte, pas de glissement. */
@media (prefers-reduced-motion: no-preference) {
    #szMenuMobile { animation: sz-mm-entree 0.16s ease-out; }
    @keyframes sz-mm-entree {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}

#szMenuMobile .sz-mm-tete {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Meme hauteur que la barre : le logo et la croix y sont alors centres
       exactement comme dans le header, et l'espace au-dessus d'eux egale
       celui qui les separe du filet. */
    height: var(--sz-ent-hauteur);
    padding: 0 var(--sz-ent-gouttiere);
    border-bottom: 1px solid var(--sz-ent-filet);
}
#szMenuMobile .sz-mm-logo { display: inline-flex; align-items: center; }
#szMenuMobile .sz-mm-logo img {
    height: var(--sz-ent-logo-h);
    width: auto;
    aspect-ratio: 71 / 20;
    display: block;
}
#szMenuMobile .sz-mm-fermer {
    /* La bande ayant la hauteur de la barre, la croix tombe d'elle-meme sur
       le bouton menu : le doigt qui vient d'ouvrir n'a pas a se deplacer. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--sz-ent-lien-fort);
    cursor: pointer;
}
/* Pas de pastille grise autour de la croix, meme raison. */
/* La croix garde une cible de 44 px, seul son dessin grandit. */
#szMenuMobile .sz-mm-fermer svg {
    width: 27px;
    height: 27px;
    stroke-width: 1.6;
}

#szMenuMobile .sz-mm-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 var(--sz-ent-gouttiere) 16px;
}

/* Entrees principales : grandes, aerees, separees par un filet fin. */
#szMenuMobile .sz-mm-lien {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    width: 100%;
    min-height: 78px;
    margin: 0;
    /* Meme retrait a droite que le filet : la fleche s'arrete ou il s'arrete,
       au lieu de filer jusqu'au bord de la ligne. */
    padding: 0 28px 0 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: inherit;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    color: var(--sz-ent-lien-fort);
    cursor: pointer;
}
#szMenuMobile .sz-mm-lien::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 1px;
    background-color: var(--sz-ent-filet);
}
#szMenuMobile .sz-mm-lien[aria-current="page"] { color: var(--sz-ent-trait); }
#szMenuMobile .sz-mm-groupe { display: block; }
#szMenuMobile .sz-mm-chevron {
    flex: 0 0 auto;
    width: 10px;
    height: 7px;
    color: var(--sz-ent-lien-fort);
    transition: transform 0.18s ease;
}
#szMenuMobile .sz-mm-decl[aria-expanded="true"] .sz-mm-chevron { transform: rotate(180deg); }

/* Sous-liens : en retrait et plus petits, pour qu'on voie d'un coup d'oeil
   qu'ils appartiennent a Ressources. */
#szMenuMobile .sz-mm-sous {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 4px 0 14px 16px;
    /* Sans ce filet, la derniere ressource et l'entree suivante se lisent
       comme un seul bloc. Meme longueur que les autres. */
    border-bottom: 0;
}
#szMenuMobile .sz-mm-sous[hidden] { display: none; }
#szMenuMobile .sz-mm-sous::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 1px;
    background-color: var(--sz-ent-filet);
}
#szMenuMobile .sz-mm-sous a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 17.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    color: var(--sz-ent-lien-fort);
}
#szMenuMobile .sz-mm-sous a[aria-current="page"] { color: var(--sz-ent-trait); }

/* Le pied reste visible sans defiler : c'est la zone d'action. */
/* Pas de filet au-dessus des deux boutons : ils se detachent deja par leur
   forme et par l'espace vide qui les precede. */
#szMenuMobile .sz-mm-pied {
    flex: 0 0 auto;
    padding: 14px var(--sz-ent-gouttiere) calc(16px + env(safe-area-inset-bottom, 0px));
}
#szMenuMobile .sz-mm-bloc { display: flex; flex-direction: column; gap: 10px; }
#szMenuMobile .sz-mm-sec {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1px solid var(--sz-ent-filet-fort);
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    color: var(--sz-ent-lien-fort);
}
#szMenuMobile .sz-mm-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    color: #ffffff;
    background-color: var(--sz-ent-cta-fond);
}
#szMenuMobile .sz-mm-cta:hover { background-color: var(--sz-ent-cta-survol); }

#szMenuMobile a,
#szMenuMobile button {
    touch-action: manipulation;
}

#szMenuMobile a:focus-visible,
#szMenuMobile button:focus-visible {
    outline: 2px solid var(--sz-ent-trait);
    outline-offset: 2px;
}
/* Le focus pose par le script ne doit rien dessiner quand l'action vient d'un
   doigt ou d'une souris : il sert a placer le clavier, pas a signaler un
   parcours au clavier. Vaut dans les deux sens, sur la croix a l'ouverture et
   sur le bouton menu a la fermeture, ou l'anneau revenait. */
#szMenuMobile .sz-mm-fermer[data-sz-focus-discret]:focus,
#szMenuMobile .sz-mm-fermer[data-sz-focus-discret]:focus-visible,
#szEntete [data-sz-focus-discret]:focus,
#szEntete [data-sz-focus-discret]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
/* Vuetify ne dessine pas son focus avec un contour mais avec un calque enfant,
   qu'il monte a douze pour cent d'opacite. La regle ci-dessus ne l'atteignait
   donc pas, et un carre gris restait peint autour du bouton menu apres un
   aller-retour au doigt. Mesure : opacite 0 avant, 0,12 apres. */
#szEntete [data-sz-focus-discret]:focus .v-btn__overlay,
#szEntete [data-sz-focus-discret]:focus-visible .v-btn__overlay,
#szMenuMobile .sz-mm-fermer[data-sz-focus-discret]:focus .v-btn__overlay,
#szMenuMobile .sz-mm-fermer[data-sz-focus-discret]:focus-visible .v-btn__overlay {
    opacity: 0 !important;
}
/* Les pages a gabarit utilisent la version precedente de Vuetify, qui peint le
   meme carre avec un pseudo-element et non un calque enfant. Deux ecritures
   pour un seul defaut visible. */
#szEntete [data-sz-focus-discret]:focus::before,
#szEntete [data-sz-focus-discret]:focus-visible::before,
#szMenuMobile .sz-mm-fermer[data-sz-focus-discret]:focus::before,
#szMenuMobile .sz-mm-fermer[data-sz-focus-discret]:focus-visible::before {
    opacity: 0 !important;
}

/* Sur un ecran tactile, le survol reste colle au dernier element touche
   jusqu'a ce qu'on touche ailleurs. Le meme calque repeindrait alors le meme
   carre, sans qu'aucun focus soit en cause. Aucun appareil vise ici n'a de
   vrai survol, donc rien n'est perdu. */
@media (hover: none) {
    #szEntete .v-app-bar-nav-icon:hover .v-btn__overlay,
    #szEntete .v-app-bar__nav-icon:hover .v-btn__overlay,
    #szEntete .sz-ent-menu:hover .v-btn__overlay {
        opacity: 0 !important;
    }
    #szEntete .v-app-bar-nav-icon:hover::before,
    #szEntete .v-app-bar__nav-icon:hover::before,
    #szEntete .sz-ent-menu:hover::before {
        opacity: 0 !important;
    }
}

/* L'ancien tiroir n'est plus utilise : il reste dans le gabarit des pages
   Vuetify, il ne doit simplement plus rien afficher. */
.sz-drawer.v-navigation-drawer,
nav.navigation-drawer,
.menu-overlay {
    display: none !important;
}