/*****************************************************************************************************************************/
[contenteditable]{outline: 0px solid transparent;}
/*****************************************************************************************************************************/
.uncomplete {color: rgb(160, 160, 160);}
/*****************************************************************************************************************************/
/* Navigation profil précédent/suivant : demi-pilules collées aux bords intérieurs
   du wrapper, centrées verticalement sur la barre menu (entête 183px + barre 44px). */
#av,
#ap{
position: absolute;
top: calc(183px + 22px);
transform: translateY(-50%);
z-index: 6;
display: flex;
align-items: center;
opacity: 0.2;
cursor: pointer;
background-color: rgba(128, 128, 128, 0.6);
transition: opacity 0.15s;}

#av.hidden,
#ap.hidden{
display: none;}

#av{
left: 0;
padding: 8px 8px 8px 4px;
border-radius: 0px 8px 8px 0px;}

#ap{
right: 0;
padding: 8px 4px 8px 8px;
border-radius: 8px 0px 0px 8px;}

#av:hover,
#ap:hover{
opacity: 0.9;}

/* quand un bordereau de statut est affiché (profil bloqué/supprimé), il ajoute
   une bande de 16px en haut du wrapper : on décale les flèches d'autant pour
   garder leur alignement avec l'entête */
#act-status:has(#status.show) ~ #av,
#act-status:has(#status.show) ~ #ap{
top: calc(183px + 22px + 16px);}

#avant,
#apres{
width: 22px;
display: block;
cursor: pointer;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#profil-show{
position: fixed; 
top: 0; 
left: 0; 
display: flex; 
align-items: center; 
justify-content: center;
width: 100%;
height: 100%; 
background: rgba(22, 22, 22, 0.95);
z-index: 9998;
animation: blur 0.3s forwards;
user-select: none;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#profil-hidden{
display: none;}
/*****************************************************************************************************************************/
#profil-content{
height: auto; 
overflow: auto;}
/*****************************************************************************************************************************/
#englobe{
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
height: auto;
padding-bottom: 0;
display: flex;
flex-direction: column;}
/*****************************************************************************************************************************/
label{
display: inline-block;} 
/*****************************************************************************************************************************/
.profil-wrapper{
position: relative;
margin-left: auto;
margin-right: auto;
width: 740px; 
height: 820px;
background-color: #323232;
border-radius: 16px;
z-index: 9;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow:rgba(0, 0, 0, 0.26) 0px 3px 6px, rgba(0, 0, 0, 0.33) 0px 2px 2px;}

.profil-wrapper > #act-status,
.profil-wrapper > #profil-entete,
.profil-wrapper > #profil-menu{
flex: 0 0 auto;}

