/* HEADER ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
header{
z-index: 8;
position: fixed; /* Fixe le header en haut */
top: 0; /* Positionne le header en haut */
left: 0; /* Aligne le header à gauche */
width: 100%; /* Prend toute la largeur de la fenêtre */
color: white;
/* VERRE TEINTE, SOMBRE  [18/09] : comme en clair, la barre laisse passer ce qui defile dessous (papier peint,
   video) au lieu de le couper. Sur les pages sans fond, le voile se pose sur le gris de la page et ne se voit pas.
   Le liseré clair est remplace par une ombre douce, qui ne tire pas de ligne en travers d'une image. */
background: rgb(28 28 28 / 34%);
box-shadow: 0 1px 4px rgb(0 0 0 / 45%);
border-bottom: none;
height: 54px;}


#header{
display: flex;
width: 100%; }

/* =======================
PARTIE GAUCHE (30%)
======================= */
#link-home {
width: 30%;
display: flex;
padding-left: 8px;
box-sizing: border-box;
cursor: default;}

#home{
width: 34px;
height: 34px;
padding-top: 11px;/*
padding-left: 10px;*/}

/*---------------------------------------------------------------------------------------------------------------------------*/
#m3dd{
border-radius: 6px;
padding: 10px 5px 14px 5px;
margin-left: 0px;
line-height: 35px;
font-size: 25px;
z-index: 6;
font-family: Cambria, Arial, Helvetica, sans-serif;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#btn-phone,
#btn-exit,
#btn-favorite,
#btn-account,
#btn-market,
#btn-dash,
#btn-login-ph,   /* [20/09] « Se connecter » de la barre mobile */
#btn-bag{
display: none;}

/* Sous-blocs */
#link-home2 {
/*width: 100%;*/
display: flex;
justify-content: flex-start;
cursor: pointer;
position: relative;}

#link-home2 #home {
transition: opacity 0.3s ease;}

#link-home2:hover:not(:has(#lang-wrapper:hover, #vue-pill:hover)) #home {
opacity: 0;}

#link-home2 #home-hover {
position: absolute;
top: 46%;
left: 0;
transform: translateY(-50%);
opacity: 0;/*
filter: brightness(0) saturate(100%) invert(38%) sepia(80%) saturate(1012%) hue-rotate(178deg) brightness(94%) contrast(87%);
filter: brightness(0) saturate(100%) invert(51%) sepia(14%) saturate(4438%) hue-rotate(178deg) brightness(104%) contrast(88%);*/
transition: opacity 0.3s ease;
pointer-events: none;}

#link-home2:hover:not(:has(#lang-wrapper:hover, #vue-pill:hover)) #home-hover {
opacity: 1;}

#link-home2 #m3dd {
background-image: linear-gradient(90deg, currentColor, currentColor);
background-size: 0% 2px;
background-position: 0 calc(100% - 5px);
background-repeat: no-repeat;
transition: background-size 0.4s ease, color 0.3s ease;}

#link-home2:hover:not(:has(#lang-wrapper:hover, #vue-pill:hover)) #m3dd {
/*background-size: 100% 2px;
color: rgb(56, 169, 245);*/}

#link-home3 {
width: 0%;
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 7px;
margin-right: 6px;
border-radius: 8px;}

/* =======================
SELECTEUR DE LANGUE : drapeau rond avant le logo, menu deroulant drapeau + nom
======================= */
#lang-wrapper{
position:relative;
flex:none;
display:flex;
align-items:center;
height:54px;
margin:0 6px 0 0;
user-select:none;}

#lang-badge{
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:50%;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
transition:background-color 0.12s ease;}

#lang-badge:hover{background-color:#ffffff1a;}

#lang-badge .lang-opt-flag{
width:26px;
height:26px;
box-shadow:0 0 0 1px #ffffff2e;}   /* l'anneau prend la couleur du texte, a 18% : le noir se perdait sur la barre sombre  [18/09] */

#lang-menu{
position:absolute;
left:0;
top:calc(100% + 2px);
z-index:2000;
width:max-content;
padding:4px;                 /* menu resserre  [18/09] : 8px laissait trop d'air autour des trois langues */
font-size:15px;
font-family:Arial, sans-serif;
background-color:#292929;
border:1px solid rgb(59, 59, 59);
border-radius:8px;           /* arrondis moins prononces  [18/09] : 16px faisait pastille */
box-shadow:rgba(0, 0, 0, 0.6) 0px 8px 22px;}

