/* =============================================================
   CRM Commercial O2TOIT — custom-brand-theme.css
   Source de vérité CSS — NE JAMAIS ÉDITER LA COPIE DÉPLOYÉE SEULE
   Copie déployée : {APP}/PUBLIC/assets/css/custom-brand-theme.css
   Préfixe composants : o2toit-
   Baseline : Hyper Bootstrap 5
   Version 1.0 — 2026-04-10
   ============================================================= */

/* =============================================================
   IMPORT POLICES
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Raleway:wght@600;700;800&display=swap');

/* =============================================================
   TOKENS BRAND O2TOIT — Variables CSS
   ============================================================= */

:root {

  /* --- Couleurs primaires (doré solaire) --- */
  --brand-primary:           #F3B23E;
  --brand-primary-dark:      #D4922A;
  --brand-primary-darker:    #B5741A;
  --brand-primary-light:     #F9D08B;
  --brand-primary-xlight:    #FDF3DC;

  /* --- Couleurs secondaires (vert olive) --- */
  --brand-secondary:         #CACF9D;
  --brand-secondary-dark:    #A5AB6D;
  --brand-secondary-darker:  #7E8447;
  --brand-secondary-light:   #E4E7CE;
  --brand-secondary-xlight:  #F2F4E6;

  /* --- Texte --- */
  --brand-text:              #2A3D27;
  --brand-text-muted:        #6B7E67;
  --brand-text-disabled:     #A8B5A4;
  --brand-text-inverse:      #FFFFFF;

  /* --- Fonds et surfaces --- */
  --brand-bg:                #F7F4ED;
  --brand-bg-card:           #FFFFFF;
  --brand-bg-sidebar:        #2A3D27;
  --brand-bg-topbar:         #FFFFFF;

  /* --- Bordures --- */
  --brand-border:            #DDD9D0;
  --brand-border-light:      #EDE9E2;

  /* --- Couleurs sémantiques recalibrées O2TOIT --- */
  --brand-success-bg:        #D4EDDA;
  --brand-success-text:      #2A5C3F;
  --brand-success-border:    #A3D4B3;

  --brand-warning-bg:        #FDF3DC;
  --brand-warning-text:      #8A5A1A;
  --brand-warning-border:    #F3B23E;

  --brand-danger-bg:         #FBEAEA;
  --brand-danger-text:       #8B2020;
  --brand-danger-border:     #E8A0A0;

  --brand-info-bg:           #E4E7F5;
  --brand-info-text:         #2C3E7A;
  --brand-info-border:       #A8B4E8;

  --brand-neutral-bg:        #F0EDE7;
  --brand-neutral-text:      #6B7E67;
  --brand-neutral-border:    #DDD9D0;

  /* --- Typographie --- */
  /* Corps + chiffres : Inter (chiffres tabulaires, lisibilité dense). */
  /* Titres : Raleway conservée (identité brand O2TOIT). */
  --brand-font:              'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --brand-font-heading:      'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Échelle de texte --- */
  --text-xs:                 11px;
  --text-sm:                 13px;
  --text-base:               15px;
  --text-md:                 16px;
  --text-lg:                 18px;
  --text-xl:                 22px;
  --text-2xl:                28px;

  /* --- Zones tactiles mobile --- */
  --touch-target-min:        44px;
  --input-height-mobile:     48px;
  --input-height-desktop:    38px;
  --list-item-height-mobile: 56px;

  /* --- Radius --- */
  --brand-radius-sm:         6px;
  --brand-radius:            8px;
  --brand-radius-lg:         12px;
  --brand-radius-xl:         16px;
  --brand-radius-pill:       100px;

  /* --- Ombres (teinte vert O2TOIT, pas noir générique) --- */
  --brand-shadow-sm:         0 1px 3px rgba(42, 61, 39, 0.08);
  --brand-shadow:            0 2px 8px rgba(42, 61, 39, 0.10);
  --brand-shadow-md:         0 4px 16px rgba(42, 61, 39, 0.12);
  --brand-shadow-lg:         0 8px 24px rgba(42, 61, 39, 0.15);

  /* --- Espacements --- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;

  /* --- Easing --- */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Mapping variables Hyper → brand --- */
  --ct-link-color:                var(--brand-primary);
  --ct-link-hover-color:          var(--brand-primary-dark);
  --ct-body-bg:                   var(--brand-bg);
  --ct-body-color:                var(--brand-text);
  --ct-leftbar-width:             240px;
  --ct-leftbar-bg:                var(--brand-bg-sidebar);
  --ct-menu-item-color:           rgba(255, 255, 255, 0.65);
  --ct-menu-item-hover-color:     #FFFFFF;
  --ct-menu-item-active-color:    var(--brand-primary);
  --ct-menu-item-active-bg:       rgba(243, 178, 62, 0.15);
  --ct-menu-condensed-link-bg:    var(--brand-bg-sidebar);
  --ct-topbar-bg:                 var(--brand-bg-topbar);
  --ct-topbar-height:             70px;
  --ct-border-color:              var(--brand-border);
  --ct-font-family-sans-serif:    var(--brand-font);
  --ct-font-size-base:            var(--text-base);
  --ct-body-font-size:            var(--text-base);
  --ct-card-bg:                   var(--brand-bg-card);
  --ct-card-border-color:         var(--brand-border-light);
  --ct-card-cap-bg:               var(--brand-bg-card);
  --ct-card-box-shadow:           var(--brand-shadow-sm);
}

/* =============================================================
   BASE GLOBALE
   ============================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--brand-font);
  font-size: var(--text-base);
  color: var(--brand-text);
  background-color: var(--brand-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  /* Chiffres tabulaires (largeur fixe) + variantes Inter "1 sans empattement" et "I à serifs" pour distinguer 1/l/I. */
  font-feature-settings: 'tnum' 1, 'cv11' 1, 'ss01' 1;
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--brand-primary-dark);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--brand-primary-darker);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--brand-font-heading);
  color: var(--brand-text);
  line-height: 1.2;
  margin-top: 0;
}

/* =============================================================
   FIX HYPER OBLIGATOIRE 1 — .small sur éléments block
   Hyper applique display:inline-block sur .small — casse les layouts
   ============================================================= */

dl.small, dt.small, dd.small, p.small, div.small, section.small,
article.small, header.small, footer.small, aside.small, nav.small,
main.small, form.small, fieldset.small, legend.small, label.small,
ul.small, ol.small, li.small,
table.small, thead.small, tbody.small, tfoot.small, tr.small,
td.small, th.small,
h1.small, h2.small, h3.small, h4.small, h5.small, h6.small {
  display: revert;
}

/* =============================================================
   FIX HYPER OBLIGATOIRE 2 — .navbar-custom double margin-left
   .content-page ajoute déjà margin-left sidebar → double décalage
   ============================================================= */

.navbar-custom {
  background-color: #FFFFFF !important;
  border-bottom: 2px solid var(--brand-primary) !important;
  box-shadow: none !important;
  height: 70px !important;
  min-height: 70px !important;
  margin-left:  -12px !important;
  margin-right: -12px !important;
  width:        calc(100% + 24px) !important;
}

.navbar-custom .topbar-menu a {
  color: var(--brand-text-muted);
  font-family: var(--brand-font);
}

.navbar-custom .topbar-menu a:hover {
  color: var(--brand-text);
}

/* =============================================================
   FIX HYPER OBLIGATOIRE 3 — Sidebar 100vh fixed
   ============================================================= */

.leftside-menu {
  background-color: var(--brand-bg-sidebar) !important;
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  /* Hyper réserve padding-bottom pour un .footer qui n'existe pas sur
     un ERP sans pied de page — neutralisé sinon le bouton Déconnexion
     sticky reste 72px au-dessus du bord bas du viewport. */
  padding-bottom: 0 !important;
  display: flex;
  flex-direction: column;
}

.leftside-menu .logo {
  flex: 0 0 70px;
}

.leftside-menu #leftside-menu-container {
  flex: 1 1 auto;
  min-height: 0;
}

.leftside-menu .side-nav {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* =============================================================
   FIX HYPER OBLIGATOIRE 4 — Logo responsive
   ============================================================= */

.leftside-menu .logo {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  height:          70px !important;
  padding:         0 16px !important;
  overflow:        hidden;
  background-color: #FFFFFF !important;
  border-bottom:   2px solid var(--brand-primary);
}

.leftside-menu .logo .logo-lg,
.leftside-menu .logo .logo-sm {
  max-width:   100%;
  max-height:  100%;
  line-height: 0;
  text-align:  center;
}

.leftside-menu .logo .logo-img-lg {
  max-width:  140px;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.leftside-menu .logo .logo-img-sm {
  max-width:  42px;
  max-height: 32px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* =============================================================
   FIX HYPER OBLIGATOIRE 5 — Déconnexion sticky bottom sidebar
   ============================================================= */

.leftside-menu .side-nav-item-logout {
  margin-top:       auto;
  position:         sticky;
  bottom:           0;
  background-color: var(--brand-bg-sidebar);
  border-top:       1px solid rgba(255, 255, 255, 0.10);
  padding:          6px 0 8px 0;
  z-index:          2;
}

.leftside-menu .side-nav-link-logout {
  color:      rgba(255, 120, 120, 0.85) !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.leftside-menu .side-nav-link-logout i {
  color: rgba(255, 120, 120, 0.85) !important;
}

.leftside-menu .side-nav-link-logout:hover,
.leftside-menu .side-nav-link-logout:focus {
  color:            #FFFFFF !important;
  background-color: rgba(239, 68, 68, 0.22);
}

.leftside-menu .side-nav-link-logout:hover i {
  color: #FFFFFF !important;
}

html[data-sidenav-size="condensed"] .wrapper .leftside-menu .side-nav-item-logout {
  padding: 6px 0 8px 0;
  text-align: center;
}

html[data-sidenav-size="condensed"] .wrapper .leftside-menu .side-nav-link-logout {
  justify-content: center;
  padding-left:    0;
  padding-right:   0;
}

html[data-sidenav-size="condensed"] .wrapper .leftside-menu .side-nav-link-logout span {
  display: none;
}

/* SimpleBar wrappe <ul.side-nav> dans .simplebar-content (display:block par
   défaut), ce qui casse la chaîne flex et empêche margin-top:auto sur
   .side-nav-item-logout de pousser le bouton en bas quand la nav rentre
   dans la sidebar. Trois règles cumulatives :
   1) forcer .simplebar-content-wrapper à au moins remplir #leftside-menu-container
      (SimpleBar lui met inline height:auto quand le contenu n'overflow pas,
      ce qui ramène la hauteur à celle du contenu naturel).
   2) faire de .simplebar-content un flex column de min-h:100%.
   3) la règle existante sur .side-nav (flex:1 1 auto) finit le travail. */
.leftside-menu .simplebar-content-wrapper {
  height:     100% !important;
}
.leftside-menu .simplebar-content {
  display:        flex;
  flex-direction: column;
  min-height:     100%;
}

/* Le user-agent / Bootstrap pose margin-bottom: 1rem sur <ul>, ce qui crée
   16px de gap sous le bouton Déconnexion sticky. */
.leftside-menu .side-nav {
  margin-bottom: 0;
}

/* FIX Condensed hover tooltip — couleurs O2TOIT au lieu du bleu Hyper */
html[data-sidenav-size="condensed"] .wrapper .leftside-menu .side-nav-item:hover > .side-nav-link,
html[data-sidenav-size="condensed"] .wrapper .leftside-menu .side-nav-item:hover > ul {
  background-color: var(--brand-bg-sidebar) !important;
  color: #FFFFFF !important;
}

html[data-sidenav-size="condensed"] .wrapper .leftside-menu .side-nav-item:hover > .side-nav-link .menu-icon {
  color: var(--brand-primary) !important;
}

/* Logo fond blanc aussi en condensed */
html[data-sidenav-size="condensed"] .wrapper .leftside-menu .logo {
  background-color: #FFFFFF !important;
  border-bottom: 2px solid var(--brand-primary);
}

/* Condensed : masquer logo-lg (dual logo), afficher logo-sm (O2TOIT seul) */
html[data-sidenav-size="condensed"] .wrapper .leftside-menu .logo .logo-lg {
  display: none !important;
}
html[data-sidenav-size="condensed"] .wrapper .leftside-menu .logo .logo-sm {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* =============================================================
   SIDEBAR O2TOIT — Navigation
   ============================================================= */

.side-nav .side-nav-link {
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--brand-font);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--brand-radius);
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.side-nav .side-nav-link:hover {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.07);
}

.side-nav .side-nav-link.active,
.side-nav .menuitem-active > .side-nav-link {
  color: var(--brand-primary) !important;
  background-color: rgba(243, 178, 62, 0.15) !important;
  font-weight: 600;
  border-left: 3px solid var(--brand-primary);
}

.side-nav .side-nav-link .menu-icon {
  color: inherit;
  font-size: 20px;
  margin-right: 10px;
  flex-shrink: 0;
}

/* Section headers sidebar */
.side-nav-title {
  color: rgba(255, 255, 255, 0.35) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-family: var(--brand-font) !important;
  padding: 12px 16px 6px !important;
}

/* Badge compteur sidebar */
.badge-o2toit-sidebar {
  background-color: var(--brand-primary);
  color: var(--brand-text);
  font-family: var(--brand-font);
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--brand-radius-pill);
  padding: 2px 7px;
  line-height: 1.4;
}

/* Logo sidebar */
.logo-box {
  background-color: var(--brand-bg-sidebar);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* =============================================================
   BOOTSTRAP 5 OVERRIDES — Couleurs brand
   ============================================================= */

/* Bouton primary Bootstrap → doré O2TOIT */
.btn-primary {
  --bs-btn-bg:                 var(--brand-primary);
  --bs-btn-border-color:       var(--brand-primary);
  --bs-btn-color:              var(--brand-text);
  --bs-btn-hover-bg:           var(--brand-primary-dark);
  --bs-btn-hover-border-color: var(--brand-primary-dark);
  --bs-btn-hover-color:        var(--brand-text);
  --bs-btn-active-bg:          var(--brand-primary-darker);
  --bs-btn-focus-shadow-rgb:   243, 178, 62;
  font-family: var(--brand-font);
  font-weight: 600;
  border-radius: var(--brand-radius);
}

.btn-outline-primary {
  --bs-btn-color:              var(--brand-primary-dark);
  --bs-btn-border-color:       var(--brand-primary);
  --bs-btn-hover-bg:           var(--brand-primary-xlight);
  --bs-btn-hover-border-color: var(--brand-primary-dark);
  --bs-btn-hover-color:        var(--brand-primary-darker);
  --bs-btn-active-bg:          var(--brand-primary-light);
  border-radius: var(--brand-radius);
}

/* Alert primary */
.alert-primary {
  background-color: var(--brand-primary-xlight);
  border-color: var(--brand-primary-light);
  color: var(--brand-primary-darker);
}

/* Tous les focus rings → doré O2TOIT (jamais bleu Bootstrap) */
.form-control:focus,
.form-select:focus,
.btn:focus-visible,
.btn-check:focus + .btn,
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(243, 178, 62, 0.20) !important;
  border-color: var(--brand-primary) !important;
  outline: none !important;
}

/* =============================================================
   FORMULAIRES — mobile-first O2TOIT
   ============================================================= */

.form-control,
.form-select {
  font-family: var(--brand-font);
  font-size: var(--text-base);
  color: var(--brand-text);
  background-color: var(--brand-bg-card);
  border-color: var(--brand-border);
  border-radius: var(--brand-radius);
  height: var(--input-height-mobile); /* 48px sur mobile */
  padding: 0 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

/* .form-select — chevron O2TOIT à droite (Bootstrap appearance:none ci-dessus
   supprime la flèche native, on la réintroduit en SVG inline pour que les
   listes déroulantes restent visuellement distinctes des inputs simples). */
.form-select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7E67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}

.form-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B5741A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.form-select:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A8B5A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  cursor: not-allowed;
}

/* Variante en erreur — chevron rouge */
.form-select.is-error,
.form-select.is-invalid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B2020' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(243, 178, 62, 0.20);
  color: var(--brand-text);
  background-color: var(--brand-bg-card);
  outline: none;
}

.form-control::placeholder {
  color: var(--brand-text-disabled);
  font-weight: 400;
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--brand-bg);
  color: var(--brand-text-disabled);
  cursor: not-allowed;
  border-color: var(--brand-border-light);
}

/* État erreur — utilisé par la validation client (champ required vide, etc.) */
.form-control.is-error,
.form-select.is-error {
  border-color: #E8A0A0;
  background-color: #FBEAEA;
}
.form-control.is-error:focus,
.form-select.is-error:focus {
  box-shadow: 0 0 0 3px rgba(232, 160, 160, 0.25);
}

/* État valide */
.form-control.is-valid,
.form-select.is-valid {
  border-color: #A3D4B3;
}

.form-label {
  font-family: var(--brand-font);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  line-height: 1.3;
}

/* Desktop : champs moins hauts */
@media (min-width: 992px) {
  .form-control,
  .form-select {
    height: var(--input-height-desktop); /* 38px desktop */
  }
}

/* =============================================================
   ZONES TACTILES MOBILES — règle universelle
   ============================================================= */

.btn,
.nav-link,
.side-nav-link,
.list-group-item-action,
[role="button"] {
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
}

/* =============================================================
   CARDS O2TOIT — base
   ============================================================= */

.card {
  background-color: var(--brand-bg-card);
  border: 1px solid var(--brand-border-light);
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--brand-shadow-sm);
  font-family: var(--brand-font);
}

.card-header {
  background: linear-gradient(180deg, #fafbfd 0%, #f6f8fb 100%);
  border-bottom: 1px solid var(--brand-border-light);
  padding: 0 20px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: var(--brand-radius-lg) var(--brand-radius-lg) 0 0;
}

.card-title {
  font-family: var(--brand-font);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--brand-text);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  line-height: 1;
}

.card-title i {
  font-size: 16px;
  color: var(--brand-primary);
}

.card-body {
  padding: 20px;
}

/* =============================================================
   BOUTONS — .btn-primary, .btn-secondary, .btn-ghost enrichis
   Les classes Bootstrap natives héritent directement du look premium O2TOIT.
   Écrire simplement class="btn btn-primary" → doré gradient + uplift + states.
   ============================================================= */