.profil-wrapper > #englobe{
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;}
/*****************************************************************************************************************************/
#status{
position: relative;
z-index: 4;
width: 100%;
height: 16px;
line-height: 16px;
color: #cccccc;
font-style: italic;
font-size: 14px;
text-align: center; 
cursor: pointer;
opacity: 0;
border-radius: 16px 16px 0px 0px;
animation: bordereau 0.4s forwards;
animation-delay: 0.2s;
transform-origin: 0 100%;
box-sizing: border-box;}
/* profil actif : le bordereau ne s'affiche pas et ne réserve aucune hauteur */
#status.hidden{
display: none;}
/* profil bloqué / supprimé : le bordereau occupe sa bande en haut du wrapper */
#status.show{
display: block;}
/*****************************************************************************************************************************/
.profil-entete{
overflow: hidden;
width: 100%; 
height: auto; 
min-height: 183px;
background: linear-gradient(to bottom, #3084d350, #053d5e49);
opacity: 1.0;}
/* en zoom (classe .zoomed posée par le JS dès le clic), l'entête prend toute la hauteur
   du wrapper ; reste en position relative pour préserver icônes/prénom, l'image est centrée en absolu */
.profil-wrapper.zoomed > #profil-entete,
.profil-wrapper.zoomed > .profil-entete{
flex: 1 1 auto;
min-height: 0;
height: auto;
position: relative;}

/* en zoom, seuls l'entête et les images restent : on masque tout le reste
   (ciblage par id pour battre le display:flex de #englobe) */
.profil-wrapper.zoomed > #englobe,
.profil-wrapper.zoomed #englobe,
.profil-wrapper.zoomed > #profil-menu,
.profil-wrapper.zoomed #profil-menu,
.profil-wrapper.zoomed > #act-status,
.profil-wrapper.zoomed #av,
.profil-wrapper.zoomed #ap{
display: none !important;}
/*****************************************************************************************************************************/
#ic-settings,
#ic-add,
#ic-back{
float: right;
padding-right: 8px;
padding-bottom: 4px;
padding-left: 9px;
cursor: pointer;
filter: brightness(0) saturate(100%) invert(0%) sepia(27%) saturate(6267%) hue-rotate(351deg) 
brightness(96%) contrast(88%);}
/*---------------------------------------------------------------------------------------------------------------------------*/
#ic-settings{
padding-top: 10px;
width: 21px;
opacity: 0.72;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#ic-add{
padding-top: 11px;
width: 17.8px;
opacity: 0.65;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#ic-back{
padding-top: 11px;
width: 18px;
opacity: 0.65;}
/*****************************************************************************************************************************/
#profil-cross{
font-family: Arial, Helvetica, sans-serif; 
font-weight: bolder;
font-size: 23px;
opacity: 0.70;
color: #0c0c0c; 
cursor: pointer;
float: right; 
padding-top: 8px; 
padding-right: 10px;
padding-left: 8px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#profil-cross:hover{
color: white;
opacity: 1.0;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.hr-vert0{
position: absolute;
float: right;
margin-top: 8px;
right: 36px;
height: 25px;
width: 2px;
border-right: 1px solid rgba(0, 0, 0, 0.514);
opacity: 0.6;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.hr-vert1{
position: absolute;
float: right;
margin-top: 8px;
right: 36px;
height: 25px;
width: 2px;
border-left: 1px solid #80808023;
opacity: 0.6;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.hr-vert3{
position: absolute;
float: right;
margin-top: 8px;
right: 0;
height: 25px;
width: 2px;
border-right: 1px solid rgba(0, 0, 0, 0.514);
opacity: 0.6;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.hr-vert2{
position: absolute;
float: right;
margin-top: 8px;
right: 0px;
height: 25px;
width: 2px;
border-left: 1px solid #80808023;
opacity: 0.6;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#close-settings{
width: 21px;
float: right;/*
top: 1;*/
margin-top: 1px;
cursor: pointer;
opacity: 0.9;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#ic-settings:hover, 
#close-settings:hover,
#ic-add:hover,
#ic-back:hover{
opacity: 1.0;
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(141deg) 
brightness(103%) contrast(101%);}
/*****************************************************************************************************************************/
#settings{
float: right;
position: sticky;
height: 0;
z-index: 10;}
/*****************************************************************************************************************************/
#content-settings{
float: right; 
width: 200px;
margin-top: 9px;
margin-right: 5px;
background-color: #292929;
border-radius: 6px;
font-size: 14px;
box-shadow:rgba(0, 0, 0, 0.5) 0px 3px 6px, rgba(0, 0, 0, 0.39) 0px 2px 2px;}
/*****************************************************************************************************************************/
#click-line2, 
#click-line3{
width: 188px; 
height: auto;}
/*****************************************************************************************************************************/
#line0{
width: 192px;
padding-right: 5px;
border-radius: 6px 0px 0px 0px;}
/*****************************************************************************************************************************/
#settings-line1{
width: 192px;
height: 24px;
line-height: 24px;
cursor: pointer;
color: #cfcfcf;
padding-right: 4px;
padding-left: 5px;
border-radius: 6px 6px 0px 0px;}
/*****************************************************************************************************************************/
#settings-line2{
width: 191px;
height: 24px;
line-height: 24px;
cursor: pointer;
color: #d8d8d8;
padding-right: 5px;
padding-left: 5px;}
/*****************************************************************************************************************************/
#settings-line2-expanded{
width: 191px;
height: 76px;
cursor: pointer;
color: #d8d8d8;
padding-right: 5px;
padding-left: 5px;
padding-top: 4px;}
/*****************************************************************************************************************************/
#line2-arrow-back,
#line3-arrow-back{
float: right;
position: relative;
padding-left: 13px;/*
padding-bottom: 4px;*/}
/*****************************************************************************************************************************/
#line2-arrow-up,
#line3-arrow-up{
float: right;
position: relative;
top: -3;
padding-left: 13px;/*
padding-bottom: 4px;*/}
/*****************************************************************************************************************************/
#date-supp, 
#date-block{
width: 187px; 
border: none; 
resize: none; 
outline: none; 
background-color: #13131371; 
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #cfcfcf;
border-radius: 6px;
margin-left: 2px;
margin-bottom: 4px;
line-height: 20px;
font-style: italic;
padding: 3px;}
/*****************************************************************************************************************************/
#settings-line3{
width: 191px;
height: 24px;
line-height: 24px;
cursor: pointer;
color: #d8d8d8;
padding-right: 5px;
padding-left: 5px;}
/*****************************************************************************************************************************/
#settings-line3-expanded{
width: 191px;
height: 56px;
cursor: pointer;
color: #d8d8d8;
padding-right: 5px;
padding-left: 5px;
padding-top: 4px;}
/*****************************************************************************************************************************/
#settings-line4{
width: 191px;
cursor: pointer;
height: 24px;
line-height: 24px;
color: #d8d8d8;
padding-right: 5px;
padding-left: 5px;}
/*****************************************************************************************************************************/
.status-selected{
background-color: #427e9cfd;}
/*****************************************************************************************************************************/
.line-ended{
border-radius: 0px 0px 6px 6px;}
/*****************************************************************************************************************************/

#waiter-img1-on,
#waiter-img1-off,*
#waiter-img2-on,
#waiter-img2-off{
position: absolute;
width: 140px; 
height: 140px;}

#waiter-img1-on,
#waiter-img2-on{
z-index: 0;}

#waiter-img1-off,
#waiter-img2-off{
z-index: -2;}

.no-contour{
box-shadow: rgba(27, 27, 27, 0.329) 1px 1px 4px 4px inset, rgba(0, 0, 0, 0.068) -1px -1px 4px 4px inset;}

