@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');

/* CSS file for the back office */
/* General styles */
:root {
  /* Colors */
  --primary-color: #005bb5;
  --dark-blue-color: #1e3a8a;
  --background-color: #fcfcfc;
  --menu-background-color: #f5f6fa;
  --very-light-grey-color : #d0d0d0;
  --light-grey-color: #637381;
  --dark-grey-color: #424656;
  --white-color: #ffffff;
  --red-color: #ff0101;
  --black-color: #000000;
  --green-color: #03ad23;

  /* Font sizes */
  --page-title-size: 1.688rem;
  --title-size: 1.375rem;
  --subtitle-size: 1.5rem;
  --very-small-text-size: 0.75rem;

  --text-size: 1rem;
  --larger-text-size: 1.25rem;
  --very-small-text-size: 0.75rem;

  /* Fonts */
  --raleway: 'Raleway', sans-serif;
  --noto: 'Noto Sans', sans-serif;

  /* Menu size */
  --menu-width: 16.875rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html {
  display: flex;
  justify-content: center;
}

body {
  background-color: var(--background-color);
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--menu-width);
  height: 100vh;
  padding: 1.875rem 0rem 0rem 1.875rem;
  box-sizing: border-box; /* This adds the padding to the width */
  background-color: var(--menu-background-color);
  border-right: 1px solid var(--light-grey-color);
}

main {
  flex: 1;
  flex-direction: column;
  margin-left: var(--menu-width);
  width: calc(100vw - 21.875rem);
  height: 100vh;
  min-width: 1170px;
  max-width: 1430px;
}

h1 {
  font-family: var(--raleway);
  font-weight: bold;
  font-size: var(--page-title-size);
  color: var(--dark-grey-color);
}

h2 {
  font-family: var(--raleway);
  font-weight: bold;
  font-size: var(--title-size);
  color: var(--light-grey-color);
}

h3 {
  font-family: var(--raleway);
  font-weight: bold;
  font-size: var(--subtitle-size);
  color: var(--black-color);

  /* For the horizontal line */
  margin-bottom: 0.3em;
}

.form-container {
  margin-top: 0.938rem !important;
}
.flex-row { display: flex; flex-direction: row !important;}
.flex-col { display: flex; flex-direction: column; }
.align-start { align-items: flex-start; }
.align-end { align-items: end; }
.text-center {text-align: center;}
.gap-vsm { gap: 0.3rem; }
.gap-sm { gap: 0.625rem; }
.gap-md { gap: 0.938rem; }
.gap-lg { gap: 1.563rem; }
.full-width { width: 100%; }
.full-height { height: 100%; }
.no-pad-top { padding-top: 0 !important; }
.no-pad-side { padding-left: 0 !important; padding-right: 0 !important; }
.margin-left-md { margin-left:15px ;}
.fit-content { width: fit-content; }

.hidden {
  display: none !important;
}

select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.h3-section {
  display: inline-block;
}

.h3-section hr {
  width: 25rem;
  margin: 0.2em 0 1em 0;
  border: 1px solid #000000;
}

p {
  font-family: var(--noto);
  font-weight: normal;
  font-size: var(--text-size);
  color: var(--black-color);
}

.logInLines {
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: 0.5rem;
}

.barCompte {
  width: 35%;
}

.connection {
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: 0.9rem;
  margin: 1.875rem 0 0 1.875rem;
}

.logMember {
  width: 100%;
}

.buttonSubmit {
  margin-right: 1.875rem;
}

.error {
  color: var(--red-color);
}

p.placeholder {
  font-family: var(--noto);
  font-size: var(--text-size);
  font-weight: normal;
  color: var(--light-grey-color);
}

/* Menu */
#menuContent {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 3.125rem;
  height: 100%;
}

#menuTextContainer {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 1.875rem;
  height: 100%;
}

#sidebar-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  height: 100%;
  justify-content: space-between;
  padding-bottom: 1.875rem;
}

#sidebar-menu div {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}

#sidebar-menu li a {
  text-decoration: none;
  font-family: var(--raleway);
  font-weight: bold;
  font-size: var(--title-size);
  color: var(--light-grey-color);
}

