.elementor-254 .elementor-element.elementor-element-4459713a{--display:flex;--margin-top:-65px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-254 .elementor-element.elementor-element-4459713a:not(.elementor-motion-effects-element-type-background), .elementor-254 .elementor-element.elementor-element-4459713a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}@media(max-width:767px){.elementor-254 .elementor-element.elementor-element-1db3ee9d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}}@media(min-width:768px){.elementor-254 .elementor-element.elementor-element-4459713a{--content-width:1325px;}}/* Start custom CSS for shortcode, class: .elementor-element-1db3ee9d *//* ==========================================================
   RESKIN CATALOGUE DE FORMATIONS — Tutor LMS (shortcode tutor_course)
   À coller dans : Elementor > Réglages du site > CSS personnalisé
   ou Apparence > Personnaliser > CSS additionnel
   ========================================================== */

/* --- Variables de marque (ajuste les couleurs à ta charte) --- */
:root {
  --ne-primary: #00A6AF;      /* couleur d'accent (boutons, liens actifs) */
  --ne-text: #111111;
  --ne-muted: #8b8f97;
  --ne-border: #e6e7eb;
  --ne-bg-soft: #f8f9fb;
  --ne-sidebar-bg: #f5f6f8;   /* 👉 COULEUR DU FOND GRIS DU BLOC FILTRES — change ici */
  --ne-sidebar-radius: 18px;  /* 👉 ARRONDI DU BLOC FILTRES — change ici */
  --ne-sidebar-padding: 24px; /* 👉 ESPACEMENT INTÉRIEUR DU BLOC FILTRES — change ici */
  --ne-radius: 14px;
}

/* ==========================================================
   1. BARRE DE RECHERCHE
   ========================================================== */
.tutor-course-filter-search,
.tutor-course-search-field {
  border: 1px solid var(--ne-border) !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  background: #fff !important;
}

.tutor-course-filter-search input,
.tutor-course-search-field input {
  font-size: 15px;
  color: var(--ne-text);
}

/* ==========================================================
   2. DROPDOWN DE TRI (Populaires / Nouveautés / Prix)
   Reskin visuel du <select> natif — Tutor LMS ne propose pas
   d'onglets segmentés en natif ; pour un vrai design "pills"
   comme sur ta maquette il faudrait un peu de JS. Ici on
   se contente d'un dropdown propre et cohérent avec le reste.
   ========================================================== */
.tutor-course-filter-sort select,
.tutor-form-select {
  border: 1px solid var(--ne-border) !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-weight: 500;
  color: var(--ne-text);
  background-color: #fff !important;
}

/* ==========================================================
   3. SIDEBAR DE FILTRES (Type, Catégorie, Niveau, Prix)
   ========================================================== */
/* 👉 BLOC PRINCIPAL DE LA SIDEBAR : c'est ICI que se règle le fond gris,
   l'arrondi et l'espacement intérieur visibles sur ta maquette.
   Si le fond ne s'applique pas, c'est que le vrai wrapper a une autre
   classe chez toi : inspecte l'élément qui entoure "Rechercher" +
   "Domaine" + "Niveau" + "Format" en un seul bloc, et remplace le
   sélecteur ci-dessous par la classe trouvée. */
.tutor-course-filter,
.tutor-archive-filter-bar,
[class*="tutor-course-filter-widget"] {
  background: var(--ne-sidebar-bg) !important;
  border-radius: var(--ne-sidebar-radius) !important;
  padding: var(--ne-sidebar-padding) !important;
}

/* La recherche doit rester blanche pour contraster sur le fond gris */
.tutor-course-filter .tutor-course-filter-search,
.tutor-course-filter .tutor-course-search-field {
  background: #fff !important;
}

/* Bouton "Appliquer les filtres" en bas du bloc */
.tutor-course-filter .tutor-btn,
.tutor-course-filter-apply-btn {
  background: var(--ne-primary) !important;
  border-color: var(--ne-primary) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 600;
  width: 100%;
  padding: 12px !important;
}

/* Garder la couleur de marque au survol (au lieu de la couleur par
   défaut du thème/Elementor) — s'applique à tous les boutons pleins
   du bloc filtres : Appliquer, Effacer, etc. */
.tutor-course-filter .tutor-btn:hover,
.tutor-course-filter .tutor-btn:focus,
.tutor-course-filter-apply-btn:hover,
.tutor-course-filter-apply-btn:focus {
  background: var(--ne-primary) !important;
  border-color: var(--ne-primary) !important;
  color: #fff !important;
  opacity: 0.92;
}

