/* ═══════════════════════════════════════════════════════════════
   TOUKIDOU — Univers des Gardiens · Design System
   Miroir de la DA de la page d'accueil, avec la palette officielle.
   Palette : Bleu principal #1F86D5 · Bleu secondaire #155D9E ·
             Bleu nuit #103F6B · Orange #F7941D · Orange foncé #E97814 ·
             Jaune #FFC62A · Crème #FFF3DF · Beige #F2DFC2 ·
             Iris #1B74C9 · Reflet iris #6FD4FF · Anthracite #3B434C.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens (scopés à la coquille .gardiens-main) ──────────────── */
.gardiens-main {
  --tk-blue:         #1F86D5;
  --tk-blue-d:       #155D9E;
  --tk-blue-50:      #EEF6FD;
  --tk-navy:         #103F6B;
  --tk-yellow:       #FFC62A;
  --tk-yellow-d:     #E9A100;
  --tk-orange:       #F7941D;
  --tk-orange-d:     #E97814;
  --tk-cream:        #FFF3DF;
  --tk-beige:        #F2DFC2;
  --tk-iris:         #1B74C9;
  --tk-iris-light:   #6FD4FF;
  --tk-anthracite:   #3B434C;
  --tk-dark-grey:    #34383D;
  --tk-ink:          #111111;
  --tk-muted:        #5C6772;

  --tk-border:       rgba(31, 134, 213, 0.12);
  --tk-border-warm:  rgba(247, 148, 29, 0.18);
  --tk-sh-card:      0 2px 8px rgba(16, 63, 107, .05), 0 8px 28px rgba(16, 63, 107, .08);
  --tk-sh-hover:     0 6px 20px rgba(16, 63, 107, .08), 0 22px 52px rgba(16, 63, 107, .13);
  --tk-sh-blue:      0 8px 28px rgba(31, 134, 213, .22);
  --tk-sh-yellow:    0 8px 28px rgba(255, 198, 42, .30);
  --tk-sh-orange:    0 8px 28px rgba(247, 148, 29, .28);
}

/* ── Page shell (miroir home-main) ─────────────────────────────── */
/* Le fond reste dans les tons pale-blue/creme du début à la fin — on ne
   descend pas jusqu'au blanc pur, sinon les pages courtes (hero + 1
   section) donnent l'impression d'un « gros bloc blanc » qui enferme
   le contenu. La home peut se permettre le fondu vers le blanc parce
   qu'elle alterne beaucoup de sections. */
.gardiens-main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--tk-anthracite);
  background:
    radial-gradient(1200px 620px at 8% 0%,   rgba(31, 134, 213, .10) 0%, transparent 55%),
    radial-gradient(1000px 520px at 100% 12%, rgba(255, 198, 42, .10) 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 85%,  rgba(247, 148, 29, .08) 0%, transparent 55%),
    radial-gradient(900px 500px at 5% 95%,   rgba(27, 116, 201, .07) 0%, transparent 55%),
    linear-gradient(180deg, #EDF5FC 0%, #F4F9FE 35%, #F1F7FC 70%, #EDF5FC 100%);
}
.gardiens-main::before {
  /* Étoiles douces additionnelles pour animer les zones intermédiaires
     (au milieu de la page, entre le hero et le CTA final). Non-bloquant,
     pointer-events: none. */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 45%, rgba(31, 134, 213, .06) 0%, transparent 26%),
    radial-gradient(circle at 78% 55%, rgba(255, 198, 42, .05) 0%, transparent 24%),
    radial-gradient(circle at 45% 75%, rgba(247, 148, 29, .04) 0%, transparent 22%);
  pointer-events: none; z-index: -1;
}

/* ── Sub-navigation Gardiens (barre secondaire propre) ─────────── */
/* Fond transparent : la subnav flotte au-dessus du shell atmosphérique
   pour ne PAS créer une ligne blanche qui donnerait l'impression d'un
   « bloc » enfermant le reste de la page. */
.gardiens-subnav {
  background: transparent;
  border-bottom: none;
  padding: 14px 0 6px;
  position: relative;
  z-index: 5;
}
.gardiens-subnav .subnav-inner {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
  font-size: .92rem;
}
.gardiens-subnav a {
  color: var(--tk-navy);
  text-decoration: none;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  transition: background 180ms ease, color 180ms ease;
}
.gardiens-subnav a:hover {
  background: rgba(31, 134, 213, .10);
  color: var(--tk-blue-d);
}
.gardiens-subnav a.is-active {
  background: rgba(31, 134, 213, .14);
  color: var(--tk-blue-d);
}

.gardiens-breadcrumb {
  padding: 10px 0 0;
  font-size: .85rem;
  color: var(--tk-muted);
}
.gardiens-breadcrumb a { color: var(--tk-blue-d); text-decoration: none; font-weight: 600; }
.gardiens-breadcrumb a:hover { text-decoration: underline; }

/* ── Hero deux colonnes (texte + mascotte) — pour les sous-pages ──
   Miroir visuel du .tk-hero-panel mais SANS le fond blanc panneau.
   La mascotte est plus compacte (~280px) que sur la home. */