#sidebar-menu li {
  position: relative;
  padding-left: 2rem;
}

#sidebar-menu li::before {
  content: '';
  display: inline-block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.563rem;
  height: 1.563rem;
  background-size: contain;
  background-repeat: no-repeat;
}

#menu-home::before {
  background-image: url('../assets/icons/home_grey.svg');
}

#menu-logout::before {
  background-image: url('../assets/icons/logout_grey.svg');
}

#menu-info::before {
  background-image: url('../assets/icons/account_grey.svg');
}
#menu-offers::before {
  background-image: url('../assets/icons/offer_grey.svg');
}
#menu-avis::before {
  background-image: url('../assets/icons/avis_grey.svg');
}
#menu-factures::before {
  background-image: url('../assets/icons/facture_grey.svg');
}
#menu-return::before {
  background-image: url('../assets/icons/return_front_grey.svg');
}
/* head_title */
.headContainer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.25rem 0rem 1.25rem 1.25rem;
  margin: 1.875rem 1.875rem 0rem 1.875rem;

  box-sizing: border-box;
  background: #ffffff;

  /* M3/Elevation Light/3 */
  box-shadow:
    0px 4px 8px 3px rgba(0, 0, 0, 0.15),
    0px 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}

.headContent {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
}

.boxIcon {
  width: 3.875rem;
  height: 3.875rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  background: #005bb5;
  box-shadow:
    0px 4px 8px 3px rgba(0, 0, 0, 0.15),
    0px 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}

.icon {
  width: 1.875rem;
  height: 1.875rem;
}

.flexColumn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* FORMULAIRE */
/* Global container */
.formContainer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0rem 1.875rem;
  padding-bottom: 1.875rem;
}

/* Section container */
.formSectionContainer {
  display: flex;
  flex-direction: column;
  margin: 1.25rem;
  gap: 1.25rem;
}

/* Form line when two inputs are on the same line */
.formInline {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem 3.125rem;
}

.formGrid label{
  display: inline-block;
  width: 6.9375rem;
}

.formGrid input{
  width: 5rem;
}

.formGrid .debutHoraire{
  width: 4.3125rem;
}

.formGrid .finHoraire{
  width: 2.406rem;
}

.formGrid label{
  display: inline-block;
  width: 6.9375rem;
}

.formGrid input{
  width: 5rem;
}

.formGrid .debutHoraire{
  width: 4.3125rem;
}

.formGrid .finHoraire{
  width: 2.406rem;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}

label {
  font-family: var(--noto);
  font-weight: normal;
  font-size: var(--larger-text-size);
  color: var(--black-color);
}

input, textarea, select{
  width: 18.75rem;
  padding: 0.5em;
  border-radius: 6px;
  border: 1px solid var(--light-grey-color);
  resize: none;
}

select {
  font-family: var(--noto);
  font-size: var(--text-size);
  background: var(--white-color);
  color: var(--black-color);
}

input::placeholder, textarea::placeholder, textarea::content {
  font-family: var(--noto);
  font-size: var(--text-size);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.error-message {
  color: red;
  font-family: var(--noto);
  font-size: var(--text-size);
  font-weight: normal;
}

/* Black button */
.button-black {
  width: 8.125rem;
  height: 2.75rem;
  font-size: var(--text-size);
  background: var(--black-color);
  color: var(--white-color);
  border: none;
  border-radius: 0.625rem;
  font-family: var(--noto);
  font-size: var(--text-size);
  cursor: pointer;

  /* M3/Elevation Light/3 */
  box-shadow:
    0px 4px 8px 3px rgba(0, 0, 0, 0.15),
    0px 1px 3px rgba(0, 0, 0, 0.3);
}

.button-black:hover {
  background-color: var(--background-color);
  color: var(--black-color);
  border: 0.125rem var(--black-color) solid; 
}

.button-black:active{
  background-color: var(--dark-grey-color);
  color: var(--black-color);
}

.button-blue {
  background: var(--primary-color);
  color: var(--white-color);
  border: none;
  border-radius: 0.625rem;
  font-family: var(--noto);
  font-size: var(--text-size);
  cursor: pointer;

  /* M3/Elevation Light/3 */
  box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15),
    0px 1px 3px rgba(0, 0, 0, 0.3);
}