/* Bouton "Effacer tous les filtres" — texte blanc forcé pour rester
   lisible sur le fond coloré (le thème lui applique probablement la
   même couleur en texte et en fond, ce qui le rend invisible) */
.tutor-course-filter .tutor-btn-secondary,
.tutor-course-filter [class*="clear-filter"],
.tutor-course-filter [class*="reset-filter"],
.tutor-course-filter a[href*="clear"],
.tutor-course-filter-clear-btn {
  background: var(--ne-primary) !important;
  border-color: var(--ne-primary) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
}

.tutor-course-filter .tutor-btn-secondary:hover,
.tutor-course-filter [class*="clear-filter"]:hover,
.tutor-course-filter [class*="reset-filter"]:hover,
.tutor-course-filter-clear-btn:hover {
  background: var(--ne-primary) !important;
  color: #ffffff !important;
  opacity: 0.92;
}

/* Filet de sécurité : force le texte en blanc pour TOUT bouton plein
   coloré à l'intérieur du bloc filtres, peu importe sa classe exacte */
.tutor-course-filter a.tutor-btn,
.tutor-course-filter button.tutor-btn {
  color: #ffffff !important;
}

/* ==========================================================
   FORMAT (Payant / Gratuit) — boutons segmentés côte à côte
   comme sur la maquette, plutôt que des checkboxes empilées.
   ⚠️ Si Tutor LMS rend ce filtre en checkboxes chez toi (et non
   en 2 boutons), cette section ne s'applique pas telle quelle —
   dis-le moi et je l'adapte en fonction du vrai HTML généré.
   ========================================================== */
.tutor-price-type-filter,
[class*="tutor-course-filter-price"] {
  display: flex !important;
  gap: 8px;
}

.tutor-price-type-filter label,
[class*="tutor-course-filter-price"] label {
  flex: 1;
  text-align: center;
  border: 1px solid var(--ne-border) !important;
  border-radius: 10px !important;
  padding: 10px !important;
  background: #fff !important;
  font-weight: 500;
  cursor: pointer;
}

/* Titres de section ("Type", "Catégorie", "Niveau") */
.tutor-course-filter h3,
.tutor-course-filter .tutor-fs-6,
.tutor-course-filter-item-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ne-text) !important;
  margin-bottom: 12px !important;
  margin-top: 24px !important;
}

/* Ligne de checkbox (label + compteur) */
.tutor-course-filter-item,
.tutor-form-check {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 0 !important;
  border: none !important;
}

.tutor-course-filter-item label,
.tutor-form-check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--ne-text);
  cursor: pointer;
}

/* Compteur discret à droite (ex: "6") */
.tutor-course-filter-item .tutor-fs-7,
.tutor-course-filter-item-count,
.tutor-form-check-label .tutor-color-muted {
  color: var(--ne-muted) !important;
  font-size: 13px !important;
  font-weight: 500;
}

/* Cases à cocher custom */
.tutor-form-check-input,
.tutor-course-filter-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: 5px !important;
  border: 1.5px solid var(--ne-border) !important;
  accent-color: var(--ne-primary);
  cursor: pointer;
}

.tutor-form-check-input:checked {
  background-color: var(--ne-primary) !important;
  border-color: var(--ne-primary) !important;
}

/* ==========================================================
   4. CARTES DE COURS
   ========================================================== */
.tutor-course-card,
.tutor-card {
  border: 1px solid var(--ne-border) !important;
  border-radius: var(--ne-radius) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.tutor-course-card:hover,
.tutor-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08) !important;
}

/* Image de couverture aux coins arrondis en haut uniquement */
.tutor-course-card .tutor-ratio,
.tutor-card .tutor-ratio {
  border-radius: var(--ne-radius) var(--ne-radius) 0 0 !important;
  overflow: hidden;
}

/* Badge de niveau (Débutant / Intermédiaire) en haut à gauche de l'image */
.tutor-course-card .tutor-badge-label,
.tutor-course-level-badge {
  background: rgba(255,255,255,0.92) !important;
  color: var(--ne-text) !important;
  font-size: 12px !important;
  font-weight: 600;
  padding: 5px 12px !important;
  border-radius: 999px !important;
}

/* Nom de catégorie au-dessus du titre (ex: "MARKETING DIGITAL") */
.tutor-course-card .tutor-course-category,
.tutor-card-category {
  color: var(--ne-primary) !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Titre du cours */
.tutor-course-card .tutor-card-title,
.tutor-course-name a {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ne-text) !important;
  line-height: 1.35;
}

