/*
Theme Name: Jeune Smart 2026
Description: Theme sur mesure pour jeunesmart.com, refonte 2026 (direction "chaleur locale futuriste"). S'appuie sur WooCommerce et Tutor LMS deja en place.
Author: Jeune Smart
Version: 1.0.0
Requires PHP: 8.0
Text Domain: jeunesmart-2026
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --js-bg: #FBF3E7;
  --js-bg-alt: #F4E8D7;
  --js-ink: #2B2118;
  --js-ink-soft: #5B4E3F;
  --js-ink-muted: #8A7A63;
  --js-terracotta: #B5502B;
  --js-terracotta-dark: #8f3e21;
  --js-orange: #F4A25B;
  --js-forest: #2F5B47;
  --js-forest-dark: #1c3d2e;
  --js-dark: #2B2118;
  --js-dark-alt: #241A10;
  --js-paper: #FBF3E7;
  --js-cream-line: rgba(43,33,24,0.1);
  --js-radius-pill: 30px;
  --js-radius-card: 20px;
  --js-shadow-card: 0 16px 40px rgba(43,33,24,0.08);
}

* { box-sizing: border-box; }

body.jeunesmart-2026 {
  margin: 0;
  font-family: 'Karla', system-ui, sans-serif;
  background: var(--js-bg);
  color: var(--js-ink);
}

.jeunesmart-2026 a { color: var(--js-terracotta); text-decoration: none; }
.jeunesmart-2026 a:hover { color: var(--js-terracotta-dark); }

.jeunesmart-2026 .js-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}

.jeunesmart-2026 .js-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 70px;
}

/* ---- buttons ---- */
.jeunesmart-2026 .js-btn {
  display: inline-block;
  font-weight: 700;
  font-family: 'Karla', sans-serif;
  border-radius: var(--js-radius-pill);
  padding: 15px 28px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.jeunesmart-2026 .js-btn-fill {
  background: var(--js-terracotta);
  color: var(--js-bg) !important;
}
.jeunesmart-2026 .js-btn-fill:hover { background: var(--js-terracotta-dark); color: var(--js-bg) !important; }
.jeunesmart-2026 .js-btn-dark {
  background: var(--js-forest);
  color: var(--js-bg) !important;
}
.jeunesmart-2026 .js-btn-dark:hover { background: var(--js-forest-dark); color: var(--js-bg) !important; }
.jeunesmart-2026 .js-btn-outline {
  border: 1.6px solid var(--js-ink);
  color: var(--js-ink) !important;
  background: transparent;
  padding: 13px 26px;
}
.jeunesmart-2026 .js-btn-outline:hover { background: var(--js-ink); color: var(--js-bg) !important; }

/* ---- header ---- */
.jeunesmart-2026 .js-header {
  position: relative;
  overflow: hidden;
}
.jeunesmart-2026 .js-header-blob {
  position: absolute;
  top: -220px; right: -160px;
  width: 760px; height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--js-orange), var(--js-terracotta) 70%);
  opacity: 0.9;
  pointer-events: none;
}
.jeunesmart-2026 .js-header-blob-2 {
  position: absolute;
  top: -60px; right: 280px;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: var(--js-forest);
  opacity: 0.85;
  pointer-events: none;
}
.jeunesmart-2026 .js-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 70px;
  background: var(--js-bg);
}
.jeunesmart-2026 .js-logo {
  display: flex; align-items: center; gap: 11px;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 20px; color: var(--js-ink);
}
.jeunesmart-2026 .js-logo span { color: var(--js-terracotta); }
.jeunesmart-2026 .js-nav { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 600; color: var(--js-ink-soft); }
.jeunesmart-2026 .js-nav a { color: inherit; }
.jeunesmart-2026 .js-nav a:hover { color: var(--js-ink); }
/* "Connexion" est maintenant un vrai bouton (terracotta), de la meme
   taille que "S'inscrire" (vert) - les deux se distinguent ainsi
   clairement du reste du menu, sans que l'un domine visuellement l'autre. */

/* Menu deroulant "Coaching" (desktop) - ouverture au survol/focus, comme
   un menu classique ; le lien lui-meme reste cliquable vers la page des
   formules, le sous-menu n'est qu'un raccourci en plus. */
.jeunesmart-2026 .js-nav-dropdown { position: relative; }
.jeunesmart-2026 .js-nav-dropdown > a { display: flex; align-items: center; gap: 5px; }
.jeunesmart-2026 .js-nav-dropdown-panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  background: #FFFFFF; border: 1px solid var(--js-cream-line); border-radius: 14px;
  box-shadow: 0 16px 36px rgba(43,33,24,0.12); padding: 10px; width: 300px;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease;
  z-index: 50;
}
.jeunesmart-2026 .js-nav-dropdown:hover .js-nav-dropdown-panel,
.jeunesmart-2026 .js-nav-dropdown:focus-within .js-nav-dropdown-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.jeunesmart-2026 .js-nav-dropdown-panel a {
  padding: 10px 12px; border-radius: 8px; font-size: 13px; font-weight: 600;
  line-height: 1.4; color: var(--js-ink-soft) !important;
}
.jeunesmart-2026 .js-nav-dropdown-panel a:hover { background: var(--js-bg-alt); color: var(--js-ink) !important; }
.jeunesmart-2026 .js-nav-dropdown-tarifs {
  margin-top: 4px; padding-top: 12px !important; border-top: 1px solid var(--js-cream-line);
  color: var(--js-terracotta) !important;
}
.jeunesmart-2026 .js-burger {
  display: none;
  width: 44px; height: 44px; border-radius: 12px; background: var(--js-dark);
  align-items: center; justify-content: center; border: none; cursor: pointer;
}