.button-blue {
  background: var(--primary-color);
  color: var(--white-color);
  padding: 0.625rem 0.938rem;
  border: none;
  border-radius: 0.625rem;
  font-family: var(--noto);
  font-size: var(--larger-text-size);
  font-weight: normal;
  cursor: pointer;
  transition: background 0.2s;

  /* M3/Elevation Light/3 */
  box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15),
    0px 1px 3px rgba(0, 0, 0, 0.3);
}

.button-blue:hover {
  background: #227dd7;
}

.buttonContainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

#nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

#headContainer_little {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;

  box-sizing: border-box;
  background: #ffffff;

  /* M3/Elevation Light/3 */
  box-shadow:
    0 4px 8px 3px rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}

#headContent_little {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}

#little_subtittle {
  font-family: var(--noto);
  font-size: var(--subtitle-size);
}

#headContent_little div h3 {
  font-family: var(--raleway);
  font-weight: bold;
  font-size: var(--title-size);
  color: var(--dark-grey-color);
}

/*ACCUEIL PRO*/

#title_searchbar_btn{
  display: flex;
  flex-direction: column;
  gap: 0.938rem;
  width: 100%;
}

#searchbar_all_btn {
  display: flex;
  justify-content: space-between;
}

#searchbar_white_btn {
  display: flex;
  gap: 1.875rem;
}

#input_search {
  background-image: url('/assets/icons/search_primary.svg');
  background-repeat: no-repeat;
  background-position: 2% center;
  background-size: 10%;
  width: 25rem;
  height: 2.75rem;
  padding-left: 4rem;
  border: 3px solid var(--black-color);
  border-radius: 0.625rem;
}

#input_search:focus {
  outline: none;
  border-color: var(--primary-color);
}

#input_search::placeholder {
  font-family: var(--raleway);
  font-size: var(--larger-text-size);
  color: var(--light-grey-color);
  font-weight: bold;
}

#all_offer {
  font-size: var(--subtitle-size);
}

#btn_filtrer,
#btn_trier,
#btn_voir_plus {
  width: 8.125rem;
  height: 2.75rem;
  background-color: var(--background-color);
  font-size: var(--text-size);
  border: 3px solid var(--black-color);
  border-radius: 0.625rem;
  color: var(--black-color);
}

#btn_ajouter,
#btn_connexion,
#btn_inscription,
.btn-modif-pro {
  width: 8.125rem;
  height: 2.75rem;
  background-color: var(--primary-color);
  font-size: var(--text-size);
  color: var(--background-color);
  border-radius: 0.625rem;
  border: none;
}

#btn-submit:disabled{
  background-color: rgb(0, 91, 181, 50%);
  cursor: not-allowed;
}

#btn-submit:disabled:hover{
  background-color: rgb(0, 91, 181, 50%);
  border: none;
  color: var(--background-color);
}

#btn-submit:disabled{
  background-color: rgb(0, 91, 181, 50%);
  cursor: not-allowed;
}

#btn-submit:disabled:hover{
  background-color: rgb(0, 91, 181, 50%);
  border: none;
  color: var(--background-color);
}

#btn_connexion a,
#btn_inscription a{
  color: var(--background-color);
  text-decoration: none;
}

#btn_filtrer:hover,
#btn_trier:hover,
#btn_voir_plus:hover {
  background-color: var(--black-color);
  color: var(--background-color);
  cursor: pointer;
}

#btn_filtrer:active,
#btn_trier:active,
#btn_voir_plus:active {
  background-color: var(--dark-grey-color);
  color: var(--black-color);
}

#btn_ajouter:hover,
#btn_connexion:hover,
#btn_inscription:hover,
.btn-modif-pro:hover {
  background-color: var(--background-color);
  border: 3px solid var(--primary-color);
  color: var(--primary-color);
  cursor: pointer;
}

#btn_ajouter:active,
#btn_connexion:active,
#btn_inscription:active,
.btn-modif-pro:active {
  background-color: #003e7d;
  color: var(--black-color);
  border-color: #003e7d;
}

