/* ==========================================================
   BOUTONS
========================================================== */

.bouton-primaire,
.bouton-secondaire{
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:10px 16px!important;
  font-weight:700!important;
  font-size:.92em!important;
  letter-spacing:.2px!important;
  text-align:center!important;
  border:1px solid transparent!important;
  cursor:pointer!important;
  user-select:none!important;
  text-decoration:none!important;
  position:relative!important;
  border-top-left-radius:10px!important;
  border-top-right-radius:2px!important;
  border-bottom-left-radius:2px!important;
  border-bottom-right-radius:10px!important;
  box-shadow:0 6px 14px rgba(0,0,0,.12)!important;
  transition:background-color .18s ease-in-out,color .18s ease-in-out,border-color .18s ease-in-out,box-shadow .18s ease-in-out,transform .08s ease-in-out!important;
}

.bouton-primaire{
  background:#8B1446!important;
  color:#FFF!important;
  border-color:#8B1446!important;
}

.bouton-primaire:hover{
  background:#CBA135!important;
  color:#1A1A1A!important;
  border-color:#CBA135!important;
}

.bouton-secondaire{
  background:#1A1A1A!important;
  color:#FFF!important;
  border-color:#1A1A1A!important;
}

.bouton-secondaire:hover{
  background:#CBA135!important;
  color:#1A1A1A!important;
  border-color:#CBA135!important;
}

.bouton-primaire:active,
.bouton-secondaire:active{
  transform:translateY(1px);
}

.bouton-suppression{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  font-weight:700;
  font-size:.92em;
  letter-spacing:.2px;
  text-align:center;
  border:1px solid #1A1A1A;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
  position:relative;
  background:#1A1A1A;
  color:#FFF;
  border-top-left-radius:10px;
  border-top-right-radius:2px;
  border-bottom-left-radius:2px;
  border-bottom-right-radius:10px;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  transition:background-color .18s ease-in-out,color .18s ease-in-out,border-color .18s ease-in-out,box-shadow .18s ease-in-out,transform .08s ease-in-out;
}

.bouton-suppression:hover{
  background:#8B1446;
  color:#FFF;
  border-color:#8B1446;
  box-shadow:0 4px 12px rgba(139,20,70,.28);
}

.bouton-suppression:active{
  transform:translateY(1px);
}

.bouton-suppression[data-confirm="1"]{
  background:#A52A5A;
  border-color:#A52A5A;
}

.bouton-tertiaire{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  font-weight:700;
  font-size:.92em;
  letter-spacing:.2px;
  text-align:center;
  border:1px solid #8B1446;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
  position:relative;
  border-top-left-radius:10px;
  border-top-right-radius:2px;
  border-bottom-left-radius:2px;
  border-bottom-right-radius:10px;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  background:#8B1446;
  color:#FFF;
  transition:background-color .18s ease-in-out,color .18s ease-in-out,border-color .18s ease-in-out,box-shadow .18s ease-in-out,transform .08s ease-in-out;
}

.bouton-tertiaire:hover{
  background:#1A1A1A;
  color:#FFF;
  border-color:#1A1A1A;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}

.bouton-tertiaire:active{
  transform:translateY(1px);
}

.bouton-primaire[disabled],
.bouton-secondaire[disabled],
.bouton-tertiaire[disabled],
.bouton-suppression[disabled],
.bouton-primaire:disabled,
.bouton-secondaire:disabled,
.bouton-tertiaire:disabled,
.bouton-suppression:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}


/* ==========================================================
   TYPOGRAPHIE
========================================================== */

.titre-section{
  font-size:20px;
  font-weight:700;
  color:#8B1446;
  margin:0 0 12px;
  letter-spacing:.4px;
}

.texte-pseudo{
  display:inline-block;
  margin:0 0 2px;
  font-weight:700;
  font-size:14px;
  color:#8B1446!important;
  line-height:1.2;
  text-decoration:none!important;
}

.texte-pseudo a,
a.texte-pseudo{
  color:inherit;
  text-decoration:none!important;
  font-weight:inherit;
}