#lang-menu.lang-menu-cache{display:none;}

.lang-opt{
display:flex;
align-items:center;
gap:9px;
padding:7px 9px;             /* options moins hautes et moins larges  [18/09] */
border-radius:5px;
color:#e6e6e6;
cursor:pointer;
white-space:nowrap;
-webkit-tap-highlight-color:transparent;
transition:background-color 0.12s ease, color 0.12s ease;}

.lang-opt:hover{background-color:#ffffff14; color:#ffffff;}
.lang-opt.lang-opt-on{color:#4f8ff7; background-color:#4f8ff71f;}   /* la langue en cours porte aussi un fond, comme en clair  [18/09] */

.lang-opt-nom{flex:1;}

.lang-opt-flag{
flex:none;
width:24px;
height:24px;
border-radius:50%;
overflow:hidden;
box-shadow:0 0 0 1px #ffffff2e;}   /* meme anneau dans le menu  [18/09] */

.lang-opt-flag svg{
display:block;
width:100%;
height:100%;}

/* Drapeau, logo et nom alignés sur la même ligne (hauteur du header : 54px) */
#link-home2{align-items:center; height:54px;}
#logo-wrap{
position:relative;
display:flex;
align-items:center;
height:54px;}
#link-home2 #home{padding:0; margin:0;}
#link-home2 #home-hover{top:50%; left:50%; width:auto; height:auto; transform:translate(-50%, -50%);}
#link-home2 #m3dd{padding:0; margin-left:1px; line-height:50px; position:relative; top:-1px;}   /* 4px ici l'emportait sur la regle plus haut (meme poids, ecrite apres)  [18/09] */


/* =======================
PARTIE DROITE (70%)
======================= */
#container-on {
width: 70%;
height: 54px;
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: nowrap; /* 🔥 FORCE UNE SEULE LIGNE */
padding-right: 10px;
padding-top: 1px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.on{
filter: invert(70%) sepia(62%) saturate(502%) hue-rotate(180deg) brightness(206%) contrast(101%);}
/*---------------------------------------------------------------------------------------------------------------------------*/
/*
#container-on{
display: flex;
flex-direction: row-reverse;  Aligne les divs verticalement
align-items: flex-end;  Aligne les divs à droite
align-items: center;
margin-top: 8px;
padding-right: 22px;}


#container-off{
display: none;}*/
/*---------------------------------------------------------------------------------------------------------------------------*/
.hr-vert{
height: 100%;
border-left: 2px solid rgba(128, 128, 128, 0.137);}
/*---------------------------------------------------------------------------------------------------------------------------*/
.hr-vert-int{
height: 100%;
border-right: 1px solid black;}
/*---------------------------------------------------------------------------------------------------------------------------*/









/*---------------------------------------------------------------------------------------------------------------------------*/
#heart{
margin-right: 4px;
margin-left: 4px;
cursor: pointer;
padding: 17px 10px 14px 12px;
width: 24px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#panier{
margin-right: 4px;
margin-left: 4px;
cursor: pointer;
padding: 17px 12px 14px 10px;
width: 24px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#cart{
position: relative;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#cart-content{
float: right;
position: absolute;
z-index: 6;
right: 10;
top: 13;
background-color: rgb(54, 144, 196);
border-radius: 6px;
padding: 0px 4px 0px 4px;
font-size: 14px;
text-shadow: 1px 1px rgba(0, 0, 0, 0.479);}
/*---------------------------------------------------------------------------------------------------------------------------*/
#register{
margin-left: 8px;}

#gohome,
#dashboard,
#magasin-show{
margin-right: 8px;}

#magasin-show{
display:inline-flex;
align-items:center;
justify-content:center;}

/* Icones des boutons du header : meme gabarit que le caddie, calees sur le milieu des majuscules du libelle */
/* .show de shared.css impose display:inline-block aux boutons : on retablit le flex par l'id (specificite superieure) */
#dashboard:not(.hidden),
#fermer:not(.hidden),
#login:not(.hidden),
#register:not(.hidden),
#logout:not(.hidden),
#compte-lk:not(.hidden),
#magasin-show{
display: inline-flex;
align-items: center;
justify-content: center;}

.log-ico{
flex: none;
margin-right: 4px;}