#body_acceuil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  padding: 1.875rem;
}

.msg_offer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.875rem;
}

.text_offer {
  font-size: var(--title-size);
  font-family: var(--noto);
  font-weight: bold;
}

#btn_co_inscription {
  display: flex;
  flex-direction: row;
  gap: 1.875rem;
}

#nav_search {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}

#list_offer {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}

.offer-card-img {
  width: 20rem;
  height: 13.75rem;
  object-fit: cover;
  border-radius: 0.625rem;
}

.offer-card,
.offer-card-city,
.offer-card-price,
.offer-card-category-prix-lieu,
.offer-card-note-avis,
.offer-card-note {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.offer-card-price,
.offer-card-note,
.offer-card-city {
  gap: 0.188rem;
}

.offer-card {
  box-shadow:
    0px 4px 8px 3px rgba(0, 0, 0, 0.15),
    0px 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  width: 100%;
  padding: 1.25rem;
  gap: 1.875rem;
}

.offer-card-info-layout {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}

#offer-card-right-layout {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#offer-online-visibility > p {
  width: 8.125rem;
  height: 2.75rem;
  color: var(--background-color);
  background-color: var(--green-color);
  font-size: var(--text-size);
  text-align: center;
  align-content: center;
}

.offer-card-section-two,
.offer-card-section-one {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.offer-card-section-one h3 {
  margin: 0;
}

.offer-card-note-avis a {
  font-family: var(--noto);
  font-weight: normal;
  font-size: var(--text-size);
  color: var(--black-color);
}

/*CONSULTATION INFOS PRO*/

#main-check{
  padding: 1.875rem;
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}

.check-section{
  border-bottom: 0.125rem solid var(--very-light-grey-color);
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.check-section h3{
  margin-bottom: 0;
}

.check-section img{
  width: 10rem;
  height: 10rem;
  border-radius: 0.313rem;
  object-fit: contain;
}

.check-section:last-child {
  border-bottom: none;
}

.check-div{
  display: flex;
  flex-direction: row;
  gap: 1.875rem;
}

.check-section article{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.check-section article p{
  color: var(--background-color);
}

#check-card{
  background-color: var(--primary-color);
  border-radius: 0.938rem;
  padding: 1.5rem;
  width: 18rem;
  height: 10rem;
  display: flex;
  justify-content: space-between;
  background: linear-gradient(135deg, #073f93, #1256bc);
  /*box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);*/
  box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15),
    0px 1px 3px rgba(0, 0, 0, 0.3);
}

#check-num-card{
  font-size: var(--larger-text-size);
}

/* 2FA Component */
.security-status-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.2rem 1.2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.security-header h4 {
    margin: 0 0 1rem 0;
    color: #333;
    font-size: 1.2em;
    font-family: var(--noto);
}

.alert {
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.alert-warning {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
}

.status-enabled, .status-disabled {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.status-text {
    font-weight: bold;
    font-size: 1.1em;
    font-family: var(--noto);
}

.status-enabled .status-text {
    color: #28a745;
}

.status-disabled .status-text {
    color: #ffc107;
}

.status-description {
    color: #666;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.security-actions {
    margin-top: 1rem;
}

.setup-2fa-btn {
    background: #007cba;
    color: white;
    padding: 0.7rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    font-family: var(--noto);
    transition: background-color 0.2s;
}

.setup-2fa-btn:hover {
    background: #005a87;
    text-decoration: none;
    color: white;
}

.disable-2fa-link {
    color: #dc3545;
    text-decoration: none;
    font-size: 0.9em;
    font-family: var(--noto);
}

.disable-2fa-link:hover {
    text-decoration: underline;
}

/* 2FA SETUP */
.twofa-setup {
    max-width: 500px;
    margin: 0 auto;
}

.step-instructions {
    margin-bottom: 2rem;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.step-instructions h4 {
    margin-top: 0;
    color: #333;
}

.qr-code-container {
    text-align: center;
    margin: 1rem 0;
}

.qr-code {
    max-width: 200px;
    height: auto;
}

.manual-entry {
    background: #f5f5f5;
    padding: 1rem;
    border-radius: 4px;
    margin-top: 1rem;
}

.manual-key {
    display: block;
    background: white;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: var(--noto);
    font-size: 1.1em;
    word-break: break-all;
    margin: 0.5rem 0;
}

.copy-btn {
    background: #007cba;
    color: white;
    border: none;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    font-family: var(--noto);
}

.copy-btn:hover {
    background: #005a87;
}

.code-feedback {
    font-size: 0.9em;
    font-family: var(--noto);
    margin-top: 0.5rem;
}

.code-feedback.valid {
    color: green;
}

.code-feedback.invalid {
    color: red;
}

#totp_code {
    text-align: center;
    font-size: 1.2em;
    letter-spacing: 0.2em;
    font-family: var(--noto);
}

/* 2FA Verif */
.twofa-verification {
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
}

.twofa-verification p {
    margin-bottom: 1.5rem;
    font-size: 1.1em;
    font-family: var(--noto);
}

#totp_code {
    text-align: center;
    font-size: 1.5em;
    letter-spacing: 0.3em;
    font-family: var(--noto);
    width: 100%;
    padding: 1rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    margin-bottom: 1rem;
}

#totp_code:focus {
    border-color: #007cba;
    outline: none;
}