.tk-hero--with-mascot .container { position: relative; z-index: 1; }
.tk-hero--with-mascot .tk-hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  align-items: center;
}
.tk-hero--with-mascot .tk-hero-mascot {
  min-height: 280px;
}
.tk-hero--with-mascot .tk-hero-mascot img {
  max-height: 300px;
}
.tk-hero--with-mascot .tk-hero-mascot::before {
  width: 82%;
  background: radial-gradient(circle, rgba(255, 243, 223, .78), rgba(255, 198, 42, .12) 60%, transparent 78%);
}
.tk-hero--with-mascot .tk-hero-mascot::after {
  width: 68%;
  border: 2px dashed rgba(31, 134, 213, .16);
}
@media (max-width: 991.98px) {
  .tk-hero--with-mascot .tk-hero-grid { grid-template-columns: 1fr; }
  .tk-hero--with-mascot .tk-hero-mascot { min-height: 220px; order: -1; }
  .tk-hero--with-mascot .tk-hero-mascot img { max-height: 220px; }
}

/* ── Hero (miroir hero-carousel-panel) ─────────────────────────── */
.tk-hero {
  position: relative;
  padding: 56px 0 44px;
}
.tk-hero::before {
  content: "";
  position: absolute; inset: 24px 5% auto;
  height: 80%;
  background:
    radial-gradient(circle at 14% 32%, rgba(31, 134, 213, .13), transparent 38%),
    radial-gradient(circle at 86% 20%, rgba(255, 198, 42, .10), transparent 34%),
    radial-gradient(circle at 50% 72%, rgba(247, 148, 29, .08), transparent 30%);
  filter: blur(52px);
  pointer-events: none; z-index: 0;
}
.tk-hero > .container { position: relative; z-index: 1; }

.tk-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(31, 134, 213, .10);
  border: 1px solid rgba(31, 134, 213, .20);
  color: var(--tk-blue-d);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.tk-kicker.kicker-warm {
  background: rgba(247, 148, 29, .10);
  border-color: rgba(247, 148, 29, .22);
  color: var(--tk-orange-d);
}

.tk-hero-title {
  font-size: clamp(2.1rem, 3.4vw, 3.2rem);
  line-height: 1.03;
  letter-spacing: -.045em;
  font-weight: 800;
  text-wrap: balance;
  max-width: 20ch;
  margin-bottom: 18px;
  background: linear-gradient(135deg, var(--tk-navy) 0%, var(--tk-blue) 42%, var(--tk-navy) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 8px 16px rgba(16, 63, 107, .07));
}
.tk-hero-title::after {
  content: "";
  display: block;
  width: 72px; height: 4px;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tk-blue) 0%, var(--tk-yellow) 100%);
  box-shadow: 0 6px 18px rgba(255, 198, 42, .35);
}
.tk-hero-lead {
  font-size: 1.06rem;
  line-height: 1.72;
  color: var(--tk-muted);
  margin-bottom: 20px;
  max-width: 60ch;
}

.tk-hero-tags {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 22px;
}
.tk-hero-tags span {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(31, 134, 213, .14);
  color: var(--tk-navy);
  font-size: .88rem; font-weight: 600;
  box-shadow: 0 4px 12px rgba(16, 63, 107, .06);
}

/* ── Boutons (miroir btn-get-started / btn-watch-video) ───────── */
.tk-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px;
  border-radius: 14px;
  font-weight: 700;
  font-size: .96rem;
  text-decoration: none;
  border: none;
  transition: transform 200ms ease, box-shadow 200ms ease;
  cursor: pointer;
}
.tk-btn-primary {
  background: linear-gradient(135deg, var(--tk-blue) 0%, var(--tk-blue-d) 100%);
  color: #fff;
  box-shadow: var(--tk-sh-blue);
}
.tk-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 38px rgba(31, 134, 213, .32);
  color: #fff;
}
.tk-btn-warm {
  background: linear-gradient(135deg, var(--tk-orange) 0%, var(--tk-orange-d) 100%);
  color: #fff;
  box-shadow: var(--tk-sh-orange);
}
.tk-btn-warm:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 38px rgba(247, 148, 29, .40);
  color: #fff;
}
.tk-btn-outline {
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(31, 134, 213, .22);
  color: var(--tk-navy);
  padding: 12px 22px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(16, 63, 107, .06);
}
.tk-btn-outline:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(16, 63, 107, .10);
  color: var(--tk-blue-d);
}

/* ── Section titles (miroir home-main .section-title) ─────────── */
.tk-section { padding: 46px 0; position: relative; }
.tk-section.tk-section-alt { background: #FFFFFF; }
.tk-section.tk-section-cream { background: var(--tk-cream); }

.tk-section-title { text-align: center; margin-bottom: 34px; }
.tk-section-title h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 800;
  color: var(--tk-navy);
  letter-spacing: -.03em;
  margin-bottom: 12px;
}
.tk-section-title p {
  color: var(--tk-muted);
  max-width: 72ch;
  margin: 0 auto;
  line-height: 1.7;
}
.tk-section-title::after {
  content: "";
  display: block;
  width: 68px; height: 4px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tk-blue) 0%, var(--tk-yellow) 100%);
  box-shadow: 0 6px 18px rgba(255, 198, 42, .32);
}

