/* ═══════════════════════════════════════════════════════════════
   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; }
}


/* ═══════════════════════════════════════════════════════════════
   Sprint S4 mobile-first polish 2026-07-31
   Subnav 13 items → hamburger < 768px, boutons touch, images fluides.
   ═══════════════════════════════════════════════════════════════ */

/* Bouton hamburger de la subnav (caché en desktop) */
.gardiens-subnav-toggle {
  display: none;
  align-items: center; justify-content: space-between;
  width: 100%;
  padding: 12px 18px;
  border: 1px solid var(--tk-border, rgba(48,137,197,.14));
  border-radius: 14px;
  background: linear-gradient(135deg, #FFFCF3 0%, #FFF7DB 100%);
  color: var(--tk-navy);
  font-weight: 800;
  font-size: .95rem;
  cursor: pointer;
  min-height: 48px;
  box-shadow: 0 4px 14px rgba(212, 150, 0, .08);
}
.gardiens-subnav-toggle .toggle-arrow {
  transition: transform .25s ease;
  font-size: 1.05rem;
}
.gardiens-subnav-toggle.is-open .toggle-arrow { transform: rotate(180deg); }

/* ═══════════════════════════════════════════════════════════════
   Desktop (>= 768px) : les .gnav-item apparaissent en pills inline.
   L'utilisateur voit la même barre horizontale que dans l'ancien design.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .gardiens-subnav-toggle { display: none !important; }
  .gardiens-subnav .subnav-inner { display: flex !important; }
  /* Cacher les icônes en desktop pour garder la barre compacte, ne montrer que le label */
  .gardiens-subnav .gnav-icon { display: none; }
  .gardiens-subnav .gnav-item {
    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 .gnav-item:hover,
  .gardiens-subnav .gnav-item.is-active {
    background: rgba(31, 134, 213, .10);
    color: var(--tk-blue-d);
  }
  .gardiens-subnav .gnav-item.is-active {
    background: rgba(31, 134, 213, .14);
  }
  .gardiens-subnav .gnav-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px;
    border-radius: 12px;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    min-height: 40px;
    line-height: 1;
    transition: transform 180ms ease, box-shadow 180ms ease;
  }
  .gardiens-subnav .gnav-cta-primary {
    background: linear-gradient(135deg, var(--tk-orange, #F7941D) 0%, var(--tk-orange-d, #E17F00) 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(247,148,29,.28);
  }
  .gardiens-subnav .gnav-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(247,148,29,.36);
    color: #fff;
  }
  .gardiens-subnav .gnav-cta-outline {
    background: #fff;
    color: var(--tk-navy);
    border: 1.5px solid rgba(31, 134, 213, .22);
  }
  .gardiens-subnav .gnav-cta-primary + .gnav-cta-outline,
  .gardiens-subnav .gnav-cta:first-of-type { margin-left: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   Mobile (< 768px) : reproduit le design du menu principal
   (grille 2 colonnes, tuiles blanches avec icône ronde colorée,
   animation d'entrée staggerée, CTA pleine largeur en bas).
   Cohérent avec mobile.css MENU MOBILE PREMIUM.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .gardiens-subnav-toggle { display: flex; }
  /* Drawer container (le panneau blanc qui contient la grille) */
  .gardiens-subnav .subnav-inner {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 8px;
    padding: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #F4F9FE 100%);
    border: 1px solid var(--tk-border, rgba(48,137,197,.14));
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(13,34,55,.08);
  }
  .gardiens-subnav .subnav-inner.is-open {
    display: grid;
  }

  /* Tuile nav : icône en haut à gauche + label en dessous */
  .gardiens-subnav .gnav-item {
    background: #ffffff;
    border: 1px solid var(--tk-border, rgba(48,137,197,.14));
    border-radius: 14px;
    padding: 12px 12px;
    min-height: 78px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    color: var(--tk-navy);
    text-decoration: none;
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(13,34,55,.04);
    transition: transform 200ms cubic-bezier(.34,1.56,.64,1),
                box-shadow 200ms ease,
                border-color 200ms ease;
    /* Animation d'entrée staggerée */
    opacity: 0;
    transform: translateY(12px);
    animation: gnavItemIn 320ms cubic-bezier(.22,1,.36,1) forwards;
  }
  .gardiens-subnav .subnav-inner.is-open .gnav-item:nth-child(1)  { animation-delay: 0.02s; }
  .gardiens-subnav .subnav-inner.is-open .gnav-item:nth-child(2)  { animation-delay: 0.05s; }
  .gardiens-subnav .subnav-inner.is-open .gnav-item:nth-child(3)  { animation-delay: 0.08s; }
  .gardiens-subnav .subnav-inner.is-open .gnav-item:nth-child(4)  { animation-delay: 0.11s; }
  .gardiens-subnav .subnav-inner.is-open .gnav-item:nth-child(5)  { animation-delay: 0.14s; }
  .gardiens-subnav .subnav-inner.is-open .gnav-item:nth-child(6)  { animation-delay: 0.17s; }
  .gardiens-subnav .subnav-inner.is-open .gnav-item:nth-child(7)  { animation-delay: 0.20s; }
  .gardiens-subnav .subnav-inner.is-open .gnav-item:nth-child(8)  { animation-delay: 0.23s; }
  .gardiens-subnav .subnav-inner.is-open .gnav-item:nth-child(9)  { animation-delay: 0.26s; }
  .gardiens-subnav .subnav-inner.is-open .gnav-item:nth-child(10) { animation-delay: 0.29s; }
  .gardiens-subnav .subnav-inner.is-open .gnav-item:nth-child(11) { animation-delay: 0.32s; }
  .gardiens-subnav .subnav-inner.is-open .gnav-item:nth-child(12) { animation-delay: 0.35s; }

  @keyframes gnavItemIn {
    to { opacity: 1; transform: translateY(0); }
  }

  .gardiens-subnav .gnav-item:hover,
  .gardiens-subnav .gnav-item:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(48,137,197,.15);
    border-color: rgba(48,137,197,.35);
  }

  .gardiens-subnav .gnav-item.is-active {
    border-color: rgba(48,137,197,.35);
    background: linear-gradient(180deg, #FFFCF3 0%, #FFF7DB 100%);
    box-shadow: 0 4px 14px rgba(212, 150, 0, .12);
  }

  /* Icône ronde colorée — palette bleu / jaune / vert / orange en rotation */
  .gardiens-subnav .gnav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--tk-blue-50, #EEF6FD) 0%, #ffffff 100%);
    color: var(--tk-blue-d, #1E6FA8);
    font-size: 1.15rem;
    box-shadow: 0 2px 6px rgba(48,137,197,.12);
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  .gardiens-subnav .gnav-item:hover .gnav-icon {
    transform: scale(1.10);
    box-shadow: 0 6px 14px rgba(48,137,197,.24);
  }
  /* Rotation de teintes par position (comme le main menu) */
  .gardiens-subnav .gnav-item:nth-child(2) .gnav-icon,
  .gardiens-subnav .gnav-item:nth-child(6) .gnav-icon,
  .gardiens-subnav .gnav-item:nth-child(11) .gnav-icon {
    background: linear-gradient(135deg, #FFF7E4 0%, #FFFEFB 100%);
    color: var(--tk-yellow-d, #D49600);
    box-shadow: 0 2px 6px rgba(249,193,59,.18);
  }
  .gardiens-subnav .gnav-item:nth-child(3) .gnav-icon,
  .gardiens-subnav .gnav-item:nth-child(9) .gnav-icon {
    background: linear-gradient(135deg, #FFEEF0 0%, #FFF8FA 100%);
    color: #dc3545;
    box-shadow: 0 2px 6px rgba(220,53,69,.15);
  }
  .gardiens-subnav .gnav-item:nth-child(4) .gnav-icon,
  .gardiens-subnav .gnav-item:nth-child(8) .gnav-icon,
  .gardiens-subnav .gnav-item:nth-child(12) .gnav-icon {
    background: linear-gradient(135deg, #E6F9EF 0%, #F4FDF7 100%);
    color: var(--tk-green-d, #0C9A55);
    box-shadow: 0 2px 6px rgba(16,188,105,.15);
  }
  .gardiens-subnav .gnav-item:nth-child(7) .gnav-icon,
  .gardiens-subnav .gnav-item:nth-child(10) .gnav-icon {
    background: linear-gradient(135deg, #FFF3EA 0%, #FFF9F3 100%);
    color: #E17F00;
    box-shadow: 0 2px 6px rgba(247,148,29,.15);
  }

  .gardiens-subnav .gnav-label {
    color: var(--tk-navy);
    font-weight: 700;
    font-size: .92rem;
  }

  /* CTA Rejoindre + Mon portail : pleine largeur en bas, séparés par une ligne */
  .gardiens-subnav .gnav-cta {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 14px 18px;
    border-radius: 14px;
    font-weight: 800;
    font-size: .95rem;
    text-decoration: none;
    line-height: 1;
    margin-top: 6px;
    opacity: 0;
    transform: translateY(10px);
    animation: gnavItemIn 320ms cubic-bezier(.22,1,.36,1) forwards;
    animation-delay: 0.40s;
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  .gardiens-subnav .gnav-cta-primary {
    background: linear-gradient(135deg, var(--tk-orange, #F7941D) 0%, var(--tk-orange-d, #E17F00) 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(247,148,29,.32);
    /* Séparateur visuel au-dessus */
    position: relative;
    margin-top: 14px;
    padding-top: 14px;
  }
  .gardiens-subnav .gnav-cta-primary::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--tk-border, rgba(48,137,197,.14)) 15%, var(--tk-border, rgba(48,137,197,.14)) 85%, transparent 100%);
  }
  .gardiens-subnav .gnav-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(247,148,29,.40);
    color: #fff;
  }
  .gardiens-subnav .gnav-cta-outline {
    background: #ffffff;
    color: var(--tk-navy);
    border: 2px solid var(--tk-blue, #3089C5);
    box-shadow: 0 4px 10px rgba(48,137,197,.10);
    animation-delay: 0.44s;
  }
  .gardiens-subnav .gnav-cta-outline:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(48,137,197,.20);
    background: var(--tk-blue-50, #EEF6FD);
  }
}

/* ── Mobile polish général pour toutes les pages gardiens ─────────── */
@media (max-width: 767px) {
  /* Titres hero plus compacts */
  body.gardiens-page .tk-hero-title {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.15;
  }
  body.gardiens-page .tk-hero-lead {
    font-size: .95rem;
    line-height: 1.65;
    text-align: justify;
    hyphens: auto;
  }
  body.gardiens-page .tk-kicker {
    font-size: .68rem !important;
  }
  /* Sections plus compactes */
  body.gardiens-page .tk-section { padding: 28px 0 !important; }
  body.gardiens-page .tk-hero { padding: 24px 0 12px !important; }
  /* Cards resserrées */
  body.gardiens-page .tk-card {
    padding: 18px !important;
    border-radius: 16px !important;
  }
  /* Manifesto/CTA plus lisible */
  body.gardiens-page .tk-manifesto {
    padding: 20px 16px !important;
  }
  body.gardiens-page .tk-manifesto p {
    text-align: justify;
    hyphens: auto;
  }
  /* Mascot images : hauteur max fluide */
  body.gardiens-page .tk-hero-mascot img {
    max-height: min(240px, 45vh) !important;
    width: auto;
    height: auto;
    max-width: 100%;
  }
  /* Grade dots compacts */
  body.gardiens-page .tk-grade-dot {
    width: 44px !important; height: 44px !important;
    font-size: 1.1rem !important;
  }
}

/* Paragraphes justify (règle DA TouKidou) sur toutes pages gardiens */
body.gardiens-page .tk-hero-lead,
body.gardiens-page .tk-section p,
body.gardiens-page .tk-card p,
body.gardiens-page .tk-manifesto p {
  text-align: justify;
  hyphens: auto;
}
/* Sauf CTAs / centered blocks qui gardent leur alignement d'origine */
body.gardiens-page .text-center p,
body.gardiens-page .tk-btn p,
body.gardiens-page .tk-kicker,
body.gardiens-page .tk-grade-def em { text-align: inherit; hyphens: none; }


/* ═══════════════════════════════════════════════════════════════
   Sprint S4 2026-08-01 : hero home ajustements mobile
   • .tk-hero-cta-row : 2 boutons TOUJOURS côte-à-côte (grid 2 cols)
   • .tk-hero-tags : garanti 1 ligne sur mobile pour 3 pills
   ═══════════════════════════════════════════════════════════════ */

/* Deux CTAs hero home : grille 2 colonnes égales, jamais empilée */
.tk-hero-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
  align-items: stretch;
}
.tk-hero-cta-row .tk-btn {
  justify-content: center;
  text-align: center;
  width: 100%;
  min-width: 0;
}

/* Sur mobile étroit : réduire padding + font pour tenir sans wrap */
@media (max-width: 767px) {
  .tk-hero-cta-row {
    gap: 8px;
    margin-top: 16px;
  }
  .tk-hero-cta-row .tk-btn {
    padding: 12px 10px !important;
    font-size: .82rem;
    line-height: 1.2;
    gap: 4px;
  }
  .tk-hero-cta-row .tk-btn i { font-size: .9rem; }
}
@media (max-width: 380px) {
  .tk-hero-cta-row .tk-btn {
    padding: 11px 8px !important;
    font-size: .76rem;
  }
}

/* Pills hero : sur mobile, forcer nowrap sur les 3 pills restantes
   (Formés, Reconnus, Engagés par serment) */
@media (max-width: 767px) {
  .tk-hero-tags {
    flex-wrap: nowrap;
    gap: 6px;
    margin: 10px 0 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tk-hero-tags::-webkit-scrollbar { display: none; }
  .tk-hero-tags span {
    padding: 5px 10px;
    font-size: .74rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .tk-hero-tags span i { font-size: .78rem; }
}