/* ---- hero ---- */
.jeunesmart-2026 .js-hero { position: relative; z-index: 1; padding: 80px 70px 56px; max-width: 680px; }
.jeunesmart-2026 .js-eyebrow {
  display: inline-block; font-size: 12px; color: var(--js-terracotta);
  background: #FFFFFF; padding: 10px 16px; border-radius: 20px;
  box-shadow: 0 6px 16px rgba(43,33,24,0.08); margin-bottom: 20px;
}
.jeunesmart-2026 .js-hero h1 {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 54px; line-height: 1.1;
  letter-spacing: -0.01em; margin: 0 0 22px; color: var(--js-ink);
}
.jeunesmart-2026 .js-hero p { font-size: 17px; line-height: 1.7; color: var(--js-ink-soft); max-width: 500px; margin: 0 0 34px; }
.jeunesmart-2026 .js-hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.jeunesmart-2026 .js-trustbar { position: relative; z-index: 1; display: flex; padding: 8px 70px 48px; gap: 14px; flex-wrap: wrap; }
.jeunesmart-2026 .js-pill {
  display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--js-ink-soft);
  background: var(--js-bg-alt); padding: 10px 16px; border-radius: 30px; white-space: nowrap;
}
.jeunesmart-2026 .js-pill svg { flex-shrink: 0; }

/* ---- section: valeur ---- */
.jeunesmart-2026 .js-value { padding: 72px 70px 88px; display: flex; gap: 64px; align-items: center; }
.jeunesmart-2026 .js-value-text { flex: 0 0 480px; }
.jeunesmart-2026 .js-rule { width: 16px; height: 3px; background: var(--js-terracotta); margin-bottom: 20px; }
.jeunesmart-2026 .js-value h2 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 32px; line-height: 1.25; margin: 0 0 20px; }
.jeunesmart-2026 .js-value p { font-size: 15.5px; line-height: 1.75; color: var(--js-ink-soft); margin: 0 0 28px; }
.jeunesmart-2026 .js-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 20px; }
.jeunesmart-2026 .js-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; font-weight: 600; color: #3A2E20; }
.jeunesmart-2026 .js-check svg { flex-shrink: 0; margin-top: 1px; }
.jeunesmart-2026 .js-value-art {
  flex: 1; height: 420px; border-radius: 24px; position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--js-bg-alt), #EAD3AE);
}
.jeunesmart-2026 .js-value-art img { width: 100%; height: 100%; object-fit: cover; }

/* ---- section: formations ---- */
.jeunesmart-2026 .js-formations { background: var(--js-bg-alt); padding: 80px 70px 88px; }
.jeunesmart-2026 .js-formations-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.jeunesmart-2026 .js-formations-head h2 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 34px; margin: 0 0 16px; }
.jeunesmart-2026 .js-formations-head p { font-size: 15.5px; line-height: 1.7; color: var(--js-ink-soft); margin: 0; }
.jeunesmart-2026 .js-course-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; max-width: 920px; margin: 0 auto; }
.jeunesmart-2026 .js-course-card { background: #FFFFFF; border-radius: var(--js-radius-card); overflow: hidden; box-shadow: var(--js-shadow-card); display: block; }
.jeunesmart-2026 .js-course-thumb {
  height: 180px; position: relative; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--js-orange), var(--js-terracotta));
}
.jeunesmart-2026 .js-course-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jeunesmart-2026 .js-course-thumb-alt { background: linear-gradient(135deg, var(--js-forest), var(--js-forest-dark)); }
.jeunesmart-2026 .js-course-badge {
  position: absolute; top: 12px; left: 12px; background: var(--js-forest); color: var(--js-bg);
  font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.08em;
}
.jeunesmart-2026 .js-course-body { padding: 22px; }
.jeunesmart-2026 .js-course-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 17px; margin-bottom: 8px; line-height: 1.3; color: var(--js-ink); }
.jeunesmart-2026 .js-course-meta { font-size: 12.5px; color: var(--js-ink-muted); margin-bottom: 16px; }
.jeunesmart-2026 .js-course-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jeunesmart-2026 .js-price-old { font-size: 13px; color: #B08F72; text-decoration: line-through; }
.jeunesmart-2026 .js-price-now { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 19px; color: var(--js-terracotta); }
.jeunesmart-2026 .js-formations-cta { text-align: center; margin-top: 44px; }

/* ---- section: bandeau coaching individuel (accueil) ---- */
.jeunesmart-2026 .js-coach-banner {
  background: var(--js-bg-alt); border-top: 1px solid var(--js-cream-line); border-bottom: 1px solid var(--js-cream-line);
  padding: 56px 70px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.jeunesmart-2026 .js-coach-banner h2 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 24px; margin: 0 0 10px; color: var(--js-ink); }
.jeunesmart-2026 .js-coach-banner p { font-size: 14.5px; color: var(--js-ink-soft); margin: 0; max-width: 480px; }

/* ---- section: communaute ---- */
.jeunesmart-2026 .js-community {
  position: relative; background: var(--js-dark); padding: 76px 70px; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.jeunesmart-2026 .js-community-blob {
  position: absolute; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, var(--js-terracotta), transparent 70%); opacity: 0.35; right: -100px; top: -140px;
}
.jeunesmart-2026 .js-community-text { position: relative; max-width: 560px; }
.jeunesmart-2026 .js-community h2 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 28px; line-height: 1.3; margin: 0 0 16px; color: var(--js-bg); }
.jeunesmart-2026 .js-community p { font-size: 15px; line-height: 1.7; color: #C9BBA5; margin: 0; }

/* ---- section: blog ---- */
.jeunesmart-2026 .js-blog { padding: 76px 70px; text-align: center; }
.jeunesmart-2026 .js-blog h2 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 30px; margin: 0 auto 16px; max-width: 560px; }
.jeunesmart-2026 .js-blog p { font-size: 15px; line-height: 1.7; color: var(--js-ink-soft); max-width: 560px; margin: 0 auto 32px; }