/* ── Bouton primaire — doré gradient + uplift hover + is-loading/is-success ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 20px;
  height: var(--touch-target-min); /* 44px */
  background: linear-gradient(180deg, #f5ba50 0%, var(--brand-primary) 100%);
  color: var(--brand-text);
  border: 1px solid var(--brand-primary-dark);
  border-radius: var(--brand-radius);
  font-family: var(--brand-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  box-shadow:
    0 1px 2px rgba(243, 178, 62, 0.10),
    0 4px 12px rgba(243, 178, 62, 0.08);
  transition: all 0.15s var(--ease-out);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

.btn-primary:hover:not(:disabled):not(.is-loading) {
  background: linear-gradient(180deg, #e89e20 0%, var(--brand-primary-dark) 100%);
  border-color: var(--brand-primary-darker);
  color: var(--brand-text);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 3px rgba(243, 178, 62, 0.20),
    0 4px 14px rgba(243, 178, 62, 0.15);
}

.btn-primary:active:not(:disabled):not(.is-loading) {
  transform: scale(0.97);
  transition-duration: 80ms;
  filter: brightness(0.94);
}

.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(243, 178, 62, 0.30);
  animation: focusPulse 1.5s ease infinite;
}

.btn-primary.is-loading {
  opacity: 0.85;
  pointer-events: none;
}

.btn-primary.is-success {
  background: linear-gradient(180deg, #3dd475 0%, #28a745 100%);
  border-color: #1e8035;
  color: #FFFFFF;
  pointer-events: none;
}

.btn-primary:disabled:not(.is-loading):not(.is-success) {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

/* ── Bouton secondaire — transparent + bordure primaire ── */
.btn-secondary {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-color: var(--brand-primary-dark);
  --bs-btn-hover-bg: var(--brand-primary-xlight);
  --bs-btn-hover-border-color: var(--brand-primary-dark);
  --bs-btn-hover-color: var(--brand-primary-darker);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 20px;
  height: var(--touch-target-min);
  background: transparent;
  color: var(--brand-primary-dark);
  border: 1px solid var(--brand-primary);
  border-radius: var(--brand-radius);
  font-family: var(--brand-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.15s var(--ease-out);
  -webkit-font-smoothing: antialiased;
}

.btn-secondary:hover:not(:disabled) {
  background: var(--brand-primary-xlight);
  border-color: var(--brand-primary-dark);
  color: var(--brand-primary-darker);
}

.btn-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(243, 178, 62, 0.20);
}

.btn-secondary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Bouton ghost — sans bordure, action tertiaire ── */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  height: var(--touch-target-min);
  background: transparent;
  color: var(--brand-text-muted);
  border: none;
  border-radius: var(--brand-radius);
  font-family: var(--brand-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.15s var(--ease-out);
  -webkit-font-smoothing: antialiased;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--brand-bg);
  color: var(--brand-text);
}

.btn-ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(243, 178, 62, 0.20);
}

.btn-ghost:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Desktop : hauteur réduite ── */
@media (min-width: 992px) {
  .btn-primary,
  .btn-secondary,
  .btn-ghost {
    height: 38px;
    padding: 0 16px;
    font-size: 13px;
  }
  .btn-ghost {
    padding: 0 14px;
  }
}

/* ── Spinner de bouton loading (utilisé avec .is-loading) ── */
.btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(42, 61, 39, 0.3);
  border-top-color: var(--brand-text);
  border-radius: 50%;
  animation: spin-btn 0.65s linear infinite;
  flex-shrink: 0;
}

.btn-primary.is-success .btn-spinner {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: white;
}

@keyframes spin-btn {
  to { transform: rotate(360deg); }
}

@keyframes focusPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(243, 178, 62, 0.30); }
  50%      { box-shadow: 0 0 0 5px rgba(243, 178, 62, 0.15); }
}

/* =============================================================
   FORMULAIRES SIGNATURE — Sections et champs O2TOIT
   ============================================================= */

.form-section-o2toit {
  background: var(--brand-bg-card);
  border: 1px solid var(--brand-border-light);
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--brand-shadow-sm);
  margin-bottom: 16px;
  overflow: hidden;
}

.form-section-header-o2toit {
  background: linear-gradient(180deg, #fafbfd 0%, #f5f7fa 100%);
  border-bottom: 1px solid var(--brand-border-light);
  padding: 0 20px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--brand-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-text);
  letter-spacing: 0.01em;
}

.form-section-header-o2toit i {
  font-size: 16px;
  color: var(--brand-primary);
}

.form-section-body-o2toit {
  padding: 20px;
}

/* Wrapper composite — label + input + error + hint dans un container flex */
.field-o2toit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
  position: relative; /* requis pour le bouton clear (.field-input-clear) */
}

/* ── États validation Bootstrap — .form-control.is-invalid / .is-valid ── */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--brand-danger-border) !important;
  background-color: var(--brand-danger-bg);
  background-image: none; /* supprime l'icône SVG Bootstrap */
  padding-right: 14px;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--brand-danger-border) !important;
  box-shadow: 0 0 0 3px rgba(232, 160, 160, 0.25) !important;
}

.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--brand-success-border) !important;
  background-image: none;
  padding-right: 14px;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
  border-color: var(--brand-success-border) !important;
  box-shadow: 0 0 0 3px rgba(163, 212, 179, 0.25) !important;
}

/* ── Invalid-feedback Bootstrap — remplace .field-error-o2toit ── */
.invalid-feedback {
  display: none;
  align-items: center;
  gap: 4px;
  margin-top: 0;
  width: auto;
  font-size: 12px;
  color: var(--brand-danger-text);
  font-family: var(--brand-font);
}

/* Révélation via .is-invalid sur le champ frère OU via .visible direct */
.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback,
.invalid-feedback.visible,
.was-validated .form-control:invalid ~ .invalid-feedback {
  display: flex;
}

/* ── Form-text Bootstrap — remplace .field-hint-o2toit ── */
.form-text {
  margin-top: 0;
  font-size: 12px;
  color: var(--brand-text-muted);
  font-family: var(--brand-font);
}

/* ── File upload — style propre O2TOIT sur .form-control ── */
input[type="file"].form-control {
  height: auto;
  padding: 0;
  border: 2px dashed var(--brand-border);
  background: var(--brand-bg);
  cursor: pointer;
  position: relative;
  border-radius: var(--brand-radius);
  transition: border-color 0.2s ease, background 0.2s ease;
}
input[type="file"].form-control:hover {
  border-color: var(--brand-primary);
  background: var(--brand-primary-xlight);
}
input[type="file"].form-control:focus {
  border-color: var(--brand-primary);
  background: var(--brand-primary-xlight);
  box-shadow: 0 0 0 3px rgba(243, 178, 62, 0.15);
}
/* Le bouton natif du navigateur */
input[type="file"].form-control::file-selector-button {
  height: 40px;
  padding: 0 18px;
  margin-right: 12px;
  background: var(--brand-primary);
  color: #fff;
  border: none;
  border-radius: var(--brand-radius);
  font-family: var(--brand-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
input[type="file"].form-control::file-selector-button:hover {
  background: var(--brand-primary-dark);
}
@media (min-width: 992px) {
  input[type="file"].form-control::file-selector-button {
    height: 36px;
    padding: 0 16px;
    font-size: 12.5px;
  }
}

/* Cards dans modales — variant sobre automatique */
.modal-body .form-section-o2toit,
.modal-body .card.shadow-sm {
  border: 1px solid var(--brand-border-light) !important;
  border-radius: var(--brand-radius) !important;
  box-shadow: none !important;
  background: #fbfcfe !important;
  margin-bottom: 12px !important;
}

.modal-body .form-section-header-o2toit,
.modal-body .card.shadow-sm .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--brand-border-light) !important;
  padding: 10px 14px !important;
  min-height: 36px !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-text-muted) !important;
}

.modal-body .form-section-body-o2toit,
.modal-body .card.shadow-sm .card-body {
  padding: 14px !important;
  background: transparent !important;
}

/* =============================================================
   COMPOSANT 2 — Avatar circulaire avec initiales
   ============================================================= */

.avatar-o2toit {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  border-radius:   50%;
  background:      var(--brand-primary-dark);
  color:           #ffffff;
  font-size:       13px;
  font-weight:     600;
  font-family:     var(--brand-font);
  flex-shrink:     0;
  user-select:     none;
  line-height:     1;
}

.avatar-o2toit.sm { width: 30px; height: 30px; font-size: 11px; }
.avatar-o2toit.lg { width: 56px; height: 56px; font-size: 18px; }
.avatar-o2toit.xl { width: 72px; height: 72px; font-size: 22px; }