.contour{/*
border: 1px solid rgb(83, 117, 168);*/
box-shadow:
0 0 4px #37b6ffa4,
inset 0 0 4px #37b6ffa4,
0 0 8px #37b6ffa4,
inset 0 0 8px #37b6ffa4,
0 0 16px #37b6ffa4,
inset 0 0 16px #37b6ffa4;}

#drop-area, #drop-area2{
width: 140px; 
height: 140px; 
margin-top: 23px; 
margin-left: 18px; 
margin-bottom: 20px;
border-radius: 8px;
background-color: #292929;
/*background-position: center;*/
background-repeat: no-repeat; 
/*
background-repeat: repeat; 
background-size: 100% 100%;*/}
/*---------------------------------------------------------------------------------------------------------------------------*/
#drop-area-freezed, #drop-area2-freezed{
display: block;
width: 86%;
aspect-ratio: 1 / 1;
height: auto;
margin-top: 120px;
margin-left: 7%;
margin-right: auto;
margin-bottom: 24px;
border-radius: 8px;
transform-origin: left center;
background-color: #292929;/*
background-position: center;*/ 
background-repeat: no-repeat; 
/*
background-repeat: repeat; 
background-size: 100% 100%;*/}
/* la 2e image (personne réelle) reste masquée si elle porte .hidden, même en zoom */
#drop-area-freezed.hidden, #drop-area2-freezed.hidden{
display: none;}
/*****************************************************************************************************************************/
#avatar{
width: 100%;}
/*****************************************************************************************************************************/
#profil-picture{ 
cursor: zoom-in; 
min-width: 140px;
width: 100%; 
height: 50%;   
margin: 0;
padding: 0;
text-align: left;
border-radius: 0px 0px 10px 10px;
opacity: 0;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#profil-picture-freezed{
cursor: zoom-in; 
min-width: 318px;
width: 100%; 
height: 50%;   
margin: 0;
padding: 0;
text-align: left;
border-radius: 0px 0px 10px 10px;
opacity: 0;}
/*****************************************************************************************************************************/
#real-picture{
cursor: zoom-in; 
min-width: 140px;
width: 100%; 
height: 50%;   
margin: 0;
padding: 0;
text-align: left;
border-radius: 0px 0px 10px 10px;
opacity: 0;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#real-picture-freezed{
cursor: zoom-in; 
min-width: 318px;
width: 100%; 
height: 50%;   
margin: 0;
padding: 0;
text-align: left;
border-radius: 0px 0px 10px 10px;
opacity: 0;}
/*****************************************************************************************************************************/
#profil-paste-picture, #profil-paste-picture2{
cursor: zoom-in;
min-width: 140px;
width: 100%; 
height: 50%; 
margin-top: 0%;
margin-left: 0%;
margin-right: 0%;
margin-bottom: 0%;
opacity: 0; 
border: none; 
resize: none; 
outline: none; 
border-radius: 10px 10px 0px 0px; 
display: block;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#profil-paste-picture-freezed{
cursor: zoom-out;
min-width: 318px;
width: 100%; 
height: 50%; 
margin-top: 0%;
margin-left: 0%;
margin-right: 0%;
margin-bottom: 0%;
opacity: 0; 
border: none; 
resize: none; 
outline: none; 
border-radius: 10px 10px 0px 0px; 
display: block;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#profil-paste-picture2-freezed{
cursor: zoom-out;
min-width: 318px;
width: 100%; 
height: 50%; 
margin-top: 0%;
margin-left: 0%;
margin-right: 0%;
margin-bottom: 0%;
opacity: 0; 
border: none; 
resize: none; 
outline: none; 
border-radius: 10px 10px 0px 0px; 
display: block;}
/*****************************************************************************************************************************/
#del-pic, #del-pic2{
position: absolute;
z-index: 2;
width: 14px;
top: -5%;   
left: -6%;
opacity: 0;
cursor: pointer; 
padding: 10px;
filter: brightness(0) saturate(100%) invert(0%) sepia(6%) saturate(186%) 
hue-rotate(316deg) brightness(93%) contrast(79%);}
/*---------------------------------------------------------------------------------------------------------------------------*/
#del-pic-freezed, #del-pic2-freezed{
position: absolute;
z-index: 2;
width: 32px;
top: 0%;   
left: -1%;
opacity: 0;
cursor: pointer; 
padding: 10px;
filter: brightness(0) saturate(100%) invert(0%) sepia(6%) saturate(186%) 
hue-rotate(316deg) brightness(93%) contrast(79%);}
/*****************************************************************************************************************************/
#arrow1{
width: 14px;
left: -20px; 
bottom: -17px; 
position: relative;
z-index: 2; 
opacity: 0.5;
cursor: pointer;
padding: 20px;
filter: brightness(0) saturate(100%) invert(0%) sepia(6%) saturate(186%) hue-rotate(316deg) 
brightness(93%) contrast(79%);}
/*---------------------------------------------------------------------------------------------------------------------------*/
#arrow1-freezed{
width: 4%;
left: 675px;
position: relative; 
z-index: 2; 
/*top: 18%;*/
bottom: 180px;
padding: 20px;
cursor: pointer;
opacity: 0.5;}
/* en zoom : flèche de bascule avatar<->réel positionnée sur le bord droit de l'image, centrée verticalement */
.profil-wrapper.zoomed #arrow1,
.profil-wrapper.zoomed #arrow1-freezed{
position: absolute;
left: auto;
right: 1.5%;
top: auto;
bottom: 64px;
width: 22px;
padding: 6px;
z-index: 6;
opacity: 0.6;
cursor: pointer;}
/*****************************************************************************************************************************/
#arrow1:hover, 
#arrow1-freezed:hover,
#del-pic:hover,
#del-pic-freezed:hover,
#del-pic2:hover,
#del-pic2-freezed:hover,
#av:hover #avant,
#ap:hover #apres{
opacity: 0.9;
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(141deg) 
brightness(103%) contrast(101%);}
/*****************************************************************************************************************************/
#prenom-nom{
position: absolute; 
top: 9%;
width: 100%; 
text-align: center; 
font-size: 20px; 
font-family: Constantia, Times, serif;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#prenom-nom div{
display: inline-block;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#span-prenom-nom{
caret-color: #cfcfcf;
min-width: 1px;}

#span-prenom-nom:empty::before{
content: "\200B";}
/*****************************************************************************************************************************/
#drapeau{
width: 30px;
height: auto;
position: relative;
right: 10;
top: -19;
margin-right: 4px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#flag{
position: absolute;
top: 5.2;
right: -8;
width: 20px;}
/*****************************************************************************************************************************/
#diminutif{
padding-top: 9px; 
width: 36px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#diminutif{
position: absolute;
z-index: 1; 
top: 2; 
height: auto; 
background-color: #292929; 
line-height: 4px;
border: none; 
resize: none; 
outline: none; 
text-align: center; 
padding-top: 3px; 
padding-bottom: 3px;
font-size: 14px; 
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #858585; 
border-radius: 6px;}
/*****************************************************************************************************************************/
#sexe{
font-size: 17px;
margin-left: 7px;
font-weight: bold;} 
/*---------------------------------------------------------------------------------------------------------------------------*/
#entrer-sexe{
position: absolute; 
z-index: 1; 
top: 2.1px;
width: 30px; 
height: auto; 
background-color: #292929; 
line-height: 4px;
border: none; 
resize: none; 
outline: none; 
text-align: center; 
padding-top: 3px; 
padding-bottom: 3px;
font-size: 14px; 
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #858585; 
border-radius: 6px;}
/*****************************************************************************************************************************/
.profil-menu{
width: 100%; 
height: 44px; 
background: linear-gradient(#363636, rgba(36, 36, 36, 0.507));
border-collapse: collapse; 
border-spacing: 1; 
margin: 0;}
/*****************************************************************************************************************************/
#apropos{
width: 100%;
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
padding: 0 16px 16px 16px;
box-sizing: border-box;}
/*****************************************************************************************************************************/
#resume, #biog, #evaluations{
width: 33%; 
border-bottom: solid 2px rgb(27, 27, 27); 
cursor: pointer; 
padding-bottom: 3px;
border-top: solid 1px rgba(27, 27, 27, 0.507); 
text-align: center;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#resume, #biog{/*
border-right: solid 2px rgb(20, 20, 20);*/}
/*---------------------------------------------------------------------------------------------------------------------------*/
#resume-create{
width: 100%; 
border-bottom: solid 2px rgb(27, 27, 27); 
cursor: pointer; 
padding-bottom: 3px;
border-top: solid 1px rgba(27, 27, 27, 0.507);
text-align: center;
cursor: default;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#biog-create, #evaluations-create{
display: none;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.profil-selected,
#resume:hover,
#biog:hover,
#evaluations:hover{
background: linear-gradient(to bottom, #3084d33f, #053d5e42);}
/*****************************************************************************************************************************/
#first{
padding-top: 6px; 
padding-bottom: 4px;}
/* Slider à 2 colonnes (glissement vertical) --------------------------------------------------------------------- */
#first{
display: block;
position: relative;}

