/*
Theme Name: Hello-Elementor Child
Description: This is a child theme for Hello-Elementor Theme
Author: Elementor Teams
Template: hello-elementor
Text Domain: hello-elementor-child
*/

/* =============================================================
   FONDATIONS — polices, variables, reset, boutons partagés
   ============================================================= */
@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter18pt-ExtraBold.eot");
  src:
    url("./assets/fonts/Inter18pt-ExtraBold.eot?#iefix")
      format("embedded-opentype"),
    url("./assets/fonts/Inter18pt-ExtraBold.woff2") format("woff2"),
    url("./assets/fonts/Inter18pt-ExtraBold.woff") format("woff"),
    url("./assets/fonts/Inter18pt-ExtraBold.ttf") format("truetype"),
    url("./assets/fonts/Inter18pt-ExtraBold.svg#Inter18pt-ExtraBold")
      format("svg");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter18pt-Bold.eot");
  src:
    url("./assets/fonts/Inter18pt-Bold.eot?#iefix") format("embedded-opentype"),
    url("./assets/fonts/Inter18pt-Bold.woff2") format("woff2"),
    url("./assets/fonts/Inter18pt-Bold.woff") format("woff"),
    url("./assets/fonts/Inter18pt-Bold.ttf") format("truetype"),
    url("./assets/fonts/Inter18pt-Bold.svg#Inter18pt-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter18pt-Light.eot");
  src:
    url("./assets/fonts/Inter18pt-Light.eot?#iefix") format("embedded-opentype"),
    url("./assets/fonts/Inter18pt-Light.woff2") format("woff2"),
    url("./assets/fonts/Inter18pt-Light.woff") format("woff"),
    url("./assets/fonts/Inter18pt-Light.ttf") format("truetype"),
    url("./assets/fonts/Inter18pt-Light.svg#Inter18pt-Light") format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter18pt-Medium.eot");
  src:
    url("./assets/fonts/Inter18pt-Medium.eot?#iefix")
      format("embedded-opentype"),
    url("./assets/fonts/Inter18pt-Medium.woff2") format("woff2"),
    url("./assets/fonts/Inter18pt-Medium.woff") format("woff"),
    url("./assets/fonts/Inter18pt-Medium.ttf") format("truetype"),
    url("./assets/fonts/Inter18pt-Medium.svg#Inter18pt-Medium") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter18pt-SemiBold.eot");
  src:
    url("./assets/fonts/Inter18pt-SemiBold.eot?#iefix")
      format("embedded-opentype"),
    url("./assets/fonts/Inter18pt-SemiBold.woff2") format("woff2"),
    url("./assets/fonts/Inter18pt-SemiBold.woff") format("woff"),
    url("./assets/fonts/Inter18pt-SemiBold.ttf") format("truetype"),
    url("./assets/fonts/Inter18pt-SemiBold.svg#Inter18pt-SemiBold")
      format("svg");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter18pt-Regular.eot");
  src:
    url("./assets/fonts/Inter18pt-Regular.eot?#iefix")
      format("embedded-opentype"),
    url("./assets/fonts/Inter18pt-Regular.woff2") format("woff2"),
    url("./assets/fonts/Inter18pt-Regular.woff") format("woff"),
    url("./assets/fonts/Inter18pt-Regular.ttf") format("truetype"),
    url("./assets/fonts/Inter18pt-Regular.svg#Inter18pt-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand colours */
  --cyan: #07a9d6;
  --cyan-dark: #0096b7;
  --cyan-light: #e0f7fc;
  --cyan-soft: rgba(0, 180, 216, 0.08);

  /* Pill / badge tints */
  --pill-bg: rgba(7, 169, 214, 0.2);
  --pill-border: rgba(7, 169, 214, 0.3);
  --badge-finance: #e8f4f8;
  --badge-mgmt: #e8f4f8;
  --badge-new: #ff6b35;

  /* Status */
  --green: #22c55e;

  /* Dark palette */
  --navy: #0a1f3c;
  --white: #ffffff;

  /* Text */
  --text-dark: #1a2428;
  --text-body: #4a5568;
  --text-muted: #6b7280;
  --text-label: #58585e;
  --border-white: rgba(255, 255, 255, 0.55);
  --text-on-dark: rgba(255, 255, 255, 0.75);

  /* Backgrounds */
  --bg-page: #f4f7f9;
  --bg-white: #ffffff;
  --bg-white-btn: rgba(255, 255, 255, 0.1);
  --overlay-dark: rgba(10, 20, 35, 0.62);
  --cyan-bg: rgba(7, 169, 214, 0.05);

  /* Borders */
  --border: #e2e8f0;
  --border-light: #f3f4f6;
  --card-border: #e5e7eb;
  --cyan-border-10: rgba(7, 169, 214, 0.05);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.07);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.14);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.07);
  --shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.11);
  --price-card-shadow: 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --price-card-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* Radii */
  --radius-checkbox: 4px;
  --radius-btn: 6px;
  --radius-sm: 8px;
  --radius-card: 10px;
  --radius: 12px;
  --radius-card-icon: 16px;
  --radius-lg: 23px;

  /* FAQ section */
  --faq-bg: #1a2428;
  --faq-border: #1f2937;
  --faq-item-hover-bg: rgba(255, 255, 255, 0.04);
  --faq-answer-text: rgba(255, 255, 255, 0.62);
  --faq-icon-bg: rgba(0, 180, 216, 0.15);
  --border-checkbox: #d1d5db;

  --price-card-bg: #07a9d6;
  /* solid cyan card background  */
  --price-card-inner-bg: #ffffff;
  /* white inner info area       */
  --price-card-shadow: 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --price-card-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --date-box-bg: #ffffff;
  --meta-row-border: rgba(255, 255, 255, 0.2);
  --select-border: #e2e8f0;
  --obj-bg: rgba(7, 169, 214, 0.05);
  --obj-border: rgba(7, 169, 214, 0.12);
}

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

body {
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1280px;
  padding-inline: 24px;
  margin: 0 auto;
}
.site-main {
  display: contents;
}

/* Shared button base */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--primary {
  background: var(--cyan);
  color: var(--white);
  border: 2px solid var(--cyan);
  box-shadow: 0 4px 20px rgba(0, 180, 216, 0.35);
}

.btn--secondary {
  background: var(--bg-white-btn);
  color: var(--white);
  border: 2px solid var(--white);
  backdrop-filter: blur(12px);
}

.btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* =============================================================
   HEADER — bannière hero (pages catalogue & formation)
   ============================================================= */
.training-banner {
  display: block;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #0a1422;
}

.training-banner__bg {
  position: absolute;
  inset: 0;
  background-image: url("./assets/images/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  animation: slowZoom 18s ease-in-out infinite alternate;
}

@keyframes slowZoom {
  from {
    transform: scale(1.04);
  }
  to {
    transform: scale(1.12);
  }
}

.training-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(26, 36, 40, 0.7) 0%,
    rgba(26, 36, 40, 0.5) 50%,
    rgba(26, 36, 40, 0.9) 100%
  );
}

.training-banner__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 860px;
  padding: 60px 24px;
  text-align: center;
  animation: fadeUp 0.9s ease both;
}

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

.training-banner__badge {
  font-family: "Inter", sans-serif;
  display: inline-block;
  margin-bottom: 28px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--cyan);
  backdrop-filter: blur(6px);
  animation: fadeUp 0.9s 0.1s ease both;
}

.training-banner__heading {
  font-family: "Inter", sans-serif;
  font-size: 60px;
  font-weight: 800;
  line-height: 60px;
  color: var(--white);
  letter-spacing: -1.5px;
  margin-bottom: 36px;
  animation: fadeUp 0.9s 0.2s ease both;
}

.training-banner__features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-bottom: 44px;
  animation: fadeUp 0.9s 0.35s ease both;
}

.page-template-product-listing .training-banner__features {
  display: none;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 254px;
  text-align: left;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-item__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--cyan);
  margin-top: 2px;
}

.feature-item__text {
  font-size: 14px;
  font-weight: 400;
  color: var(--white);
  line-height: 1.45;
}

.training-banner__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  animation: fadeUp 0.9s 0.48s ease both;
}

/* =============================================================
   CATALOGUE — pages de listing (filtres, sections, FAQ)
   ============================================================= */
.course_listing_section {
  padding: 48px 0;
}

.course-layout {
  display: flex;
  gap: 30px;
}

/* Sidebar */
.course_listing_section .course-sidebar {
  width: 233px;
  height: fit-content;
}

/* Bouton "Filtres" + popup : visibles uniquement sur le breakpoint
   mobile/tablette ou le bloc filtre devient une popup (voir @media
   max-width: 1023px). display:none en !important car un style WooCommerce
   generique ([type=button], button, ...) partage la meme specificite et
   peut etre (re)injecte apres notre feuille de style. */
.course-sidebar__toggle,
.course-sidebar__backdrop {
  display: none !important;
}

/* Chrome de la popup (titre + croix de fermeture + bouton "Voir les
   resultats") : masque au-dessus de 1023px, ou .course-sidebar__filters
   reste affiche en ligne dans la colonne desktop (voir main.js). */
.course-sidebar__filters-header,
.course-sidebar__filters-footer {
  display: none;
}

.filter-group {
  margin-bottom: 21px;
}

.filter-group h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-label);
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.filter-group label {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 11px;
  cursor: pointer;
  color: var(--text-dark);
}

/* ── Custom checkbox ── */
.filter-group input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  margin-bottom: 0;
  border: 1.5px solid var(--border-checkbox);
  border-radius: var(--radius-checkbox);
  background: var(--bg-white);
  cursor: pointer;
  position: relative;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

/* Hover – cyan ring */
.filter-group input[type="checkbox"]:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-soft);
}

/* Focus ring for accessibility */
.filter-group input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cyan-soft);
  border-color: var(--cyan);
}

/* Checked – cyan fill */
.filter-group input[type="checkbox"]:checked {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 2px 8px rgba(0, 180, 216, 0.35);
}

/* White checkmark SVG */
.filter-group input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 9px;
}

.sidebar-info {
  font-size: 13px;
  padding: 25px;
  background: var(--cyan-bg);
  border-radius: var(--radius-sm);
  color: var(--text-dark);
  border: 1px solid var(--cyan-border-10);
}

.sidebar-info h5 {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--text-dark);
}
.sidebar-info p {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 20px;
}

/* Course list */
.course-right {
  flex: 1;
}

.custom-shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.custom-shop-header__left {
  max-width: 70%;
}

.custom-shop-header__title {
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text-dark);
}

.custom-shop-header__desc {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

.custom-shop-header__right {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.course-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  margin: 0;
}

/* Load more */
.load-more-wrap #load-more-btn,
.load-more-wrap #category_load,
.load-more-wrap #other_category_load {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: var(--cyan);
  padding: 12px 32px;
  border-radius: 9999px;
  border: 2px solid var(--cyan);
  line-height: 1.5;
  margin-inline: auto;
  display: block;
  margin-top: 45px;
  background: transparent;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.load-more-wrap #load-more-btn:hover,
.load-more-wrap #category_load:hover {
  background: var(--cyan);
  color: var(--white);
}

#category_load.disabled,
#other_category_load.disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: default;
}

/* Packs promotionnels — chrome de section (la carte est dans CARTES) */
.promo-packs {
  padding: 64px 0;
}

.promo-packs__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.promo-packs__title {
  font-size: 30px;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: 5px;
}

.promo-packs__subtitle {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.5;
}