/* Variante alignée à gauche : le titre ET son trait décoratif partent du
   bord gauche. Utile pour les sous-titres de catégorie (page badges,
   sections internes) où le centrage donnerait un trait « orphelin ». */
.tk-section-title.align-left { text-align: left; }
.tk-section-title.align-left p { margin-left: 0; margin-right: 0; }
.tk-section-title.align-left::after { margin-left: 0; margin-right: auto; }

/* ── Card unifiée (miroir tk-card-standard) ───────────────────── */
.tk-card {
  display: block;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 26px 24px;
  height: 100%;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 20px rgba(15,23,42,.06);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1),
              box-shadow .28s ease,
              border-color .28s ease;
}
.tk-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(15,23,42,.12);
  border-color: rgba(31, 134, 213, .32);
  color: inherit;
}
.tk-card h3, .tk-card h4 {
  color: var(--tk-navy);
  font-weight: 800;
  letter-spacing: -.02em;
}
.tk-card p { color: var(--tk-muted); line-height: 1.65; }

/* Grade card avec icône colorée (miroir featured-services) */
.tk-grade-card { position: relative; }
.tk-grade-card .tk-grade-dot {
  width: 64px; height: 64px;
  border-radius: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 1.5rem;
  margin-bottom: 20px;
  box-shadow: var(--tk-sh-blue);
}
.tk-grade-card .tk-grade-name {
  font-size: 1.06rem; font-weight: 800;
  color: var(--tk-navy); margin-bottom: 6px; letter-spacing: -.02em;
}
.tk-grade-card .tk-grade-level {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tk-muted);
  margin-bottom: 12px;
}
.tk-grade-card .tk-grade-def { font-size: .93rem; color: var(--tk-muted); line-height: 1.65; }
.tk-grade-card .tk-grade-more {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 14px;
  font-size: .85rem; font-weight: 700;
  color: var(--tk-blue-d);
}