/* ---- footer ---- */
.jeunesmart-2026 .js-footer { background: var(--js-dark-alt); padding: 64px 70px 32px; color: #C9BBA5; }
/* Le logo ".js-logo" est pense par defaut pour l'en-tete (fond clair -> texte
   "Jeune" sombre). Sur le pied de page (fond sombre), on l'eclaircit pour
   qu'il reste lisible - seul le mot "Smart" garde sa couleur terracotta,
   comme partout ailleurs sur le site. */
.jeunesmart-2026 .js-footer .js-logo { color: var(--js-bg); }
.jeunesmart-2026 .js-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.jeunesmart-2026 .js-footer h4 { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 13px; color: var(--js-bg); margin: 0 0 16px; }
.jeunesmart-2026 .js-footer-links { display: flex; flex-direction: column; gap: 11px; font-size: 13.5px; }
.jeunesmart-2026 .js-footer-links a { color: #C9BBA5; }
.jeunesmart-2026 .js-footer-links a:hover { color: var(--js-bg); }
.jeunesmart-2026 .js-footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; font-size: 12.5px; flex-wrap: wrap; gap: 10px; }

/* ---- mobile nav drawer ---- */
.jeunesmart-2026 .js-mobile-drawer {
  display: none; position: fixed; inset: 0; background: var(--js-bg); z-index: 100;
  padding: 26px 24px; overflow-y: auto;
}
.jeunesmart-2026 .js-mobile-drawer.is-open { display: block; }
.jeunesmart-2026 .js-mobile-drawer-close { width: 40px; height: 40px; border-radius: 10px; background: var(--js-dark); border: none; display: flex; align-items: center; justify-content: center; margin-bottom: 32px; cursor: pointer; }
.jeunesmart-2026 .js-mobile-drawer a { display: block; padding: 16px 4px; font-size: 17px; font-weight: 600; color: var(--js-ink); border-bottom: 1px solid var(--js-cream-line); }

/* Sous-menu "Coaching" du tiroir mobile - accordeon natif <details>, pas
   de JS supplementaire necessaire. */
.jeunesmart-2026 .js-mobile-drawer-coaching { border-bottom: 1px solid var(--js-cream-line); }
.jeunesmart-2026 .js-mobile-drawer-coaching summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 16px 4px; font-size: 17px; font-weight: 600; color: var(--js-ink);
  list-style: none; cursor: pointer;
}
.jeunesmart-2026 .js-mobile-drawer-coaching summary::-webkit-details-marker { display: none; }
.jeunesmart-2026 .js-mobile-drawer-coaching[open] summary svg { transform: rotate(180deg); }
.jeunesmart-2026 .js-mobile-drawer-coaching a {
  display: block; padding: 12px 4px 12px 16px; font-size: 14.5px; font-weight: 600;
  color: var(--js-ink-soft); border-bottom: none;
}
.jeunesmart-2026 .js-mobile-drawer-coaching a:last-child { color: var(--js-terracotta); padding-bottom: 16px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Le menu texte a besoin d'environ 960px pour respirer (logo + 6 liens) -
   seuil volontairement plus haut que les autres ajustements ci-dessous,
   pour ne jamais laisser le logo et "Formations" se toucher. */
@media (max-width: 1240px) {
  .jeunesmart-2026 .js-nav { display: none; }
  .jeunesmart-2026 .js-burger { display: flex; }
}

@media (max-width: 900px) {
  .jeunesmart-2026 .js-topbar, .jeunesmart-2026 .js-hero, .jeunesmart-2026 .js-trustbar,
  .jeunesmart-2026 .js-value, .jeunesmart-2026 .js-formations, .jeunesmart-2026 .js-community,
  .jeunesmart-2026 .js-blog, .jeunesmart-2026 .js-footer, .jeunesmart-2026 .js-coach-banner {
    padding-left: 24px; padding-right: 24px;
  }
  .jeunesmart-2026 .js-coach-banner { flex-direction: column; align-items: flex-start; }
  .jeunesmart-2026 .js-hero h1 { font-size: 34px; }
  .jeunesmart-2026 .js-value { flex-direction: column; align-items: stretch; gap: 28px; }
  .jeunesmart-2026 .js-value-text { flex: 1; }
  .jeunesmart-2026 .js-value-art { height: 220px; }
  .jeunesmart-2026 .js-course-grid { grid-template-columns: 1fr; max-width: 420px; }
  .jeunesmart-2026 .js-footer-grid { grid-template-columns: 1fr 1fr; }
  .jeunesmart-2026 .js-header-blob { width: 380px; height: 380px; top: -140px; right: -120px; }
  .jeunesmart-2026 .js-header-blob-2 { display: none; }
}

@media (max-width: 520px) {
  .jeunesmart-2026 .js-footer-grid { grid-template-columns: 1fr; }
  .jeunesmart-2026 .js-hero-actions { flex-direction: column; align-items: stretch; }
  .jeunesmart-2026 .js-hero-actions .js-btn { width: 100%; }
}

/* ==========================================================================
   Fiche formation (single-courses.php)
   ========================================================================== */
.jeunesmart-2026 .js-fiche-breadcrumb { padding: 22px 70px 0; font-size: 12.5px; color: var(--js-ink-muted); font-weight: 600; }
.jeunesmart-2026 .js-fiche-breadcrumb a { color: var(--js-ink-muted); }
.jeunesmart-2026 .js-fiche-breadcrumb a:hover { color: var(--js-terracotta); }

.jeunesmart-2026 .js-fiche-layout { display: flex; gap: 52px; padding: 28px 70px 0; align-items: flex-start; }
.jeunesmart-2026 .js-fiche-main { flex: 1; min-width: 0; padding-bottom: 80px; }

.jeunesmart-2026 .js-fiche-badges { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.jeunesmart-2026 .js-fiche-badge { font-size: 11.5px; font-weight: 700; padding: 6px 14px; border-radius: 20px; }
.jeunesmart-2026 .js-fiche-badge-dark { color: var(--js-bg); background: var(--js-forest); }
.jeunesmart-2026 .js-fiche-badge-light { color: var(--js-terracotta); background: var(--js-bg-alt); }

.jeunesmart-2026 .js-fiche-main h1 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 38px; line-height: 1.2; margin: 0 0 18px; max-width: 640px; }

.jeunesmart-2026 .js-fiche-content { font-size: 15.5px; line-height: 1.75; color: var(--js-ink-soft); max-width: 640px; margin: 0 0 28px; }
.jeunesmart-2026 .js-fiche-content p { margin: 0 0 1em; }
.jeunesmart-2026 .js-fiche-content strong { color: var(--js-ink); }

.jeunesmart-2026 .js-fiche-facts { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 40px; padding: 20px 24px; background: var(--js-bg-alt); border-radius: 16px; }
.jeunesmart-2026 .js-fiche-fact { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--js-ink-soft); }