.promo-packs__accent-line {
  width: 48px;
  height: 3px;
  background: var(--cyan);
  border-radius: 2px;
  flex-shrink: 0;
}

.promo-packs__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* Packs de crédits (pricing) — chrome de section (la carte est dans CARTES) */
.credits-section {
  padding: 64px 0 80px;
  background: var(--bg-page);
}

.credits-section__header {
  text-align: center;
  margin-bottom: 48px;
}

.credits-section__eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 12px;
}

.credits-section__title {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  position: relative;
  margin-bottom: 46px;
}
.credits-section__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  width: 96px; /* Adjust width */
  height: 6px; /* Thickness */
  background: #07a9d6;
  border-radius: 999px;
}

.credits-section__desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.65;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

/* =============================================================
   FAQ SECTION
   ============================================================= */
.faq-section {
  background: var(--faq-bg);
  padding: 56px 0;
  font-family: "Inter", sans-serif;
}

.faq-section__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.faq-section__left img {
  max-width: 51px;
}

.faq-section__heading {
  font-family: "Inter", sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
}

.faq-section__heading--accent {
  color: var(--cyan);
  display: block;
}

.faq-section__desc {
  margin-top: 18px;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-label);
  line-height: 1.7;
  max-width: 400px;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.faq-item {
  border-bottom: 1px solid var(--faq-border);
  overflow: hidden;
  transition: background 0.2s ease;
  border-radius: 4px;
}

.faq-item:hover {
  background: var(--cyan-bg);
}
.faq-item button,
.faq-item button:hover,
.faq-item button:focus {
  background: none;
}

.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: "Inter", sans-serif;
}

.faq-item__question {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  flex: 1;
}

.faq-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s ease,
    transform 0.3s ease;
}

.faq-item__icon svg {
  width: 20px;
  height: 20px;
  color: var(--cyan);
  transition: transform 0.3s ease;
}

.faq-item--open .faq-item__icon {
  background: var(--cyan);
}
.faq-item--open .faq-item__icon svg {
  color: var(--white);
  transform: rotate(45deg);
}
.faq-item--open .faq-item__question {
  color: var(--cyan);
}

.faq-item__body {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.35s ease,
    padding 0.25s ease;
}

.faq-item--open .faq-item__body {
  max-height: 400px;
}

.faq-item__answer {
  padding: 0 4px 20px;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--faq-answer-text);
  line-height: 1.75;
}

/* =============================================================
   CARTES — composants carte réutilisables
   ============================================================= */

/* ── Carte formation (listing) ── */
.course-card {
  display: flex;
  align-items: center;
  background: var(--bg-white);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid var(--card-border);
  transition: box-shadow 0.3s;
}

.course-card:hover {
  box-shadow: var(--shadow-sm);
}

/* Date box */
.course-date {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  text-align: center;
  border-radius: var(--radius);
  padding: 13px 0;
  margin-right: 15px;
  border: 2px solid var(--card-border);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%);
}

.course-date .month {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--white);
  background: var(--cyan);
  padding: 2.3px 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.course-date .day {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
}

/* Image */
/* Cadre image de taille fixe (96 x 96px) des cartes du catalogue, partage avec le
   bloc "Souvent achetes ensemble" (.card-image > a) et les packs promotionnels
   (.promo-pack-card__image-wrap) pour que toutes les images de formation aient la
   meme taille partout, quelle que soit la largeur de la carte ou de l'ecran. */
.course-image,
.card-image > a,
.promo-pack-card__image-wrap {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  padding: 4px;
  overflow: hidden;
}

.course-image img,
.card-image img,
.promo-pack-card__image-wrap img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* Image de categorie (shortcode [category_image]) utilisee sur les cartes formations
   e-learning / micro learning de la page d'accueil : cadre de taille fixe (100 x 91.5px)
   qui masque tout debordement, l'image etant centree et redimensionnee en conservant
   ses proportions d'origine. */
.ttel-category-image-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 91.5px;
  overflow: hidden;
}

.ttel-category-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Content */
.course-content {
  padding: 0 20px;
  max-width: 600px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.tag {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: var(--radius);
  color: #4b5563;
  text-transform: uppercase;
  background: var(--border-light);
  border: 1px solid var(--card-border);
}
.tag:hover {
  background: var(--cyan);
  color: var(--white);
  border-color: var(--cyan);
}

.tag.pink {
  background: #ffe4e6;
  color: #db2777;
  border-color: #ffe4e6;
}
.tag.purple {
  background: #f3e8ff;
  color: #9333ea;
  border-color: #f3e8ff;
}

.tag.green {
  background: #d1fae5;
  color: #059669;
  border-color: #d1fae5;
}
.tag.red {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fee2e2;
}
.tag.blue {
  background: #dbeafe;
  color: #2563eb;
  border-color: #dbeafe;
}

.single-product .related-courses .tags .tag,
.tags.taxonomy-page .tag {
  border-radius: var(--radius-checkbox);
}

.tag-more {
  cursor: pointer;
}
.tag-more-group {
  display: contents;
}
.tag-more-group[hidden] {
  display: none;
}

.course-content h3 {
  font-size: 18px;
  margin: 15px 0;
  font-weight: 700;
}

.course-content h3 a {
  text-decoration: none;
  color: var(--text-label);
}

.course-desc p {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 8px;
}

.meta-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: flex-start;
}

.meta-tag {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #0d191c;
  min-height: 24px;
  line-height: 1.3;
}

/* Align and resize SVG */
.meta-tag span {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transform: translateY(1px);
  white-space: nowrap;
  flex-shrink: 0;
}

.meta-tag img {
  width: 12px;
  height: 12px;
  object-fit: contain;
  flex-shrink: 0;
  transform: translateY(1px);
}

/* Course action (right) */
.course-action {
  flex: 1;
  text-align: right;
  min-width: 120px;
  border-left: 1px solid var(--border-light);
  max-width: 160px;
  margin-left: auto;
}

.course-action .price {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-label);
  margin-bottom: 8px;
  text-align: center;
  margin-left: 20px;
  /* Sans ça, le "HT" passait ou non a la ligne selon la largeur exacte du
     montant (le gabarit chiffres/€ pouvant varier de quelques px d'un prix
     a l'autre pour une meme longueur de texte) : affichage incoherent d'une
     carte a l'autre. Meme traitement que .course-card--compact .price. */
  white-space: nowrap;
}

.course-card--compact {
  border: none;
  padding-left: 0;
}

.course-card--compact:hover {
  box-shadow: none;
}

.course-card--compact .course-content {
  max-width: 280px;
}

.course-card--compact .course-content h3 {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin: 10px 0;
}

.course-card--compact .course-action {
  flex-shrink: 0;
  max-width: none;
  min-width: 0;
}

.course-card--compact .course-action .price {
  margin-left: 0;
  white-space: nowrap;
}

/* .woocommerce-Price-amount et .tax-htva ont chacun leur propre font-size/
   couleur !important (regles "Design des prix en promo" plus haut dans ce
   fichier) qui ne suivent pas la couleur/taille posees sur .price : on doit
   les cibler explicitement pour que le HT soit rendu identique au prix. */
.course-card--compact .course-action .price,
.course-card--compact .course-action .price .woocommerce-Price-amount,
.course-card--compact .course-action .price .tax-htva {
  font-family: "Inter", sans-serif;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--cyan) !important;
}

.course-action .btn {
  background: var(--cyan);
  color: var(--white);
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  display: inline-block;
  margin-top: 8px;
  border: none;
  width: auto;
}

.course-action .btn:hover {
  background: var(--cyan-dark);
}

/* ── Carte pack promotionnel ── */
.promo-pack-card {
  background: var(--bg-white);
  border: 1px solid rgba(0, 180, 216, 0.2);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  box-shadow: var(--shadow-card);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
  position: relative;
  padding: 24px;
  gap: 24px;
}

.promo-pack-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

/* Taille du cadre : voir .course-image (96 x 96px partage). */
.promo-pack-card__image-wrap {
  position: relative;
}

.promo-pack-card__image-wrap img {
  transition: transform 0.4s ease;
}

.promo-pack-card:hover .promo-pack-card__image-wrap img {
  transform: scale(1.05);
}

.promo-pack-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.promo-pack-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 9px;
  flex-wrap: wrap;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
}

.badge--category {
  background: var(--cyan);
  color: var(--white);
  text-transform: uppercase;
}
.badge--category a {
  color: inherit;
  text-transform: uppercase;
}

.badge--subcategory {
  color: var(--text-label);
  font-size: 12px;
  font-weight: 500;
}

.promo-pack-card__name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 28px;
  margin-bottom: 7px;
}

.promo-pack-card__desc {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 20px;
  flex: 1;
  margin-bottom: 24px;
}

.promo-pack-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

/* ── Styling du prix (carte pack) — display:block force le retour à la ligne ── */
.promo-pack-card__price {
  font-size: 24px;
  font-weight: 800;
  color: var(--cyan);
  display: block;
  line-height: 1.2;
}

/* Ancien prix (barré) */
.promo-pack-card__price del {
  display: block;
  color: #9ca3af;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}

/* Nouveau prix (promotion) : inline-flex pour rester sur la même ligne que HT */
.promo-pack-card__price ins {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  color: var(--cyan, #07a9d6);
  font-size: 24px;
  font-weight: 800;
}

/* On force les spans de WooCommerce à hériter de nos couleurs */
.promo-pack-card__price ins .woocommerce-Price-amount,
.promo-pack-card__price del .woocommerce-Price-amount {
  color: inherit;
}

/* Mention HT (reste sur la même ligne grâce à inline-block) */
.promo-pack-card__price .tax-htva {
  display: inline-block;
  font-size: 14px;
  color: #6b7280;
  font-weight: 600;
  margin-left: 6px;
}

.btn-pack {
  background: var(--cyan);
  color: var(--white);
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  display: inline-block;
  transition:
    background 0.18s ease,
    transform 0.15s ease,
    box-shadow 0.18s ease;
}

.btn-pack:hover {
  background: var(--cyan-dark);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(0, 180, 216, 0.4);
}

/* ── Carte pricing (packs de crédits) ── */
.pricing-card {
  background: var(--bg-white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 26px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--price-card-shadow);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--price-card-shadow-hover);
}

.pricing-card--featured {
  border-color: var(--cyan);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
  transform: translateY(-6px);
  z-index: 1;
  border-width: 4px;
}

.pricing-card--featured:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
}

.pricing-card__popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cyan);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 180, 216, 0.35);
}

.pricing-card__icon {
  width: 56px;
  height: 56px;
  background: var(--cyan-soft);
  border-radius: var(--radius-card-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--cyan);
}

.pricing-card__icon svg {
  width: 25px;
  height: 25px;
}

.pricing-card__name h3 {
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-dark);
  margin: 0;
  margin-bottom: 8px;
}

.pricing-card__credits {
  font-size: 20px;
  color: var(--cyan);
  font-weight: 700;
  line-height: 28px;
  margin-bottom: 10px;
}

.pricing-card__price-block {
  margin-bottom: 22px;
}

.pricing-card__price {
  font-size: 36px;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: 0;
  line-height: 1;
}

.pricing-card__price--large {
  font-size: 2.2rem;
}

.pricing-card__price span {
  font-size: 14px;
  font-weight: 500;
  vertical-align: sub;
  color: var(--text-label);
  text-transform: uppercase;
  margin-left: 4px;
}

.pricing-card__price-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.pricing-card__contact-price {
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--text-dark);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.pricing-card__divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 0 20px;
}