/* Palette de couleurs par niveau (fond de badge) */
.tk-grade-dot-1 { background: linear-gradient(135deg, var(--tk-cream), var(--tk-beige)); color: var(--tk-orange-d); box-shadow: 0 8px 28px rgba(242, 223, 194, .55); }
.tk-grade-dot-2 { background: linear-gradient(135deg, #E7EEF6, #B8C6D6); color: var(--tk-navy); box-shadow: 0 8px 28px rgba(184, 198, 214, .55); }
.tk-grade-dot-3 { background: linear-gradient(135deg, var(--tk-yellow), var(--tk-yellow-d)); color: #5B4210; box-shadow: var(--tk-sh-yellow); }
.tk-grade-dot-4 { background: linear-gradient(135deg, var(--tk-iris-light), var(--tk-iris)); color: #fff; box-shadow: 0 8px 28px rgba(27, 116, 201, .35); }
.tk-grade-dot-5 { background: linear-gradient(135deg, var(--tk-navy), var(--tk-blue-d)); color: #fff; box-shadow: 0 8px 28px rgba(16, 63, 107, .40); }

/* ── Value tile (petites tuiles de valeurs) ────────────────────── */
.tk-value-tile {
  background: #fff;
  border: 1px solid var(--tk-border);
  border-radius: 22px;
  padding: 26px 24px;
  height: 100%;
  box-shadow: var(--tk-sh-card);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.tk-value-tile:hover { transform: translateY(-6px); box-shadow: var(--tk-sh-hover); }
.tk-value-tile .tk-value-icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--tk-blue) 0%, var(--tk-blue-d) 100%);
  box-shadow: var(--tk-sh-blue);
}
.tk-value-tile .tk-value-icon.icon-warm {
  background: linear-gradient(135deg, var(--tk-orange) 0%, var(--tk-orange-d) 100%);
  box-shadow: var(--tk-sh-orange);
}
.tk-value-tile .tk-value-icon.icon-sun {
  background: linear-gradient(135deg, var(--tk-yellow) 0%, var(--tk-yellow-d) 100%);
  box-shadow: var(--tk-sh-yellow);
  color: #5B4210;
}
.tk-value-tile h3 {
  font-size: 1.06rem; font-weight: 800;
  color: var(--tk-navy); margin-bottom: 8px; letter-spacing: -.02em;
}
.tk-value-tile p { font-size: .93rem; color: var(--tk-muted); line-height: 1.65; margin: 0; }

/* ── Badge pill (reconnaissance) ───────────────────────────────── */
.tk-badge-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(31, 134, 213, .10);
  border: 1px solid rgba(31, 134, 213, .18);
  color: var(--tk-blue-d);
  font-size: .85rem;
  font-weight: 700;
}
.tk-badge-pill.warm {
  background: rgba(247, 148, 29, .10);
  border-color: rgba(247, 148, 29, .22);
  color: var(--tk-orange-d);
}
.tk-badge-pill.sun {
  background: rgba(255, 198, 42, .18);
  border-color: rgba(255, 198, 42, .32);
  color: #5B4210;
}

/* ── Serment / texte long ──────────────────────────────────────── */
.tk-oath-scroll {
  max-height: 60vh;
  overflow: auto;
  border: 1px solid var(--tk-border-warm);
  border-radius: 22px;
  padding: 32px;
  background: linear-gradient(180deg, var(--tk-cream) 0%, #fff 40%);
  white-space: pre-line;
  line-height: 1.85;
  color: var(--tk-anthracite);
  font-size: 1.02rem;
  box-shadow: var(--tk-sh-card);
}

/* ── Criterion row (dashboard portail) ─────────────────────────── */
.tk-criterion-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--tk-border);
}
.tk-criterion-row:last-child { border-bottom: 0; }
.tk-criterion-state {
  font-size: .78rem;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--tk-blue-50);
  color: var(--tk-blue-d);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tk-criterion-state.satisfied     { background: #DCFCE7; color: #14532D; }
.tk-criterion-state.unsatisfied   { background: #FEE2E2; color: #7F1D1D; }
.tk-criterion-state.to_verify     { background: rgba(255, 198, 42, .25); color: #5B4210; }
.tk-criterion-state.in_progress   { background: rgba(31, 134, 213, .15); color: var(--tk-blue-d); }
.tk-criterion-state.expired       { background: rgba(233, 120, 20, .18); color: var(--tk-orange-d); }

/* ── CTA banner (miroir call-to-action home) ──────────────────── */
.tk-cta-banner {
  border-radius: 26px;
  padding: 44px 34px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .18) 0%, transparent 45%),
    radial-gradient(circle at 88% 82%, rgba(255, 198, 42, .35) 0%, transparent 50%),
    linear-gradient(135deg, var(--tk-blue) 0%, var(--tk-navy) 100%);
  box-shadow: 0 24px 60px rgba(16, 63, 107, .22);
}
.tk-cta-banner h2 {
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 12px;
}
.tk-cta-banner p { color: rgba(255, 255, 255, .88); margin-bottom: 22px; }
.tk-cta-banner .tk-btn-primary {
  background: #fff;
  color: var(--tk-navy);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
}
.tk-cta-banner .tk-btn-primary:hover {
  color: var(--tk-blue-d);
  transform: translateY(-3px);
}

/* ── Disclaimer (mise en garde légale / prudence) ─────────────── */
.tk-disclaimer {
  background: linear-gradient(180deg, var(--tk-cream), #fff);
  border: 1px solid var(--tk-border-warm);
  color: var(--tk-anthracite);
  padding: 16px 20px;
  border-radius: 14px;
  font-size: .92rem;
  line-height: 1.6;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.tk-disclaimer::before {
  content: "\2691"; /* drapeau pour attirer l'oeil */
  color: var(--tk-orange-d);
  font-size: 1.1rem;
  line-height: 1;
  margin-top: 2px;
}
.tk-disclaimer strong { color: var(--tk-navy); }

/* ── FAQ accordion (miroir accordion Bootstrap adapté) ────────── */
.tk-accordion .accordion-item {
  border: 1px solid var(--tk-border) !important;
  border-radius: 16px !important;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(15, 23, 42, .05);
}
.tk-accordion .accordion-button {
  font-weight: 700;
  color: var(--tk-navy);
  background: #fff;
  padding: 18px 22px;
}
.tk-accordion .accordion-button:not(.collapsed) {
  background: var(--tk-blue-50);
  color: var(--tk-blue-d);
  box-shadow: none;
}
.tk-accordion .accordion-button:focus { box-shadow: 0 0 0 3px rgba(31, 134, 213, .18); }
.tk-accordion .accordion-body { padding: 20px 22px; color: var(--tk-muted); line-height: 1.7; }

/* ── Formulaires (harmonisation) ──────────────────────────────── */
.gardiens-main .form-control,
.gardiens-main .form-select {
  border: 1px solid var(--tk-border);
  border-radius: 12px;
  padding: 11px 14px;
  color: var(--tk-anthracite);
  background: #fff;
  transition: border-color 150ms, box-shadow 150ms;
}
.gardiens-main .form-control:focus,
.gardiens-main .form-select:focus {
  border-color: var(--tk-blue);
  box-shadow: 0 0 0 3px rgba(31, 134, 213, .18);
  outline: none;
}
.gardiens-main .form-label { font-weight: 600; color: var(--tk-navy); }
.gardiens-main .form-check-input:checked {
  background-color: var(--tk-blue);
  border-color: var(--tk-blue);
}

/* ── Bulle Touki (intervention discrète de la mascotte) ───────────
   Utilisée 1-2 fois par page maximum. Sa rareté fait sa force.
   Ligne d'italique + petit avatar Touki à gauche, ancrage bleu-nuit. */
.tk-touki-bubble {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 620px;
  margin: 22px 0 0;
  padding: 14px 20px 14px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 243, 223, .82), rgba(255, 255, 255, .70));
  border: 1px solid var(--tk-border-warm);
  box-shadow: 0 6px 18px rgba(247, 148, 29, .12);
}
.tk-touki-bubble .tk-touki-avatar {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(31, 134, 213, .18);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(16, 63, 107, .12);
}
.tk-touki-bubble .tk-touki-avatar img {
  width: 110%; height: 110%; object-fit: cover; object-position: center 30%;
}
.tk-touki-bubble .tk-touki-line {
  font-style: italic;
  color: var(--tk-navy);
  line-height: 1.5;
  font-size: .96rem;
}
.tk-touki-bubble .tk-touki-line em {
  color: var(--tk-orange-d);
  font-style: normal;
  font-weight: 700;
}
@media (max-width: 600px) {
  .tk-touki-bubble { border-radius: 20px; padding: 12px 14px; }
}

/* ── Parcours narratif (6 chapitres) — page Rejoindre ─────────── */
.tk-journey {
  display: grid; gap: 14px;
  counter-reset: tk-journey;
  margin-top: 8px;
}
.tk-journey-step {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  align-items: start;
  padding: 18px 20px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--tk-border);
  border-radius: 18px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tk-journey-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(16, 63, 107, .10);
  border-color: rgba(31, 134, 213, .28);
}
.tk-journey-step::before {
  counter-increment: tk-journey;
  content: counter(tk-journey);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; font-size: 1.05rem;
  background: linear-gradient(135deg, var(--tk-blue) 0%, var(--tk-blue-d) 100%);
  box-shadow: 0 6px 16px rgba(31, 134, 213, .28);
  grid-row: span 2;
}
.tk-journey-step h3 {
  color: var(--tk-navy);
  font-weight: 800; letter-spacing: -.02em;
  font-size: 1.02rem; margin: 4px 0 6px;
}
.tk-journey-step p {
  color: var(--tk-anthracite);
  line-height: 1.65; margin: 0; font-size: .95rem;
}

/* ── Manifesto card (disclaimer rehaussé en position morale) ──── */
.tk-manifesto {
  background: linear-gradient(180deg, rgba(255, 243, 223, .35), #fff);
  border: 1px solid var(--tk-border-warm);
  border-radius: 22px;
  padding: 32px 30px;
  box-shadow: var(--tk-sh-card);
}
.tk-manifesto .tk-manifesto-eyebrow {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tk-orange-d);
  margin-bottom: 10px;
}
.tk-manifesto h3 {
  color: var(--tk-navy);
  font-weight: 800; letter-spacing: -.02em;
  font-size: 1.25rem; margin-bottom: 14px;
}
.tk-manifesto p {
  color: var(--tk-anthracite);
  line-height: 1.72; margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   GRADE DETAIL — listes typées + navigation prev/next + sidebar progression
   ═══════════════════════════════════════════════════════════════ */

/* Listes avec icônes et respiration */
.tk-grade-checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.tk-grade-checks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  padding: 4px 0;
  color: var(--tk-anthracite);
  line-height: 1.55;
}
.tk-grade-checks li i {
  color: var(--tk-blue-d);
  font-size: 1.05rem;
  margin-top: 2px;
}

/* Sidebar : liste des 5 grades, ordre naturel, courant surligné à sa place */
.tk-progress-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, .55);
  transition: background 180ms ease, transform 180ms ease;
}
.tk-progress-item:hover {
  background: rgba(31, 134, 213, .07);
  color: inherit;
  transform: translateX(2px);
}
.tk-progress-item .tk-progress-name {
  color: var(--tk-navy);
  font-weight: 700;
  display: block;
}
.tk-progress-item.is-current {
  background: linear-gradient(135deg, rgba(31, 134, 213, .12), rgba(255, 198, 42, .10));
  border: 1px solid rgba(31, 134, 213, .28);
  padding: 10px;
}
.tk-progress-item.is-current .tk-progress-name {
  color: var(--tk-blue-d);
}
.tk-progress-item .tk-progress-here {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tk-orange-d);
  margin-top: 2px;
}