#magasin-hidden{
display:none;}
/*---------------------------------------------------------------------------------------------------------------------------*/
/*
#planete:hover{
scale: 1.1;
padding-top: 16px;
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(304deg) brightness(106%) contrast(101%);}
*/
/*---------------------------------------------------------------------------------------------------------------------------*/
#heart:hover,
#panier:hover{/*
scale: 1.1;*/
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(304deg) brightness(106%) contrast(101%);}
/*---------------------------------------------------------------------------------------------------------------------------*/
.log{
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
margin-top: 1px;
width: auto;
min-width: 0;
white-space: nowrap;/*
margin-left: 5px;*/

text-align: center;
background-color: #3f3f3f; /* Couleur de fond gris */
color: white; /* Couleur du texte */
border: none; /* Pas de bordure */
border-radius: 8px; /* Coins arrondis */
padding: 10px 14px; /* Espacement intérieur */
font-size: 16px; /* Taille de la police */
cursor: pointer; /* Curseur en forme de main au survol */
transition: background-color 0.1s ease; /* Transition pour l'effet de survol */
box-shadow: 0 4px 4px -5px #0202029a;
box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(15, 15, 15, 0.062) 0px 0px 0px 2px inset;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.log:hover { /*
font-size: 17px;
padding: 8px 0px 10px 0px;
box-shadow: 0 4px 4px -3px #0202027c;*/
background-color: #6b6b6b; /* Couleur de fond au survol */}


#login{
opacity: 0;}


#login:hover{
opacity: 1.0;}

#btn-bag{
position: relative;
}

#pastille{
position: absolute;
float: right;
right: -2px;
top: -6px;
width: 14px;
height: 10px;
padding: 4px 4px 4px 4px;
border-radius: 8px;
background-color: rgba(43, 132, 248, 0.589);
text-align: center;
font-size: 14px;
line-height: 10px;
}

/* =======================
    PAGE INFOS-LEGALES : bouton Fermer aligné à droite et centré verticalement
    ======================= */
    #container-on:has(#fermer.show) {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    height: 54px;
    padding-top: 10px;
    display: flex;
    align-items: center;
}

#container-on #fermer.show {
    margin-top: 0; /* annule le margin-top: 1px de .log pour un centrage parfait */
}

/* [19/09] LE GROUPE « FERMER + THEME » SE CENTRE DANS LA BARRE. Mesure au banc (Chromium, barre de 54 px) :
   height: 54px SANS box-sizing plus padding-top: 10px donnait un conteneur de 64 px, centres des boutons a 37
   au lieu de 27 — le groupe pendait 10 px sous la barre. Le remplissage part, la hauteur devient celle de la barre.
   Le margin-top: 1px que theme.css pose sur .theme-toggle (pour suivre celui des .log) n'a plus lieu d'etre ici,
   ou #fermer.show l'annule deja : sans cela il reste un demi-pixel d'ecart entre les deux boutons.
   Le display: flex de ce groupe vient de header.php (style en ligne), un style de feuille ne pouvant pas le battre. */
#container-on:has(#fermer.show){
    box-sizing: border-box;
    padding-top: 0;
}
#container-on:has(#fermer.show) .theme-toggle{
    margin-top: 0;
}

/* BOUTONS DE LA BARRE SUR ORDINATEUR  [03/10] : icone seule (le libelle reste dans le HTML pour le titre et les lecteurs
   d'ecran), et un voile translucide flou a la place du gris plein, pour se fondre dans les papiers peints. En clair,
   theme.css pose deja des blancs translucides : seul le flou s'ajoute. */