.pricing-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  margin-bottom: 28px;
}

.pricing-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.8rem;
  color: var(--text-body);
  line-height: 1.45;
}

.pricing-card__features li .check-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--green);
  margin-top: 1px;
}

.btn-pricing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--cyan);
  transition:
    background 0.18s ease,
    transform 0.15s ease,
    box-shadow 0.18s ease;
}

.btn-pricing--primary {
  background: var(--cyan);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(0, 180, 216, 0.35);
}

.btn-pricing--primary:hover {
  background: var(--cyan-dark);
  color: var(--cyan);
  transform: translateY(-2px);
  background: var(--cyan-soft);
  box-shadow: 0 8px 22px rgba(0, 180, 216, 0.45);
}

.btn-pricing--outline {
  background: transparent;
  color: var(--cyan);
  border: 1px solid var(--cyan);
}

.btn-pricing--outline:hover {
  background: var(--cyan-soft);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 180, 216, 0.45);
}

.btn-pricing svg {
  width: 14px;
  height: 14px;
}

/* ── Carte bundle (variante ancienne, related products) ── */
.related.products {
  display: none;
}

.bundle-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.bundle-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* Carte "Souvent achetes ensemble" : image (cadre fixe 96 x 96px, voir
   .course-image), badge format, secteurs, titre, meta puis prix, alignes a gauche.
   Chaque carte est une subgrid de 6 lignes partagees avec .bundle-grid : les
   wrappers .card-image / .card-content passent en display:contents pour que chaque
   element occupe la meme ligne dans toutes les cartes d'une rangee. Un titre plus
   long ou plus de secteurs dans une carte agrandit la ligne pour toutes les cartes,
   le reste (meta, prix) reste donc aligne d'une carte a l'autre. */
.bundle-card {
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: 20px;
}

.bundle-card .card-image,
.bundle-card .card-content {
  display: contents;
}

.bundle-card .card-image > a {
  grid-row: 1;
  display: block;
  margin-bottom: 12px;
}

.bundle-card .card-tag-list {
  grid-row: 2;
  justify-content: flex-start;
  align-self: start;
  margin-bottom: 12px;
}

.bundle-card .category {
  grid-row: 3;
  align-self: start;
}

.bundle-card .card-content h3 {
  grid-row: 4;
}

.bundle-card .meta {
  grid-row: 5;
  align-self: start;
}

.bundle-card .card-footer {
  grid-row: 6;
  align-self: end;
  padding-top: 0;
}

/* :not(.first-clr) pour laisser les tags "format" colores (first-clr + blue/green/red/...)
   garder leur propre couleur de texte, coherente avec le meme badge affiche sur les
   autres pages - cette regle generique ne doit s'appliquer qu'aux tags non colores
   (pays/secteur). */
.card-tag-list.tags .tag:not(.first-clr) {
  color: #0d191c;
  text-decoration: none;
}

.card-tag-list.tags .tag {
  text-decoration: none;
}

.card-tag-list.tags .tag:hover {
  color: var(--white);
}

.card-content {
  padding: 20px;
}

.category {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: #666;
  margin-bottom: 12px;
}

.category a {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  color: #07a8d5;
  text-decoration: none;
  text-transform: uppercase;
}

/* Meme rendu "badge" que .tag ailleurs (cartes catalogue, formations) au lieu
   d'un simple lien texte. Specificite (.category .category-tag) volontairement
   plus forte que .category a ci-dessus pour prendre le dessus. */
.category .category-tag {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: var(--radius);
  color: #4b5563;
  text-transform: uppercase;
  background: var(--border-light);
  border: 1px solid var(--card-border);
  text-decoration: none;
}

.category .category-tag:hover {
  background: var(--cyan);
  color: var(--white);
  border-color: var(--cyan);
}

/* ttel_render_secteur_tags() sort des <a class="tag"> (troncature +N) - la
   regle .category a ci-dessus (couleur bleue) les visait aussi via le
   selecteur generique "a", il faut re-forcer la couleur grise standard de
   .tag pour rester coherent avec le badge affiche partout ailleurs. */
.category a.tag {
  color: #4b5563;
}

.category a.tag:hover {
  color: var(--white);
}

.card-content h3 {
  font-family: "Inter", sans-serif;
  margin: 0 0 14px 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}

.card-content h3 a {
  color: #0d191c;
  text-decoration: none;
}

.card-content h3 a:hover {
  color: #07a8d5;
}

.meta {
  font-family: "Inter", sans-serif;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
  column-gap: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: #488b9d;
  margin-bottom: 20px;
}

.meta .meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.meta img {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.emoji {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
}

.woocommerce .card-footer .price .woocommerce-Price-amount .promo-pack-card__price {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #0d191c;
}

/* Icône "ajouter au panier" des related products — deux générations de règles conservées telles quelles */
.add-btn {
  width: 42px;
  height: 42px;
  background: #0066cc;
  color: white;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  transition: background 0.3s;
}
.add-btn,
.add-btn--variable,
.add-btn--disabled {
  width: 40px;
  height: 40px;
  background: #e7f1f4;
  border: 1px solid #e7f1f4;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.add-btn img,
.add-btn--variable img,
.add-btn--disabled img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.add-btn:hover,
.add-btn--variable:hover {
  background: #00a9d6;
  border-color: #00a9d6;
}

.add-btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.add-btn img,
.add-btn--variable img,
.add-btn--disabled img {
  width: 40px;
  height: 40px;
  padding: 10px;
  background: #dff5fb;
  border-radius: 100%;
  box-sizing: border-box;
}

/* ── Carte de séance (sélecteur de dates, produit variable) ── */
.variation-radios {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.variation-radios .radio-card {
  display: block;
  cursor: pointer;
}
.variation-radios .radio-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.variation-radios .radio-card .card-content {
  background: #fff;
  border: 1.5px solid #e7f1f4;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.18s;
  position: relative;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
}
.variation-radios .radio-card .card-content::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #e7f1f4;
  background: transparent;
  transition: border-color 0.18s;
  flex-shrink: 0;
}
.variation-radios .radio-card .card-content::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0px solid #e7f1f4;
  background: transparent;
  transition: border-color 0.18s;
  flex-shrink: 0;
}
.variation-radios .radio-card .card-content {
  padding-left: 50px;
}

.radio-card:hover .card-content {
  border-color: #e7f1f4;
}
.radio-card input:checked ~ .card-content {
  border-color: #07a9d6;
  border-width: 1px;
}
.radio-card input:checked ~ .card-content::before {
  border-color: #07a9d6;
}
.radio-card input:checked ~ .card-content::after {
  background: #07a9d6;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card-header .date {
  font-size: 14px;
  line-height: 20px;
  font-weight: 800;
  color: #0d191c;
  letter-spacing: 0px;
  text-transform: uppercase;
}
.card-header .badge {
  font-size: 10px;
  line-height: 15px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  text-transform: uppercase;
}

.card-body {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.card-body .time,
.card-body .location,
.card-body .session-language,
.card-body .session-secteur {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #488b9d;
}
.card-body .time img,
.card-body .location img {
  width: 14px;
  height: 14px;
  display: none;
}
.card-body .time::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M7.75833 8.575L8.575 7.75833L6.41667 5.6V2.91667H5.25V6.06667L7.75833 8.575ZM5.83333 11.6667C5.02639 11.6667 4.26806 11.5135 3.55833 11.2073C2.84861 10.901 2.23125 10.4854 1.70625 9.96042C1.18125 9.43542 0.765625 8.81806 0.459375 8.10833C0.153125 7.39861 0 6.64028 0 5.83333C0 5.02639 0.153125 4.26806 0.459375 3.55833C0.765625 2.84861 1.18125 2.23125 1.70625 1.70625C2.23125 1.18125 2.84861 0.765625 3.55833 0.459375C4.26806 0.153125 5.02639 0 5.83333 0C6.64028 0 7.39861 0.153125 8.10833 0.459375C8.81806 0.765625 9.43542 1.18125 9.96042 1.70625C10.4854 2.23125 10.901 2.84861 11.2073 3.55833C11.5135 4.26806 11.6667 5.02639 11.6667 5.83333C11.6667 6.64028 11.5135 7.39861 11.2073 8.10833C10.901 8.81806 10.4854 9.43542 9.96042 9.96042C9.43542 10.4854 8.81806 10.901 8.10833 11.2073C7.39861 11.5135 6.64028 11.6667 5.83333 11.6667ZM5.83333 10.5C7.12639 10.5 8.22743 10.0455 9.13646 9.13646C10.0455 8.22743 10.5 7.12639 10.5 5.83333C10.5 4.54028 10.0455 3.43924 9.13646 2.53021C8.22743 1.62118 7.12639 1.16667 5.83333 1.16667C4.54028 1.16667 3.43924 1.62118 2.53021 2.53021C1.62118 3.43924 1.16667 4.54028 1.16667 5.83333C1.16667 7.12639 1.62118 8.22743 2.53021 9.13646C3.43924 10.0455 4.54028 10.5 5.83333 10.5Z' fill='%23488B9D'/%3E%3C/svg%3E")
    no-repeat center/contain;

  flex-shrink: 0;
}
.card-body .location::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12' viewBox='0 0 10 12' fill='none'%3E%3Cpath d='M4.66667 5.83333C4.9875 5.83333 5.26215 5.7191 5.49062 5.49062C5.7191 5.26215 5.83333 4.9875 5.83333 4.66667C5.83333 4.34583 5.7191 4.07118 5.49062 3.84271C5.26215 3.61424 4.9875 3.5 4.66667 3.5C4.34583 3.5 4.07118 3.61424 3.84271 3.84271C3.61424 4.07118 3.5 4.34583 3.5 4.66667C3.5 4.9875 3.61424 5.26215 3.84271 5.49062C4.07118 5.7191 4.34583 5.83333 4.66667 5.83333ZM4.66667 10.1208C5.85278 9.03194 6.73264 8.04271 7.30625 7.15312C7.87986 6.26354 8.16667 5.47361 8.16667 4.78333C8.16667 3.72361 7.82882 2.8559 7.15312 2.18021C6.47743 1.50451 5.64861 1.16667 4.66667 1.16667C3.68472 1.16667 2.8559 1.50451 2.18021 2.18021C1.50451 2.8559 1.16667 3.72361 1.16667 4.78333C1.16667 5.47361 1.45347 6.26354 2.02708 7.15312C2.60069 8.04271 3.48056 9.03194 4.66667 10.1208ZM4.66667 11.6667C3.10139 10.3347 1.93229 9.09757 1.15937 7.95521C0.386458 6.81285 0 5.75556 0 4.78333C0 3.325 0.469097 2.16319 1.40729 1.29792C2.34549 0.432639 3.43194 0 4.66667 0C5.90139 0 6.98785 0.432639 7.92604 1.29792C8.86424 2.16319 9.33333 3.325 9.33333 4.78333C9.33333 5.75556 8.94688 6.81285 8.17396 7.95521C7.40104 9.09757 6.23194 10.3347 4.66667 11.6667Z' fill='%23488B9D'/%3E%3C/svg%3E")
    no-repeat center/contain;

  flex-shrink: 0;
}

.card-body .session-language::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23488B9D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E")
    no-repeat center/contain;
  flex-shrink: 0;
}

.card-body .session-secteur::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23488B9D'%3E%3Cpath d='M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zM10 4h4v2h-4V4z'/%3E%3C/svg%3E")
    no-repeat center/contain;
  flex-shrink: 0;
}

