/* =========================================================
   KIDNKOD — SCOLAIRES (CLEAN)
   Violet #330394 / Orange #FCA203
========================================================= */

:root{
  --kk-violet:#330394;
  --kk-orange:#FCA203;
  --kk-white:#FFFFFF;
  --kk-ink:#111827;
  --kk-muted:#4b5563;
}

html{ scroll-behavior:smooth; }
.kk-anchor{ scroll-margin-top:110px; }
.kk-section{ padding:72px 0; }
@media (max-width:576px){ .kk-section{ padding:48px 0; } }

/* Boutons */
.kk-cta{
  background-color: var(--kk-violet);
  border-color: var(--kk-violet);
  border-radius:14px;
  font-weight:700;
}
.kk-cta:hover{ opacity:.95; }

.kk-outline{
  color: var(--kk-violet);
  border:2px solid var(--kk-violet);
  border-radius:14px;
  font-weight:700;
  background:#fff;
}
.kk-outline:hover{ background: rgba(51,3,148,.06); }

.kk-cta-orange{
  background-color: var(--kk-orange) !important;
  border-color: var(--kk-orange) !important;
  color:#14183E !important;
  font-weight:800;
  border-radius:14px;
}
.kk-cta-orange:hover{ opacity:.95; }

.kk-outline-strong{
  color: var(--kk-violet);
  border:2px solid rgba(51,3,148,.28);
  border-radius:14px;
  font-weight:800;
  background:#fff;
}
.kk-outline-strong:hover{ background: rgba(51,3,148,.06); border-color: rgba(51,3,148,.40); }

/* Typo */
.kk-h2{ font-weight:800; letter-spacing:-.2px; margin:0; }
.kk-h3{ font-weight:800; letter-spacing:-.15px; margin:0 0 .35rem 0; }
.kk-lead{ color:var(--kk-muted); font-size:1.02rem; line-height:1.45; }
.kk-lead-dark{ color:#111827; font-size:1.02rem; line-height:1.45; }
.kk-meta{ font-size:.92rem; color:var(--kk-muted); }
.kk-desc{ color:var(--kk-muted); margin:0 0 .65rem 0; line-height:1.45; }

/* Badges */
.kk-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.45rem .7rem;
  border-radius:999px;
  font-size:.82rem;
  font-weight:700;
  white-space:nowrap;
  background: linear-gradient(180deg, rgba(252,162,3,.12) 0%, rgba(255,255,255,1) 75%);
  color:#1f2937;
  border:1px solid rgba(252,162,3,.28);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 4px 12px rgba(17,24,39,.04);
}
.kk-badge--soft{ opacity:.92; }

.kk-badge-orange{
  display:inline-block;
  padding:.45rem .95rem;
  border-radius:999px;
  background-color:#FCA203;
  color:#FFFFFF;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
  box-shadow:0 2px 0 rgba(255,255,255,.25) inset, 0 6px 16px rgba(17,24,39,.18);
  border:none;
}

.kk-stars{
  color:#FCA203;
  font-size:1rem;
  letter-spacing:1px;
  line-height:1;
}

/* Cards */
.kk-card{ border-radius:16px; }
.kk-card .card-body{ padding:1.25rem; }
.kk-card-img-top{
  width:100%;
  height:220px;
  object-fit:cover;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
}