/* 8 gradients hash-stable */
.avatar-o2toit.color-1 { background: linear-gradient(135deg, #1a6bbf 0%, #0d3f85 100%); }
.avatar-o2toit.color-2 { background: linear-gradient(135deg, #f07e1e 0%, #c2540a 100%); }
.avatar-o2toit.color-3 { background: linear-gradient(135deg, #28a745 0%, #155724 100%); }
.avatar-o2toit.color-4 { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); }
.avatar-o2toit.color-5 { background: linear-gradient(135deg, #0c6574 0%, #0a4a55 100%); }
.avatar-o2toit.color-6 { background: linear-gradient(135deg, #dc3545 0%, #921a23 100%); }
.avatar-o2toit.color-7 { background: linear-gradient(135deg, #D4922A 0%, #B5741A 100%); }
.avatar-o2toit.color-8 { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }

/* =============================================================
   COMPOSANT 3 — User cell 2-line (listings)
   ============================================================= */

.user-cell-o2toit {
  display:     flex;
  align-items: center;
  gap:         12px;
  min-width:   0;
}

.user-cell-o2toit .user-info {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  min-width:      0;
  flex:           1 1 auto;
}

.user-cell-o2toit .user-name {
  font-family:   var(--brand-font);
  font-size:     14px;
  font-weight:   600;
  color:         var(--brand-text);
  line-height:   1.3;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.user-cell-o2toit .user-sub {
  font-family:   var(--brand-font);
  font-size:     12px;
  color:         var(--brand-text-muted);
  line-height:   1.3;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.user-cell-o2toit a.user-name {
  text-decoration: none;
  transition: color 0.12s ease;
}

.user-cell-o2toit a.user-name:hover {
  color: var(--brand-primary-dark);
}

/* =============================================================
   COMPOSANT 4 — Filter pills
   ============================================================= */

.filter-pills-o2toit {
  display:       inline-flex;
  align-items:   center;
  gap:           2px;
  padding:       3px;
  background:    #f1f5f9;
  border-radius: 10px;
  flex-wrap:     wrap;
}

.filter-pill-o2toit {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       6px 12px;
  background:    transparent;
  border:        none;
  color:         var(--brand-text-muted);
  font-family:   var(--brand-font);
  font-size:     12px;
  font-weight:   600;
  border-radius: 7px;
  cursor:        pointer;
  transition:    all 0.15s ease;
  white-space:   nowrap;
  min-height:    var(--touch-target-min);
}

.filter-pill-o2toit:hover {
  color: var(--brand-text);
}

.filter-pill-o2toit.is-active {
  background: var(--brand-bg-card);
  color:      var(--brand-primary-dark);
  box-shadow:
    0 1px 2px rgba(42, 61, 39, 0.06),
    0 2px 8px rgba(42, 61, 39, 0.04);
}

.filter-pill-o2toit .pill-count {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       18px;
  height:          18px;
  padding:         0 5px;
  border-radius:   9px;
  background:      #E4E7CE;
  color:           var(--brand-text-muted);
  font-size:       10px;
  font-weight:     700;
}

.filter-pill-o2toit.is-active .pill-count {
  background: var(--brand-primary-xlight);
  color:      var(--brand-primary-darker);
}

/* =============================================================
   COMPOSANT 5 — KPI strip horizontal
   ============================================================= */

.kpi-strip-o2toit {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:                   12px;
  margin-bottom:         16px;
}

.kpi-mini-o2toit {
  position:   relative;
  padding:    14px 16px 14px 18px;
  background: var(--brand-bg-card);
  border:     1px solid var(--brand-border);
  border-radius: var(--brand-radius-lg);
  box-shadow:
    0 1px 2px rgba(42, 61, 39, 0.04),
    0 4px 16px rgba(42, 61, 39, 0.05);
  overflow:   hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi-mini-o2toit:hover {
  transform:  translateY(-1px);
  box-shadow:
    0 1px 2px rgba(42, 61, 39, 0.06),
    0 8px 22px rgba(42, 61, 39, 0.08);
}

/* Strip couleur gauche */
.kpi-mini-o2toit::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0;
  width:      3px;
  height:     100%;
  background: var(--brand-primary);
}

.kpi-mini-o2toit.kpi-success::before { background: var(--brand-success-text); }
.kpi-mini-o2toit.kpi-warning::before { background: var(--brand-primary); }
.kpi-mini-o2toit.kpi-neutral::before { background: var(--brand-text-disabled); }

.kpi-mini-o2toit .kpi-label {
  display:        block;
  font-family:    var(--brand-font);
  font-size:      10px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--brand-text-muted);
  margin-bottom:  4px;
}

.kpi-mini-o2toit .kpi-value {
  display:        block;
  font-family:    var(--brand-font);
  font-size:      24px;
  font-weight:    800;
  line-height:    1;
  color:          var(--brand-text);
  letter-spacing: -0.02em;
}

.kpi-mini-o2toit .kpi-trend {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  margin-top:  6px;
  font-family: var(--brand-font);
  font-size:   11px;
  font-weight: 500;
  color:       var(--brand-text-muted);
}

.kpi-mini-o2toit .kpi-trend.up   { color: var(--brand-success-text); }
.kpi-mini-o2toit .kpi-trend.down { color: var(--brand-danger-text); }

.kpi-mini-o2toit .kpi-icon {
  position:        absolute;
  top: 14px; right: 14px;
  width:           30px;
  height:          30px;
  border-radius:   var(--brand-radius-sm);
  background:      var(--brand-primary-xlight);
  color:           var(--brand-primary-dark);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  font-size:       15px;
}

.kpi-mini-o2toit.kpi-success .kpi-icon { background: var(--brand-success-bg); color: var(--brand-success-text); }
.kpi-mini-o2toit.kpi-warning .kpi-icon { background: var(--brand-warning-bg); color: var(--brand-warning-text); }
.kpi-mini-o2toit.kpi-neutral .kpi-icon { background: var(--brand-neutral-bg); color: var(--brand-text-muted); }

/* Sparkline SVG inline */
.kpi-mini-o2toit .kpi-sparkline {
  position:       absolute;
  bottom: 12px; right: 14px;
  width:          72px;
  height:         24px;
  opacity:        0.85;
  pointer-events: none;
}

.kpi-mini-o2toit .kpi-sparkline path {
  fill:              none;
  stroke:            var(--brand-primary);
  stroke-width:      2;
  stroke-linecap:    round;
  stroke-linejoin:   round;
}

.kpi-mini-o2toit.kpi-success .kpi-sparkline path { stroke: var(--brand-success-text); }
.kpi-mini-o2toit.kpi-warning .kpi-sparkline path { stroke: var(--brand-primary); }
.kpi-mini-o2toit.kpi-neutral .kpi-sparkline path { stroke: var(--brand-text-disabled); }

.kpi-mini-o2toit .kpi-sparkline .area {
  fill:       currentColor;
  opacity:    0.10;
  stroke:     none;
}

/* =============================================================
   COMPOSANT 6 — Search inline
   ============================================================= */

.search-inline-o2toit {
  position: relative;
  display:  flex;
  align-items: center;
  width:    100%;
  max-width: 420px;
}

.search-inline-o2toit i {
  position:       absolute;
  left:           14px;
  color:          var(--brand-text-disabled);
  font-size:      16px;
  pointer-events: none;
  z-index:        2;
}

.search-inline-o2toit input {
  width:        100%;
  height:       42px;
  padding:      0 14px 0 42px;
  border:       1px solid var(--brand-border);
  border-radius: 10px;
  background:   var(--brand-bg-card);
  font-family:  var(--brand-font);
  font-size:    13px;
  color:        var(--brand-text);
  transition:   border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  outline:      none;
}

.search-inline-o2toit input::placeholder { color: var(--brand-text-disabled); }

.search-inline-o2toit input:focus {
  border-color: var(--brand-primary);
  box-shadow:   0 0 0 3px rgba(243, 178, 62, 0.12);
}

/* =============================================================
   COMPOSANT 7 — Page title éditorial
   ============================================================= */

.page-title-o2toit {
  font-family:    var(--brand-font);
  font-size:      22px;
  font-weight:    800;
  line-height:    1.15;
  letter-spacing: -0.02em;
  color:          var(--brand-text);
  margin:         0 0 2px 0;
}

.page-subtitle-o2toit {
  font-family: var(--brand-font);
  font-size:   13px;
  color:       var(--brand-text-muted);
  margin-top:  4px;
  margin-bottom: 0;
}

@media (min-width: 992px) {
  .page-title-o2toit {
    font-size: 26px;
  }
}

/* =============================================================
   COMPOSANT 8 — Record HERO (fiche)
   ============================================================= */

.record-hero-o2toit {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  flex-wrap:       wrap;
  padding:         16px 20px;
  background:      var(--brand-bg-card);
  border:          1px solid var(--brand-border);
  border-radius:   var(--brand-radius-lg);
  box-shadow:
    0 1px 2px rgba(42, 61, 39, 0.04),
    0 4px 16px rgba(42, 61, 39, 0.06);
  margin-bottom:   14px;
  position:        relative;
  overflow:        hidden;
}

.record-hero-o2toit::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     3px;
  background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
}

.record-hero-main {
  display:     flex;
  align-items: center;
  gap:         14px;
  flex:        1 1 auto;
  min-width:   0;
}

.record-hero-info {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  min-width:      0;
  flex:           1 1 auto;
}

.record-hero-title-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-wrap:   wrap;
}

.record-hero-title {
  font-family:    var(--brand-font);
  font-size:      20px;
  font-weight:    800;
  line-height:    1.2;
  letter-spacing: -0.015em;
  color:          var(--brand-text);
  margin:         0;
}

.record-hero-fonction {
  font-family: var(--brand-font);
  font-size:   12px;
  color:       var(--brand-text-muted);
  margin:      0;
  line-height: 1.3;
}

.record-hero-meta {
  display:     flex;
  align-items: center;
  gap:         14px;
  flex-wrap:   wrap;
  margin-top:  4px;
}

.record-hero-meta .meta-item {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  font-family: var(--brand-font);
  font-size:   12px;
  color:       var(--brand-text-muted);
}

.record-hero-meta .meta-item i {
  font-size: 14px;
  color:     var(--brand-primary);
}

.record-hero-actions {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .record-hero-o2toit { padding: 14px 16px; }
  .record-hero-main { flex-direction: column; align-items: flex-start; gap: 12px; }
  .record-hero-actions { width: 100%; }
}

/* =============================================================
   COMPOSANT 8b — Record tabs (pattern boilerplate Hyper natif)
   Surcharge couleurs brand sur les nav-tabs Bootstrap/Hyper.
   ============================================================= */

.o2toit-record-tabs {
  font-family: var(--brand-font);
}

.o2toit-record-tabs .nav-link {
  font-family: var(--brand-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 18px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.o2toit-record-tabs .nav-link:hover {
  color: var(--brand-text);
  border-bottom-color: var(--brand-border);
}

.o2toit-record-tabs .nav-link.active {
  color: var(--brand-primary-dark);
  border-bottom-color: var(--brand-primary);
  background: transparent;
}

.o2toit-record-tabs .nav-link i {
  font-size: 15px;
}

.o2toit-record-body {
  border-top: none;
}

/* =============================================================
   COMPOSANT 9 — Tabs bar premium
   ============================================================= */

.tabs-o2toit {
  display:       flex;
  align-items:   center;
  gap:           2px;
  padding:       3px;
  background:    var(--brand-bg-card);
  border:        1px solid var(--brand-border);
  border-radius: 9px;
  margin-bottom: 12px;
  box-shadow:    var(--brand-shadow-sm);
  flex-wrap:     wrap;
}

.tab-o2toit {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  padding:     6px 14px;
  background:  transparent;
  border:      none;
  color:       var(--brand-text-muted);
  font-family: var(--brand-font);
  font-size:   12px;
  font-weight: 600;
  border-radius: 6px;
  cursor:      pointer;
  transition:  background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  min-height:  var(--touch-target-min);
}

.tab-o2toit:hover { color: var(--brand-text); }

.tab-o2toit i { font-size: 14px; }

.tab-o2toit.is-active {
  background: var(--brand-primary);
  color:      var(--brand-text);
  box-shadow:
    0 1px 2px rgba(212, 146, 42, 0.20),
    0 4px 10px rgba(212, 146, 42, 0.18);
}

.tab-o2toit.is-active i { color: var(--brand-text); }

.tab-o2toit .tab-count {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       18px;
  height:          18px;
  padding:         0 5px;
  border-radius:   9px;
  background:      #E4E7CE;
  color:           var(--brand-text-muted);
  font-size:       10px;
  font-weight:     700;
}

.tab-o2toit.is-active .tab-count {
  background: rgba(42, 61, 39, 0.15);
  color:      var(--brand-text);
}

/* =============================================================
   COMPOSANT 10 — Timeline activité
   ============================================================= */

.timeline-o2toit {
  position:    relative;
  padding-left: 24px;
}

.timeline-o2toit::before {
  content:    '';
  position:   absolute;
  left:       9px;
  top:        4px;
  bottom:     4px;
  width:      2px;
  background: linear-gradient(180deg, var(--brand-border) 0%, var(--brand-border) 85%, transparent 100%);
}

.timeline-o2toit .timeline-item {
  position:      relative;
  padding-bottom: 12px;
}

.timeline-o2toit .timeline-item:last-child { padding-bottom: 0; }

.timeline-o2toit .timeline-dot {
  position:      absolute;
  left:          -24px;
  top:           1px;
  width:         20px;
  height:        20px;
  border-radius: 50%;
  background:    var(--brand-bg-card);
  border:        2px solid var(--brand-primary);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--brand-primary);
  font-size:     10px;
  z-index:       2;
}

.timeline-o2toit .timeline-dot.success { border-color: var(--brand-success-text); color: var(--brand-success-text); }
.timeline-o2toit .timeline-dot.warning { border-color: var(--brand-warning-text); color: var(--brand-warning-text); }
.timeline-o2toit .timeline-dot.danger  { border-color: var(--brand-danger-text);  color: var(--brand-danger-text); }
.timeline-o2toit .timeline-dot.neutral { border-color: var(--brand-text-disabled); color: var(--brand-text-disabled); }

.timeline-o2toit .timeline-content {
  font-family: var(--brand-font);
  font-size:   13px;
  color:       var(--brand-text);
  line-height: 1.4;
}

.timeline-o2toit .timeline-action { font-weight: 600; }

.timeline-o2toit .timeline-meta {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-top:  3px;
  font-family: var(--brand-font);
  font-size:   11px;
  color:       var(--brand-text-muted);
}

.timeline-o2toit .timeline-meta i { font-size: 13px; }

/* =============================================================
   COMPOSANT 11 — Row action icons
   ============================================================= */

.row-action-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  border-radius:   var(--brand-radius-sm);
  border:          none;
  background:      transparent;
  color:           var(--brand-text-muted);
  font-size:       16px;
  cursor:          pointer;
  transition:      background-color 0.12s ease, color 0.12s ease;
  flex-shrink:     0;
}

.row-action-icon:hover {
  background: var(--brand-primary-xlight);
  color:      var(--brand-primary-dark);
}

.row-action-icon.danger:hover {
  background: var(--brand-danger-bg);
  color:      var(--brand-danger-text);
}

/* =============================================================
   BADGES — .badge + .bg-* de Bootstrap héritent du brand O2TOIT
   Écrire simplement class="badge bg-success" → teinte vert O2TOIT.
   ============================================================= */

/* Base .badge — typographie, padding, radius pill */
.badge {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  padding:         4px 10px;
  border-radius:   var(--brand-radius-pill);
  font-family:     var(--brand-font);
  font-size:       11px;
  font-weight:     600;
  letter-spacing:  0.02em;
  line-height:     1;
  white-space:     nowrap;
  border:          1px solid transparent;
}

/* Variantes sémantiques — surcharge des .bg-* Bootstrap (couleurs brand) */
.badge.bg-primary,
.badge.text-bg-primary    { background-color: var(--brand-primary) !important;         color: var(--brand-text) !important;              border-color: var(--brand-primary-dark); }
.badge.bg-success,
.badge.text-bg-success    { background-color: var(--brand-success-bg) !important;      color: var(--brand-success-text) !important;      border-color: var(--brand-success-border); }
.badge.bg-warning,
.badge.text-bg-warning    { background-color: var(--brand-warning-bg) !important;      color: var(--brand-warning-text) !important;      border-color: var(--brand-warning-border); }
.badge.bg-danger,
.badge.text-bg-danger     { background-color: var(--brand-danger-bg) !important;       color: var(--brand-danger-text) !important;       border-color: var(--brand-danger-border); }
.badge.bg-info,
.badge.text-bg-info       { background-color: var(--brand-info-bg) !important;         color: var(--brand-info-text) !important;         border-color: var(--brand-info-border); }
.badge.bg-secondary,
.badge.text-bg-secondary  { background-color: var(--brand-secondary-xlight) !important; color: var(--brand-secondary-darker) !important; border-color: var(--brand-secondary); }
.badge.bg-neutral,
.badge.text-bg-neutral    { background-color: var(--brand-neutral-bg) !important;      color: var(--brand-neutral-text) !important;      border-color: var(--brand-neutral-border); }

/* Dot indicator dans un badge */
.badge-dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    currentColor;
  flex-shrink:   0;
}

/* =============================================================
   TABLES — .table Bootstrap hérite du look listing premium O2TOIT
   Écrire simplement class="table" → styling listing complet.
   ============================================================= */

/* Wrapper — carte blanche avec radius et shadow (Bootstrap .table-responsive) */
.table-responsive {
  background:    var(--brand-bg-card);
  border:        1px solid var(--brand-border);
  border-radius: var(--brand-radius-lg);
  box-shadow:
    0 1px 2px rgba(42, 61, 39, 0.03),
    0 4px 16px rgba(42, 61, 39, 0.05);
  overflow:      hidden;
}

/* Table base */
.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--brand-border-light);
  --bs-table-hover-bg: var(--brand-secondary-xlight);
  width:           100%;
  border-collapse: separate;
  border-spacing:  0;
  margin-bottom:   0;
  font-family:     var(--brand-font);
  font-size:       var(--text-sm);
  color:           var(--brand-text);
}

.table thead th {
  padding:        0 16px;
  height:         40px;
  text-align:     left;
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--brand-text-muted);
  background:     var(--brand-bg);
  border-bottom:  1px solid var(--brand-border);
  white-space:    nowrap;
  cursor:         default;
  user-select:    none;
  vertical-align: middle;
}

.table thead th.sortable {
  cursor: pointer;
}

.table thead th.sortable:hover {
  color:       var(--brand-text);
  background:  var(--brand-secondary-xlight);
}

.table thead th .sort-icon {
  display:     inline-block;
  margin-left: 4px;
  color:       var(--brand-text-disabled);
  font-style:  normal;
  transition:  color 0.12s ease;
}

.table thead th.sort-asc .sort-icon,
.table thead th.sort-desc .sort-icon {
  color: var(--brand-primary);
}

.table tbody tr {
  border-bottom: 1px solid var(--brand-border-light);
  transition:    background-color 0.10s ease;
}

.table tbody tr:last-child { border-bottom: none; }

.table tbody tr:hover {
  background: var(--brand-secondary-xlight); /* row hover O2TOIT — pas gris Bootstrap */
}

.table tbody tr.selected {
  background:  var(--brand-primary-xlight);
  border-left: 3px solid var(--brand-primary);
}

.table tbody td {
  padding:        0 16px;
  height:         52px;
  vertical-align: middle;
  color:          var(--brand-text);
}

/* Actions visibles au hover */
.table tbody tr .table-actions {
  opacity:    0;
  transition: opacity 0.12s ease;
}

.table tbody tr:hover .table-actions {
  opacity: 1;
}

/* Colonnes masquées sur mobile */
@media (max-width: 767px) {
  .col-hide-mobile { display: none; }
}

/* =============================================================
   LISTING TOOLBAR
   ============================================================= */

.listing-toolbar {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             12px;
  margin-bottom:   16px;
}

.listing-toolbar-title {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.listing-toolbar-actions {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
}

/* =============================================================
   EMPTY STATE O2TOIT
   ============================================================= */

.empty-state-o2toit {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  padding:        56px 24px;
  text-align:     center;
  gap:            12px;
}

.empty-state-o2toit .empty-icon {
  width:           56px;
  height:          56px;
  border-radius:   50%;
  background:      var(--brand-primary-xlight);
  color:           var(--brand-primary);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  font-size:       26px;
  margin-bottom:   4px;
}

.empty-state-o2toit .empty-title {
  font-family: var(--brand-font);
  font-size:   16px;
  font-weight: 600;
  color:       var(--brand-text);
  margin:      0;
}

.empty-state-o2toit .empty-desc {
  font-family: var(--brand-font);
  font-size:   14px;
  color:       var(--brand-text-muted);
  margin:      0;
  max-width:   360px;
  line-height: 1.5;
}

/* =============================================================
   LAYOUT MOBILE (< 992px) — contenu pleine largeur + topbar
   ============================================================= */

@media (max-width: 991.98px) {
  /* Content sans margin sidebar — padding bas pour dégager le FAB flottant */
  .content-page {
    margin-left:    0 !important;
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  /* Topbar pleine largeur sur mobile — compense le padding du parent */
  .navbar-custom {
    margin-left:  -12px !important;
    margin-right: -12px !important;
    width:        calc(100% + 24px) !important;
  }
}

/* =============================================================
   CARTE MOBILE — listing clients/prospects
   ============================================================= */

.card-mobile-o2toit {
  background:    var(--brand-bg-card);
  border:        1px solid var(--brand-border-light);
  border-radius: var(--brand-radius-lg);
  box-shadow:    var(--brand-shadow-sm);
  padding:       14px 16px;
  min-height:    72px;
  display:       flex;
  align-items:   center;
  gap:           12px;
  text-decoration: none;
  color:         inherit;
  transition:    all 0.10s ease;
  -webkit-tap-highlight-color: transparent;
  cursor:        pointer;
  margin-bottom: 8px;
}

.card-mobile-o2toit:active {
  background:  var(--brand-primary-xlight);
  border-color: var(--brand-primary-light);
  transform:   scale(0.99);
}

.card-mobile-o2toit .card-mobile-content {
  flex:    1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap:     3px;
}

.card-mobile-o2toit .card-mobile-main {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         8px;
}

.card-mobile-o2toit .card-mobile-name {
  font-family: var(--brand-font);
  font-size:   15px;
  font-weight: 600;
  color:       var(--brand-text);
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-mobile-o2toit .card-mobile-sub {
  font-family: var(--brand-font);
  font-size:   13px;
  color:       var(--brand-text-muted);
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-mobile-o2toit .card-mobile-meta {
  font-family: var(--brand-font);
  font-size:   11px;
  color:       var(--brand-text-disabled);
}

.card-mobile-o2toit .card-mobile-chevron {
  font-size:  16px;
  color:      var(--brand-text-disabled);
  flex-shrink: 0;
}

/* =============================================================
   SKELETON LOADING O2TOIT
   ============================================================= */

@keyframes skeleton-shimmer-o2toit {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton-o2toit {
  background: linear-gradient(
    90deg,
    var(--brand-border-light) 25%,
    #e6e2d8 50%,
    var(--brand-border-light) 75%
  );
  background-size: 800px 100%;
  animation:       skeleton-shimmer-o2toit 1.5s infinite linear;
  border-radius:   var(--brand-radius-sm);
}

.skeleton-o2toit.text  { height: 14px; border-radius: 4px; }
.skeleton-o2toit.title { height: 20px; border-radius: 4px; }
.skeleton-o2toit.avatar { border-radius: 50%; }

/* =============================================================
   MODAL O2TOIT
   ============================================================= */

.modal-content {
  border:        1px solid var(--brand-border-light);
  border-radius: var(--brand-radius-xl);
  box-shadow:
    0 10px 40px rgba(42, 61, 39, 0.18),
    0 20px 60px rgba(42, 61, 39, 0.08);
  font-family:   var(--brand-font);
}

.modal-header {
  background:    linear-gradient(180deg, #fafbfd 0%, #f6f8fb 100%);
  border-bottom: 1px solid var(--brand-border-light);
  padding:       0 20px;
  min-height:    56px;
  display:       flex;
  align-items:   center;
  border-radius: var(--brand-radius-xl) var(--brand-radius-xl) 0 0;
}

.modal-title {
  font-family:  var(--brand-font);
  font-size:    var(--text-md);
  font-weight:  700;
  color:        var(--brand-text);
  letter-spacing: -0.01em;
}

.modal-footer {
  border-top:    1px solid var(--brand-border-light);
  padding:       12px 20px;
  border-radius: 0 0 var(--brand-radius-xl) var(--brand-radius-xl);
}

/* =============================================================
   ALERTES SÉMANTIQUES O2TOIT
   ============================================================= */

.alert {
  font-family:   var(--brand-font);
  border-radius: var(--brand-radius);
  border:        1px solid transparent;
}

.alert-success {
  background-color: var(--brand-success-bg);
  border-color:     var(--brand-success-border);
  color:            var(--brand-success-text);
}

.alert-warning {
  background-color: var(--brand-warning-bg);
  border-color:     var(--brand-warning-border);
  color:            var(--brand-warning-text);
}

.alert-danger {
  background-color: var(--brand-danger-bg);
  border-color:     var(--brand-danger-border);
  color:            var(--brand-danger-text);
}

.alert-info {
  background-color: var(--brand-info-bg);
  border-color:     var(--brand-info-border);
  color:            var(--brand-info-text);
}

/* =============================================================
   PIPELINE COMMERCIAL — statuts visuels
   ============================================================= */

/* Accent de couleur gauche sur cartes RDV */
.card-rdv-confirme  { border-left: 3px solid var(--brand-success-text) !important; }
.card-rdv-attente   { border-left: 3px solid var(--brand-primary) !important; }
.card-rdv-annule    { border-left: 3px solid var(--brand-neutral-border) !important; }

/* =============================================================
   UTILITAIRES DIVERS
   ============================================================= */

/* Référence contrat — tabular nums */
.ref-o2toit {
  font-variant-numeric: tabular-nums;
  font-weight:          600;
  font-size:            12px;
  background:           var(--brand-bg);
  border-radius:        var(--brand-radius-sm);
  padding:              3px 8px;
  color:                var(--brand-text);
  border:               1px solid var(--brand-border-light);
  display:              inline-block;
}

/* Separateur léger */
.separator-o2toit {
  height:     1px;
  background: var(--brand-border-light);
  margin:     16px 0;
  border:     none;
}

/* Container standard ERP */
.container-fluid {
  padding-left:  var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 992px) {
  .container-fluid {
    padding-left:  var(--space-6);
    padding-right: var(--space-6);
  }
}

/* Padding vertical standard */
.py-erp {
  padding-top:    var(--space-5);
  padding-bottom: var(--space-5);
}

/* =============================================================
   FIX HYPER OBLIGATOIRE 6 — Cache-buster note
   Dans base.php, utiliser :
   <link id="app-style" rel="stylesheet"
         href="assets/css/custom-brand-theme.css?v=<?= @filemtime(...) ?: time() ?>">
   id="app-style" NON NÉGOCIABLE — crash JS Hyper si absent
   ============================================================= */

/* =============================================================
   ALIAS am2s → o2toit
   La classe Listing.php (partagée) génère des classes .table-am2s-*
   et .row-action-icon avec le préfixe am2s (boilerplate Evode).
   Ces alias font correspondre les tokens am2s aux styles o2toit.
   NE PAS modifier la classe Listing.php partagée — alias CSS uniquement.
   ============================================================= */

/* Compteur de lignes (au-dessus du tableau) */
.listing-count { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; margin-bottom: 10px; background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: var(--brand-radius); font-family: var(--brand-font); font-size: 12px; color: var(--brand-text-muted); letter-spacing: 0.02em; }
.listing-count i { font-size: 14px; color: var(--brand-primary); opacity: 0.85; }
.listing-count strong { color: var(--brand-text); font-weight: 600; }

/* Wrapper table */
.table-am2s-wrapper { background: var(--brand-bg-card); border: 1px solid var(--brand-border); border-radius: var(--brand-radius-lg); overflow-x: auto; overflow-y: hidden; box-shadow: var(--brand-shadow-sm); }

/* Table */
.table-am2s { width: 100%; border-collapse: collapse; font-family: var(--brand-font); font-size: 14px; color: var(--brand-text); }
.table-am2s thead th { padding: 10px 14px; background: var(--brand-bg); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-text-muted); border-bottom: 1px solid var(--brand-border); white-space: nowrap; }
.table-am2s thead th.sortable { cursor: pointer; }
.table-am2s thead th.sortable:hover { color: var(--brand-primary-dark); }
.table-am2s thead th .sort-icon { display: inline-block; margin-left: 4px; font-size: 12px; opacity: 0.4; }
.table-am2s thead th.sort-asc .sort-icon,
.table-am2s thead th.sort-desc .sort-icon { opacity: 1; color: var(--brand-primary); }
.table-am2s tbody tr { border-bottom: 1px solid var(--brand-border-light); transition: background 0.12s ease; }
.table-am2s tbody tr:last-child { border-bottom: none; }
.table-am2s tbody tr:hover { background: var(--brand-secondary-xlight, #F2F4E6); }
.table-am2s tbody td { padding: 12px 14px; vertical-align: middle; }

/* Row actions — révélées au hover de la ligne */
.table-am2s tbody tr .table-actions { display: flex; flex-direction: column; gap: 2px; opacity: 0; transition: opacity 0.15s ease; }
.table-am2s tbody tr:hover .table-actions { opacity: 1; }

/* Empty state */
.table-am2s-empty { text-align: center; padding: 48px 24px; color: var(--brand-text-muted); }
.table-am2s-empty .empty-icon { font-size: 36px; color: var(--brand-border); margin-bottom: 12px; }
.table-am2s-empty .empty-title { font-size: 15px; font-weight: 700; color: var(--brand-text); margin-bottom: 6px; }
.table-am2s-empty .empty-desc { font-size: 13px; }

/* table-row-actions — conteneur horizontal des boutons d'action */
.table-row-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; flex-wrap: nowrap; }

/* row-action-icon — icônes d'action dans les lignes de tableau */
.row-action-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; border-radius: 6px; cursor: pointer; color: var(--brand-text-muted); font-size: 15px; transition: background 0.12s, color 0.12s; padding: 0; }
.row-action-icon:hover { background: var(--brand-primary-xlight); color: var(--brand-primary-dark); }
.row-action-icon.danger:hover { background: #FFF0F0; color: #8B2020; }

/* table-actions-cell — colonne Actions sticky-right
   La colonne Actions des listings (rendue par class/Listing.php quand
   $rowActions est non vide) reste collée au bord droit du wrapper
   scrollable. Quand le tableau dépasse en largeur (laptops 1024-1366,
   fenêtres redimensionnées), le bouton « Modifier » reste donc toujours
   visible sans avoir à scroller horizontalement. Quand le tableau tient
   dans le wrapper, sticky est sans effet (pas de scroll → pas de
   décollement). Le bg matche le bg du tbody/thead pour overlay propre
   sur le contenu qui défile dessous, et la box-shadow gauche signale
   visuellement la frontière de la zone sticky. */
.table-am2s .table-actions-cell {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--brand-bg-card);
  box-shadow: -6px 0 8px -4px rgba(0, 0, 0, 0.06);
}
.table-am2s thead .table-actions-cell { background: var(--brand-bg); }
.table-am2s tbody tr:hover .table-actions-cell { background: var(--brand-secondary-xlight, #F2F4E6); }

/* =============================================================
   RESPONSIVE — Listings (.table-am2s) en mode carte sur mobile
   Convertit chaque ligne du listing en vignette empilée verticalement
   sous 768px. Les colonnes .col-hide-mobile restent masquées (RMOB-01) ;
   la colonne identité prend une ligne complète, le statut + actions
   passent dessous. Boutons toujours visibles, touch targets 40px.
   Universel : s'applique à tout listing rendu par class/Listing.php.
   ============================================================= */
@media (max-width: 767px) {
  .table-am2s-wrapper {
    background:    transparent;
    border:        none;
    border-radius: 0;
    box-shadow:    none;
    overflow:      visible;
  }

  .table-am2s,
  .table-am2s tbody,
  .table-am2s tr,
  .table-am2s td {
    display: block;
    width:   100%;
  }

  .table-am2s thead { display: none; }
  /* RMOB-01 — colonnes secondaires masquées même en mode carte
     (re-spécifié ici car .table-am2s tbody td a une spécificité supérieure
     à .col-hide-mobile et écraserait sinon le display:none global) */
  .table-am2s tbody td.col-hide-mobile,
  .table-am2s thead th.col-hide-mobile { display: none; }

  .table-am2s tbody tr {
    display:        flex;
    flex-wrap:      wrap;
    align-items:    center;
    gap:            8px 10px;
    background:     var(--brand-bg-card);
    border:         1px solid var(--brand-border);
    border-radius:  var(--brand-radius);
    padding:        12px 14px;
    margin-bottom:  10px;
    box-shadow:     var(--brand-shadow-sm);
  }
  .table-am2s tbody tr:last-child { margin-bottom: 0; }
  .table-am2s tbody tr:hover {
    background: var(--brand-bg-card);
    box-shadow: 0 2px 8px rgba(42, 61, 39, 0.08);
  }

  .table-am2s tbody td {
    padding:   0;
    border:    none;
    width:     auto;
    flex:      0 0 auto;
    min-width: 0;
  }
  /* 1ère colonne (identité user-cell ou équivalent) — ligne pleine */
  .table-am2s tbody tr > td:first-child {
    flex:      1 1 100%;
    min-width: 0;
  }
  /* Dernière colonne (actions) — alignée à droite, toujours visible */
  .table-am2s tbody tr > td:last-child {
    margin-left:  auto;
    text-align:   right !important;
  }
  /* Neutralise le sticky-right : en mode card, la cellule actions est en
     `display: block` dans le flux flex, plus dans une rangée scrollable.
     Sticky n'a plus de sens et le shadow gauche serait visuellement faux. */
  .table-am2s .table-actions-cell {
    position:   static;
    background: transparent;
    box-shadow: none;
  }

  .table-am2s .table-row-actions {
    opacity:         1;
    justify-content: flex-end;
    gap:             6px;
  }
  /* Touch targets agrandis (>= 40px, recommandation WCAG) */
  .table-am2s .row-action-icon {
    width:      40px;
    height:     40px;
    border:     1px solid var(--brand-border);
    background: var(--brand-bg);
    color:      var(--brand-text);
    font-size:  18px;
  }
  .table-am2s .row-action-icon:hover,
  .table-am2s .row-action-icon:active,
  .table-am2s .row-action-icon:focus-visible {
    background: var(--brand-primary-xlight);
    color:      var(--brand-primary-dark);
  }

  /* Empty state — la ligne placeholder ne doit pas hériter de l'effet carte */
  .table-am2s tbody tr:has(> td > .empty-state-am2s),
  .table-am2s tbody tr:has(> td > .table-am2s-empty) {
    background:    transparent;
    border:        none;
    box-shadow:    none;
    padding:       0;
    margin-bottom: 0;
    display:       block;
  }
  .table-am2s tbody tr:has(> td > .empty-state-am2s) > td,
  .table-am2s tbody tr:has(> td > .table-am2s-empty) > td {
    margin-left: 0;
    text-align:  center !important;
  }
}

/* =============================================================
   VISUAL POLISH — Entrance animations & micro-interactions
   ============================================================= */

/* ─── Fade-in-up entrance animation ─── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmerSlide {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Staggered entrance for page content */
.content-zone-animated > * {
  animation: fadeInUp 0.4s var(--ease-out) both;
}
.content-zone-animated > *:nth-child(1) { animation-delay: 0ms; }
.content-zone-animated > *:nth-child(2) { animation-delay: 60ms; }
.content-zone-animated > *:nth-child(3) { animation-delay: 120ms; }
.content-zone-animated > *:nth-child(4) { animation-delay: 180ms; }
.content-zone-animated > *:nth-child(5) { animation-delay: 240ms; }

/* ─── Welcome / Greeting card (accueil) ─── */
.welcome-card-o2toit {
  position: relative;
  padding: 28px 28px 24px;
  background: linear-gradient(135deg, #2A3D27 0%, #3B5235 40%, #4A6340 100%);
  border-radius: var(--brand-radius-xl);
  color: #FFFFFF;
  overflow: hidden;
  margin-bottom: 20px;
  animation: scaleIn 0.45s var(--ease-out) both;
}

/* Decorative golden circle */
.welcome-card-o2toit::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -30px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243,178,62,0.20) 0%, rgba(243,178,62,0) 70%);
  pointer-events: none;
}

/* Secondary circle */
.welcome-card-o2toit::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(202,207,157,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.welcome-card-o2toit .welcome-greeting {
  font-family: var(--brand-font);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.welcome-card-o2toit .welcome-name {
  font-family: var(--brand-font-heading);
  font-size: 26px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.welcome-card-o2toit .welcome-name span {
  color: var(--brand-primary);
}

.welcome-card-o2toit .welcome-subtitle {
  font-family: var(--brand-font);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  max-width: 420px;
}

.welcome-card-o2toit .welcome-date {
  position: absolute;
  top: 28px;
  right: 28px;
  font-family: var(--brand-font);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  display: flex;
  align-items: center;
  gap: 6px;
}

.welcome-card-o2toit .welcome-date i {
  font-size: 14px;
  color: var(--brand-primary);
}

@media (max-width: 767px) {
  .welcome-card-o2toit {
    padding: 20px 18px;
  }
  .welcome-card-o2toit .welcome-name {
    font-size: 22px;
  }
  .welcome-card-o2toit .welcome-date {
    position: static;
    margin-top: 12px;
  }
}

/* ─── KPI strip (accueil variant — larger with icon) ─── */
.kpi-strip-o2toit .kpi-strip-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--brand-bg-card);
  border: 1px solid var(--brand-border-light);
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--brand-shadow-sm);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s ease;
  animation: fadeInUp 0.4s var(--ease-out) both;
}

.kpi-strip-o2toit .kpi-strip-item:nth-child(1) { animation-delay: 100ms; }
.kpi-strip-o2toit .kpi-strip-item:nth-child(2) { animation-delay: 160ms; }
.kpi-strip-o2toit .kpi-strip-item:nth-child(3) { animation-delay: 220ms; }
.kpi-strip-o2toit .kpi-strip-item:nth-child(4) { animation-delay: 280ms; }

.kpi-strip-o2toit .kpi-strip-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--brand-shadow-md);
}

.kpi-strip-o2toit .kpi-strip-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--brand-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.kpi-strip-o2toit .kpi-strip-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.kpi-strip-o2toit .kpi-strip-value {
  font-family: var(--brand-font);
  font-size: 26px;
  font-weight: 800;
  color: var(--brand-text);
  line-height: 1;
  letter-spacing: -0.02em;
  animation: countUp 0.5s var(--ease-out) both;
  animation-delay: inherit;
}

.kpi-strip-o2toit .kpi-strip-label {
  font-family: var(--brand-font);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-text-muted);
}

/* ─── Quick access card (accueil) ─── */
.card-o2toit {
  background: var(--brand-bg-card);
  border: 1px solid var(--brand-border-light);
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--brand-shadow-sm);
  overflow: hidden;
  transition: all 0.2s var(--ease-out);
  position: relative;
}

.card-o2toit::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.card-o2toit:hover {
  transform: translateY(-3px);
  box-shadow: var(--brand-shadow-md);
  border-color: var(--brand-primary-light);
}

.card-o2toit:hover::before {
  opacity: 1;
}

.card-o2toit-header {
  padding: 16px 20px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-o2toit-header .card-icon-o2toit {
  width: 40px;
  height: 40px;
  border-radius: var(--brand-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.card-o2toit-body {
  padding: 12px 20px 18px;
}

/* ─── Page title (accueil variant with icon) ─── */
.page-title-o2toit .page-title-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.page-title-o2toit .page-title-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--brand-radius);
  background: var(--brand-primary-xlight);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.page-title-o2toit .page-title-h1 {
  font-family: var(--brand-font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--brand-text);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.page-title-o2toit .page-title-breadcrumb {
  font-size: 13px;
  color: var(--brand-text-muted);
  margin-top: 2px;
}

@media (min-width: 992px) {
  .page-title-o2toit .page-title-h1 {
    font-size: 26px;
  }
}

/* ─── Enhanced table row hover with left accent ─── */
.table-am2s tbody tr:hover {
  background: var(--brand-primary-xlight);
}

/* ─── Scrollbar brand ─── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--brand-border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-text-disabled);
}

/* ─── Sidebar active item glow ─── */
.side-nav .menuitem-active > .side-nav-link i {
  color: var(--brand-primary) !important;
  filter: drop-shadow(0 0 4px rgba(243, 178, 62, 0.35));
}

/* ─── Topbar brand accent line ─── */
.navbar-custom::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--brand-primary) 0%,
    var(--brand-primary-light) 50%,
    var(--brand-secondary) 100%
  );
}

/* ─── Card hover lift (global subtle) ─── */
.card {
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s ease;
}

/* ─── Toast notification animation ─── */
@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* =============================================================
   COMPOSANT — Data field (label + value pair for fiches)
   Remplace les inline styles répétitifs dans les pages de détail
   ============================================================= */

.data-field-o2toit {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.data-field-o2toit .data-label {
  font-family: var(--brand-font);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-text-muted);
  line-height: 1.3;
}

.data-field-o2toit .data-value {
  font-family: var(--brand-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-text);
  line-height: 1.4;
}

.data-field-o2toit .data-value.is-empty {
  color: var(--brand-text-disabled);
}

/* ─── Detail card — reusable card pattern for fiches ─── */
.detail-card-o2toit {
  background: var(--brand-bg-card);
  border: 1px solid var(--brand-border-light);
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--brand-shadow-sm);
  overflow: hidden;
  margin-bottom: 16px;
  transition: box-shadow 0.2s ease;
}

.detail-card-o2toit:hover {
  box-shadow: var(--brand-shadow);
}

.detail-card-o2toit .detail-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  min-height: 46px;
  background: linear-gradient(180deg, #fafbfd 0%, #f6f8fb 100%);
  border-bottom: 1px solid var(--brand-border-light);
}

.detail-card-o2toit .detail-card-header .detail-card-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--brand-radius-sm);
  background: var(--brand-primary-xlight);
  color: var(--brand-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.detail-card-o2toit .detail-card-header h2,
.detail-card-o2toit .detail-card-header h3 {
  font-family: var(--brand-font);
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-text);
  margin: 0;
  letter-spacing: 0.01em;
}

.detail-card-o2toit .detail-card-body {
  padding: 18px 20px;
}

/* ─── Contact row — clickable tel/email in sidebar ─── */
.contact-row-o2toit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--brand-border-light);
}

.contact-row-o2toit:last-child {
  border-bottom: none;
}

.contact-row-o2toit .contact-label {
  font-family: var(--brand-font);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-text-muted);
  min-width: 72px;
  flex-shrink: 0;
}

.contact-row-o2toit .contact-value {
  font-family: var(--brand-font);
  font-size: 13px;
  color: var(--brand-text);
  text-align: right;
  min-width: 0;
  word-break: break-all;
}

.contact-row-o2toit .contact-value a {
  color: var(--brand-primary-dark);
  text-decoration: none;
  transition: color 0.15s ease;
}

.contact-row-o2toit .contact-value a:hover {
  color: var(--brand-primary-darker);
}

.contact-row-o2toit .contact-value .is-empty {
  color: var(--brand-text-disabled);
}

/* ─── Quick action buttons (tel, email, sms) ─── */
.quick-actions-o2toit {
  display: flex;
  gap: 8px;
  padding: 12px 0 4px;
}

.quick-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 8px 10px;
  min-height: 40px;
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius);
  font-family: var(--brand-font);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-text-muted);
  cursor: pointer;
  transition: all 0.15s var(--ease-out);
  text-decoration: none;
}