.badge[class*="dernieres"],
[class*="dernieres-places"] .badge,
.badge:contains("Dernières") {
  background: #faeeda;
  color: #854f0b;
}
.badge.default {
  background: #faeeda;
  color: #854f0b;
}

.radio-card .badge.orange {
  background: #ffedd5;
  color: #c2410c;
}
.radio-card .badge.green {
  background: #dcfce7;
  color: #15803d;
}

/* =============================================================
   WOOCOMMERCE — fiche produit & surcharges WooCommerce
   ============================================================= */

/* Tri du catalogue (dropdown WooCommerce) */
.woocommerce-ordering select {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  border: 0px solid #ccc;
  cursor: pointer;
  max-width: 180px;
}
.woocommerce-ordering select:focus {
  outline: none;
}
.woocommerce-result-count {
  display: none !important;
}

/* ── Full-width page header (breadcrumb + title + meta) ── */
.single-product {
  background-color: #f5f8f8;
}

.course-page-header .custom-bundle-product-grid {
  margin-bottom: 48px;
  padding: 32px 0px;
}

.course-breadcrumb {
  font-family: "Inter", sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #488b9d;
  margin-bottom: 24px;
}

.course-breadcrumb a {
  color: #488b9d;
  text-decoration: none;
  transition: color 0.15s;
}

.course-breadcrumb a:hover {
  color: var(--cyan);
}

.course-breadcrumb__sep {
  color: #488b9d;
}

.course-breadcrumb__current {
  color: #0d191c;
  font-weight: 500;
}

/* Deux générations de la même règle : la seconde (bordure 0px) est celle qui s'applique */
.single-product.ttel_single_product .course-page-header {
  margin-bottom: 48px;
  background-color: var(--bg-white);
  border: 0px solid #e5e7eb;
}
.single-product .course-page-header .course-breadcrumb__sep,
.single-product .course-page-header .course-breadcrumb a,
.single-product .course-page-header .course-breadcrumb__current {
  font-size: 12px;
  color: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
}
.single-product .course-page-header .course-breadcrumb__current {
  color: #4b5563;
}

/* ── Layout wrapper (two-col — content blocks only) ── */
.course-page-layout {
  margin-bottom: 48px;
}
.course-page-layout-wrapper {
  display: grid;
  grid-template-columns: 1fr 366px;
  gap: 33px;
  align-items: flex-start;
}

.single-product .related-courses .course-card {
  padding: 16px;
  border-color: #f3f4f6;
}
.single-product .related-courses .meta-list {
  gap: 16px;
}
.single-product .related-courses .meta-tag {
  font-weight: 500;
  color: #6b7280;
}
.single-product .related-courses .meta-tag > span {
  display: none;
}
.single-product .related-courses .meta-tag img {
  filter: contrast(0);
}
.single-product .related-courses .course-action {
  border-left: 0px;
}
.single-product .related-courses {
  padding: 96px 0;
  background: var(--bg-white);
}
.single-product .related-courses h2 {
  font-weight: 800;
  margin-bottom: 40px;
  color: #1a2428;
}
.single-product .related-courses h2:before {
  content: unset;
}

/* ════════════════════════════════════════
   LEFT COLUMN
════════════════════════════════════════ */
.course-main {
  min-width: 0;
}

/* Page title */
.course-main__title {
  font-family: "Inter", sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: #0d191c;
  letter-spacing: 0;
  line-height: 45px;
  margin-bottom: 16px;
  margin-top: 0px;
}

/* Meta pills row */
.course-main__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
}

.meta-pill {
  font-family: "Inter", sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.meta-pill--cyan {
  background: var(--cyan);
  color: var(--white);
}

.meta-pill--outline {
  background: #e7f1f4;
  color: #0d191c;
  border: 1px solid #d1e4e9;
}

.meta-pill svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.single-product.ttel_single_product .course-main__meta .meta-pill img {
  display: none;
}
.single-product.ttel_single_product .course-main__meta .meta-pill {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.single-product.ttel_single_product .course-main__meta .meta-pill--outline {
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #f3f4f6;
}
.single-product.ttel_single_product .course-main__meta .meta-pill--cyan {
  background: rgba(7, 169, 214, 0.1);
  color: var(--cyan);
}

/* ── Shared card block ── */
.course-block {
  margin-bottom: 18px;
}

.course-block__title {
  font-family: "Inter", sans-serif;
  position: relative;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: #0d191c;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.course-block__title::before {
  content: "";
  width: 6px;
  height: 32px;
  border-radius: 9999px;
  background-color: var(--cyan);
}

/* ── Objectives grid ── */
.objectives-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.objective-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--white);
  border: 1px solid #e7f1f4;
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  margin: 0;
}

.objective-item .icon {
  color: var(--cyan);
  margin-top: 2px;
}

.objective-item .icon svg {
  width: 20px;
  height: 20px;
}

.objective-item p {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #488b9d;
  line-height: 22.5px;
}

/* ── Description ── */
.course-description-body {
  font-size: 0.83rem;
  color: var(--text-body);
  line-height: 1.7;
  font-family: "Inter", sans-serif;
}

.course-description-body p {
  margin-bottom: 10px;
}

.course-description-body p:last-child {
  margin-bottom: 0;
}

.course-description-body ul {
  padding-left: 18px;
  margin-bottom: 10px;
}

.course-description-body li {
  margin-bottom: 4px;
  font-size: 0.8rem;
}

.course-description-body strong {
  color: var(--cyan);
  font-weight: 700;
}

/* ── Public Cible ── */
.course-block.public_cible {
  padding: 24px;
  border-radius: var(--radius);
  background-color: #f0f9fb;
  border: 1px solid rgba(7, 168, 210, 10%);
}

.public_cible .course-block__title {
  margin-bottom: 16px;
}

.public_cible .course-block__title img {
  width: 20px;
  height: 20px;
}

.public_cible .course-block__title::before {
  content: unset;
}

.public-cible__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.public-cible__list li {
  font-size: 14px;
  line-height: 20px;
  color: #488b9d;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: "Inter", sans-serif;
}

/* ── Programme accordion ── */
.programme-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.programme-item {
  border: 1px solid #e7f1f4;
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
  background: var(--white);
}

.programme-item:hover {
  box-shadow: var(--shadow-sm);
}

.programme-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  background: #f8fbfc;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: "Inter", sans-serif;
  transition: background 0.18s ease;
}

.programme-item__trigger:hover {
  background: var(--bg-page);
}

.programme-item__label {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0d191c;
  line-height: 24px;
  flex: 1;
}

.programme-item__chevron {
  flex-shrink: 0;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.programme-item__chevron img {
  width: 12px;
  height: 7px;
  color: #0d191c;
  transition:
    transform 0.3s ease,
    color 0.2s ease;
}

.programme-item--open .programme-item__trigger {
  background: #f8fbfc;
}

.programme-item--open .programme-item__label {
  color: #0d191c;
}

.programme-item--open .programme-item__chevron img {
  color: var(--white);
  transform: rotate(180deg);
}

.programme-item__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.programme-item--open .programme-item__body {
  max-height: 600px;
}

.programme-item__content {
  padding: 0 16px 14px;
  border-top: 1px solid var(--border-light);
}

.programme-item__content ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.programme-item__content li {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #488b9d;
  line-height: 20px;
}

.programme-item__content li::marker {
  flex-shrink: 0;
  color: var(--cyan);
  font-weight: 700;
  line-height: 1.4;
  font-size: 0.9rem;
}

.programme-item__trigger,
.programme-item__trigger:focus,
.programme-item__trigger:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #0d191c !important;
}

.programme-item__trigger:focus {
  background: #f8fbfc !important;
}

/* ════════════════════════════════════════
   RIGHT COLUMN — PRICE CARD
════════════════════════════════════════ */
.course-sidebar {
  position: sticky;
  top: 24px;
}
.course-sidebar > div:not(:last-child) {
  margin-bottom: 24px;
}
.price-card {
  background: var(--bg-white);
  border-radius: var(--radius-card-icon);
  border: 1px solid #e7f1f4;
  box-shadow: var(--price-card-shadow);
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}

.price-card:hover {
  box-shadow: var(--price-card-shadow-hover);
}

.price-card .variation_form_title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 24px;
  margin-bottom: 0;
  gap: 8px;
  color: #0d191c;
}

/* ── Date header strip ── */
.price-card__date {
  background: var(--cyan);
  padding: 24px;
  align-items: center;
  gap: 24px;
  display: none !important;
}

.date-box {
  background: var(--white);
  border-radius: var(--radius-sm);
  min-width: 48px;
  text-align: center;
  padding: 8px;
  line-height: 1;
  width: 70px;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.date-box .month {
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cyan);
  letter-spacing: 0;
  margin-bottom: 0px;
}

.date-box .day {
  font-size: 30px;
  font-weight: 800;
  color: var(--cyan);
  line-height: 36px;
}

.date-info {
  color: var(--white);
}

.date-info .label {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 2px;
}

.date-info .value {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}

/* ── Meta info rows ── */
.price-card__meta {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-bottom: 1px solid #e7f1f4;
}

.price-card__meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: "Inter", sans-serif;
}

.price-card__meta-row:last-child {
  border-bottom: none;
}

.price-card__meta-row img {
  width: 20px;
  height: 20px;
  color: var(--cyan);
  flex-shrink: 0;
  margin-top: px;
}

.price-card__meta-label {
  font-size: 12px;
  font-weight: 600;
  color: #488b9d;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: block;
  margin-bottom: 2px;
  line-height: 16px;
}

.price-card__meta-value {
  font-size: 16px;
  font-weight: 500;
  color: #0d191c;
  line-height: 24px;
}

/* Language select */
.price-card__lang-select {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #0d191c;
  width: 100%;
  appearance: none;
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid #f8fbfc;
  border-radius: var(--radius-sm);
  background: #f8fbfc;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  margin-top: 4px;
}

.price-card__lang-select:is(:hover, :focus, :focus-within, :focus-visible) {
  outline: none;
}

/* Duree / Niveau grid */
.price-card__two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.price-card__two-col .price-card__meta-row {
  padding: 12px;
  background-color: #f8fbfc;
  border: 1px solid #e7f1f4;
  border-radius: var(--radius);
}

.price-card__two-col .price-card__meta-row .price-card__meta-label {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.5px;
  line-height: 15px;
  margin: 0;
}

.price-card__two-col .price-card__meta-row .price-card__meta-value {
  font-size: 14px;
  letter-spacing: 0px;
  line-height: 20px;
  font-weight: bold;
}

/* ── Price block — label left, amount right on same row ── */
.price-card__price {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 20px 24px 0px;
  border-top: 1px solid var(--border-light);
  flex-wrap: wrap;
}

.price-card__price .tax,
.price-card__price-label {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #488b9d;
  white-space: nowrap;
}

.price-card__price-right {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.price-card__price .amount {
  font-family: "Inter", sans-serif;
  font-size: 25px;
  font-weight: 800;
  color: #0d191c;
  letter-spacing: 0px;
  line-height: 36px;
}

.price-card__price .tax {
  font-weight: 400;
  text-transform: uppercase;
}

.price-card__price
  .amount:has(.woocommerce-Price-amount + .woocommerce-Price-amount),
.price-card__price .amount:contains("–") {
  font-size: clamp(18px, 4vw, 24px) !important;
  line-height: 1.2 !important;
  word-break: break-word;
}

/* ── CTA button ── */
.price-card .price-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0px 24px 0;
  padding: 13px 20px;
  background: var(--cyan);
  color: var(--white);
  border-radius: var(--radius-btn);
  font-size: 0.85rem;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  text-decoration: none;
  transition:
    background 0.18s ease,
    transform 0.15s ease,
    box-shadow 0.18s ease;
  box-shadow: 0 4px 14px rgba(7, 169, 214, 0.35);
  border: 1px solid var(--cyan);
  width: -webkit-fill-available;
}