/* Lists */
.kk-ul{ padding-left:1.1rem; margin:0; color:#1f2937; }
.kk-ul li{ margin:.28rem 0; }
@media (max-width:576px){ .kk-ul li{ margin:.45rem 0; } }

/* Fullbleed violet */
.kk-fullbleed-news{ background:#330394 !important; }
.kk-fullbleed{ width:100%; }

.kk-steps-card{
  background: rgba(255,255,255,.92);
  border-radius:16px;
  padding:16px;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}
.kk-ol{
  margin:0;
  padding-left:1.1rem;
  color:#1f2937;
  font-weight:800;
}
.kk-ol li{ margin:.45rem 0; }

/* Specs */
.kk-spec{
  background:#fff;
  border:1px solid rgba(17,24,39,.10);
  border-radius:14px;
  padding:12px;
}
.kk-spec-k{ font-size:.78rem; color:var(--kk-muted); font-weight:800; }
.kk-spec-v{ font-size:.98rem; font-weight:900; color:#111827; }

/* =========================
   TOP NAV (TON HTML)
   ========================= */
.kk-topnav{
  background: linear-gradient(180deg, rgba(17,24,39,.03), rgba(255,255,255,1));
}
.kk-topnav-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
}
.kk-topnav-kicker{
  font-weight:900;
  color:var(--kk-violet);
  font-size:.82rem;
  letter-spacing:.3px;
  text-transform:uppercase;
  margin-bottom:6px;
}
.kk-topnav-title{
  font-weight:900;
  color:#111827;
  letter-spacing:-.25px;
  line-height:1.12;
  margin:0;
}
.kk-topnav-sub{
  margin-top:8px;
  color:var(--kk-muted);
  font-weight:650;
  line-height:1.35;
  max-width:60ch;
}
.kk-topnav-cta .btn{ white-space:nowrap; }
.kk-cta-arrow{ display:inline-block; margin-left:8px; transform: translateY(-1px); font-weight:900; }

@media (max-width:992px){
  .kk-topnav-head{ align-items:flex-start; flex-direction:column; }
  .kk-topnav-cta{ width:100%; }
  .kk-topnav-cta .btn{ width:100%; }
}

/* Grid tuiles */
.kk-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}
@media (min-width:992px){
  .kk-grid{ grid-template-columns: repeat(3,1fr); gap:16px; }
}

.kk-link-tile{ display:block; text-decoration:none !important; color:inherit !important; }

.kk-tile{
  position:relative;
  overflow:hidden;
  height:100%;
  background:#fff;
  border-radius:18px;
  border:1px solid rgba(17,24,39,.10);
  box-shadow:0 12px 30px rgba(17,24,39,.06);
  padding:16px;
  display:flex;
  flex-direction:column;
  min-height:240px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.kk-tile:hover{
  transform: translateY(-2px);
  box-shadow:0 18px 40px rgba(17,24,39,.10);
  border-color: rgba(51,3,148,.18);
}

.kk-tile__glow{
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 220px at 0% 0%,
      rgba(51,3,148,.12),
      rgba(252,162,3,.08),
      rgba(255,255,255,0) 60%);
  opacity:.85;
  pointer-events:none;
}
.kk-tile--passculture .kk-tile__glow{ opacity:.90; }
.kk-tile--vacances .kk-tile__glow{ opacity:.75; }
.kk-tile--hebdo .kk-tile__glow{ opacity:.70; }

.kk-tile__top{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.kk-chip{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:var(--kk-violet);
  background: rgba(51,3,148,.08);
  border:1px solid rgba(51,3,148,.16);
  flex:0 0 auto;
}
.kk-tile__icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--kk-violet);
  background: rgba(51,3,148,.06);
  border:1px solid rgba(51,3,148,.14);
  flex:0 0 auto;
}
.kk-tile--vacances .kk-tile__icon{
  color:#8a4b00;
  background: rgba(252,162,3,.12);
  border-color: rgba(252,162,3,.22);
}
.kk-tile__icon svg{ width:22px; height:22px; }