.texte-pseudo:hover,
.texte-pseudo:focus,
.texte-pseudo:active,
.texte-pseudo:visited,
a.texte-pseudo:hover,
a.texte-pseudo:focus,
a.texte-pseudo:active,
a.texte-pseudo:visited{
  color:#8B1446!important;
  text-decoration:none!important;
}

.texte-libre-one{
  margin:0 0 14px;
  font-size:1em;
  line-height:1.6;
  color:#1A1A1A;
  font-weight:400;
}

.texte-information{
  margin:8px 0;
  font-size:.95em;
  line-height:1.45;
  color:#1A1A1A;
  font-weight:400;
}

.texte-aide-rappel{
  margin-top:8px;
  font-size:.8em;
  color:#8B1446;
  font-style:italic;
  line-height:1.3;
  text-align:left;
}

.texte-meta-date{
  font-size:.85em;
  color:#AAA;
  font-style:italic;
}

.trait-separateur{
  border:0;
  border-top:1px solid #DDD;
  margin:10px auto 15px;
  width:80%;
}


/* ==========================================================
   MESSAGES
========================================================== */

.etat-vide{
  margin:10px auto;
  padding:14px;
  background:#FFF;
  border:1px dashed #CCC;
  border-radius:8px;
  color:#888;
  text-align:center;
  font-size:14px;
  font-style:italic;
}

.message-succes,
.message-erreur,
.message-restriction{
  display:block;
  width:100%;
  max-width:750px;
  margin:10px auto 14px;
  padding:12px 14px;
  border-radius:8px;
  font-size:.95em;
  font-weight:700;
  line-height:1.45;
  box-sizing:border-box;
  box-shadow:none;
}

.message-succes{
  background:#F6FBF7;
  border:1px solid rgba(46,125,50,.28);
  border-left:5px solid #2E7D32;
  color:#2E7D32;
}

.message-erreur{
  background:#FFF6F6;
  border:1px solid rgba(139,20,70,.24);
  border-left:5px solid #8B1446;
  color:#8B1446;
}

.message-restriction{
  background:#FFF8FB;
  border:1px solid rgba(165,42,90,.24);
  border-left:5px solid #A52A5A;
  color:#8B1446;
}


/* ==========================================================
   CHAMPS TEXTE
========================================================== */

.libelle-champ{
  font-weight:700;
  color:#1A1A1A;
  white-space:nowrap;
  min-width:120px;
}

.champ-modifiable{
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:40px;
  padding:9px 10px;
  border:1px solid #DDD;
  border-radius:6px;
  background:#F0F0F0;
  color:#1A1A1A;
  font-size:.95em;
  line-height:1.2;
  box-sizing:border-box;
}

.to-readonly{
  width:100%;
  max-width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:8px;
  align-items:center;
  background:#FFF;
  border:1px solid #DDD;
  border-radius:6px;
  padding:9px 10px;
  font-size:.95em;
  color:#1A1A1A;
  line-height:1.2;
  min-height:40px;
  cursor:default;
}

.to-readonly .to-value,
.to-value{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#1A1A1A;
}

.tag-non-modif{
  margin:0;
  font-style:italic;
  color:#AAA;
  font-size:.85em;
  white-space:nowrap;
}


/* ==========================================================
   CARTES / CONTENEURS
========================================================== */

/* Largeur standard page utilisateur */
.wrapper-page{
  width:100%;
  max-width:750px;
  margin:10px auto 30px;
  padding-left:0;
  padding-right:0;
  box-sizing:border-box;
}

/* Largeur page utilisateur large : recherche profils */
.wrapper-page-large{
  width:100%;
  max-width:1000px;
  margin:10px auto 30px;
  padding-left:0;
  padding-right:0;
  box-sizing:border-box;
}

.bg-one-carte{
  background:#FFF;
  padding:20px 18px;
  margin:0 0 30px;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
  border-left:5px solid #A52A5A;
  box-sizing:border-box;
}

.wrapper-page.bg-one-carte,
.wrapper-page-large.bg-one-carte{
  margin:10px auto 30px;
}