.jeunesmart-2026 .js-fiche-main h2 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 22px; margin: 0 0 22px; }

.jeunesmart-2026 .js-fiche-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 24px; margin-bottom: 48px; }

.jeunesmart-2026 .js-fiche-curriculum { border: 1px solid var(--js-cream-line); border-radius: 16px; overflow: hidden; margin-bottom: 48px; }
.jeunesmart-2026 .js-fiche-module { padding: 16px 22px; background: var(--js-bg-alt); font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 14px; }
.jeunesmart-2026 .js-fiche-lesson { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-top: 1px solid var(--js-cream-line); font-size: 14px; color: #3A2E20; }
.jeunesmart-2026 .js-fiche-lesson svg { flex-shrink: 0; }

.jeunesmart-2026 .js-fiche-two-col { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; margin-bottom: 48px; }
.jeunesmart-2026 .js-fiche-card { background: #FFFFFF; border-radius: 16px; padding: 24px; }
.jeunesmart-2026 .js-fiche-card h3 { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 15px; margin: 0 0 12px; }
.jeunesmart-2026 .js-fiche-card p { font-size: 14px; line-height: 1.6; color: var(--js-ink-soft); margin: 0; }

.jeunesmart-2026 .js-fiche-instructor { display: flex; align-items: center; gap: 20px; background: var(--js-dark); border-radius: 20px; padding: 28px 32px; }
.jeunesmart-2026 .js-fiche-instructor-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--js-orange), var(--js-terracotta)); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 22px; color: var(--js-bg); overflow: hidden; }
.jeunesmart-2026 .js-fiche-instructor-avatar img { width: 100%; height: 100%; object-fit: cover; }
.jeunesmart-2026 .js-fiche-instructor-name { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 17px; color: var(--js-bg); margin-bottom: 4px; }
.jeunesmart-2026 .js-fiche-instructor-bio { font-size: 13.5px; color: #C9BBA5; }

.jeunesmart-2026 .js-fiche-sidebar { width: 340px; flex-shrink: 0; }
.jeunesmart-2026 .js-fiche-buybox { position: sticky; top: 24px; background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: var(--js-shadow-card); }
.jeunesmart-2026 .js-fiche-buybox-media { height: 190px; background: linear-gradient(135deg, var(--js-forest), var(--js-forest-dark)); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.jeunesmart-2026 .js-fiche-buybox-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jeunesmart-2026 .js-fiche-buybox-body { padding: 26px; }
.jeunesmart-2026 .js-fiche-buybox .js-price-now { font-size: 26px; }
.jeunesmart-2026 .js-fiche-buybox-note { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--js-forest); padding: 4px 0 20px; }
.jeunesmart-2026 .js-fiche-buybox-list { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--js-cream-line); }
.jeunesmart-2026 .js-fiche-buybox-list div { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--js-ink-soft); }

.jeunesmart-2026 .js-fiche-sticky-bar { display: none; }

@media (max-width: 1080px) {
  .jeunesmart-2026 .js-fiche-layout { flex-direction: column; }
  .jeunesmart-2026 .js-fiche-sidebar { width: 100%; }
  .jeunesmart-2026 .js-fiche-buybox { position: static; }
}

@media (max-width: 900px) {
  .jeunesmart-2026 .js-fiche-breadcrumb, .jeunesmart-2026 .js-fiche-layout { padding-left: 24px; padding-right: 24px; }
  .jeunesmart-2026 .js-fiche-main h1 { font-size: 27px; }
  .jeunesmart-2026 .js-fiche-check-grid { grid-template-columns: 1fr; }
  .jeunesmart-2026 .js-fiche-two-col { grid-template-columns: 1fr; }
  .jeunesmart-2026 .js-fiche-main { padding-bottom: 110px; }
  .jeunesmart-2026 .js-fiche-sidebar { display: none; }
  .jeunesmart-2026 .js-fiche-sticky-bar {
    display: flex; align-items: center; gap: 14px;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: #FFFFFF; border-top: 1px solid var(--js-cream-line);
    padding: 14px 20px; box-shadow: 0 -8px 24px rgba(43,33,24,0.08);
  }
  .jeunesmart-2026 .js-fiche-sticky-bar .js-btn { flex: 1; }
}

/* ==========================================================================
   Catalogue des formations (tutor/archive-course.php)
   ========================================================================== */
.jeunesmart-2026 .js-archive-head { max-width: 680px; padding: 64px 70px 16px; }
.jeunesmart-2026 .js-archive-head h1 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 40px; margin: 0 0 16px; }
.jeunesmart-2026 .js-archive-head p { font-size: 16px; line-height: 1.7; color: var(--js-ink-soft); margin: 0; }
.jeunesmart-2026 .js-archive-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px;
  padding: 32px 70px 24px;
}
.jeunesmart-2026 .js-archive-pagination { display: flex; justify-content: center; gap: 8px; padding: 24px 70px 80px; }
.jeunesmart-2026 .js-archive-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
  border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--js-ink-soft); padding: 0 12px;
}
.jeunesmart-2026 .js-archive-pagination .page-numbers.current { background: var(--js-terracotta); color: var(--js-bg); }
.jeunesmart-2026 .js-archive-pagination .page-numbers:not(.current):not(.dots):hover { background: var(--js-bg-alt); }