#first-viewport{
width: 100%;
overflow: hidden;
position: relative;}

/* la 2e colonne est superposée; seule la colonne active occupe la hauteur */
.first-col{
flex: 0 0 auto;
width: 100%;
box-sizing: border-box;}

#first-col2{
position: absolute;
top: 100%;
left: 0;
width: 100%;}

#first-track{
display: flex;
flex-direction: column;
transition: transform 0.35s ease;}

#first.show-col2 #first-track{
transform: translateY(-100%);}

.first-col-body{
width: 100%;
padding-bottom: 8px;
box-sizing: border-box;}

/* chevron de bascule : sur la dernière ligne, tout à droite */
.first-nav{
position: absolute;
right: 14px;
bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #8f8f8f;
user-select: none;
z-index: 2;}

.first-nav:hover{
color: #d8d8d8;}

.first-nav-arrow{
display: block;
transition: transform 0.3s ease;}

/* chevron retourné vers le haut quand on est sur la colonne 2 */
#first.show-col2 #first-nav-btn .first-nav-arrow{
transform: rotate(180deg);}
/*---------------------------------------------------------------------------------------------------------------------------*/
/* Lignes cliquables simples (Interactions) ----------------------------------------------------------------------------- */
.line-clickable{
cursor: pointer;
align-items: center;}

.line-clickable .ic-svg{
margin-top: 0;}

.line-text{
color: #b8b8b8;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
padding: 2px 0;}

.line-clickable:hover .line-text{
color: #d8d8d8;}

/* Bouton pleine largeur (Évaluations) --------------------------------------------------------------------- */
.bottom-btn{
display: flex;
align-items: center;
width: 100%;
margin-top: 14px;
padding: 10px 14px;
box-sizing: border-box;
background-color: #292929;
color: #b8b8b8;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
font-weight: bold;
cursor: pointer;
border-radius: 12px;}

.bottom-btn:hover{
color: #d8d8d8;}

.bottom-btn-label{
flex: 1 1 auto;}

.bottom-btn-arrow{
flex: 0 0 auto;
color: #9a9a9a;
transition: transform 0.25s ease;}

.bottom-btn.open .bottom-btn-arrow{
transform: rotate(180deg);}

/* contenu déployable */
.bottom-content{
width: 100%;
flex: 0 0 auto;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-top: 14px;}

.bottom-content.hidden{
display: none;}

/* bloc déployé en plein écran : occupe toute la hauteur dispo (bat le display:block inline de jQuery .show()) */
.bottom-content.open-full{
display: flex !important;
flex: 1 1 auto;
min-height: 0;}

/* --- slide vertical d'ouverture/fermeture plein écran --- */
.bottom-content.sliding{
overflow: hidden;}

.bottom-content.slide-enter{
transform: translateY(100%);
opacity: 0;}

.bottom-content.slide-enter-active{
transform: translateY(0);
opacity: 1;
transition: transform 0.35s ease, opacity 0.35s ease;}

.bottom-content.slide-leave{
transform: translateY(0);
opacity: 1;}

.bottom-content.slide-leave-active{
transform: translateY(100%);
opacity: 0;
transition: transform 0.35s ease, opacity 0.35s ease;}

/* la biographie (vue normale) remplit l'espace restant de #apropos */
#bio-content{
flex: 1 1 auto;
min-height: 0;
position: relative;}

.bottom-content #notes-wrap,
.bottom-content #bio{
width: 100%;}

#bio-content #notes-wrap{
border-radius: 12px;
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;}

#bio-content #notes,
#bio-content #notes-create{
flex: 1 1 auto;
min-height: 90px;
height: auto;}

/* chevron d'agrandissement bio : bas-droite, comme celui de #first */
#bio-expand{
position: absolute;
right: 14px;
bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #8f8f8f;
cursor: pointer;
z-index: 5;}

#bio-expand:hover{
color: #d8d8d8;}

#bio-content.open-full #bio-expand .first-nav-arrow{
transform: rotate(180deg);}

/* chevron de fermeture des évaluations : dans le coin bas-droite du placeholder */
#eval-content{
position: relative;}

#eval-collapse{
position: absolute;
right: 14px;
bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #8f8f8f;
cursor: pointer;
z-index: 5;}

#eval-collapse:hover{
color: #d8d8d8;}

#eval-placeholder{
width: 100%;
flex: 1 1 auto;
min-height: 0;
margin-top: 0;
padding: 12px;
box-sizing: border-box;
background-color: #292929;
color: #858585;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
border-radius: 12px;}

/*---------------------------------------------------------------------------------------------------------------------------*/
/* LIGNES DE #first : icône SVG à gauche + champs à droite (flex) ----------------------------------------------------------- */
.first-row{
display: flex;
align-items: flex-start;
gap: 10px;
padding: 3px 8px 3px 0;}