.price-card .price-card__btn:hover {
  background: var(--cyan-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(7, 169, 214, 0.45);
  border: 1px solid var(--cyan-dark);
}

.price-card .price-card__btn svg {
  width: 15px;
  height: 15px;
}

/* Correction bouton submit (produits variables) */
button.price-card__btn.single_add_to_cart_button {
  background-color: #07a9d6 !important;
  color: #ffffff !important;
  border: 1.5px solid #07a9d6 !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

button.price-card__btn.single_add_to_cart_button:focus,
button.price-card__btn.single_add_to_cart_button:active {
  background-color: #07a9d6 !important;
  color: #ffffff !important;
  border: 1.5px solid #07a9d6 !important;
  outline: none !important;
  box-shadow: 0 4px 15px rgba(7, 169, 214, 0.3) !important;
}

button.price-card__btn.single_add_to_cart_button:hover:not(:disabled) {
  background-color: #0096b7 !important;
  border-color: #0096b7 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

button.price-card__btn.single_add_to_cart_button:disabled,
button.price-card__btn.single_add_to_cart_button.disabled {
  background-color: #f8fbfc !important;
  color: #a0b2b8 !important;
  border: 1.5px solid #e7f1f4 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ── Note below CTA ── */
.price-card__note {
  font-size: 11px;
  color: #488b9d;
  text-align: center;
  padding: 0;
  font-family: "Inter", sans-serif;
  line-height: 17px;
  margin: 0;
}

.formation_enterprice {
  padding: 24px;
  background: #1a2428;
  border-radius: var(--radius-card-icon);
  font-family: "Inter", sans-serif;
}

.formation_enterprice h2 {
  color: var(--white);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}
.formation_enterprice a,
.formation_enterprice p {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #9ca3af;
}
.formation_enterprice a {
  font-weight: 700;
  color: var(--cyan);
  text-decoration: none;
}

/* ════════════════════════════════════════
   PROGRAMME DÉTAILLÉ – numbered list block
════════════════════════════════════════ */
.programme-detaille {
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border: 1px solid #f3f4f6;
  border-radius: var(--radius-card-icon);
  padding: 32px;
}

.program_details_section .course-block__title::before {
  content: unset;
}

.program_details_section .course-block__title img {
  width: 18px;
  height: 10px;
}

.programme-detaille__item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid #f9fafb;
}

.programme-detaille__item:first-child {
  padding-top: 0;
}

.programme-detaille__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Number badge */
.programme-detaille__number {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
  color: #07a9d666;
  font-family: "Inter", sans-serif;
  min-width: 22px;
  padding-top: 2px;
}

/* Right content */
.programme-detaille__body {
  flex: 1;
  min-width: 0;
}

.programme-detaille__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 24px;
  margin-bottom: 8px;
  font-family: "Inter", sans-serif;
}

/* Tags row — inline, separated by spacing */
.programme-detaille__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 25px;
  align-items: center;
}

.programme-detaille__tag {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #6b7280;
  font-family: "Inter", sans-serif;
  white-space: nowrap;
}

/* Variante "produit variable" du header et du price-card */
.ttel_variation_product .single-product .course-page-header {
  background-color: unset;
}

.single-product.ttel_variation_product
  .course-page-header
  .course-breadcrumb__sep,
.single-product.ttel_variation_product .course-page-header .course-breadcrumb a,
.single-product.ttel_variation_product
  .course-page-header
  .course-breadcrumb__current {
  font-size: 14px;
  color: #488b9d;
  font-weight: 400;
  text-transform: capitalize;
}
.single-product.ttel_variation_product
  .course-page-header
  .course-breadcrumb__current {
  color: #0d191c;
}

.single-product.ttel_variation_product .price-card {
  background: transparent;
  background-color: #f8fbfc;
  border: 1px solid #e7f1f4;
}
.single-product.ttel_variation_product .price-card .price-card__meta {
  background: var(--bg-white);
}

.single-product.ttel_variation_product
  .price-card
  .variation-radios
  .radio-card
  input:checked
  ~ .card-content {
  border-color: #07a9d6;
  border-width: 1px;
  background-color: #f0f9fb;
}
.single-product.ttel_variation_product .price-card .variations_form {
  margin: 0;
}

.single-product.ttel_variation_product .price-card__meta-row.row-langue {
  display: none !important;
}

/* =============================================================
   WOOCOMMERCE BUNDLES — grille produits, prix, panier
   ============================================================= */
.bundle-section {
  margin-top: 54px;
}
.bundle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
  padding: 20px 0;
}

.bundle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bundle-header .course-block__title:before {
  content: unset;
}
.bundle-header a {
  color: #07a8d5;
}

.bundle-grid-container-native .bundle_form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 340px !important;
  gap: 24px !important;
  align-items: start;
}

.bundle-grid-container-native
  .bundle_form
  > *:not(.bundled_product):not(.bundle_data) {
  display: none !important;
}

.bundle-grid-container-native .bundled_product table.variations {
  grid-column: span 1 !important;
  width: 100% !important;
  background: #ffffff !important;
  border: 1.5px solid #e7f1f4 !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 16px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease !important;
  height: 100%;
}

.bundle-grid-container-native .bundled_product:hover {
  border-color: var(--cyan) !important;
  box-shadow: 0 8px 24px rgba(7, 169, 214, 0.1) !important;
}

.bundle_form .bundled_product_images {
  display: none !important;
}