@media (max-width: 1080px) {
  .jeunesmart-2026 .js-archive-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .jeunesmart-2026 .js-archive-head, .jeunesmart-2026 .js-archive-grid, .jeunesmart-2026 .js-archive-pagination {
    padding-left: 24px; padding-right: 24px;
  }
  .jeunesmart-2026 .js-archive-head h1 { font-size: 28px; }
  .jeunesmart-2026 .js-archive-grid { grid-template-columns: 1fr; max-width: 420px; }
}

/* ==========================================================================
   Tableau de bord Tutor LMS (apprenant + formateur) - habillage
   ========================================================================== -
   CORRECTIF (autovérification) : la premiere version de ce bloc ciblait des
   classes ("tutor-dashboard-left-menu-frame", "tutor-btn-primary"...) qui
   n'existaient pas dans ce tableau de bord - Tutor Pro 4.0 sur ce site
   utilise un tout AUTRE gabarit "app" moderne (verifie en inspectant le DOM
   reel + le CSS source du plugin), construit sur un vrai systeme de jetons
   CSS ("--tutor-brand-100" a "--tutor-brand-950"). Chaque composant (boutons,
   liens, icones, etat actif du menu...) se cale sur cette echelle via
   var(--tutor-brand-600, #3e64de) - jamais definie par Tutor elle-meme,
   donc jamais surchargee tant qu'on ne le fait pas ici. En redefinissant
   cette echelle avec nos tons terracotta (a la place du bleu par defaut),
   TOUT le tableau de bord (mode clair ET sombre, cote apprenant ET
   formateur) herite automatiquement de l'identite Jeune Smart, sans
   toucher aux classes de mise en page ni aux contrastes deja calibres par
   Tutor - beaucoup plus fiable que surcharger des classes une a une.
   Ce que ceci NE fait PAS : reconstruire l'ecran (sidebar, en-tetes,
   cartes...) - cette structure reste 100% Tutor LMS, seule sa couleur de
   marque et sa typographie changent. Un vrai tableau de bord "sur mesure"
   (autre agencement, autres blocs) impliquerait de recreer nous-memes tout
   ce sous-systeme (progression, Q&A, retraits formateur...) : un chantier
   distinct, plus consequent, a chiffrer a part si vous le souhaitez. */
.jeunesmart-2026 {
  --tutor-brand-100: #FBF0E9;
  --tutor-brand-200: #F5DCC9;
  --tutor-brand-300: #EEC4A6;
  --tutor-brand-400: #E09B6E;
  --tutor-brand-450: #D8875A;
  --tutor-brand-500: #C96B3E;
  --tutor-brand-600: #B5502B;
  --tutor-brand-700: #963F20;
  --tutor-brand-800: #8F3E21;
  --tutor-brand-900: #6B2E18;
  --tutor-brand-950: #4A2011;
}
.jeunesmart-2026 .tutor-dashboard-layout,
.jeunesmart-2026 .tutor-dashboard-layout * {
  font-family: 'Karla', system-ui, sans-serif;
}
.jeunesmart-2026 .tutor-dashboard-layout h1,
.jeunesmart-2026 .tutor-dashboard-layout h2,
.jeunesmart-2026 .tutor-dashboard-layout h3 {
  font-family: 'Outfit', sans-serif;
}
/* Lien de retour vers le site, injecte via le hook tutor_dashboard/before/wrap
   (voir functions.php) - absent par defaut, seul un lien "Back to Site"
   existait, cache dans un sous-menu "Plus". */
.jeunesmart-2026 .js-dash-back {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px; font-size: 13px; font-weight: 600;
  color: var(--js-terracotta); background: var(--js-bg);
  border-bottom: 1px solid var(--js-cream-line); text-decoration: none;
}
.jeunesmart-2026 .js-dash-back:hover { color: var(--js-terracotta-dark); }
.jeunesmart-2026 .tutor-dashboard-sidebar-logo .site-title {
  color: var(--js-terracotta); font-family: 'Outfit', sans-serif; font-weight: 700;
}

/* ==========================================================================
   Pages simples (page.php) - A propos, Contact, mentions legales...
   ========================================================================== */
.jeunesmart-2026 .js-page-content { font-size: 15.5px; line-height: 1.8; color: var(--js-ink-soft); max-width: 760px; }
.jeunesmart-2026 .js-page-content h2 { font-size: 24px; color: var(--js-ink); margin: 1.6em 0 0.6em; }
.jeunesmart-2026 .js-page-content h3 { font-size: 19px; color: var(--js-ink); margin: 1.4em 0 0.5em; }
.jeunesmart-2026 .js-page-content p { margin: 0 0 1.1em; }
.jeunesmart-2026 .js-page-content a { text-decoration: underline; }
.jeunesmart-2026 .js-page-content ul, .jeunesmart-2026 .js-page-content ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.jeunesmart-2026 .js-page-content img { max-width: 100%; height: auto; border-radius: 12px; }
.jeunesmart-2026 .js-page-content h4 { font-size: 16px; color: var(--js-ink); font-family: 'Outfit', sans-serif; font-weight: 600; margin: 1.4em 0 0.5em; }
.jeunesmart-2026 .js-page-content li { margin-bottom: 0.4em; }

/* Grille de points forts (ex: "Ce que nous proposons") - carte simple
   icone + titre, reutilisee partout ou une liste de forces/avantages
   doit se presenter en cartes plutot qu'en paragraphe. */
.jeunesmart-2026 .js-feature-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  margin: 0 0 1.6em; max-width: none;
}
.jeunesmart-2026 .js-feature-card {
  display: flex; align-items: center; gap: 14px;
  background: #FFFFFF; border: 1px solid var(--js-cream-line);
  border-radius: 14px; padding: 18px 20px;
}
.jeunesmart-2026 .js-feature-card svg { flex-shrink: 0; }
.jeunesmart-2026 .js-feature-card span {
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 14.5px; color: var(--js-ink);
}