#container-on .log .log-lib{display: none;}
#container-on .log:has(.log-lib){padding-left: 11px; padding-right: 11px;}
#container-on .log:has(.log-lib) .log-ico{margin-right: 0; width: 1.35em; height: 1.35em;}
html:not([data-theme="light"]) #container-on .log{background-color: rgba(63, 63, 63, .55);}
html:not([data-theme="light"]) #container-on .log:hover{background-color: rgba(107, 107, 107, .70);}
html:not([data-theme="light"]) #container-on .theme-toggle{background-color: rgba(63, 63, 63, .55); border-color: transparent;}
@media (hover: hover){html:not([data-theme="light"]) #container-on .theme-toggle:hover{background-color: rgba(107, 107, 107, .70);}}
#container-on .log, #container-on .theme-toggle{-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);}

/* MENU DU BOUTON MON COMPTE  [03/10] — header.php : « Mon compte » puis « Deconnexion », sous le bouton, aligne a droite.
   Meme gabarit que le menu des langues (#lang-menu). */
#compte-wrap{position: relative; display: inline-flex; flex: none; margin-right: 8px;}
#compte-wrap #compte-lk{margin-right: 0;}
#compte-menu{
position: absolute;
right: 0;
top: calc(100% + 4px);
z-index: 2000;
width: max-content;
min-width: 190px;
padding: 6px;
font-size: 15px;
font-family: Arial, sans-serif;
background-color: #292929;
border: 1px solid rgb(59, 59, 59);
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.6) 0px 8px 22px;}
#compte-menu.compte-menu-cache{display: none;}
.compte-opt{
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 6px;
color: #e6e6e6;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.12s ease, color 0.12s ease;}
.compte-opt:hover{background-color: #ffffff14; color: #ffffff;}
.compte-opt .log-ico{width: 1.1em; height: 1.1em; margin: 0; flex: none;}
.compte-sep{height: 1px; margin: 5px 6px; background-color: rgba(255, 255, 255, .10);}
[data-theme="light"] #compte-menu{background-color: #ffffff; border-color: rgba(0, 0, 0, 0.12); box-shadow: rgba(0, 0, 0, 0.18) 0px 8px 22px;}
[data-theme="light"] .compte-opt{color: #3a3a3a;}
[data-theme="light"] .compte-opt:hover{background-color: rgba(0, 0, 0, .06); color: #1a1a1a;}
[data-theme="light"] .compte-opt .log-ico{fill: none; stroke: currentColor;}   /* icones au trait  [11/10] : un fill les remplirait */
[data-theme="light"] .compte-sep{background-color: rgba(0, 0, 0, .10);}

/* PILULE DE VUE  [03/10] — header.php, vue_pilule(). Dans la barre, apres le nom du site, pour l'administratrice et si
   le reglage « Vue du site » est active. Memes gris que les boutons de la barre (.log : #3f3f3f, survol #6b6b6b ; en clair
   les tons de theme.css) ; la vue en cours est l'option en relief. Ordinateur seulement : sous 1000 px la barre n'a pas la
   place, la pastille du bas reste. */
#vue-pill{
display: inline-flex;
align-items: center;
gap: 2px;
flex: none;
height: 36px;
margin-left: 26px;
padding: 0 6px 0 12px;
border-radius: 18px;
font: bold 12px/1 Arial, Helvetica, sans-serif;
color: #ffffff;
background-color: rgba(63, 63, 63, .55);   /* meme voile que les boutons de la barre (ci-dessous)  [03/10] */
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em;
white-space: nowrap;
cursor: default;}

#vue-pill > svg{
width: 16px;
height: 16px;
flex: none;
margin-right: 6px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
opacity: .75;}

.vue-pill-opt{
display: inline-flex;
align-items: center;
height: 28px;
padding: 0 11px;
border-radius: 14px;
color: #d6d6d6;
text-decoration: none;
cursor: pointer;}

.vue-pill-opt:hover{background-color: rgba(107, 107, 107, .75); color: #ffffff;}

.vue-pill-opt.vue-pill-on,
.vue-pill-opt.vue-pill-on:hover{background-color: rgba(107, 107, 107, .85); color: #ffffff; box-shadow: rgba(0, 0, 0, 0.35) 0 1px 3px;}

[data-theme="light"] #vue-pill{color: #1a1a1a; background-color: rgb(255 255 255 / 55%); border: 1px solid rgba(0, 0, 0, .10); box-shadow: rgba(0,0,0,.06) 0 .0625em .0625em, rgba(0,0,0,.06) 0 .125em .35em;}
[data-theme="light"] .vue-pill-opt{color: #4a4a4a;}
[data-theme="light"] .vue-pill-opt:hover{background-color: rgba(255, 255, 255, .92); color: #1a1a1a;}
[data-theme="light"] .vue-pill-opt.vue-pill-on,
[data-theme="light"] .vue-pill-opt.vue-pill-on:hover{background-color: #ffffff; color: #1a1a1a; box-shadow: rgba(0, 0, 0, .18) 0 1px 3px;}

/* la zone de gauche s'elargit a la mesure de la pilule, la zone de droite cede la place (70 % n'est plus fixe) */
#header:has(#vue-pill) #link-home{width: auto; flex: 1 1 30%; min-width: 0;}
#header:has(#vue-pill) #container-on{width: auto; flex: 1 1 70%;}
/* avec la pilule dans la barre, la pastille du bas est de trop sur ordinateur */
@media (min-width: 1001px){body:has(#vue-pill) #vue-pastille{display: none;}}
@media (max-width: 1000px){#vue-pill{display: none;}}

/* PASTILLE DES MODES DE VUE  [19/09] — outil d'administration (header.php, vue_pastille()). Elle est POSEE HORS DE LA
   BARRE, en bas a gauche et en position fixe : en mode invite la barre du haut doit etre exactement celle d'un
   visiteur, elle ne peut donc pas porter le bouton qui permet d'en sortir.
   Sobre tant que la vue est normale, ambre des qu'on regarde le site avec les yeux de quelqu'un d'autre — la meme
   teinte tient sur les deux themes : fond soutenu, texte tres sombre. Le z-index reste sous les modales (50) : cette
   pastille ne doit jamais passer devant une fenetre du site. */
#vue-pastille{
position: fixed;
left: 10px;
bottom: 10px;
z-index: 40;
display: flex;
align-items: center;
gap: 4px;
padding: 4px 6px;
border-radius: 9px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1;
background-color: rgba(30, 30, 30, .82);
border: 1px solid rgba(255, 255, 255, .14);
box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
opacity: .55;
transition: opacity .15s ease;}

#vue-pastille:hover{
opacity: 1;}

/* ambre des que la vue n'est plus celle de l'administratrice : le mode ne doit jamais s'oublier */
#vue-pastille.vue-inscrit,
#vue-pastille.vue-invite{
background-color: #d8a022;
border-color: rgba(0, 0, 0, .25);
opacity: 1;}

#vue-titre{
padding: 0 4px 0 2px;
color: #c8c8c8;
text-transform: uppercase;
letter-spacing: .06em;
font-size: 10px;}

#vue-pastille.vue-inscrit #vue-titre,
#vue-pastille.vue-invite #vue-titre{
color: #4a3a10;}

.vue-choix{
padding: 4px 8px;
border-radius: 6px;
color: #e8e8e8;
text-decoration: none;
cursor: pointer;}

.vue-choix:hover{
background-color: rgba(255, 255, 255, .14);}

#vue-pastille.vue-inscrit .vue-choix,
#vue-pastille.vue-invite .vue-choix{
color: #3a2d08;}

#vue-pastille.vue-inscrit .vue-choix:hover,
#vue-pastille.vue-invite .vue-choix:hover{
background-color: rgba(0, 0, 0, .12);}

/* le mode en cours */
.vue-choix.vue-on{
background-color: rgba(255, 255, 255, .18);
color: #ffffff;
font-weight: bold;}

#vue-pastille.vue-inscrit .vue-choix.vue-on,
#vue-pastille.vue-invite .vue-choix.vue-on{
background-color: #1a1a1a;
color: #f0d79a;}

/* MOBILES en mode portrait */
@media (max-width: 1000px) {/* règles communes mobile portrait + paysage */

    #container-on{
    display: none;}

    #link-home{
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2%;
    box-sizing: border-box;}

    #link-home2 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    order: 1;
    margin: 0;
    min-width: 0;
    pointer-events: none;
    cursor: default;}

    #link-home2 #m3dd{
    display: none;}

    #link-home2 #lang-wrapper{
    pointer-events: auto;
    margin: 0 6px 0 0;}

    #link-home2 #home{
    position: static;
    width: 34px;
    height: 34px;
    padding: 2px 0px 0px 0px;
    margin: 0;
    transform: none;
    flex: none;}

    #link-home2 #home-hover{
    display: none;}

    #link-home3 {
    display: flex;
    align-items: center;
    gap: 6px;
    order: 2;
    flex: none;
    margin-right: 0;
    margin-bottom: 0;
    align-self: center;}

    #btn-account,
    #btn-favorite,
    #btn-bag{
    margin: 0;
    flex: none;}

    #m3dd{
    font-size: 22px;
    padding-bottom: 15px;
    padding-left: 2px;/*
    line-height: 38px;*/}

    #btn-phone,
    #btn-exit,
    #btn-favorite,
    #btn-account,
    #btn-market,
    #btn-dash,
    #btn-login-ph,
    #btn-bag{
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 40px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    transition: background-color 0.15s ease, border-color 0.15s ease;}

    #btn-phone:hover,
    #btn-exit:hover,
    #btn-favorite:hover,
    #btn-account:hover,
    #btn-market:hover,
    #btn-dash:hover,
    #btn-login-ph:hover,
    #btn-bag:hover{
    background-color: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.30);}

    #exit-icon,
    #favorite-icon,
    #account-icon,
    #market-icon,
    #dash-icon,
    #login-ph-icon,
    #bag-icon{
    width: 22px;
    height: 22px;}

    .svg-icon{
    color: #fff;
    opacity: 0.9;}

    #exit-icon{
    width: 25px;
    height: 25px;}

    #container-on:has(#fermer.show) {
    padding-right: 8px;}


}