/* icône SVG homogène pour toutes les lignes (taille fixe stricte) */
.ic-svg{
flex: 0 0 20px;
width: 20px;
height: 20px;
min-width: 20px;
max-width: 20px;
margin-left: 14px;
margin-top: 2px;
color: #9a9a9a;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: default;
user-select: none;
background-color: transparent !important;
float: none !important;
overflow: hidden;}

.ic-svg > svg,
#first .ic-svg svg{
width: 20px !important;
height: 20px !important;
max-width: 20px !important;
max-height: 20px !important;
min-width: 20px;
flex: 0 0 auto;
display: block;}

/* garde l'icône entreprise visible même si le JS bascule #dots -> #dots-off */
#dots.ic-svg,
#dots-off.ic-svg{
display: inline-flex !important;
width: 20px !important;
max-width: 20px !important;
background-color: transparent !important;
float: none !important;
margin-right: 0 !important;}

.first-fields{
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
margin: 0;
padding: 0;
text-align: left;}

.first-fields > input,
.first-fields > #achats{
width: 100%;
box-sizing: border-box;}

#contact-hidden,
#pro-hidden{
display: flex;
flex-direction: column;
width: auto;
box-sizing: border-box;}
/*---------------------------------------------------------------------------------------------------------------------------*/

#first{
width: 100%; 
height: auto; 
background-color: #292929; 
display: block;
margin: 14px 0 0 0;
box-sizing: border-box;
border-radius: 12px;}

#liens{
width: 100%; 
height: auto; 
background-color: #292929; 
display: block;
margin: 14px 0 0 0;
box-sizing: border-box;
border-radius: 12px;}
/*****************************************************************************************************************************/
.profil-textarea, 
.profil-links-textarea, 
.profil-links-textarea-name, 
#achats{
background-color: #292929; 
line-height: 24px;
border: none; 
resize: none; 
outline: none; 
padding: 0px;/*
padding-left: 6px; 
margin-left: 2px;*/
font-size: 14px; 
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #999999;}
/*****************************************************************************************************************************/
.profil-links-textarea{
margin-right: 6px;}
/*****************************************************************************************************************************/
#titles{
width: 86.1%;
border-radius: 4px;
cursor: text;}

#titre-sql,
#email,
#civil-pro,
#type-e,
#capital,
#rcs,
#siret,
#tva,
#email,
#tel1{
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin-top: 1px;
font-size: 14px;
height: 26px;
border: hidden;
outline: none;
color: #999999;}

.ic{
flex: 0 0 auto;
margin-top: 0; 
margin-left: 12px; 
margin-right: 8px;}

#dots{
background-color: #202020;
width: 25px;
cursor: pointer;
text-align: center;
color: white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border-radius: 8px; 
float: right;
margin-right: 5px;
padding-top: 1px;
padding-bottom: 3px;
line-height: 20px;}

#dots-contact{
background-color: #202020;
width: 18px;
height: 15px;
cursor: pointer;
border-radius: 8px;
margin-right: 5px;
background-image: url(../../Img/Png/contact-us.png);
background-repeat: repeat; 
background-position: center;
background-size: 100% 100%;
float: right;
right: 52px;
padding: 5px 3px 4px 3px;}

#dots-off{
display: none;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#dots-contact:hover,
#plus:hover,
#dots:hover{
background-color: #4b4b4b;}

.pro{
background-color: #292929;}

.adresse{
width: 18px;
float: left; 
margin-top: 4px; 
margin-left: 11px; 
margin-right: 8px;}

.contact{
width: 12px;}

#type-e,
#capital,
#rcs,
#siret,
#tva,
#email,
#tel1{
width: 99%;
border-radius: 4px;
padding: 0px;
cursor: text;}

#pro-show,
#contact-show{
width: 300px;
background-color: #222222;
border-radius: 4px;
cursor: pointer;
float: right;
position: absolute;
right: 0;
margin-top: 0px;
z-index: 4;
margin-right: 20px;
border: solid 1px rgba(255, 255, 255, 0.336);}

/* LISTE DEROULANTE DES TITRES
   `position: fixed` : indispensable, sinon #first-viewport (overflow: hidden, pose pour le
   glissement des deux colonnes) coupe la liste des qu'elle depasse le bloc #first. Fixe, elle
   echappe a tout rognage et se dessine au-dessus du reste de la fiche.
   `top: auto` lui laisse sa position verticale naturelle, juste sous le champ Titres ; le
   centrage horizontal se fait sur la fenetre, donc sur la modale, qui y est elle-meme centree.
   Largeur = celle des blocs de la fiche (740px de wrapper moins les 2 x 16px de #apropos). */
#titresql{
width: 624px;
max-width: calc(100vw - 32px);
max-height: 60vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background-color: #292929;
border-radius: 4px;
cursor: pointer;
position: fixed;
top: auto;
left: 50%;
transform: translateX(-50%);
/* .first-fields est un conteneur flex : la position statique d'un element sorti du flux y est
   celle du HAUT du conteneur, pas celle qui suit le champ. Cette marge (24px de line-height du
   champ + 4px de gap) redescend donc la liste juste sous la ligne Titres, qui reste visible. */
margin-top: 28px;
margin-left: 0;
margin-right: 0;
box-sizing: border-box;
z-index: 9999;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
border: solid 1px rgba(255, 255, 255, 0.336);}

#titresql-off{
display: none;}

.titre-optgrp{
display: block;
padding-left: 6px;
padding-top: 1px;
padding-bottom: 3px;
width: 100%;}

.opt{
display: block;
padding-left: 20px;
padding-top: 1px;
padding-bottom: 3px;
color: rgb(167, 167, 167);
width: 100%;}

.opt:hover{
background-color: #69696993;
width: 96.7%;}