/* Liste de piliers numerotes (ex: "Objectif general du projet"). */
.jeunesmart-2026 .js-pillars { list-style: none; padding: 0; margin: 0 0 1.6em; counter-reset: js-pillar; }
.jeunesmart-2026 .js-pillars li {
  counter-increment: js-pillar; display: flex; gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--js-cream-line);
}
.jeunesmart-2026 .js-pillars li:last-child { border-bottom: none; }
.jeunesmart-2026 .js-pillars li::before {
  content: counter(js-pillar);
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--js-terracotta); color: #fff; font-family: 'Outfit', sans-serif;
  font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center;
}

/* Bloc CTA (ex: renvoi vers la page contact). */
.jeunesmart-2026 .js-cta-box {
  background: var(--js-bg-alt); border: 1px solid var(--js-cream-line); border-radius: 16px;
  padding: 28px 30px; margin: 0 0 1.6em;
}
.jeunesmart-2026 .js-cta-box p { margin: 0 0 14px; font-size: 15px; }
.jeunesmart-2026 .js-cta-box p:last-of-type { margin-bottom: 0; }

/* FAQ - accordeon natif <details>/<summary>, sans JS. */
.jeunesmart-2026 .js-faq-item {
  background: #FFFFFF; border: 1px solid var(--js-cream-line); border-radius: 12px;
  margin-bottom: 10px; overflow: hidden;
}
.jeunesmart-2026 .js-faq-item summary {
  padding: 16px 20px; cursor: pointer; list-style: none;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 15px; color: var(--js-ink);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.jeunesmart-2026 .js-faq-item summary::-webkit-details-marker { display: none; }
.jeunesmart-2026 .js-faq-item summary::marker { content: ""; }
.jeunesmart-2026 .js-faq-item summary::after {
  content: '+'; flex-shrink: 0; font-size: 20px; color: var(--js-terracotta); font-weight: 400;
}
.jeunesmart-2026 .js-faq-item[open] summary::after { content: '−'; }
.jeunesmart-2026 .js-faq-item[open] summary { border-bottom: 1px solid var(--js-cream-line); }
.jeunesmart-2026 .js-faq-item .js-faq-answer { padding: 4px 20px 18px; font-size: 14.5px; line-height: 1.75; }
.jeunesmart-2026 .js-faq-answer h3 { font-size: 15.5px; margin: 1em 0 0.4em; }

/* Formulaire de contact (Contact Form 7). */
.jeunesmart-2026 .js-page-content .wpcf7-form p { margin-bottom: 14px; }
.jeunesmart-2026 .js-page-content .wpcf7-form label { display: block; font-size: 13px; font-weight: 600; color: var(--js-ink); margin-bottom: 6px; }
.jeunesmart-2026 .js-page-content .wpcf7-form input[type="text"],
.jeunesmart-2026 .js-page-content .wpcf7-form input[type="email"],
.jeunesmart-2026 .js-page-content .wpcf7-form textarea {
  width: 100%; border: 1px solid var(--js-cream-line); border-radius: 10px;
  padding: 12px 14px; font-family: 'Karla', sans-serif; font-size: 14.5px; background: #FFFFFF;
}
.jeunesmart-2026 .js-page-content .wpcf7-form textarea { min-height: 130px; resize: vertical; }
.jeunesmart-2026 .js-page-content .wpcf7-form input[type="submit"] {
  background: var(--js-terracotta); color: #fff; border: none; border-radius: 30px;
  padding: 13px 30px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px; cursor: pointer;
}
.jeunesmart-2026 .js-page-content .wpcf7-form input[type="submit"]:hover { background: var(--js-terracotta-dark); }
.jeunesmart-2026 .js-contact-info { display: flex; flex-direction: column; gap: 14px; margin: 0 0 1.8em; }
.jeunesmart-2026 .js-contact-info a { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--js-ink); text-decoration: none; }
.jeunesmart-2026 .js-contact-info a svg { flex-shrink: 0; }

@media (max-width: 640px) {
  .jeunesmart-2026 .js-feature-grid { grid-template-columns: 1fr; }
}