/* MOBILES en mode paysage */
@media (max-width: 1000px) and (orientation: landscape)
{






}
/* =========================================================
   MOBILE — CONTRASTE RENFORCE
   Memes teintes de base, ecarts elargis : le header descend d'un cran, les boutons remontent,
   les bordures passent d'un blanc translucide a un gris franc et les textes s'eclaircissent.
   Ajoute en fin de fichier : a specificite egale, c'est ce bloc qui s'applique.
   ========================================================= */
@media (max-width: 1000px) {

header{
background: rgb(36 36 36 / 78%);   /* [18/09] translucide : le papier peint passe dessous (theme clair : var(--hd-bg), theme.css) */
border-bottom: 1px solid #000000;
box-shadow: 0px 1px 0px 0px #000000;
z-index: 60;                /* [18/09] au-dessus du calque de la fenetre de connexion (z 50, modal_mobile.css) : la barre reste cliquable */
pointer-events: auto;}

#link-home3{ width: auto; }  /* [18/09] la regle PC width:0% s'appliquait aussi ici : les boutons debordaient d'une boite vide */

#btn-phone,
#btn-exit,
#btn-favorite,
#btn-account,
#btn-market,
#btn-dash,
#btn-bag{
background-color: #3a3a3a;
border: 1px solid #6f6f6f;}

#btn-phone:hover,
#btn-exit:hover,
#btn-favorite:hover,
#btn-account:hover,
#btn-market:hover,
#btn-dash:hover,
#btn-bag:hover{
background-color: #474747;
border-color: #8a8a8a;}

.svg-icon{
color: #f0f0f0;
opacity: 1;}

#lang-menu{
left: 0;}

}
/*---------------------------------------------------------------------------------------------------------------------------*/
/* Bouton « Mon compte » (PC) : espace avec « Déconnexion »  [phase 4] */
#compte-lk{
margin-right: 8px;}