.quick-action-btn i {
  font-size: 16px;
}

.quick-action-btn:hover {
  background: var(--brand-primary-xlight);
  border-color: var(--brand-primary-light);
  color: var(--brand-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--brand-shadow-sm);
}

.quick-action-btn.qa-call {
  color: var(--brand-success-text);
}
.quick-action-btn.qa-call:hover {
  background: var(--brand-success-bg);
  border-color: var(--brand-success-border);
  color: var(--brand-success-text);
}

.quick-action-btn.qa-email {
  color: var(--brand-info-text);
}
.quick-action-btn.qa-email:hover {
  background: var(--brand-info-bg);
  border-color: var(--brand-info-border);
  color: var(--brand-info-text);
}

/* ─── Record hero enhanced — with gradient strip ─── */
.record-hero-o2toit .hero-gradient-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--brand-primary) 0%,
    var(--brand-primary-light) 40%,
    var(--brand-secondary) 100%
  );
}

/* ─── Breadcrumb enhanced ─── */
.breadcrumb-o2toit {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  font-family: var(--brand-font);
  font-size: 13px;
}

.breadcrumb-o2toit li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb-o2toit li + li::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-border);
  flex-shrink: 0;
}

.breadcrumb-o2toit a {
  color: var(--brand-primary-dark);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

.breadcrumb-o2toit a:hover {
  color: var(--brand-primary-darker);
}

.breadcrumb-o2toit .breadcrumb-current {
  color: var(--brand-text-muted);
  font-weight: 500;
}

/* ─── Sidebar info row (vertical label-value for sidebar) ─── */
.info-row-o2toit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--brand-border-light);
}

.info-row-o2toit:last-child {
  border-bottom: none;
}

.info-row-o2toit .info-label {
  font-family: var(--brand-font);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-text-muted);
  flex-shrink: 0;
}

.info-row-o2toit .info-value {
  font-family: var(--brand-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-text);
  text-align: right;
  min-width: 0;
}

.info-row-o2toit .info-value.is-empty {
  color: var(--brand-text-disabled);
}

.info-row-o2toit .info-value.is-danger {
  color: var(--brand-danger-text);
}

/* ─── Form sticky footer bar ─── */
.form-footer-o2toit {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--brand-bg-card);
  border-top: 1px solid var(--brand-border-light);
  border-radius: 0 0 var(--brand-radius-lg) var(--brand-radius-lg);
  padding: 14px 20px;
  margin: 16px -16px -16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  box-shadow: 0 -4px 16px rgba(42, 61, 39, 0.06);
}

@media (max-width: 767px) {
  .form-footer-o2toit {
    margin: 16px -12px -12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
}

/* ─── Empty state enhanced ─── */
.empty-state-hero-o2toit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 14px;
}

.empty-state-hero-o2toit .empty-icon-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary-xlight) 0%, var(--brand-secondary-xlight) 100%);
  border: 2px solid var(--brand-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--brand-primary-dark);
  animation: scaleIn 0.4s var(--ease-out) both;
}

.empty-state-hero-o2toit .empty-title {
  font-family: var(--brand-font);
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-text);
  margin: 0;
}

.empty-state-hero-o2toit .empty-desc {
  font-family: var(--brand-font);
  font-size: 14px;
  color: var(--brand-text-muted);
  margin: 0;
  max-width: 320px;
  line-height: 1.5;
}

/* ─── Stagger deeper — up to 8 children ─── */
.content-zone-animated > *:nth-child(6) { animation-delay: 300ms; }
.content-zone-animated > *:nth-child(7) { animation-delay: 360ms; }
.content-zone-animated > *:nth-child(8) { animation-delay: 420ms; }

/* =============================================================
   DROPZONE INLINE — upload de fichiers depuis la fiche synthèse
   Utilisé : carte Pièces du dossier, carte Signature contrat
   ============================================================= */

/* Conteneur dropzone */
.dropzone-o2toit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 12px;
  border: 2px dashed var(--brand-border);
  border-radius: var(--brand-radius);
  background: var(--brand-bg);
  cursor: pointer;
  transition: border-color 0.18s var(--ease-out),
              background 0.18s var(--ease-out),
              box-shadow 0.18s var(--ease-out);
  text-align: center;
  position: relative;
  min-height: 80px;
}

/* Input file caché dans le dropzone */
.dropzone-o2toit input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Icône */
.dropzone-o2toit .dz-icon {
  font-size: 22px;
  color: var(--brand-text-disabled);
  transition: color 0.15s;
  pointer-events: none;
}

/* Texte principal */
.dropzone-o2toit .dz-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-text-muted);
  transition: color 0.15s;
  pointer-events: none;
}

/* Texte secondaire (formats acceptés) */
.dropzone-o2toit .dz-hint {
  font-size: 11px;
  color: var(--brand-text-disabled);
  pointer-events: none;
}

/* État hover / dragover */
.dropzone-o2toit:hover,
.dropzone-o2toit.is-dragover {
  border-color: var(--brand-primary);
  background: var(--brand-primary-xlight);
  box-shadow: 0 0 0 3px rgba(243, 178, 62, 0.15);
}

.dropzone-o2toit:hover .dz-icon,
.dropzone-o2toit.is-dragover .dz-icon {
  color: var(--brand-primary-dark);
}

.dropzone-o2toit:hover .dz-label,
.dropzone-o2toit.is-dragover .dz-label {
  color: var(--brand-primary-darker);
}

/* État uploading */
.dropzone-o2toit.is-uploading {
  border-color: var(--brand-primary-light);
  background: var(--brand-primary-xlight);
  pointer-events: none;
  cursor: default;
}

.dropzone-o2toit.is-uploading input[type="file"] {
  pointer-events: none;
}

/* État erreur */
.dropzone-o2toit.is-error {
  border-color: var(--brand-danger-border);
  background: var(--brand-danger-bg);
}

.dropzone-o2toit.is-error .dz-icon {
  color: var(--brand-danger-text);
}

/* Barre de progression sous le dropzone */
.dropzone-progress-o2toit {
  height: 3px;
  background: var(--brand-border-light);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
  display: none;
}

.dropzone-progress-o2toit.is-visible {
  display: block;
}

.dropzone-progress-bar-o2toit {
  height: 100%;
  width: 0%;
  background: var(--brand-primary);
  border-radius: 2px;
  transition: width 0.2s linear;
}

/* Spinner inline léger pour l'état uploading */
@keyframes spin-dz {
  to { transform: rotate(360deg); }
}

.dropzone-spinner-o2toit {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--brand-primary-light);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: spin-dz 0.6s linear infinite;
  flex-shrink: 0;
}

/* =============================================================
   CARTE PIÈCES DU DOSSIER — liste interactive dans la sidebar
   Remplace le simple blocPiecesObligatoires statique
   ============================================================= */

/* Wrapper de la carte pièces avec recharge AJAX */
#bloc-pieces-dossier {
  /* Pas de règles ici — délégué au .detail-card-o2toit */
}

