body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #e6f7f9;
    color: #333;
    margin: 20px;
}

header {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #00bcd4;
    padding: 10px 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

header img {
    height: 50px;
}

header h1 {
    color: white;
    margin: 0;
}

h1.page-title {
    color: #007f9e;
    text-align: center;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 127, 158, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

th, td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #00bcd4;
    color: white;
}

tr:hover {
    background-color: #f1fafa;
}

.button-group {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.button-link,
button.button-link {
    background-color: #00bcd4;
    color: white;
    padding: 10px 18px;
    font-size: 1em;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-block;
    line-height: 1.5;
}

#supprimer-selection {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: inline-block;
    width: auto;
}
#supprimer-selection.visible {
    opacity: 1;
    transform: scale(1);
}


.button-link:hover,
button.button-link:hover {
    background-color: #009bb2;
}

.button-link.button-danger {
    background-color: #e53935 !important;
}

.button-link.button-danger:hover {
    background-color: #c62828 !important;
}

a.button-small {
    background-color: #00bcd4;
    color: white;
    padding: 4px 8px;
    font-size: 0.85em;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

a.button-small:hover {
    background-color: #009bb2;
}

input[type="checkbox"] {
    transform: scale(1.2);
    cursor: pointer;
}

form.inline {
    display: inline;
}

form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

input[type="text"],
input[type="date"],
textarea {
    padding: 8px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
}

textarea {
    resize: vertical;
    min-height: 60px;
}

form.inline {
    display: inline;
    margin: 0;
    padding: 0;
}

form.inline button {
    background-color: #e53935;
    color: white;
    padding: 10px 18px;
    font-size: 1em;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-block;
    line-height: 1.4;
    vertical-align: middle;
    box-sizing: border-box;
}



form.inline button:hover {
    background-color: #c62828;
}

.button-smallish {
    padding: 8px 14px;
    font-size: 0.9em;
    border-radius: 5px;
}


.search-bar {
    display: block;
    margin: 0 auto 20px auto;
    padding: 10px 16px;
    font-size: 1em;
    border-radius: 8px;
    border: 1px solid #ccc;
    width: 300px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s ease;
}

.search-bar:focus {
    outline: none;
    border-color: #00bcd4;
    box-shadow: 0 0 6px rgba(0,188,212,0.5);
}

form label {
    font-weight: 600;
    color: #007f9e;
    margin-bottom: 4px;
}

form input[type="text"],
form input[type="number"],
form input[type="date"],
form select,
form textarea {
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #f9f9f9;
    transition: border-color 0.3s ease;
}

form input:focus,
form select:focus,
form textarea:focus {
    outline: none;
    border-color: #00bcd4;
    background-color: #fff;
}

form textarea {
    resize: vertical;
    min-height: 70px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.parametres-ligne {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.parametres-ligne .form-group {
    flex: 1;
    min-width: 150px;
}

.badge {
    display: inline-block;
    padding: 6px 12px;
    font-size: 0.85em;
    font-weight: bold;
    color: rgb(33, 27, 27);
    border-radius: 12px;
    margin-right: 8px;
}

.badge-thermo {
    background-color: #9229d2;
}

.badge-apl {
    background-color: #e371ff;
}

.button-delete {
    background-color: #f44336; /* rouge doux */
    color: white;
    border: none;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
    transition: background 0.2s ease;
}

.button-delete:hover {
    background-color: #d32f2f;
}

.zone-block {
    border: 1px solid #ccc;
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 8px;
    background-color: #f9f9f9;
}


#zones-container {
    margin-bottom: 30px;
}

#zones-container > button.button-link {
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 8px;
}

tr.clickable-row {
    cursor: pointer;
  }
  tr.clickable-row:hover {
    background-color: #f2f2f2;
  }


select {
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 16px;
    width: 100%;
    max-width: 400px;
    margin-top: 5px;
    margin-bottom: 15px;
}

form.inline button.croix {
    all: unset;
    color: #d11a2a;
    font-size: 14px;
    cursor: pointer;
}

button.croix {
    all: unset;
    font-size: 14px;
    color: #d11a2a;
    cursor: pointer;
    line-height: 1;
    display: inline;
  }

  
.croix {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 1.2em;
    color: red;
    cursor: pointer;
}

.btn-photo {
    background-color: #ffffff;
    color: #007f9e;
    padding: 6px 12px;
    font-size: 0.9em;
    border: 1px solid #007f9e;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-photo:hover {
    background-color: #007f9e;
    color: white;
}

.photo-gallery {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.photo-thumb {
    max-height: 80px;
    border-radius: 6px;
    border: 1px solid #aaa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Lightbox fullscreen */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    flex-direction: column;
  }
  
  .lightbox img {
    max-width: 90%;
    max-height: 80vh;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
  }
  
  .lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
  }
  
  .lightbox-nav {
    margin-top: 20px;
  }
  
  .lightbox-nav button {
    background: white;
    color: #333;
    font-size: 18px;
    padding: 10px 16px;
    margin: 0 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
  
  .lightbox-nav button:hover {
    background: #00bcd4;
    color: white;
  }
  
  /* Curseur pour miniature */
  .photo-thumb {
    cursor: zoom-in;
  }

  @keyframes fadeZoomIn {
    from {
      opacity: 0;
      transform: scale(0.8);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  .lightbox img {
    animation: fadeZoomIn 0.35s ease-out;
    transition: transform 0.3s ease;
  }
  .input-file-custom {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid #007f9e;
    border-radius: 6px;
    background-color: white;
    color: #007f9e;
    font-size: 0.95em;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .input-file-custom:hover {
    background-color: #007f9e;
    color: white;
  }


  .flash-container {
    max-width: 800px;
    margin: 20px auto;
}

.flash-message {
    background-color: #d1f7d6;
    border-left: 6px solid #4caf50;
    color: #2e7d32;
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: 8px;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    animation: fadeInSlide 0.4s ease;
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 768px) {
    table, thead, tbody, th, td, tr {
      display: block;
      width: 100%;
    }
  
    thead {
      display: none;
    }
  
    tr {
      margin-bottom: 20px;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 10px;
      background-color: #fff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
  
    td {
      text-align: left;
      padding: 10px;
      position: relative;
    }
  
    td::before {
      content: attr(data-label);
      font-weight: bold;
      display: block;
      margin-bottom: 6px;
      color: #007f9e;
    }
  }

  .action-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  
  .btn-action {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: #00bcd4;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0;
    text-decoration: none;
  }
  
  .btn-action:hover {
    background-color: #009bb2;
  }
  
  .btn-delete {
    background-color: #e53935;
  }
  
  .btn-delete:hover {
    background-color: #c62828;
  }
  
  .btn-edit {
    background-color: #00bcd4;
  }
  
  .btn-edit:hover {
    background-color: #009bb2;
  }
  
  .btn-action i {
    pointer-events: none;
  }
  

  .action-buttons form {
    display: contents; /* annule tout conteneur visuel */
  }

  .form-button {
    display: flex;
    margin: 0;
    padding: 0;
  }
  
  .form-button button {
    margin: 0;
    padding: 0;
  }
  

  .flash-error {
    background-color: #ffe4e4;
    border-left: 6px solid #e53935;
    color: #c62828;
}


.login-container {
    max-width: 400px;
    margin: 80px auto;
    padding: 30px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 0 12px rgba(0,0,0,0.05);
  }

  .login-container h2 {
    text-align: center;
    color: #00bcd4;
    margin-bottom: 20px;
  }

  .login-container img {
    display: block;
    margin: 0 auto 20px auto;
    height: 80px;
  }

  .login-container input {
    width: 100%;
    padding: 12px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 16px;
  }

  .login-container button {
    width: 100%;
    padding: 12px;
    font-size: 1em;
    border: none;
    background-color: #00bcd4;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
  }

  .login-container button:hover {
    background-color: #009bb2;
  }


  .flash-message {
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: 8px;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    animation: fadeInSlide 0.4s ease;
}

.flash-success {
    background-color: #d1f7d6;
    border-left: 6px solid #4caf50;
    color: #2e7d32;
}

.flash-error {
    background-color: #ffe4e4;
    border-left: 6px solid #e53935;
    color: #c62828;
}

.session-info {
    position: absolute;
    top: 14px;
    right: 20px;
    font-size: 0.9em;
    background-color: rgba(255, 255, 255, 0.15);
    padding: 6px 14px;
    border-radius: 20px;
    color: white;
    font-weight: 500;
    display: flex;
    gap: 10px;
    align-items: center;
    backdrop-filter: blur(6px);
  }
  
  .logout-link {
    background-color: #ffffff;
    color: #00bcd4;
    padding: 4px 10px;
    font-weight: bold;
    font-size: 0.85em;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
  }
  
  .logout-link:hover {
    background-color: #00bcd4;
    color: white;
  }

  .session-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: rgba(255,255,255,0.15);
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 0.85em;
    color: white;
    font-weight: 500;
  }
  
  .logout-link {
    background-color: #ffffff;
    color: #00bcd4;
    padding: 4px 10px;
    font-weight: bold;
    font-size: 0.85em;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
  }
  
  .logout-link:hover {
    background-color: #00bcd4;
    color: white;
  }
  

  .zone-block {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,188,212,0.1);
    line-height: 1.8;
    font-size: 15px;
    color: #333;
    margin-bottom: 30px;
  }
  
  .zone-block h2, .zone-block h3 {
    color: #007f9e;
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: 20px;
  }
  
  .zone-block p {
    margin-bottom: 18px;
  }
  
  .zone-block ul, .zone-block li {
    margin-left: 20px;
    margin-bottom: 10px;
  }
  
  .zone-block ul {
    list-style-type: disc;
  }
  
  .zone-block li::marker {
    color: #00bcd4;
  }
  

.autocomplete-wrap { position: relative; }
.autocomplete-list{
  position:absolute; z-index: 1000; left:0; right:0; top:100%;
  background:#0f172a; color:#fff; border-radius:8px; margin-top:6px;
  box-shadow:0 8px 20px rgba(0,0,0,.2); max-height:240px; overflow:auto;
  padding:6px 0; font-size:14px;
}
.autocomplete-item{
  padding:10px 12px; cursor:pointer; line-height:1.2;
}
.autocomplete-item[aria-selected="true"], .autocomplete-item:hover{
  background:rgba(255,255,255,.08);
}

/* ==== Parrainage (Parrain / Parrainés) ==== */
.referral-block {
  margin: 14px 0 18px;
  padding: 12px 14px;
  background: #f0fbfc;
  border: 1px solid #cbeef3;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.referral-title {
  color: #007f9e;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.referral-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.referral-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  color: #007f9e;
  border: 1px solid #00bcd4;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .05s ease;
}

.referral-chip:hover {
  background: #00bcd4;
  color: #fff;
  border-color: #009bb2;
}

.referral-chip:active {
  transform: translateY(1px);
}

.referral-chip i {
  font-size: 0.95em;
}


/* État consentement */
.button-success {
  background: #e8f5e9;              /* vert très clair */
  color: #2e7d32;                    /* vert foncé lisible */
  border: 1px solid #a5d6a7;
}

.button-success:hover {
  filter: brightness(0.98);
}

.button-warning {
  background: #ffebee;               /* rouge très clair */
  color: #c62828;                    /* rouge lisible */
  border: 1px solid #ef9a9a;
}

.button-warning:hover {
  filter: brightness(0.98);
}

/* Optionnel : même rendu que tes autres boutons */
.button-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: transform .05s ease, box-shadow .1s ease;
}

.button-link:active {
  transform: translateY(1px);
}


/* --- Remarques mises en avant --- */
.remarque {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 8px;
  background: #ffe8e8;          /* rouge clair */
  color: #b00020;                /* rouge foncé (lisible) */
  border: 1px solid #ffb3b3;     /* liseré rouge */
  font-weight: 600;
  white-space: pre-wrap;         /* respecte les retours à la ligne */
}


/* ---- Historique dernières séances : petit carré à droite ---- */
.recent-seances{
  width: 320px;                 /* petit carré/rectangle compact */
  margin: 8px 0 16px auto;      /* ⬅️ pousse à droite */
  padding: 12px 14px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(0,188,212,0.15);   /* rappel de ta couleur thème */
  box-shadow: 0 8px 20px rgba(2,132,199,0.08), 0 2px 6px rgba(0,0,0,0.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.recent-seances:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(2,132,199,0.12), 0 4px 10px rgba(0,0,0,0.06);
}

.recent-seances h3{
  margin: 0 0 8px 0;
  font-size: 0.9em;
  font-weight: 700;
  color: #4b5563;
  display: flex; align-items: center; gap: 8px;
}
.recent-seances h3::before{
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: #00bcd4; opacity: .6;
}

.recent-seances ul{
  list-style: none; margin: 0; padding: 0;
  max-height: 150px; overflow: auto;          /* compacte si 5 lignes */
  -webkit-overflow-scrolling: touch;
}
.recent-seances li{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; padding: 8px 0;
  border-top: 1px solid #f2f6f8;
}
.recent-seances li:first-child{ border-top: none; }

.type-badge{
  display:inline-block; padding: 2px 8px;
  border-radius: 999px; font-size: 0.75em; font-weight: 700;
  white-space: nowrap;
}
.type-badge.thermo{ background:#ffe7e7; color:#b00020; }
.type-badge.apl{    background:#e7f3ff; color:#004a99; }

.rs-client{ color:#334155; text-decoration:none; font-weight:600; }
.rs-client:hover{ text-decoration:underline; }

.rs-meta{ color:#8a97a5; font-size:0.83em; }

/* Remonter le petit carré à droite (desktop only) */
@media (min-width: 1024px){
  .recent-seances{
    margin-top: -48x;   /* ajuste entre -16px et -40px selon ton goût */
    z-index: 2;          /* passe au dessus des éléments voisins si besoin */
  }
}

/* Barre horizontale: bouton à gauche, card "dernières séances" à droite */
.index-toolbar{
  display:flex;
  align-items:center;            /* même niveau vertical */
  justify-content:space-between; /* extrémités */
  gap:16px;
  margin: 6px 0 10px;
}

/* Variante discrète du bouton */
.button-ghost{
  background:#fff;
  color:#00bcd4;
  border:1px solid rgba(0,188,212,0.25);
  box-shadow: 0 2px 8px rgba(0,188,212,0.08);
}
.button-ghost:hover{
  background:#00bcd4;
  color:#fff;
}

/* Recent-seances en mode "petit carré" à droite */
.recent-seances{
  width: 320px;
  margin: 0 0 0 auto;        /* colle à droite dans la toolbar */
  padding: 12px 14px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(0,188,212,0.15);
  box-shadow: 0 8px 20px rgba(2,132,199,0.08), 0 2px 6px rgba(0,0,0,0.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.recent-seances:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(2,132,199,0.12), 0 4px 10px rgba(0,0,0,0.06);
}

/* Responsive: empile proprement sur mobile */
@media (max-width: 900px){
  .index-toolbar{ flex-direction:column; align-items:stretch; }
  .recent-seances{ width:100%; margin:0; }
}


.app-header{
  display:flex; justify-content:space-between; align-items:center;
  /* si tu as déjà un style de header, garde-le; ceci harmonise juste la mise en page */
}
.header-left{ display:flex; align-items:center; gap:12px; }
.brand-link{ display:flex; align-items:center; gap:20px; text-decoration:none; }

/* Bouton hamburger */
.icon-btn{
  background:#00bcd4; color:#fff; border:none; padding:10px 12px;
  border-radius:12px; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.1); font-weight:600
}
.icon-btn:hover{ filter:brightness(.95) }
.icon-round{ width:42px; height:42px; padding:0; border-radius:50%;
  background:transparent; border:2px solid #fff; color:#fff;
  display:inline-flex; align-items:center; justify-content:center }
.icon-round i{ font-size:18px }

/* Overlay + tiroir côté GAUCHE */
.offcanvas-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:980 }
.offcanvas{
  position:fixed; top:0; left:-320px; right:auto;
  width:320px; height:100vh; background:#fff; color:#222;
  box-shadow:6px 0 20px rgba(0,0,0,.15); z-index:990; transition:left .25s ease;
  display:flex; flex-direction:column; border-top-right-radius:12px; border-bottom-right-radius:12px
}
.offcanvas.open{ left:0 }

/* Header du tiroir */
.offcanvas-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; border-bottom:1px solid #eee
}

/* Sections */
.offcanvas-section { padding: 10px 10px 6px; border-bottom: 1px solid #f2f2f2 }
.offcanvas-section:last-child { border-bottom:none }
.offcanvas-title{
  margin: 4px 6px 8px; font-size:.85rem; letter-spacing:.02em;
  text-transform:uppercase; color:#00bcd4; font-weight:800
}

/* Liste items compact */
.offcanvas-list{ list-style:none; margin:0; padding:0 4px 8px }
.offcanvas-list li{ margin:2px 0 }
.offcanvas-list li a{
  display:grid; grid-template-columns:24px 1fr; align-items:center;
  gap:10px; padding:10px 12px; border-radius:10px; text-decoration:none;
  color:#222; font-weight:600; font-size:.95rem
}
.offcanvas-list li a:hover{ background:#e6f7f9 }
.offcanvas-list li a i{ width:20px; text-align:center }
.offcanvas-list li a .menu-desc{
  grid-column:2; font-weight:500; color:#666; font-size:.82rem; margin-top:-2px
}

/* Responsive : un peu plus large sur mobile */
@media (max-width: 768px){
  .offcanvas{ width:85vw; left:-85vw }
}


/* Row compacte et centrée pour recherche + CTA */
.search-row{
  max-width: 760px;
  margin: 16px auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* Harmonise la hauteur avec le bouton */
.search-row .search-bar{
  width: min(520px, 70vw);
  height: 44px;
  margin: 0;            /* on enlève le margin-top/bottom auto */
}

/* Nouveau bouton principal "Ajouter un client" */
.btn-add{
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #00bcd4, #009bb2);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 6px 16px rgba(0,188,212,.25);
  transition: transform .06s ease, box-shadow .2s ease, filter .15s ease;
}

.btn-add:hover{
  box-shadow: 0 10px 22px rgba(0,188,212,.30);
  filter: brightness(.98);
}

.btn-add:active{ transform: translateY(1px); }

/* Icône “pastille” */
.btn-add i{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.20);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}

/* Responsive : empile sur mobile */
@media (max-width: 720px){
  .search-row{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .search-row .search-bar{ width: 100%; }
  .btn-add{ width: 100%; justify-content: center; }
}


/* Accessibilité visuelle cachée */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Barre d'actions sous le header */
.actions-bar{
  max-width: 1200px;
  margin: 12px auto 10px;
  padding: 0 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

/* Champ de recherche avec icône intégrée */
.search-input-wrap{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid #e5e7eb; border-radius:999px;
  padding: 8px 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.search-input-wrap i{ color:#94a3b8; }
.search-input-wrap input{
  border:none; outline:none; font-size:16px; background:transparent;
  width: clamp(260px, 45vw, 560px);
}

/* CTA principal à droite */
.btn-add-primary{
  height:44px; padding:0 18px; border-radius:999px;
  background: linear-gradient(135deg, #00bcd4, #009bb2);
  color:#fff; text-decoration:none; font-weight:700;
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,.35);
  box-shadow: 0 6px 16px rgba(0,188,212,.25);
  transition: transform .06s ease, box-shadow .2s ease, filter .15s ease;
}
.btn-add-primary:hover{ box-shadow:0 10px 22px rgba(0,188,212,.30); filter:brightness(.98); }
.btn-add-primary:active{ transform:translateY(1px); }
.btn-add-primary i{
  width:26px; height:26px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.20);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}

/* FAB mobile (apparait uniquement en petit écran) */
.fab-add{
  position: fixed; right: 22px; bottom: 22px; z-index: 999;
  width: 56px; height: 56px; border-radius: 50%;
  display: none; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #00bcd4, #009bb2);
  color:#fff; text-decoration:none; font-size:20px;
  box-shadow: 0 12px 28px rgba(0,188,212,.28), 0 2px 8px rgba(0,0,0,.12);
  transition: transform .06s ease, box-shadow .2s ease, filter .15s ease;
}
.fab-add:hover{ box-shadow:0 16px 32px rgba(0,188,212,.32), 0 4px 10px rgba(0,0,0,.14); filter:brightness(.98); }
.fab-add:active{ transform: translateY(1px); }

/* Responsive : sur mobile on empile et on affiche le FAB */
@media (max-width: 780px){
  .actions-bar{ padding: 0 4px; }
  .actions-bar{ flex-wrap: wrap; gap: 10px; }
  .search-input-wrap{ width:100%; }
  .btn-add-primary{ display:none; }   /* évite le doublon avec le FAB */
  .fab-add{ display:flex; }
}


/* Empile au centre : champ + CTA avec très peu d’espace */
.search-cta-center{
  max-width: 960px;
  margin: 10px auto 12px;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;                 /* espace réduit entre input et bouton */
}

/* Largeur du champ centrée et confortable */
.search-cta-center .search-input-wrap{
  width: min(820px, 80vw);
  padding: 10px 16px;        /* un poil plus haut que par défaut */
  border-radius: 999px;      /* pastille douce */
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  display:flex; align-items:center; gap:10px;
}
.search-cta-center .search-input-wrap i{ color:#94a3b8; }
.search-cta-center .search-input-wrap input{
  border:none; outline:none; background:transparent;
  font-size:16px; width:100%;
}

/* Bouton centré et compact */
.btn-add-compact{
  height: 44px;
  padding: 0 18px;
  align-self: center;
}

/* (Option) sur mobile : on garde le même empilement */
@media (max-width: 720px){
  .search-cta-center{ max-width: 560px; gap: 10px; }
  .search-cta-center .search-input-wrap{ width: 100%; }
}

/* Si tu avais gardé un FAB mobile, on le masque pour éviter le doublon */
.fab-add{ display: none !important; }

/* Conteneur du bouton placé au-dessus du tableau */
.cta-above-table{
  display: flex;
  justify-content: center;
  margin: 12px 0 0;          /* un peu d'air au-dessus du bouton */
}

.cta-above-table .btn-add-primary{
  height: 44px;
  padding: 0 18px;
}

/* Espace entre le bouton et le tableau */
.cta-above-table + table{
  margin-top: 30px;          /* ← ajuste ici (14–18px selon ton goût) */
}


/* Barre horizontale : recherche gauche + dernières séances droite */
.clients-toolbar{
  max-width: 1200px;
  margin: 10px auto 4px;
  padding: 0 8px;
  display: flex;
  align-items: flex-start;      /* aligne les HAUTS au même niveau */
  justify-content: space-between;
  gap: 16px;
}

.toolbar-left{
  flex: 1;                      /* prend l'espace à gauche */
  display: flex;
  flex-direction: column;
}

/* Largeur du champ à gauche */
.clients-toolbar .search-input-wrap{
  width: clamp(320px, 55vw, 720px);
}

.client-count-badge{
  margin-top:14px;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:#0f172a;
  padding:6px 14px;
  border-radius:999px;
  background:linear-gradient(120deg, rgba(14,165,233,0.18), rgba(45,212,191,0.18));
  border:1px solid rgba(14,165,233,0.35);
  box-shadow:0 6px 16px rgba(14,165,233,0.15);
}

/* petit espace entre la barre et le bouton centré */
.clients-toolbar + .cta-above-table{
  margin-top: 12px;
}

/* Empile proprement sur mobile */
@media (max-width: 900px){
  .clients-toolbar{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .clients-toolbar .search-input-wrap{
    width: 100%;
  }
}

/* ---- Quick Add (codes) ---- */
.zone-quickadd{
  margin: 14px 0 18px;
  padding: 12px 14px;
  border: 1px solid #E6E8EC;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(16,24,40,.04);
}

.qa-label{
  display: block;
  font-weight: 600;
  color: #1d2939;
  margin: 2px 0 10px;
}

.qa-row{
  display: flex;
  align-items: center;
  gap: 12px;                 /* espace input <-> bouton */
}

.qa-input{
  flex: 1;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #e6e8ec;
  border-radius: 10px;
  font-size: 15px;
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
  background: #fafafa;
}

.qa-input:focus{
  outline: none;
  border-color: #00bcd4;     /* ta couleur de marque */
  box-shadow: 0 0 0 4px rgba(0,188,212,.18);
  background: #fff;
}

.qa-btn{
  height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Petit texte d'aide */
.qa-help{
  margin: 10px 0 0;
  font-size: 13px;
  color: #667085;
}

/* Responsive : pile input + bouton sur mobile */
@media (max-width: 640px){
  .qa-row{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .qa-btn{
    width: 100%;
    justify-content: center;
  }
}

/* ===== Bandeau Note (visible, moderne) ===== */
.note-banner{
  /* Couleurs par défaut : turquoise -> bleu (Freed) */
  --from:#06b6d4;           /* cyan */
  --to:#3b82f6;             /* bleu */
  --glow:rgba(59,130,246,.35);

  display:flex; align-items:flex-start; gap:12px;
  padding:16px 18px; margin-bottom:22px;
  background: linear-gradient(135deg, var(--from), var(--to));
  color:#fff;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.28);
  box-shadow: 0 12px 26px var(--glow);
}

.note-banner .note-icon{
  flex:0 0 auto;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: rgba(255,255,255,.16);
  border:2px solid rgba(255,255,255,.38);
  font-size:18px; color:#fff;
}

.note-banner .note-title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  opacity:.95; margin-bottom:2px;
}

.note-banner .note-text{
  font-weight:750;
  line-height:1.35;
}

/* Variante alerte (rouge/orange), très visible mais clean */
.note-banner.danger{
  --from:#ef4444;           /* rouge */
  --to:#f97316;             /* orange */
  --glow:rgba(239,68,68,.35);
}

/* Variante “mint” si tu veux plus doux mais visible */
.note-banner.mint{
  --from:#10b981;           /* vert émeraude */
  --to:#06b6d4;             /* cyan */
  --glow:rgba(16,185,129,.30);
}


.badge-visage{
  background:#e9d5ff; /* lavande douce */
  color:#3b0764;      /* prune foncé */
  border:1px solid #d8b4fe;
}

#visage_fields .field-group{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin: 8px 0 14px;
}

#visage_fields .field-group{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin: 8px 0 14px;
}

/* === Clients table : clean & pro ================================================== */
.table-card{
  max-width: 1200px;
  margin: 10px auto 24px;
  padding: 0 8px;
}

.clients-table{
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 10px;               /* lignes "cartes" séparées */
  background: transparent !important;   /* annule le style table générique */
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* En-tête sticky, subtil, lisible */
.clients-table thead th{
  position: sticky; top: 0; z-index: 5;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(140%) blur(6px);
  color: #0f172a;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: none;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(2,132,199,.15);
}
.clients-table thead tr::after{
  content:"";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: rgba(2,132,199,.10);
}

/* Cartes-lignes */
.clients-table tbody tr{
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(2,132,199,0.08), 0 1px 3px rgba(0,0,0,0.05);
  transition: transform .08s ease, box-shadow .18s ease, background-color .2s ease;
  border-radius: 14px;
}
.clients-table tbody tr:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(2,132,199,0.12), 0 4px 10px rgba(0,0,0,0.06);
  background-color: #fbfeff;
  cursor: pointer;
}

/* Cells */
.clients-table td{
  padding: 14px 16px;
  border: none;
  color: #0f172a;
}
.clients-table .no-result-cell{
  text-align: center; color: #94a3b8; font-style: italic;
  background: #fff; border-radius: 12px; padding: 18px 0;
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
}

/* Colonnes compactes */
.clients-table .th-actions, .clients-table .cell-actions{ width: 1%; white-space: nowrap; }
.clients-table .th-name{ min-width: 240px; }
.clients-table .th-firstname{ min-width: 200px; }

/* Nom avec avatar initiales */
.cell-name{
  display: inline-flex; align-items: center; gap: 10px;
}
.avatar{
  width: 30px; height: 30px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px; letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(135deg, #06b6d4, #0ea5e9);
  box-shadow: 0 2px 8px rgba(14,165,233,.25), inset 0 0 0 2px rgba(255,255,255,.30);
}

/* Bouton "Voir" version chip */
.chip-view{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px; border-radius: 999px;
  text-decoration: none; font-weight: 700; font-size: 0.92rem;
  color: #0369a1; background: #e0f2fe;          /* bleu très clair */
  border: 1px solid #bae6fd;
  transition: transform .06s ease, box-shadow .18s ease, background-color .15s ease;
}
.chip-view i{ font-size: 14px; }
.chip-view:hover{
  background: #dbeafe;
  box-shadow: 0 6px 16px rgba(59,130,246,.16);
}
.chip-view:active{ transform: translateY(1px); }

/* Aligne l'action à droite sans casser le click row */
.clients-table .cell-actions{
  text-align: right;
}

/* Mobile : cartes empilées, en-tête masqué, labels auto */
@media (max-width: 820px){
  .clients-table thead{ display:none; }
  .clients-table, .clients-table tbody, .clients-table tr, .clients-table td{
    display:block; width:100%;
  }
  .clients-table tbody tr{
    border-radius: 14px;
    padding: 10px 12px;
  }
  .clients-table td{
    padding: 10px 0;
  }
  .clients-table td[data-th]::before{
    content: attr(data-th);
    display:block; margin-bottom: 4px;
    font-size: 12px; font-weight: 700; color: #64748b;
    text-transform: none; letter-spacing: .02em;
  }
  .clients-table .cell-actions{ margin-top: 8px; text-align: left; }
}

/* Priorité : neutraliser le style table générique sur CE tableau uniquement */
.clients-table, .clients-table thead, .clients-table tbody, .clients-table tr, .clients-table td, .clients-table th{
  background-clip: padding-box;
}

/* === NAV — capsule glassy & sticky ========================================= */
.app-header{
  position: sticky; top: 12px; z-index: 1000;
  max-width: 1200px;
  margin: 12px auto 18px;
  padding: 12px 16px;
  display:flex; justify-content:space-between; align-items:center;
  border-radius: 18px;

  /* Fond = gradient Freed + glass (fallback + blur si supporté) */
  background: linear-gradient(135deg, rgba(6,182,212,.95), rgba(14,165,233,.95));
  color:#fff;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 14px 34px rgba(2,132,199,.20), 0 1px 3px rgba(0,0,0,.06);
}
@supports (backdrop-filter: blur(8px)) {
  .app-header{
    background: linear-gradient(135deg, rgba(6,182,212,.60), rgba(14,165,233,.60));
    backdrop-filter: blur(8px) saturate(120%);
  }
}

/* Brand */
.brand-link{ display:flex; align-items:center; gap:16px; text-decoration:none; }
.brand-link img{ height:44px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.15)); }
.brand-link h1{
  margin:0; color:#fff; font-weight:800; letter-spacing:.02em;
  font-size: clamp(16px, 1.3vw + 14px, 26px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: min(66vw, 680px);
}

/* Hamburger */
.icon-round{
  width:42px; height:42px; padding:0; border-radius:50%;
  background: rgba(255,255,255,.10);
  border: 2px solid rgba(255,255,255,.55);
  color:#fff; display:inline-flex; align-items:center; justify-content:center;
  transition: background .15s ease, transform .06s ease;
}
.icon-round:hover{ background: rgba(255,255,255,.18); }
.icon-btn:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(255,255,255,.35); }

/* Capsule droite (session) */
.session-header-info{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 8px 12px;
  color:#fff; font-weight:500; gap:10px;
}
.session-header-info strong{ font-weight:800; }

/* Bouton logout harmonisé */
.logout-link{
  background:#ffffff; color:#0284c7;
  border:1px solid rgba(2,132,199,.20);
  padding: 6px 12px; border-radius: 999px; font-weight:800; font-size:.86rem;
}
.logout-link:hover{ background:#0284c7; color:#fff; }

/* Shrink au scroll */
.app-header.is-scrolled{
  padding: 8px 12px;
  border-radius:16px;
  box-shadow: 0 10px 24px rgba(2,132,199,.18);
}

/* Fine bande de séparation haut (option visuelle) */
.nav-backdrop{
  position: fixed; inset: 0 0 auto 0; height: 72px; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,182,212,.06), rgba(6,182,212,0));
  z-index: 500;
}

/* Petits écrans : nav super clean */
@media (max-width: 768px){
  .app-header{ margin: 8px 12px 14px; }
  .brand-link h1{ max-width: 48vw; }
  .session-header-info{ display:none; }
}

/* Overlay et tiroir AU-DESSUS de la nav */
.offcanvas-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.42); z-index: 4000; }
.offcanvas{ position:fixed; top:0; left:-320px; width:320px; height:100vh;
            background:#fff; color:#222; z-index: 4010;
            box-shadow:6px 0 20px rgba(0,0,0,.20); transition:left .25s ease; }
.offcanvas.open{ left:0; }

/* Fluidifie l’overlay + empêche scroll quand menu ouvert */
.offcanvas-overlay[hidden]{ display:none; }
body.menu-open{ overflow:hidden; }

/* Option : dim la nav derrière le menu (plus clean) */
body.menu-open .app-header{
  filter: brightness(.94) saturate(.95);
  box-shadow: 0 10px 24px rgba(2,132,199,.16);
}

/* === Search bar — capsule glassy + counter + clear ======================= */
.search-input-wrap{
  position: relative;
  display:flex; align-items:center; gap:12px;
  min-height: 54px;
  padding: 12px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.78));
  border: 1px solid rgba(2,132,199,.18);
  box-shadow: 0 10px 24px rgba(2,132,199,.08), 0 1px 3px rgba(0,0,0,.04);
  transition: box-shadow .2s ease, border-color .2s ease, transform .06s ease, background .2s ease;
}
.search-input-wrap:hover{
  box-shadow: 0 14px 30px rgba(2,132,199,.12), 0 2px 6px rgba(0,0,0,.06);
}
.search-input-wrap:focus-within{
  border-color: #38bdf8;
  box-shadow: 0 12px 32px rgba(2,132,199,.14), 0 0 0 6px rgba(56,189,248,.15);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.86));
  transform: translateY(-1px);
}

.search-input-wrap i{ color:#94a3b8; font-size:18px; }
.search-input-wrap:focus-within i{ color:#06b6d4; }

.search-input-wrap input{
  border:none; outline:none; background:transparent; width:100%;
  font-size:16.5px; line-height:1.2; color:#0f172a; caret-color:#06b6d4;
}
.search-input-wrap input::placeholder{ color:#99a4b2; opacity:.95; }

/* Bouton Effacer (X) */
.search-clear{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:999px;
  display:none; align-items:center; justify-content:center;
  background:#fff; border:1px solid #e2e8f0; color:#64748b; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.06); transition:.15s ease;
}
.search-clear:hover{ background:#f1f5f9; color:#0ea5e9; border-color:#bae6fd; }
.search-input-wrap[data-hasquery="true"] .search-clear{ display:flex; }

/* Pastille compteur */
.search-input-wrap::after{
  content: attr(data-count);
  position:absolute; right:50px; top:50%; transform:translateY(-50%);
  min-width:26px; height:26px; padding:0 8px; line-height:26px;
  border-radius:999px; font-weight:800; font-size:12px;
  background:#e0f2fe; color:#0369a1; border:1px solid #bae6fd;
  display:none; align-items:center; justify-content:center;
}
.search-input-wrap[data-hasquery="true"]::after{ display:flex; }

@media (max-width: 560px){
  .search-input-wrap{ min-height: 50px; padding: 10px 14px; }
  .search-input-wrap::after{ right:46px; }
}

/* Descend seulement le champ de recherche */
.clients-toolbar .toolbar-left .search-input-wrap{
  margin-top:60px;               /* ajuste: 6–12px */
}

/* ====== Add Client — conteneur & grille ====== */
.container-narrow{
  max-width: 920px;
  margin: 14px auto 40px;
  padding: 0 12px;
}

/* Carte formulaire : on réutilise déjà le style de form{} existant,
   on ajoute juste une classe sémantique si besoin */
.form-card{}

/* Sections titrées clean */
.form-section{
  border: none;
  padding: 0;
  margin: 0 0 18px;
}
.fieldset-title{
  font-weight: 800;
  color: #007f9e;
  margin: 0 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}

/* Grille fluide 2 colonnes */
.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 780px){
  .form-grid{ grid-template-columns: 1fr; }
}

/* Petits détails UX */
.hint{
  display: inline-block;
  margin-left: 10px;
  font-size: 0.90em;
  color: #667085;
}
.checkbox-inline input[type="checkbox"]{ transform: scale(1.2); }

/* Aligne mieux les légendes & inputs successifs */
.form-section .form-group label{ margin-bottom: 4px; }

/* ===== Add Client — champs empilés ===== */
.form-stacked .form-grid{
  grid-template-columns: 1fr !important;  /* 1 colonne */
  gap: 14px;
}
.form-stacked .form-group{
  margin-bottom: 6px;                     /* léger espacement sous chaque champ */
}
.form-stacked textarea{
  min-height: 96px;
}
/* Un peu plus d'air entre sections */
.form-section{ margin-bottom: 22px; }


/* ========= NEO SKIN — ultra clean & smooth ========= */
:root{
  --neo-grad: linear-gradient(135deg,#22d3ee 0%, #60a5fa 100%);
  --neo-glass: rgba(255,255,255,0.72);
  --neo-glow: 0 10px 30px rgba(2,132,199,.10);
  --neo-ink: #0f172a;        /* texte foncé chic */
  --neo-muted: #64748b;      /* texte secondaire */
  --neo-line: #e6eef5;       /* lignes fines */
  --neo-brand: #0ea5e9;      /* focus ring */
}

/* Fond doux et cohérent */
.theme-neo{
  background:
    radial-gradient(1200px 300px at 50% -80px, rgba(34,211,238,.25), transparent 60%),
    linear-gradient(#ebfbff, #e6fffb 280px, #f8fafc);
  color: var(--neo-ink);
}

/* Cartes/formulaires plus “verre” */
.form-card.neo{
  background: var(--neo-glass);
  backdrop-filter: saturate(1.12) blur(8px);
  -webkit-backdrop-filter: saturate(1.12) blur(8px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 20px;
  box-shadow: var(--neo-glow);
  padding: 22px 20px;
  position: relative;
}

/* Fine barre dégradée en haut de la carte */
.form-card.neo::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:4px; border-radius:20px 20px 0 0;
  background: var(--neo-grad);
  opacity:.9;
}

/* Sections & titres compacts et élégants */
.form-section{ margin: 24px 0; }
.fieldset-title{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.2px; font-size:1rem;
  color:#0b718b;
}
.fieldset-title i{ opacity:.85; }

/* Empilement (déjà activé par .form-stacked) mais plus spacieux */
.form-stacked .form-grid{ grid-template-columns: 1fr !important; gap: 16px; }
.form-stacked .form-group{ margin-bottom: 2px; }

/* Inputs modernisés */
.form-card.neo input[type="text"],
.form-card.neo input[type="date"],
.form-card.neo input[type="email"],
.form-card.neo input[type="number"],
.form-card.neo select,
.form-card.neo textarea{
  background: #f6f9fc;
  border: 1px solid var(--neo-line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.2;
  color: var(--neo-ink);
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease, transform .05s ease;
  outline: none;
}
.form-card.neo textarea{ min-height: 110px; }

/* Focus ring chic */
.form-card.neo input:focus,
.form-card.neo select:focus,
.form-card.neo textarea:focus{
  border-color: transparent;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--neo-brand) 35%, transparent),
              0 1px 0 rgba(2,132,199,.05) inset;
  background:#fff;
}

/* Labels & petites aides */
.form-card.neo label{
  color:#0f4c5a;
  font-weight:700;
  margin-bottom:6px;
}
.hint{ color: var(--neo-muted); }

/* Bannière info plus premium */
.note-banner.mint{
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(16,185,129,.18), rgba(16,185,129,.10));
  border: 1px solid rgba(16,185,129,.25);
  box-shadow: 0 5px 18px rgba(16,185,129,.08);
}

/* Bouton principal dégradé */
.button-link.btn-gradient{
  background: var(--neo-grad);
  color:#fff !important;
  border: 0;
  border-radius: 12px;
  padding: 11px 16px;
  font-weight: 800;
  letter-spacing:.2px;
  box-shadow: 0 12px 30px rgba(34,211,238,.18);
  display:inline-flex; align-items:center; gap:10px;
  transform: translateZ(0);
}
.button-link.btn-gradient:hover{ filter: saturate(1.05) brightness(1.02); transform: translateY(-1px); }
.button-link.btn-gradient i{ opacity:.95; }

/* Bouton secondaire minimal */
.button-link.btn-ghost{
  border-radius:12px;
  border:1px solid var(--neo-line);
  background:#fff;
  color:#0b3a4a;
}
.button-link.btn-ghost:hover{
  background:#f8fafc;
}

/* Flash plus clean */
.flash-message{
  border-radius:12px;
  border:1px solid var(--neo-line);
  background:#ffffffcc;
  backdrop-filter: blur(6px);
}

/* Offcanvas cohérent (si présent sur la page) */
.offcanvas{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-left: 1px solid rgba(255,255,255,.75);
}
.offcanvas .offcanvas-title{ color:#0b4a5b; }
.offcanvas a:hover{ background: #f3f9ff; }

/* Micro-animations (respecte prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference){
  .button-link.btn-gradient, .form-card.neo{ transition: transform .15s ease, box-shadow .2s ease; }
  .form-card.neo:hover{ box-shadow: 0 16px 44px rgba(2,132,199,.12); }
}

/* ============== SOFT-UI PILL THEME (ultra épuré & arrondi) ============== */
:root{
  --brand: #06b6d4;              /* cyan */
  --brand-2: #60a5fa;            /* bleu */
  --ink: #0f172a;                /* texte principal */
  --muted: #64748b;              /* texte secondaire */
  --line: #e9eef5;               /* lignes */
  --bg-soft: #f6fbff;
}

.theme-smooth{
  background:
    radial-gradient(800px 220px at 50% -80px, rgba(96,165,250,.18), transparent 60%),
    radial-gradient(700px 200px at -10% 20%, rgba(34,211,238,.12), transparent 55%),
    #f8fbfd;
  color: var(--ink);
}

/* Carte formulaire super arrondie + ombre douce */
.form-card.smooth{
  background:#fff;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 24px;
  box-shadow: 0 18px 60px rgba(15,23,42,.06);
  padding: 24px 22px;
  position: relative;
}
.form-card.smooth::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:3px; border-radius:24px 24px 0 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  opacity:.9;
}

/* Sections + titres minimalistes */
.form-section{ margin: 26px 0; }
.fieldset-title{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:1rem; color:#0b5a6b; margin-bottom:10px;
}
.fieldset-title i{ opacity:.9; }
.fieldset-title::after{
  content:""; flex:1; height:2px; margin-left:10px; border-radius:2px;
  background: linear-gradient(90deg, rgba(14,165,233,.25), rgba(96,165,250,.15));
}

/* Empilement / espacements */
.form-stacked .form-grid{ grid-template-columns: 1fr !important; gap: 18px; }
.form-stacked .form-group{ margin-bottom: 4px; }

/* Inputs pill ultra arrondis */
.form-card.smooth input,
.form-card.smooth select{
  border-radius: 9999px;
}
.form-card.smooth textarea{
  border-radius: 18px;
}

/* Style champs */
.form-card.smooth input[type="text"],
.form-card.smooth input[type="date"],
.form-card.smooth input[type="email"],
.form-card.smooth input[type="number"],
.form-card.smooth select,
.form-card.smooth textarea{
  background: #f8fafc;
  border: 1px solid var(--line);
  padding: 14px 16px;
  font-size: 15px;
  color: var(--ink);
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease, transform .06s ease;
  outline: none;
}
.form-card.smooth textarea{ min-height: 110px; }

/* Focus ring très propre + légère élévation */
.form-card.smooth input:focus,
.form-card.smooth select:focus,
.form-card.smooth textarea:focus{
  background:#fff;
  border-color: transparent;
  box-shadow:
    0 0 0 4px rgba(14,165,233,.18),
    0 1px 0 rgba(2,132,199,.06) inset;
  transform: translateY(-0.5px);
}

/* Labels, aides, checkboxes */
.form-card.smooth label{ color:#0b4a5b; font-weight:700; margin-bottom:6px; }
.hint{ color: var(--muted); }
input[type="checkbox"],
input[type="radio"]{ accent-color: var(--brand); }

/* Bannière info ultra light */
.note-banner.mint{
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(16,185,129,.12), rgba(16,185,129,.06));
  border: 1px solid rgba(16,185,129,.22);
  box-shadow: 0 8px 24px rgba(16,185,129,.06);
}

/* Bouton principal – pill + dégradé */
.button-link.btn-pill{
  border-radius: 9999px;
  padding: 12px 18px;
  font-weight: 800;
  display:inline-flex; align-items:center; gap:10px;
  border: 0;
  color:#fff !important;
}
.btn-grad-cyan{
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  box-shadow: 0 14px 36px rgba(14,165,233,.22);
}
.btn-grad-cyan:hover{ filter: saturate(1.06) brightness(1.02); transform: translateY(-1px); }

/* Bouton secondaire très soft */
.button-link.btn-soft{
  border-radius:9999px;
  padding:12px 18px;
  background:#fff;
  border:1px solid var(--line);
  color:#0b3a4a !important;
}
.button-link.btn-soft:hover{ background:#f8fafc; }

/* Flash messages plus discrets */
.flash-container{ margin-top: 14px; }
.flash-message{
  border-radius: 14px;
  border:1px solid var(--line);
  background:#ffffffea;
  backdrop-filter: blur(6px);
}

/* Off-canvas cohérent (si présent) */
.offcanvas{
  background: rgba(255,255,255,.96);
  border-left: 1px solid rgba(255,255,255,.8);
  backdrop-filter: blur(12px);
}
.offcanvas a:hover{ background:#f1f7ff; border-radius: 10px; }

/* Motion douce uniquement si autorisée */
@media (prefers-reduced-motion: no-preference){
  .form-card.smooth{ transition: box-shadow .2s ease, transform .15s ease; }
  .form-card.smooth:hover{ box-shadow: 0 22px 64px rgba(15,23,42,.08); }
}

/* ===== Note banner plus contrastée ===== */
.theme-smooth .note-banner.mint{
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(16,185,129,.26), rgba(16,185,129,.14));
  border: 1px solid rgba(16,185,129,.42);
  box-shadow: 0 10px 28px rgba(16,185,129,.10);
}

/* Couleurs de texte plus foncées */
.theme-smooth .note-banner.mint .note-title{
  color:#0b5b41;           /* vert foncé lisible */
  font-weight:800;
  letter-spacing:.2px;
}
.theme-smooth .note-banner.mint .note-text{
  color:#0b5b41;
  opacity:.95;
}

/* Icône plus visible */
.theme-smooth .note-banner.mint .note-icon{
  width:36px; height:36px; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.55);
  box-shadow: inset 0 0 0 2px rgba(16,185,129,.25);
}
.theme-smooth .note-banner.mint .note-icon i{ color:#0b5b41; opacity:.95; }

/* OPTION "très visible" : ajouter la classe .prominent dans le HTML */
.theme-smooth .note-banner.mint.prominent{
  background: linear-gradient(90deg, #10b981, #059669);
  border-color:#089162;
  color:#fff;
  box-shadow: 0 14px 36px rgba(16,185,129,.22);
}
.theme-smooth .note-banner.mint.prominent .note-title,
.theme-smooth .note-banner.mint.prominent .note-text{ color:#fff; }
.theme-smooth .note-banner.mint.prominent .note-icon{
  background: rgba(255,255,255,.18);
  box-shadow:none;
}
.theme-smooth .note-banner.mint.prominent .note-icon i{ color:#fff; }

/* ===== Pastille "NOUVEAU CLIENT" — petite, belle, en dégradé ===== */
.note-chip{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 14px;
  border-radius: 9999px;          /* pill */
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  user-select: none;
  margin: 6px 0 16px;
  box-shadow: 0 8px 22px rgba(14,165,233,.18);
  border: 1px solid rgba(255,255,255,.55);
}
.note-chip i{ font-size:.9rem; opacity:.95; }
.note-chip span{ position: relative; top: 1px; }

/* Dégradé cyan/bleu (fallback inclus) */
.note-chip-cyan{
  color:#fff;
  background: linear-gradient(135deg, var(--brand, #06b6d4) 0%, var(--brand-2, #60a5fa) 100%);
}

/* Variante “verre” si tu veux plus discret (remplace note-chip-cyan par note-chip-glass) */
.note-chip-glass{
  color:#0b4a5b;
  background: linear-gradient(135deg, rgba(6,182,212,.14), rgba(96,165,250,.12));
  border: 1px solid rgba(6,182,212,.35);
  box-shadow: 0 6px 18px rgba(6,182,212,.10);
}

.note-chip--center{
  display: flex;
  width: fit-content;
  margin: 8px auto 16px;
}

/* Cache la barre dégradée en haut de la carte quand .no-accent est présent */
.form-card.smooth.no-accent::before{ content:none !important; }


/* ===== Toggles pill modernes ===== */
.toggle{ position: relative; display: inline-block; margin-top: 6px; }
.toggle-input{ position: absolute; inset: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.toggle-ui{
  --h: 34px; --w: 62px; --pad: 3px;
  position: relative;
  display: inline-flex; align-items: center;
  width: var(--w); height: var(--h);
  border-radius: 9999px;
  background: #edf2f7;                      /* off */
  border: 1px solid var(--line, #e9eef5);
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: inset 0 1px 0 rgba(2,6,23,.03);
}

/* étiquette Oui/Non à droite, auto via data-attrs */
.toggle-ui::after{
  content: attr(data-label-off);
  margin-left: 10px;
  font-weight: 800; letter-spacing: .2px;
  color: #0b3a4a; opacity: .85;
  position: relative; left: calc(var(--w) + 8px);
}

.toggle-knob{
  position: absolute; top: var(--pad); left: var(--pad);
  width: calc(var(--h) - var(--pad)*2); height: calc(var(--h) - var(--pad)*2);
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(2,6,23,.14);
  transition: transform .18s cubic-bezier(.2,.8,.2,1);
}

/* état ON */
.toggle-input:checked + .toggle-ui{
  background: linear-gradient(135deg, var(--brand, #06b6d4) 0%, var(--brand-2, #60a5fa) 100%);
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(14,165,233,.22);
}
.toggle-input:checked + .toggle-ui .toggle-knob{
  transform: translateX(calc(var(--w) - var(--h)));
}
.toggle-input:checked + .toggle-ui::after{
  content: attr(data-label-on);
  color: #075985;
}

/* focus clavier visible sur le track */
.toggle-input:focus-visible + .toggle-ui{
  box-shadow:
    0 0 0 3px color-mix(in srgb, #0ea5e9 30%, transparent),
    0 1px 0 rgba(2,132,199,.08) inset;
}

/* alignements doux dans le formulaire */
.form-card.smooth .form-group .toggle{ margin-top: 8px; }


/* ===== Fiche client — layout & styles ===== */
.client-card{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  padding: 24px 22px;           /* hérite de .form-card.smooth */
}
@media (max-width: 780px){
  .client-card{ grid-template-columns: 1fr; }
}

.client-photo{ display:flex; flex-direction:column; gap:10px; align-items:center; }
.client-photo img{
  width:180px; height:180px; object-fit:cover;
  border-radius: 16px;
  border:1px solid var(--line, #e9eef5);
  box-shadow: 0 8px 26px rgba(15,23,42,.06);
}
/* avatar si pas de photo */
.avatar-fallback{
  width:180px; height:180px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size: 42px; font-weight: 800; letter-spacing:.5px;
  color:#0b3a4a; background:#f1f5f9; border:1px solid var(--line, #e9eef5);
}

.meta-badges{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:9999px;
  font-size:.78rem; font-weight:800; letter-spacing:.2px;
  background:#f1f5f9; color:#0b3a4a; border:1px solid var(--line, #e9eef5);
}
.badge i{ font-size:.85rem; }
.badge-green{
  background: linear-gradient(135deg,#10b98122,#34d39922);
  border-color: #10b98144; color:#065f46;
}
.badge-gray{ background:#eef2f7; color:#334155; }
.badge-cyan{
  background: linear-gradient(135deg, rgba(6,182,212,.18), rgba(96,165,250,.18));
  border-color: rgba(6,182,212,.35); color:#075985;
}

.client-content{ min-width: 0; } /* évite overflow */

.info-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 6px;
}
@media (max-width: 780px){
  .info-grid{ grid-template-columns: 1fr; }
}
.kv{
  background:#f8fafc;
  border:1px solid var(--line, #e9eef5);
  border-radius:12px;
  padding:12px 14px;
}
.kv b{
  display:block; color:#0b4a5b; margin-bottom:4px; font-weight:800;
}
.kv a{ color:inherit; text-decoration:none; }
.kv a:hover{ text-decoration:underline; }

.section-hr{
  height:1px; border:0; background:var(--line, #e9eef5);
  margin: 16px 0 10px;
}

.doc-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Bouton retour au-dessus */
.back-row{ display:flex; justify-content:center; margin: 6px 0 10px; }

/* ===== CTA "Signer le consentement" plus visible ===== */
.button-link.button-warning,
.button-link.btn-pill.button-warning {
  background: linear-gradient(135deg, #f97316, #ef4444); /* orange -> rouge */
  color: #fff;
  border: 0;
  opacity: 1;                 /* forcer à plein contraste */
  box-shadow: 0 10px 24px rgba(239, 68, 68, .28);
}
.button-link.button-warning i { opacity: .95; }

.button-link.button-warning:hover,
.button-link.btn-pill.button-warning:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(239, 68, 68, .34);
}
.button-link.button-warning:active,
.button-link.btn-pill.button-warning:active {
  transform: translateY(0);
}

/* Si jamais une classe "is-disabled" ou un style grise le bouton, on garde le contraste */
.button-link.button-warning.is-disabled,
.button-link.btn-pill.button-warning.is-disabled {
  opacity: .8;
  cursor: pointer;
}

/* ===== CTA "Consentement signé" (vert soutenu, cliquable) ===== */
.button-link.button-success,
.button-link.btn-pill.button-success {
  background: linear-gradient(135deg, #22c55e, #16a34a); /* vert -> vert foncé */
  color: #fff;
  border: 0;
  opacity: 1;                /* enlève tout effet "pâle" */
  pointer-events: auto;      /* au cas où un style l'aurait grisé */
  box-shadow: 0 10px 24px rgba(34, 197, 94, .25);
}
.button-link.button-success i { opacity: .95; }

.button-link.button-success:hover,
.button-link.btn-pill.button-success:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(34, 197, 94, .33);
}
.button-link.button-success:active,
.button-link.btn-pill.button-success:active {
  transform: translateY(0);
}

/* Si un style global ajoute .is-disabled par erreur, on force l'affichage */
.button-link.button-success.is-disabled,
.button-link.btn-pill.button-success.is-disabled {
  opacity: 1;
  cursor: pointer;
}


/* Supprimer le halo/plateau derrière le bouton rouge "Supprimer" */
.button-group .button-link.btn-pill.button-danger,
.button-link.btn-pill.button-danger {
  position: relative;
  outline: 0;
  border: 0;
  background-clip: padding-box;
  box-shadow: 0 12px 28px rgba(239, 68, 68, .30); /* ombre propre */
}

/* Certains thèmes ajoutent un pseudo-élément en arrière-plan → on le coupe */
.button-group .button-link.btn-pill.button-danger::before,
.button-group .button-link.btn-pill.button-danger::after,
.button-link.btn-pill.button-danger::before,
.button-link.btn-pill.button-danger::after {
  content: none !important;
}

/* On s'assure qu'aucun overlay de focus n’apparaisse en rectangle */
.button-link.btn-pill.button-danger:focus {
  outline: none !important;
  box-shadow: 0 14px 34px rgba(239, 68, 68, .34);
}

/* au cas où le fond vienne du container group */
.button-group { background: transparent !important; }


/* Supprimer tout halo/plateau autour du bouton rouge */
.button-link.btn-pill.button-danger,
.button-group .button-link.btn-pill.button-danger {
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

.button-link.btn-pill.button-danger:hover,
.button-link.btn-pill.button-danger:focus,
.button-link.btn-pill.button-danger:active {
  box-shadow: none !important;
  transform: none !important;
}

/* Aligne le bouton "Retour..." à gauche */
.container-narrow > .back-row{
  display: flex;
  justify-content: flex-start !important;
  align-items: center;
  gap: 8px;
  text-align: left;          /* au cas où */
  margin-bottom: 8px;
}
.container-narrow > .back-row .button-link{
  margin: 0;                 /* neutralise d'éventuelles marges auto */
}

.client-photo .meta-badges{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;
}
.client-photo .meta-badges .badge i{ margin-right:6px; }

/* ===== LOGIN v2 — clean, smooth, sans chevauchement ===== */
:root{
  --brand-1:#06b6d4;         /* cyan Freed */
  --brand-2:#3b82f6;         /* bleu Freed */
  --ink:#0f172a;             /* titre */
  --muted:#64748b;           /* textes secondaires */
  --line:#e9eef5;            /* bordures douces */
  --bg-soft:#f6fafc;         /* fond de champ */
}

.login-screen{
  min-height:100svh;
  display:grid; place-items:center;
  padding:24px;
  background:
    radial-gradient(900px 280px at 50% -120px, rgba(14,165,233,.10), transparent 60%),
    radial-gradient(760px 220px at -8% 32%, rgba(2,132,199,.08), transparent 60%),
    #f8fbfd;
}

.login-card{
  width:100%; max-width:480px;
  border-radius:24px;
  padding:28px 26px 18px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:
    0 26px 80px rgba(15,23,42,.08),
    0 2px 6px rgba(15,23,42,.04);
}

.login-brand{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.login-brand img{
  height:64px; width:64px; object-fit:cover; border-radius:16px;
  box-shadow:0 6px 16px rgba(2,132,199,.18);
}
.login-title{
  margin:4px 0 8px; font-size:28px; line-height:1.2;
  color:var(--ink); font-weight:800; letter-spacing:.2px; text-align:center;
}

/* Messages flash */
.login-flashes{ margin:6px 0 10px; }
.login-flashes .flash-message{
  padding:10px 12px; border-radius:12px;
  background:#fff; border:1px solid var(--line); color:#0b4a6e;
}

/* Forme générale */
.login-form{ display:grid; gap:12px; }

/* Groupes de champs sans superposition */
.field{ position:relative; }
.field i.left{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:#94a3b8; font-size:16px; pointer-events:none;
}
.field input{
  width:100%;
  height:48px;
  border-radius:14px;
  padding:0 46px 0 42px;             /* place pour l'icône + bouton œil */
  background:var(--bg-soft);
  border:1px solid var(--line);
  font-size:15px; color:var(--ink);
  outline:none;
  transition:box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.field input::placeholder{ color:#9aa7b4; }
.field input:focus{
  background:#fff; border-color:#cfe7f7;
  box-shadow:0 0 0 3px rgba(14,165,233,.18);
}

/* Bouton œil intégré, sans déborder */
.field .toggle-password{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:10px;
  border:1px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:#6b7a8a; cursor:pointer;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.field .toggle-password:hover{
  background:#f2f6fb; color:#0ea5e9;
  box-shadow:0 1px 2px rgba(2,132,199,.08) inset;
}

/* Indice CapsLock */
.caps-hint{
  display:none; margin:-6px 0 4px 2px;
  font-size:12.5px; color:#b45309;
  background:#fff7ed; border:1px solid #fed7aa;
  padding:6px 10px; border-radius:10px;
}

/* CTA principal */
.login-actions{ margin-top:4px; }
.login-btn{
  width:100%; height:48px;
  border:0; border-radius:14px; cursor:pointer;
  font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
  box-shadow:0 16px 36px rgba(14,165,233,.18);
  transition:transform .06s ease, filter .15s ease, box-shadow .18s ease;
}
.login-btn:hover{ filter:saturate(1.03) brightness(1.01); transform:translateY(-1px); }
.login-btn:active{ transform:translateY(0); }

/* Ligne options + lien retour : claire, espacée */
.login-extra{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; margin-top:10px; font-size:14px; color:var(--muted);
}
.login-extra a{ color:#0ea5e9; text-decoration:none; font-weight:700; }
.login-extra a:hover{ text-decoration:underline; }

.login-footer{
  margin-top:10px; text-align:center; font-size:12.5px; color:#98a2b3;
}

/* Petites largeurs */
@media (max-width:420px){
  .login-card{ padding:24px 18px 16px; border-radius:20px; }
  .field input{ height:46px; }
  .login-btn{ height:46px; }
}

/* --- FIX Login: spacing + eye button --- */

/* Sécurise le box-sizing dans la carte */
.login-card *, .login-card *::before, .login-card *::after{
  box-sizing: border-box;
}

/* 1) Place du texte vs icône */
.login-card .field input{
  /* + espace à gauche pour éviter la collision avec l’icône */
  padding-left: 52px !important;   /* (icône 16 + marge 14 + 8 de respiration) */
  /* + espace à droite pour le bouton œil sans chevauchement */
  padding-right: 56px !important;
}

/* 2) Neutralise les styles globaux de button qui gonflent l’œil */
.login-card .field .toggle-password{
  all: unset;                          /* reset total pour éviter les règles globales */
  position: absolute;
  right: 8px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--line);
  background: #fff;
  color: #6b7a8a; cursor: pointer;
  box-shadow: none;
}
.login-card .field .toggle-password:hover{
  background: #f2f6fb; color: #0ea5e9;
}
.login-card .field .toggle-password i{ font-size: 14px; }

/* 3) Assure que l’icône ne chevauche pas l’input */
.login-card .field i.left{
  left: 14px; width: 18px; text-align: center;
  pointer-events: none;
}

/* --- FIX logo login coupé --- */
.login-card .login-brand img{
  width: 72px;
  height: 72px;
  aspect-ratio: 1 / 1;          /* garantit un vrai carré */
  object-fit: contain !important;/* ne rogne plus le visuel */
  padding: 6px;                  /* respiration interne pour éviter l'effet "coupé" */
  border-radius: 16px;
  background: #fff;              /* fond propre autour du logo */
  display: block;                /* supprime l'espace baseline éventuel */
}

/* --- FIX logo rectangle plein, sans rognage --- */
.login-card .login-brand img{
  height: 60px !important;      /* ajuste la taille globale du bloc */
  width: auto !important;        /* conserve le ratio natif (rectangle ok) */
  aspect-ratio: auto !important; /* annule le carré forcé */
  object-fit: contain !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 10px;           /* léger arrondi, enlève si tu veux 0 */
  box-shadow: 0 8px 20px rgba(2,132,199,.12);
  display: block;
}

/* ===== SEANCES v3 — ultra smooth & épuré ===== */
.seances-page{
  background:
    radial-gradient(900px 240px at 50% -120px, rgba(34,211,238,.16), transparent 60%),
    radial-gradient(780px 220px at -8% 32%, rgba(2,132,199,.10), transparent 60%),
    #f8fbfd;
  color:#0f172a;
}

/* Container */
.seances-wrap{
  max-width: 1200px;
  margin: 18px auto 40px;
  padding: 0 12px;
}

/* HERO : titre + badges + photo */
.seances-hero{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  background: #fff;
  border: 1px solid rgba(2,132,199,.15);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(2,132,199,.10), 0 1px 3px rgba(0,0,0,.04);
}
.seances-hero .title{
  margin: 4px 0 10px;
  font-weight: 900;
  letter-spacing:.2px;
  font-size: clamp(20px, 1.2vw + 18px, 28px);
}
.seances-hero .stats-chips{
  display:flex; flex-wrap:wrap; gap:8px; margin: 4px 0 8px;
}
.stats-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:9999px; font-weight:800; font-size:.9rem;
  border:1px solid #e6eef5; background:#f8fafc; color:#0b4a5b;
}
.stats-chip i{ color:#06b6d4; }

/* Carte active (temps restant) */
.card-info{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:12px; font-weight:800;
  background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0;
}

/* Photo profil (droite) */
.seances-hero .avatar-card{
  display:flex; align-items:center; justify-content:center; padding:8px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  border:1px solid rgba(2,132,199,.15);
  border-radius:18px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 8px 24px rgba(15,23,42,.06);
  min-width: 126px;
}
.seances-hero .avatar-card img{
  width: 100px; height: 100px; object-fit: cover; border-radius: 50%;
  box-shadow: 0 10px 24px rgba(2,132,199,.18);
  border: 2px solid #06b6d4;
}

/* Toolbar — retour + CTAs */
.seances-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin: 12px 0 10px;
}
.btn-soft{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  padding:10px 14px; border-radius:12px; font-weight:800; color:#0b3a4a;
  background:#fff; border:1px solid #e6eef5;
}
.btn-soft:hover{ background:#f8fafc; }
.btn-pill{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  padding:10px 16px; border-radius:9999px; font-weight:800; color:#fff;
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
  box-shadow: 0 14px 36px rgba(14,165,233,.22);
}
.btn-pill:hover{ filter:saturate(1.05) brightness(1.02); transform:translateY(-1px); }

/* Titres de section */
.section-title{
  margin: 20px 0 8px; font-weight:900; letter-spacing:.2px;
  font-size: 20px; color:#0b4a5b;
}

/* Tableaux "pro" en cartes-lignes (sans toucher aux autres tables) */
.seances-table{
  width:100%;
  border-collapse: separate; border-spacing: 0 10px;
  background: transparent; box-shadow:none; border-radius:0;
}
.seances-table thead th{
  position: sticky; top: 0; z-index: 5;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid rgba(2,132,199,.12);
  color:#0f172a; font-weight:800; padding:12px 16px;
}
.seances-table tbody tr{
  background:#fff;
  box-shadow: 0 8px 20px rgba(2,132,199,.08), 0 1px 3px rgba(0,0,0,.05);
  border-radius:14px; transition: transform .08s ease, box-shadow .18s ease;
}
.seances-table tbody tr:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(2,132,199,.12), 0 4px 10px rgba(0,0,0,.06);
}
.seances-table td{ padding:14px 16px; border:none; color:#0f172a; }

/* Remarques mieux intégrées */
.remarque{
  display:inline-block; padding:6px 10px; border-radius:10px;
  background:#fff7ed; color:#b45309; border:1px solid #fed7aa; font-weight:700;
}

/* CTA sous tableau */
.section-cta{ margin:10px 0 26px; display:flex; gap:10px; justify-content:flex-end; }

/* Badges types (relookés) */
.badge{ border:1px solid rgba(0,188,212,.25); border-radius:9999px; color:#0b3a4a; }
.badge-thermo{ background:#e0f2fe; color:#075985; border-color:#bae6fd; }
.badge-apl{ background:#ecfeff; color:#155e75; border-color:#a5f3fc; }
.badge-visage{ background:#f5f3ff; color:#4c1d95; border-color:#ddd6fe; }

/* Mobile : cartes fluides avec labels */
@media (max-width: 820px){
  .seances-table thead{ display:none; }
  .seances-table, .seances-table tbody, .seances-table tr, .seances-table td{ display:block; width:100%; }
  .seances-table tbody tr{ border-radius:14px; padding:10px 12px; }
  .seances-table td{ padding:10px 0; }
  .seances-table td[data-label]::before{
    content: attr(data-label);
    display:block; margin-bottom:4px; font-size:12px; font-weight:700; color:#64748b;
  }
}

/* Boutons d'action déjà présents → on les garde, juste un petit lift */
.btn-action{ box-shadow: 0 2px 8px rgba(0,188,212,.12); }
.btn-action:hover{ filter:brightness(.98); }

/* ===== Offcanvas/menu existe déjà via tes autres pages ===== */
/* (aucune redéfinition ici) */

/* ===== Séances : encadrer chaque type ===== */
.seances-section{
  background:#fff;
  border:1px solid rgba(2,132,199,.14);
  border-radius:22px;
  padding:16px 14px;
  box-shadow:0 12px 28px rgba(2,132,199,.08), 0 1px 3px rgba(15,23,42,.04);
  margin:18px 0 26px;
}
.seances-section .section-title{ margin: 4px 6px 10px; }

/* ===== Toolbar : meilleur espacement + retour bien à gauche ===== */
.seances-toolbar{
  display:flex; align-items:center; gap:14px;
  margin:16px 0 18px;
}
.seances-toolbar .btn-soft{ margin-right:auto; } /* pousse les CTA à droite */
.seances-toolbar .btn-group{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

/* ===== Note client : version forte (comme fiche client) ===== */
.note-card{
  position:relative; display:flex; gap:10px; align-items:flex-start;
  padding:12px 14px 12px 16px; border-radius:16px;
  background:#ffffff;
  border:1px solid #e6eef5;
  box-shadow: 0 6px 18px rgba(2,132,199,.06) inset;
}
.note-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  border-radius:16px 0 0 16px;
  background:linear-gradient(180deg,#06b6d4,#3b82f6);
}
.note-card .note-title{ font-weight:900; font-size:14px; color:#0f172a; margin-bottom:2px; }
.note-card .note-text{ color:#0f172a; font-weight:700; }

/* ===== Table card wrapper (déjà présent) : légère marge dans les sections */
.seances-section .table-card{ margin-top:8px; }

/* Petits ajustements sur les tables pour respirer dans leur cadre */
.seances-section .seances-table thead th{ border-bottom:1px solid rgba(2,132,199,.12); }
.seances-section .seances-table tbody tr{ border-radius:14px; }

/* Light spacing sous le bouton retour dans toutes tailles */
@media (max-width:820px){
  .seances-toolbar{ margin:14px 0 16px; }
}

/* ============ ONGLETs — épuré & smooth (Freed Paris) ============ */
.tabs{
  max-width: 1200px;
  margin: 8px auto 26px;
  padding: 0 8px;
}

.tablist{
  display: flex; gap: 8px; flex-wrap: wrap;
  background: #fff;
  border: 1px solid rgba(2,132,199,.14);
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 12px 28px rgba(2,132,199,.08), 0 1px 3px rgba(0,0,0,.04);
}

.tab-btn{
  appearance: none;
  border: none;
  background: transparent;
  color: #0b3a4a;
  font-weight: 800;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .18s ease, box-shadow .2s ease, transform .06s ease, color .18s ease;
}
.tab-btn i{ opacity:.9; }
.tab-btn .tab-count{
  font-size: .78rem; font-weight: 900;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e6f6ff;
  color: #0369a1;
  border: 1px solid #bae6fd;
}
.tab-btn:hover{ background: #f1fbfe; }
.tab-btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(14,165,233,.22); }

.tab-btn.is-active{
  color:#fff;
  background: linear-gradient(135deg, #06b6d4, #0ea5e9);
  box-shadow: 0 12px 30px rgba(14,165,233,.18);
}
.tab-btn.is-active .tab-count{
  background: rgba(255,255,255,.18);
  color:#fff;
  border-color: rgba(255,255,255,.35);
}

/* Panneaux avec transition douce (sans reflow violent) */
.tab-panel{
  margin-top: 12px;
  background:#fff;
  border:1px solid rgba(2,132,199,.14);
  border-radius:22px;
  padding: 14px 10px;
  box-shadow: 0 12px 28px rgba(2,132,199,.08), 0 1px 3px rgba(0,0,0,.04);

  /* état caché (animable) */
  visibility:hidden; opacity:0; transform: translateY(6px);
  pointer-events:none; max-height:0; overflow: clip;
  transition: opacity .20s ease, transform .20s ease, visibility 0s linear .20s, max-height .20s ease;
}
.tab-panel.is-active{
  visibility:visible; opacity:1; transform:none;
  pointer-events:auto; max-height: 999999px;
  transition: opacity .20s ease, transform .20s ease, visibility 0s, max-height .20s ease;
}

/* Titre interne plus compact */
.tab-panel .section-title{ margin: 2px 6px 8px; }

/* Responsive : barre d’onglets pleine largeur */
@media (max-width: 720px){
  .tablist{ padding: 6px; }
  .tab-btn{ flex:1 1 auto; justify-content:center; }
}

/* Petits raffinements déjà utilisés ailleurs (cohérence DA) */
.seances-toolbar{
  max-width: 1200px; margin: 16px auto 18px; padding: 0 8px;
  display:flex; align-items:center; gap:14px;
}
.seances-toolbar .btn-soft{ margin-right:auto; }
.seances-toolbar .btn-group{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

/* Note client version forte (si pas déjà plus haut) */
.note-card{
  position:relative; display:flex; gap:10px; align-items:flex-start;
  padding:12px 14px; border-radius:16px; background:#fff;
  border:1px solid #e6eef5; box-shadow: 0 6px 18px rgba(2,132,199,.06) inset;
}
.note-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  border-radius:16px 0 0 16px; background: linear-gradient(180deg,#06b6d4,#3b82f6);
}
.note-card .note-title{ font-weight:900; font-size:14px; color:#0f172a; margin-bottom:2px; }
.note-card .note-text{ color:#0f172a; font-weight:700; }

/* Avatar carte (déjà présent chez toi) */
.avatar-card{
  background:#fff; border:1px solid rgba(2,132,199,.14);
  border-radius: 22px; padding: 16px;
  box-shadow: 0 12px 28px rgba(2,132,199,.08), 0 1px 3px rgba(0,0,0,.04);
}
.avatar-card img{
  height: 110px; width: 110px; object-fit: cover; border-radius: 50%;
  border: 3px solid #06b6d4;
}

/* Flèche retour dans la nav : spacing & taille */
.app-header .header-left{ gap:10px; }
.app-header .nav-back-btn{
  /* même rendu que tes autres icon-btn */
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(2,132,199,.18) inset;
  color:#0b3a4a;
}
.app-header .nav-back-btn:hover{ background: rgba(255,255,255,.28); }
.app-header .nav-back-btn i{ font-size:16px; }


/* Nav: flèche retour blanche, sans soulignement */
.app-header .nav-back-btn,
.app-header .nav-back-btn:hover,
.app-header .nav-back-btn:focus,
.app-header .nav-back-btn:active,
.app-header .nav-back-btn:visited {
  text-decoration: none !important;
  color: #fff !important;              /* couleur de l’icône */
}

.app-header .nav-back-btn i {
  color: inherit !important;           /* l’icône suit le blanc */
}

/* (optionnel) léger survol, flèche reste blanche */
.app-header .nav-back-btn:hover {
  background: rgba(255,255,255,.28);
}


/* Note dans le HERO des séances : mêmes styles que la fiche */
.seances-hero .note-banner{ margin-top:12px; }
.seances-hero .note-banner .note-icon i{ font-size:16px; }

/* Si tu avais encore .note-card, il n'est plus utilisé ici */

/* Add Séance — alerte carte : compac, bien espacée */
#carte_alerte {
  margin-top: 18px !important; /* override l'inline style */
  margin-bottom: 16px;
}

#carte_alerte.note-banner{
  padding: 12px 16px;          /* moins haut */
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(255, 56, 92, .12);
}

#carte_alerte .note-icon { margin-right: 10px; }
#carte_alerte .note-icon i { font-size: 16px; }         /* icône plus fine */
#carte_alerte .note-title   { font-size: 12px; letter-spacing:.06em; }
#carte_alerte .note-text    { font-size: 14px; line-height: 1.45; }

/* petit espace sous le champ Durée pour éviter l'effet collé */
#duree_field { margin-bottom: 6px; }

/* === Add Séance : alerte carte + espacements propres === */

/* Mise en page sûre pour toutes les bannières */
.note-banner{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.note-banner .note-icon{ margin-right:0; margin-top:2px; }
.note-banner .note-title{ font-size:12px; letter-spacing:.06em; margin-bottom:4px; }
.note-banner .note-text{ font-size:14px; line-height:1.45; }

/* Alerte carte : plus compacte + bien détachée des champs autour */
#carte_alerte{
  position: relative;
  z-index: 0;                   /* évite tout chevauchement visuel */
  padding: 12px 16px !important;
  border-radius: 14px !important;
  margin-top: 14px !important;  /* espace sous "Durée" */
  margin-bottom: 20px !important;/* espace avant "Acheter une carte ?" */
  box-shadow: 0 10px 26px rgba(255,56,92,.12);
}

/* Le bloc achat carte et le choix de carte prennent aussi un peu d’air */
#achat_carte_block{ margin-top: 10px !important; }
#carte_selection{ margin-top: 12px !important; }

/* Petit écart sous le champ Durée pour casser l'effet collé */
#duree_field{ margin-bottom: 6px; }

/* Au cas où : grille avec un espacement vertical confortable */
.form-section .form-grid{ row-gap: 14px; }

/* Fix: no white chip behind delete button in actions column */
.table-card .clients-table .cell-actions .form-button{
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.table-card .clients-table .cell-actions .form-button::before,
.table-card .clients-table .cell-actions .form-button::after{
  display: none !important;
  content: none !important;
}
.table-card .clients-table .cell-actions .form-button .btn-action{
  margin: 0; /* keep the icon centered */
}

/* Force "Supprimer" en rouge, même dans .button-group et malgré les dégradés */
.button-group form.inline button.button-link.btn-pill.button-danger,
form.inline button.button-link.btn-pill.button-danger,
.button-link.btn-pill.button-danger {
  background: linear-gradient(135deg, #ef4444, #f43f5e) !important; /* rouge -> rouge */
  background-color: #e53935 !important;   /* fallback */
  background-image: none !important;      /* coupe tout gradient hérité */
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(239,68,68,.28);
}
.button-group form.inline button.button-link.btn-pill.button-danger:hover,
form.inline button.button-link.btn-pill.button-danger:hover,
.button-link.btn-pill.button-danger:hover {
  filter: brightness(1.03);
}


.filters-bar{
  display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end;
  background:#fff; border-radius:14px; padding:12px 14px; margin:12px 0;
  box-shadow:0 8px 24px rgba(16,24,40,.06);
}
.filters-bar .filter-group{display:flex; flex-direction:column; gap:6px;}
.filters-bar .filter-group .row{display:flex; align-items:center; gap:8px;}
.filters-bar input[type="number"], .filters-bar input[type="text"], .filters-bar select{
  height:36px; border:1px solid #e5e7eb; border-radius:10px; padding:0 10px; min-width:120px;
}
.filters-bar .sep{opacity:.6;}
.filters-bar label{font-size:.9rem; color:#0f172a;}
.filters-bar .filter-group label > input[type="checkbox"]{margin-right:6px;}


/* ==== FILTERS v2 — smooth, on-brand, pill/glass ======================= */
.filters-bar{
  max-width: 1200px;
  margin: 12px auto 10px;
  padding: 12px 14px;
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88));
  border: 1px solid rgba(2,132,199,.14);
  box-shadow: 0 12px 28px rgba(2,132,199,.08), 0 1px 3px rgba(0,0,0,.04);
}
.clients-toolbar + .filters-bar{ margin-top: 8px; }

.filters-bar .filter-group{ display:flex; flex-direction:column; gap:8px; min-width: 160px; }
.filters-bar .filter-group .row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.filters-bar label{ font-size:.9rem; font-weight:800; color:#0b4a5b; }
.filters-bar .sep{ color:#94a3b8; opacity:.9; }

/* Champs (mêmes codes visuels que le reste) */
.filters-bar input[type="number"],
.filters-bar input[type="text"],
.filters-bar select{
  height: 42px; min-width: 140px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid #e6eef5;
  background: #f8fafc;
  font-size: 15px; color: #0f172a;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease, transform .06s ease;
}
.filters-bar input:focus,
.filters-bar select:focus{
  outline: none; background:#fff; border-color: transparent;
  box-shadow: 0 0 0 3px rgba(14,165,233,.18), 0 1px 0 rgba(2,132,199,.06) inset;
  transform: translateY(-0.5px);
}

/* Checkboxes → chips (sans changer ton HTML) */
.filters-bar .filter-group .row label{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px;
  border-radius: 9999px;
  font-weight: 800; color:#0b3a4a;
  background:#fff; border:1px solid #e6eef5;
  cursor:pointer; user-select:none;
  transition: background .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
}
/* Masque visuel de la case mais garde l’accessibilité via <label> */
.filters-bar .filter-group .row label input[type="checkbox"]{
  appearance: none; width: 0; height: 0; margin: 0; padding: 0;
}
/* État coché (CSS :has) */
.filters-bar .filter-group .row label:has(input[type="checkbox"]:checked){
  background: linear-gradient(135deg, #06b6d4, #60a5fa);
  color:#fff; border-color: transparent;
  box-shadow: 0 10px 24px rgba(14,165,233,.22);
}
.filters-bar .filter-group .row label:has(input[type="checkbox"]:focus-visible){
  box-shadow: 0 0 0 3px rgba(14,165,233,.20), 0 1px 0 rgba(2,132,199,.06) inset;
}

/* Bouton "Réinitialiser" au style Freed (écrase .btn-action) */
#f-reset{
  width: auto; height: 42px; padding: 0 16px;
  margin-left: auto;
  border: 0; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 800; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #06b6d4, #0ea5e9);
  box-shadow: 0 14px 36px rgba(14,165,233,.22);
  transition: transform .06s ease, filter .15s ease, box-shadow .18s ease;
}
#f-reset:hover{ filter:saturate(1.05) brightness(1.02); transform: translateY(-1px); }
#f-reset:active{ transform: translateY(0); }

/* Mobile : plus compact + bouton plein largeur */
@media (max-width: 900px){
  .filters-bar{ gap: 10px; }
  #f-reset{ width: 100%; margin-left: 0; }
}

.filters-bar .chip{ /* mêmes styles que ci-dessus */ }
.filters-bar .chip input:checked + span{
  color:#fff;
}

/* ===== Bouton "Filtres" (capsule + badge) ===== */
.btn-filters{
  height: 38px; padding: 0 14px; margin-left: 10px;
  display:inline-flex; align-items:center; gap:8px;
  border:0; border-radius:9999px; cursor:pointer;
  font-weight:800; color:#fff;
  background: linear-gradient(135deg, #06b6d4, #0ea5e9);
  box-shadow: 0 10px 24px rgba(14,165,233,.22);
  transition: transform .06s ease, filter .15s ease;
}
.btn-filters:hover{ filter:saturate(1.06) brightness(1.02); transform: translateY(-1px); }
.btn-filters i{ font-size: 14px; }
.btn-filters.has-filters{
  position:relative;
}
.btn-filters.has-filters::after{
  content: attr(data-count);
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; font-weight:900;
  color:#fff; background:#ef4444; border-radius:9999px;
  box-shadow: 0 6px 14px rgba(239,68,68,.25);
}

/* ===== Panneau repliable des filtres (animation) ===== */
.filters-panel{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .28s ease, opacity .2s ease;
}
.filters-panel.open{
  max-height: 600px;   /* assez grand pour contenir la barre */
  opacity: 1;
}


/* --- Accent séance -------------------------------------------------- */
.seance-accent{
  /* fond très léger + petit liseré interne */
  background: rgba(255, 201, 138, 0.12) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 201, 138, 0.35),
    0 8px 20px rgba(2,132,199,0.08), 0 1px 3px rgba(0,0,0,0.05);
}

/* Toggle couleur dans les formulaires */
.color-toggle{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:9999px;
  background: #fff; border:1px solid rgba(2,132,199,.18);
  cursor:pointer; font-weight:700; color:#0b4a5b;
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease;
}
.color-toggle .dot{
  width:18px; height:18px; border-radius:50%;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.06);
}
.color-toggle.is-active{
  border-color: rgba(255,201,138,.8);
  box-shadow: 0 6px 18px rgba(255,201,138,.25);
  background: linear-gradient(180deg, rgba(255,201,138,.20), rgba(255,201,138,.08));
}
.color-toggle:active{ transform: scale(.98); }
.color-toggle .txt{ font-size:14px; opacity:.9; }

/* --- Previews photos ------------------------------------------------ */
.photo-preview-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:12px;
}
.photo-chip{
  position:relative;
  flex:0 0 110px;
  width:110px;
  height:110px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 12px rgba(15,23,42,0.15);
  background:#f6f8fb;
}
.photo-preview-grid > img{
  /* fallback when JS n'a pas encore enveloppé l'image */
  flex:0 0 110px;
  width:110px;
  height:110px;
  border-radius:12px;
  box-shadow:0 6px 12px rgba(15,23,42,0.15);
  object-fit:cover;
}
.photo-chip img,
.photo-preview-grid > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.photo-chip__remove{
  position:absolute;
  top:4px;
  right:4px;
  border:none;
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(15,23,42,0.8);
  color:#fff;
  font-size:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease;
}
.photo-chip__remove:hover{
  background:rgba(220,38,38,0.95);
}

/* --- Galerie photos client ----------------------------------------- */
.photos-gallery-card{
  background:#fff;
  border-radius:24px;
  padding:24px;
  box-shadow:0 25px 50px rgba(15,23,42,0.08);
}
.photos-gallery-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:12px;
}
.client-photos-grid{
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:18px;
}
.client-photo-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 15px 30px rgba(15,23,42,0.08);
  display:flex;
  flex-direction:column;
}
.client-photo-btn{
  border:none;
  padding:0;
  background:none;
  cursor:pointer;
}
.client-photo-btn img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}
.client-photo-card figcaption{
  padding:12px 16px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.client-photo-meta{
  display:flex;
  flex-direction:column;
  font-size:14px;
  line-height:1.3;
}
.client-photo-link{
  font-size:13px;
  font-weight:600;
  color:#0284c7;
}