/* === Filtres style "Permis B / Permis CPF" === */
.offsync-toolbar{display:flex; justify-content:flex-end; margin:6px 0 14px 0; flex-wrap:wrap;}
.offsync-filter-group{display:flex;gap:12px;flex-wrap:wrap}

/* Base inactif : contour bleu, fond bleu très clair, texte bleu */
.offsync-chip{
  --chip-blue: #3B82F6;           /* bleu principal */
  --chip-blue-weak: #EAF2FF;      /* fond inactif */
  appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 18px;
  border-radius:4px;
  border:1.5px solid var(--chip-blue);
  background:var(--chip-blue-weak);
  color:var(--chip-blue);
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Hover inactif */
.offsync-chip:not(.is-active):hover{
  background:#DCE9FF;             /* un peu plus soutenu au survol */
}

/* Actif : plein bleu, texte blanc */
.offsync-chip.is-active{
  background:var(--chip-blue);
  color:#fff;
  border-color:var(--chip-blue);
  box-shadow:0 2px 0 rgba(59,130,246,.15);
}

/* Focus clavier visible */
.offsync-chip:focus-visible{
  outline:3px solid rgba(59,130,246,.35);
  outline-offset:2px;
}

/* Optionnel : réduire la taille sur écrans étroits */
@media (max-width:480px){
  .offsync-chip{ padding:8px 14px; border-radius:2px; }
}


/* Grille responsive */
.offsync-classic-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:22px;
  width:100%;
  box-sizing:border-box;
}

/* Sous 640px : 1 colonne forcée */
@media (max-width: 640px){
  .offsync-classic-grid{ grid-template-columns: 1fr; }
}

/* ===== Carte + thème (set accent color) ===== */
.offsync-classic-card{--accent:#F73D93; background:#fff;border:1px solid #ebeef3;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.06);overflow:hidden;display:flex;flex-direction:column}
.offsync-classic-card.is-man{--accent:#F73D93}
.offsync-classic-card.is-auto{--accent:#2D9CDB}
.offsync-classic-card.is-cpf{--accent:#2D9CDB}

/* Header ruban */
.classic-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  background:var(--accent); color:#fff; font-weight:800; border-radius:14px 14px 0 0}
.classic-title{font-size:18px;letter-spacing:.2px}

/* Pill à droite (blanc, texte dans l'accent) */
.classic-pill{font-size:13px;font-weight:700;background:#fff;color:var(--accent);
  padding:8px 14px;border-radius:999px;border:2px solid #fff; box-shadow:0 2px 0 rgba(0,0,0,.05)}

/* Sous-titre (heures) */
.classic-subtitle{font-size:22px;margin:18px 18px 10px 18px;color:#2e2e2e}

/* Séparateur épais */
.classic-sep{height:2px;background:#e9edf3;margin:0 18px}

/* Liste des points */
.classic-content{padding:12px 26px 0 26px}
.classic-content ul{list-style:none;margin:0;padding:0}
.classic-content li{display:flex;align-items:flex-start;gap:10px;margin:12px 0;font-weight:600;color:#3a3a3a}
.classic-content li::before{
  content:'✔';font-weight:900;margin-top:0.1em;color:var(--accent); /* coche dans la couleur thème */
}

/* Footer: prix + CTA */
.classic-footer{display:flex;align-items:center;justify-content:space-between;padding:18px;border-top:1px solid #eef1f6}
.classic-price{font-size:34px;line-height:1;font-weight:900;display:flex;gap:4px;align-items:flex-end;color:var(--accent)}
.classic-price span{font-size:.8em;font-weight:800;color:var(--accent)}

/* Bouton contour arrondi, teinte thème */
.classic-btn{
  border:2px solid var(--accent); color:var(--accent);
  padding:12px 18px;border-radius:999px;text-decoration:none;background:#fff;font-weight:700;
  transition:background .2s ease,color .2s ease, box-shadow .2s ease
}
.classic-btn:hover{background:var(--accent);color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.08)}


/* --- Fix responsivité widget AVEC filtres --- */
.offsync-wrap{display:block; width:100%; max-width:100%; overflow-x:hidden;}

.offsync-toolbar{
  display:flex;
  justify-content:flex-end;
  margin:6px 0 14px 0;
  flex-wrap:wrap;         /* permet de passer à la ligne */
}
.offsync-filter-group{
  display:flex;
  gap:12px;
  flex-wrap:wrap;         /* idem */
  max-width:100%;
}

/* Grille : forcer la version responsive même dans un contexte Elementor */
.offsync-wrap .offsync-classic-grid{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap:22px;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

/* Sous 640px -> 1 colonne forcée (au cas où un parent impose une largeur) */
@media (max-width: 640px){
  .offsync-wrap .offsync-classic-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Empêcher les cartes d'imposer une largeur mini (contexte flex/Elementor) */
.offsync-wrap .offsync-classic-card{
  min-width:0 !important;
  max-width:100% !important;
  width:auto !important;
  flex: 0 1 auto !important;   /* neutralise d'éventuels "flex-basis" hérités */
}

/* En dernier recours si un thème force display:flex sur la grille */
.offsync-wrap .offsync-classic-grid > *{
  min-width:0;
}

/* ===== Ticker annonces – style bandeau ===== */
/* Conteneur du ticker */
.sdl-ticker{
  position: relative;
  display: flex;            /* ✅ aligne les deux pistes côte à côte */
  overflow: hidden;
  width: 100%;
  background: #E8E8FF;
  color: #3A3A3A;
  white-space: nowrap;      /* ✅ empêche tout retour à la ligne */
}

/* Chaque piste (originale + clone) */
.sdl-ticker__track{
  display: flex;            /* ✅ plus de inline-flex */
  flex: 0 0 auto;           /* ✅ ne se rétrécit pas, reste à sa largeur intrinsèque */
  gap: 32px;
  align-items: center;
  padding: 10px 18px;
  will-change: transform;
  white-space: nowrap;      /* sécurité */
}

/* Optionnel: un petit espace entre les deux pistes */
.sdl-ticker__track--clone{
  margin-left: 32px;
}


.sdl-ticker__item{
  font-weight:800;                  /* texte bien affirmé */
  font-size:16px;
  line-height:1.25;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding-right:12px;
  position:relative;
}

/* Séparateur étoile rose entre items (sauf le dernier de la piste) */
.sdl-ticker__item:not(:last-child)::after{
  content:"⭐";
  color:#FF69B4;                    /* rose vif du séparateur */
  margin-left:12px;
  opacity:.9;
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .sdl-ticker__track{ animation:none !important; }
}

/* Adaptation mobile (un peu plus compact) */
@media (max-width: 480px){
  .sdl-ticker__track{ gap:20px; padding:8px 12px; }
  .sdl-ticker__item{ font-size:14px; }
}