/* 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)) #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)) #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)) #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;
}

/* 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;}
}