.code-feedback {
    font-size: 1em;
    font-family: var(--noto);
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.code-feedback.valid {
    color: green;
    font-weight: bold;
    font-family: var(--noto);
}

.code-feedback.invalid {
    color: red;
}

.login-help {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
    font-size: 0.9em;
    font-family: var(--noto);
    color: #666;
}

.login-help a {
    color: #007cba;
    text-decoration: none;
}

.login-help a:hover {
    text-decoration: underline;
}

/* 2FA disable */
.disable-confirmation {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
    padding: 2rem;
}

.disable-confirmation h3 {
    color: #dc3545;
    margin-bottom: 1.5rem;
}

.warning-details {
    background: #fff3cd;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1.5rem 0;
    border-left: 4px solid #ffc107;
}

.warning-details p {
    margin-bottom: 1rem;
    line-height: 1.6;
    text-align: left;
}

.warning-details p:last-child {
    margin-bottom: 0;
}

.confirmation-actions {
    margin: 2rem 0;
}

.button-group {
    margin-bottom: 1rem;
}

.buttonContainer.danger button {
    background-color: #dc3545;
}

.buttonContainer.danger button:hover {
    background-color: #c82333;
}

.cancel-action {
    margin-top: 1rem;
}

.cancel-link {
    color: #007cba;
    text-decoration: none;
    font-weight: bold;
    font-family: var(--noto);
}

.cancel-link:hover {
    text-decoration: underline;
}

.security-reminder {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
    text-align: left;
}

.security-reminder h4 {
    margin-bottom: 1rem;
    color: #333;
}

.security-reminder ul {
    list-style-type: disc;
    padding-left: 1.5rem;
}

.security-reminder li {
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

input.not-active{
  color: var(--light-grey-color);
}

.hidden, .hidden-pp, .hidden-credit-card{
  display: none !important;
}

.erreur{
  color: var(--red-color);
  font-size: var(--text-size);
  font-family: var(--noto);
  width: 18.75rem;
}

#div-btn-modif{
  display: flex;
  gap: 1rem;
  justify-content: end;
}
.bigField  { /* On an input that take almost all the width like images or big input */
  height: 12.125rem;
  width: 95%;
}

#resume{
  width: 95%;
}

.midField {
  height: 4.9375rem;
  width: 60%;
}

.checkbox-group {
  gap: 0.3rem;
  margin-bottom: 1rem;
}

.select-container {
  margin-top: 1rem;
}

.select-container label {
  font-weight: bold;
  margin-bottom: 0.4rem;
  display: block;
  color: #2c3e50;
}

.select-container select {
  width: 100%;
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  background-color: #f8f9fa;
  color: #2c3e50;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #ecf0f1;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.checkbox-item:hover {
  background-color: #d0d7de;
}

.checkbox-item input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: #3498db;
}

