/* ════════════════════════════════════════════
   TCF CANADA — Design System Unifié
   Fichier : public/assets/css/tcf.css

   Inclure dans le layout principal :
   <link rel="stylesheet" href="{{ asset('/public/assets/css/tcf.css') }}"/>

   Sections :
   1. Variables CSS (tokens couleur, typo, shadow)
   2. Reset minimal
   3. Typographie (hl-1, hl-2, hl-3, lead, eyebrow)
   4. Layout (section, section-sm, container)
   5. Boutons (btn-primary, btn-ghost, btn-white, btn-white-ghost, btn-outline, btn-light)
   6. Épreuves cards (ep-card, ep-img, ep-body)
   7. Simulateur (sim-section, sim-visual, sim-score-grid)
   8. Plan d'apprentissage (plan-section, plan-steps, plan-visual)
   9. Analyse IA (ia-grid, ia-card)
   10. Témoignages (testi-section, testi-card)
   11. CTA section (cta-section, cta-title)
   12. Composants réutilisables (feature-card, score-badge, cecrl-tag, dark-card)
   13. Page hero intérieur (page-hero, page-hero-title)
   14. Breadcrumb public (tcf-breadcrumb)
   15. Grilles utilitaires (grid-2, grid-3, grid-4)
   16. Spacing & texte utilitaires
   17. Alertes (tcf-alert)
   18. Glide carousel overrides
   19. Responsive
════════════════════════════════════════════ */

/* ═══════════════════════════════════
   TOKENS — palette TCF Canada
═══════════════════════════════════ */
:root {
  --sky:   #0ea5e9;
  --sky-d: #0284c7;
  --sky-dd:#0369a1;
  --sky-l: #e0f2fe;
  --sky-ll:#f0f9ff;
  --ink:   #0f172a;
  --ink2:  #334155;
  --ink3:  #64748b;
  --surf:  #ffffff;
  --bg:    #f8fafc;
  --gold:  #f59e0b;
  --gold-l:#fef3c7;
  --green: #059669;
  --green-l:#d1fae5;
  --bdr:   #e2e8f0;
  --r:     12px;
  --r-lg:  20px;
  --sh:    0 1px 3px rgba(15,23,42,.06), 0 2px 10px rgba(15,23,42,.04);
  --sh-md: 0 4px 20px rgba(14,165,233,.12);
  --sh-lg: 0 8px 40px rgba(14,165,233,.18);
}

/* ═══ RESET ═══ */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; display: block; }

/* ═══ TYPO ═══ */
.hl-1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
.hl-2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.hl-3 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 700; line-height: 1.3; }
.lead { font-size: clamp(1rem, 1.5vw, 1.1rem); line-height: 1.8; color: var(--ink3); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--sky-d);
  background: var(--sky-l); padding: .3rem .85rem;
  border-radius: 99px; border: 1px solid rgba(14,165,233,.2);
  margin-bottom: 1.25rem;
}