/* Navigation entre grades — flèches prev/next en bas de la col principale */
.tk-grade-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.tk-grade-nav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--tk-border);
  text-decoration: none;
  color: inherit;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
}
.tk-grade-nav-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .10);
  border-color: rgba(31, 134, 213, .32);
  color: inherit;
}
.tk-grade-nav-link--next {
  text-align: right;
  flex-direction: row-reverse;
}
.tk-grade-nav-arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--tk-blue) 0%, var(--tk-blue-d) 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(31, 134, 213, .28);
  flex-shrink: 0;
}
.tk-grade-nav-label {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tk-muted);
  margin-bottom: 4px;
}
.tk-grade-nav-name {
  display: block;
  color: var(--tk-navy);
  font-weight: 800;
  letter-spacing: -.01em;
}

@media (max-width: 575.98px) {
  .tk-grade-nav { grid-template-columns: 1fr; }
  .tk-grade-nav-link--next { text-align: left; flex-direction: row; }
}

/* ═══════════════════════════════════════════════════════════════
   TOUKI — La bible (galerie d'expressions)
   Grid de vignettes, chacune une expression, chacune commentée.
   ═══════════════════════════════════════════════════════════════ */

.tk-touki-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}
.tk-touki-tile {
  background: #fff;
  border: 1px solid var(--tk-border);
  border-radius: 22px;
  padding: 22px 20px 20px;
  text-align: center;
  box-shadow: var(--tk-sh-card);
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
  position: relative; overflow: hidden;
}
.tk-touki-tile::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255, 243, 223, .55), transparent 60%);
  pointer-events: none;
}
.tk-touki-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(16, 63, 107, .12);
  border-color: rgba(31, 134, 213, .28);
}
.tk-touki-tile img {
  max-height: 140px; max-width: 100%;
  filter: drop-shadow(0 12px 18px rgba(16, 63, 107, .14));
  position: relative; z-index: 1;
  transition: transform 320ms cubic-bezier(.34, 1.56, .64, 1);
}
.tk-touki-tile:hover img { transform: translateY(-6px) rotate(-3deg); }
.tk-touki-tile h3 {
  color: var(--tk-navy);
  font-weight: 800; letter-spacing: -.01em;
  font-size: 1rem; margin: 14px 0 6px;
  position: relative; z-index: 1;
}
.tk-touki-tile p {
  color: var(--tk-anthracite);
  font-style: italic; line-height: 1.55;
  font-size: .88rem; margin: 0;
  position: relative; z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════
   HISTOIRES — polaroids
   Grille de cartes façon photo-polaroid avec inclinaison légère
   au hover. Chaque histoire = un moment vécu, jamais un témoignage.
   ═══════════════════════════════════════════════════════════════ */

.tk-stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 26px;
}
.tk-story-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--tk-border);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 22px rgba(15, 23, 42, .06);
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow .32s ease,
              border-color .32s ease;
}
.tk-story-card:hover {
  transform: translateY(-8px) rotate(-.6deg);
  box-shadow: 0 24px 48px rgba(15, 23, 42, .14);
  border-color: rgba(247, 148, 29, .35);
  color: inherit;
}
.tk-story-card .tk-story-mood {
  height: 8px;
  background: linear-gradient(90deg, var(--tk-blue) 0%, var(--tk-yellow) 60%, var(--tk-orange) 100%);
}
.tk-story-card .tk-story-body {
  padding: 22px 22px 24px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.tk-story-card .tk-story-category {
  font-size: .72rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--tk-orange-d);
}
.tk-story-card .tk-story-title {
  font-size: 1.15rem; font-weight: 800;
  color: var(--tk-navy); letter-spacing: -.02em;
  line-height: 1.25; margin: 0;
}
.tk-story-card .tk-story-open {
  color: var(--tk-anthracite);
  font-style: italic; line-height: 1.55;
  margin: 4px 0 0; font-size: .95rem;
}
.tk-story-card .tk-story-meta {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px;
  border-top: 1px dashed var(--tk-border);
  font-size: .82rem;
  color: var(--tk-muted);
}
.tk-story-card .tk-story-meta strong { color: var(--tk-navy); font-weight: 700; }
.tk-story-card .tk-story-more {
  color: var(--tk-blue-d);
  font-weight: 700;
}

