/* ════════════════════════════════════════════
   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(13, 13, 13, 0.5)!important; 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: #fff !important; color: rgba(13, 13, 13, 0.5); border-color: rgba(13, 13, 13, 0.5); 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; }
}


/* ════════════════════════════════════════════════════════
   TCF CANADA — Pages épreuves (CE, CO, EE, EO)
   Fichier : public/assets/css/tcf-pages.css
   Importer après tcf.css
════════════════════════════════════════════════════════ */

/* ═══ HERO ÉPREUVE ══════════════════════════════════════ */
.ce-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Fallback si pas d'image */
.ce-hero:not([style*="background-image"]),
.co-hero:not([style*="background-image"]) {
  background: linear-gradient(135deg, #0f172a 0%, #083b60 100%);
}

.ce-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    155deg,
    rgba(5,10,20,.7) 0%,
    rgba(3,60,110,.45) 60%,
    rgba(14,165,233,.2) 100%
  );
}
.ce-hero-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
  padding: 6rem 1.5rem 4rem;
  width: 100%;
}
.ce-eyebrow {
  background: rgba(14,165,233,.18);
  color: #7dd3fc;
  border-color: rgba(14,165,233,.28);
}
.ce-hero-title {
  font-size: clamp(1.9rem, 4.5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: 1rem;
}
.ce-title-accent { color: #38bdf8; }
.ce-hero-desc {
  font-size: clamp(.9rem, 1.4vw, 1.05rem);
  color: rgba(255,255,255,.72);
  line-height: 1.75;
  margin-bottom: 1.5rem;
  max-width: 560px;
}

/* Chips tests gratuits */
.ce-chips-label {
  font-size: .65rem;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.ce-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
  max-width: 580px;
}
.ce-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .32rem .75rem;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: .74rem;
  font-weight: 600;
  border-radius: 7px;
  text-decoration: none;
  transition: all .18s;
}
.ce-chip:hover {
  background: rgba(14,165,233,.35);
  border-color: rgba(56,189,248,.5);
  color: #fff;
  text-decoration: none;
}

/* CTA hero */
.ce-hero-ctas {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

/* Colonne stats hero */
.ce-hero-stats-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
}
.ce-stat-card {
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 1rem .85rem;
  text-align: center;
}
.ce-stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .88rem;
  margin: 0 auto .55rem;
}
.ce-stat-val {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.ce-stat-lbl {
  font-size: .6rem;
  color: rgba(255,255,255,.45);
  margin-top: .2rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ═══ SECTION ÉPREUVE INFO ══════════════════════════════ */
.ce-epreuve-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

/* Blocs info */
.ce-epreuve-info {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.ce-info-block {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  transition: border-color .18s;
}
.ce-info-block:hover { border-color: #7dd3fc; }
.ce-info-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .88rem;
  flex-shrink: 0;
}
.ce-info-title {
  font-size: .84rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .3rem;
}
.ce-info-desc {
  font-size: .76rem;
  color: #64748b;
  line-height: 1.65;
}
.ce-info-desc strong { color: #0f172a; font-weight: 700; }

/* Tableau comparaison */
.ce-compare-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(14,165,233,.08);
}
.ce-compare-hd {
  background: linear-gradient(135deg, #0f172a, #083b60);
  color: rgba(255,255,255,.85);
  font-size: .8rem;
  font-weight: 700;
  padding: .85rem 1.25rem;
}
.ce-compare-rows { padding: .5rem 0; }
.ce-compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .5rem;
  padding: .6rem 1.25rem;
  border-bottom: 1px solid #f1f5f9;
  font-size: .74rem;
  align-items: center;
}
.ce-compare-row:last-child { border-bottom: none; }
.ce-compare-row-bonus { background: #f0f9ff; }
.ce-compare-aspect { font-weight: 700; color: #334155; }
.ce-compare-real { color: #94a3b8; }
.ce-compare-platform { color: #0f172a; font-weight: 600; display: flex; align-items: center; gap: .3rem; }

/* ═══ SECTION TESTS GRID ════════════════════════════════ */
.ce-tests-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.ce-test-feat {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  transition: all .22s;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.ce-test-feat:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(14,165,233,.1);
  border-color: #7dd3fc;
}
.ce-tf-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: .85rem;
}
.ce-tf-title {
  font-size: .88rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .45rem;
}
.ce-tf-desc {
  font-size: .75rem;
  color: #64748b;
  line-height: 1.65;
}

/* ═══ CONSEILS ══════════════════════════════════════════ */
.ce-conseils-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.ce-conseil-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  transition: all .22s;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.ce-conseil-card:hover {
  transform: translateY(-3px);
  border-color: #7dd3fc;
  box-shadow: 0 6px 20px rgba(14,165,233,.1);
}
.ce-conseil-num {
  font-size: 2.25rem;
  font-weight: 800;
  color: #e0f2fe;
  line-height: 1;
  margin-bottom: .65rem;
  letter-spacing: -.04em;
}
.ce-conseil-title {
  font-size: .86rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .45rem;
}
.ce-conseil-desc {
  font-size: .74rem;
  color: #64748b;
  line-height: 1.65;
}

/* ═══ RESPONSIVE ════════════════════════════════════════ */
@media(max-width: 1024px) {
  .ce-hero-inner { grid-template-columns: 1fr; gap: 2rem; padding: 5rem 1.5rem 3rem; }
  .ce-hero-stats-col { grid-template-columns: repeat(4, 1fr); }
  .ce-epreuve-grid { grid-template-columns: 1fr; }
  .ce-tests-grid { grid-template-columns: 1fr 1fr; }
  .ce-conseils-grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width: 640px) {
  .ce-hero { min-height: 70vh; }
  .ce-hero-inner { padding: 4rem 1.25rem 2.5rem; }
  .ce-hero-stats-col { grid-template-columns: 1fr 1fr; }
  .ce-tests-grid { grid-template-columns: 1fr; }
  .ce-conseils-grid { grid-template-columns: 1fr; }
  .ce-compare-row { grid-template-columns: 1fr 1fr; }
  .ce-compare-real { display: none; }
  .ce-chip { font-size: .68rem; padding: .28rem .6rem; }
}

/* ════════════════════════════════════════════════════════
   NOUVELLES CLASSES — Pages épreuves (CE/CO/EE/EO)
   Coller à la fin de tcf.css
════════════════════════════════════════════════════════ */

/* ── Sections fond ── */
.ce-section-white { background: #fff; }
.ce-section-gray  { background: #f8fafc; }

/* ── Centrage section header ── */
.ce-section-hd    { text-align: center; margin-bottom: 3rem; }
.ce-lead-center   { max-width: 600px; margin: .75rem auto 0; }
.ce-lead-dark     { color: rgba(255,255,255,.55); max-width: 540px; margin: .75rem auto 0; }
.ce-plan-lead     { margin: .75rem 0 1.75rem; }

/* ── Couleurs titres ── */
.ce-title-dark  { color: #0f172a; }
.ce-title-white { color: #fff; }

/* ── z-index pour section-dark ── */
.ce-z1 { position: relative; z-index: 1; }

/* ── CTA centré dans section ── */
.ce-section-cta { text-align: center; margin-top: 2.5rem; }
.ce-plan-cta    { margin-top: 1.75rem; }

/* ── Icônes colorées (fond + couleur) ── */
.ce-icon-bg-blue   { background: #eff6ff; }
.ce-icon-bg-green  { background: #f0fdf4; }
.ce-icon-bg-gold   { background: #fef3c7; }
.ce-icon-bg-violet { background: #ede9fe; }
.ce-icon-bg-rose   { background: #ffe4e6; }
.ce-icon-bg-teal   { background: #f0fdfa; }

.ce-icon-blue-text   { color: #2563eb; }
.ce-icon-green-text  { color: #059669; }
.ce-icon-gold-text   { color: #d97706; }
.ce-icon-violet-text { color: #7c3aed; }
.ce-icon-rose-text   { color: #e11d48; }
.ce-icon-teal-text   { color: #0d9488; }

/* ── Couleurs inline sans style= ── */
.ce-icon-sky    { color: #38bdf8; margin-right: .4rem; }
.ce-check-green { color: #34d399; }
.ce-check-gold  { color: #fbbf24; }
.ce-dot-anim    { font-size: .45rem; }
.ce-compare-hd-icon { margin-right: .4rem; }

/* ── Simulateur visuel (remplace inline) ── */
.ce-sim-progress { margin-bottom: 1.25rem; }
.ce-sim-progress-labels {
  display: flex; justify-content: space-between;
  font-size: .65rem; color: rgba(255,255,255,.5); margin-bottom: .35rem;
}
.ce-sim-bar-track {
  height: 5px; background: rgba(255,255,255,.1);
  border-radius: 99px; overflow: hidden;
}
.ce-sim-bar-fill {
  height: 100%; width: 46%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8); border-radius: 99px;
}
.ce-sim-extract {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: .85rem 1rem; margin-bottom: 1rem;
}
.ce-sim-extract-label {
  font-size: .58rem; font-weight: 700; color: rgba(255,255,255,.35);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem;
}
.ce-sim-extract-text { font-size: .74rem; color: rgba(255,255,255,.7); line-height: 1.7; margin: 0; }
.ce-sim-question { font-size: .76rem; font-weight: 700; color: #fff; margin-bottom: .65rem; }
.ce-sim-options  { display: flex; flex-direction: column; gap: .4rem; }
.ce-sim-option {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .75rem; border-radius: 8px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  font-size: .72rem; color: rgba(255,255,255,.6);
}
.ce-sim-option-active {
  background: rgba(14,165,233,.2); border-color: rgba(56,189,248,.4); color: #fff;
}
.ce-sim-opt-badge {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 700;
}
.ce-sim-opt-badge-active { background: #0284c7; }
.ce-sim-check { margin-left: auto; color: #38bdf8; }
.ce-sim-desc  { color: rgba(255,255,255,.65); line-height: 1.8; margin: 1rem 0 1.75rem; }

/* ── Feat icons simulateur ── */
.ce-sf-blue   { background: rgba(14,165,233,.15); color: #38bdf8; }
.ce-sf-green  { background: rgba(52,211,153,.15); color: #34d399; }
.ce-sf-violet { background: rgba(167,139,250,.15); color: #a78bfa; }

/* ── Plan visuel ── */
.ce-plan-level       { margin-bottom: .75rem; }
.ce-plan-level-label { font-size: .62rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem; }
.ce-plan-level-row   { display: flex; align-items: center; gap: .65rem; }
.ce-plan-level-from  { font-size: 1.3rem; font-weight: 800; color: #0284c7; }
.ce-plan-level-to    { font-size: 1.3rem; font-weight: 800; color: #059669; }
.ce-plan-level-bar   { flex: 1; height: 4px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.ce-plan-level-fill  { height: 100%; width: 65%; background: linear-gradient(90deg, #0ea5e9, #0284c7); border-radius: 99px; }
.ce-plan-level-sub   { font-size: .65rem; color: #94a3b8; margin-top: .3rem; }
.ce-plan-actions-label { font-size: .62rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem; }
.ce-plan-actions     { display: flex; flex-direction: column; }

/* Dots statut actions */
.ce-dot       { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ce-dot-green { background: #059669; }
.ce-dot-blue  { background: #0284c7; }
.ce-dot-gray  { background: #94a3b8; }
.ce-action-wait { color: #94a3b8; }

/* Tip IA dans le plan */
.ce-plan-tip {
  margin-top: 1rem; padding: .75rem;
  background: #f0f9ff; border-radius: 9px; border: 1px solid rgba(14,165,233,.15);
}
.ce-plan-tip-title { font-size: .68rem; font-weight: 700; color: #0284c7; margin-bottom: .3rem; }
.ce-plan-tip-text  { font-size: .72rem; color: #334155; line-height: 1.6; }
.ce-tip-bulb { margin-right: .3rem; color: #fbbf24; }

/* ── Eyebrow dark (sur fond sombre) ── */
.ce-eyebrow-dark {
  background: rgba(14,165,233,.15);
  color: #7dd3fc;
  border-color: rgba(14,165,233,.25);
}

/* ── IA cards dark ── */
.ce-ia-dark       { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.ce-ia-icon-blue  { background: rgba(14,165,233,.15); color: #38bdf8; }
.ce-ia-icon-green { background: rgba(52,211,153,.15); color: #34d399; }
.ce-ia-icon-gold  { background: rgba(251,191,36,.15);  color: #fbbf24; }
.ce-desc-dark     { color: rgba(255,255,255,.5); }

/* ════════════════════════════════════════════════════════
   AJOUT tcf.css — Classes manquantes
   Coller à la fin de tcf.css
════════════════════════════════════════════════════════ */

/* ── Container TCF ── */
.tcf-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
}

/* ════════════════════════════════════════════════
   BOUTONS
════════════════════════════════════════════════ */

.btn-primary-sky {
  display: inline-flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #fff; font-size: .9rem; font-weight: 700;
  padding: .85rem 1.75rem; border-radius: 12px;
  text-decoration: none; transition: all .18s;
  box-shadow: 0 4px 16px rgba(14,165,233,.35);
  border: none; cursor: pointer; font-family: inherit;
}
.btn-primary-sky:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(14,165,233,.5);
  color: #fff; text-decoration: none;
}

.btn-ghost-white {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-size: .9rem; font-weight: 600;
  padding: .85rem 1.75rem; border-radius: 12px;
  text-decoration: none; transition: all .18s;
}
.btn-ghost-white:hover {
  background: rgba(255,255,255,.2);
  color: #fff; text-decoration: none;
}

.btn-outline-sky {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; border: 1.5px solid #0284c7;
  color: #0284c7; font-size: .88rem; font-weight: 600;
  padding: .75rem 1.5rem; border-radius: 12px;
  text-decoration: none; transition: all .18s;
}
.btn-outline-sky:hover { background: #0284c7; color: #fff; text-decoration: none; }

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

/* ════════════════════════════════════════════════
   PLAN D'APPRENTISSAGE — pages épreuves
════════════════════════════════════════════════ */

.plan-inner-pub {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
}

.plan-steps-pub { display: flex; flex-direction: column; }

.plan-step-pub {
  display: flex; gap: 1.25rem; padding: 1.25rem 0;
  border-bottom: 1px solid #e2e8f0; position: relative;
}
.plan-step-pub:last-child { border-bottom: none; }

.plan-step-num-pub {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: #e0f2fe; border: 2px solid #0ea5e9;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800; color: #0284c7;
  position: relative; z-index: 1;
}
.plan-step-line-pub {
  position: absolute; left: 19px; top: 56px; bottom: -1px;
  width: 2px; background: #e2e8f0;
}
.plan-step-pub:last-child .plan-step-line-pub { display: none; }
.plan-step-title-pub { font-size: .9rem; font-weight: 700; color: #0f172a; margin-bottom: .35rem; }
.plan-step-desc-pub  { font-size: .78rem; color: #64748b; line-height: 1.65; }

.plan-visual-pub {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 20px; padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(14,165,233,.1);
}
.plan-vis-hd-pub {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; padding-bottom: .85rem;
  border-bottom: 1px solid #e2e8f0;
}
.plan-vis-title-pub {
  font-size: .82rem; font-weight: 700; color: #0f172a;
  display: flex; align-items: center; gap: .4rem;
}
.plan-vis-title-pub i { color: #0284c7; }
.plan-week-badge-pub {
  font-size: .62rem; font-weight: 700; background: #e0f2fe;
  color: #0284c7; padding: .18rem .55rem; border-radius: 99px;
  border: 1px solid rgba(14,165,233,.2);
}
.plan-action-pub {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .85rem; border-radius: 9px;
  border: 1px solid #e2e8f0; font-size: .76rem;
  margin-bottom: .45rem;
}
.plan-action-pub:last-child { margin-bottom: 0; }
.plan-action-pub.done-pub   { background: #f0fdf4; border-color: #a7f3d0; opacity: .8; }
.plan-action-pub.active-pub { background: #f0f9ff; border-color: #7dd3fc; }
.plan-action-name-pub { flex: 1; font-weight: 600; color: #0f172a; }
.plan-action-name-pub.done-text { text-decoration: line-through; color: #94a3b8; font-weight: 400; }
.plan-status-pub {
  font-size: .6rem; font-weight: 700;
  padding: .12rem .45rem; border-radius: 6px; flex-shrink: 0;
}
.ps-done   { background: #d1fae5; color: #059669; }
.ps-active { background: #e0f2fe; color: #0284c7; }
.ps-wait   { background: #f3f4f6; color: #9ca3af; }

/* ════════════════════════════════════════════════
   UTILITAIRES — pages épreuves
════════════════════════════════════════════════ */

.ce-section-white { background: #fff; }
.ce-section-gray  { background: #f8fafc; }
.ce-section-hd    { text-align: center; margin-bottom: 3rem; }
.ce-lead-center   { max-width: 600px; margin: .75rem auto 0; }
.ce-lead-dark     { color: rgba(255,255,255,.55); max-width: 540px; margin: .75rem auto 0; }
.ce-plan-lead     { margin: .75rem 0 1.75rem; }
.ce-title-dark    { color: #0f172a; }
.ce-title-white   { color: #fff; }
.ce-z1            { position: relative; z-index: 1; }
.ce-section-cta   { text-align: center; margin-top: 2.5rem; }
.ce-plan-cta      { margin-top: 1.75rem; }

/* Icônes — fonds colorés */
.ce-icon-bg-blue   { background: #eff6ff; }
.ce-icon-bg-green  { background: #f0fdf4; }
.ce-icon-bg-gold   { background: #fef3c7; }
.ce-icon-bg-violet { background: #ede9fe; }
.ce-icon-bg-rose   { background: #ffe4e6; }
.ce-icon-bg-teal   { background: #f0fdfa; }

/* Icônes — couleurs */
.ce-icon-blue-text   { color: #2563eb; }
.ce-icon-green-text  { color: #059669; }
.ce-icon-gold-text   { color: #d97706; }
.ce-icon-violet-text { color: #7c3aed; }
.ce-icon-rose-text   { color: #e11d48; }
.ce-icon-teal-text   { color: #0d9488; }

/* Divers couleurs inline → classes */
.ce-icon-sky      { color: #38bdf8; margin-right: .4rem; }
.ce-check-green   { color: #34d399; }
.ce-check-gold    { color: #fbbf24; }
.ce-compare-hd-icon { margin-right: .4rem; }
.ce-eyebrow-dark  { background: rgba(14,165,233,.15); color: #7dd3fc; border-color: rgba(14,165,233,.25); }

/* ── IA cards dark ── */
.ce-ia-dark       { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.ce-ia-icon-blue  { background: rgba(14,165,233,.15); color: #38bdf8; }
.ce-ia-icon-green { background: rgba(52,211,153,.15); color: #34d399; }
.ce-ia-icon-gold  { background: rgba(251,191,36,.15);  color: #fbbf24; }
.ce-desc-dark     { color: rgba(255,255,255,.5); }

/* ── Simulateur visuel ── */
.ce-sim-progress        { margin-bottom: 1.25rem; }
.ce-sim-progress-labels { display: flex; justify-content: space-between; font-size: .65rem; color: rgba(255,255,255,.5); margin-bottom: .35rem; }
.ce-sim-bar-track       { height: 5px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden; }
.ce-sim-bar-fill        { height: 100%; width: 46%; background: linear-gradient(90deg,#0ea5e9,#38bdf8); border-radius: 99px; }
.ce-sim-extract         { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: .85rem 1rem; margin-bottom: 1rem; }
.ce-sim-extract-label   { font-size: .58rem; font-weight: 700; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem; }
.ce-sim-extract-text    { font-size: .74rem; color: rgba(255,255,255,.7); line-height: 1.7; margin: 0; }
.ce-sim-question        { font-size: .76rem; font-weight: 700; color: #fff; margin-bottom: .65rem; }
.ce-sim-options         { display: flex; flex-direction: column; gap: .4rem; }
.ce-sim-option          { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-size: .72rem; color: rgba(255,255,255,.6); }
.ce-sim-option-active   { background: rgba(14,165,233,.2); border-color: rgba(56,189,248,.4); color: #fff; }
.ce-sim-opt-badge       { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 700; }
.ce-sim-opt-badge-active { background: #0284c7; }
.ce-sim-check           { margin-left: auto; color: #38bdf8; }
.ce-sim-desc            { color: rgba(255,255,255,.65); line-height: 1.8; margin: 1rem 0 1.75rem; }
.ce-sf-blue             { background: rgba(14,165,233,.15); color: #38bdf8; }
.ce-sf-green            { background: rgba(52,211,153,.15); color: #34d399; }
.ce-sf-violet           { background: rgba(167,139,250,.15); color: #a78bfa; }
.ce-dot-anim            { font-size: .45rem; }

/* ── Plan visuel ── */
.ce-plan-level        { margin-bottom: .75rem; }
.ce-plan-level-label  { font-size: .62rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem; }
.ce-plan-level-row    { display: flex; align-items: center; gap: .65rem; }
.ce-plan-level-from   { font-size: 1.3rem; font-weight: 800; color: #0284c7; }
.ce-plan-level-to     { font-size: 1.3rem; font-weight: 800; color: #059669; }
.ce-plan-level-bar    { flex: 1; height: 4px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.ce-plan-level-fill   { height: 100%; width: 65%; background: linear-gradient(90deg,#0ea5e9,#0284c7); border-radius: 99px; }
.ce-plan-level-sub    { font-size: .65rem; color: #94a3b8; margin-top: .3rem; }
.ce-plan-actions-label { font-size: .62rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem; }
.ce-plan-actions      { display: flex; flex-direction: column; }
.ce-dot               { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ce-dot-green         { background: #059669; }
.ce-dot-blue          { background: #0284c7; }
.ce-dot-gray          { background: #94a3b8; }
.ce-action-wait       { color: #94a3b8; }
.ce-plan-tip          { margin-top: 1rem; padding: .75rem; background: #f0f9ff; border-radius: 9px; border: 1px solid rgba(14,165,233,.15); }
.ce-plan-tip-title    { font-size: .68rem; font-weight: 700; color: #0284c7; margin-bottom: .3rem; }
.ce-plan-tip-text     { font-size: .72rem; color: #334155; line-height: 1.6; }
.ce-tip-bulb          { margin-right: .3rem; color: #fbbf24; }

/* ════════════════════════════════════════════════
   RESPONSIVE — classes ajoutées
════════════════════════════════════════════════ */
@media(max-width: 1024px) {
  .plan-inner-pub { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media(max-width: 640px) {
  .btn-primary-sky,
  .btn-ghost-white  { padding: .75rem 1.25rem; font-size: .82rem; }
  .plan-visual-pub  { padding: 1.1rem; }
  .plan-step-pub    { gap: .85rem; padding: 1rem 0; }
  .plan-step-num-pub { width: 34px; height: 34px; font-size: .72rem; }
}

/* ════════════════════════════════════════════════════════
   AJOUT tcf.css — Classes spécifiques Compréhension Orale
   Coller à la fin de tcf.css (après le bloc CE)
════════════════════════════════════════════════════════ */

/* ── Hero CO (accent vert) ── */
.co-hero { background: linear-gradient(135deg,#0f172a 0%,#064e3b 60%,#065f46 100%); }
.co-eyebrow { background: rgba(52,211,153,.15); color: #34d399; border-color: rgba(52,211,153,.25); }
.co-title-accent { color: #34d399; }
.co-chip { border-color: rgba(52,211,153,.4) !important; }
.co-chip:hover { background: rgba(5,150,105,.35) !important; }
.co-chip-icon { color: #34d399; }

/* ── Simulateur CO ── */
.co-vis-icon { color: #34d399; margin-right: .4rem; }
.co-sim-bar-fill { height: 100%; width: 55%; background: linear-gradient(90deg,#059669,#34d399); border-radius: 99px; }

/* ── Bloc lecteur audio (visual simulateur CO) ── */
.co-audio-block {
  display: flex; align-items: flex-start; gap: .85rem;
  background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.2);
  border-radius: 10px; padding: .85rem 1rem; margin-bottom: 1rem;
}
.co-audio-icon {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  background: rgba(52,211,153,.15);
  display: flex; align-items: center; justify-content: center;
  color: #34d399; font-size: 1rem;
}
.co-audio-content { flex: 1; }
.co-audio-label {
  font-size: .6rem; font-weight: 700; color: rgba(255,255,255,.35);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem;
}
.co-audio-player {
  display: flex; align-items: center; gap: .75rem; margin-bottom: .4rem;
}
.co-audio-wave {
  display: flex; align-items: center; gap: 3px; height: 24px;
}
.co-audio-wave span {
  display: block; width: 3px; border-radius: 99px;
  background: #34d399; animation: co-wave .8s ease-in-out infinite;
}
.co-audio-wave span:nth-child(1)  { height: 8px;  animation-delay: 0s; }
.co-audio-wave span:nth-child(2)  { height: 16px; animation-delay: .1s; }
.co-audio-wave span:nth-child(3)  { height: 22px; animation-delay: .2s; }
.co-audio-wave span:nth-child(4)  { height: 12px; animation-delay: .3s; }
.co-audio-wave span:nth-child(5)  { height: 18px; animation-delay: .4s; }
.co-audio-wave span:nth-child(6)  { height: 24px; animation-delay: .5s; }
.co-audio-wave span:nth-child(7)  { height: 14px; animation-delay: .6s; }
.co-audio-wave span:nth-child(8)  { height: 8px;  animation-delay: .7s; }
@keyframes co-wave {
  0%,100% { transform: scaleY(1); opacity: .7; }
  50%      { transform: scaleY(.4); opacity: 1; }
}
.co-audio-timer { font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.6); }
.co-audio-hint  { font-size: .62rem; color: rgba(255,255,255,.35); display: flex; align-items: center; gap: .3rem; }

/* ── Plan CO ── */
.co-dot-active { background: #059669; }
.co-plan-level-fill { height: 100%; width: 52%; background: linear-gradient(90deg,#059669,#34d399); border-radius: 99px; }

/* ── Conseils CO — grille 3 colonnes ── */
.co-conseils-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem;
}

@media(max-width:1024px) { .co-conseils-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:640px)  { .co-conseils-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════
   AJOUT tcf.css — Classes spécifiques Expression Écrite
   Coller à la fin de tcf.css
════════════════════════════════════════════════════════ */

/* ── Hero EE (accent amber/gold) ── */
.ee-hero      { background: linear-gradient(135deg,#0f172a 0%,#451a03 60%,#78350f 100%); }
.ee-eyebrow   { background: rgba(251,191,36,.15); color: #fbbf24; border-color: rgba(251,191,36,.25); }
.ee-title-accent { color: #fbbf24; }
.ee-chip      { border-color: rgba(251,191,36,.4) !important; }
.ee-chip:hover { background: rgba(217,119,6,.35) !important; }
.ee-chip-icon { color: #fbbf24; }
.ee-vis-icon  { color: #fbbf24; margin-right: .4rem; }

/* ── Simulateur EE ── */
.ee-sim-bar-fill { height: 100%; width: 65%; background: linear-gradient(90deg,#d97706,#fbbf24); border-radius: 99px; }

/* ── Bloc sujet EE ── */
.ee-sujet-block {
  background: rgba(251,191,36,.07); border: 1px solid rgba(251,191,36,.2);
  border-radius: 10px; padding: .85rem 1rem; margin-bottom: 1rem;
}
.ee-sujet-label {
  font-size: .58rem; font-weight: 700; color: rgba(255,255,255,.35);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: .5rem; display: flex; align-items: center; gap: .35rem;
}
.ee-sujet-text {
  font-size: .74rem; color: rgba(255,255,255,.7); line-height: 1.65;
  margin-bottom: .6rem; font-style: italic;
}
.ee-sujet-consigne {
  font-size: .7rem; color: #fbbf24; font-weight: 600; line-height: 1.5;
  padding: .5rem .75rem; background: rgba(251,191,36,.1);
  border-left: 2px solid #fbbf24; border-radius: 0 6px 6px 0;
}

/* ── Score preview critères ── */
.ee-score-preview { margin-top: .75rem; }
.ee-score-label {
  font-size: .62rem; font-weight: 700; color: rgba(255,255,255,.35);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .55rem;
}
.ee-score-criteria { display: flex; flex-direction: column; gap: .4rem; }
.ee-crit-row {
  display: flex; align-items: center; gap: .6rem; font-size: .68rem;
}
.ee-crit-name { width: 70px; color: rgba(255,255,255,.6); flex-shrink: 0; }
.ee-crit-bar  { flex: 1; height: 5px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden; }
.ee-crit-fill { height: 100%; background: linear-gradient(90deg,#d97706,#fbbf24); border-radius: 99px; }
.ee-fill-80 { width: 80%; }
.ee-fill-60 { width: 60%; }
.ee-fill-70 { width: 70%; }
.ee-fill-90 { width: 90%; }
.ee-crit-val  { font-size: .65rem; font-weight: 700; color: #fbbf24; width: 36px; text-align: right; flex-shrink: 0; }
.ee-score-total {
  margin-top: .65rem; text-align: center;
  font-size: .8rem; font-weight: 800; color: #fbbf24;
  padding: .4rem; background: rgba(251,191,36,.1);
  border-radius: 7px; border: 1px solid rgba(251,191,36,.2);
}

/* ── Feat icon gold simulateur ── */
.ee-sf-gold { background: rgba(251,191,36,.15); color: #fbbf24; }

/* ── Plan EE ── */
.ee-dot-active     { background: #d97706; }
.ee-plan-level-fill { height: 100%; width: 57%; background: linear-gradient(90deg,#d97706,#fbbf24); border-radius: 99px; }

/* ── IA icon gold ── */
.ee-ia-icon-gold { background: rgba(251,191,36,.15); color: #fbbf24; }

/* ════════════════════════════════════════════════════════
   AJOUT tcf.css — Classes spécifiques Expression Orale
   Coller à la fin de tcf.css
════════════════════════════════════════════════════════ */

/* ── Hero EO (accent rose/rouge) ── */
.eo-hero      { background: linear-gradient(135deg,#0f172a 0%,#4c0519 60%,#881337 100%); }
.eo-eyebrow   { background: rgba(251,113,133,.15); color: #fb7185; border-color: rgba(251,113,133,.25); }
.eo-title-accent { color: #fb7185; }
.eo-chip      { border-color: rgba(251,113,133,.4) !important; }
.eo-chip:hover { background: rgba(225,29,72,.35) !important; }
.eo-chip-icon { color: #fb7185; }
.eo-vis-icon  { color: #fb7185; margin-right: .4rem; }

/* ── Simulateur EO ── */
.eo-sim-bar-fill { height: 100%; width: 75%; background: linear-gradient(90deg,#e11d48,#fb7185); border-radius: 99px; }

/* ── Bloc sujet EO ── */
.eo-sujet-block {
  background: rgba(251,113,133,.07); border: 1px solid rgba(251,113,133,.2);
  border-radius: 10px; padding: .85rem 1rem; margin-bottom: .85rem;
}
.eo-sujet-label {
  font-size: .58rem; font-weight: 700; color: rgba(255,255,255,.35);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: .5rem; display: flex; align-items: center; gap: .35rem;
}
.eo-sujet-text {
  font-size: .8rem; color: #fff; font-weight: 700;
  line-height: 1.5; margin-bottom: .75rem; font-style: italic;
}
.eo-sujet-structure { display: flex; flex-direction: column; gap: .3rem; }
.eo-struct-item {
  display: flex; align-items: center; gap: .5rem;
  font-size: .68rem; color: rgba(255,255,255,.6);
}
.eo-struct-badge {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: rgba(251,113,133,.2); border: 1px solid rgba(251,113,133,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: .58rem; font-weight: 700; color: #fb7185;
}

/* ── Feedback preview EO ── */
.eo-feedback-preview { margin-top: .75rem; }
.eo-feedback-label {
  font-size: .62rem; font-weight: 700; color: rgba(255,255,255,.35);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .55rem;
}
.eo-fill-75 { width: 75%; background: linear-gradient(90deg,#e11d48,#fb7185) !important; }
.eo-fill-60 { width: 60%; background: linear-gradient(90deg,#e11d48,#fb7185) !important; }
.eo-fill-80 { width: 80%; background: linear-gradient(90deg,#e11d48,#fb7185) !important; }
.eo-fill-70 { width: 70%; background: linear-gradient(90deg,#e11d48,#fb7185) !important; }
.eo-crit-color { color: #fb7185 !important; }
.eo-score-total {
  margin-top: .65rem; text-align: center;
  font-size: .8rem; font-weight: 800; color: #fb7185;
  padding: .4rem; background: rgba(251,113,133,.1);
  border-radius: 7px; border: 1px solid rgba(251,113,133,.2);
}

/* ── Feat icon rose simulateur ── */
.eo-sf-rose { background: rgba(251,113,133,.15); color: #fb7185; }

/* ── Plan EO ── */
.eo-dot-active     { background: #e11d48; }
.eo-plan-level-fill { height: 100%; width: 50%; background: linear-gradient(90deg,#e11d48,#fb7185); border-radius: 99px; }

/* ── IA icon rose ── */
.eo-ia-icon-rose { background: rgba(251,113,133,.15); color: #fb7185; }

/* ── 3 tâches officielles ── */
.eo-taches-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1.5rem; margin-bottom: 2rem;
}
.eo-tache-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  transition: transform .22s, box-shadow .22s;
}
.eo-tache-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }

.eo-tache-hd {
  display: flex; align-items: center; gap: .85rem;
  padding: 1rem 1.25rem;
}
.eo-tache-hd-1 { background: linear-gradient(135deg,#fef3c7,#fde68a); }
.eo-tache-hd-2 { background: linear-gradient(135deg,#dbeafe,#bfdbfe); }
.eo-tache-hd-3 { background: linear-gradient(135deg,#ffe4e6,#fecdd3); }

.eo-tache-num {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.6);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 800; color: #0f172a;
}
.eo-tache-titre { font-size: .88rem; font-weight: 700; color: #0f172a; }
.eo-tache-duree { font-size: .65rem; color: #475569; margin-top: .15rem; display: flex; align-items: center; gap: .3rem; }

.eo-tache-body { padding: 1.1rem 1.25rem; }
.eo-tache-desc { font-size: .76rem; color: #475569; line-height: 1.65; margin-bottom: .85rem; }
.eo-tache-tips { display: flex; flex-direction: column; gap: .35rem; }
.eo-tache-tip  { font-size: .72rem; color: #334155; display: flex; align-items: flex-start; gap: .4rem; line-height: 1.5; }
.eo-tip-icon-1 { color: #d97706; flex-shrink: 0; margin-top: .1rem; }
.eo-tip-icon-2 { color: #2563eb; flex-shrink: 0; margin-top: .1rem; }
.eo-tip-icon-3 { color: #e11d48; flex-shrink: 0; margin-top: .1rem; }

/* ── Note importante ── */
.eo-note-important {
  display: flex; align-items: flex-start; gap: 1rem;
  background: #eff6ff; border: 1px solid #bfdbfe;
  border-left: 4px solid #2563eb; border-radius: 0 12px 12px 0;
  padding: 1rem 1.25rem; margin-top: .5rem;
}
.eo-note-icon {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  background: #dbeafe; display: flex; align-items: center;
  justify-content: center; color: #2563eb; font-size: .88rem;
}
.eo-note-title { font-size: .84rem; font-weight: 700; color: #1d4ed8; margin-bottom: .3rem; }
.eo-note-text  { font-size: .76rem; color: #334155; line-height: 1.65; }

/* ── Responsive ── */
@media(max-width:1024px) { .eo-taches-grid { grid-template-columns: 1fr; } }
@media(max-width:640px)  { .eo-taches-grid { grid-template-columns: 1fr; } }


/* ════════════════════════════════════════════════════════
   AJOUT tcf.css — Classes Page FAQ
   Coller à la fin de tcf.css
════════════════════════════════════════════════════════ */

/* ── Hero FAQ ── */
.faq-hero {
  position: relative; min-height: 280px;
  display: flex; align-items: center;
  background-size: cover; background-position: center; overflow: hidden;
}
.faq-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(155deg,rgba(5,10,20,.75) 0%,rgba(3,60,110,.55) 100%);
}
.faq-hero-inner {
  position: relative; z-index: 2;
  text-align: center; padding: 3rem 1.5rem;
}
.faq-eyebrow { background:rgba(14,165,233,.18); color:#7dd3fc; border-color:rgba(14,165,233,.28); }
.faq-hero-title { font-size:clamp(2rem,5vw,3rem); font-weight:800; color:#fff; letter-spacing:-.03em; margin-bottom:.75rem; }
.faq-hero-desc  { font-size:1rem; color:rgba(255,255,255,.65); line-height:1.75; margin-bottom:1.75rem; max-width:580px; margin-left:auto; margin-right:auto; }
.faq-hero-nav   { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.faq-nav-btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .9rem; background:rgba(255,255,255,.1); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2); color:#fff; font-size:.74rem; font-weight:600;
  border-radius:99px; text-decoration:none; transition:all .18s;
}
.faq-nav-btn:hover { background:rgba(14,165,233,.35); border-color:rgba(56,189,248,.4); color:#fff; text-decoration:none; }

/* ── Section ── */
.faq-section { background:#f8fafc; }
.faq-layout  { display:grid; grid-template-columns:1fr 340px; gap:2.5rem; align-items:start; }

/* ── Titres de blocs ── */
.faq-block-title {
  display:flex; align-items:center; gap:.85rem;
  padding-bottom:.85rem; border-bottom:2px solid #e2e8f0; margin-bottom:1.25rem;
}
.faq-mt { margin-top:2.5rem; }
.faq-block-icon {
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.faq-icon-blue   { background:#dbeafe; color:#2563eb; }
.faq-icon-violet { background:#ede9fe; color:#7c3aed; }
.faq-icon-green  { background:#d1fae5; color:#059669; }
.faq-icon-gold   { background:#fef3c7; color:#d97706; }
.faq-block-heading { font-size:1.15rem; font-weight:800; color:#0f172a; margin:0; }

/* ── How-to grille ── */
.faq-howto-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  margin-bottom:.5rem;
}
.faq-howto-step {
  display:flex; align-items:flex-start; gap:.75rem;
  background:#fff; border:1px solid #e2e8f0; border-radius:12px;
  padding:1rem 1.1rem; transition:border-color .18s;
}
.faq-howto-step:hover { border-color:#7dd3fc; }
.faq-howto-num {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:#e0f2fe; border:2px solid #0ea5e9;
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:800; color:#0284c7;
}
.faq-howto-content { flex:1; }
.faq-howto-title { font-size:.82rem; font-weight:700; color:#0f172a; margin-bottom:.25rem; }
.faq-howto-desc  { font-size:.74rem; color:#64748b; line-height:1.6; }

/* ── How-to plan ── */
.faq-plan-howto {
  background:#fff; border:1px solid #e2e8f0; border-radius:14px;
  padding:1.25rem 1.5rem; margin-bottom:1.25rem;
}
.faq-plan-howto-title {
  font-size:.84rem; font-weight:700; color:#0284c7;
  display:flex; align-items:center; gap:.4rem; margin-bottom:1rem;
}
.faq-plan-steps { display:flex; flex-direction:column; gap:.75rem; }
.faq-plan-step  { display:flex; align-items:flex-start; gap:.75rem; font-size:.78rem; color:#334155; line-height:1.6; }
.faq-plan-step-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:.3rem; }
.faq-dot-1 { background:#0284c7; }
.faq-dot-2 { background:#059669; }
.faq-dot-3 { background:#d97706; }
.faq-dot-4 { background:#7c3aed; }
.faq-dot-5 { background:#e11d48; }

/* ── Accordion FAQ ── */
.faq-accordion-list { display:flex; flex-direction:column; gap:.65rem; }
.faq-item {
  background:#fff; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden;
  transition:border-color .18s, box-shadow .18s;
}
.faq-item:hover  { border-color:#7dd3fc; }
.faq-item-open   { border-color:#0284c7; box-shadow:0 0 0 3px rgba(14,165,233,.08); }
.faq-q {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 1.1rem; background:transparent; border:none; cursor:pointer;
  font-size:.84rem; font-weight:700; color:#0f172a; text-align:left; font-family:inherit;
}
.faq-q:hover { color:#0284c7; }
.faq-item-open .faq-q { color:#0284c7; }
.faq-chevron { font-size:.62rem; color:#94a3b8; transition:transform .25s; flex-shrink:0; }
.faq-item-open .faq-chevron { transform:rotate(180deg); color:#0284c7; }
.faq-a {
  max-height:0; overflow:hidden;
  font-size:.78rem; color:#475569; line-height:1.75;
  padding:0 1.1rem; transition:max-height .3s ease, padding .3s;
}
.faq-item-open .faq-a { max-height:500px; padding:.25rem 1.1rem 1rem; }
.faq-list { margin:.5rem 0 0 1rem; display:flex; flex-direction:column; gap:.3rem; }
.faq-list li::before { content:'→ '; color:#0284c7; font-weight:700; }
.faq-link { color:#0284c7; font-weight:600; text-decoration:underline; }
.faq-link:hover { color:#0369a1; }

/* ── Sidebar ── */
.faq-sidebar { display:flex; flex-direction:column; gap:1.25rem; position:sticky; top:5rem; }
.faq-sidebar-card {
  background:#fff; border:1px solid #e2e8f0; border-radius:14px;
  padding:1.25rem; box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.faq-sidebar-title {
  font-size:.8rem; font-weight:700; color:#0f172a;
  display:flex; align-items:center; gap:.4rem;
  margin-bottom:1rem; padding-bottom:.65rem; border-bottom:1px solid #f1f5f9;
}
/* Nav sidebar */
.faq-side-nav { display:flex; flex-direction:column; gap:.4rem; }
.faq-side-link {
  display:flex; align-items:center; gap:.55rem;
  padding:.45rem .65rem; border-radius:8px; font-size:.76rem; font-weight:600;
  color:#334155; text-decoration:none; transition:all .15s;
}
.faq-side-link:hover { background:#f0f9ff; color:#0284c7; text-decoration:none; }
.faq-sl-blue   { color:#2563eb; }
.faq-sl-violet { color:#7c3aed; }
.faq-sl-green  { color:#059669; }
.faq-sl-gold   { color:#d97706; }

/* Formulaire sidebar */
.faq-form { display:flex; flex-direction:column; gap:.65rem; }
.faq-field { position:relative; }
.faq-input {
  width:100%; padding:.55rem .9rem; padding-right:2rem;
  border:1px solid #e2e8f0; border-radius:9px; font-size:.76rem;
  color:#334155; background:#f8fafc; outline:none; font-family:inherit;
  transition:border-color .15s;
}
.faq-input:focus { border-color:#0284c7; background:#fff; }
.faq-textarea   { resize:vertical; min-height:90px; }
.faq-field-icon { position:absolute; right:.65rem; top:.6rem; color:#94a3b8; font-size:.72rem; pointer-events:none; }
.faq-submit-btn {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; padding:.75rem; background:linear-gradient(135deg,#0ea5e9,#0284c7);
  color:#fff; font-size:.82rem; font-weight:700; border:none;
  border-radius:9px; cursor:pointer; transition:all .18s; font-family:inherit;
}
.faq-submit-btn:hover { filter:brightness(1.1); transform:translateY(-1px); }

/* Liens utiles sidebar */
.faq-useful-links { display:flex; flex-direction:column; gap:.4rem; }
.faq-useful-link {
  display:flex; align-items:center; gap:.55rem;
  padding:.45rem .65rem; border-radius:8px; font-size:.76rem; font-weight:600;
  color:#334155; text-decoration:none; transition:all .15s; border:1px solid transparent;
}
.faq-useful-link:hover { background:#f0f9ff; color:#0284c7; border-color:#bae6fd; text-decoration:none; }

/* ── Responsive ── */
@media(max-width:1024px) {
  .faq-layout       { grid-template-columns:1fr; }
  .faq-sidebar      { position:static; order:-1; }
  .faq-sidebar-card:not(.faq-nav-card):not(.faq-links-card) { display:none; }
  .faq-howto-grid   { grid-template-columns:1fr; }
}
@media(max-width:640px) {
  .faq-hero-nav     { gap:.35rem; }
  .faq-nav-btn      { font-size:.66rem; padding:.32rem .65rem; }
  .faq-howto-grid   { grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════════════════
   STEPPER FAQ — Simulateur & Plan d'apprentissage
════════════════════════════════════════════════════════ */

/* ── Wrapper stepper ── */
.faq-stepper-wrap {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}

/* ── Header stepper ── */
.faq-stepper-hd {
  display: flex; align-items: center; gap: .85rem;
  padding: 1.1rem 1.5rem; border-bottom: 1px solid #f1f5f9;
  background: #f8fafc;
}
.faq-stepper-hd-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
}
.faq-stepper-hd-violet { background: #ede9fe; color: #7c3aed; }
.faq-stepper-hd-green  { background: #d1fae5; color: #059669; }
.faq-stepper-hd-title  { font-size: .88rem; font-weight: 800; color: #0f172a; }
.faq-stepper-hd-sub    { font-size: .72rem; color: #94a3b8; margin-top: .1rem; }

/* ── Barre de progression ── */
.faq-stepper-prog {
  display: flex; align-items: center;
  padding: 1rem 1.5rem; border-bottom: 1px solid #f1f5f9;
  overflow-x: auto; gap: 0;
}
.faq-stp-dot {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; cursor: pointer;
  border: 1.5px solid #e2e8f0; background: #f8fafc; color: #94a3b8;
  transition: all .22s;
}
.faq-stp-dot:hover { border-color: var(--stp-color, #7c3aed); color: var(--stp-color, #7c3aed); }
.faq-stp-done {
  background: var(--stp-color, #7c3aed) !important;
  border-color: var(--stp-color, #7c3aed) !important;
  color: #fff !important;
}
.faq-stp-active {
  background: var(--stp-color, #7c3aed) !important;
  border-color: var(--stp-color, #7c3aed) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stp-color, #7c3aed) 20%, transparent);
}
.faq-stp-line {
  flex: 1; height: 1.5px; background: #e2e8f0; min-width: 12px;
  transition: background .25s;
}
.faq-stp-line-done { background: var(--stp-color, #7c3aed); }

/* ── Carte étape ── */
.faq-stepper-card { padding: 1.5rem; }
.faq-stp-card-hd {
  display: flex; align-items: flex-start; gap: .85rem; margin-bottom: 1rem;
}
.faq-stp-badge {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.faq-stp-title { font-size: .92rem; font-weight: 800; color: #0f172a; margin-bottom: .18rem; }
.faq-stp-sub   { font-size: .72rem; color: #94a3b8; }

/* Flux */
.faq-stp-flow { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: .85rem; }
.faq-stp-chip { padding: .25rem .65rem; border-radius: 6px; font-size: .74rem; font-weight: 500; background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569; }
.faq-stp-arrow { font-size: .62rem; color: #94a3b8; }

/* Corps */
.faq-stp-body { font-size: .82rem; color: #475569; line-height: 1.75; margin-bottom: .85rem; }

/* Tags */
.faq-stp-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .85rem; }
.faq-stp-tag  { padding: .2rem .6rem; border-radius: 99px; font-size: .72rem; font-weight: 600; border: 1px solid; }
.faq-stp-tag-blue   { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; }
.faq-stp-tag-green  { background: #d1fae5; border-color: #6ee7b7; color: #059669; }
.faq-stp-tag-amber  { background: #fef3c7; border-color: #fcd34d; color: #d97706; }
.faq-stp-tag-red    { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
.faq-stp-tag-gray   { background: #f1f5f9; border-color: #cbd5e1; color: #64748b; }
.faq-stp-tag-purple { background: #ede9fe; border-color: #c4b5fd; color: #7c3aed; }

/* Alertes */
.faq-stp-alert {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .75rem 1rem; border-radius: 0 8px 8px 0;
  font-size: .78rem; line-height: 1.6; margin-bottom: 1rem;
}
.faq-stp-alert i { flex-shrink: 0; margin-top: .1rem; }
.faq-stp-alert-info    { background: #eff6ff; border-left: 3px solid #2563eb; color: #1d4ed8; }
.faq-stp-alert-warning { background: #fef3c7; border-left: 3px solid #d97706; color: #92400e; }
.faq-stp-alert-success { background: #d1fae5; border-left: 3px solid #059669; color: #065f46; }
.faq-stp-alert-purple  { background: #ede9fe; border-left: 3px solid #7c3aed; color: #5b21b6; }

/* Navigation */
.faq-stp-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1rem; border-top: 1px solid #f1f5f9;
}
.faq-stp-info { font-size: .72rem; color: #94a3b8; }
.faq-stp-btn  {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.1rem; border-radius: 8px; border: 1.5px solid;
  font-size: .78rem; font-weight: 700; cursor: pointer;
  transition: all .18s; font-family: inherit;
}
.faq-stp-btn:disabled  { opacity: .35; cursor: not-allowed; }
.faq-stp-btn-pri {
  background: var(--stp-color, #7c3aed);
  border-color: var(--stp-color, #7c3aed);
  color: #fff;
}
.faq-stp-btn-pri:not(:disabled):hover { filter: brightness(1.1); transform: translateY(-1px); }
.faq-stp-btn-sec { background: #fff; border-color: #e2e8f0; color: #64748b; }
.faq-stp-btn-sec:not(:disabled):hover { border-color: #cbd5e1; color: #334155; }

/* ── Responsive stepper ── */
@media(max-width: 640px) {
  .faq-stepper-hd, .faq-stepper-prog, .faq-stepper-card { padding-left: 1rem; padding-right: 1rem; }
  .faq-stp-dot { width: 28px; height: 28px; font-size: .68rem; }
  .faq-stp-title { font-size: .84rem; }
}
/* ═══════════════════════════════════════════════════════
   tcf-combinaisons.css
   Classes partagées — pages liste de combinaisons (EE / EO / ...)
   Charger après tcf.css
═══════════════════════════════════════════════════════ */

/* ── Grid 3 colonnes responsive ── */
.tcf-comb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
@media(max-width:1024px){ .tcf-comb-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:600px)  { .tcf-comb-grid { grid-template-columns: 1fr; } }

/* ── Numéro de combinaison ── */
.tcf-num-badge {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: var(--sky, #0284c7); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800;
}

/* ── Badge tâche (T1 / T2 / T3) ── */
.tcf-t-badge {
  font-size: .58rem; font-weight: 800;
  padding: .1rem .38rem; border-radius: 4px;
  background: var(--sky, #0284c7); color: #fff;
  white-space: nowrap; flex-shrink: 0; margin-top: 2px;
}

/* ── Ligne de tâche ── */
.tcf-tache-row {
  display: flex; align-items: flex-start; gap: .45rem;
  padding: .35rem .5rem; border-radius: 6px;
  background: #f0f9ff; border-left: 2px solid var(--sky, #0284c7);
  margin-bottom: .3rem;
  transition: background .13s;
}
.tcf-tache-row:last-child { margin-bottom: 0; }
.tcf-tache-row:hover { background: #e0f2fe; }

/* ── Texte de tâche tronqué à 2 lignes ── */
.tcf-t-text {
  font-size: .73rem; color: #475569; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Bouton CTA bas de card ── */
.tcf-cta-btn {
  display: flex; align-items: center; justify-content: center;
  gap: .38rem; width: 100%; padding: .52rem .75rem;
  border-radius: 8px; text-decoration: none;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #fff; font-size: .78rem; font-weight: 700;
  transition: filter .18s, transform .18s, box-shadow .18s;
}
.tcf-cta-btn:hover {
  filter: brightness(1.08); transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(2,132,199,.3);
  color: #fff; text-decoration: none;
}

/* ── Footer de card ── */
.tcf-card-ft {
  padding: .65rem .85rem;
  border-top: 1px solid #e2e8f0;
  background: #fafbfc; margin-top: auto;
}


/* ═══════════════════════════════════════════════════════
   tcf-combinaisons.css
   Classes partagées — pages liste de combinaisons (EE / EO / ...)
   Charger après tcf.css
═══════════════════════════════════════════════════════ */

/* ── Grid 3 colonnes responsive ── */
.tcf-comb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
@media(max-width:1024px){ .tcf-comb-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:600px)  { .tcf-comb-grid { grid-template-columns: 1fr; } }

/* ── Numéro de combinaison ── */
.tcf-num-badge {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: var(--sky, #0284c7); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800;
}

/* ── Badge tâche (T1 / T2 / T3) ── */
.tcf-t-badge {
  font-size: .58rem; font-weight: 800;
  padding: .1rem .38rem; border-radius: 4px;
  background: var(--sky, #0284c7); color: #fff;
  white-space: nowrap; flex-shrink: 0; margin-top: 2px;
}

/* ── Ligne de tâche ── */
.tcf-tache-row {
  display: flex; align-items: flex-start; gap: .45rem;
  padding: .35rem .5rem; border-radius: 6px;
  background: #f0f9ff; border-left: 2px solid var(--sky, #0284c7);
  margin-bottom: .3rem;
  transition: background .13s;
}
.tcf-tache-row:last-child { margin-bottom: 0; }
.tcf-tache-row:hover { background: #e0f2fe; }

/* ── Texte de tâche tronqué à 2 lignes ── */
.tcf-t-text {
  font-size: .73rem; color: #475569; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Bouton CTA bas de card ── */
.tcf-cta-btn {
  display: flex; align-items: center; justify-content: center;
  gap: .38rem; width: 100%; padding: .52rem .75rem;
  border-radius: 8px; text-decoration: none;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #fff; font-size: .78rem; font-weight: 700;
  transition: filter .18s, transform .18s, box-shadow .18s;
}
.tcf-cta-btn:hover {
  filter: brightness(1.08); transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(2,132,199,.3);
  color: #fff; text-decoration: none;
}

/* ── Footer de card ── */
.tcf-card-ft {
  padding: .65rem .85rem;
  border-top: 1px solid #e2e8f0;
  background: #fafbfc; margin-top: auto;
}

/* ── Page wrapper ── */
.tcf-page {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

/* ── Hero ── */
.tcf-hero {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-top: 3px solid var(--sky, #0284c7);
  border-radius: 12px;
  padding: .85rem 1.1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
}
.tcf-hero-icon {
  width: 40px; height: 40px; border-radius: 9px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.tcf-hero-icon-ee { background: #eff6ff; color: #0284c7; }
.tcf-hero-icon-eo { background: #ffe4e6; color: #e11d48; }

.tcf-hero-body {
  flex: 1;
  min-width: 180px;
}
.tcf-hero-eyebrow {
  font-size: .6rem; font-weight: 700;
  color: var(--sky, #0284c7);
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: .2rem;
}
.tcf-hero-title {
  font-size: 1.05rem; font-weight: 800;
  color: #0f172a; line-height: 1.2;
}
.tcf-hero-sub {
  font-size: .72rem; color: #64748b;
}

/* ── Bannière info ── */
.tcf-info-banner {
  border-radius: 0 8px 8px 0;
  margin-bottom: 1rem;
  font-size: .76rem;
}

/* ── Card header ── */
.tcf-card-hd {
  display: flex; align-items: center; gap: .65rem;
  padding: .65rem .85rem;
  border-bottom: 1px solid #e2e8f0;
}
.tcf-card-hd-ee { background: linear-gradient(135deg, #f0f9ff, #e0f2fe); }
.tcf-card-hd-eo { background: linear-gradient(135deg, #fff1f2, #ffe4e6); }

.tcf-card-hd-title {
  font-size: .82rem; font-weight: 700; color: #0f172a;
}
.tcf-card-hd-sub {
  margin: 0; font-size: .74rem;
}

/* ── Card body ── */
.tcf-card-body {
  padding: .65rem .85rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

/* ── Couleurs accent EO ── */
.tcf-accent-eo { border-left-color: #e11d48 !important; }
.tcf-badge-eo  { background: #e11d48 !important; }
.tcf-cta-eo    { background: linear-gradient(135deg, #fb7185, #e11d48) !important; }

/* ── Variante hero EO ── */
.tcf-hero-eo { border-top-color: #e11d48; }
.tcf-eyebrow-eo { color: #e11d48; }