.bundle_form .bundled_product_title {
  font-family: "Inter", sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0d191c !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.bundle_form .bundled_product_title a {
  color: inherit !important;
  text-decoration: none !important;
}

.bundle_form .bundled_product_title_link {
  display: none !important;
}

.bundle_form .bundled_product_excerpt p {
  font-size: 12.5px !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* --- Dates & variations selector --- */
.bundle_form table.variations {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.bundle_form table.variations tbody,
.bundle_form table.variations tr {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 !important;
}

.bundle_form table.variations tr:has(select[name*="status"]),
.bundle_form table.variations tr[data-attribute_label*="Status"],
.bundle_form table.variations tr[data-attribute_label*="status"] {
  display: none !important;
}

.bundle_form table.variations td.label label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #488b9d !important;
  letter-spacing: 0.5px;
}

.bundle_form table.variations select {
  height: 42px !important;
  background-color: #f8fbfc !important;
  border: 1px solid #e7f1f4 !important;
  border-radius: 8px !important;
  padding: 0 28px 0 14px !important;
  font-family: "Inter", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #0d191c !important;
  width: 100% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2307A9D6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  cursor: pointer;
}

.bundle_form table.variations select:focus {
  outline: none !important;
  border-color: var(--cyan) !important;
  background-color: #ffffff !important;
}

/* Masquer immédiatement les listes déroulantes natives au chargement (anti-clignotement) */
body .bundle-grid-container-native .bundled_product table.variations {
  display: none !important;
}

.bundle_form .reset_bundled_variations_fixed {
  display: none !important;
}

/* --- Prix AJAX WooCommerce --- */
.bundle_form .woocommerce-variation-price .price {
  color: #0d191c !important;
  font-family: "Inter", sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

.bundle_form .woocommerce-variation-availability .stock {
  color: #6b7280 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin: 2px 0 8px 0 !important;
}

.bundle_form .bundled_product .quantity {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 8px !important;
  padding-top: 16px !important;
  border-top: 1px dashed #e7f1f4 !important;
  width: 100% !important;
}

.bundle_form .bundled_product input.bundled_qty {
  width: 64px !important;
  height: 38px !important;
  border-radius: 20px !important;
  border: 2px solid var(--cyan) !important;
  background-color: #f8fbfc !important;
  color: #0d191c !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 34px !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  transition: all 0.2s ease;
}

.bundle_form .bundled_product input.bundled_qty::-webkit-outer-spin-button,
.bundle_form .bundled_product input.bundled_qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.bundle_form .bundled_product input.bundled_qty:focus {
  background-color: var(--cyan-light) !important;
  outline: none !important;
}

/* --- Panier sticky (verrouillé en colonne 3) --- */
.bundle-grid-container-native .bundle_data {
  grid-column: 3 !important;
  grid-row: 1 / span 50 !important;
  position: sticky !important;
  top: 30px;
  background: #ffffff;
  border: 1px solid #e7f1f4;
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--price-card-shadow);
  height: fit-content;
}

.bundle-grid-container-native .bundle_data::before {
  content: "Prix du Bundle";
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #0d191c;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #e7f1f4;
}

.bundle_form .bundle_price .price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: "Inter", sans-serif !important;
  margin-bottom: 12px;
}

.bundle_form .bundle_price .price:not(.bundle-computed-price)::before {
  content: "Réduction du Bundle";
  font-size: 13px;
  font-weight: 600;
  color: #488b9d;
}

.bundle_form .bundle_price .amount {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0d191c !important;
}

.bundle_form .bundle_price del .amount {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #9ca3af !important;
}

.bundle_price .price ins::after,
.bundle_price .price > .amount::after,
.bundle_price .price > .woocommerce-Price-amount::after {
  content: " HT";
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  margin-left: 6px;
  display: inline-block;
}

.bundle_form .bundle_button .quantity {
  display: none !important;
}

.bundle_form .bundle_add_to_cart_button {
  width: 100% !important;
  height: 48px !important;
  background: var(--cyan) !important;
  color: #ffffff !important;
  font-family: "Inter", sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(7, 169, 214, 0.35) !important;
  cursor: pointer;
  margin-top: 18px !important;
  transition: all 0.2s ease !important;
}

.bundle_form .bundle_add_to_cart_button:hover {
  background: var(--cyan-dark) !important;
  transform: translateY(-1px);
}

.bundle_form .bundle_add_to_cart_button.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* --- Bandeaux d'information WooCommerce --- */
.bundle_form .woocommerce-info::before,
.bundle_form .woocommerce-info::after,
div.woocommerce-info::before,
div.woocommerce-info::after {
  content: none !important;
  display: none !important;
}

.bundle_form .bundle_error,
.bundle_form .bundle_wrap,
.bundle_form .woocommerce-info,
div.woocommerce-info {
  border-top: none !important;
  box-shadow: none !important;
}

.bundle_form .woocommerce-info,
div.woocommerce-info {
  background-color: #fff1f2 !important;
  border: 1px solid #ffe4e6 !important;
  border-left: 4px solid #f43f5e !important;
  color: #9f1239 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  margin: 14px 0 !important;
  font-family: "Inter", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: block !important;
}

.bundle_form .woocommerce-info ul.msg {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.custom-bundle-product-grid .woocommerce-message {
  display: none !important;
}

/* --- Responsive (tablette & mobile) --- */
@media (max-width: 1023px) {
  .bundle-grid-container-native .bundle_form {
    grid-template-columns: 1fr !important;
  }
  .bundle-grid-container-native .bundle_data {
    grid-column: 1 !important;
    grid-row: auto !important;
    position: static !important;
  }
}

/* =============================================================
   FIX BUNDLES WOOCOMMERCE (flexbox + kill phantom)
   ============================================================= */

/* Kill "Phantom" ::before de Woo moving column 1 */
.bundle-grid-container-native form.bundle_form::before,
.bundle-grid-container-native form.bundle_form::after {
  display: none !important;
  content: none !important;
}

/* Form flexbox flexible */
.bundle-grid-container-native form.bundle_form {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 24px !important;
  width: 100% !important;
}

/* Every training takes 50% exact */
.bundle-grid-container-native form.bundle_form > .bundled_product {
  flex: 0 0 calc(50% - 12px) !important;
  max-width: calc(50% - 12px) !important;
  width: calc(50% - 12px) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Recap (Prix total / Panier) force un retour à la ligne à 100% */
.bundle-grid-container-native form.bundle_form > .bundle_data {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-top: 24px !important;
}

/* Smartphone : 100% */
@media (max-width: 767px) {
  .bundle-grid-container-native form.bundle_form > .bundled_product {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Polish bundles v2 */

/* Unlock card */
.bundle-grid-container-native form.bundle_form {
  align-items: stretch !important;
}

.bundle-grid-container-native form.bundle_form > .bundled_product {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
}

/* Le contenu interne s'étire du plafond jusqu'au sol de la carte */
.bundle-grid-container-native .bundled_product .details {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 100% !important;
  height: 100% !important;
}

/* La zone du formulaire prend tout l'espace vide disponible */
.bundle-grid-container-native .bundled_product .variations_form {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

/* "Sélectionner ce module" bottom */
.bundle-grid-container-native .bundled_product .single_variation_wrap {
  margin-top: auto !important;
  padding-top: 20px !important;
}

.bundle-grid-container-native select {
  background-size: 12px !important;
  background-position: right 15px center !important;
  background-repeat: no-repeat !important;
  padding-right: 35px !important;
}

.bundle-grid-container-native .variations .label label {
  text-transform: uppercase !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.bundle-grid-container-native .bundle_availability,
.bundle-grid-container-native .woocommerce-variation-availability {
  display: none !important;
}

.custom-bundle-radios {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 15px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
}

.custom-bundle-radios .radio-card input:disabled ~ .card-content {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background-color: #f9fafa !important;
}

.bundle-grid-container-native .price del,
.bundle_form .price del {
  text-decoration-color: #9ca3af !important;
  color: #9ca3af !important;
  opacity: 0.8 !important;
}

.bundle-grid-container-native .price ins,
.bundle_form .price ins {
  text-decoration: none !important;
  background-color: transparent !important;
  color: #07a9d6 !important;
  font-weight: 800 !important;
}

/* =============================================================
   PARTICIPANTS, TVA & NOTIFICATIONS PANIER
   ============================================================= */
.participant-group {
  border: 1px solid #e1e1e1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.participant-group h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.1em;
  color: #333;
}

/* HT */
.tax-htva {
  font-family: inherit;
  color: inherit;
  font-size: 0.65em;
  font-weight: 600;
  text-transform: uppercase;
  margin-left: 4px;
}

.bundle-section .woocommerce-Price-amount::after {
  content: " HT";
  font-family: "Inter", sans-serif;
  font-size: 0.7em;
  font-weight: 600;
  color: inherit;
  margin-left: 4px;
  text-transform: uppercase;
  display: inline-block;
}

/* Uniformisation en-tête pages produits (e-learning & présentiel) */
.course-page-header.unified-header {
  background-color: #ffffff !important;
  padding: 40px 0 35px 0 !important;
  border-bottom: 1px solid #eef3f5 !important;
}

/* Fil d'Ariane unifié */
.course-page-header.unified-header .course-breadcrumb,
.course-page-header.unified-header .course-breadcrumb a,
.course-page-header.unified-header .course-breadcrumb span {
  text-transform: uppercase !important;
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Couleur des liens (Accueil, Formations) */
.course-page-header.unified-header .course-breadcrumb a {
  color: #07a9d6 !important;
  text-decoration: none !important;
}

.course-page-header.unified-header .course-breadcrumb a:hover {
  text-decoration: underline !important;
}

/* Couleur du texte actuel (la page en cours) */
.course-page-header.unified-header .course-breadcrumb .course-breadcrumb__current {
  color: #7a7a7a !important;
}

/* Titre principal */
.unified-header .course-main__title {
  color: #0d191c !important;
  font-weight: 800 !important;
  margin-bottom: 18px !important;
}

/* Conteneur des tags */
.unified-header .unified-tags {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* Masquer le lien par défaut de WooCommerce */
a.added_to_cart.wc-forward {
  display: none !important;
}

/* ── Bandeau de notification (toast) ── */
.custom-cart-toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #07a9d6;
  color: #ffffff;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(7, 169, 214, 0.35);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  z-index: 99999;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.custom-cart-toast.show {
  transform: translateY(0);
  opacity: 1;
}

.custom-cart-toast svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.custom-cart-toast-link {
  color: #0a1422 !important;
  background: #ffffff;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none !important;
  margin-left: 10px;
  font-weight: 700;
  font-size: 13px;
  transition: all 0.2s ease;
}

.custom-cart-toast-link:hover {
  background: #f0f9fb;
  transform: scale(1.05);
}

/* Design des prix en promo (bundles & catalogue) */

/* Conteneur général du prix */
.price {
  display: block !important;
  text-align: right;
  line-height: 1.2;
  margin-bottom: 12px;
}

/* 1. L'ancien prix (barré) : on le force sur sa propre ligne au-dessus */
.price del {
  display: block !important;
  font-size: 14px !important;
  color: #a0b2b8 !important;
  font-weight: 600 !important;
  text-decoration: line-through !important;
  opacity: 0.8;
  margin-bottom: 2px;
}

/* 2. Le nouveau prix (promo) : imposant et vendeur */
.price ins {
  display: inline-block !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #07a9d6 !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* Ajustement pour les prix normaux (sans promo) */
.price > .woocommerce-Price-amount {
  display: inline-block !important;
  font-size: 22px;
  font-weight: 800;
  color: #07a9d6 !important;
}

/* 3. La mention HT / HTVA : bien alignée à côté du prix actif */
.price .tax-htva,
.price .woocommerce-price-suffix,
.price small {
  display: inline-block !important;
  font-size: 12px !important;
  color: #6b7280 !important;
  font-weight: 600 !important;
  margin-left: 4px !important;
  vertical-align: baseline !important;
}

/* Force la couleur blanche sur le texte des boutons et badges à fond cyan */
.btn.btn--primary,
.btn-pack,
.badge--category,
.badge--category a {
  color: #ffffff !important;
}

.woocommerce-variation-price .price::after {
  content: " HT";
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  margin-left: 6px;
  display: inline-block;
}

.order-total .tax-htva {
  display: none !important;
}

/* =============================================================
   RESPONSIVE — Header, Catalogue, Cartes, WooCommerce
   ============================================================= */

/* Large tablet */
@media (max-width: 1023px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    margin: 0 auto;
  }

  .pricing-card--featured {
    transform: none;
    margin-bottom: 30px;
  }
  .pricing-card--featured:hover {
    transform: translateY(-4px);
  }
  /* Training banner */
  .training-banner__heading {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  .training-banner__features {
    gap: 14px 20px;
  }
  .feature-item {
    max-width: 160px;
  }

  /* Course listing */
  .course-layout {
    flex-direction: column;
  }
  .course-sidebar {
    width: 100%;
  }

  /* Le bouton "Filtres" et le bloc "Trier par" (deplace ici en JS,
     voir main.js) partagent la meme ligne : bouton a gauche (extensible),
     tri compact a droite. */
  .course_listing_section .course-sidebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  /* Bouton "Filtres" : ouvre une popup (bottom sheet) plutot que de
     pousser la liste des formations hors ecran. !important verrouille
     fond/couleur face au reset generique de bouton de WooCommerce qui
     partage la meme specificite et peut gagner selon l'ordre de
     chargement des feuilles de style. flex-shrink:0 (au lieu de 1) +
     pas de min-width:0 : le bouton peut s'etirer mais ne doit jamais se
     retreindre sous la taille de son propre libelle, sinon le texte
     "Filtres" et l'icone debordent de la boite (bug constate : "iltres"
     tronque + chevron qui sort de la pastille cyan). */
  button.course-sidebar__toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1 0 auto;
    white-space: nowrap;
    padding: 16px 18px;
    background: var(--cyan, #07a9d6) !important;
    border: none !important;
    border-radius: var(--radius-btn, 6px);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fff !important;
    cursor: pointer;
    margin-bottom: 0;
    box-shadow: var(--shadow-md, 0 6px 24px rgba(0, 0, 0, 0.1));
  }
  .course-sidebar__toggle-icon {
    flex-shrink: 0;
    color: #fff;
    transition: transform 0.2s ease;
  }
  .course-sidebar__toggle[aria-expanded="true"] .course-sidebar__toggle-icon {
    transform: rotate(180deg);
  }

  /* Bloc "Trier par", deplace ici depuis .custom-shop-header (voir main.js) */
  .course_listing_section .course-sidebar .custom-shop-header__right {
    flex-shrink: 0;
    margin: 0;
    gap: 6px;
  }
  .course_listing_section .course-sidebar .custom-shop-header__desc {
    font-size: 12px;
    white-space: nowrap;
  }
  .course_listing_section .course-sidebar .woocommerce-ordering select,
  .course_listing_section .course-sidebar select.orderby {
    max-width: 110px;
    font-size: 13px;
  }

  /* Le titre/description de la page (.custom-shop-header__left) n'a plus
     a partager sa ligne avec le bloc "Trier par" une fois celui-ci deplace
     dans .course-sidebar : le max-width:70% herite du desktop le forcait
     inutilement dans une colonne etroite (retour a la ligne mot par mot). */
  .custom-shop-header__left {
    max-width: 100%;
  }

  /* La popup (backdrop + panneau) est deplacee en JS pour devenir un
     enfant direct de <body> (voir main.js). Ca garantit que son
     "position: fixed" reste toujours relatif a l'ecran, meme si un
     bloc Elementor parent applique un transform/overflow qui casserait
     sinon le positionnement fixe. On pilote donc son etat via une
     classe sur <body> (.course-sidebar-open) plutot que sur .course-sidebar. */
  .course-sidebar__backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    margin: 0;
    background: rgba(10, 20, 35, 0.55);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.25s ease,
      visibility 0.25s ease;
    z-index: 99998;
  }
  body.course-sidebar-open .course-sidebar__backdrop {
    opacity: 1;
    visibility: visible;
  }

  /* Popup filtres : bottom sheet fixe, cachee sous l'ecran par defaut */
  .course-sidebar__filters {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    height: 85vh;
    max-height: 85vh;
    background: var(--bg-white, #fff);
    border-radius: 16px 16px 0 0;
    box-shadow: var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.14));
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }
  body.course-sidebar-open .course-sidebar__filters {
    transform: translateY(0);
  }

  .course-sidebar__filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-light, #f3f4f6);
  }
  .course-sidebar__filters-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark, #1a2428);
  }
  button.course-sidebar__close {
    background: none !important;
    border: none !important;
    padding: 0;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    line-height: 1;
    font-size: 24px;
    color: var(--text-muted, #6b7280) !important;
    cursor: pointer;
  }

  /* min-height:0 est indispensable ici : sans ca, un enfant flex ne
     peut pas se retreindre sous sa taille de contenu et overflow-y:auto
     n'a plus aucun effet (bug classique flexbox). */
  .course-sidebar__filters-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 20px !important;
  }

  .course-sidebar__filters-footer {
    display: block;
    flex-shrink: 0;
    padding: 14px 20px;
    border-top: 1px solid var(--border-light, #f3f4f6);
    /* Marge de securite pour les mobiles avec home-indicator (iOS) */
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  button.course-sidebar__apply {
    display: block;
    width: 100% !important;
    background: var(--cyan, #07a9d6) !important;
    border: none !important;
    border-radius: var(--radius-btn, 6px);
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    padding: 14px;
    cursor: pointer;
  }

  /* Empeche le scroll de la page derriere la popup ouverte */
  body.course-sidebar-open {
    overflow: hidden;
  }

  /* Accordéon des groupes de filtres (Catégories/Format/Pays/Secteur/Langue) :
     replies par defaut, un clic sur le titre ouvre/ferme le groupe. */
  .filter-group.filter-accordion > h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
  }
  .filter-group.filter-accordion > h4::after {
    content: "";
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    margin-left: 10px;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }
  .filter-group.filter-accordion.is-collapsed > h4::after {
    transform: rotate(-45deg);
  }
  .filter-group.filter-accordion.is-collapsed > *:not(h4) {
    display: none;
  }

  /* Card stays as a row but allows content to wrap onto next line */
  .course-card {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
  }

  /* Date box + image stay inline (natural row order, no change needed) */
  .course-date {
    flex-shrink: 0;
  }
  .course-image {
    flex-shrink: 0;
  }

  /* Content takes full width on its own line below date + image */
  .course-content {
    flex: 1 1 100%;
    padding: 0;
    max-width: 100%;
  }

  /* Action (price + button) also full width, left-aligned. margin-left:0
     et justify-content:flex-start ecrasent le margin-left:auto /
     justify-content:space-between herites du style desktop (qui poussait
     le bloc prix+bouton contre le bord droit alors que tags/titre/meta
     restent alignes a gauche). */
  .course-action {
    flex: 1 1 100%;
    text-align: left;
    border-left: none;
    border-top: 1px solid var(--border-light);
    max-width: 100%;
    margin-left: 0;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
  }
  .course-action .price {
    margin-left: 0;
  }

  /* Carte compacte (homepage, [ttel_upcoming_sessions_compact]) : sans image,
     la pastille date se retrouvait seule collee a gauche sur sa propre ligne
     (le contenu passant a 100% de largeur juste en dessous). On centre toute
     la carte a la place d'un alignement a gauche desequilibre. */
  .course-card--compact {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  /* .course-date garde son margin-right:15px pense pour le layout en ligne
     (espace avant l'element suivant) : en colonne centree, cette marge
     asymetrique decale visuellement la pastille vers la gauche du centre. */
  .course-card--compact .course-date {
    margin-right: 0;
  }
  .course-card--compact .tags {
    justify-content: center;
  }
  .course-card--compact .course-action {
    justify-content: center;
  }

  /* Page "Formations en ligne" (catalogue sans date) : les tags passent
     a cote de l'image au lieu de repasser en dessous sur leur propre
     ligne. .course-content garde son display:contents pour exposer ses
     enfants (.tags/h3/.meta-list) comme items directs de la grille de
     .course-card, chacun place via grid-area. Scope a cette page via la
     body class car .course-card est aussi utilise par la page
     "presentiel" (avec .course-date en plus), qui garde son layout
     actuel non modifie. */
  .page-template-page-product-catalogue-php .course-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "image tags"
      "title title"
      "meta meta"
      "action action";
    align-items: start;
    column-gap: 12px;
    row-gap: 8px;
  }
  .page-template-page-product-catalogue-php .course-image {
    grid-area: image;
  }
  .page-template-page-product-catalogue-php .course-content {
    display: contents;
  }
  .page-template-page-product-catalogue-php .course-content .tags {
    grid-area: tags;
    align-self: center;
  }
  .page-template-page-product-catalogue-php .course-content h3 {
    grid-area: title;
  }
  .page-template-page-product-catalogue-php .course-content .meta-list {
    grid-area: meta;
  }
  .page-template-page-product-catalogue-php .course-action {
    grid-area: action;
  }

  /* Packs promotionnels */
  .promo-pack-card {
    flex-direction: column;
  }
  /* Page "Formations en ligne" : le bandeau "PACK BESTSELLER" (dans
     .promo-pack-card__meta, imbrique dans .promo-pack-card__content)
     doit apparaitre au-dessus de l'image plutot qu'en dessous. Meme
     technique display:contents + order pour reordonner a travers le
     wrapper .promo-pack-card__content. */
  .page-template-page-product-catalogue-php .promo-pack-card__content {
    display: contents;
  }
  .page-template-page-product-catalogue-php .promo-pack-card__ribbon {
    order: -2;
  }
  .page-template-page-product-catalogue-php .promo-pack-card__meta {
    order: -1;
  }
  .page-template-page-product-catalogue-php .promo-pack-card__image-wrap {
    order: 0;
  }
  .page-template-page-product-catalogue-php .promo-pack-card__name {
    order: 1;
  }
  .page-template-page-product-catalogue-php .promo-pack-card__desc {
    order: 2;
  }
  .page-template-page-product-catalogue-php .promo-pack-card__footer {
    order: 3;
  }
  .promo-pack-card__name {
    font-size: 16px;
  }
  .promo-packs__title {
    font-size: 1.3rem;
  }

  /* Credits */
  .credits-section__title {
    font-size: 1.5rem;
    margin-bottom: 30px;
  }

  /* FAQ */
  .faq-section {
    padding: 44px 0;
  }
  .faq-section__container {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .faq-section__desc {
    max-width: 100%;
  }
  .faq-section__heading {
    font-size: 1.6rem;
  }
  .faq-item__trigger {
    padding: 16px 4px;
  }
  .faq-item__question {
    font-size: 0.85rem;
  }
  .course-page-layout-wrapper {
    grid-template-columns: 1fr;
  }

  .course-sidebar {
    position: static;
    order: -1;
  }

  .price-card {
    max-width: 480px;
    margin: 0 auto;
  }
}

/* Mobile */
@media (max-width: 767px) {
  /* Badge [format_badge] (section "EN LIGNE" de la home, Loop Grid Elementor) :
     le widget shortcode qui le contient passe en width:100% sur mobile (regle
     Elementor du template Loop Grid), mais le badge <a class="tag"> reste un
     element inline non centre dedans et colle donc a gauche. .elementor-shortcode
     est le wrapper standard qu'Elementor met autour de tout widget Shortcode ;
     scope a .elementor-widget-loop-grid pour ne pas toucher les autres usages
     (ex: carte de session compacte, deja centree via .course-card--compact). */
  .elementor-widget-loop-grid .elementor-shortcode {
    text-align: center;
  }

  .training-banner__content {
    padding: 48px 20px;
  }
  .training-banner__badge {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
  }
  .training-banner__heading {
    font-size: 2rem;
    margin-bottom: 28px;
    line-height: 1.1;
  }
  .training-banner__features {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 36px;
  }
  .feature-item {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .training-banner__ctas {
    flex-direction: column;
    align-items: center;
  }
  .btn {
    width: 100%;
    justify-content: center;
    font-size: 0.85rem;
    padding: 14px 20px;
  }
  .meta-list {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* Page "Formations en presentiel" (avec date) : langue/duree/niveau
     passent chacun sur leur propre ligne au lieu de rester cote a cote
     tant qu'ils tiennent dans la largeur (comportement par defaut de
     flex-wrap seul). Scope a cette page car .meta-list est aussi utilise
     sur la page "sans date" et sur la fiche produit (related-courses),
     qui gardent leur layout actuel non modifie. */
  .page-template-page-product-catalogue-date-php .meta-list .meta-tag {
    flex: 1 1 100%;
  }

  .course-action .price {
    font-size: 18px;
    margin-bottom: 0px;
  }
  /* Packs promotionnels */
  .promo-packs__grid {
    grid-template-columns: 1fr;
  }
  .promo-packs__accent-line {
    display: none;
  }
  .promo-pack-card {
    flex-direction: column;
  }
  .promo-pack-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .btn-pack {
    width: 100%;
    text-align: center;
    font-size: 0.78rem;
    padding: 10px 16px;
  }
  .objectives-grid {
    grid-template-columns: 1fr;
  }

  .course-main__title {
    font-size: 1.3rem;
  }

  .price-card__two-col {
    grid-template-columns: 1fr;
  }

  .price-card__two-col .price-card__meta-row:first-child {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }

  .programme-detaille__tags {
    gap: 4px 12px;
  }

  .programme-detaille__tag {
    font-size: 0.72rem;
  }

  .programme-detaille__item {
    gap: 14px;
    padding: 18px 0;
  }

  /* Packs de crédits */
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .pricing-card--featured {
    transform: none;
    margin-bottom: 0;
  }
  .pricing-card--featured:hover {
    transform: translateY(-4px);
  }
  .pricing-card {
    padding: 24px 20px 28px;
  }
  .pricing-card__price {
    font-size: 30px;
  }
}

/* =============================================================
   PAGE D'ACCUEIL — design system Elementor (.el-*)
   ============================================================= */
.el-home-wrapper {
  font-family: "Inter", sans-serif;
  color: #0a1422;
  background-color: #ffffff;
}

/* --- Boutons globaux --- */
.el-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none !important;
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
}
.el-btn--primary { background-color: #07a9d6; color: #ffffff !important; box-shadow: 0 4px 15px rgba(7, 169, 214, 0.3); }
.el-btn--primary:hover { background-color: #0096b7; transform: translateY(-2px); }
.el-btn--pink { background-color: #07A9D6; color: #ffffff !important; box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3); }
.el-btn--pink:hover { background-color: #ffffff; color: #07A9D6 !important; transform: translateY(-2px); }
.el-btn--large {
  padding: 16px 32px;
  font-size: 15px;
  white-space: nowrap;
}

/* --- 1. Hero header --- */
.el-hero {
  padding: 80px 20px;
  text-align: center;
  background: radial-gradient(circle at center, #f8fbfc 0%, #ffffff 100%);
  border-bottom: 1px solid #e7f1f4;
}
.el-hero__content { max-width: 800px; margin: 0 auto; }

/* Gère l'espacement externe et l'alignement de la boîte globale */
.el-tagline {
  margin-bottom: 24px;
  text-align: center; /* Assure que la pilule reste centrée */
}

/* Applique le style "pilule" directement sur le texte Elementor */
.el-tagline .elementor-heading-title {
  display: inline-block;
  background-color: #e7f1f4;
  color: #07a9d6 !important;
  font-family: "Inter", sans-serif !important;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}
.el-hero__title { font-size: 46px; font-weight: 800; line-height: 1.2; margin-bottom: 24px; color: #0a1422; }
.el-text-cyan { color: #07a9d6; }
.el-hero__desc { font-size: 18px; color: #488b9d; line-height: 1.6; margin-bottom: 35px; }

/* --- 2. Les parcours (cartes) --- */
.el-pathways { padding: 80px 20px; max-width: 1100px; margin: 0 auto; }
.el-pathways__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 40px; }

.el-path-card {
  border-radius: 20px;
  padding: 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.el-path-card:hover { transform: translateY(-5px); }

.el-path-card--dark { background-color: #1a2428; color: #ffffff; box-shadow: 0 20px 40px rgba(26, 36, 40, 0.15); }
.el-path-card--cyan { background-color: #f8fbfc; border: 1px solid #e7f1f4; box-shadow: 0 20px 40px rgba(7, 169, 214, 0.08); }

.el-path-card__badge {
  position: absolute;
  top: 30px; right: 30px;
  font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 6px; letter-spacing: 1px;
}
.el-path-card--dark .el-path-card__badge { background: rgba(255,255,255,0.1); color: #fff; }
.el-path-card--cyan .el-path-card__badge { background: #e7f1f4; color: #07a9d6; }

.el-path-card__icon { width: 50px; height: 50px; margin-bottom: 20px; }
.el-path-card--cyan .el-path-card__icon { color: #07a9d6; }

.el-path-card__header h2 { font-size: 26px; font-weight: 800; margin-bottom: 15px; }
.el-path-card--dark .el-path-card__header h2 { color: #ffffff; }
.el-path-card--cyan .el-path-card__header h2 { color: #0a1422; }

.el-path-card__header p { font-size: 15px; line-height: 1.6; margin-bottom: 35px; }
.el-path-card--dark .el-path-card__header p { color: #a0b2b8; }
.el-path-card--cyan .el-path-card__header p { color: #488b9d; }

.el-course-preview { flex-grow: 1; margin-bottom: 30px; }
.el-course-preview__label { font-size: 13px; font-weight: 700; text-transform: uppercase; margin-bottom: 15px; opacity: 0.7; }

.el-course-item { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(160, 178, 184, 0.2); }
.el-course-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.el-course-date { background: #2b3544; border-radius: 8px; width: 45px; height: 45px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; line-height: 1.1; }
.el-course-date span { font-size: 9px; font-weight: 700; }
.el-course-date strong { font-size: 15px; font-weight: 800; }

.el-course-icon-round { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.el-course-icon-round svg { width: 20px; height: 20px; }

.el-course-info h4 { font-size: 13.5px; font-weight: 700; margin: 0 0 5px 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.el-path-card--dark .el-course-info h4 { color: #ffffff; }
.el-path-card--cyan .el-course-info h4 { color: #0a1422; }

.el-course-info span { font-size: 13px; font-weight: 700; }
.el-path-card--dark .el-course-info span { color: #07a9d6; }
.el-path-card--cyan .el-course-info span { color: #07a9d6; }

.el-path-card__btn { display: block; text-align: center; padding: 16px; border-radius: 8px; font-weight: 700; text-decoration: none !important; transition: background 0.2s; }
.el-path-card--dark .el-path-card__btn { background: rgba(255,255,255,0.1); color: #fff; }
.el-path-card--dark .el-path-card__btn:hover { background: #07a9d6; }
.el-path-card--cyan .el-path-card__btn { background: #07a9d6; color: #fff; }
.el-path-card--cyan .el-path-card__btn:hover { background: #0096b7; }

/* --- 3. Réassurance (features) --- */
.el-features {
  background-color: #f8fbfc;
  padding: 80px 20px;
  border-top: 1px solid #e7f1f4;
  border-bottom: 1px solid #e7f1f4;

  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.el-features__header { text-align: center; margin-bottom: 50px; }
.el-features__header h2 { font-size: 32px; font-weight: 800; color: #0a1422; }

.el-features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; max-width: 1100px; margin: 0 auto; }
.el-feature-box { background: #fff; padding: 35px; border-radius: 16px; border: 1px solid #e7f1f4; text-align: center; transition: box-shadow 0.3s; }
.el-feature-box:hover { box-shadow: 0 10px 30px rgba(7, 169, 214, 0.08); }
.el-feature-box__icon { width: 50px; height: 50px; margin: 0 auto 20px; color: #07a9d6; }
.el-feature-box h3 { font-size: 18px; font-weight: 700; margin-bottom: 15px; color: #0a1422; }
.el-feature-box p { font-size: 14.5px; color: #488b9d; line-height: 1.6; margin: 0; }

/* --- 4. Tableau comparatif --- */
.el-comparison { padding: 80px 20px; max-width: 1000px; margin: 0 auto; }
.el-comparison__title { text-align: center; font-size: 32px; font-weight: 800; color: #0a1422; margin-bottom: 50px; }

.el-table-container {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f2f7f9 !important;
  box-shadow: 0 10px 40px rgba(10, 20, 34, 0.03);
  overflow: hidden;
  overflow-x: auto;
}

.el-modern-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  margin: 0;
  border: none !important;
}

.el-modern-table th,
.el-modern-table td {
  padding: 20px 25px;
  border-bottom: 1px solid #e7f1f4 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  font-size: 15px;
}

.el-modern-table th { background: #fafcfd; font-weight: 700; color: #0a1422; }
.el-modern-table td:first-child { font-weight: 600; color: #1a2428; width: 30%; }
.el-modern-table td:not(:first-child) { color: #488b9d; }
.el-modern-table tbody tr:last-child td { border-bottom: none !important; }

.status-yes, .status-no { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.status-yes { color: #059669; }
.status-no { color: #dc2626; opacity: 0.8; }
.status-yes svg, .status-no svg { width: 16px; height: 16px; }

/* --- 5. CTA B2B entreprise --- */
.el-b2b-cta { background-color: #1a2428; border-radius: 20px; padding: 60px 50px; max-width: 1100px; margin: 0 auto 80px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; background-image: url('data:image/svg+xml,%3Csvg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z" fill="%2307a9d6" fill-opacity="0.05" fill-rule="evenodd"/%3E%3C/svg%3E'); }
.el-b2b-cta__content { flex: 1; min-width: 300px; }
.el-b2b-cta__content h2 { color: #ffffff; font-size: 28px; font-weight: 800; margin: 0 0 15px 0; line-height: 1.2; }
.el-b2b-cta__content p { color: #a0b2b8; font-size: 16px; margin: 0; line-height: 1.6; }

/* --- Responsive --- */
@media (max-width: 768px) {
  .el-hero__title { font-size: 34px; }
  .el-pathways { padding: 50px 20px; }
  .el-path-card { padding: 30px 20px; }
  .el-b2b-cta { flex-direction: column; text-align: center; padding: 40px 20px; border-radius: 0; }
  .el-modern-table th, .el-modern-table td { padding: 15px; font-size: 14px; }
  .el-cta { flex-direction: column; text-align: center; padding: 40px 20px; }
  .el-table th, .el-table td { padding: 15px 10px; font-size: 13px; }
}

/* =============================================================
   CONFIRMATION DE COMMANDE — page de remerciement (checkout/thankyou.php)
   ============================================================= */

.btn--outline {
  background: transparent;
  color: var(--cyan);
  border: 2px solid var(--cyan);
}

.btn--outline:hover {
  background: var(--cyan-soft);
}

/* Elementor's checkout-page widget kept a fixed-height spacer below it for the
   (much taller) native checkout form — with our compact confirmation content
   that spacer now shows up as a large empty gap before the footer. */
.elementor-widget-woocommerce-checkout-page + .elementor-widget-spacer {
  display: none;
}

.order-confirmation {
  padding: 64px 0 96px;
  background: var(--bg-page);
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.order-confirmation .container {
  max-width: 960px;
  background: var(--bg-white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 48px;
}

.order-confirmation__status {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 40px;
}

.order-confirmation__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cyan-soft);
  color: var(--cyan);
  box-shadow: 0 0 0 8px var(--cyan-bg);
}

.order-confirmation__icon svg {
  width: 32px !important;
  height: 32px !important;
  display: block;
  flex-shrink: 0;
}

.order-confirmation__icon--failed {
  background: #fee2e2;
  color: #dc2626;
  box-shadow: 0 0 0 8px rgba(220, 38, 38, 0.05);
}

.order-confirmation__title {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 12px;
}

.order-confirmation__subtitle {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
}

.order-confirmation__subtitle strong {
  color: var(--text-dark);
}

.order-confirmation__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.order-confirmation__ctas--aside {
  margin-top: 20px;
  flex-direction: column;
  align-items: stretch;
}

.order-confirmation__ctas--aside .btn {
  justify-content: center;
}

.order-confirmation__home-link {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
  padding-top: 4px;
}

.order-confirmation__home-link:hover {
  color: var(--cyan);
}

/* Overview strip (order number / date / payment / total) */
.order-confirmation__overview {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1px;
  max-width: 860px;
  margin: 0 auto 40px;
  background: var(--card-border);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.order-confirmation__overview-item {
  flex: 1 1 180px;
  background: var(--bg-white);
  padding: 18px 20px;
  text-align: center;
}

.order-confirmation__overview-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-label);
  margin-bottom: 6px;
}

.order-confirmation__overview-value {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-dark);
}

/* Gateway instructions (e.g. "Pay with cash upon delivery") */
.order-confirmation__gateway-notice {
  max-width: 860px;
  margin: 0 auto 32px;
  padding: 16px 20px;
  background: var(--cyan-bg);
  border: 1px solid var(--cyan-border-10);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.order-confirmation__gateway-notice p {
  margin: 0;
}

.order-confirmation__gateway-notice p + p {
  margin-top: 8px;
}

/* Layout: order/customer details (native WooCommerce markup) + sidebar */
.order-confirmation__grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.order-confirmation__grid--single {
  grid-template-columns: 1fr;
  max-width: 560px;
}

.order-confirmation__details {
  background: var(--bg-white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 32px;
}

.order-confirmation__aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.order-confirmation__grid--single .order-confirmation__aside {
  max-width: 560px;
  margin: 0 auto;
}

.order-confirmation__next-steps ul {
  list-style: none;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.order-confirmation__next-steps li {
  position: relative;
  padding-left: 16px;
}

.order-confirmation__next-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

.order-confirmation__next-steps a {
  color: var(--cyan);
  font-weight: 600;
}

/* ── Skin native WooCommerce order-details / customer-details markup ── */
.order-confirmation__details .woocommerce-order-details__title,
.order-confirmation__details .woocommerce-column__title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 16px;
}

.order-confirmation__details table.shop_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0;
}

.order-confirmation__details table.shop_table th,
.order-confirmation__details table.shop_table td {
  padding: 12px 6px;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
  text-align: left;
}

.order-confirmation__details table.shop_table thead th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-label);
}

.order-confirmation__details table.shop_table tfoot th {
  font-weight: 600;
  color: var(--text-body);
}

.order-confirmation__details table.shop_table tfoot tr:last-child th,
.order-confirmation__details table.shop_table tfoot tr:last-child td {
  border-bottom: none;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-dark);
}

.order-confirmation__details table.shop_table td.product-total,
.order-confirmation__details table.shop_table tfoot td {
  text-align: right;
}

.order-confirmation__details .wc-item-meta {
  list-style: none;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.order-confirmation__details .wc-item-meta li {
  display: flex;
  gap: 4px;
}

.order-confirmation__details .woocommerce-customer-details {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}

.order-confirmation__details .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  list-style: none;
}

.order-confirmation__details address {
  font-style: normal;
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.6;
}

.order-confirmation__details .woocommerce-customer-details--phone,
.order-confirmation__details .woocommerce-customer-details--email {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

@media (max-width: 900px) {
  .order-confirmation__grid {
    grid-template-columns: 1fr;
  }

  .order-confirmation__aside {
    flex-direction: column-reverse;
  }
}

@media (max-width: 600px) {
  .order-confirmation .container {
    padding: 24px 20px;
  }

  .order-confirmation__title {
    font-size: 26px;
  }

  .order-confirmation__details {
    padding: 22px;
  }

  .order-confirmation__details .woocommerce-columns--addresses {
    grid-template-columns: 1fr;
  }

  .order-confirmation__ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .order-confirmation__ctas .btn {
    justify-content: center;
  }
}