/* CSS Woof v6 TOUT */

@font-face {
    font-family: 'Rubik';
    src: url('/includes_v6/fonts/rubik/Rubik-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik';
    src: url('/includes_v6/fonts/rubik/Rubik-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik';
    src: url('/includes_v6/fonts/rubik/Rubik-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik';
    src: url('/includes_v6/fonts/rubik/Rubik-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}




 /* /////////  */
/* CSS GENERAL */



	
/* Champs required souligné en violet */
input:required, select:required, textarea:required {
  border-bottom: 2px solid #D2B9EB;
  
}

/* Bouton bootstrap */
  .btn-primary {
    --bs-btn-bg: #D2B9EB!important; 
    --bs-btn-border-color: #ccadec;
    --bs-btn-hover-bg: #ccadec;
    --bs-btn-hover-border-color: #ccadec;

  }

html
{
   font-size: 17px; /*VOIR AUSSI script dans MENU HEADER pour les pages en iframe !!*/
}
 body {
  /*background-color: #F0F4F9; /* #E1E9F1; */
  background: #F0F4F9;
  /*background: linear-gradient(150deg, #F0F4F9 0%, #ffffff 50%, #F0F4F9 100%);*/
  color: #4a5e89 !important;
  font-family: 'Rubik', system-ui, sans-serif;

  padding-top: 4.71rem;
  padding-left: 4.71rem;
  padding-right: 1.76rem
}








@media (max-width: 767px) {
  /* on retire les marges du body sur mobile */
  body {
    padding-bottom: 80px; 
    padding-left:0px;
    padding-right:0px;


  }
}
  
/* Taille diverse pour mobile et tablette  */
@media (max-width: 1450px) {
html
{    
  font-size: 15px; /* taille de base pour petit ecran !! VOIR AUSSI script dans MENU HEADER pour les pages en iframe !! */

}


}

@media (max-width: 1380px) {
html
{
  font-size: 13px;
}
}
/* FIN Taille diverse pour mobile */



h1 { font-size: 2rem; }    /* 32px */
h2 { font-size: 1.75rem; } /* 28px */
h3 { font-size: 1.5rem; }  /* 24px */
h4 { font-size: 1.25rem; } /* 20px */
h5 { font-size: 1.1rem; }  /* 17-18px */
h6 { font-size: 1rem; }    /* 16px */


#heure_locale
{
  font-size: 1.25rem;
}


    .avatar-circle {
      width: 100px;
      height: 100px;
      line-height: 100px;
      border-radius: 50%;
      display: inline-block;
      text-align: center;
      font-size: 42px;
      font-weight: 600;
    }

    .avatar-img {
      width: 100px;
      height: 100px;
      object-fit: cover;
      display: inline-block;
      border-radius: 50%;
    }

    .avatar-img-mini {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        object-fit: cover;
    }
    .avatar-circle-mini {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        font-size: 24px;
    }

    /* Mode lecture seule : pas de bordure, pas de grisage des champs */
    .lecture-seul-mode .form-control,
    .lecture-seul-mode .form-select,
    .lecture-seul-mode textarea.form-control {
        border: 1px solid #dee2e6 !important;

        background-color: transparent !important;
        opacity: 1 !important;
    }

    .lecture-seul-mode .form-control:focus,
    .lecture-seul-mode .form-select:focus,
    .lecture-seul-mode textarea.form-control:focus {
        outline: none;
        box-shadow: none;
    }

    .clickable { cursor: pointer; }

.rond_blanc_icone
{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:rgba(255,255,255,0.7);
}
.cadre_blanc {
  background-color:#fff;
  padding:20px 30px;
  border-radius:  15px;
  border:1px solid #EAEAEA; /*#1px solid #F1F4F9;*/
}

.cadre_bordure_grise {
  border:1px solid #ced4da; 
  border-radius:8px; 
  padding:0.85rem;
}

.aide_texte{
font-size:11px;
text-transform:uppercase;
}

h1,h2,h3,h4 {
  color: #4a5e89; /*#4a5e89!important;*/
  /*font-weight:bold;*/
}

a{
  color: #00264C!important;
  text-decoration: none;
}

.titre_responsive {
  font-size: 22px;
  color: #647bad!important; /* #4a5e89!important;*/
  font-weight: bold;
}
@media (max-width: 1300px) {
  .titre_responsive { font-size: 22px; }
}


.texte_bleu
  {
    color: #647bad!important;
  }

.texte_bleu_fonce
{
  color:#4a5e89!important;
}

  .texte_rose
  {
    color: #FEA7B5!important;
  }

  .texte_violet
  {
    color: #D2B9EB!important;
  }

  .texte_orange
 {
    color: tomato!important;
  }

ul { padding-left:20px; }


.fond_bleu
  {
    background-color : #F0F4F9!important;
  }

  .fond_bleu2
  {
    background-color :  #647bad!important;
  }

.fond_blanc
  {
    background-color : white!important;
  }

.fond_violet
  {
    background-color : #D2B9EB!important;
  }

.bg-violet-woof
  {
    background-color : #6f42c1!important;
  }

  .fond_rose
  {
    background-color : #FEA7B5!important;
  }

    /* Bandeau fermeture */
    .closed-banner{
      background:#fff1f2;
      border:1px solid #fecdd3;
      color:#9f1239;
      padding:.6rem .8rem;
      border-radius:8px;
      font-weight:600;
      display:flex;
      align-items:center;
      gap:.5rem;
    }
.bouton_gris {
  text-align: center;
  padding:20px;
  background-color: #647bad; /*#333;*/
  color:white;
  cursor: pointer;
  border:0;
}

.bouton_gris2 {
  text-align: center;
  padding:10px;
  background-color: #647bad; /*#333;*/
  color:white;
  cursor: pointer;
  border:0;
  border-radius: 5px;
  font-size: 17px;
}


.bouton_violet
{
  text-align: center;
  padding:10px;
  background-color: #D2B9EB;
  color:white;
  cursor: pointer;
  border:0;
  border-radius: 5px;
  font-size: 17px;

}

.bouton_violet2
{
  text-align: center;
  padding:20px;
  background-color: #D2B9EB;
  color:white;
  cursor: pointer;
  border:0;

}

.bouton_gris_light {
  text-align: center;
  padding:20px;
  background-color: #eeeeee; /*#333;*/
  color:#333;
  cursor: pointer;
  border:0;
}


.bouton_gris_light2 {
  text-align: center;
  padding:10px;
  background-color: #eeeeee; /*#333;*/
  color:#333;
  cursor: pointer;
  border:0;
  border-radius: 5px;
  font-size: 17px;
}

/* Bulle qte notification  */
.fa-layers-counter {
  transform: scale(0.8) translate(50%, -50%);
  font-size: 12px;
  min-width: 20px;    /* largeur minimale */
  height: 20px;
  line-height: 20px;  /* bien centré */
  padding: 0 5px;     /* espace intérieur pour 2 chiffres */
  border-radius: 50%; /* garde la forme arrondie */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notifIcon.notif-alert,
.notifIcon.notif-alert + svg,
.fa-layers.notif-alert,
.fa-layers.notif-alert svg {
  color: tomato !important;
}

.notifCounter.notif-visible {
  display: inline-flex !important;
}

@keyframes woofNotifShake {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-14deg); }
  30% { transform: rotate(12deg); }
  45% { transform: rotate(-10deg); }
  60% { transform: rotate(8deg); }
  75% { transform: rotate(-4deg); }
}

.notifIcon.notif-shake,
.notifIcon.notif-shake + svg,
.fa-layers.notif-shake,
.fa-layers.notif-shake svg {
  display: inline-block;
  transform-origin: top center;
  animation: woofNotifShake 0.9s ease-in-out infinite;
}


/* Griser une ligne d'un tableau */
.rdv-faded { opacity: .45; transition: opacity .25s ease; }



/* Modal */
.modal-body {
  max-height: 580px; /* Hauteur fixe pour scroll */
  overflow-y: auto;
}

/* Modal d'aide sur mobile*/
@media (max-width: 768px) {
  .modal_aide .modal-body {
    max-height: none !important;
  }
}


.cursor-pointer {
  cursor: pointer;
}


/* Accordion */
.accordion-button:focus {
  box-shadow: none !important;
  outline: none !important;
}

.accordion-button:not(.collapsed) {
  background-color: transparent !important;
  box-shadow: none !important;
}


/* Taille de la liste de recherche client autocomplete*/

.ui-menu-item-wrapper {
    font-size: 1rem !important;
    line-height: 1.6rem !important;
    /*border-bottom : 1px solid #c7dbf4;*/
}
    .ui-autocomplete {
      max-height: 260px;
      overflow-y: auto;
      overflow-x: hidden;
      z-index: 1050 !important;
    }

    /* Légende agenda (petit carre) */
    .legend .dot{width:12px;height:12px;border-radius:3px;display:inline-block;margin-right:6px;border:1px solid #7ba2c1;}

/* ///////////////////  */
/*    Tabs         */
/* ///////////////////  */
/*     Tabs       */
.nav-tabs .nav-link.active{
  color: #FEA7B5;                 /* texte orange */
  background-color: transparent;  /* pas de fond blanc */
  border-color: transparent transparent #FEA7B5; /* uniquement la bordure bottom en orange */
    font-weight: 600;
}
.nav-tabs .nav-link:not(.active){
  color: #647bad;
}

/* ///////////////////  */
/*    Tableaux         */
/* ///////////////////  */
/*     Tableaux        */
   
    .box{background:#D7E0E5}

    /*th,td{border:1px solid #ddd;padding:8px;vertical-align:middle;}
    th{background:#f7f7f7;}*/
    .right{text-align:right;}
    .muted{color:#777;}
    .pill-ref{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; padding:.2rem .45rem; border-radius:.5rem; background:#f1f3f5; border:1px solid #e2e6ea;}
    .actions-cell{white-space:nowrap; width:50px}

/* ///////////////////////////////////////////////////////*/
/* Tableau ajustement bordure et autre */
.table thead th  {
  background-color: #F0F4F9 !important;
  color: #647bad !important;
  padding: 15px;
  font-weight:300;
}

.table td { padding:15px; }

/* Coins arrondis top du thead (titre)  */
.fix-bordered thead th:first-child {
  border-top-left-radius: .5rem;
}
.fix-bordered thead th:last-child {
  border-top-right-radius: .5rem;
}
/* Enlève les bordures exterieure du thead (titre) */
.fix-bordered thead tr { border-top: none !important; }
.fix-bordered thead tr > *:first-child { border-left: none; }
.fix-bordered thead tr > *:last-child  { border-right: none; }

/* On retire la premiere et la derniere bordure des lignes */
.fix-bordered tr > *:first-child { border-left: none; }
.fix-bordered tr > *:last-child  { border-right: none; }

/* ///////////////////////////////////////////////////////*/

/* ///////////////////  */
/*    Cadres alertes         */
/* ///////////////////  */
/*    Cadres alertes       */

.alert-success
{
  background-color: #d0ffb3 !important;
  border: #abd194 1px solid !important;
}


/* ///////////////////  */
/*    Menu left         */
/* ///////////////////  */
/*    Menu left         */

/* Supprime la flèche des boutons qui ont la classe .no-arrow */
.accordion-button.no-arrow::after {
  display: none !important;
  content: none;
}

/* Supprimer le fond et la bordure des items */
.accordion-item {
  background-color: transparent !important;
  border: none !important;
}
.accordion-button
{
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  font-size: 1.12rem;
  color: #4a5e89;
}

.menu_left {
  position: fixed;
  top: 4.71rem;
  left: 0;
  bottom: 0;
  width: var(--woof-side-w);
  background: #fff;
  
  z-index: 1020;
  display: flex;
  flex-direction: column;

  /*padding:0 20px 0 14px;*/
  z-index: 2;

}

/* Lien dans menu */
.menu_left .nav-link:hover {
  color: #FEA7B5!important;
}

.menu_top a:hover {
  color: #FEA7B5!important;
}

/* ///////////////////  */
/* SLIDE PAGE IFRAME    */
/* ///////////////////  */
/* SLIDE PAGE IFRAME    */
  
    /* Slide droit avec arrondi */
    .offcanvas-custom-right { 
      height: 100vh;
      border-radius: 20px 0 0 20px; /* arrondi côté gauche */
      overflow: hidden;
    }

    /* iframe plein pot */
    #offcanvasRightDynamic .offcanvas-body { padding: 0; }
    #offcanvasRightDynamic .offcanvas-body iframe {
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
    }

    /* Croix en haut à gauche */
    #offcanvasRightDynamic .btn-close {
      position: absolute;
      top: 30px;
      left: 30px;
      z-index: 5;
    }


/* ///////////////////  */
/* CRENEAUX RESERVABLES */
/* ///////////////////  */
/* CRENEAUX RESERVABLES */

/* Texte des semaines */
.texte_semaine
  {
    font-size: 25px;
  }

  @media (max-width: 750px) {
    .texte_semaine
  {
    font-size: 20px;
    text-align: left;
  }
  }

/* Toggle ON/OFF */
.toggle-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.toggle-switch {
  width: 40px;
  height: 20px;
  background-color: #ccc;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
}
.toggle-switch::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: white;
  border-radius: 50%;
  top: 1px;
  left: 2px;
  transition: 0.3s;
}
.toggle-switch.active {
  background-color: #0d6efd;
}
.toggle-switch.active::before {
  left: 20px;
}

/* Calendrier */
.calendar {
  display: grid;
  grid-template-columns: 80px repeat(7, 1fr);
  gap: 5px;
   overflow-x: scroll;
}
.calendar-header {
  font-weight: bold;
  text-align: center;
  border-bottom: 2px solid #ddd;
}
.calendar-hour {
  text-align: center;
  background: #f8f9fa;
  /*border: 1px solid #ddd;*/
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.calendar-slot {
  height: 80px;
  min-width:100px;
  /*border: 1px solid #ddd;*/
  background: #f8f9fa;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  white-space: pre-wrap;
  overflow: hidden;
}
/* Les 3 classes de style selon "type" (couleur des cadres) */
.calendar-slot.defaut {
  background: #b3d7ff;
  color: #4a5e89;
}
.calendar-slot.exception {
  background: #ffb366;
  color: #4a5e89;
}
.calendar-slot.bloque {
  background: #555;
  color: #fff;
}

/* Zone d'info du créneau */
#slotInfo {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ddd;
  background: #fff;
  font-family: monospace;
  white-space: pre-wrap;
}
/* Petit aperçu couleur */
#colorPreview {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: middle;
  border: 1px solid #333;
}
/* Cadre choix couleur dans modal calendrier */
.slot-type-option {
  padding: 15px;
  font-size: 15px;
  border: 2px solid #ccc;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  flex: 1;
  background-color: #f8f9fa;
  transition: all 0.2s;
}
.slot-type-option:hover {
  background-color: #e1e9f1;
}
.slot-type-option.selected {
  border-color: #647bad;
  background-color: #e3f4f9;
  font-weight: bold;
}
.slot-type-fixed {
  padding: 15px;
  border: 2px solid #ccc;
  border-radius: 8px;
  text-align: center;
  background-color: #f8f9fa;
  font-weight: bold;
  display: none; /* Caché par défaut */
}

.color-option {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.2s ease, border 0.2s ease;
}
.color-option:hover {
  transform: scale(1.1);
}
.color-option.selected {
  border: 2px solid black;
}
/* FIN CRENEAUX RESERVABLES///////////////////  */


  /* CSS PAIEMENT MODAL ENCAISSEMENT ///////////////////  */  
    #choose-invoice-step { margin-bottom: 0px; }
    #choose-invoice-step button { margin-right: 10px; }
    #cheque-number-field { margin-top: 10px; }

    /*on masque les elements à l'ouverture du modal */
    #payment-section,
    #invoice-section,
    #confirmation-msg,
    #square-admin-link,
    #display-invoice-button,
    #display-ticket-button,
    #close-modal {
      margin-top: 15px;
      display: none;
    }
  .bootstrap-select .dropdown-toggle {
  background-color: #fff !important;
  color: #000; /* optionnel pour assurer contraste */
}

/* on force la couleur du texte par defaut des element card bootsrtrap */
/* Forcer l’héritage si des règles directes te mettent au pit */
.card,
.card-body,
.modal-content {
  color: inherit !important;
}
/* FIN CSS PAIEMENT MODAL ENCAISSEMENT ///////////////////  */  *



/* ///////////////////////////////////  */
/* Pages chargéesdans iframe slide */
/* ///////////////////////////////////  */
/* Pages chargées dans iframe slide */

    /* Espace sous le formulaire pour éviter que le bouton fixe recouvre les champs */
    .has-fixed-footer { padding-bottom: 96px; }
    .fixed-submit-bar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        background: #fff;
        border-top: 1px solid rgba(0,0,0,.1);
        padding: 12px 16px;
        z-index: 1050;
        box-shadow: 0 -4px 16px rgba(0,0,0,.06);
    }

/* FIX floating labels align left/height in presence of custom CSS */



/* Placement et padding du label flottant */
.form-floating > label {
  left: 6px;                 /* évite un décalage horizontal fantôme */
    font-size:13px;
    color:grey;
}

.fixed-top-title {
  position: fixed;
  width:100%;
  top: 0;
  left:0;
  z-index: 1049; /* en-dessous de ta barre de boutons fixés (1050) */
  background: #F1F4F9; /* pour masquer ce qui défile derrière */
  padding: 30px 0;

}

.bg-degrade-bleu-blanc {
  background-color: #F0F4F9;
  background-image:
    radial-gradient(circle at 86% 88%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.82) 18%, rgba(255, 255, 255, 0.38) 34%, rgba(255, 255, 255, 0) 54%),
    linear-gradient(145deg, rgba(240, 244, 249, 0.96) 0%, rgba(233, 240, 247, 0.92) 42%, rgba(226, 235, 244, 0.88) 100%);
  box-shadow: 0 28px 70px rgba(168, 183, 198, 0.28);
}

.btn-violet-woof {
  --bs-btn-color: #2f6374;
  --bs-btn-bg: var(--violet_woof);
  --bs-btn-border-color: var(--violet_woof);
  --bs-btn-hover-color: #2f6374;
  --bs-btn-hover-bg: var(--violet_woof);
  --bs-btn-hover-border-color: var(--violet_woof);
  --bs-btn-focus-shadow-rgb: 204, 173, 236;
  --bs-btn-active-color: #2f6374;
  --bs-btn-active-bg: var(--violet_woof);
  --bs-btn-active-border-color: var(--violet_woof);
  --bs-btn-disabled-color: #2f6374;
  --bs-btn-disabled-bg: var(--violet_woof);
  --bs-btn-disabled-border-color: var(--violet_woof);
  font-weight: 500;
}