/* =========================
   Variables (consolidées)
   ========================= */
:root{
  /* Couleurs marque et aliases */
  --df-brand:#005893;          /* Bleu Doussou */
  --df-blue:#005893;           /* alias Bootstrap */
  --dfb:#005893;               /* alias pour les tabs custom */

  /* Texte & UI */
  --df-text:#0f172a;           /* Slate-900 */
  --df-muted:#64748b;          /* Slate-500 */
  --df-line:#e5e7eb;           /* Gray-200 */
  --df-bg:#ffffff;

  /* Chips */
  --df-chip-bg:#f8fafc;        /* Slate-50 */
  --df-chip-br:#e2e8f0;        /* Slate-200 */

  /* États */
  --df-error:#b91c1c;
  --df-ok:#16a34a;

  /* Rayons & espacements */
  --df-radius:12px;
  --df-gap:12px;
  --df-space:12px;
}

/* =========================
   Grille cartes & UI
   ========================= */
.df-grid-compact{
  display:grid;
  grid-template-columns:repeat(3, minmax(240px, 1fr));
  gap:var(--df-gap);
  margin-top: var(--df-gap);
}
@media (max-width: 1024px){
  .df-grid-compact{ grid-template-columns:repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 640px){
  .df-grid-compact{ grid-template-columns:1fr; }
}

.df-card{
  border:1px solid var(--df-line);
  border-radius:var(--df-radius);
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  overflow:hidden;
  transition: transform .15s ease, box-shadow .25s ease;
}
.df-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

.df-card__header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--df-line);
  background:linear-gradient(180deg,#fff 0%, #fafafa 100%);
}
.df-badge{
  width:6px; height:20px; border-radius:999px;
  background:var(--df-brand); display:inline-block;
}
.df-card__title{
  margin:0; font-size:16px; font-weight:700;
  color:var(--df-text); letter-spacing:.2px;
}

.df-dates{
  list-style:none; margin:0; padding:8px 10px 10px;
  display:flex; flex-direction:column; gap:8px;
}
.df-dates__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:8px 6px;
  border:1px solid var(--df-line);
  border-radius:10px; background:#fff;
}
@media (max-width:540px){
  .df-dates__row{ flex-direction:column; align-items:stretch; }
}
.df-dates__info{ min-width:0; }

.df-chips{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.df-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; font-size:13px; line-height:1;
  color:var(--df-text);
  background:var(--df-chip-bg);
  border:1px solid var(--df-chip-br);
  border-radius:999px; white-space:nowrap;
}
/* Variante “récapitulatif” si besoin */
.df-chip--recap{
  border-style:dashed; padding:6px 10px; font-size:14px;
}

.df-dates__action{ flex:0 0 auto; }

.df-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; font-weight:700;
  border-radius:10px; padding:10px 14px; cursor:pointer;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
  border:1px solid transparent; background:var(--df-brand); color:#fff;
  outline:none;
}
.df-btn:hover{ box-shadow:0 4px 14px rgba(0,88,147,.25); }
.df-btn:active{ transform:translateY(1px); }
.df-btn[disabled]{ opacity:.6; cursor:not-allowed; box-shadow:none; }