/* Formules de coaching individuel (page "Coaching individuel"). */
.jeunesmart-2026 .js-coach-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin: 0 0 2em; max-width: none;
}
.jeunesmart-2026 .js-coach-card {
  background: #FFFFFF; border: 1px solid var(--js-cream-line); border-radius: 18px;
  padding: 26px 24px; display: flex; flex-direction: column;
}
.jeunesmart-2026 .js-coach-card-highlight {
  border: 2px solid var(--js-terracotta); position: relative;
  box-shadow: 0 12px 30px rgba(181,80,43,0.14);
}
.jeunesmart-2026 .js-coach-tag {
  align-self: flex-start; background: var(--js-bg-alt); color: var(--js-terracotta);
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 30px; margin-bottom: 14px;
}
.jeunesmart-2026 .js-coach-card-highlight .js-coach-tag { background: var(--js-terracotta); color: #fff; }
.jeunesmart-2026 .js-coach-card h3 {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 19px; color: var(--js-ink);
  margin: 0 0 8px;
}
.jeunesmart-2026 .js-coach-price {
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 26px; color: var(--js-terracotta);
  margin-bottom: 10px;
}
.jeunesmart-2026 .js-coach-desc { font-size: 14px; color: var(--js-ink-soft); margin-bottom: 18px; }
.jeunesmart-2026 .js-coach-card .js-check-grid { flex-grow: 1; }
.jeunesmart-2026 .js-coach-card .js-check { font-size: 13.5px; }

@media (max-width: 900px) {
  .jeunesmart-2026 .js-coach-grid { grid-template-columns: 1fr; }
}

/* Formulaire de demande de coaching (page "Coaching individuel"). */
.jeunesmart-2026 .js-coach-form-wrap {
  background: #FFFFFF; border: 1px solid var(--js-cream-line); border-radius: 18px;
  padding: 30px 32px; margin: 0 0 1.6em; scroll-margin-top: 24px;
}
.jeunesmart-2026 .js-coach-form-wrap h2 { margin-top: 0; }
.jeunesmart-2026 .js-page-content .wpcf7-form .row { display: flex; gap: 16px; flex-wrap: wrap; }
.jeunesmart-2026 .js-page-content .wpcf7-form .row .col-md-6 { flex: 1 1 220px; margin: 0 0 14px; }
.jeunesmart-2026 .js-page-content .wpcf7-form input[type="tel"] {
  width: 100%; border: 1px solid var(--js-cream-line); border-radius: 10px;
  padding: 12px 14px; font-family: 'Karla', sans-serif; font-size: 14.5px; background: #FFFFFF;
}
.jeunesmart-2026 .js-page-content .wpcf7-form .wpcf7-radio {
  display: flex; flex-direction: column; gap: 8px; margin: 10px 0 18px;
}
.jeunesmart-2026 .js-page-content .wpcf7-form .wpcf7-radio .wpcf7-list-item { margin: 0; }
.jeunesmart-2026 .js-page-content .wpcf7-form .wpcf7-radio label {
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--js-cream-line);
  border-radius: 10px; padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--js-ink);
  cursor: pointer;
}
.jeunesmart-2026 .js-page-content .wpcf7-form .wpcf7-radio input[type="radio"] { accent-color: var(--js-terracotta); width: 16px; height: 16px; flex-shrink: 0; }
.jeunesmart-2026 .js-page-content .wpcf7-form .wpcf7-radio input[type="radio"]:checked ~ .wpcf7-list-item-label { color: var(--js-terracotta); }
.jeunesmart-2026 .js-page-content .wpcf7-response-output { border-radius: 10px; font-size: 13.5px; }

/* ==========================================================================
   Blog "Actus & Inspirations" (home.php - grille) et article (single.php)
   ========================================================================== */
.jeunesmart-2026 .js-blog-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: 1160px; margin: 0 auto; padding: 0 40px 60px;
}
.jeunesmart-2026 .js-blog-card {
  display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--js-cream-line);
  border-radius: 18px; overflow: hidden; color: inherit; text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.jeunesmart-2026 .js-blog-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(43,33,24,0.1); }
.jeunesmart-2026 .js-blog-card-art { height: 150px; display: flex; align-items: center; justify-content: center; }
.jeunesmart-2026 .js-blog-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex-grow: 1; }
.jeunesmart-2026 .js-blog-card-date { font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--js-ink-muted); margin-bottom: 8px; }
.jeunesmart-2026 .js-blog-card-body h2 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 17px; color: var(--js-ink); margin: 0 0 10px; line-height: 1.35; }
.jeunesmart-2026 .js-blog-card-body p { font-size: 13.5px; color: var(--js-ink-soft); line-height: 1.65; margin: 0 0 16px; flex-grow: 1; }
.jeunesmart-2026 .js-blog-card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--js-terracotta); }
.jeunesmart-2026 .js-blog-empty {
  text-align: center; max-width: 480px; margin: 0 auto 60px; padding: 0 24px;
}
.jeunesmart-2026 .js-blog-empty svg { margin-bottom: 18px; }
.jeunesmart-2026 .js-blog-empty h2 { font-family: 'Outfit', sans-serif; font-size: 22px; color: var(--js-ink); margin: 0 0 10px; }
.jeunesmart-2026 .js-blog-empty p { color: var(--js-ink-soft); margin: 0 0 22px; }

.jeunesmart-2026 .js-article-head { max-width: 720px; margin: 0 auto; padding: 48px 24px 0; text-align: center; }
.jeunesmart-2026 .js-article-back {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
  color: var(--js-ink-muted); text-decoration: none; margin-bottom: 20px;
}
.jeunesmart-2026 .js-article-back:hover { color: var(--js-terracotta); }
.jeunesmart-2026 .js-article-date { font-size: 12.5px; color: var(--js-ink-muted); margin-bottom: 10px; }
.jeunesmart-2026 .js-article-head h1 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 32px; color: var(--js-ink); line-height: 1.25; margin: 0; }
.jeunesmart-2026 .js-article-hero {
  max-width: 900px; height: 220px; margin: 32px auto; border-radius: 20px;
  background: linear-gradient(135deg, #F4A25B, #B5502B);
  display: flex; align-items: center; justify-content: center;
}
.jeunesmart-2026 .js-article-content { max-width: 720px; margin: 0 auto 48px; padding: 0 24px; font-size: 16px; line-height: 1.85; color: var(--js-ink-soft); }
.jeunesmart-2026 .js-article-content h2 { font-family: 'Outfit', sans-serif; font-size: 24px; color: var(--js-ink); margin: 1.6em 0 0.6em; }
.jeunesmart-2026 .js-article-content h3 { font-family: 'Outfit', sans-serif; font-size: 19px; color: var(--js-ink); margin: 1.4em 0 0.5em; }
.jeunesmart-2026 .js-article-content p { margin: 0 0 1.2em; }
.jeunesmart-2026 .js-article-content ul, .jeunesmart-2026 .js-article-content ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.jeunesmart-2026 .js-article-content li { margin-bottom: 0.5em; }
.jeunesmart-2026 .js-article-content strong { color: var(--js-ink); }
.jeunesmart-2026 .js-article-content blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--js-terracotta);
  font-style: italic; color: var(--js-ink);
}