/* Prix en bas de carte */
.tutor-course-price,
.tutor-course-card .price {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ne-text) !important;
}

/* Durée / infos meta (icônes + texte gris) */
.tutor-meta,
.tutor-course-card .tutor-color-muted {
  color: var(--ne-muted) !important;
  font-size: 13px !important;
}

/* ==========================================================
   5. GRILLE — espacement cohérent
   ========================================================== */
.tutor-grid,
.tutor-grid-3 {
  gap: 24px !important;
}

/* ==========================================================
   6. BOUTONS DES CARTES DE COURS ("Inscription au cours",
   "Commencer à apprendre") — même logique de couleur au survol
   ========================================================== */
.tutor-course-card .tutor-btn,
.tutor-card .tutor-btn {
  border-color: var(--ne-primary) !important;
}

.tutor-course-card .tutor-btn:hover,
.tutor-card .tutor-btn:hover,
.tutor-course-card .tutor-btn:focus,
.tutor-card .tutor-btn:focus {
  background: var(--ne-primary) !important;
  border-color: var(--ne-primary) !important;
  color: #fff !important;
  opacity: 0.92;
}

/* ==========================================================
   NOTE : les noms de classes ci-dessus correspondent aux
   conventions standards de Tutor LMS. Si une règle ne
   s'applique pas visuellement, ouvre l'inspecteur (clic droit
   > Inspecter) sur l'élément concerné, récupère la vraie classe
   affichée, et remplace-la ici — envoie-moi une capture si tu
   veux que je l'ajuste précisément.
   ========================================================== */
   
   
   /* ==========================================================
   FORCE L'EMPILEMENT DU PRIX ET DU BOUTON (Tutor LMS v2)
   ========================================================== */

/* 1. Force le wrapper parent du bas de carte à passer en colonne */
.tutor-card-body .tutor-card-footer,
.tutor-card-body > div.tutor-d-flex,
.tutor-card-body > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
}

/* 2. Empile le prix et le bouton s'ils sont dans un sous-wrapper flex */
.tutor-card-footer > div,
.tutor-card-footer .tutor-d-flex,
.tutor-course-lms-price,
.tutor-course-loop-price-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 10px !important;
}

/* 3. Force le conteneur du bouton à prendre 100% de largeur en dessous */
.tutor-card-footer .tutor-btn-view,
.tutor-card-footer .tutor-course-booking-btn,
.tutor-card-footer .tutor-course-list-btn,
.tutor-card-footer [class*="btn"] {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-left: 0 !important;
}

/* 4. Force le bouton HTML lui-même à s'étendre proprement */
.tutor-card-footer a.tutor-btn,
.tutor-card-footer button.tutor-btn,
.tutor-card-footer .tutor-btn {
    width: 100% !important;
    text-align: center !important;
}

/* ==========================================================
   ALIGNER L'AVATAR ET LE TEXTE DE L'AUTEUR SUR LA MÊME LIGNE
   ========================================================== */

/* 1. Passer le bloc auteur en Flexbox horizontal */
.tutor-card-author,
.tutor-meta-author,
.tutor-card-body > div:has(.tutor-author-avatar),
.tutor-card-body > div:has(a[href*="view=instructor"]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;            /* Espace entre le cercle vert et le texte */
    margin-bottom: 12px !important;
}

/* 2. Éviter que le nom ou la catégorie ne retournent à la ligne brutalement */
.tutor-card-author *,
.tutor-meta-author * {
    display: inline-block !important;
    margin: 0 !important;
}/* ==========================================================
   RÉDUIRE L'ESPACEMENT VERTICAL DANS LES CARTES (COMPACT)
   ========================================================== */

/* 1. Espace sous le titre du cours (1ère flèche) */
.tutor-card-body .tutor-card-title,
.tutor-course-name {
    margin-bottom: 6px !important;
}

/* 2. Espace sous la ligne des métadonnées (icônes élèves/durée) (2ème flèche) */
.tutor-card-body .tutor-meta,
.tutor-card-body > div:has(.tutor-meta) {
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
}

/* 3. Espace sous le bloc auteur (3ème flèche) */
.tutor-card-author,
.tutor-meta-author,
.tutor-card-body > div:has(.tutor-author-avatar),
.tutor-card-body > div:has(a[href*="view=instructor"]) {
    margin-bottom: 10px !important;
}

/* 4. Réduire le gap global du corps de la carte si Tutor LMS utilise du flex/grid */
.tutor-card-body {
    gap: 8px !important;
    padding: 16px !important; /* Compacter légèrement le padding intérieur */
}/* End custom CSS */