/* Corps de l'histoire (page détail) */
.tk-story-page {
  max-width: 720px; margin: 0 auto;
}
.tk-story-page .tk-story-first-line {
  color: var(--tk-navy);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.35;
  border-left: 3px solid var(--tk-orange);
  padding-left: 18px;
  margin: 20px 0 30px;
}
.tk-story-page .tk-story-content {
  color: var(--tk-anthracite);
  font-size: 1.06rem;
  line-height: 1.85;
}
.tk-story-page .tk-story-content p { margin-bottom: 1.1em; }
.tk-story-page .tk-story-content em {
  color: var(--tk-orange-d);
  font-style: italic;
}

.tk-story-note {
  margin-top: 28px;
  padding: 20px 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 243, 223, .72), rgba(255, 255, 255, .55));
  border: 1px solid var(--tk-border-warm);
  display: flex; gap: 16px; align-items: center;
}
.tk-story-note .tk-touki-avatar {
  flex: 0 0 52px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(31, 134, 213, .18);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(16, 63, 107, .12);
}
.tk-story-note .tk-touki-avatar img { width: 110%; height: 110%; object-fit: cover; object-position: center 30%; }
.tk-story-note .tk-story-note-body {
  color: var(--tk-navy);
  font-style: italic; line-height: 1.55;
}
.tk-story-note .tk-story-note-body strong {
  display: block;
  font-style: normal;
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tk-orange-d);
  margin-bottom: 4px;
}