.titres{
background-color: #32414d;
width: 96.7%;}
/*****************************************************************************************************************************/
.profil-textarea, #achats{
width: 93%;}
.profil-links-textarea{
width: 62%;}
.profil-links-textarea-name{
width: 27%;
margin-right: 6px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#achats{
margin-bottom: 4px;}
/*****************************************************************************************************************************/
.unclient{
text-decoration: underline; 
text-underline-offset: 4px; 
cursor: pointer; 
text-decoration-thickness: 1px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.unclient:hover{
color: white;}
/*****************************************************************************************************************************/
#divlinks{
position: absolute; 
z-index: 1; 
left: 0; 
bottom: 9; 
background-color: #292929; 
padding-left: 8px; 
float: left; 
height: 26px; 
padding-bottom: 2px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#links-editable{
padding-bottom: 4px;
background-color: #292929; 
position: absolute; 
z-index: 1; 
left: 32px; 
top: 50%;
transform: translateY(-50%);
height: auto;
line-height: normal;
display: flex;
align-items: center;
overflow: auto;
min-width: 2px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#links-editable.hidden{
display: none;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.links-editable{
cursor: pointer; 
line-height: 32px;
margin-left: 8px;}
/*****************************************************************************************************************************/
#liens{
padding-top: 0; 
padding-bottom: 0; 
position: relative; 
min-height: 44px;
display: flex;
align-items: center;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#liens a{
color: #999999; 
text-decoration: underline; 
text-underline-offset: 4px; 
text-decoration-thickness: 1px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#liens a:hover{
color: #00a7f5f6;}
/*****************************************************************************************************************************/
.profil-deleted{
line-height: 33px; 
margin-left: 10px; 
font-weight: bold;}
/*****************************************************************************************************************************/
#plus{
background-color: #202020; 
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding-top: 3px; 
padding-bottom: 4px;
padding-right: 6px; 
padding-left: 6px;
border-radius: 8px; 
margin-left: auto;
margin-right: 10px;
cursor: pointer;}
/*****************************************************************************************************************************/
#trash{
cursor: pointer;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#lk.ic-svg{
margin-left: 14px;
margin-right: 8px;
margin-top: 0;
color: #9a9a9a;
flex: 0 0 20px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#trash:hover{
filter: brightness(0) saturate(100%) invert(12%) sepia(93%) saturate(7089%) hue-rotate(2deg) 
brightness(96%) contrast(112%);}
/*****************************************************************************************************************************/
#notes-eraser, 
#notes-reset{
width: 17px; 
margin-top: 0px;
float: right; 
opacity: 0.2;
cursor: pointer;} 
/*---------------------------------------------------------------------------------------------------------------------------*/
#notes-reset{
margin-left: 12px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#notes-eraser:hover, #notes-reset:hover{
opacity: 1.0;}
/*****************************************************************************************************************************/
/* Titre "Biographie" + gomme au-dessus du textarea ---------------------------------------------------------------------- */
#bio{
width: 100%;
background-color: #292929;
display: block;
padding: 8px 12px 6px 12px;
box-sizing: border-box;
border-radius: 12px 12px 0px 0px;}

#bio-title{
display: flex;
align-items: center;}

#bio-title-span{
flex: 1 1 auto;
color: #b8b8b8;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
font-size: 14px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#notes-wrap{
position: relative;
width: 100%;
margin: 0;
box-sizing: border-box;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#notes-create{
height: 57%;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#notes, #notes-create{
width: 100%; 
background-color: #292929;
border: none; 
resize: none; 
outline: none;
font-size: 15px; 
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #858585; 
overflow: auto;
display: block;
box-sizing: border-box;
margin: 0;
padding: 8px 12px 8px 12px;
border-radius: 0px 0px 12px 12px;}
/*****************************************************************************************************************************/
#create-profil{
width: 100%; 
height: 42px;
text-align: center;
background-color: #292929; 
display: block;
margin-top: 14px;
border-radius: 10px;
line-height: 40px;
cursor: pointer;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#create-profil-hidden{
display: none;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#create-profil:hover{
background-color: #4cb1ff85}

/* Scrollbar ******************************************************************************************************************
*{ Firefox 
scrollbar-width: auto;
scrollbar-color: rgb(43, 43, 43);}

*::-webkit-scrollbar{/* Chrome, Edge, and Safari 
width: 16px; 
cursor: pointer;}

*::-webkit-scrollbar-track{
background: #464646;}

*::-webkit-scrollbar-thumb{
background-color: #464646; 
border-radius: 4px;}
*/

/* BLUR **********************************************************************************************************************/
@keyframes blur
{
    0%  {opacity: 0;}
    100%{opacity: 1.0;}
}
/* ANIMATION BORDEREAU //////////////////////////////////////////////////////////////////////////////////////////////////////*/
@keyframes bordereau
{
    0% 
    {
        transform: scaleY(0);
        opacity: 0;
    }

    100% 
    {
        transform: scaleY(1);
        opacity: 1.0;

    }
}
/*ZOOM IN PICTURE ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@keyframes show_picture_wrapper
{
    100% 
    {
        background: linear-gradient(to bottom, #304855, #242a31);
    }
}
@keyframes show_picture_entete
{
    100% 
    {
        background: rgba(51,170,51,0);
    }
}
@keyframes show_picture_patronyme
{
    100% 
    {
        top: 5%;
    }
}
@keyframes zoom_grow
{
    0%   { width: 30%; opacity: 0.5; }
    100% { width: 86%; opacity: 1;   }
}
@keyframes show_picture_paste
{
    100% 
    {   cursor: zoom-out;
    }
}
@keyframes show_picture_profil
{
    100% 
    {   
        cursor: zoom-out;
    }
}
@keyframes show_picture_menu
{
    100% 
    {
        display: none;
    }
}
@keyframes show_picture_next
{
    100% 
    {
        width: 4%;
        left: 675px;
        position: relative; 
        z-index: 2; 
        top: 18%;
        bottom: 180px;
        padding: 20px;
        cursor: pointer;
        opacity: 0.2;
    }    
}

/* ÉCRANS ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 2560px) and (min-height: 1440px) /* 2560 x 1440 */
{
}
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 1920px) and (max-height: 1080px)
{
}
@media screen and (max-width: 1923px) and (max-height: 929px)
{
}
@media screen and (max-width: 1922px) and (max-height: 932px)
{
}
@media screen and (max-width: 1682px) and (max-height: 932px) /* sncf */
{
    #titre-sql,
    .profil-textarea, 
    #achats,
    #links-editable,
    #profil-links-textarea, .profil-links-textarea,
    #profil-links-textarea-name, .profil-links-textarea-name,
    #notes,
    #first, 
    #liens, 
    #notes-wrap,
    #notes-create,
    #create-profil{
    background-color: #292929;}
}
@media screen and (max-width: 1600px) and (max-height: 900px)
{
}
@media screen and (max-width: 1536px) and (max-height: 864px)
{
}
@media screen and (max-width: 1440px) and (max-height: 900px)
{
}
@media screen and (max-width: 1366px) and (max-height: 768px)
{
}
@media screen and (max-width: 1280px) and (max-height: 720px)
{
}
@media screen and (max-width: 1024px) and (max-height: 768px)
{

}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* ==========================================================================================================================
   MOBILE — bloc unique et consolidé pour tous les mobiles (≤768px, ou paysage court).
   Modale plein écran avec 2% de marge ; entête + menu figés, seul le contenu scrolle.
   Le layout PC reste inchangé au-dessus de ce breakpoint.
   ========================================================================================================================== */