@media (max-width: 900px) {
  .jeunesmart-2026 .js-blog-grid { grid-template-columns: 1fr 1fr; padding-left: 24px; padding-right: 24px; }
  .jeunesmart-2026 .js-article-head h1 { font-size: 26px; }
  .jeunesmart-2026 .js-article-hero { height: 160px; margin-left: 24px; margin-right: 24px; }
}
@media (max-width: 640px) {
  .jeunesmart-2026 .js-blog-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Page 404
   ========================================================================== */
.jeunesmart-2026 .js-404 {
  max-width: 560px; margin: 0 auto; padding: 100px 24px 120px; text-align: center;
}
.jeunesmart-2026 .js-404-code {
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 80px; color: var(--js-bg-alt);
  -webkit-text-stroke: 2px var(--js-terracotta); line-height: 1;
}
.jeunesmart-2026 .js-404 h1 { font-family: 'Outfit', sans-serif; font-size: 26px; color: var(--js-ink); margin: 10px 0 14px; }
.jeunesmart-2026 .js-404 p { color: var(--js-ink-soft); margin: 0 0 28px; }
.jeunesmart-2026 .js-404-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.jeunesmart-2026 .js-404-search {
  display: flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1px solid var(--js-cream-line);
  border-radius: 30px; padding: 6px 6px 6px 18px; max-width: 380px; margin: 0 auto;
}
.jeunesmart-2026 .js-404-search input { flex-grow: 1; border: none; background: none; font-size: 14px; font-family: 'Karla', sans-serif; outline: none; }
.jeunesmart-2026 .js-404-search button {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--js-terracotta);
  color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer;
}

/* ==========================================================================
   Resultats de recherche
   ========================================================================== */
.jeunesmart-2026 .js-search-results { max-width: 760px; margin: 0 auto; padding: 0 24px 60px; }
.jeunesmart-2026 .js-search-result {
  display: block; padding: 20px 0; border-bottom: 1px solid var(--js-cream-line); text-decoration: none; color: inherit;
}
.jeunesmart-2026 .js-search-result-type {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--js-terracotta);
}
.jeunesmart-2026 .js-search-result h2 { font-family: 'Outfit', sans-serif; font-size: 18px; color: var(--js-ink); margin: 6px 0 8px; }
.jeunesmart-2026 .js-search-result p { font-size: 14px; color: var(--js-ink-soft); margin: 0; }

/* ==========================================================================
   Panier / Validation de commande / Mon compte - habillage WooCommerce
   ========================================================================== -
   On garde les gabarits WooCommerce natifs (panier, commande, compte : trop
   de logique de paiement en jeu pour tout reconstruire) mais on les recale
   sur l'identite Jeune Smart en surchargeant les vraies classes WooCommerce
   (button, shop_table, input-text...) plutot que de deviner - verifie sur
   le panier reel : le bouton "Valider la commande" restait violet
   (#7f54b9, couleur par defaut de WooCommerce), maintenant en terracotta. */
.jeunesmart-2026 .woocommerce a.button,
.jeunesmart-2026 .woocommerce button.button,
.jeunesmart-2026 .woocommerce input.button,
.jeunesmart-2026 .woocommerce #respond input#submit {
  background-color: var(--js-terracotta) !important; color: #fff !important;
  border: none !important; border-radius: 30px !important; padding: 12px 26px !important;
  font-family: 'Outfit', sans-serif !important; font-weight: 700 !important; font-size: 14px !important;
  text-transform: none !important; box-shadow: none !important;
}
.jeunesmart-2026 .woocommerce a.button:hover,
.jeunesmart-2026 .woocommerce button.button:hover,
.jeunesmart-2026 .woocommerce input.button:hover { background-color: var(--js-terracotta-dark) !important; }
.jeunesmart-2026 .woocommerce a.button.alt { font-weight: 700 !important; }

.jeunesmart-2026 .woocommerce table.shop_table {
  border: 1px solid var(--js-cream-line) !important; border-radius: 14px !important; overflow: hidden;
  border-collapse: separate !important; font-size: 14px;
}
.jeunesmart-2026 .woocommerce table.shop_table th { background: var(--js-bg-alt); font-family: 'Outfit', sans-serif; color: var(--js-ink); }
.jeunesmart-2026 .woocommerce table.shop_table td, .jeunesmart-2026 .woocommerce table.shop_table th { border-color: var(--js-cream-line) !important; }
.jeunesmart-2026 .woocommerce .cart-collaterals .cart_totals,
.jeunesmart-2026 .woocommerce-checkout-review-order {
  background: #FFFFFF; border: 1px solid var(--js-cream-line); border-radius: 14px; padding: 20px 24px;
}
.jeunesmart-2026 .woocommerce .cart_totals .amount, .jeunesmart-2026 .woocommerce .order-total .amount { color: var(--js-terracotta); font-weight: 700; }

.jeunesmart-2026 .woocommerce form .form-row input.input-text,
.jeunesmart-2026 .woocommerce form .form-row textarea,
.jeunesmart-2026 .woocommerce-checkout select,
.jeunesmart-2026 .woocommerce-cart-form .input-text {
  border: 1px solid var(--js-cream-line) !important; border-radius: 10px !important;
  font-family: 'Karla', sans-serif !important; padding: 11px 13px !important;
}
.jeunesmart-2026 .woocommerce-checkout #payment { background: var(--js-bg-alt) !important; border-radius: 14px !important; }
.jeunesmart-2026 .woocommerce-checkout #payment div.payment_box { background: #FFFFFF !important; border-radius: 10px !important; }
.jeunesmart-2026 .woocommerce a.remove { color: var(--js-terracotta) !important; }
.jeunesmart-2026 .woocommerce-error, .jeunesmart-2026 .woocommerce-message, .jeunesmart-2026 .woocommerce-info {
  border-top-color: var(--js-terracotta) !important; border-radius: 10px;
}
.jeunesmart-2026 .woocommerce-error::before, .jeunesmart-2026 .woocommerce-message::before, .jeunesmart-2026 .woocommerce-info::before { color: var(--js-terracotta) !important; }
.jeunesmart-2026 .woocommerce-MyAccount-navigation ul li.is-active a { color: var(--js-terracotta) !important; font-weight: 700; }