/* ─── Sous-sections dans la carte Pièces & Documents ─── */
.doc-section-o2toit {
  padding: 14px 0;
  border-bottom: 1px solid var(--brand-border-light);
}

.doc-section-o2toit:first-child {
  padding-top: 8px;
}

.doc-section-title-o2toit {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--brand-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-text-muted);
  margin-bottom: 12px;
}

.doc-section-title-o2toit i {
  font-size: 14px;
  color: var(--brand-primary);
}

/* Résumé barre de progression dossier */
.pieces-progress-o2toit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--brand-secondary-xlight);
  border-radius: var(--brand-radius);
  margin-bottom: 12px;
}

.pieces-progress-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--brand-border);
  border-radius: 3px;
  overflow: hidden;
}

.pieces-progress-bar-fill {
  height: 100%;
  background: var(--brand-primary);
  border-radius: 3px;
  transition: width 0.4s var(--ease-out);
}

.pieces-progress-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-text-muted);
  white-space: nowrap;
}

/* Item de pièce individuelle */
.piece-item-o2toit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--brand-border-light);
}

.piece-item-o2toit:last-child {
  border-bottom: none;
}

/* Icône statut pièce */
.piece-status-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

/* Infos pièce (nom + doc lié) */
.piece-info {
  flex: 1;
  min-width: 0;
}

.piece-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.piece-doc-name {
  font-size: 11px;
  color: var(--brand-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* Actions pièce (download, replace, delete) */
.piece-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* Dropzone compacte dans la liste pièces (si manquante) */
.piece-dropzone-compact {
  margin-top: 6px;
}

/* =============================================================
   CARTE SIGNATURE — extension dropzone scan contrat
   ============================================================= */

/* Zone upload scan contrat */
#bloc-signature-scan {
  /* Conteneur rechargé après upload */
}

/* Mobile — dropzone pleine largeur */
@media (max-width: 991px) {
  .dropzone-o2toit {
    padding: 20px 12px;
    min-height: 88px;
  }
  .piece-item-o2toit {
    padding: 12px 0;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Bouton clear universel (×) — réservé padding + style global
   ════════════════════════════════════════════════════════════════════
   Markup attendu (cf. utility.js → setupFieldClearButtons) :
     <div class="field-o2toit" style="position:relative;">
         <input id="mon_champ" class="form-control has-clear" …>
         <button type="button" class="field-input-clear"
                 data-clear-target="mon_champ"
                 data-clear-hidden="hidden_id_1,hidden_id_2"
                 aria-label="Effacer">
             <i class="ri-close-line"></i>
         </button>
     </div>
   Règle : tout input d'autocomplete / qui pilote un hidden doit avoir
   son bouton clear (cf. feedback_autocomplete_clear_button).
   ════════════════════════════════════════════════════════════════════ */
.form-control.has-clear { padding-right: 40px; }

.field-input-clear {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: rgba(42, 61, 39, 0.06);
    color: #7a8a70;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    transition: background-color 0.12s ease, color 0.12s ease;
    z-index: 2;
}
.field-input-clear.is-visible { display: inline-flex; }
.field-input-clear:hover {
    background: rgba(42, 61, 39, 0.12);
    color: var(--brand-text, #2A3D27);
}
.field-input-clear:focus-visible {
    outline: 2px solid var(--brand-primary, #F3B23E);
    outline-offset: 1px;
}
.field-input-clear i { pointer-events: none; }

/* ════════════════════════════════════════════════════════════════════
   Dropdown d'autocomplete universel — affiché SOUS le champ
   ════════════════════════════════════════════════════════════════════
   Markup attendu (à l'intérieur du wrapper .field-o2toit en
   position:relative) :
     <div class="field-suggestions" id="my-suggestions" role="listbox">
         <div class="field-suggestions__item" role="option"
              onmousedown="…">Libellé</div>
         …
     </div>
   ════════════════════════════════════════════════════════════════════ */
.field-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--brand-bg-card, #fff);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    box-shadow: 0 8px 20px rgba(42, 61, 39, 0.10), 0 2px 6px rgba(42, 61, 39, 0.06);
    z-index: 1080;
    display: none;
    padding: 4px;
}
.field-suggestions.is-open { display: block; }

.field-suggestions__item {
    padding: 8px 10px;
    border-radius: calc(var(--brand-radius) - 2px);
    cursor: pointer;
    font-size: 13px;
    color: var(--brand-text, #2A3D27);
    transition: background-color 0.12s ease;
}
.field-suggestions__item:hover,
.field-suggestions__item.is-active {
    background: var(--brand-secondary-xlight, #F5F3ED);
}

/* Badge "Kit" : appliqué via flag='kit' côté endpoint
   → bindAutocomplete pose la classe .is-kit sur l'item.
   Le badge est généré en `::before` pour rester dans le flow et
   ne pas casser les autres styles (clic, navigation clavier). */
.field-suggestions__item.is-kit {
    display: flex;
    align-items: center;
    gap: 8px;
}
.field-suggestions__item.is-kit::before {
    content: 'Kit';
    flex: 0 0 auto;
    background: var(--brand-primary, #F3B23E);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 4px;
    line-height: 1.4;
}
.field-suggestions__empty {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--brand-text-muted);
    font-style: italic;
}

/* Items à 2 lignes — utilisé par bindAdresseAutocomplete (rue / cp+commune)
   Le suggestions__title reprend la couleur de l'item, meta est en muted. */
.field-suggestions__item .field-suggestions__title {
    font-weight: 500;
    line-height: 1.3;
}
.field-suggestions__item .field-suggestions__meta {
    font-size: 11px;
    color: var(--brand-text-muted);
    margin-top: 1px;
    line-height: 1.3;
}

/* À l'intérieur d'une modale Bootstrap, monter le z-index pour rester
   au-dessus du backdrop modal (1055). */
.modal .field-suggestions { z-index: 1100; }


/* =============================================================
   DATEPICKER (bootstrap-datepicker) — thème O2TOIT
   -------------------------------------------------------------
   Convention RF-09 : tout champ date utilise bootstrap-datepicker
   en format dd/mm/yyyy. Le markup est un input texte avec la
   classe .datepicker — l'auto-init est dans utility.js
   (setupDatepickers).

   1. Icône calendrier intégrée à droite de l'input .datepicker
      pour donner le même indice visuel que <input type="date">
   2. Calendrier flottant (.datepicker-dropdown) restylé aux
      tokens O2TOIT : fond carte, bordures brand, jour actif doré,
      hover xlight, today souligné brand
   ============================================================= */

input.form-control.datepicker {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7E67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
}

input.form-control.datepicker:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B5741A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

/* Calendrier flottant — restyle bootstrap-datepicker aux couleurs O2TOIT
   IMPORTANT : Hyper (`app-saas.min.css`) applique des couleurs violettes
   `#727cf5` et roses `#fa5c7c` avec `!important` sur les états .active,
   .today, etc. Pour gagner, on doit :
   1. Utiliser les MÊMES sélecteurs (`.datepicker table tr td.active`)
      que Hyper, pas un sélecteur scope-et-spécifique différent.
   2. Mettre `!important` sur les couleurs/fonds (Hyper l'utilise).
   Sans cela, le calendrier est violet/rose alors que tout le reste de
   la page est en vert/doré O2TOIT. */

.datepicker.datepicker-dropdown {
    font-family: var(--brand-font);
    font-size: 13px;
    color: var(--brand-text);
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-lg);
    box-shadow: 0 8px 24px rgba(42, 61, 39, 0.12), 0 2px 6px rgba(42, 61, 39, 0.06);
    padding: 8px;
    z-index: 1080;
}

.datepicker table {
    border-collapse: separate;
    border-spacing: 2px;
}

/* Header (mois + flèches navigation) */
.datepicker table thead tr:first-child th,
.datepicker table thead tr:first-child th:hover {
    background: transparent !important;
    color: var(--brand-text) !important;
    font-weight: 700;
    font-size: 13px;
    padding: 6px 4px;
    border-radius: var(--brand-radius);
}

.datepicker table thead tr:first-child th.prev,
.datepicker table thead tr:first-child th.next,
.datepicker table thead tr:first-child th.datepicker-switch {
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.datepicker table thead tr:first-child th.prev:hover,
.datepicker table thead tr:first-child th.next:hover,
.datepicker table thead tr:first-child th.datepicker-switch:hover {
    background: var(--brand-primary-xlight) !important;
    color: var(--brand-primary-darker) !important;
}

.datepicker table thead .dow {
    color: var(--brand-text-muted) !important;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 0;
    border-bottom: 1px solid var(--brand-border-light);
}

/* Cellule jour / mois / année — état neutre */
.datepicker table tr td,
.datepicker table tr td span {
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: var(--brand-radius);
    cursor: pointer;
    color: var(--brand-text) !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    text-shadow: none !important;
    font-weight: 500;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.datepicker table tr td.old,
.datepicker table tr td.new,
.datepicker table tr td span.old,
.datepicker table tr td span.new {
    color: var(--brand-text-disabled) !important;
    font-weight: 400;
}

/* Hover / focused — fond xlight */
.datepicker table tr td.day:hover,
.datepicker table tr td.focused,
.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
    background-color: var(--brand-primary-xlight) !important;
    color: var(--brand-primary-darker) !important;
}

/* Aujourd'hui — souligné brand, sans fond plein
   ⚠ Hyper applique #727cf5 violet ici, on l'écrase. */
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today:focus,
.datepicker table tr td.today.focused {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--brand-primary-darker) !important;
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--brand-primary) !important;
    text-shadow: none !important;
}

/* Jour sélectionné — fond doré brand
   ⚠ Hyper applique #727cf5 violet + texte blanc ici, on l'écrase. */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active:focus,
.datepicker table tr td.active.focused,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.active,
.datepicker table tr td.active:active,
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:focus,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
    background-color: var(--brand-primary) !important;
    background-image: none !important;
    color: var(--brand-text) !important;
    font-weight: 700;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 1px 3px rgba(42, 61, 39, 0.15) !important;
    text-shadow: none !important;
}

/* Cas combiné today + active (jour sélectionné qui est aussi aujourd'hui)
   → priorité au sélectionné (fond doré), on garde le soulignement brand */
.datepicker table tr td.active.today,
.datepicker table tr td.active.today:hover {
    background-color: var(--brand-primary) !important;
    color: var(--brand-text) !important;
    box-shadow: 0 1px 3px rgba(42, 61, 39, 0.15),
                inset 0 -2px 0 var(--brand-primary-darker) !important;
}

/* Désactivé */
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover,
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
    background: transparent !important;
    color: var(--brand-text-disabled) !important;
    cursor: not-allowed;
}

/* Pied de calendrier — boutons "Aujourd'hui" / "Effacer" */
.datepicker table tfoot tr th.today,
.datepicker table tfoot tr th.clear {
    background: transparent !important;
    color: var(--brand-primary-darker) !important;
    font-weight: 600;
    font-size: 12px;
    padding: 8px 4px;
    border-radius: var(--brand-radius);
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.datepicker table tfoot tr th.today:hover,
.datepicker table tfoot tr th.clear:hover {
    background: var(--brand-primary-xlight) !important;
    color: var(--brand-primary-darker) !important;
}

/* Au-dessus d'une modale Bootstrap (backdrop = 1055) */
.modal-open .datepicker.datepicker-dropdown { z-index: 1100; }

/* ════════════════════════════════════════════════════════════════════
   Checkbox pill — pattern checkbox enrichie style "tag/chip cliquable"
   ════════════════════════════════════════════════════════════════════
   Utilisée pour les multi-select compacts (produits cochés, types de
   chauffage, etc.). Bascule .is-checked au change de la checkbox interne.
   ════════════════════════════════════════════════════════════════════ */
.checkbox-pill-o2toit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    background: var(--brand-bg-card);
    color: var(--brand-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    user-select: none;
    margin: 0;
}
.checkbox-pill-o2toit:hover {
    border-color: var(--brand-primary-light);
    background: var(--brand-primary-xlight);
}
.checkbox-pill-o2toit.is-checked {
    background: var(--brand-primary-xlight);
    border-color: var(--brand-primary);
    color: var(--brand-text);
}
.checkbox-pill-o2toit input[type="checkbox"] {
    margin: 0;
    accent-color: var(--brand-primary);
}

/* ════════════════════════════════════════════════════════════════════
   Checkbox pill — variante GRILLE 2 colonnes en mobile
   ════════════════════════════════════════════════════════════════════
   Utilisée quand un wrapper .d-flex .flex-wrap contient plusieurs
   .checkbox-pill-o2toit dont la liste devient verticale et trop haute
   sur smartphone (ex: liste produits, types de chauffage du formulaire
   lead). Ajouter la classe .checkbox-pill-grid au wrapper pour passer
   en grille 2 colonnes compacte sous 576px, tout en gardant le layout
   flex-wrap natif sur tablette et desktop.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .checkbox-pill-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 6px !important;
    }
    .checkbox-pill-grid .checkbox-pill-o2toit {
        padding: 7px 8px;
        font-size: 12px;
        line-height: 1.25;
        justify-content: center;
        text-align: center;
    }
}

/* ════════════════════════════════════════════════════════════════════
   Drawer "Nouveau lead" — flow création de devis
   ════════════════════════════════════════════════════════════════════
   Composants : carte de doublon (étape 2 du drawer), bandeau "Reprendre"
   sur devis/ajout.php, état "is-tiers-pending" qui grise le formulaire
   devis tant qu'aucun client n'est sélectionné.
   ════════════════════════════════════════════════════════════════════ */

.lead-duplicate-card {
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    padding: 12px 14px;
    transition: border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.lead-duplicate-card:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 2px 10px rgba(42, 61, 39, 0.06);
}
.lead-duplicate-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}
.lead-duplicate-info { flex: 1 1 220px; min-width: 0; }
.lead-duplicate-libelle {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-text);
    line-height: 1.3;
}
.lead-duplicate-meta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--brand-text-muted);
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
}
.lead-duplicate-meta i { font-size: 13px; vertical-align: -1px; opacity: 0.7; margin-right: 2px; }
.lead-duplicate-match {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 11px;
    color: var(--brand-text-secondary);
}
.lead-duplicate-match-label {
    font-style: italic;
    color: var(--brand-text-muted);
}
.lead-duplicate-pick {
    flex-shrink: 0;
    align-self: center;
}
@media (max-width: 575.98px) {
    .lead-duplicate-pick { align-self: stretch; width: 100%; }
}

/* État "tiers pending" : on grise toute la zone devis (form principal
   + sidebar récap/actions) tant qu'aucun client n'a été sélectionné via
   le drawer. Le bandeau #devis-resume-banner est rendu HORS de .devis-grid
   (juste avant) pour rester pleinement visible/cliquable — c'est le seul
   point d'entrée disponible en attendant la sélection client. */
.devis-grid.is-tiers-pending {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 200ms var(--ease-out);
    user-select: none;
}

/* Le bouton "Modifier" / "Ajouter" sticky à côté des libellés des
   champs client / adresse — utilise .btn-link-o2toit déjà défini.
   On force ici la taille pour rester compact et visible. */
.field-o2toit label.form-label .btn-link-o2toit {
    margin-left: 8px;
    font-size: 11px;
    line-height: 1.2;
    padding: 2px 8px;
    border-radius: 4px;
    vertical-align: baseline;
}
.field-o2toit label.form-label .btn-link-o2toit i {
    font-size: 12px;
    margin-right: 2px;
    vertical-align: -1px;
}

/* ════════════════════════════════════════════════════════════════════
   Toggle / Segmented control — pattern unique (feedback récurrent UX)
   ════════════════════════════════════════════════════════════════════
   Markup attendu (cf. utility.js → bindToggleGroups) :
     <div class="toggle-o2toit" data-toggle-target="ID_HIDDEN" role="group">
         <button class="toggle-btn-o2toit is-active" data-value="A">…</button>
         <button class="toggle-btn-o2toit"           data-value="B">…</button>
     </div>
   Alias .tiers-type-toggle / .tiers-type-btn pour rétrocompatibilité
   avec le module agenda (ne pas réécrire les styles).
   ════════════════════════════════════════════════════════════════════ */
.toggle-o2toit,
.tiers-type-toggle {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    background: var(--brand-bg);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    padding: 3px;
    overflow: hidden;
    flex-wrap: wrap;
}
.toggle-btn-o2toit,
.tiers-type-btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    color: var(--brand-text-muted);
    padding: 8px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: calc(var(--brand-radius) - 3px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.toggle-btn-o2toit:hover:not(.is-active):not(:disabled),
.tiers-type-btn:hover:not(.is-active):not(:disabled) {
    color: var(--brand-text);
    background-color: var(--brand-secondary-xlight);
}
.toggle-btn-o2toit.is-active,
.tiers-type-btn.is-active {
    background-color: var(--brand-bg-card);
    color: var(--brand-text);
    box-shadow: 0 1px 3px rgba(42,61,39,0.12), 0 1px 1px rgba(42,61,39,0.08);
}
.toggle-btn-o2toit.is-active i,
.tiers-type-btn.is-active i {
    color: var(--brand-primary-dark);
}
.toggle-btn-o2toit:focus-visible,
.tiers-type-btn:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}
.toggle-btn-o2toit:disabled,
.tiers-type-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════════
   Drawer latéral global — réutilisable par TOUS les modules
   ════════════════════════════════════════════════════════════════════
   Géré par utility.js → window.openSidebarDrawer(url) /
   window.closeSidebarDrawer(). Voir feedback_drawer_helper_global.
   ════════════════════════════════════════════════════════════════════ */
.sidebar-drawer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1080;
    visibility: hidden;
}
.sidebar-drawer.is-open { pointer-events: auto; visibility: visible; }

.sidebar-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(42,61,39,0.34);
    opacity: 0;
    transition: opacity 0.22s ease;
}
.sidebar-drawer.is-open .sidebar-drawer-backdrop { opacity: 1; }

.sidebar-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(520px, 100vw);
    background: var(--brand-bg-card);
    box-shadow: -8px 0 32px rgba(42,61,39,0.18);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sidebar-drawer.is-open .sidebar-drawer-panel { transform: translateX(0); }