/* ═══ SECTIONS ═══ */
.section { padding: 5rem 0; }
.section-sm { padding: 3rem 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.text-center { text-align: center; }

/* ═══ HERO ═══ */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex; align-items: center;
  background: linear-gradient(135deg, #0f172a 0%, #0c2340 40%, #083b60 70%, #0369a1 100%);
  overflow: hidden;
}
.hero-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(14,165,233,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,165,233,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.hero-orbs {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.hero-orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .25;
}
.hero-orb-1 { width: 500px; height: 500px; background: #0ea5e9; top: -150px; right: -100px; }
.hero-orb-2 { width: 350px; height: 350px; background: #7c3aed; bottom: -100px; left: -80px; }
.hero-orb-3 { width: 250px; height: 250px; background: #f59e0b; top: 40%; left: 30%; }

.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
  width: 100%; padding: 6rem 1.5rem 4rem;
  max-width: 1200px; margin: 0 auto;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(14,165,233,.15); border: 1px solid rgba(14,165,233,.3);
  color: #7dd3fc; font-size: .75rem; font-weight: 600;
  padding: .35rem .85rem; border-radius: 99px; margin-bottom: 1.5rem;
}
.hero-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #38bdf8; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

.hero-title { color: #fff; margin-bottom: 1.25rem; }
.hero-title span { color: #38bdf8; }
.hero-desc { color: rgba(255,255,255,.7); font-size: 1.05rem; line-height: 1.75; margin-bottom: 2rem; }

/* CTA buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, var(--sky), var(--sky-d));
  color: #fff; font-size: .9rem; font-weight: 700;
  padding: .85rem 1.75rem; border-radius: var(--r);
  text-decoration: none; transition: all .18s;
  box-shadow: 0 4px 16px rgba(14,165,233,.35);
  border: none; cursor: pointer;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(14,165,233,.5); color: #fff; text-decoration: none; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: .9rem; font-weight: 600;
  padding: .85rem 1.75rem; border-radius: var(--r);
  text-decoration: none; transition: all .18s;
}
.btn-ghost:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }

/* Hero stats */
.hero-stats { display: flex; gap: 2rem; flex-wrap: wrap; }
.hero-stat-val { font-size: 1.6rem; font-weight: 800; color: #38bdf8; line-height: 1; }
.hero-stat-lbl { font-size: .72rem; color: rgba(255,255,255,.55); margin-top: .2rem; text-transform: uppercase; letter-spacing: .06em; }

/* Hero visual */
.hero-visual { position: relative; }
.hero-card {
  background: rgba(255,255,255,.07); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg);
  padding: 1.5rem; margin-bottom: .75rem;
}
.hero-card-label { font-size: .62rem; font-weight: 700; color: #7dd3fc; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .85rem; }
.skill-bars { display: flex; flex-direction: column; gap: .65rem; }
.skill-bar-row { display: flex; align-items: center; gap: .75rem; }
.skill-bar-name { font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.8); width: 28px; flex-shrink: 0; }
.skill-bar-track { flex: 1; height: 7px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden; }
.skill-bar-fill { height: 100%; border-radius: 99px; }
.fill-ce { background: linear-gradient(90deg, #0ea5e9, #38bdf8); }
.fill-co { background: linear-gradient(90deg, #059669, #34d399); }
.fill-ee { background: linear-gradient(90deg, #d97706, #fbbf24); }
.fill-eo { background: linear-gradient(90deg, #e11d48, #fb7185); }
.skill-bar-score { font-size: .68rem; font-weight: 700; color: #fff; width: 42px; text-align: right; flex-shrink: 0; }

/* Hero floating badge */
.hero-float {
  position: absolute; top: -1.5rem; right: -1rem;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff; font-size: .72rem; font-weight: 700;
  padding: .5rem .85rem; border-radius: 99px;
  box-shadow: 0 4px 16px rgba(245,158,11,.4);
  display: flex; align-items: center; gap: .35rem;
  animation: float 3s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* Slider hero (mobile) */
.hero-slider-wrap { position: relative; }

/* ═══ ÉPREUVES ═══ */
.epreuves-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
}
.ep-card {
  background: var(--surf); border: 1px solid var(--bdr);
  border-radius: var(--r-lg); overflow: hidden; text-decoration: none;
  transition: all .22s; box-shadow: var(--sh);
  display: flex; flex-direction: column;
}
.ep-card:hover {
  transform: translateY(-4px); box-shadow: var(--sh-md);
  border-color: var(--sky); text-decoration: none;
}
.ep-img { height: 180px; overflow: hidden; position: relative; }
.ep-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ep-card:hover .ep-img img { transform: scale(1.06); }
.ep-tag {
  position: absolute; top: .75rem; left: .75rem;
  background: var(--sky); color: #fff;
  font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .22rem .6rem; border-radius: 6px;
}
.ep-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.ep-title { font-size: .92rem; font-weight: 700; color: var(--ink); margin-bottom: .6rem; }
.ep-feat { font-size: .74rem; color: var(--ink3); display: flex; align-items: flex-start; gap: .45rem; margin-bottom: .35rem; line-height: 1.5; }
.ep-feat i { color: var(--sky); margin-top: .1rem; flex-shrink: 0; font-size: .68rem; }
.ep-cta {
  margin-top: auto; padding-top: 1rem;
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 700; color: var(--sky-d);
}
.ep-cta i { font-size: .62rem; transition: transform .15s; }
.ep-card:hover .ep-cta i { transform: translateX(4px); }

/* ═══ SIMULATEUR ═══ */
.sim-section {
  background: linear-gradient(135deg, #0f172a 0%, #0c2340 60%, #083b60 100%);
  position: relative; overflow: hidden;
}
.sim-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(14,165,233,.15) 0%, transparent 60%);
  pointer-events: none;
}
.sim-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
  position: relative; z-index: 1;
}
.sim-eyebrow { background: rgba(14,165,233,.15); color: #7dd3fc; border-color: rgba(14,165,233,.25); }
.sim-title { color: #fff; }
.sim-desc { color: rgba(255,255,255,.65); line-height: 1.8; margin: 1rem 0 2rem; }
.sim-features { display: flex; flex-direction: column; gap: .85rem; margin-bottom: 2rem; }
.sim-feat {
  display: flex; align-items: flex-start; gap: .85rem;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: .85rem 1rem;
}
.sim-feat-icon {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.sim-feat-title { font-size: .84rem; font-weight: 700; color: #fff; margin-bottom: .2rem; }
.sim-feat-desc  { font-size: .74rem; color: rgba(255,255,255,.5); line-height: 1.6; }

/* Simulateur visual */
.sim-visual {
  background: rgba(255,255,255,.04); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg);
  padding: 1.5rem;
}
.sim-vis-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.sim-vis-title { font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.9); }
.sim-vis-badge {
  font-size: .62rem; font-weight: 700; background: rgba(5,150,105,.2);
  color: #34d399; border: 1px solid rgba(52,211,153,.2);
  padding: .18rem .55rem; border-radius: 99px;
}
.sim-score-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.25rem;
}
.sim-score-box {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: .85rem; text-align: center;
}
.sim-score-lbl { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .35rem; }
.sim-score-val { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.sim-score-max { font-size: .62rem; color: rgba(255,255,255,.4); margin-top: .2rem; }
.sim-progress-wrap { margin-top: 1rem; }
.sim-prog-label { display: flex; justify-content: space-between; font-size: .68rem; color: rgba(255,255,255,.55); margin-bottom: .4rem; }
.sim-prog-track { height: 6px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden; }
.sim-prog-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #0ea5e9, #38bdf8); }

/* ═══ PLAN D'APPRENTISSAGE ═══ */
.plan-section { background: var(--bg); }
.plan-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
}
.plan-steps { display: flex; flex-direction: column; gap: 0; }
.plan-step {
  display: flex; gap: 1.25rem; padding: 1.25rem 0;
  border-bottom: 1px solid var(--bdr);
  position: relative;
}
.plan-step:last-child { border-bottom: none; }
.plan-step-num {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--sky-l); border: 2px solid var(--sky);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800; color: var(--sky-d);
  position: relative; z-index: 1;
}
.plan-step-line {
  position: absolute; left: 19px; top: 56px; bottom: -1px;
  width: 2px; background: var(--bdr);
}
.plan-step:last-child .plan-step-line { display: none; }
.plan-step-title { font-size: .9rem; font-weight: 700; color: var(--ink); margin-bottom: .35rem; }
.plan-step-desc  { font-size: .78rem; color: var(--ink3); line-height: 1.65; }

/* Plan visual */
.plan-visual {
  background: var(--surf); border: 1px solid var(--bdr);
  border-radius: var(--r-lg); padding: 1.5rem; box-shadow: var(--sh-md);
}
.plan-vis-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; padding-bottom: .85rem; border-bottom: 1px solid var(--bdr);
}
.plan-vis-title { font-size: .82rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: .4rem; }
.plan-vis-title i { color: var(--sky-d); }
.plan-week-badge {
  font-size: .62rem; font-weight: 700; background: var(--sky-l);
  color: var(--sky-d); padding: .18rem .55rem; border-radius: 99px;
  border: 1px solid rgba(14,165,233,.2);
}
.plan-actions { display: flex; flex-direction: column; gap: .55rem; }
.plan-action-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem .85rem; border-radius: 9px; border: 1px solid var(--bdr);
  font-size: .76rem;
}
.plan-action-row.done { background: #f0fdf4; border-color: #a7f3d0; opacity: .8; }
.plan-action-row.active { background: var(--sky-ll); border-color: #7dd3fc; }
.plan-action-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.plan-action-name { flex: 1; font-weight: 600; color: var(--ink); }
.plan-action-name.done-text { text-decoration: line-through; color: var(--ink3); font-weight: 400; }
.plan-action-status {
  font-size: .6rem; font-weight: 700; padding: .12rem .45rem; border-radius: 6px;
}
.status-done   { background: #d1fae5; color: #059669; }
.status-active { background: var(--sky-l); color: var(--sky-d); }
.status-wait   { background: #f3f4f6; color: #9ca3af; }
.plan-progress-footer { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--bdr); }
.plan-prog-bar-lbl { font-size: .68rem; color: var(--ink3); margin-bottom: .4rem; display: flex; justify-content: space-between; }
.plan-prog-track { height: 7px; background: var(--bdr); border-radius: 99px; overflow: hidden; }
.plan-prog-fill { height: 100%; width: 65%; background: linear-gradient(90deg, var(--sky), var(--sky-d)); border-radius: 99px; }

/* ═══ ANALYSE IA ═══ */
.ia-section { background: var(--surf); }
.ia-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 3rem;
}
.ia-card {
  background: var(--bg); border: 1px solid var(--bdr);
  border-radius: var(--r-lg); padding: 1.75rem 1.5rem; text-align: center;
  transition: all .22s; box-shadow: var(--sh);
}
.ia-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--sky); }
.ia-icon {
  width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 1.1rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.ia-title { font-size: .92rem; font-weight: 700; color: var(--ink); margin-bottom: .5rem; }
.ia-desc  { font-size: .78rem; color: var(--ink3); line-height: 1.65; }

/* ═══ TÉMOIGNAGES ═══ */
.testi-section {
  background: linear-gradient(160deg, #0f172a 0%, #0c2340 100%);
  position: relative; overflow: hidden;
}
.testi-section::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(14,165,233,.1) 0%, transparent 55%);
  pointer-events: none;
}
.testi-hd { text-align: center; position: relative; z-index: 1; }
.testi-hd .hl-2 { color: #fff; }
.testi-hd .lead { color: rgba(255,255,255,.55); }
.testi-card {
  background: rgba(255,255,255,.05); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg);
  padding: 2rem;
}
.testi-quote { font-size: 2rem; color: var(--sky); line-height: 1; margin-bottom: .75rem; }
.testi-text { font-size: .88rem; color: rgba(255,255,255,.75); line-height: 1.8; font-style: italic; margin-bottom: 1.5rem; }
.testi-author { display: flex; align-items: center; gap: .85rem; }
.testi-av {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(14,165,233,.35);
}
.testi-name { font-size: .84rem; font-weight: 700; color: #fff; }
.testi-pays { font-size: .68rem; color: var(--sky); font-weight: 600; background: rgba(14,165,233,.15); padding: .15rem .45rem; border-radius: 4px; margin-top: .2rem; display: inline-block; }
.testi-stars { display: flex; gap: .2rem; }
.testi-star { color: var(--gold); font-size: .72rem; }

/* ═══ CTA FINAL ═══ */
.cta-section {
  background: linear-gradient(135deg, var(--sky) 0%, var(--sky-dd) 100%);
  position: relative; overflow: hidden;
}
.cta-section::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/svg%3E");
}
.cta-inner { text-align: center; position: relative; z-index: 1; }
.cta-title { font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 800; color: #fff; margin-bottom: 1rem; letter-spacing: -.02em; }
.cta-desc  { font-size: 1.05rem; color: rgba(255,255,255,.8); margin-bottom: 2.5rem; line-height: 1.7; }
.btn-white {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff; color: var(--sky-d); font-size: .9rem; font-weight: 700;
  padding: .9rem 2rem; border-radius: var(--r);
  text-decoration: none; transition: all .18s;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(0,0,0,.3); color: var(--sky-d); text-decoration: none; }
.btn-white-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.4);
  color: #fff; font-size: .9rem; font-weight: 600;
  padding: .9rem 2rem; border-radius: var(--r);
  text-decoration: none; transition: all .18s;
}
.btn-white-ghost:hover { background: rgba(255,255,255,.2); color: #fff; text-decoration: none; }
.cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.cta-trust { margin-top: 2rem; display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.cta-trust-item { display: flex; align-items: center; gap: .4rem; font-size: .74rem; color: rgba(255,255,255,.7); }
.cta-trust-item i { color: rgba(255,255,255,.5); font-size: .65rem; }

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px){
  .hero-inner     { grid-template-columns: 1fr; gap: 2.5rem; padding: 5rem 1.5rem 3rem; }
  .hero-visual    { display: none; }
  .epreuves-grid  { grid-template-columns: 1fr 1fr; }
  .sim-inner      { grid-template-columns: 1fr; gap: 2.5rem; }
  .plan-inner     { grid-template-columns: 1fr; gap: 2.5rem; }
  .ia-grid        { grid-template-columns: 1fr 1fr; }
}
@media(max-width:640px){
  .epreuves-grid  { grid-template-columns: 1fr; }
  .ia-grid        { grid-template-columns: 1fr; }
  .hero-stats     { gap: 1.25rem; }
  .sim-score-grid { grid-template-columns: 1fr 1fr; }
  .section        { padding: 3.5rem 0; }
  .cta-btns       { flex-direction: column; align-items: center; }
  .hero-ctas      { flex-direction: column; }
}

/* ═══ GLIDE overrides ═══ */
.glide-one .glide__slide { position: relative; }
.testi-glide .glide__slides { padding-bottom: .5rem; }
/* ═══════════════════════════════════════════════════════
   COMPOSANTS RÉUTILISABLES — pages intérieures
═══════════════════════════════════════════════════════ */

/* ── Feature card générique ── */
.feature-card {
  background: var(--surf); border: 1px solid var(--bdr);
  border-radius: var(--r-lg); padding: 1.75rem 1.5rem;
  transition: all .22s; box-shadow: var(--sh);
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--sky); }
.feature-icon {
  width: 52px; height: 52px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: 1rem;
}
.feature-title { font-size: .92rem; font-weight: 700; color: var(--ink); margin-bottom: .5rem; }
.feature-desc  { font-size: .78rem; color: var(--ink3); line-height: 1.65; }

/* ── Score badges ── */
.score-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .6rem; border-radius: 99px; font-size: .68rem; font-weight: 700; }
.score-ce { background: #dbeafe; color: #1d4ed8; }
.score-co { background: #d1fae5; color: #059669; }
.score-ee { background: #fef3c7; color: #d97706; }
.score-eo { background: #ffe4e6; color: #e11d48; }

/* ── CECRL badge ── */
.cecrl-tag { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 99px; font-size: .7rem; font-weight: 700; }
.cecrl-a { background: #ffe4e6; color: #e11d48; }
.cecrl-b { background: #fef3c7; color: #d97706; }
.cecrl-c { background: #d1fae5; color: #059669; }

/* ── Dark card ── */
.dark-card {
  background: rgba(255,255,255,.06); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: 1.5rem;
}

/* ── Bouton outline ── */
.btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; border: 1.5px solid var(--sky); color: var(--sky-d);
  font-size: .88rem; font-weight: 600; padding: .75rem 1.5rem;
  border-radius: var(--r); text-decoration: none; transition: all .18s;
}
.btn-outline:hover { background: var(--sky); color: #fff; text-decoration: none; }

/* ── Bouton light ── */
.btn-light {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--sky-l); color: var(--sky-d);
  border: 1px solid rgba(14,165,233,.25);
  font-size: .88rem; font-weight: 700; padding: .75rem 1.5rem;
  border-radius: var(--r); text-decoration: none; transition: all .18s;
}
.btn-light:hover { background: var(--sky); color: #fff; border-color: var(--sky); text-decoration: none; }

/* ── Section sombre générique ── */
.section-dark {
  background: linear-gradient(160deg, #0f172a 0%, #0c2340 100%);
  position: relative; overflow: hidden;
}
.section-dark::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(14,165,233,.1) 0%, transparent 55%);
  pointer-events: none;
}

/* ── Page hero intérieur ── */
.page-hero {
  background: linear-gradient(135deg, #0f172a 0%, #083b60 100%);
  padding: 4rem 0 3rem; position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(14,165,233,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,165,233,.06) 1px, transparent 1px);
  background-size: 48px 48px; pointer-events: none;
}
.page-hero-inner  { position: relative; z-index: 1; }
.page-hero-title  { font-size: clamp(1.75rem,4vw,2.75rem); font-weight: 800; color: #fff; margin-bottom: .75rem; letter-spacing: -.025em; }
.page-hero-desc   { font-size: 1rem; color: rgba(255,255,255,.65); line-height: 1.75; }

/* ── Breadcrumb public ── */
.tcf-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; font-size: .74rem; color: rgba(255,255,255,.45); margin-bottom: 1.25rem; }
.tcf-breadcrumb a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .14s; }
.tcf-breadcrumb a:hover { color: #38bdf8; }
.tcf-breadcrumb .sep { opacity: .4; }
.tcf-breadcrumb .current { color: #7dd3fc; font-weight: 600; }

/* ── Grilles utilitaires ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
@media(max-width:1024px){
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media(max-width:640px){
  .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; }
}

/* ── Spacing utilitaires ── */
.mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem} .mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem} .mt-8{margin-top:2rem} .mt-12{margin-top:3rem}
.mb-1{margin-bottom:.25rem} .mb-2{margin-bottom:.5rem} .mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem} .mb-8{margin-bottom:2rem} .mb-12{margin-bottom:3rem}

/* ── Text utilitaires ── */
.text-white { color: #fff !important; }
.text-sky   { color: var(--sky) !important; }
.text-sky-d { color: var(--sky-d) !important; }
.text-ink3  { color: var(--ink3) !important; }
.text-sm    { font-size: .82rem; }
.text-xs    { font-size: .72rem; }
.font-bold  { font-weight: 700; }
.font-black { font-weight: 800; }

/* ── Alertes ── */
.tcf-alert { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; border-radius: var(--r); font-size: .82rem; line-height: 1.6; }
.tcf-alert-info  { background: var(--sky-l);   border: 1px solid rgba(14,165,233,.25); color: var(--sky-dd); }
.tcf-alert-green { background: var(--green-l); border: 1px solid rgba(5,150,105,.25); color: #065f46; }
.tcf-alert-gold  { background: var(--gold-l);  border: 1px solid rgba(245,158,11,.25); color: #92400e; }
.tcf-alert i { margin-top:.1rem; flex-shrink:0; }

/* ── Dividers ── */
.tcf-divider      { border: none; border-top: 1px solid var(--bdr); margin: 2rem 0; }
.tcf-divider-dark { border-top-color: rgba(255,255,255,.08); }

/* ── Glide bullet actif (global) ── */
.glide__bullet--active {
  background: var(--sky) !important;
  transform: scale(1.25) !important;
}






/* ── Section wrapper — fond clair ── */
.pricing-section {
  position: relative;
  padding: 5rem 0;
  overflow: hidden;
  background: var(--surf);
}

/* Motif subtil en arrière-plan */
.pricing-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 50%, rgba(14,165,233,.08) 0%, transparent 50%),
    radial-gradient(circle at 85% 20%, rgba(2,132,199,.06) 0%, transparent 45%);
  pointer-events: none;
}

/* ── Grille 3 cartes ── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

/* ── Carte ── */
.pricing-card {
    margin: 10px;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .22s, box-shadow .22s;
}
.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}

/* Carte populaire — mise en avant */
.pricing-card-popular {
  transform: scale(1.04);
  box-shadow: 0 8px 40px rgba(2,132,199,.3);
  border: 2px solid #0284c7;
  z-index: 2;
}
.pricing-card-popular:hover {
  transform: scale(1.04) translateY(-6px);
}

/* ── Badge "Le plus populaire" ── */
.pricing-popular-badge {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}

/* ── Header carte ── */
.pricing-card-hd {
  padding: 1.75rem 1.5rem 1.25rem;
  text-align: center;
  border-bottom: 2px solid;
}
.pricing-pack-name {
  font-size: .72rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 1rem;
}

/* ── Prix ── */
.pricing-price-wrap { margin-bottom: .75rem; }
.pricing-price {
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  display: inline-flex;
  align-items: flex-start;
  gap: .15rem;
}
.pricing-currency {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: .5rem;
}
.pricing-old-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .35rem;
  font-size: .78rem;
  color: #94a3b8;
}
.pricing-old-price span:first-child {
  text-decoration: line-through;
}
.pricing-save-badge {
  background: #fee2e2;
  color: #dc2626;
  font-size: .62rem;
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: 4px;
}

/* ── Durée ── */
.pricing-duration {
  font-size: .8rem;
  font-weight: 700;
  margin-top: .5rem;
}

/* ── Features list ── */
.pricing-features {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  flex: 1;
}

.pricing-feat {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .55rem 0;
  border-bottom: 1px solid #f1f5f9;
}
.pricing-feat:last-child { border-bottom: none; }

.pricing-feat-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  flex-shrink: 0;
  margin-top: .1rem;
}

.pricing-feat-body {
  flex: 1;
  font-size: .78rem;
  color: #475569;
  line-height: 1.5;
}
.pricing-feat-count {
  font-weight: 800;
  font-size: .88rem;
  margin-right: .25rem;
}
.pricing-feat-sub {
  display: block;
  font-size: .65rem;
  color: #94a3b8;
  margin-top: .1rem;
}

/* Badge NEW */
.pricing-new-badge {
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .06em;
  background: #dc2626;
  color: #fff;
  padding: .15rem .4rem;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: .15rem;
  align-self: flex-start;
}

/* ── CTA ── */
.pricing-cta {
  padding: 1.25rem 1.5rem 1.75rem;
  border-top: 1px solid #f1f5f9;
}
.pricing-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .85rem 1.5rem;
  border-radius: 10px;
  border: none;
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s;
  font-family: inherit;
  letter-spacing: .02em;
}
.pricing-btn:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.pricing-guarantee {
  text-align: center;
  font-size: .65rem;
  color: #94a3b8;
  margin-top: .65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
}
.pricing-guarantee i { color: #10b981; }

/* ── Responsive ── */
@media(max-width: 1024px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .pricing-card-popular { transform: none; }
  .pricing-card-popular:hover { transform: translateY(-6px); }
}
@media(max-width: 640px) {
  .pricing-section { padding: 3.5rem 0; }
  .pricing-price { font-size: 2.5rem; }
  .pricing-card-hd { padding: 1.25rem 1.25rem 1rem; }
  .pricing-features { padding: 1rem 1.25rem; gap: .55rem; }
  .pricing-cta { padding: 1rem 1.25rem 1.25rem; }
}