.profil-ligne .info-compact .texte-pseudo{
  display:block;
  margin:0 0 2px;
}

.profil-ligne .info-compact .texte-information{
  margin:0;
  font-size:12px;
  color:#1A1A1A;
  line-height:1.3;
}

.profil-ligne .info-compact .texte-meta-date{
  display:block;
  margin:2px 0 0;
  font-size:12px;
  color:#888;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ==========================================================
   MÉDIAS / PHOTOS
========================================================== */

.photo-profil-mon-profil{
  width:130px;
  aspect-ratio:3/4;
  border-radius:12px;
  border:2px solid #CBA135;
  box-shadow:0 0 4px rgba(203,161,53,.3);
  object-fit:cover;
  background:#EEE;
  display:block;
}

.photo-profil-detail{
  display:block;
  width:100%;
  max-width:260px;
  height:auto;
  max-height:420px;
  border-radius:10px;
  object-fit:contain;
  object-position:center center;
  border:2px solid #CBA135;
  transition:transform .2s ease-in-out;
  background:#EEE;
}

.photo-profil-detail:hover{
  transform:scale(1.05);
}

.photo-carte-profil{
  width:180px;
  height:260px;
  border-radius:10px;
  object-fit:cover;
  border:2px solid #CBA135;
  transition:transform .2s ease-in-out;
  background:#EEE;
  display:block;
}

.photo-carte-profil:hover{
  transform:scale(1.07);
}

.photo-miniature-one{
  width:60px;
  height:60px;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:10px;
  border:2px solid #CBA135;
  background:#F0F0F0;
  flex-shrink:0;
  display:block;
  transition:transform .2s ease-in-out;
}

.photo-miniature-one:hover{
  transform:scale(1.07);
}

.image-message{
  max-width:140px;
  max-height:200px;
  width:auto;
  height:auto;
  object-fit:cover;
  border-radius:12px;
  display:block;
  cursor:pointer;
  background:#EEE;
}


/* ==========================================================
   LIGHTBOX / PREVIEW
========================================================== */

.lightbox-media{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.82);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;
  backdrop-filter:blur(5px);
}

.lightbox-media.is-visible{
  display:flex;
}

.lightbox-media-content{
  position:relative;
  max-width:90vw;
  max-height:90vh;
  text-align:center;
}

.lightbox-media-image{
  max-width:80vw;
  max-height:80vh;
  border-radius:10px;
  box-shadow:0 0 20px rgba(203,161,53,.6);
  display:block;
  margin-bottom:15px;
}

.lightbox-media-close{
  position:absolute;
  top:-10px;
  right:-10px;
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#A52A5A;
  color:#FFF;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.4);
  transition:transform .15s ease,background-color .25s ease,color .25s ease;
  z-index:2;
}

.lightbox-media-close:hover{
  background:#CBA135;
  color:#FFF;
  transform:scale(1.08);
}

/* ==========================================================
   BOUTONS ICONES / SVG
========================================================== */

.bouton-icone{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  min-width:34px;
  min-height:34px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  text-decoration:none;
  line-height:1;
  appearance:none;
  -webkit-appearance:none;
  transition:opacity .18s ease-in-out,transform .08s ease-in-out;
}

.bouton-icone::before{
  content:"";
  display:block;
  width:22px;
  height:22px;
  flex:0 0 auto;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

.bouton-icone:hover{
  opacity:.85;
}

.bouton-icone:active{
  transform:translateY(1px);
}

.bouton-icone-supprimer::before{
  background-image:url("../../plugins/travestione-profils/assets/iconesvg/bouton-icone-supprimer.svg");
}

.bouton-icone[disabled],
.bouton-icone:disabled,
.bouton-icone[aria-busy="true"]{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
}

.bouton-icone-message{
  width:38px;
  height:30px;
  min-width:38px;
  min-height:30px;
}

.bouton-icone-message::before{
  width:34px;
  height:24px;
  background-image:url("../../plugins/travestione-profils/assets/iconesvg/bouton-icone-message.svg");
}