.sidebar-drawer-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* Sous-structure interne attendue dans le contenu chargé via AJAX */
.sidebar-drawer-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--brand-border);
    background: var(--brand-bg);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    justify-content: space-between;
    flex-shrink: 0;
}
.sidebar-drawer-title {
    display: flex;
    gap: 10px;
    align-items: center;
}
.sidebar-drawer-title h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-text);
    margin: 0;
}
.sidebar-drawer-title p {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--brand-text-muted);
}
.sidebar-drawer-icon {
    width: 36px; height: 36px;
    border-radius: var(--brand-radius);
    background: var(--brand-primary-xlight);
    color: var(--brand-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.sidebar-drawer-close {
    appearance: none;
    background: transparent;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    width: 32px; height: 32px;
    color: var(--brand-text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sidebar-drawer-close:hover {
    background: var(--brand-danger-bg);
    color: var(--brand-danger-text);
    border-color: var(--brand-danger-border);
}

.sidebar-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 20px;
}

.sidebar-drawer-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--brand-border);
    background: var(--brand-bg);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Empêche le scroll de la page mère quand le drawer est ouvert (mobile UX) */
body.sidebar-drawer-open { overflow: hidden; }

@media (max-width: 600px) {
    .sidebar-drawer-panel { width: 100vw; }
}

/* ════════════════════════════════════════════════════════════════════
   Z-index — Modales Bootstrap au-dessus du sidebar-drawer
   ════════════════════════════════════════════════════════════════════
   Le `.sidebar-drawer` est à z-index 1080 et crée son propre stacking
   context (position:fixed). Les modales Bootstrap (alerte, confirme,
   doublons tiers, …) sont à z-index 1055 par défaut, donc rendues
   DERRIÈRE le drawer. Visuellement la modale était centrée mais le
   drawer-backdrop semi-transparent passait au-dessus : un clic sur
   "OK" tombait sur le drawer-backdrop et fermait le drawer en cours
   de saisie → perte des données utilisateur.
   On relève ici les variables CSS BS5 (pas de !important) pour faire
   passer toute modale au-dessus du drawer. ──────────────────────── */
.modal          { --ct-modal-zindex:    1090; }
.modal-backdrop { --ct-backdrop-zindex: 1085; }


/* ════════════════════════════════════════════════════════════════════
   Select2 — restyle brand O2TOIT (générique, réutilisable)
   ════════════════════════════════════════════════════════════════════
   Toute init Select2 du projet doit poser containerCssClass et
   dropdownCssClass = 'select2-container--o2toit' / 'select2-dropdown--o2toit'
   pour bénéficier de ce skin. !important nécessaire pour battre la
   spécificité du thème par défaut Hyper (.select2-container--default …). */
.select2-container--o2toit .select2-selection--multiple,
.select2-container--o2toit .select2-selection--single {
    min-height: 38px !important;
    background: var(--brand-bg-card) !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: var(--brand-radius) !important;
    padding: 2px 6px !important;
    box-shadow: none !important;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.select2-container--o2toit.select2-container--focus .select2-selection,
.select2-container--o2toit.select2-container--open  .select2-selection {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px var(--brand-primary-xlight) !important;
}
.select2-container--o2toit .select2-selection__choice {
    background: var(--brand-primary-xlight) !important;
    color: var(--brand-primary-dark) !important;
    border: 1px solid var(--brand-primary-light) !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    margin-top: 4px !important;
    margin-right: 4px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}
.select2-container--o2toit .select2-selection__choice__remove {
    color: var(--brand-primary-dark) !important;
    font-weight: 700 !important;
    margin-right: 4px !important;
    border: none !important;
    background: transparent !important;
}
.select2-container--o2toit .select2-selection__choice__remove:hover {
    color: var(--brand-danger-text) !important;
    background: transparent !important;
}
.select2-container--o2toit .select2-search--inline .select2-search__field {
    font-size: 13px;
    margin-top: 6px;
    color: var(--brand-text);
}
.select2-container--o2toit .select2-selection__placeholder {
    color: var(--brand-text-muted) !important;
    font-size: 13px !important;
}
.select2-dropdown--o2toit > .select2-dropdown {
    border: 1px solid var(--brand-border) !important;
    border-radius: var(--brand-radius) !important;
    box-shadow: var(--brand-shadow-lg) !important;
    overflow: hidden;
}
.select2-dropdown--o2toit .select2-results__option--highlighted[aria-selected] {
    background: var(--brand-primary) !important;
    color: var(--brand-text) !important;
}
.select2-dropdown--o2toit .select2-results__option[aria-selected=true] {
    background: var(--brand-primary-xlight) !important;
    color: var(--brand-primary-dark) !important;
}

/* =============================================================
   FAB QUICK ACTIONS — bouton flottant raccourcis création
   Universel (rendu dans base.php, hors #wrapper). Présent sur
   tous les écrans authentifiés. 4 actions : nouveau lead, nouveau
   devis, nouveau RDV, nouveau rappel. Sur mobile, calé en bas à
   droite (16px + safe-area-inset-bottom).
   ============================================================= */

.fab-quick {
    position: fixed;
    right:    24px;
    bottom:   24px;
    z-index:  1040;
    pointer-events: none;
}
@media (max-width: 991.98px) {
    .fab-quick {
        right:  16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
}

/* Backdrop — fade + léger blur, ferme au clic */
.fab-quick-backdrop {
    position: fixed;
    inset:    0;
    background:           rgba(20, 28, 18, 0.32);
    backdrop-filter:      blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity:    0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease;
    pointer-events: none;
    z-index: -1;
}
.fab-quick.is-open .fab-quick-backdrop {
    opacity:    1;
    visibility: visible;
    pointer-events: auto;
}

/* Bouton principal — dégradé brand, élévation, micro-bounce */
.fab-quick-toggle {
    pointer-events: auto;
    position: relative;
    display:  flex;
    align-items:     center;
    justify-content: center;
    width:    60px;
    height:   60px;
    border:   0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    color:    #fff;
    box-shadow: 0 10px 24px rgba(180, 116, 26, 0.32),
                0 4px  8px rgba(42, 61, 39, 0.18);
    cursor: pointer;
    transition: transform   220ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow  220ms ease,
                background  220ms ease;
}
.fab-quick-toggle:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 14px 28px rgba(180, 116, 26, 0.40),
                0  6px 12px rgba(42, 61, 39, 0.22);
}
.fab-quick-toggle:active {
    transform: translateY(0) scale(0.97);
}
.fab-quick-toggle:focus-visible {
    outline: 3px solid var(--brand-primary-light);
    outline-offset: 3px;
}

.fab-quick-toggle-icon {
    font-size: 28px;
    line-height: 1;
    transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
}

/* État ouvert : + → × (rotation 135°) + dégradé plus sombre */
.fab-quick.is-open .fab-quick-toggle {
    background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary-darker) 100%);
}
.fab-quick.is-open .fab-quick-toggle-icon {
    transform: rotate(135deg);
}

/* Pulse d'attente — guide l'œil au repos */
@keyframes fabQuickPulse {
    0%   { box-shadow: 0 0 0  0  rgba(243, 178, 62, 0.50),
                       0 10px 24px rgba(180, 116, 26, 0.32),
                       0 4px  8px  rgba(42, 61, 39, 0.18); }
    70%  { box-shadow: 0 0 0 14px rgba(243, 178, 62, 0),
                       0 10px 24px rgba(180, 116, 26, 0.32),
                       0 4px  8px  rgba(42, 61, 39, 0.18); }
    100% { box-shadow: 0 0 0  0  rgba(243, 178, 62, 0),
                       0 10px 24px rgba(180, 116, 26, 0.32),
                       0 4px  8px  rgba(42, 61, 39, 0.18); }
}
@media (prefers-reduced-motion: no-preference) {
    .fab-quick:not(.is-open) .fab-quick-toggle {
        animation: fabQuickPulse 2.6s ease-out infinite;
    }
}

/* Conteneur des 4 actions secondaires (au-dessus du bouton) */
.fab-quick-actions {
    position: absolute;
    bottom:   72px;
    right:    0;
    display:  flex;
    flex-direction: column;
    align-items:    flex-end;
    gap: 12px;
    pointer-events: none;
}
.fab-quick.is-open .fab-quick-actions { pointer-events: auto; }

/* Action item — pastille + label flottant */
.fab-quick-action {
    display:     inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    opacity:   0;
    transform: translateY(16px) scale(0.85);
    transition: opacity   220ms ease,
                transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fab-quick.is-open .fab-quick-action {
    opacity:   1;
    transform: translateY(0) scale(1);
}

/* Stagger — apparition du bas (le plus proche du bouton) vers le haut */
.fab-quick.is-open .fab-quick-action:nth-child(4) { transition-delay:   0ms; }
.fab-quick.is-open .fab-quick-action:nth-child(3) { transition-delay:  60ms; }
.fab-quick.is-open .fab-quick-action:nth-child(2) { transition-delay: 120ms; }
.fab-quick.is-open .fab-quick-action:nth-child(1) { transition-delay: 180ms; }

.fab-quick-label {
    background: #fff;
    color: var(--brand-text);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid var(--brand-border);
    box-shadow: 0 4px 12px rgba(42, 61, 39, 0.12);
    white-space: nowrap;
    letter-spacing: 0.01em;
    transition: border-color 180ms ease, color 180ms ease;
}

.fab-quick-icon {
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    width:  48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: var(--brand-primary-darker);
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(42, 61, 39, 0.14);
    transition: transform  180ms cubic-bezier(0.34, 1.56, 0.64, 1),
                background 180ms ease,
                color      180ms ease,
                box-shadow 180ms ease;
}

.fab-quick-action:hover .fab-quick-icon {
    background: var(--brand-primary);
    color: #fff;
    transform: scale(1.10);
    box-shadow: 0 6px 16px rgba(180, 116, 26, 0.30);
}
.fab-quick-action:hover .fab-quick-label {
    border-color: var(--brand-primary);
    color: var(--brand-primary-darker);
}
.fab-quick-action:active .fab-quick-icon {
    transform: scale(0.95);
}

/* Mobile très étroit : label masqué, pastille seule, gap réduit */
@media (max-width: 360px) {
    .fab-quick-label { display: none; }
    .fab-quick-actions { gap: 10px; bottom: 70px; }
}

/* Accessibilité : reduced motion + impression */
@media (prefers-reduced-motion: reduce) {
    .fab-quick-toggle,
    .fab-quick-toggle-icon,
    .fab-quick-action,
    .fab-quick-icon,
    .fab-quick-backdrop {
        transition: none !important;
        animation:  none !important;
    }
}
@media print {
    .fab-quick { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   Colonne agenda latérale "à la Outlook" — dashboards DR / RRV / RV / Conseiller
   Composée de 2 zones empilées :
     1. .agenda-side-cal      mini-calendrier mensuel (haut, fixe)
     2. .agenda-side-day      liste des RDV du jour sélectionné (bas, scroll)
   Pastilles couleur du calendrier :
     - vert sombre (--brand-text) : aujourd'hui
     - orange xlight              : jour avec RDV programmés
     - rouge (color-confirm)      : jour où il faut confirmer
       des RDV pour le lendemain (créés > 72h avant la date du RDV)
   Cf. CRM/APP/php/accueil/dashboard_mini_agenda.php (mini-cal) +
       CRM/APP/php/accueil/dashboard_agenda_day_rdv.php (zone RDV du jour).
   ════════════════════════════════════════════════════════════════════ */

/* ─── Zone 1 : mini-cal en haut de la sidebar ──────────────── */
.agenda-side-cal {
    padding: 12px 14px;
    border-bottom: 1px solid var(--brand-border, #DDD9D0);
    background: #FCFAF4;
    flex: 0 0 auto;
    display: flex; flex-direction: column; gap: 4px;
}
.agenda-side-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.agenda-side-cal-title {
    font-size: 11px; font-weight: 800; color: var(--brand-text, #2A3D27);
    text-transform: uppercase; letter-spacing: 0.06em;
    display: inline-flex; align-items: center; gap: 5px;
}
.agenda-side-cal-title i { color: var(--brand-primary, #F3B23E); font-size: 13px; }
.agenda-side-cal-nav { display: inline-flex; gap: 2px; }
.agenda-side-cal-nav-btn {
    width: 22px; height: 22px; border-radius: 5px;
    border: 1px solid var(--brand-border-light, #EDE9E2);
    background: #fff; color: var(--brand-text-muted, #6B7E67); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; padding: 0;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.agenda-side-cal-nav-btn:hover { background: var(--brand-primary-xlight, #FDF3DC); color: var(--brand-primary-darker, #B5741A); border-color: var(--brand-primary, #F3B23E); }

/* =====================================================================
   COMPOSANTS RÉCONCILIÉS — implémentation des patterns manquants (2026-06)
   Tous les sélecteurs ci-dessous sont NOUVEAUX — aucun doublon avec le thème.
   Sous-sections : 1-Alerts 2-Timeline 3-KPI 4-Tabs 5-Forms 6-RecordHero
                   7-Tables 8-BottomBar
   ===================================================================== */

/* ─────────────────────────────────────────────────────────────────────
   1. ALERTES RICHES .alert-o2toit + SYSTÈME TOAST
   ─────────────────────────────────────────────────────────────────────
   Utilisation :
     <div class="alert-o2toit alert-success">
       <i class="ri-checkbox-circle-line alert-icon-o2toit"></i>
       <div class="alert-content-o2toit">
         <p class="alert-title-o2toit">Titre</p>
         <p class="alert-message-o2toit">Message</p>
         <button class="alert-action-o2toit">Voir le dossier</button>
       </div>
       <button class="alert-close-o2toit" onclick="this.closest('.alert-o2toit').remove()">
         <i class="ri-close-line"></i>
       </button>
     </div>
   ───────────────────────────────────────────────────────────────────── */

.alert-o2toit {
  display:     flex;
  align-items: flex-start;
  gap:         12px;
  padding:     14px 16px;
  border-radius: var(--brand-radius);
  border:      1px solid transparent;
  margin-bottom: 10px;
  font-family: var(--brand-font);
  position:    relative;
}

.alert-icon-o2toit {
  font-size:   20px;
  flex-shrink: 0;
  line-height: 1;
  margin-top:  1px;
}

.alert-content-o2toit {
  flex:      1;
  min-width: 0;
}

.alert-title-o2toit {
  font-family:  var(--brand-font);
  font-size:    14px;
  font-weight:  700;
  line-height:  1.3;
  margin:       0 0 3px;
}

.alert-message-o2toit {
  font-family: var(--brand-font);
  font-size:   13px;
  font-weight: 400;
  line-height: 1.5;
  margin:      0;
}

.alert-close-o2toit {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           24px;
  height:          24px;
  border:          none;
  background:      transparent;
  cursor:          pointer;
  border-radius:   4px;
  font-size:       16px;
  opacity:         0.5;
  flex-shrink:     0;
  transition:      opacity 120ms;
  color:           inherit;
}
.alert-close-o2toit:hover { opacity: 1; }

.alert-action-o2toit {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  margin-top:      8px;
  font-size:       13px;
  font-weight:     600;
  color:           inherit;
  text-decoration: underline;
  cursor:          pointer;
  border:          none;
  background:      transparent;
  padding:         0;
  font-family:     var(--brand-font);
}
.alert-action-o2toit:hover { text-decoration: none; }

/* Variantes sémantiques alert-o2toit */
.alert-o2toit.alert-success {
  background-color: var(--brand-success-bg);
  border-color:     var(--brand-success-border);
  color:            var(--brand-success-text);
}
.alert-o2toit.alert-success .alert-icon-o2toit { color: var(--brand-success-text); }

.alert-o2toit.alert-warning {
  background-color: var(--brand-warning-bg);
  border-color:     var(--brand-warning-border);
  color:            var(--brand-warning-text);
}
.alert-o2toit.alert-warning .alert-icon-o2toit { color: var(--brand-primary-dark); }

.alert-o2toit.alert-danger {
  background-color: var(--brand-danger-bg);
  border-color:     var(--brand-danger-border);
  color:            var(--brand-danger-text);
}
.alert-o2toit.alert-danger .alert-icon-o2toit { color: var(--brand-danger-text); }

.alert-o2toit.alert-info {
  background-color: var(--brand-info-bg);
  border-color:     var(--brand-info-border);
  color:            var(--brand-info-text);
}
.alert-o2toit.alert-info .alert-icon-o2toit { color: var(--brand-info-text); }

.alert-o2toit.alert-neutral {
  background-color: var(--brand-neutral-bg);
  border-color:     var(--brand-neutral-border);
  color:            var(--brand-neutral-text);
}
.alert-o2toit.alert-neutral .alert-icon-o2toit { color: var(--brand-neutral-text); }

/* Toast container — fixed bas-droite */
.toast-container-o2toit {
  position:        fixed;
  bottom:          24px;
  right:           24px;
  z-index:         2000;
  display:         flex;
  flex-direction:  column;
  gap:             8px;
  max-width:       360px;
  width:           calc(100% - 32px);
  pointer-events:  none;
}

@keyframes toast-in-o2toit {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.toast-o2toit {
  display:         flex;
  align-items:     center;
  gap:             12px;
  padding:         14px 16px;
  background:      var(--brand-bg-card);
  border:          1px solid var(--brand-border-light);
  border-radius:   var(--brand-radius-lg);
  box-shadow:      var(--brand-shadow-md);
  font-family:     var(--brand-font);
  pointer-events:  all;
  animation:       toast-in-o2toit 200ms var(--ease-out);
}

.toast-icon-o2toit {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   50%;
  flex-shrink:     0;
  font-size:       18px;
}

.toast-o2toit.toast-success .toast-icon-o2toit { background: var(--brand-success-bg); color: var(--brand-success-text); }
.toast-o2toit.toast-warning .toast-icon-o2toit { background: var(--brand-warning-bg); color: var(--brand-primary-dark); }
.toast-o2toit.toast-danger  .toast-icon-o2toit { background: var(--brand-danger-bg);  color: var(--brand-danger-text); }
.toast-o2toit.toast-info    .toast-icon-o2toit { background: var(--brand-info-bg);    color: var(--brand-info-text); }

.toast-text-o2toit {
  flex:      1;
  min-width: 0;
}

.toast-title-o2toit {
  font-size:   14px;
  font-weight: 700;
  color:       var(--brand-text);
  margin:      0 0 2px;
}

.toast-message-o2toit {
  font-size:     13px;
  font-weight:   400;
  color:         var(--brand-text-muted);
  margin:        0;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.toast-close-o2toit {
  width:           28px;
  height:          28px;
  border:          none;
  background:      transparent;
  cursor:          pointer;
  border-radius:   var(--brand-radius);
  font-size:       16px;
  color:           var(--brand-text-muted);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  transition:      background 120ms;
}
.toast-close-o2toit:hover { background: var(--brand-bg); color: var(--brand-text); }

/* ─────────────────────────────────────────────────────────────────────
   2. TIMELINE — entrées événementielles (carte + icône + méta pill)
   Ne casse PAS la base .timeline-o2toit / .timeline-item / .timeline-dot
   ─────────────────────────────────────────────────────────────────────
   Utilisation pour une entrée complète (contexte .timeline-o2toit) :
     <div class="timeline-item-o2toit">
       <div class="timeline-icon ev-contrat"><i class="ri-file-check-line"></i></div>
       <div class="timeline-content">
         <div class="timeline-header">
           <h4 class="timeline-title">Contrat signé</h4>
           <span class="timeline-date">14h32</span>
         </div>
         <p class="timeline-desc">Description…</p>
         <div class="timeline-meta">
           <span class="timeline-meta-pill"><i class="ri-money-dollar-circle-line"></i> 8 500 €</span>
         </div>
         <div class="timeline-author">
           <div class="timeline-author-avatar">ML</div>
           Martin Laurent
         </div>
       </div>
     </div>
     <div class="timeline-date-separator"><span>Aujourd'hui — 3 juin 2026</span></div>
   ───────────────────────────────────────────────────────────────────── */

.timeline-item-o2toit {
  position:      relative;
  padding-left:  24px;
  padding-bottom: 20px;
}
.timeline-item-o2toit:last-child { padding-bottom: 0; }

/* Icône bulle — types d'événement */
.timeline-icon {
  position:         absolute;
  left:             -28px;
  top:              2px;
  width:            24px;
  height:           24px;
  border-radius:    50%;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        12px;
  flex-shrink:      0;
  border:           2px solid var(--brand-bg-card);
  z-index:          1;
}

.timeline-icon.ev-call    { background: var(--brand-info-bg);            color: var(--brand-info-text); }
.timeline-icon.ev-rdv     { background: var(--brand-warning-bg);         color: var(--brand-primary-dark); }
.timeline-icon.ev-devis   { background: var(--brand-warning-bg);         color: var(--brand-primary-dark); }
.timeline-icon.ev-contrat { background: var(--brand-success-bg);         color: var(--brand-success-text); }
.timeline-icon.ev-note    { background: var(--brand-secondary-xlight);   color: var(--brand-secondary-darker); }
.timeline-icon.ev-relance { background: var(--brand-danger-bg);          color: var(--brand-danger-text); }
.timeline-icon.ev-install { background: var(--brand-success-bg);         color: var(--brand-success-text); }
.timeline-icon.ev-facture { background: var(--brand-info-bg);            color: var(--brand-info-text); }
.timeline-icon.ev-system  { background: var(--brand-bg);                 color: var(--brand-text-muted); }

/* Carte contenu — version riche avec bordure */
.timeline-item-o2toit > .timeline-content {
  background:    var(--brand-bg-card);
  border:        1px solid var(--brand-border-light);
  border-radius: var(--brand-radius);
  padding:       12px 14px;
  box-shadow:    var(--brand-shadow-sm);
  transition:    border-color 120ms var(--ease-out);
}
.timeline-item-o2toit > .timeline-content:hover { border-color: var(--brand-border); }

/* Header de l'entrée */
.timeline-header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             8px;
  margin-bottom:   4px;
}

.timeline-title {
  font-family:  var(--brand-font);
  font-size:    14px;
  font-weight:  700;
  color:        var(--brand-text);
  line-height:  1.3;
  margin:       0;
}

.timeline-date {
  font-family:  var(--brand-font);
  font-size:    11px;
  font-weight:  500;
  color:        var(--brand-text-disabled);
  white-space:  nowrap;
  flex-shrink:  0;
}

.timeline-desc {
  font-family:  var(--brand-font);
  font-size:    13px;
  font-weight:  400;
  color:        var(--brand-text-muted);
  line-height:  1.5;
  margin:       0;
}

/* Auteur */
.timeline-author {
  display:     flex;
  align-items: center;
  gap:         6px;
  margin-top:  8px;
  font-family: var(--brand-font);
  font-size:   12px;
  color:       var(--brand-text-muted);
}

.timeline-author-avatar {
  width:           20px;
  height:          20px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       9px;
  font-weight:     700;
  color:           var(--brand-text);
  background:      linear-gradient(135deg, var(--brand-primary-light) 0%, var(--brand-primary) 100%);
  flex-shrink:     0;
}

/* Meta pills dans .timeline-item-o2toit — distinct de .timeline-meta (row icônes) */
.timeline-item-o2toit .timeline-meta {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         8px;
  margin-top:  8px;
  padding-top: 8px;
  border-top:  1px solid var(--brand-border-light);
}

.timeline-meta-pill {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       3px 8px;
  background:    var(--brand-bg);
  border-radius: var(--brand-radius-pill);
  font-size:     11px;
  font-weight:   600;
  color:         var(--brand-text-muted);
  border:        1px solid var(--brand-border-light);
}
.timeline-meta-pill i { font-size: 12px; }

/* Entrée système — plus discrète */
.timeline-item-o2toit.is-system > .timeline-content {
  background:   transparent;
  border-color: transparent;
  box-shadow:   none;
  padding:      4px 0;
}
.timeline-item-o2toit.is-system .timeline-title {
  font-size:   12px;
  font-weight: 500;
  color:       var(--brand-text-muted);
}

/* Séparateur de date */
.timeline-date-separator {
  position:   relative;
  text-align: center;
  margin:     8px 0 12px;
}
.timeline-date-separator::before {
  content:  '';
  position: absolute;
  left:     -28px;
  right:    0;
  top:      50%;
  height:   1px;
  background: var(--brand-border-light);
}
.timeline-date-separator span {
  position:     relative;
  display:      inline-block;
  padding:      2px 10px;
  background:   var(--brand-bg);
  font-size:    11px;
  font-weight:  600;
  color:        var(--brand-text-muted);
  border-radius: var(--brand-radius-pill);
  border:       1px solid var(--brand-border-light);
  font-family:  var(--brand-font);
}

/* ─────────────────────────────────────────────────────────────────────
   3. KPI CARD DASHBOARD — grande carte .kpi-card-o2toit
   Ne touche PAS .kpi-mini-o2toit / .kpi-strip-o2toit (déjà implémentés)
   ─────────────────────────────────────────────────────────────────────
   Utilisation :
     <div class="kpi-card-o2toit kpi-accent-primary">
       <div class="kpi-header">
         <span class="kpi-label">Chiffre d'affaires</span>
         <div class="kpi-icon is-primary"><i class="ri-money-dollar-circle-line"></i></div>
       </div>
       <div class="kpi-value">142 500 €</div>
       <div class="kpi-trend is-up"><i class="ri-arrow-up-line"></i> +12% vs mois dernier</div>
     </div>
   ───────────────────────────────────────────────────────────────────── */

.kpi-card-o2toit {
  background:     var(--brand-bg-card);
  border:         1px solid var(--brand-border-light);
  border-radius:  var(--brand-radius-lg);
  box-shadow:     var(--brand-shadow-sm);
  padding:        20px;
  display:        flex;
  flex-direction: column;
  gap:            8px;
  position:       relative;
  overflow:       hidden;
  transition:     transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.kpi-card-o2toit:hover {
  transform:  translateY(-1px);
  box-shadow: var(--brand-shadow);
}

/* Accents liseré gauche */
.kpi-card-o2toit.kpi-accent-primary { border-left: 3px solid var(--brand-primary); }
.kpi-card-o2toit.kpi-accent-success { border-left: 3px solid var(--brand-success-text); }
.kpi-card-o2toit.kpi-accent-info    { border-left: 3px solid var(--brand-info-text); }
.kpi-card-o2toit.kpi-accent-warning { border-left: 3px solid var(--brand-primary-dark); }

.kpi-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

/* .kpi-icon dans kpi-card-o2toit (variante grande carte) */
.kpi-card-o2toit .kpi-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   var(--brand-radius);
  font-size:       18px;
  flex-shrink:     0;
}

.kpi-card-o2toit .kpi-icon.is-primary { background: var(--brand-primary-xlight); color: var(--brand-primary-dark); }
.kpi-card-o2toit .kpi-icon.is-success { background: var(--brand-success-bg);     color: var(--brand-success-text); }
.kpi-card-o2toit .kpi-icon.is-info    { background: var(--brand-info-bg);         color: var(--brand-info-text); }
.kpi-card-o2toit .kpi-icon.is-warning { background: var(--brand-warning-bg);      color: var(--brand-warning-text); }
.kpi-card-o2toit .kpi-icon.is-neutral { background: var(--brand-neutral-bg);      color: var(--brand-neutral-text); }

/* kpi-trend .is-up / .is-down / .is-neutral — variante avec préfixe is- */
.kpi-trend.is-up      { color: var(--brand-success-text); }
.kpi-trend.is-down    { color: var(--brand-danger-text); }
.kpi-trend.is-neutral { color: var(--brand-text-muted); }
.kpi-trend.is-up i,
.kpi-trend.is-down i,
.kpi-trend.is-neutral i { font-size: 14px; }

/* ─────────────────────────────────────────────────────────────────────
   4. TABS — variantes pill + panneau contenu
   Ne casse PAS .tabs-o2toit / .tab-o2toit / .o2toit-record-tabs (existants)
   ─────────────────────────────────────────────────────────────────────
   .tabs-pill-o2toit = variante compact dans des cartes ou modales
   .tab-panel-o2toit = panneau de contenu (affiché/masqué via .is-active)
   .tab-badge = alias compteur pour rétrocompat (thème documente .tab-count)
   ───────────────────────────────────────────────────────────────────── */

.tabs-pill-o2toit {
  display:       flex;
  align-items:   center;
  gap:           4px;
  background:    var(--brand-bg);
  border:        1px solid var(--brand-border-light);
  border-radius: var(--brand-radius);
  padding:       3px;
}

.tab-pill-item {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         6px 14px;
  border-radius:   6px;
  font-family:     var(--brand-font);
  font-size:       13px;
  font-weight:     600;
  color:           var(--brand-text-muted);
  background:      transparent;
  border:          none;
  cursor:          pointer;
  white-space:     nowrap;
  transition:      background 120ms var(--ease-out),
                   color      120ms var(--ease-out),
                   box-shadow 120ms var(--ease-out);
  min-height:      var(--touch-target-min);
}

.tab-pill-item:hover:not(.is-active) {
  color:      var(--brand-text);
  background: rgba(42, 61, 39, 0.04);
}

.tab-pill-item.is-active {
  background: var(--brand-bg-card);
  color:      var(--brand-primary-dark);
  box-shadow: var(--brand-shadow-sm);
}

/* Panneau de contenu tab */
.tab-panel-o2toit          { display: none; }
.tab-panel-o2toit.is-active { display: block; }

/* .tab-badge — alias de .tab-count pour rétrocompat markup existant */
.tab-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       18px;
  height:          18px;
  padding:         0 5px;
  border-radius:   var(--brand-radius-pill);
  font-size:       10px;
  font-weight:     700;
  line-height:     1;
  background-color: var(--brand-border-light);
  color:           var(--brand-text-muted);
  transition:      background 120ms, color 120ms;
}

/* ─────────────────────────────────────────────────────────────────────
   5. FORMULAIRES — variantes champ manquantes
   Ne casse PAS .form-control / .form-select / .form-label (existants)
   ─────────────────────────────────────────────────────────────────────
   .field-select-o2toit  — select avec chevron O2TOIT SVG inline
   .field-textarea-o2toit — zone de texte multi-lignes
   .field-check-o2toit   — checkbox / radio avec cible tactile
   .field-group-o2toit   — grille 2/3 colonnes pour desktop
   .form-actions-o2toit  — barre boutons en pied de formulaire
   .field-input-clear-o2toit — bouton × pour vider un champ
   .form-section-title-o2toit — titre plat (alternative au header carte)
   ───────────────────────────────────────────────────────────────────── */

.field-select-o2toit {
  width:            100%;
  height:           var(--input-height-mobile);
  padding:          0 36px 0 14px;
  font-family:      var(--brand-font);
  font-size:        var(--text-base);
  font-weight:      400;
  color:            var(--brand-text);
  background:       var(--brand-bg-card)
                    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7E67' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
                    no-repeat right 12px center;
  background-size:  16px;
  border:           1px solid var(--brand-border);
  border-radius:    var(--brand-radius);
  outline:          none;
  cursor:           pointer;
  -webkit-appearance: none;
  appearance:       none;
  transition:       border-color 150ms var(--ease-out),
                    box-shadow   150ms var(--ease-out);
}

.field-select-o2toit:focus {
  border-color: var(--brand-primary);
  box-shadow:   0 0 0 3px rgba(243, 178, 62, 0.20);
}

.field-select-o2toit:disabled {
  background-color: var(--brand-bg);
  color:            var(--brand-text-disabled);
  cursor:           not-allowed;
}

@media (min-width: 992px) {
  .field-select-o2toit { height: var(--input-height-desktop); }
}

.field-textarea-o2toit {
  width:            100%;
  min-height:       96px;
  padding:          12px 14px;
  font-family:      var(--brand-font);
  font-size:        var(--text-base);
  font-weight:      400;
  color:            var(--brand-text);
  background:       var(--brand-bg-card);
  border:           1px solid var(--brand-border);
  border-radius:    var(--brand-radius);
  outline:          none;
  resize:           vertical;
  line-height:      1.5;
  transition:       border-color 150ms var(--ease-out),
                    box-shadow   150ms var(--ease-out);
  -webkit-font-smoothing: antialiased;
}

.field-textarea-o2toit::placeholder { color: var(--brand-text-disabled); }

.field-textarea-o2toit:focus {
  border-color: var(--brand-primary);
  box-shadow:   0 0 0 3px rgba(243, 178, 62, 0.20);
}

.field-textarea-o2toit:disabled {
  background-color: var(--brand-bg);
  color:            var(--brand-text-disabled);
  cursor:           not-allowed;
}

.field-check-o2toit {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  padding:     4px 0;
  min-height:  var(--touch-target-min);
}

.field-check-o2toit input[type="checkbox"],
.field-check-o2toit input[type="radio"] {
  width:       20px;
  height:      20px;
  flex-shrink: 0;
  margin-top:  2px;
  cursor:      pointer;
  accent-color: var(--brand-primary);
}

.field-check-o2toit .check-label {
  font-family:  var(--brand-font);
  font-size:    var(--text-base);
  font-weight:  400;
  color:        var(--brand-text);
  cursor:       pointer;
  line-height:  1.5;
}

.field-check-o2toit .check-hint {
  font-size:  13px;
  color:      var(--brand-text-muted);
  margin-top: 2px;
}

.field-group-o2toit {
  display: grid;
  gap:     16px;
}

@media (min-width: 768px) {
  .field-group-o2toit.cols-2 { grid-template-columns: 1fr 1fr; }
  .field-group-o2toit.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
}

.form-actions-o2toit {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding-top: 20px;
  border-top:  1px solid var(--brand-border-light);
  margin-top:  24px;
  flex-wrap:   wrap;
}

/* Bouton clear sur autocomplete/input piloté */
.field-input-clear-o2toit {
  position:        absolute;
  right:           10px;
  top:             50%;
  transform:       translateY(-50%);
  width:           24px;
  height:          24px;
  display:         none;
  align-items:     center;
  justify-content: center;
  border:          none;
  background:      transparent;
  cursor:          pointer;
  border-radius:   50%;
  color:           var(--brand-text-muted);
  font-size:       16px;
  transition:      background 100ms, color 100ms;
  z-index:         2;
}

.field-input-clear-o2toit.is-visible { display: flex; }
.field-input-clear-o2toit:hover { background: var(--brand-bg); color: var(--brand-text); }

/* Titre plat de section formulaire (sans carte — version épurée) */
.form-section-title-o2toit {
  font-family:    var(--brand-font);
  font-size:      13px;
  font-weight:    700;
  color:          var(--brand-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin:         0 0 16px;
  padding:        0 0 10px;
  border-bottom:  1px solid var(--brand-border-light);
}

/* ─────────────────────────────────────────────────────────────────────
   6. RECORD HERO — complément : sous-titre, statut, header mobile
   Ne casse PAS .record-hero-o2toit / .record-hero-main / etc. (existants)
   ─────────────────────────────────────────────────────────────────────
   .record-hero-subtitle  — ligne de texte secondaire sous le titre
   .record-hero-status    — badge statut inline dans le hero
   .record-hero-top-mobile — zone compacte avatar+nom sur mobile
   ───────────────────────────────────────────────────────────────────── */

/* Sous-titre descriptif sous .record-hero-title (équivalent de .record-hero-fonction) */
.record-hero-subtitle {
  font-family: var(--brand-font);
  font-size:   13px;
  font-weight: 400;
  color:       var(--brand-text-muted);
  margin:      0;
  line-height: 1.4;
}

/* Zone statut dans le hero — accroche visuellement le badge */
.record-hero-status {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  margin-top:  2px;
}

/* Zone compacte mobile : avatar sm + nom sur une ligne */
.record-hero-top-mobile {
  display:     flex;
  align-items: center;
  gap:         10px;
  width:       100%;
}

.record-hero-top-mobile .record-hero-title {
  font-size: 17px;
}

/* ─────────────────────────────────────────────────────────────────────
   7. TABLES — pied de tableau + pagination + search-inline box
   Ne casse PAS les classes existantes .table, .table-responsive, etc.
   ─────────────────────────────────────────────────────────────────────
   .table-footer-o2toit  — pied de tableau (total + pagination)
   .table-count-o2toit   — texte "X résultats"
   .pagination-o2toit    — liste de pages
   .page-btn             — bouton individuel page
   .search-inline-o2toit — note : version box (icône inline avec fond)
                           La version absolute-icon existe déjà ; ici variante
                           box (icône à gauche dans un container flex)
   ───────────────────────────────────────────────────────────────────── */

.table-footer-o2toit {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             12px;
  padding:         12px 16px;
  border-top:      1px solid var(--brand-border-light);
  background:      var(--brand-bg-card);
}

.table-count-o2toit {
  font-family: var(--brand-font);
  font-size:   13px;
  color:       var(--brand-text-muted);
  white-space: nowrap;
}

.table-count-o2toit strong {
  color:       var(--brand-text);
  font-weight: 600;
}

.pagination-o2toit {
  display:     flex;
  align-items: center;
  gap:         4px;
  list-style:  none;
  margin:      0;
  padding:     0;
}

.page-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       32px;
  height:          32px;
  padding:         0 8px;
  font-family:     var(--brand-font);
  font-size:       13px;
  font-weight:     500;
  color:           var(--brand-text-muted);
  background:      transparent;
  border:          1px solid transparent;
  border-radius:   var(--brand-radius);
  cursor:          pointer;
  transition:      background 100ms var(--ease-out),
                   border-color 100ms var(--ease-out),
                   color 100ms var(--ease-out);
  text-decoration: none;
  user-select:     none;
}

.page-btn:hover:not(:disabled):not(.is-active) {
  background:   var(--brand-bg);
  border-color: var(--brand-border);
  color:        var(--brand-text);
}

.page-btn.is-active {
  background:   var(--brand-primary);
  border-color: var(--brand-primary-dark);
  color:        var(--brand-text);
  font-weight:  700;
}

.page-btn:disabled {
  opacity: 0.35;
  cursor:  not-allowed;
}

/* search-inline-o2toit — variante box (icône inline dans un flex container)
   Complémente la variante absolute-icon déjà dans le thème.
   Utiliser quand la search est intégrée dans une toolbar étroite. */
.search-inline-o2toit {
  display:     flex;
  align-items: center;
  gap:         8px;
  background:  var(--brand-bg);
  border:      1px solid var(--brand-border);
  border-radius: var(--brand-radius);
  padding:     0 12px;
  height:      36px;
  min-width:   200px;
  transition:  border-color 150ms var(--ease-out),
               box-shadow   150ms var(--ease-out);
}

.search-inline-o2toit:focus-within {
  border-color: var(--brand-primary);
  box-shadow:   0 0 0 3px rgba(243, 178, 62, 0.15);
}

.search-inline-o2toit i {
  color:       var(--brand-text-muted);
  font-size:   16px;
  flex-shrink: 0;
  pointer-events: none;
}

.search-inline-o2toit input {
  border:      none;
  background:  transparent;
  font-family: var(--brand-font);
  font-size:   14px;
  color:       var(--brand-text);
  outline:     none;
  width:       100%;
  height:      100%;
}

.search-inline-o2toit input::placeholder { color: var(--brand-text-disabled); }

.agenda-side-cal-month {
    text-align: center;
    font-family: var(--brand-font-heading, Raleway, sans-serif);
    font-size: 13px; font-weight: 700; color: var(--brand-text, #2A3D27);
    margin-top: 2px;
}
.agenda-side-cal-dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 4px; }
.agenda-side-cal-dow {
    font-size: 10px; font-weight: 700; color: var(--brand-text-muted, #6B7E67);
    text-align: center; text-transform: uppercase;
}
.agenda-side-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.agenda-side-cal-day {
    aspect-ratio: 1; position: relative;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; color: var(--brand-text, #2A3D27);
    border-radius: 5px; cursor: pointer;
    background: #fff;
    transition: background 0.12s, color 0.12s, box-shadow 0.12s;
    font-variant-numeric: tabular-nums;
}
.agenda-side-cal-day:hover { background: var(--brand-primary-xlight, #FDF3DC); }
.agenda-side-cal-day.is-out { color: var(--brand-text-disabled, #A8B5A4); background: transparent; cursor: default; }
.agenda-side-cal-day.is-out:hover { background: transparent; }
.agenda-side-cal-day.has-rdv { background: var(--brand-primary-xlight, #FDF3DC); color: var(--brand-primary-darker, #B5741A); font-weight: 800; }
.agenda-side-cal-day.has-confirm { background: #FEE2E2; color: #dc2626; font-weight: 800; }
.agenda-side-cal-day.has-confirm:hover { background: #FECACA; }
.agenda-side-cal-day.is-today { box-shadow: inset 0 0 0 2px var(--brand-text, #2A3D27); }
.agenda-side-cal-day.is-today.has-rdv    { box-shadow: inset 0 0 0 2px var(--brand-primary-darker, #B5741A); }
.agenda-side-cal-day.is-today.has-confirm { box-shadow: inset 0 0 0 2px #dc2626; }
.agenda-side-cal-day.is-selected:not(.is-today) { background: var(--brand-text, #2A3D27); color: #fff; font-weight: 800; }
.agenda-side-cal-day.is-selected.has-rdv:not(.is-today) { background: var(--brand-primary-darker, #B5741A); color: #fff; }
.agenda-side-cal-day.is-selected.has-confirm:not(.is-today) { background: #dc2626; color: #fff; }

.agenda-side-cal-footer {
    display: flex; justify-content: space-between;
    font-size: 10.5px; color: var(--brand-text-muted, #6B7E67);
    margin-top: 8px;
}
.agenda-side-cal-footer strong { color: var(--brand-text, #2A3D27); font-weight: 800; }
.agenda-side-cal-footer .confirm-count { color: #dc2626; font-weight: 800; }

/* ─── Zone 2 : RDV du jour sélectionné (scroll) ───────────── */
.agenda-side-day {
    flex: 1 1 auto;
    display: flex; flex-direction: column;
    overflow: hidden;
    background: #fff;
}
.agenda-side-day-head {
    padding: 11px 14px;
    border-bottom: 1px solid var(--brand-border-light, #EDE9E2);
    background: #FFFCF6;
}
.agenda-side-day-head-info { display: flex; flex-direction: column; gap: 1px; }
.agenda-side-day-head-dow {
    font-size: 10px; font-weight: 700; color: var(--brand-text-muted, #6B7E67);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.agenda-side-day-head-date {
    font-family: var(--brand-font-heading, Raleway, sans-serif);
    font-size: 15px; font-weight: 800; color: var(--brand-text, #2A3D27);
    display: inline-flex; align-items: center; gap: 5px;
}
.agenda-side-day-head-date i { color: var(--brand-primary, #F3B23E); font-size: 15px; }
.agenda-side-day-counts { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.agenda-side-day-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
    background: var(--brand-primary-xlight, #FDF3DC); color: var(--brand-primary-darker, #B5741A);
}
.agenda-side-day-chip i { font-size: 11px; }
.agenda-side-day-chip.is-confirm { background: #FEE2E2; color: #dc2626; }

.agenda-side-day-body {
    flex: 1; overflow-y: auto;
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 8px;
}

.agenda-side-section-title {
    font-size: 10px; font-weight: 800; color: var(--brand-text-muted, #6B7E67);
    text-transform: uppercase; letter-spacing: 0.06em;
    padding: 6px 0 0; display: inline-flex; align-items: center; gap: 5px;
}
.agenda-side-section-title i { font-size: 12px; color: #dc2626; }
.agenda-side-section-title.is-rdv i { color: var(--brand-primary, #F3B23E); }

.agenda-side-rdv-card {
    background: #fff;
    border: 1px solid var(--brand-border-light, #EDE9E2);
    border-left: 3px solid var(--brand-primary, #F3B23E);
    border-radius: 8px; padding: 9px 11px;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.agenda-side-rdv-card:hover { border-color: var(--brand-primary, #F3B23E); background: #FFFCF6; box-shadow: 0 1px 3px rgba(243, 178, 62, 0.10); }
.agenda-side-rdv-card.is-confirm { border-left-color: #dc2626; }
.agenda-side-rdv-card.is-confirm:hover { background: #FFF8F8; box-shadow: 0 1px 3px rgba(220, 38, 38, 0.10); }

.agenda-side-rdv-row1 { display: flex; align-items: baseline; gap: 8px; }
.agenda-side-rdv-time {
    font-family: var(--brand-font-heading, Raleway, sans-serif);
    font-weight: 800; font-size: 13.5px; color: var(--brand-text, #2A3D27);
    font-variant-numeric: tabular-nums; min-width: 44px;
}
.agenda-side-rdv-name {
    flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--brand-text, #2A3D27);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agenda-side-rdv-addr {
    font-size: 10.5px; color: var(--brand-text-muted, #6B7E67);
    display: flex; align-items: center; gap: 3px; margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agenda-side-rdv-addr i { font-size: 11px; flex-shrink: 0; }
.agenda-side-rdv-tags { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.agenda-side-rdv-tag {
    font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 5px;
    background: #F0EEE6; color: var(--brand-text-muted, #6B7E67);
}
.agenda-side-rdv-tag.is-commercial { background: var(--brand-primary-xlight, #FDF3DC); color: var(--brand-primary-darker, #B5741A); }
.agenda-side-rdv-tag.is-warn { background: #FEE2E2; color: #dc2626; }
.agenda-side-rdv-tag.is-confirmed { background: #DCFCE7; color: #16A34A; }

.agenda-side-empty {
    padding: 24px 12px; text-align: center;
    color: var(--brand-text-muted, #6B7E67); font-size: 12px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.agenda-side-empty i { font-size: 28px; color: var(--brand-text-disabled, #A8B5A4); }

/* ════════════════════════════════════════════════════════════════════
   Drawer "fiche RDV compacte" — injecté dans .sidebar-drawer-content
   via openSidebarDrawer(). Ouvert au clic sur une card .agenda-side-rdv-card.
   ════════════════════════════════════════════════════════════════════ */
.rdv-drawer { display: flex; flex-direction: column; min-height: 100%; background: #fff; }
.rdv-drawer-head {
    padding: 14px 18px; border-bottom: 1px solid var(--brand-border-light, #EDE9E2);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: #FCFAF4;
}
.rdv-drawer-head-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rdv-drawer-head-dow {
    font-size: 11px; font-weight: 700; color: var(--brand-text-muted, #6B7E67);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.rdv-drawer-head-date {
    font-family: var(--brand-font-heading, Raleway, sans-serif);
    font-size: 16px; font-weight: 800; color: var(--brand-text, #2A3D27);
    display: inline-flex; align-items: center; gap: 6px;
}
.rdv-drawer-head-date i { color: var(--brand-primary, #F3B23E); font-size: 17px; }
.rdv-drawer-close {
    width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto;
    border: 1px solid var(--brand-border, #DDD9D0);
    background: #fff; color: var(--brand-text, #2A3D27); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.rdv-drawer-close:hover { background: var(--brand-primary-xlight, #FDF3DC); color: var(--brand-primary-darker, #B5741A); border-color: var(--brand-primary, #F3B23E); }

.rdv-drawer-tags {
    padding: 10px 18px; background: #fff;
    border-bottom: 1px solid var(--brand-border-light, #EDE9E2);
    display: flex; gap: 6px; flex-wrap: wrap;
}
.rdv-drawer-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
    background: #F0EEE6; color: var(--brand-text-muted, #6B7E67);
}
.rdv-drawer-tag i { font-size: 12px; }
.rdv-drawer-tag.is-ok   { background: #DCFCE7; color: #16A34A; }
.rdv-drawer-tag.is-warn { background: #FEE2E2; color: #dc2626; }

.rdv-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 18px; background: #fff;
    display: flex; flex-direction: column; gap: 12px;
}

.rdv-drawer-field { display: flex; align-items: flex-start; gap: 10px; }
.rdv-drawer-field.is-block { flex-direction: column; gap: 4px; }
.rdv-drawer-label {
    font-size: 10.5px; font-weight: 800; color: var(--brand-text-muted, #6B7E67);
    text-transform: uppercase; letter-spacing: 0.05em;
    display: inline-flex; align-items: center; gap: 4px;
    min-width: 110px; flex: 0 0 auto; padding-top: 2px;
}
.rdv-drawer-label i { color: var(--brand-primary, #F3B23E); font-size: 13px; }
.rdv-drawer-value {
    flex: 1 1 auto; min-width: 0;
    font-size: 13px; color: var(--brand-text, #2A3D27); line-height: 1.45; font-weight: 600;
    word-break: break-word;
}
.rdv-drawer-value a { color: var(--brand-primary-darker, #B5741A); text-decoration: none; font-weight: 700; }
.rdv-drawer-value a:hover { text-decoration: underline; }
.rdv-drawer-comment {
    background: #FCFAF4; border: 1px solid var(--brand-border-light, #EDE9E2);
    border-radius: 8px; padding: 8px 10px;
    font-weight: 500;
}

.rdv-drawer-foot {
    padding: 12px 18px; border-top: 1px solid var(--brand-border-light, #EDE9E2);
    background: #FCFAF4;
    display: flex; justify-content: stretch;
}
.rdv-drawer-btn-primary {
    flex: 1; padding: 9px 14px;
    background: linear-gradient(135deg, var(--brand-primary, #F3B23E), var(--brand-primary-dark, #D4922A));
    color: #fff; border: 0; border-radius: 8px;
    font-family: var(--brand-font-heading, Raleway, sans-serif); font-size: 13px; font-weight: 700;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: filter 0.15s, box-shadow 0.15s, transform 0.15s;
}
.rdv-drawer-btn-primary i { font-size: 15px; }
.rdv-drawer-btn-primary:hover { filter: brightness(1.05); box-shadow: 0 4px 10px rgba(243, 178, 62, 0.30); transform: translateY(-1px); }

.rdv-drawer-empty {
    flex: 1; padding: 32px 16px; text-align: center;
    color: var(--brand-text-muted, #6B7E67); font-size: 13px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.rdv-drawer-empty i { font-size: 36px; color: var(--brand-text-disabled, #A8B5A4); }

/* =============================================================
   MODULE ACTUALITÉ — Mur d'actualités
   ============================================================= */

/* ─── Post card ──────────────────────────────────────────────── */
.actualite-mur-wrapper { max-width: 100%; }

/* Carte post : pas de soulèvement au survol (un fil se lit, il ne navigue pas) */
.actualite-card-post:hover {
    transform: none;
    box-shadow: var(--brand-shadow-sm);
    border-color: var(--brand-border-light);
}
.actualite-card-post:hover::before { opacity: 0; }

/* ─── Mise en valeur du non-vu (notifications) ───────────────── */
.actualite-card-post.is-new { border-left: 3px solid var(--brand-primary, #F3B23E); }
.actualite-new-pill {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap;
    padding: 4px 9px; border-radius: 999px;
    background: var(--brand-primary-xlight, #FDF3DC);
    color: var(--brand-primary-darker, #B5741A);
    border: 1px solid var(--brand-primary, #F3B23E);
}
.actualite-new-pill i { font-size: 12px; color: var(--brand-primary, #F3B23E); }
.actualite-new-coms-flag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600;
    color: var(--brand-primary-darker, #B5741A);
    margin: 8px 0 2px;
}
.actualite-new-coms-flag i { font-size: 14px; }
.actualite-comment-row.is-new {
    background: var(--brand-primary-xlight, #FDF3DC);
    border-radius: 8px;
    padding-left: 8px; padding-right: 8px;
    box-shadow: inset 3px 0 0 var(--brand-primary, #F3B23E);
}
.actualite-card-post.is-focus-pulse { animation: actualiteFocusPulse 2.2s ease; }
@keyframes actualiteFocusPulse {
    0%   { box-shadow: 0 0 0 0 rgba(243,178,62,0); }
    12%  { box-shadow: 0 0 0 4px rgba(243,178,62,0.5); }
    100% { box-shadow: 0 0 0 0 rgba(243,178,62,0); }
}

.actualite-post-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
}

.actualite-post-titre {
    font-size: 16px; font-weight: 700; color: var(--brand-text);
    margin: 0 0 8px 0; line-height: 1.3;
    font-family: var(--brand-font-heading, Raleway, sans-serif);
}

.actualite-post-corps {
    font-size: 14px; color: var(--brand-text); line-height: 1.6;
    margin-bottom: 4px;
}
.actualite-post-corps p { margin: 0 0 6px 0; }
.actualite-post-corps ul, .actualite-post-corps ol { margin: 4px 0 8px 20px; }

/* ─── Pièces jointes ─────────────────────────────────────────── */
.actualite-images-grid {
    display: grid; gap: 8px; grid-template-columns: 1fr 1fr;
}
.actualite-images-grid.is-single { grid-template-columns: 1fr; }
.actualite-image-link { display: block; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--brand-border); }
.actualite-image-thumb {
    width: 100%; display: block; object-fit: cover;
    transition: transform 0.2s;
}
/* 1 image : pleine largeur du conteneur, ratio naturel plafonné */
.actualite-images-grid.is-single .actualite-image-thumb { height: auto; max-height: 560px; }
/* 2+ images : grille régulière, vignettes cadrées */
.actualite-images-grid.is-multi .actualite-image-thumb { height: 220px; }
.actualite-image-link:hover .actualite-image-thumb { transform: scale(1.02); }

.actualite-pdfs-list { display: flex; flex-wrap: wrap; gap: 8px; }
.actualite-pdf-tuile {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; background: var(--brand-warning-bg);
    border: 1px solid var(--brand-warning-border);
    border-radius: var(--brand-radius); font-size: 12px; font-weight: 600;
    color: var(--brand-warning-text); text-decoration: none;
    transition: background 0.15s;
}
.actualite-pdf-tuile:hover { background: var(--brand-primary-light); color: var(--brand-text); }
.actualite-pdf-tuile i { font-size: 16px; flex-shrink: 0; }

/* ─── Commentaires ───────────────────────────────────────────── */
.actualite-comment-row {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--brand-border-light);
}
.actualite-comment-row:last-of-type { border-bottom: none; }

.actualite-comment-content { flex: 1; min-width: 0; }
.actualite-comment-author {
    font-size: 12px; font-weight: 600; color: var(--brand-text);
    margin-right: 6px;
}
.actualite-comment-date {
    font-size: 11px; color: var(--brand-text-muted);
}
.actualite-comment-texte {
    font-size: 13px; color: var(--brand-text); line-height: 1.5;
    margin-top: 2px;
}
.actualite-no-comments {
    font-size: 12px; color: var(--brand-text-disabled); padding: 4px 0;
}

/* ─── Composer ───────────────────────────────────────────────── */
.actualite-quill-editor {
    min-height: 80px; max-height: 400px;
    overflow-y: auto;
    font-size: 14px;
}

.actualite-pieces-dropzone {
    border: 2px dashed var(--brand-border);
    border-radius: var(--brand-radius);
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.actualite-pieces-dropzone:hover,
.actualite-pieces-dropzone.is-drag-over {
    border-color: var(--brand-primary);
    background: var(--brand-primary-xlight);
}
.actualite-dropzone-label {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; color: var(--brand-text-muted); font-size: 13px;
    margin: 0;
}
.actualite-dropzone-label i { font-size: 20px; color: var(--brand-primary); }

.actualite-pieces-preview {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.actualite-piece-preview-item {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px; background: var(--brand-secondary-xlight);
    border: 1px solid var(--brand-border); border-radius: 6px;
    font-size: 12px;
}
.actualite-piece-icon i { font-size: 16px; color: var(--brand-primary-dark); }
.actualite-piece-nom { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--brand-text); }
.actualite-piece-taille { color: var(--brand-text-muted); font-size: 11px; }
.actualite-piece-remove { padding: 2px 4px; width: 22px; height: 22px; }

/* ─── Sidebar catégories ─────────────────────────────────────── */
.actualite-sidebar-cat-btn {
    display: block; width: 100%; text-align: left;
    padding: 8px 16px; background: none; border: none;
    font-size: 13px; color: var(--brand-text);
    cursor: pointer; transition: background 0.12s;
}
.actualite-sidebar-cat-btn:hover {
    background: var(--brand-secondary-xlight);
    color: var(--brand-primary-dark);
}

/* ─── Avatar XS pour commentaires ───────────────────────────── */
.avatar-o2toit.avatar-xs {
    width: 24px; height: 24px; font-size: 10px;
}

/* ─── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .actualite-images-grid.is-multi .actualite-image-thumb { height: 150px; }
    .actualite-post-titre { font-size: 15px; }
    .actualite-post-corps { font-size: 13px; }
}

/* =============================================================
   CLOCHE — Centre de notifications topbar (Lot 3)
   Dropdown à 3 sections : Rappels / Frigo / Actualités
   Pattern Hyper : même structure que le dropdown avatar
   ============================================================= */

/* Contenu du dropdown cloche */
.notif-dropdown-cloche {
    min-width: 320px;
    max-width: 360px;
    padding: 0;
    border: 1px solid var(--brand-border-light);
    border-radius: var(--brand-radius-lg);
    box-shadow: var(--brand-shadow-lg);
    overflow: hidden;
}

/* Header du dropdown */
.notif-dropdown-header {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--brand-border-light);
    background: var(--brand-bg-card);
}
.notif-dropdown-header h6 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-text);
    font-family: var(--brand-font-heading);
}

/* Titre de section dans le dropdown */
.notif-section-title {
    padding: 8px 16px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--brand-text-disabled);
    background: var(--brand-bg);
}

/* Item de section (Rappels / Frigo) */
.notif-item-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    color: var(--brand-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.12s;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}
.notif-item-nav:hover {
    background: var(--brand-primary-xlight);
    color: var(--brand-primary-darker);
}
.notif-item-nav .notif-count-pill {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--brand-radius-pill);
    background: var(--brand-danger-bg);
    color: var(--brand-danger-text);
    font-size: 11px;
    font-weight: 700;
}
.notif-item-nav .notif-count-pill.zero {
    background: var(--brand-neutral-bg);
    color: var(--brand-text-muted);
}

/* Divider entre sections */
.notif-divider {
    height: 1px;
    background: var(--brand-border-light);
    margin: 0;
}

/* Items actualité (liste jusqu'à 5) */
.notif-item-actu {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 16px;
    color: var(--brand-text);
    font-size: 12px;
    text-decoration: none;
    transition: background 0.12s;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}
.notif-item-actu:hover {
    background: var(--brand-primary-xlight);
}
.notif-item-actu .notif-actu-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-secondary-xlight);
    color: var(--brand-secondary-darker);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-top: 1px;
}
.notif-item-actu .notif-actu-body { flex: 1; min-width: 0; }
.notif-item-actu .notif-actu-libelle {
    font-size: 12px;
    font-weight: 500;
    color: var(--brand-text);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-item-actu .notif-actu-temps {
    font-size: 11px;
    color: var(--brand-text-muted);
    margin-top: 1px;
}

/* Message "aucune notif" */
.notif-empty {
    padding: 10px 16px;
    font-size: 12px;
    color: var(--brand-text-muted);
    font-style: italic;
}

/* Footer dropdown */
.notif-footer {
    padding: 8px 16px;
    border-top: 1px solid var(--brand-border-light);
    background: var(--brand-bg);
    text-align: center;
}
.notif-footer a {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-primary-dark);
    text-decoration: none;
}
.notif-footer a:hover { color: var(--brand-primary-darker); text-decoration: underline; }