.kk-tile__headtext{ position:relative; }
.kk-tile__title{
  font-weight:900;
  color:#111827;
  letter-spacing:-.2px;
  line-height:1.1;
}
.kk-tile__subtitle{
  margin-top:2px;
  font-size:.92rem;
  font-weight:700;
  color: var(--kk-muted);
}
.kk-tile__body{
  position:relative;
  color:#374151;
  font-weight:600;
  line-height:1.45;
  margin-top:6px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.kk-tile__meta{
  position:relative;
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:14px;
  border-top:1px solid rgba(17,24,39,.08);
}

.kk-tile__footer{
  position:relative;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(17,24,39,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:900;
  color:#111827;
}
.kk-tile__chev{
  color: var(--kk-violet);
  display:inline-block;
  transition: transform .15s ease;
}
.kk-tile:hover .kk-tile__chev{ transform: translateX(2px); }

/* =========================
   INTRO CARD (TON HTML)
   ========================= */
.kk-intro-card{
  background:#fff;
  border:1px solid rgba(17,24,39,.10);
  border-radius:18px;
  box-shadow: 0 12px 35px rgba(17,24,39,.06);
  padding:18px;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:16px;
  align-items:stretch;
}
@media (max-width:992px){
  .kk-intro-card{ grid-template-columns: 1fr; }
}

/* Pills */
.kk-pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:10px;
}
.kk-pill{
  display:inline-flex;
  align-items:center;
  padding:.42rem .75rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:900;
  border:1px solid rgba(17,24,39,.08);
  background: rgba(17,24,39,.03);
  color:#111827;
}
.kk-pill--orange{
  background: rgba(252,162,3,.16);
  border-color: rgba(252,162,3,.30);
}
.kk-pill--soft{ opacity:.95; }

/* Note ✓ */
.kk-note{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.kk-note__icon{
  width:26px;
  height:26px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#111827;
  background: rgba(252,162,3,.20);
  border:1px solid rgba(252,162,3,.30);
  flex:0 0 auto;
}
.kk-note__text{ font-weight:600; line-height:1.35; }

/* Intro actions */
.kk-intro-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
@media (max-width:576px){
  .kk-intro-actions .btn{ width:100%; }
}

/* Image droite (IMPORTANT : évite “image en gros”) */
.kk-intro-visual{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(17,24,39,.10);
  box-shadow: 0 12px 26px rgba(17,24,39,.08);
  height: 100%;
  min-height: 260px;
  max-height: 360px;
}
.kk-intro-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width:992px){
  .kk-intro-visual{ max-height: 320px; }
}

/* Badge sur image */
.kk-intro-visual__badge{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(17,24,39,.10);
  border-radius:14px;
  padding:10px;
  box-shadow: 0 10px 22px rgba(17,24,39,.08);
}
.kk-intro-visual__badgeTitle{ font-weight:900; color:#111827; }
.kk-intro-visual__badgeSub{ font-weight:700; color:var(--kk-muted); font-size:.9rem; margin-top:2px; }

/* =========================
   PROOF CARD (avis + tags)
   ========================= */
.kk-proof-card{
  margin-top:12px;
  background:#fff;
  border:1px solid rgba(17,24,39,.10);
  border-radius:18px;
  box-shadow:0 10px 28px rgba(17,24,39,.06);
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.kk-proof-card__left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 280px;
}
.kk-proof-line{
  color:#111827;
  font-weight:850;
  line-height:1.2;
}
.kk-dot{ color: var(--kk-muted); margin:0 6px; }

.kk-proof-card__right .kk-tags{
  justify-content:flex-end;
}

@media (max-width:992px){
  .kk-proof-card{
    flex-direction:column;
    align-items:flex-start;
  }
  .kk-proof-card__left{ min-width:unset; }
  .kk-proof-card__right .kk-tags{ justify-content:flex-start; }
}
/* ORANGE = TEXTE BLANC (global, sans exception) */
.kk-cta-orange,
.kk-cta-orange:link,
.kk-cta-orange:visited{
  color:#fff !important;
}

.kk-cta-orange:hover,
.kk-cta-orange:focus{
  color:#fff !important;
  opacity:.95;
}

/* Si Bootstrap te force parfois un "text-dark" */
.btn.kk-cta-orange{ color:#fff !important; }
/* ALIGNEMENT PARFAIT DES ACTIONS SUR TOUTES LES CARTES */
.kk-card-flex{ display:flex; flex-direction:column; height:100%; }
.kk-card-body-flex{ display:flex; flex-direction:column; flex:1 1 auto; }

/* Stabilise la hauteur du header de carte (sinon ça saute) */
.kk-card-body-flex .kk-h3{ min-height: 2.4em; }        /* titre sur ~2 lignes */
.kk-card-body-flex .kk-desc{ min-height: 3.2em; }      /* description stable */

/* Actions toujours collées en bas */
.kk-card-actions{
  margin-top:auto !important;
  display:grid;
  gap:10px;
  padding-top:14px;
}

/* Boutons tous identiques */
.kk-card-actions .btn{
  min-height: 48px;       /* même hauteur partout */
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
}
.kk-outline,
.kk-outline-strong{
  font-weight:800;
}
/* FORCE les 2 CTA sur une seule ligne */
.kk-intro-actions{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:14px !important;
}

/* Empêche les boutons de prendre 100% de largeur */
.kk-intro-actions > a.btn{
  display:inline-flex !important;
  width:auto !important;
  flex:0 0 auto !important;
  white-space:nowrap;
}

/* Sur mobile seulement : tu peux les laisser passer en colonne si tu veux */
@media (max-width:576px){
  .kk-intro-actions{
    flex-wrap:wrap !important;
  }
  .kk-intro-actions > a.btn{
    width:100% !important; /* retire cette ligne si tu les veux aussi côte-à-côte sur mobile */
  }
}