@media screen and (max-width: 768px), screen and (max-height: 450px) and (max-width: 950px)
{
    /* zoom image : pas d'effet d'agrandissement sur mobile */
    #drop-area-freezed,
    #drop-area2-freezed,
    .profil-wrapper.zoomed #drop-area-freezed,
    .profil-wrapper.zoomed #drop-area2-freezed{
    animation: none !important;}

    /* ---- Conteneur plein écran, marge 2% ------------------------------------------------------------------------------ */
    #profil-show{
    padding: 2%;
    box-sizing: border-box;
    align-items: stretch;
    justify-content: stretch;}

    .profil-wrapper{
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;}

    #ic-add,
    #ic-back{
    display: none;}

    /* ---- Structure verticale : entête + menu figés, contenu scrollable ------------------------------------------------ */
    #act-status,
    #profil-entete,
    #profil-menu,
    .profil-menu{
    flex: 0 0 auto;}

    #englobe{
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;}

    /* garde-fou : aucun enfant ne dépasse la largeur du wrapper */
    #englobe *{
    max-width: 100%;
    box-sizing: border-box;}

    /* ---- ENTÊTE ------------------------------------------------------------------------------------------------------- */
    .profil-entete,
    #profil-entete{
    position: relative;
    height: 150px;
    min-height: 150px;}

    /* av/ap recalés sur la barre menu mobile (entête 150px + demi-barre 22px) */
    #av,
    #ap{
    top: calc(150px + 22px);}

    /* bordereau visible : +16px comme en desktop */
    #act-status:has(#status.show) ~ #av,
    #act-status:has(#status.show) ~ #ap{
    top: calc(150px + 22px + 16px);}

    /* avatar / image réelle : taille et marges maîtrisées */
    #drop-area,
    #drop-area2{
    width: 120px;
    height: 120px;
    margin-top: 14px;
    margin-bottom: 14px;
    margin-left: 12px;}

    /* prénom / drapeau / sexe / rang : centrés dans l'espace à droite de l'avatar */
    #prenom-nom{
    left: 118px;
    right: 0;
    width: auto;
    margin-left: 0;
    text-align: center;
    top: 55%;
    transform: translateY(-50%);}

    /* flèche de bascule avatar <-> réel */
    #arrow1,
    #arrow1-freezed{
    margin-bottom: 0;}

    /* menu onglets */
    #profil-menu,
    .profil-menu{
    margin-top: 0;}

    /* ---- CONTENU : blocs pleine largeur -------------------------------------------------------------------------------- */
    #first, #liens, #notes-wrap{
    width: auto;
    max-width: 100%;/*
    margin-left: 8px;
    margin-right: 8px;*/
    box-sizing: border-box;}

    /* lignes icône + champs : la zone champs prend tout l'espace restant */
    .first-fields{
    min-width: 0;}

    .first-fields > input,
    .first-fields > #achats{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;}

    /* liste des titres : elle occupe toute la largeur de l'ecran moins deux petites marges */
    #titresql{
    left: 65px;
    right: 30px;
    transform: none;
    width: auto;
    max-width: none;}

    .opt,
    .opt:hover,
    .titres{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;}

    /* bio : occupe l'espace flex restant, s'arrête au-dessus des flèches */
    #bio-content, #bio-content.bottom-content{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;}

    #bio-content #notes-wrap{
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;}

    #englobe #notes,
    #notes{
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding-bottom: 26px;} /* place le texte au-dessus du chevron */

    /* chevron bio collé dans le coin bas-droite de notes-wrap */
    #bio-expand{
    bottom: 8px;
    right: 14px;}

    /* statut collé au wrapper suit la largeur */
    #status{
    width: 100%;}

    /* ---- LIENS ------------------------------------------------------------------------------------------------------------
       Sur grand écran la liste des liens est posée en absolu par-dessus les deux champs d'édition,
       sur une seule ligne. Faute de largeur, elle débordait du cadre sur mobile. Ici on la remet
       dans le flux : elle occupe la place restante entre l'icône et le « + », garde ses liens sur
       une seule ligne et defile horizontalement toute seule. Les champs d'édition, qu'elle
       recouvrait, sont masqués tant qu'elle est affichée — ils réapparaissent dès qu'on modifie
       un lien. */
    #liens{
    flex-wrap: nowrap;
    padding-right: 4px;}

    #links-editable{
    position: static;
    transform: none;
    flex: 1 1 0;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-left: 6px;
    padding-bottom: 0;}

    #links-editable::-webkit-scrollbar{
    display: none;}

    .links-editable{
    flex: 0 0 auto;
    white-space: nowrap;}

    #plus{
    flex: 0 0 auto;}

    #liens:has(#links-editable:not(.hidden)) .profil-links-textarea,
    #liens:has(#links-editable:not(.hidden)) .profil-links-textarea-name{
    display: none;}
}
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* TACTILE — pas de hover persistant après tap (av/ap gardaient l'apparence survolée) */
@media (hover: none)
{
    #av:hover,
    #ap:hover{
    opacity: 0.4;}

    #av:hover #avant,
    #ap:hover #apres{
    opacity: 1;
    filter: none;}

    #arrow1:hover,
    #arrow1-freezed:hover{
    opacity: 0.5;
    filter: brightness(0) saturate(100%) invert(0%) sepia(6%) saturate(186%) hue-rotate(316deg)
    brightness(93%) contrast(79%);}
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* MOBILE — ECLAIRCISSEMENT GENERAL DE LA MODALE (cran 2)
   Meme palette et memes ecarts entre les plans qu'en grand ecran : chaque fond est simplement
   decale vers le clair (#323232 -> #5a5a5a, #292929 -> #494949, #202020 -> #484848),
   et chaque texte remonte de +70 points, de sorte que le contraste augmente au lieu de rester
   constant. Aucune regle de disposition, de taille ou de position n'est touchee.
   Le voile de fond reste sombre : c'est lui qui detache la modale de la page. */
@media screen and (max-width: 768px), screen and (max-height: 450px) and (max-width: 950px)
{
    /* ---- CADRE ---- */
    .profil-wrapper{background-color: #5a5a5a;}

    /* ---- ENTETE ---- */
    .profil-entete,
    #profil-entete{background: linear-gradient(to bottom, #3084d380, #053d5e75);}

    #drop-area,
    #drop-area2,
    #drop-area-freezed,
    #drop-area2-freezed{/*background-color: #494949;*/}

    #prenom-nom,
    #prenom-nom div{color: #ffffff;}
    #span-prenom-nom{caret-color: #ffffff;}

    #status{color: #ffffff;}
    .status-selected{background-color: #6aa6c4fd;}

    /* ---- ONGLETS ---- */
    .profil-menu,
    #profil-menu{background: linear-gradient(#5e5e5e, rgba(76, 76, 76, 0.6));}

    #resume,
    #biog,
    #evaluations,
    #resume-create{
    color: #dfdfdf;
    border-top-color: rgba(80, 80, 80, 0.7);
    border-bottom-color: #505050;}

    .profil-selected,
    #resume:hover,
    #biog:hover,
    #evaluations:hover{
    background: linear-gradient(to bottom, #3084d366, #053d5e66);
    color: #ffffff;}

    /* ---- BLOCS DE CONTENU ---- */
    #first,
    #liens,
    #bio,
    #divlinks,
    #links-editable,
    .pro,
    #eval-placeholder,
    .bottom-btn,
    #create-profil,
    #notes,
    #notes-create{background-color: #494949;}

    .profil-textarea,
    .profil-links-textarea,
    .profil-links-textarea-name,
    #achats,
    #diminutif,
    #entrer-sexe{background-color: #494949; color: #dfdfdf;}

    /* ---- TEXTES ---- */
    #notes,
    #notes-create{color: #cbcbcb;}
    #eval-placeholder{color: #cbcbcb;}
    #bio-title-span{color: #ffffff;}
    .line-text,
    .bottom-btn{color: #dfdfdf;}
    .line-clickable:hover .line-text,
    .bottom-btn:hover{color: #ffffff;}
    .unclient{color: #dfdfdf;}
    .unclient:hover{color: #ffffff;}

    /* ---- ICONES ---- */
    .ic-svg,
    #lk.ic-svg,
    .bottom-btn-arrow{color: #e0e0e0;}
    .first-nav{color: #d5d5d5;}
    .first-nav:hover{color: #ffffff;}

    /* ---- LIENS ---- */
    #liens a{color: #dfdfdf;}

    /* ---- PASTILLES ---- */
    #dots,
    #dots-contact,
    #plus{background-color: #484848; color: #ffffff;}

    #dots:hover,
    #dots-contact:hover,
    #plus:hover{background-color: #737373;}

    /* ---- LISTES DEROULANTES ---- */
    #titresql{background-color: #494949; border-color: rgba(255, 255, 255, 0.45);}

    #pro-show,
    #contact-show{background-color: #4a4a4a; border-color: rgba(255, 255, 255, 0.45);}

    .opt{color: #ededed;}
    .opt:hover{background-color: #91919193;}
    .titres{background-color: #5a6975;}

    /* ---- MENU REGLAGES ---- */
    #content-settings{background-color: #494949;}

    #settings-line1,
    #settings-line2,
    #settings-line3,
    #settings-line4,
    #settings-line2-expanded,
    #settings-line3-expanded{color: #ffffff;}

    #date-supp,
    #date-block{background-color: #3b3b3b71; color: #ffffff;}

    #create-profil:hover{background-color: #4cb1ff85;}

    /* ---- OPACITES : reperes plus visibles au doigt ---- */
    #av,
    #ap,
    #notes-eraser,
    #notes-reset{opacity: 0.4;}
}

/*****************************************************************************************************************************/
/* LIGHTBOX MOBILE : image du profil en gros plan *****************************************************************************/
#mobile-lightbox{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.94);
z-index: 10000;
overscroll-behavior: contain;
-webkit-tap-highlight-color: transparent;
animation: fade_lightbox 0.18s ease forwards;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#mobile-lightbox.hidden{
display: none;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#mobile-lightbox-img{
max-width: 96vw;
max-height: 88vh;
max-height: 88dvh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 0 24px rgba(0, 0, 0, 0.8);}
/*---------------------------------------------------------------------------------------------------------------------------*/
#mobile-lightbox-close{
position: absolute;
top: 14px;
right: 16px;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #ffffff;
background-color: rgba(255, 255, 255, 0.14);
border-radius: 50%;
cursor: pointer;
user-select: none;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#mobile-lightbox-nav{
position: absolute;
left: 0;
right: 0;
bottom: 22px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
box-sizing: border-box;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#mobile-lightbox-nav.hidden{
display: none;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.mobile-lightbox-arrow{
width: 44px;
height: 44px;
line-height: 44px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: #ffffff;
background-color: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 50%;
cursor: pointer;
user-select: none;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.mobile-lightbox-arrow:active{
background-color: rgba(255, 255, 255, 0.32);}
/*---------------------------------------------------------------------------------------------------------------------------*/
@keyframes fade_lightbox{
from{opacity: 0;}
to{opacity: 1;}}
/*****************************************************************************************************************************/