/* =========================================================
   MOBILE — LOGO + NOM A LA SUITE DU DRAPEAU  [20/09]
   Remplace le centrage du 18/09 : meme disposition que sur ordinateur, drapeau puis logo puis « my3ddesigner »,
   alignes a gauche, les boutons a droite. Tout reste dans le FLUX pose par le bloc mobile plus haut (#link-home en
   flex, space-between) : plus de position absolue, donc plus de place a reserver de part et d'autre au juge.
   Le nom, masque sur mobile jusqu'ici, revient ; sa taille suit la largeur d'ecran et il se tronque plutot que de
   pousser les boutons hors champ.
   ========================================================= */
@media (max-width: 1000px){
    #link-home2{
    min-width: 0;}

    /* [20/09] le logo colle au drapeau : le bloc mobile plus haut donne 6 px de marge droite au drapeau, qui
       s'ajoutaient au gap de 2 px de la rangee — 8 px en tout. On retire la marge, il reste le gap. */
    #link-home2 #lang-wrapper{
    margin-right: 0;}

    #link-home2 #home{
    width: clamp(26px, 8vw, 34px);
    height: clamp(26px, 8vw, 34px);
    padding: 0;}

    #link-home2 #m3dd{
    display: block;
    font-size: clamp(14px, 4.4vw, 22px);
    line-height: 54px;
    padding: 0 8px 0 3px;   /* [20/09] un peu d'air avant les boutons : a 320 px avec trois boutons, le nom les touchait */
    margin: 0;
    top: 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;}
}