.slot {
  margin-bottom: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.slot input {
  margin-right: 5px;
}

.slot button {
  height: 1.25rem;
  width: 1.25rem;
}


.slot button img {
  margin: auto;
}
.dayLabel {
  cursor: pointer;
  float:right;
  user-select: none;
}

.dayLabel > input {
  width: 14px;
  cursor: pointer;
}

.horaire-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.horaire {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.horaire-container > div > button {
  padding: 5px;
  margin-bottom:5px;
}

.tooltip-trigger {
  position: relative;
  cursor: help;
  vertical-align: bottom;
  color: #555;
}

.tooltip-trigger img {
  width: 24px;
  height: 24px;
  vertical-align: bottom;
  cursor: pointer;
}

.tooltip-text {
  visibility: hidden;
  opacity: 0;
  width: 250px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 4px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 20px;
  transition: opacity 0.3s;
  font-size: 13px;
}

.tooltip-trigger:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

input.bigField[type="file"]{
    display: block;
    padding: 12px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
}

input.bigField[type="file"]:hover {
    background-color: #eef1f5;
    border-color: #888;
}

input.bigField[type="file"]:focus {
    outline: none;
    border-color: #3f51b5;
    background-color: #fff;
}

.custum-file-upload {
  height: 200px;
  width: 400px;
  display: flex;
  flex-direction: column;
  align-items: space-between;
  gap: 20px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border: 2px dashed #cacaca;
  background-color: rgba(255, 255, 255, 1);
  padding: 3.125rem 1.5rem 1.5rem 1.5rem;
  border-radius: 10px;
  box-shadow: 0px 48px 35px -48px rgba(0,0,0,0.1);
}

.custum-file-upload .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.custum-file-upload .icon .svg {
  height: 80px;
  fill: rgba(75, 85, 99, 1);
}

.custum-file-upload .text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.custum-file-upload .text span {
  font-weight: 400;
  color: rgba(75, 85, 99, 1);
}

.custum-file-upload input {
  display: none;
}

input[type=file] {
  cursor: pointer;
}

.btn-creation {
  background-color: var(--primary-color);
  border: none;
  border-radius: 10px;
  color: white;
  cursor: pointer;
}

.btn-creation:hover {
  background-color: var(--dark-blue-color);
}

.btn_close {
  background-color: #fcfcfc;
  border: 0px;
  cursor: pointer;
}

.btn_close:hover {
  transform: scale(1.1);
}

.toggle-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-family: sans-serif;
  max-width: 200px;
}

.toggle-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
}

.toggle-label input[type="checkbox"] {
  display: none;
}

.toggle-switch {
  position: relative;
  width: 50px;
  height: 26px;
  background-color: #ccc;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.toggle-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

input[type="checkbox"]:checked + .toggle-switch {
  background-color: var(--dark-blue-color);;
}

input[type="checkbox"]:checked + .toggle-switch::after {
  transform: translateX(24px);
}

input::placeholder, textarea::placeholder {
  font-family: var(--noto);
  font-size: var(--very-small-text-size);
}

textarea {
  font-size: var(--very-small-text-size);
}

.containerBtnTagGuide {
  display: flex;
  gap: 10px;
}

.BtnConsultation {
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 4px;
  border: none;
  background: var(--primary-color);
  cursor: pointer;
  color: var(--white-color);
}

.BtnConsultationSupprimer {
  padding: 6px 8px;
  font-size: 10px;
  border-radius: 4px;
  border: none;
  background: var(--primary-color);
  color: var(--white-color);
  cursor: pointer;
}

.containerTags {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.image-preview-item {
  margin-top: 10px;
}
.imagePreview {
  max-width: 200px;
  display: block;
  margin-bottom: 5px;
}

/* Masquer l'input natif */
#url_img_offre {
    display: none;
}

/* Bouton personnalisé */
.btn-file {
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    background-color: var(--primary-color); /* bleu */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    user-select: none;
}

/* Apparence désactivée */
#url_img_offre:disabled + .btn-file,
.btn-file:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    pointer-events: none;
}

/* Hover */
.btn-file:hover {
    background-color: #0056b3;
}
.updateContainer {
  display: flex;
  justify-content: end;
}
.updateBtn {
  width: fit-content;
}

#offer-online-visibility{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}