/* ── Portail : dashboard tuiles ────────────────────────────────── */
.tk-portal-tile {
  background: #fff;
  border: 1px solid var(--tk-border);
  border-radius: 22px;
  padding: 24px;
  box-shadow: var(--tk-sh-card);
  height: 100%;
}
.tk-portal-tile .tk-portal-eyebrow {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tk-muted);
  margin-bottom: 10px;
}
.tk-portal-tile h2, .tk-portal-tile h3 {
  color: var(--tk-navy);
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ── Utilitaires responsive ────────────────────────────────────── */
@media (max-width: 767.98px) {
  .tk-hero { padding: 40px 0 30px; }
  .tk-section { padding: 34px 0; }
  .tk-cta-banner { padding: 32px 22px; border-radius: 20px; }
  .tk-oath-scroll { padding: 22px; font-size: .98rem; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO CAROUSEL — page d'accueil Gardiens
   Inspiré du hero de la home mais bâti sur un vrai carousel
   Bootstrap 5, chaque slide met la mascotte en scène avec une
   animation différente (float, wiggle, bounce).
   ═══════════════════════════════════════════════════════════════ */

.tk-hero-carousel {
  position: relative;
  padding: 40px 0 20px;
}
.tk-hero-carousel::before {
  content: "";
  position: absolute; inset: 24px 5% auto;
  height: 82%;
  background:
    radial-gradient(circle at 14% 32%, rgba(31, 134, 213, .14), transparent 40%),
    radial-gradient(circle at 86% 20%, rgba(255, 198, 42, .11), transparent 36%),
    radial-gradient(circle at 50% 72%, rgba(247, 148, 29, .09), transparent 34%);
  filter: blur(48px);
  pointer-events: none; z-index: 0;
}
.tk-hero-carousel > .container { position: relative; z-index: 1; }

/* Panneau unique (miroir du .tkg-panel de la home). Pas de carousel :
   un seul bloc riche avec la mascotte animée, orbes floues, points colorés. */
.tk-hero-panel {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(16, 63, 107, .08),
    0 24px 64px rgba(31, 134, 213, .12);
  background:
    radial-gradient(circle at 5%  10%, rgba(31, 134, 213, .10), transparent 32%),
    radial-gradient(circle at 95% 88%, rgba(255, 198, 42, .10), transparent 30%),
    linear-gradient(135deg,
      rgba(237, 245, 253, .96) 0%,
      rgba(255, 255, 255, .70) 52%,
      rgba(255, 243, 223, .82) 100%);
  min-height: 480px;
}

.tk-hero-slide {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 48px 56px;
  min-height: 480px;
  position: relative;
}
.tk-hero-slide-copy { max-width: 640px; }

.tk-hero-slide h1,
.tk-hero-slide h2 {
  font-size: clamp(2.1rem, 3.4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  font-weight: 800;
  text-wrap: balance;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--tk-navy) 0%, var(--tk-blue) 42%, var(--tk-navy) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 6px 14px rgba(16, 63, 107, .06));
}
.tk-hero-slide h1::after,
.tk-hero-slide h2::after {
  content: "";
  display: block;
  width: 72px; height: 4px;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tk-blue) 0%, var(--tk-yellow) 100%);
  box-shadow: 0 6px 18px rgba(255, 198, 42, .35);
}

.tk-hero-slide p {
  font-size: 1.05rem;
  line-height: 1.72;
  color: var(--tk-anthracite);
  margin-bottom: 20px;
  max-width: 54ch;
}

/* Points colorés qui flottent en arrière-plan de chaque slide
   (miroir de la .tkg-dot de la home). */
.tk-hero-dot {
  position: absolute;
  border-radius: 50%;
  animation: tkFloat 6s ease-in-out infinite;
  pointer-events: none;
}
.tk-hero-dot:nth-child(2n)  { animation-duration: 7.2s; animation-delay: -1s; }
.tk-hero-dot:nth-child(3n)  { animation-duration: 5.4s; animation-delay: -2s; }

/* Orbes floues qui respirent en fond */
.tk-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  pointer-events: none;
  animation: tkBreathe 8s ease-in-out infinite;
}
.tk-hero-orb-1 { top: -60px; left: -60px; width: 280px; height: 280px; background: rgba(31, 134, 213, .30); }
.tk-hero-orb-2 { bottom: -80px; right: -80px; width: 320px; height: 320px; background: rgba(255, 198, 42, .28); animation-delay: -2.5s; }
.tk-hero-orb-3 { top: 40%; left: 45%; width: 220px; height: 220px; background: rgba(247, 148, 29, .22); animation-delay: -4s; }

/* Zone visuelle de droite (mascotte) */
.tk-hero-mascot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}
.tk-hero-mascot::before {
  content: "";
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 243, 223, .88), rgba(255, 198, 42, .18) 60%, transparent 80%);
  filter: blur(6px);
  z-index: 0;
}
.tk-hero-mascot img {
  position: relative; z-index: 1;
  max-height: 400px;
  max-width: 100%;
  filter: drop-shadow(0 24px 40px rgba(16, 63, 107, .22));
  transform-origin: center bottom;
}

/* Animations mascotte — chaque page peut piocher celle qui colle au thème.
   Toutes utilisent `transform-origin: center bottom` pour un ancrage
   naturel « au sol ». */