/* Version ghost (dé-doublonnée & fusionnée) */
.df-btn--ghost{
  border:1px solid var(--df-brand);
  background:linear-gradient(180deg,#fff,#f9fafb);
  color:var(--df-brand);
  transition:all .2s ease;
}
.df-btn--ghost:hover{
  background:#005893; color:#fff;
  box-shadow:0 2px 6px rgba(0,88,147,.3);
}

.df-pick-date:hover{ background:#005893; color:#fff; }
.is-hidden{ display:none !important; }

/* Badges par lieu */
.df-card[data-lieu="En ligne"] .df-badge { background:#0284c7; }
.df-card[data-lieu="Montréal"] .df-badge { background:#7c3aed; }
.df-card[data-lieu="Québec"] .df-badge { background:#16a34a; }

/* =========================
   Formulaire & champs
   ========================= */
.df-label{
  display:block; font-weight:600; margin:0 0 6px; color:var(--df-text);
}
.df-input,.df-textarea,.df-select,
.df-input[type="email"],.df-input[type="number"]{
  width:100%; border:1px solid var(--df-line); border-radius:10px;
  padding:10px 12px; font-size:16px; color:var(--df-text); background:#fff;
  transition:border-color .15s ease, box-shadow .2s ease;
}
.df-input:focus,.df-textarea:focus,.df-select:focus{
  border-color:var(--df-brand); outline:0;
  box-shadow:0 0 0 3px rgba(0,88,147,.15);
}
.df-hint{ color:var(--df-muted); font-size:13px; }

.df-row{ display:flex; gap:12px; }
.df-col{ flex:1; min-width:0; }
@media (max-width:680px){ .df-row{ flex-direction:column; } }

/* États d’erreur / succès */
.df-field--error .df-input,
.df-field--error .df-textarea,
.df-field--error .df-select{
  border-color:var(--df-error);
  box-shadow:0 0 0 3px rgba(185,28,28,.12);
}
.df-field__msg{ margin-top:6px; font-size:13px; color:var(--df-error); }
.df-ok{ color:var(--df-ok); }

/* =========================
   Tabs – Bootstrap overrides
   (gardés avec !important)
   ========================= */
/* Variables BS */
:root,
:root[data-bs-theme="light"]{
  --bs-nav-tabs-link-active-bg: var(--df-blue);
  --bs-nav-tabs-link-active-color: #fff;
  --bs-nav-tabs-border-color: transparent;
  --bs-nav-tabs-link-hover-border-color: transparent;
}
.nav-tabs{
  background-color: var(--df-blue) !important;
  border-bottom: 0 !important;
}
.nav-tabs .nav-link{
  display:block;
  color:#fff !important;
  background-color: var(--df-blue) !important;
  border:0 !important; box-shadow:none !important; transition:none !important;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus{
  color:#fff !important; background-color: var(--df-blue) !important;
  border-color:transparent !important; outline:none !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link{
  color:#fff !important; background-color: var(--df-blue) !important;
  border-color:transparent !important; box-shadow:none !important;
}
/* Renfort si thème très spécifique */
body .nav-tabs .nav-link,
body .nav-tabs .nav-link:hover,
body .nav-tabs .nav-link:focus,
body .nav-tabs .nav-link.active{
  background-color: var(--df-blue) !important;
  color:#fff !important; border-color:transparent !important;
}

/* =========================
   Tabs – Composant custom
   (titres .df-tab avec !important)
   ========================= */
.df-tabs{
  display:flex; gap:8px; margin:0 0 14px; border-bottom:1px solid var(--df-line);
}

/* TITRE D’ONGLET – Inactif (prioritaire) */
.df-tab{
  appearance:none;
  border:1px solid transparent !important;   /* évite le “saut” à l’activation */
  border-bottom-color:transparent !important;
  background:none !important;
  color:var(--df-muted) !important;
  font-weight:700 !important;
  padding:10px 14px !important;
  border-radius:10px 10px 0 0 !important;
  cursor:pointer !important;
  line-height:1 !important;
  transition:background .15s, color .15s, border-color .15s !important;
}

/* Hover / Focus (prioritaires) */
.df-tab:hover{
  background:#eef6fb !important;
}
.df-tab:focus-visible{
  outline:2px solid var(--dfb) !important;
  outline-offset:2px !important;
}

/* Actif (source de vérité, prioritaire) */
.df-tab[aria-selected="true"],
.df-tab.is-active{
  background:var(--dfb) !important;
  color:#fff !important;
  border-color:var(--dfb) !important;
  border-bottom-color:transparent !important;
}

/* Désactivé */
.df-tab[disabled],
.df-tab[aria-disabled="true"]{
  opacity:.5 !important; cursor:not-allowed !important; pointer-events:none !important;
}

/* Panneau de contenu */
.df-tabpanel{
  background:var(--df-bg);
  border:1px solid var(--df-line);
  border-top:0; padding:16px;
  border-radius:0 12px 12px 12px;
}


.df-tab {
  border: 1px solid rgba(0, 88, 147, 0.4) !important; /* bleu Doussou atténué */
  border-radius: 8px;
  padding: 8px 12px;
  display: inline-block;
  background-color: #fff;
}