.tk-mascot-float img  { animation: tkMascotFloat  4.2s ease-in-out infinite; }
.tk-mascot-wiggle img { animation: tkMascotWiggle 3.4s ease-in-out infinite; }
.tk-mascot-bounce img { animation: tkMascotBounce 2.6s cubic-bezier(.28,.84,.42,1) infinite; }
.tk-mascot-fly img    { animation: tkMascotFly    5.4s ease-in-out infinite; }
.tk-mascot-wave img   { animation: tkMascotWave   3.0s ease-in-out infinite; transform-origin: 50% 90%; }
.tk-mascot-swing img  { animation: tkMascotSwing  4.6s ease-in-out infinite; transform-origin: 50% 10%; }
.tk-mascot-tilt img   { animation: tkMascotTilt   4.8s ease-in-out infinite; }

/* Anneau lumineux qui pulse autour de la mascotte */
.tk-hero-mascot::after {
  content: "";
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed rgba(31, 134, 213, .18);
  animation: tkRingPulse 8s linear infinite;
  z-index: 0;
}

/* Kicker au dessus du titre */
.tk-hero-slide .tk-kicker { margin-bottom: 14px; }

/* Reveal animation au chargement de la page (miroir du hero home) */
.tk-hero-panel .tk-kicker,
.tk-hero-panel .tk-hero-slide h1,
.tk-hero-panel .tk-hero-slide h2,
.tk-hero-panel .tk-hero-slide p,
.tk-hero-panel .tk-hero-tags,
.tk-hero-panel .tk-hero-slide-actions {
  animation: tkReveal .72s cubic-bezier(.22, 1, .36, 1) both;
}
.tk-hero-panel .tk-hero-slide h1,
.tk-hero-panel .tk-hero-slide h2   { animation-delay: .06s; }
.tk-hero-panel .tk-hero-slide p    { animation-delay: .14s; }
.tk-hero-panel .tk-hero-tags       { animation-delay: .20s; }
.tk-hero-panel .tk-hero-slide-actions { animation-delay: .26s; }

/* ── Keyframes ─────────────────────────────────────────────────── */
@keyframes tkFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes tkBreathe {
  0%, 100% { transform: scale(1); opacity: .78; }
  50%      { transform: scale(1.08); opacity: 1; }
}
@keyframes tkReveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tkMascotFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-16px) rotate(-2deg); }
}
@keyframes tkMascotWiggle {
  0%, 100%     { transform: rotate(0deg); }
  25%          { transform: rotate(-4deg); }
  75%          { transform: rotate(4deg); }
}
@keyframes tkMascotBounce {
  0%, 100%     { transform: translateY(0) scale(1, 1); }
  40%          { transform: translateY(-22px) scale(.98, 1.02); }
  60%          { transform: translateY(-10px) scale(1.02, .98); }
}
@keyframes tkMascotFly {
  0%           { transform: translate(0, 0) rotate(-3deg); }
  25%          { transform: translate(10px, -18px) rotate(-1deg); }
  50%          { transform: translate(0, -26px) rotate(2deg); }
  75%          { transform: translate(-10px, -18px) rotate(-1deg); }
  100%         { transform: translate(0, 0) rotate(-3deg); }
}
@keyframes tkMascotWave {
  0%, 100%     { transform: translateY(0) rotate(0deg); }
  25%          { transform: translateY(-4px) rotate(-6deg); }
  75%          { transform: translateY(-4px) rotate(6deg); }
}
@keyframes tkMascotSwing {
  0%, 100%     { transform: rotate(-3deg); }
  50%          { transform: rotate(3deg); }
}
@keyframes tkMascotTilt {
  0%, 100%     { transform: translateY(0) rotate(-2deg); }
  50%          { transform: translateY(-10px) rotate(2deg); }
}
@keyframes tkRingPulse {
  0%   { transform: rotate(0deg) scale(1);   opacity: .8; }
  50%  { transform: rotate(180deg) scale(1.06); opacity: .4; }
  100% { transform: rotate(360deg) scale(1);   opacity: .8; }
}

/* Respect des préférences de mouvement réduit (accessibilité) */
@media (prefers-reduced-motion: reduce) {
  .tk-hero-mascot img,
  .tk-hero-orb, .tk-hero-dot,
  .tk-hero-panel .tk-kicker,
  .tk-hero-panel .tk-hero-slide h1,
  .tk-hero-panel .tk-hero-slide h2,
  .tk-hero-panel .tk-hero-slide p,
  .tk-hero-panel .tk-hero-tags,
  .tk-hero-panel .tk-hero-slide-actions,
  .tk-hero-mascot::after { animation: none !important; }
}

/* Responsive : le hero passe en une colonne sur mobile */
@media (max-width: 991.98px) {
  .tk-hero-slide { grid-template-columns: 1fr; padding: 32px 24px; min-height: unset; }
  .tk-hero-mascot { min-height: 260px; order: -1; }
  .tk-hero-mascot img { max-height: 260px; }
  .tk-hero-panel { min-height: unset; }
}