:root {
  --mint-50: #eefcf7;
  --mint-100: #d6f6ea;
  --mint-200: #b4ecd7;
  --mint-300: #7fdcba;
  --mint-400: #3ec89a;
  --mint-500: #22b884;
  --mint-600: #13996b;
  --aqua-50: #effbfb;
  --aqua-100: #d4f3f3;
  --aqua-200: #a9e4e6;
  --coral: #ff7a6c;
  --coral-soft: #ffb3a9;
  --sun: #ffd23f;
  --sun-soft: #ffe79a;
  --berry: #8b6bf0;
  --ink: #1d2a33;
  --ink-2: #3a4a55;
  --ink-3: #6a7c87;
  --paper: #ffffff;
  --cream: #fffaf1;
  --line: #e6efec;
  --shadow-sm: 0 2px 8px rgba(19,153,107,.08);
  --shadow-md: 0 10px 30px rgba(19,153,107,.12);
  --shadow-lg: 0 20px 50px rgba(19,153,107,.18);
  --shadow-coral: 0 14px 30px rgba(255,122,108,.35);
  --shadow-mint: 0 14px 30px rgba(34,184,132,.35);
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 32px;
  --radius-xl: 44px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { font-size: 14.4px; }
body {
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 85% -10%, #d9f5ec 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 30%, #e6f7f3 0%, transparent 60%),
    linear-gradient(180deg, #f2fbf7 0%, #ffffff 30%, #ffffff 100%);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.display { font-family: 'Quicksand', sans-serif; font-weight: 700; letter-spacing: -0.01em; }
.hand { font-family: 'Caveat', cursive; font-weight: 700; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

/* ---------- NAV ---------- */
.nav-wrap {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(180,236,215,.4);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-mark {
  width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
  display: grid; place-items: center;
  color: white; font-family: 'Quicksand', sans-serif; font-weight: 700;
  font-size: 22px;
  box-shadow: var(--shadow-mint);
  position: relative;
}
.brand-mark::after {
  content: ""; position: absolute; right: -4px; top: -4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--coral);
  border: 2px solid white;
}

/* Logo personnalisé (uploadé via Personnaliser → Identité du site) :
   affiché en lieu et place du bloc-lettre « C ». On garde une zone carrée
   arrondie de même gabarit + box-shadow pour préserver la cohérence visuelle.
   `object-fit: contain` pour ne jamais rogner le logo. */
.brand-logo {
  width: 44px; height: 44px;
  border-radius: 14px;
  object-fit: contain;
  background: white;
  box-shadow: var(--shadow-mint);
  display: block;
}
.brand-name { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 20px; line-height: 1; }
.brand-sub { font-size: 11px; color: var(--mint-600); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.nav-links { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; }
.nav-link {
  text-decoration: none; color: var(--ink-2); font-weight: 600;
  padding: 10px 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; line-height: 1.2; white-space: nowrap;
  transition: background .2s, color .2s; cursor: pointer;
}
.nav-link:hover { background: var(--mint-50); color: var(--mint-600); }
.nav-link.active, .nav-link.current-menu-item, .nav-link.current_page_item { background: var(--mint-100); color: var(--mint-600); }
.nav-link .dot-new { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px rgba(255,122,108,.18); }

.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-toggle {
  display: none;
  place-items: center;
  background: var(--mint-50); border: none;
  width: 44px; height: 44px; border-radius: 14px;
  color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s;
}
.nav-toggle:hover,
.nav-toggle[aria-expanded="true"] { background: var(--mint-100); color: var(--mint-600); }
.mobile-only { display: none !important; }
.btn {
  font-family: inherit; font-weight: 700; font-size: 15px;
  border: none; cursor: pointer;
  padding: 12px 22px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform .15s ease, box-shadow .2s ease, background .2s;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--mint-500), var(--mint-600)); color: white; box-shadow: var(--shadow-mint); }
.btn-primary:hover { box-shadow: 0 18px 34px rgba(34,184,132,.45); }
.btn-ghost { background: transparent; color: var(--ink); font-weight: 600; padding: 10px 16px; }
.btn-ghost:hover { background: var(--mint-50); }
.btn-coral { background: linear-gradient(135deg, #ff9485, var(--coral)); color: white; box-shadow: var(--shadow-coral); }
.btn-white { background: white; color: var(--ink); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.btn-white:hover { background: var(--mint-50); }
.btn-sm { padding: 8px 14px; font-size: 13px; }

.avatar-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sun), var(--coral));
  color: white; font-weight: 800;
  display: grid; place-items: center;
  border: 2px solid white; box-shadow: var(--shadow-sm); cursor: pointer; position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.avatar-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.avatar-btn--photo { background: var(--mint-50); }
.avatar-btn-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.avatar-btn-initial { line-height: 1; }
.avatar-btn .status {
  position: absolute; bottom: -2px; right: -2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--mint-500); border: 2px solid white;
  /* Le point "en ligne" doit rester visible par-dessus la photo. */
  z-index: 1;
}

/* ---------- HERO ---------- */
.hero { padding: 64px 0 120px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: white; border: 1px solid var(--mint-200);
  color: var(--mint-600); padding: 8px 14px; border-radius: 999px;
  font-weight: 700; font-size: 13px; box-shadow: var(--shadow-sm); margin-bottom: 22px;
}
.eyebrow .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--mint-500); box-shadow: 0 0 0 4px rgba(34,184,132,.22); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.25);} }

h1.hero-title { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 66px; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 22px; color: var(--ink); }
h1.hero-title .accent { color: var(--mint-600); position: relative; white-space: nowrap; }
h1.hero-title .accent svg { position: absolute; left: 0; right: 0; bottom: -10px; width: 100%; }
h1.hero-title .scribble { font-family: 'Caveat', cursive; font-weight: 700; color: var(--coral); font-size: 0.9em; margin-left: 6px; display: inline-block; transform: rotate(-3deg); }

.hero-sub { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 520px; margin: 0 0 32px; }
.hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.play-btn { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); font-weight: 700; }
.play-btn .circle { width: 50px; height: 50px; border-radius: 50%; background: white; display: grid; place-items: center; box-shadow: var(--shadow-sm); color: var(--mint-600); transition: transform .2s; }
.play-btn:hover .circle { transform: scale(1.08); }
.hero-stats { margin-top: 44px; display: flex; gap: 40px; }
.hero-stat .num { font-family: 'Quicksand'; font-weight: 700; font-size: 30px; color: var(--mint-600); }
.hero-stat .lbl { color: var(--ink-3); font-size: 13px; font-weight: 600; }

.hero-visual { position: relative; height: 560px; }
.blob {
  position: absolute; inset: 20px 20px 40px 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #c4f0de, #6fd3a8 60%, var(--mint-500));
  box-shadow: 0 30px 70px rgba(19,153,107,.28);
  overflow: hidden;
}
.blob::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: linear-gradient(180deg, #e4f8ef, #a9e1c6); }
.hero-photo {
  position: absolute; inset: 30px 30px 50px 70px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 14px, transparent 14px 28px),
    linear-gradient(180deg, #bbe7d1, #7acdad);
  display: grid; place-items: end center;
  /* overflow visible pour que les mascottes PNG « dépassent » joliment du
     cadre circulaire au lieu d'être rognées au niveau des pieds. */
  overflow: visible;
  border: 4px solid white; box-shadow: var(--shadow-lg);
}
/* Quand une image est présente, on masque le fond rayé (qui est un
   placeholder) pour que la mascotte flotte sur le blob.
   Double ceinture : classe PHP + :has() pour les navigateurs qui supportent. */
.hero-photo--has-image,
.hero-photo:has(img) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.hero-photo img {
  width: 112%; height: auto;
  max-height: 120%;
  object-fit: contain;
  /* Ancré en bas, légèrement sorti du cadre : effet mascotte qui « pose »
     sur le bas du blob avec les pieds qui dépassent un peu. */
  transform: translateY(6%);
  filter: drop-shadow(0 14px 18px rgba(19,153,107,.22));
  pointer-events: none;
}
.hero-photo .photo-label { font-family: 'JetBrains Mono', 'Courier New', monospace; background: rgba(255,255,255,.85); padding: 8px 14px; border-radius: 10px; font-size: 12px; color: var(--ink-2); text-align: center; margin-bottom: 40%; }

.float-badge {
  position: absolute; background: white; border-radius: 22px;
  padding: 14px 16px; box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 12px;
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.float-badge .emoji-circle { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: white; font-weight: 800; font-family: 'Quicksand'; }
.float-badge.b1 { top: 40px; left: -10px; animation-delay: -1s; }
.float-badge.b2 { top: 180px; right: -20px; animation-delay: -3s; }
.float-badge.b3 { bottom: 60px; left: 40px; animation-delay: -2s; }
.float-badge .lbl { font-weight: 800; font-size: 14px; color: var(--ink); }
.float-badge .sub { font-size: 11px; color: var(--ink-3); font-weight: 600; }

.sparkle { position: absolute; pointer-events: none; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 0%,100%{ opacity:.4; transform: scale(.9);} 50%{ opacity:1; transform: scale(1.15);} }

.quick-access { margin-top: -60px; position: relative; z-index: 2; }
.quick-card-row {
  background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 18px; display: grid; grid-template-columns: repeat(4,1fr); gap: 6px;
}
.quick-item {
  padding: 18px 20px; border-radius: 22px;
  text-decoration: none; color: var(--ink);
  display: flex; align-items: center; gap: 16px;
  transition: background .2s, transform .15s; cursor: pointer;
}
.quick-item:hover { background: var(--mint-50); transform: translateY(-2px); }
.quick-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: white; }
.quick-item .lbl { font-weight: 700; font-size: 16px; }
.quick-item .sub { font-size: 12px; color: var(--ink-3); font-weight: 600; }

section { position: relative; }
.section-head { max-width: 620px; margin: 0 0 40px; }
.section-tag {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--mint-600); font-family: 'Caveat'; font-size: 24px; font-weight: 700; margin-bottom: 6px;
}
.section-tag .line { width: 32px; height: 2px; background: var(--mint-400); border-radius: 2px; }
h2.section-title { font-family: 'Quicksand'; font-weight: 700; font-size: 44px; line-height: 1.1; margin: 0 0 14px; letter-spacing: -.015em; }
h2 .hl { color: var(--mint-600); }
.section-lead { color: var(--ink-2); font-size: 17px; line-height: 1.6; }

.news-section { padding: 80px 0 100px; background: linear-gradient(180deg, transparent, var(--aqua-50) 40%, var(--aqua-50) 60%, transparent); }
.news-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 36px; gap: 24px; flex-wrap: wrap; }
.news-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 10px 16px; border-radius: 999px; background: white; border: 1px solid var(--line);
  font-weight: 700; font-size: 13px; color: var(--ink-2); cursor: pointer; transition: all .2s;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip:hover { border-color: var(--mint-300); color: var(--mint-600); }
.chip.active { background: var(--ink); color: white; border-color: var(--ink); }
.chip .count { opacity: .6; font-size: 11px; }

.news-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 22px; grid-auto-rows: minmax(200px, auto); }
.news-card { background: white; border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; cursor: pointer; display: flex; flex-direction: column; }
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.news-card.featured { grid-row: span 2; background: linear-gradient(160deg, var(--mint-500), var(--mint-600)); color: white; padding: 28px; }
.news-card.accent { background: linear-gradient(160deg, #fff4c7, #ffe79a); }
.news-card.coral { background: linear-gradient(160deg, #ffd9d2, #ffb3a9); }
.news-card .media {
  aspect-ratio: 16/9; border-radius: 18px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.25) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, var(--mint-300), var(--mint-500));
  margin-bottom: 16px; display: grid; place-items: center; color: white;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  background-size: cover; background-position: center;
}
.news-card .media img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.news-card.featured .media { aspect-ratio: 4/3; margin-bottom: 20px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.2) 0 14px, transparent 14px 28px),
    linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.1));
}
.news-meta { display: flex; gap: 10px; align-items: center; font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.news-card.featured .news-meta { color: rgba(255,255,255,.8); }
.news-meta .badge { background: var(--mint-100); color: var(--mint-600); padding: 4px 10px; border-radius: 999px; letter-spacing: 0; text-transform: none; }
.news-card.featured .news-meta .badge { background: rgba(255,255,255,.22); color: white; }
.news-card.accent .news-meta .badge { background: rgba(0,0,0,.08); color: #7a5e12; }
.news-card.coral .news-meta .badge { background: rgba(0,0,0,.08); color: #7e342a; }
.news-card h3 { font-family: 'Quicksand'; font-weight: 700; font-size: 20px; line-height: 1.25; margin: 0 0 10px; }
.news-card.featured h3 { font-size: 28px; }
.news-card p { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin: 0 0 16px; flex: 1; }
.news-card.featured p { color: rgba(255,255,255,.9); font-size: 15px; }
.news-card .read-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; color: var(--mint-600); text-decoration: none; margin-top: auto; }
.news-card.featured .read-more { color: white; }
.news-card.accent .read-more { color: #7a5e12; }
.news-card.coral .read-more { color: #7e342a; }
.news-pin { position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; border-radius: 50%; background: var(--sun); display: grid; place-items: center; font-size: 14px; transform: rotate(12deg); box-shadow: 0 6px 14px rgba(0,0,0,.12); }

.testi-section { padding: 100px 0; }
.testi-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.testi-card { background: white; border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); position: relative; display: flex; flex-direction: column; gap: 16px; }
.testi-card.c1 { grid-column: span 4; background: linear-gradient(160deg, #eaf9f2, #d1f0e0); }
.testi-card.c2 { grid-column: span 5; margin-top: 40px; }
.testi-card.c3 { grid-column: span 3; background: var(--ink); color: white; }
.testi-card.c4 { grid-column: span 5; background: linear-gradient(160deg, #fff3d6, #ffe79a); }
.testi-card.c5 { grid-column: span 4; margin-top: 20px;}
.testi-card.c6 { grid-column: span 3; background: linear-gradient(160deg, #ffd9d2, #ffb3a9); margin-top: 20px; }

.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--sun), var(--coral)); color: white; font-weight: 800; display: grid; place-items: center; font-family: 'Quicksand'; border: 2px solid white; box-shadow: var(--shadow-sm); }
.testi-name { font-weight: 800; font-size: 15px; }
.testi-role { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.testi-card.c3 .testi-role { color: #a3b3bc; }
.testi-quote { font-family: 'Quicksand'; font-weight: 500; font-size: 17px; line-height: 1.5; flex: 1; }
.testi-card .stars { color: var(--sun); font-size: 14px; letter-spacing: 2px; }
.testi-hand { font-family: 'Caveat'; font-weight: 700; font-size: 28px; line-height: 1.1; color: var(--ink); }
.testi-card.c3 .testi-hand { color: white; }
.testi-card.c4 .testi-hand { color: #6d5720; }

.quote-mark { position: absolute; top: 16px; right: 20px; font-family: 'Quicksand'; font-weight: 700; font-size: 60px; line-height: 1; color: rgba(0,0,0,.08); }
.testi-card.c3 .quote-mark { color: rgba(255,255,255,.15); }

.testi-summary { grid-column: span 12; display: flex; align-items: center; justify-content: space-between; background: white; border-radius: var(--radius-lg); padding: 24px 32px; box-shadow: var(--shadow-sm); margin-top: 10px; flex-wrap: wrap; gap: 16px; }
.testi-summary .score { font-family: 'Quicksand'; font-weight: 700; font-size: 56px; color: var(--mint-600); }
.testi-summary .score small { font-size: 20px; color: var(--ink-3); font-weight: 500; }
.stars-row { color: var(--sun); font-size: 22px; letter-spacing: 4px; }

.join-section { padding: 100px 0 120px; background: linear-gradient(180deg, transparent, #e7f7f0 50%, transparent); position: relative; }
.plan-toggle { display: inline-flex; background: white; padding: 6px; border-radius: 999px; border: 1px solid var(--line); gap: 4px; margin-bottom: 36px; }
.plan-toggle button { border: none; background: transparent; cursor: pointer; padding: 10px 20px; border-radius: 999px; font-family: inherit; font-weight: 700; font-size: 14px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 8px; transition: all .2s; }
.plan-toggle button.active { background: var(--ink); color: white; }
.plan-toggle .save { background: var(--sun); color: var(--ink); padding: 2px 8px; border-radius: 999px; font-size: 11px; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plan { background: white; border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); position: relative; display: flex; flex-direction: column; border: 2px solid transparent; transition: transform .2s, box-shadow .2s, border-color .2s; }
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.plan.popular { background: linear-gradient(170deg, var(--mint-500), var(--mint-600)); color: white; transform: scale(1.04); }
.plan.popular:hover { transform: scale(1.04) translateY(-6px); }
.plan-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--sun); color: var(--ink); padding: 6px 14px; border-radius: 999px; font-weight: 800; font-size: 12px; letter-spacing: .04em; }
.plan-head .em { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 28px; margin-bottom: 14px; background: var(--mint-100); }
.plan.popular .plan-head .em { background: rgba(255,255,255,.2); }
.plan-name { font-family: 'Quicksand'; font-weight: 700; font-size: 22px; margin-bottom: 6px; }
.plan-desc { font-size: 14px; color: var(--ink-3); margin-bottom: 24px; line-height: 1.4; }
.plan.popular .plan-desc { color: rgba(255,255,255,.85); }
.plan-price { font-family: 'Quicksand'; font-weight: 700; font-size: 48px; line-height: 1; display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.plan-price .currency { font-size: 24px; }
.plan-price .per { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.plan.popular .plan-price .per { color: rgba(255,255,255,.85); }
.plan-note { font-size: 12px; color: var(--ink-3); margin-bottom: 24px; }
.plan.popular .plan-note { color: rgba(255,255,255,.75); }
.plan-features { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.plan-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; }
.plan-features .check { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--mint-100); color: var(--mint-600); display: grid; place-items: center; font-size: 12px; margin-top: 1px; }
.plan.popular .plan-features .check { background: rgba(255,255,255,.22); color: white; }
.plan-features .x { background: #f3e7e7; color: #c26767; }
.plan-cta { width: 100%; justify-content: center; }
.plan .plan-cta.ghost { background: var(--mint-50); color: var(--mint-600); }
.plan.popular .plan-cta { background: white; color: var(--mint-600); }

.join-footer-strip { margin-top: 40px; background: white; border-radius: var(--radius-lg); padding: 28px 32px; box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.join-footer-strip .left { display: flex; align-items: center; gap: 20px; }
.join-footer-strip h4 { font-family: 'Quicksand'; font-weight: 700; font-size: 20px; margin: 0 0 4px; }
.join-footer-strip p { margin: 0; font-size: 14px; color: var(--ink-3); }
.join-footer-strip .icon-coral { width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(135deg, #ff9485, var(--coral)); display: grid; place-items: center; color: white; box-shadow: var(--shadow-coral); }

.cta-banner { margin: 60px 0 100px; }
.cta-inner { background: linear-gradient(135deg, #1a2a35, #2a4555); border-radius: var(--radius-lg); padding: 50px 60px; color: white; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: center; }
.cta-inner::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(34,184,132,.5), transparent 70%); top: -100px; right: -100px; }
.cta-inner h3 { font-family: 'Quicksand'; font-weight: 700; font-size: 40px; line-height: 1.1; margin: 0 0 12px; }
.cta-inner .hl { color: var(--mint-400); }
.cta-inner p { color: rgba(255,255,255,.75); margin: 0 0 24px; font-size: 16px; line-height: 1.55; max-width: 420px; }
.cta-inner .input-row { display: flex; gap: 8px; padding: 6px; background: rgba(255,255,255,.08); border-radius: 999px; max-width: 460px; border: 1px solid rgba(255,255,255,.12); }
.cta-inner input { flex: 1; background: transparent; border: none; color: white; padding: 10px 16px; font: inherit; outline: none; min-width: 0; }
.cta-inner input::placeholder { color: rgba(255,255,255,.5); }
.cta-visual { position: relative; height: 260px; }
.cta-card { position: absolute; background: white; color: var(--ink); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow-lg); display: flex; gap: 12px; align-items: center; width: 230px; }
.cta-card .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: white; }
.cta-card h5 { margin: 0 0 2px; font-family: 'Quicksand'; font-weight: 700; font-size: 14px; }
.cta-card p { color: var(--ink-3); font-size: 12px; margin: 0; }
.cta-card.cc1 { top: 0; right: 100px; animation: floaty 6s ease-in-out infinite; }
.cta-card.cc2 { top: 90px; right: 0; animation: floaty 6s ease-in-out -2s infinite; }
.cta-card.cc3 { top: 180px; right: 60px; animation: floaty 6s ease-in-out -4s infinite; }

footer.site-footer { background: #0f1a22; color: #a3b3bc; padding: 80px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 60px; }
footer.site-footer h5 { color: white; font-family: 'Quicksand'; font-weight: 700; font-size: 14px; margin: 0 0 18px; text-transform: uppercase; letter-spacing: .1em; }
footer.site-footer a { color: #a3b3bc; text-decoration: none; font-size: 14px; display: block; padding: 6px 0; transition: color .2s; }
footer.site-footer a:hover { color: var(--mint-400); }
footer.site-footer .brand-name { color: white; }
footer.site-footer p { line-height: 1.6; font-size: 14px; max-width: 320px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; flex-wrap: wrap; gap: 12px; }
.footer-socials { display: flex; gap: 10px; }
.footer-socials a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.06); display: grid; place-items: center; }
.footer-socials a:hover { background: var(--mint-500); color: white; }

.fab { position: fixed; bottom: 24px; right: 24px; background: white; border-radius: 999px; padding: 10px 14px 10px 10px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; cursor: pointer; z-index: 40; transition: transform .2s; border: none; font: inherit; }
.fab:hover { transform: translateY(-2px); }
.fab .fab-ic { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--mint-500), var(--mint-600)); color: white; display: grid; place-items: center; }
.fab .fab-txt { font-weight: 800; font-size: 14px; color: var(--ink); padding-right: 6px; }
.fab .fab-sub { font-size: 11px; color: var(--ink-3); display: block; font-weight: 600; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(15,26,34,.5); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 100; }
.modal-backdrop.open { display: flex; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal { background: white; border-radius: var(--radius-lg); padding: 36px; width: 440px; max-width: 92vw; box-shadow: var(--shadow-lg); animation: slideUp .3s ease; }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal h3 { font-family: 'Quicksand'; font-weight: 700; font-size: 26px; margin: 0 0 6px; }
.modal .sub { color: var(--ink-3); margin-bottom: 24px; }
.modal label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; color: var(--ink-2); }
.modal input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); font: inherit; outline: none; margin-bottom: 16px; }
.modal input:focus { border-color: var(--mint-400); box-shadow: 0 0 0 3px rgba(34,184,132,.15); }
.modal .role-tabs { display: flex; gap: 6px; background: var(--mint-50); padding: 4px; border-radius: 999px; margin-bottom: 20px; }
.modal .role-tabs button { flex: 1; padding: 10px; border: none; background: transparent; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; color: var(--ink-3); }
.modal .role-tabs button.active { background: white; color: var(--mint-600); box-shadow: var(--shadow-sm); }
.modal .close { position: absolute; top: 16px; right: 16px; background: var(--mint-50); border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; color: var(--ink-2); }
.modal-wrap { position: relative; }

/* ---------- CHAT CONTACT MODAL ---------- */
.chat-modal { width: 480px; padding: 28px; position: relative; }
.chat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding-right: 44px; }
.chat-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--mint-400), var(--mint-600)); color: white; font-weight: 800; font-size: 20px; display: grid; place-items: center; font-family: 'Quicksand'; flex-shrink: 0; }
.chat-thread { background: var(--mint-50); border-radius: 16px; padding: 14px; margin-bottom: 18px; max-height: 180px; overflow-y: auto; }
.chat-bubble { padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.4; max-width: 88%; margin-bottom: 8px; }
.chat-bubble.bot { background: white; color: var(--ink-2); border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); }
.chat-bubble.user { background: var(--mint-500); color: white; border-bottom-right-radius: 4px; margin-left: auto; }
.chat-bubble:last-child { margin-bottom: 0; }
.chat-form select,
.chat-form textarea,
.chat-form input[type="text"],
.chat-form input[type="email"] { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); font: inherit; outline: none; margin-bottom: 12px; background: white; }
.chat-form textarea { resize: vertical; min-height: 90px; font-family: inherit; }
.chat-form select:focus,
.chat-form textarea:focus,
.chat-form input:focus { border-color: var(--mint-400); box-shadow: 0 0 0 3px rgba(34,184,132,.15); }
.chat-form label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; color: var(--ink-2); }
.chat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chat-status { min-height: 20px; font-size: 13px; margin: 4px 0 10px; color: var(--ink-3); }
.chat-status.error { color: #c2410c; }
.chat-status.success { color: var(--mint-600); font-weight: 700; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- GENERIC PAGES ---------- */
.page-hero { padding: 60px 0 40px; text-align: center; }
.page-hero h1 { font-family: 'Quicksand'; font-weight: 700; font-size: 48px; margin: 0 0 12px; letter-spacing: -.015em; }
.page-hero p { color: var(--ink-2); font-size: 17px; max-width: 620px; margin: 0 auto; }

.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 40px 0 100px; }
.card-item { background: white; border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; text-decoration: none; color: var(--ink); }
.card-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-item .thumb { aspect-ratio: 16/9; border-radius: 18px; margin-bottom: 16px; background: linear-gradient(135deg, var(--mint-300), var(--mint-500)); overflow: hidden; }
.card-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-item h3 { font-family: 'Quicksand'; font-weight: 700; font-size: 20px; margin: 0 0 10px; }
.card-item .excerpt { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin: 0 0 14px; flex: 1; }
.card-item .tag { display: inline-block; background: var(--mint-100); color: var(--mint-600); padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; margin-bottom: 10px; }

.single-wrap { max-width: 820px; margin: 0 auto; padding: 40px 28px 100px; }
.single-wrap .meta { color: var(--ink-3); font-size: 13px; font-weight: 600; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .08em; }
.single-wrap h1 { font-family: 'Quicksand'; font-weight: 700; font-size: 44px; line-height: 1.1; margin: 0 0 20px; }
.single-wrap .lead { font-size: 19px; color: var(--ink-2); line-height: 1.55; margin: 0 0 28px; }
.single-wrap .content { font-size: 17px; line-height: 1.7; color: var(--ink); }
.single-wrap .content h2 { font-family: 'Quicksand'; font-size: 30px; margin: 40px 0 12px; }
.single-wrap .content h3 { font-family: 'Quicksand'; font-size: 22px; margin: 28px 0 10px; }
.single-wrap .content img { max-width: 100%; border-radius: var(--radius); margin: 24px 0; }

.gated-notice { max-width: 620px; margin: 40px auto 100px; background: white; border-radius: var(--radius-lg); padding: 40px; text-align: center; box-shadow: var(--shadow-sm); }
.gated-notice h2 { font-family: 'Quicksand'; margin: 0 0 10px; }
.gated-notice p { color: var(--ink-2); margin: 0 0 22px; }

/* ---------- Daily quiz home section ---------- */
.daily-quiz-home { margin: 20px auto 10px; position: relative; z-index: 2; }

/* Quand la carte "Quiz du jour" est présente sur la home, on annule la marge
 * négative par défaut de .quick-access (prévue pour chevaucher le bas du hero)
 * afin que la bande blanche des accès rapides ne recouvre plus la carte violette.
 */
.daily-quiz-home + .quick-access { margin-top: 24px; }
.daily-quiz-card {
  display: flex; align-items: center; gap: 22px;
  background: linear-gradient(135deg, #8b6bf0 0%, #5a3ec8 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: 0 18px 40px -12px rgba(139, 107, 240, 0.45);
  position: relative;
  overflow: hidden;
}
.daily-quiz-card::after {
  content: '';
  position: absolute; right: -60px; top: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.daily-quiz-badge {
  flex-shrink: 0;
  width: 64px; height: 64px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  backdrop-filter: blur(4px);
}
.daily-quiz-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.daily-quiz-eyebrow {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 6px;
}
.daily-quiz-title {
  font-family: 'Quicksand', sans-serif; font-weight: 700;
  font-size: 22px; margin-bottom: 4px;
}
.daily-quiz-sub { font-size: 14px; color: rgba(255, 255, 255, 0.88); }
.daily-quiz-sub b { color: #fff; }
.daily-quiz-cta {
  flex-shrink: 0; z-index: 1;
  background: #fff; color: #5a3ec8 !important;
  box-shadow: 0 6px 18px -4px rgba(0,0,0,0.2);
}
.daily-quiz-cta:hover { transform: translateY(-1px); background: #f4eefd; }

@media (max-width: 640px) {
  .daily-quiz-card { flex-direction: column; align-items: flex-start; text-align: left; padding: 22px; }
  .daily-quiz-cta { width: 100%; justify-content: center; }
}

/* ---------- Shortcode [crol_quiz] : carte dans une leçon / fiche ---------- */
.crol-quiz-card {
  display: flex; align-items: center; gap: 18px;
  background: linear-gradient(135deg, var(--mint-50), #fff);
  border: 1px solid var(--mint-200);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin: 28px 0;
  box-shadow: var(--shadow-sm);
}
.crol-quiz-card-icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.crol-quiz-card-body { flex: 1; min-width: 0; }
.crol-quiz-card-eyebrow { font-size: 12px; font-weight: 700; color: var(--mint-600); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.crol-quiz-card-title { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 18px; color: var(--ink); margin-bottom: 2px; }
.crol-quiz-card-sub { color: var(--ink-3); font-size: 14px; }
.crol-quiz-card-cta { flex-shrink: 0; }

.crol-quiz-inline {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--mint-50);
  border: 1px solid var(--mint-200);
  border-radius: 999px;
  padding: 4px 12px;
  color: var(--mint-600);
  font-weight: 700;
  text-decoration: none;
  transition: background .15s;
}
.crol-quiz-inline:hover { background: var(--mint-100); }
.crol-quiz-inline-count { color: var(--ink-3); font-weight: 500; font-size: 13px; }

@media (max-width: 640px) {
  .crol-quiz-card { flex-direction: column; align-items: flex-start; text-align: left; }
  .crol-quiz-card-cta { width: 100%; justify-content: center; }
}

/* ---------- QUIZ ---------- */
.quiz-box { background: white; border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm); margin: 24px auto; max-width: 720px; }
.quiz-box h2 { font-family: 'Quicksand'; margin: 0 0 20px; }
.quiz-q { margin-bottom: 24px; }
.quiz-q .q-text { font-weight: 700; font-size: 17px; margin-bottom: 12px; }
.quiz-q label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--line); cursor: pointer; margin-bottom: 8px; font-weight: 600; transition: all .2s; }
.quiz-q label:hover { border-color: var(--mint-300); background: var(--mint-50); }
.quiz-q input[type=radio] { accent-color: var(--mint-500); }
.quiz-q label.picked { border-color: var(--mint-500); background: var(--mint-50); }
.quiz-q label.correct { border-color: var(--mint-500); background: #e7f8ef; }
.quiz-q label.wrong { border-color: var(--coral); background: #ffefec; }
.quiz-q input[type=radio]:disabled { cursor: default; }
.quiz-explanation { margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; background: var(--mint-50); color: var(--ink-2); border-left: 4px solid var(--mint-500); }
.quiz-explanation.ok { background: #e7f8ef; border-left-color: var(--mint-600); }
.quiz-explanation.ko { background: #fff3ee; border-left-color: var(--coral); color: var(--ink); }
.quiz-explanation strong { margin-right: 4px; }
.quiz-result { text-align: center; padding: 30px; background: var(--mint-50); border-radius: var(--radius); margin-top: 20px; }
.quiz-result .score-big { font-family: 'Quicksand'; font-size: 48px; color: var(--mint-600); font-weight: 700; }

/* Quiz — image d'illustration */
.quiz-q .q-image { display: block; max-width: 100%; max-height: 260px; width: auto; height: auto; border-radius: 14px; margin: 0 0 14px; box-shadow: var(--shadow-sm); background: var(--mint-50); }

/* Quiz — réponse libre (texte) */
.quiz-q .q-text-input { width: 100%; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--line); background: white; font: inherit; font-weight: 600; color: var(--ink); transition: border-color .2s, background .2s, box-shadow .2s; }
.quiz-q .q-text-input:focus { outline: none; border-color: var(--mint-500); background: var(--mint-50); box-shadow: 0 0 0 4px rgba(86, 191, 140, 0.15); }
.quiz-q .q-text-input::placeholder { color: var(--ink-3); font-weight: 500; }
.quiz-q .q-text-input:disabled { cursor: default; opacity: 1; }
.quiz-q .q-text-input.correct { border-color: var(--mint-500); background: #e7f8ef; color: var(--ink); }
.quiz-q .q-text-input.wrong { border-color: var(--coral); background: #ffefec; color: var(--ink); }
.quiz-q .q-text-expected { margin-top: 8px; padding: 10px 14px; border-radius: 12px; font-size: 14px; background: #fff3ee; border-left: 4px solid var(--coral); color: var(--ink-2); }
.quiz-q .q-text-expected b { color: var(--ink); }

.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 0 0 32px; }
.stat-card { background: white; border-radius: var(--radius-lg); padding: 22px 18px; box-shadow: var(--shadow-sm); text-align: center; }
.stat-card .stat-num { font-family: 'Quicksand'; font-weight: 700; font-size: 34px; color: var(--mint-600); line-height: 1; margin-bottom: 6px; }
.stat-card .stat-lbl { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0 0 36px; }
.chart-card { position: relative; background: white; border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.chart-card h3 { font-family: 'Quicksand'; font-weight: 700; font-size: 18px; margin: 0 0 4px; color: var(--ink); }
.chart-card .chart-sub { font-size: 13px; color: var(--ink-3); margin: 0 0 16px; }
.chart-card canvas { max-width: 100%; }

/* Chart filters */
.chart-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  background: white;
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
  margin: 0 0 20px;
}
.chart-filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.chart-filter-label {
  font-family: 'Quicksand';
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.chart-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--mint-50);
  padding: 4px;
  border-radius: 999px;
}
.chart-filter-pills button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--ink-2);
  font-family: 'Quicksand';
  font-weight: 700;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
  line-height: 1;
}
.chart-filter-pills button:hover {
  background: var(--mint-100);
  color: var(--mint-600);
}
.chart-filter-pills button.active,
.chart-filter-pills button[aria-selected="true"],
.chart-filter-pills--multi button[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
  color: white;
  box-shadow: var(--shadow-sm);
}
.chart-filter-pills button:focus-visible {
  outline: 2px solid var(--mint-500);
  outline-offset: 2px;
}
.chart-filter-pills--multi { padding: 4px; }
.chart-filter-summary {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 600;
}
.chart-empty {
  position: absolute;
  inset: auto 24px 24px 24px;
  top: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 600;
  background: var(--mint-50);
  border: 1px dashed var(--mint-200);
  border-radius: var(--radius);
  padding: 20px;
}
.chart-empty[hidden] { display: none; }
.progress-section-h { font-family: 'Quicksand'; font-weight: 700; font-size: 22px; margin: 40px 0 16px; color: var(--ink); }
.matiere-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.matiere-card { background: white; border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.matiere-card .matiere-name { font-family: 'Quicksand'; font-weight: 700; font-size: 18px; margin-bottom: 12px; color: var(--ink); }
.matiere-card .matiere-stats { display: flex; gap: 14px; margin-bottom: 12px; }
.matiere-card .matiere-stats > div { flex: 1; }
.matiere-card .matiere-stats strong { display: block; font-family: 'Quicksand'; font-weight: 700; font-size: 22px; color: var(--mint-600); }
.matiere-card .matiere-stats span { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.matiere-card .matiere-bar { background: var(--mint-50); height: 8px; border-radius: 999px; overflow: hidden; }
.matiere-card .matiere-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--mint-400), var(--mint-600)); border-radius: 999px; transition: width .4s ease; }
.progress-table { width: 100%; border-collapse: collapse; background: white; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 28px; }
.progress-table th, .progress-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14px; }
.progress-table th { background: var(--mint-50); font-family: 'Quicksand'; font-weight: 700; color: var(--ink-2); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.progress-table tr:last-child td { border-bottom: none; }
.progress-table .score-cell { font-weight: 800; color: var(--mint-600); }
.progress-section-sub { color: var(--ink-3); font-size: 14px; margin: -8px 0 16px; }

/* Ligne "quiz bouclé sans faute" : liseré or subtil. */
.progress-table tr.row-perfect td:first-child { box-shadow: inset 3px 0 0 #f0b429; }
.progress-table tr.row-perfect { background: linear-gradient(90deg, #fff9e8, #ffffff 40%); }

/* Table historique complet. */
.progress-table-wrap { overflow-x: auto; margin-bottom: 80px; border-radius: var(--radius-lg); }
.progress-table--history { margin-bottom: 0; }
.progress-table--history td { vertical-align: middle; }
.progress-table--history .history-date { white-space: nowrap; color: var(--ink-2); font-weight: 700; }
.progress-table--history .history-time { display: block; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.progress-table--history .history-ratio { min-width: 180px; }
.progress-table--history .history-pct { display: inline-block; min-width: 40px; font-weight: 800; color: var(--ink); margin-right: 10px; }
.progress-table--history .history-bar { display: inline-block; width: 120px; height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; vertical-align: middle; }
.progress-table--history .history-bar > span { display: block; height: 100%; border-radius: inherit; transition: width .3s ease; }
.progress-table--history .bar--perfect { background: linear-gradient(90deg, #f0b429, #ffd23f); }
.progress-table--history .bar--great   { background: linear-gradient(90deg, var(--mint-500), var(--mint-600)); }
.progress-table--history .bar--good    { background: linear-gradient(90deg, var(--mint-400), var(--mint-500)); }
.progress-table--history .bar--mid     { background: linear-gradient(90deg, #ffd23f, #ffb020); }
.progress-table--history .bar--low     { background: linear-gradient(90deg, #ff9485, var(--coral)); }
.progress-table--history .history-retry { text-align: right; }

/* Badge "quiz bouclé" (scores parfaits) — ton doré chaleureux, pas bling. */
.badge-perfect {
  display: inline-flex; align-items: center; gap: 4px;
  vertical-align: middle;
  padding: 2px 10px;
  margin-left: 8px;
  background: linear-gradient(135deg, #ffe08a, #f0b429);
  color: #6a4a00;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.badge-perfect--sm { padding: 1px 6px; font-size: 12px; letter-spacing: 0; text-transform: none; margin-left: 6px; }

/* Bouton xs (utilisé dans l'historique). */
.btn-xs { padding: 4px 10px; font-size: 12px; border-radius: 999px; font-weight: 700; }

/* Résultat de quiz "parfait" — même couleur de fond dorée que le badge. */
.quiz-result--perfect {
  background: linear-gradient(135deg, #fff6d6 0%, #fff3b8 100%) !important;
  border: 1px solid #f0b429;
}
.quiz-result--perfect .score-big { color: #a36a00 !important; }
.quiz-result-badge {
  display: inline-block;
  padding: 6px 16px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #ffe08a, #f0b429);
  color: #6a4a00;
  font-weight: 800;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .04em;
  box-shadow: 0 2px 6px rgba(240, 180, 41, .35);
}
.quiz-result-msg { font-weight: 700; margin-top: 8px; color: var(--ink-2); }

/* Bannières pré-quiz sur la page single-quiz. */
.quiz-perfect-banner {
  display: flex; gap: 14px; align-items: center;
  margin: 18px 0 22px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #fff6d6 0%, #fff3b8 100%);
  border: 1px solid #f0b429;
  color: #6a4a00;
}
.quiz-perfect-banner-icon { font-size: 28px; line-height: 1; }
.quiz-perfect-banner-content { flex: 1; min-width: 0; }
.quiz-perfect-banner-title { font-family: 'Quicksand', sans-serif; font-weight: 800; font-size: 17px; margin-bottom: 2px; color: #6a4a00; }
.quiz-perfect-banner p { margin: 0; color: #5a3a00; font-size: 14px; line-height: 1.5; }

.quiz-retry-banner {
  margin: 14px 0 22px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--mint-50);
  border: 1px dashed var(--mint-400);
  color: var(--ink-2);
  font-size: 14px;
}
.quiz-retry-banner b { color: var(--mint-600); }

@media (max-width: 640px) {
  .progress-table--history .history-bar { width: 80px; }
  .progress-table--history .history-ratio { min-width: 0; }
  .progress-table--history .history-retry { display: none; }
  .quiz-perfect-banner { flex-direction: column; text-align: center; align-items: stretch; }
}

@media (max-width: 1200px) {
  h1.hero-title { font-size: 56px; }
  h2.section-title { font-size: 38px; }
}

/* Tablet / narrow — hamburger menu, stacked hero, 1-col grids */
@media (max-width: 980px) {
  .nav { height: 68px; position: relative; }
  .nav-toggle { display: grid; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: white; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 14px 20px 20px; border-top: 1px solid var(--line);
    box-shadow: var(--shadow-md);
  }
  .nav-links.open { display: flex; }
  .nav-link { font-size: 16px; padding: 14px 16px; border-radius: 14px; }
  .mobile-only { display: inline-flex !important; }
  .nav-cta .btn-ghost { display: none; }

  .hero { padding: 40px 0 80px; }
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  h1.hero-title { font-size: 48px; }
  .hero-sub { font-size: 17px; max-width: none; }
  .hero-visual { height: 420px; max-width: 480px; margin: 0 auto; width: 100%; }
  .blob { inset: 20px 20px 40px 40px; }
  .hero-photo { inset: 30px 30px 50px 50px; }
  .hero-stats { gap: 28px; flex-wrap: wrap; margin-top: 32px; }

  .quick-access { margin-top: -40px; }
  .daily-quiz-home + .quick-access { margin-top: 20px; }
  .quick-card-row { grid-template-columns: repeat(2, 1fr); }

  .news-grid, .archive-grid, .plans, .footer-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid .stat-card:nth-child(n+4) { grid-column: span 1; }
  .chart-grid { grid-template-columns: 1fr; }
  .chart-filters { gap: 10px 14px; padding: 14px 16px; }
  .chart-filter-summary { margin-left: 0; width: 100%; }
  .matiere-grid { grid-template-columns: repeat(2, 1fr); }
  .news-card.featured { grid-row: auto; }
  .news-card.featured .media { aspect-ratio: 16/9; }
  .news-top { flex-direction: column; align-items: flex-start; }

  .testi-grid > * { grid-column: span 12 !important; margin-top: 0 !important; }
  .testi-summary { flex-direction: column; text-align: center; align-items: center; }
  .testi-summary > div:first-child { flex-direction: column; gap: 10px !important; text-align: center; }

  .plan.popular { transform: none; }
  .plan.popular:hover { transform: translateY(-6px); }
  .plan { padding: 28px; }
  .join-footer-strip { flex-direction: column; align-items: flex-start; }

  .cta-inner { grid-template-columns: 1fr; padding: 36px 28px; }
  .cta-visual { display: none; }

  .section-head { max-width: none; }
}

/* Phone */
@media (max-width: 640px) {
  .container { padding: 0 18px; }

  .brand-name { font-size: 18px; }
  .brand-sub { display: none; }
  .brand-mark { width: 40px; height: 40px; font-size: 20px; border-radius: 12px; }

  .hero { padding: 28px 0 60px; }
  h1.hero-title { font-size: 34px; line-height: 1.1; }
  h1.hero-title .accent svg { display: none; }
  .hero-sub { font-size: 16px; margin-bottom: 24px; }
  .hero-ctas { gap: 10px; }
  .play-btn small { display: none !important; }
  .hero-visual { height: 340px; max-width: 360px; width: 100%; }
  .blob { inset: 10px 10px 30px 30px; }
  .hero-photo { inset: 20px 20px 40px 40px; }
  .float-badge { padding: 10px 12px; gap: 8px; border-radius: 16px; }
  .float-badge .emoji-circle { width: 36px; height: 36px; font-size: 18px; }
  .float-badge .lbl { font-size: 12px; }
  .float-badge .sub { font-size: 10px; }
  .float-badge.b1 { top: 16px; left: 0; }
  .float-badge.b2 { top: 140px; right: 0; }
  .float-badge.b3 { bottom: 36px; left: 12px; }
  .hero-stat .num { font-size: 24px; }
  .hero-stats { gap: 20px; margin-top: 26px; }

  .quick-card-row { grid-template-columns: 1fr; padding: 14px; }
  .quick-access { margin-top: -30px; }
  .daily-quiz-home + .quick-access { margin-top: 16px; }
  .quick-item { padding: 14px 16px; gap: 12px; }
  .quick-icon { width: 44px; height: 44px; }

  h2.section-title { font-size: 28px; }
  .section-tag { font-size: 20px; }
  .section-lead { font-size: 15px; }
  .section-head { margin-bottom: 28px; }

  .news-section, .testi-section { padding: 60px 0; }
  .join-section { padding: 60px 0 80px; }
  .chip { padding: 8px 12px; font-size: 12px; }

  .news-card { padding: 18px; }
  .news-card.featured { padding: 22px; }
  .news-card h3 { font-size: 18px; }
  .news-card.featured h3 { font-size: 22px; }

  .testi-card { padding: 22px; gap: 12px; border-radius: 24px; }
  .testi-quote { font-size: 15px; }
  .testi-hand { font-size: 22px; }
  .testi-summary { padding: 22px; border-radius: 24px; }
  .testi-summary .score { font-size: 42px; }
  .stars-row { font-size: 18px; }

  .plan { padding: 24px; border-radius: 24px; }
  .plan-price { font-size: 38px; }
  .plan-name { font-size: 20px; }
  .join-footer-strip { padding: 20px; border-radius: 24px; }
  .join-footer-strip .left { flex-direction: column; align-items: flex-start; gap: 14px; }

  .cta-banner { margin: 40px 0 60px; }
  .cta-inner { padding: 28px 22px; border-radius: 24px; }
  .cta-inner h3 { font-size: 28px; }
  .cta-inner .input-row { flex-direction: column; background: transparent; border: none; padding: 0; gap: 10px; max-width: none; }
  .cta-inner input { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 14px 16px; }
  .cta-inner .btn { width: 100%; justify-content: center; }

  footer.site-footer { padding: 60px 0 30px; }
  .footer-grid { gap: 28px; margin-bottom: 36px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .fab { padding: 8px 12px 8px 8px; bottom: 14px; right: 14px; }
  .fab .fab-ic { width: 34px; height: 34px; }
  .fab .fab-txt { font-size: 13px; }
  .fab .fab-sub { font-size: 10px; }

  .modal { padding: 26px 22px; border-radius: 24px; }
  .modal h3 { font-size: 22px; }

  .single-wrap { padding: 30px 0 60px; }
  .single-wrap h1 { font-size: 28px; }
  .page-hero { padding: 40px 0 20px; }
  .page-hero h1 { font-size: 30px; }
  .gated-notice { padding: 28px 22px; border-radius: 24px; }

  .quiz-box { padding: 24px 20px; border-radius: 24px; }
  .progress-table th, .progress-table td { padding: 10px 12px; font-size: 13px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .matiere-grid { grid-template-columns: 1fr; }
  .stat-card .stat-num { font-size: 28px; }
  .chart-card { padding: 18px; }
  .chart-filter-pills button { padding: 6px 11px; font-size: 12px; }
  .chart-filter-label { font-size: 11px; }
  .chart-empty { inset: auto 16px 16px 16px; top: 58px; padding: 14px; font-size: 13px; }
}

/* ========== AUTH (connexion / inscription / compte / reset) ========== */
.auth-page {
  padding: 60px 0 100px;
  min-height: 70vh;
}
.auth-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 36px;
  align-items: start;
}
.auth-container--wide {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 380px);
}
.auth-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 40px 44px;
}
.auth-card--narrow { max-width: 520px; margin: 0 auto; }
.auth-head { margin-bottom: 24px; }
.auth-head h1 {
  font-family: 'Quicksand', sans-serif;
  font-size: 34px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.auth-head .sub { color: var(--ink-3); margin: 0; }
.auth-hl {
  background: linear-gradient(180deg, transparent 62%, var(--sun-soft) 62%);
  padding: 0 4px;
}
.auth-form { display: flex; flex-direction: column; gap: 6px; }
.auth-form label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  margin-top: 14px;
}
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form select,
.auth-form textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  transition: border-color .15s, box-shadow .15s;
}
.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
  outline: none;
  border-color: var(--mint-400);
  box-shadow: 0 0 0 4px rgba(62,200,154,.18);
}
.auth-hint { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.auth-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1.5;
}
.auth-check input[type="checkbox"] {
  margin: 3px 0 0;
  width: 18px; height: 18px;
  accent-color: var(--mint-500);
  flex-shrink: 0;
}
.auth-check a { color: var(--mint-600); font-weight: 700; text-decoration: underline; }
.auth-req { color: var(--coral); font-weight: 700; font-size: 12px; }
.auth-submit {
  width: 100%;
  justify-content: center;
  margin-top: 18px;
}
.auth-status {
  min-height: 20px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
}
.auth-status.error   { color: var(--coral); }
.auth-status.success { color: var(--mint-600); }
.auth-alert {
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 18px;
}
.auth-alert.success { background: var(--mint-50);  color: var(--mint-600); border: 1px solid var(--mint-200); }
.auth-alert.error   { background: #fef2f0;         color: #b8372a;         border: 1px solid var(--coral-soft); }
.auth-alert.warn    { background: #fff8e1;         color: #8a6200;         border: 1px solid #ffe08a; }

/* Alerte "vérifie ton email" — layout en 2 colonnes (message + actions). */
.auth-alert-verify {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 18px;
  padding: 14px 18px;
  font-weight: 500;
  line-height: 1.5;
}
.auth-alert-verify .auth-alert-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 280px;
  min-width: 0;
}
.auth-alert-verify .auth-alert-msg b { font-weight: 800; }
.auth-alert-verify .auth-alert-emoji {
  font-size: 22px;
  line-height: 1.2;
  flex-shrink: 0;
}
.auth-alert-verify .auth-alert-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.auth-alert-verify .auth-status-inline {
  font-size: 13px;
  font-weight: 600;
}
@media (max-width: 540px) {
  .auth-alert-verify .auth-alert-actions { width: 100%; }
  .auth-alert-verify .auth-alert-actions .btn { flex: 1 1 auto; }
}
.auth-links {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 14px;
  color: var(--ink-3);
}
.auth-links a { color: var(--mint-600); font-weight: 700; text-decoration: none; margin: 0 6px; }
.auth-links a:hover { text-decoration: underline; }
.auth-fineprint {
  margin-top: 16px;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.6;
}
.auth-fineprint a { color: var(--mint-600); font-weight: 700; }
.auth-fineprint--muted {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--ink-3);
}

/* Ligne de 2 champs côte-à-côte (Prénom / Nom). Passe en colonne sur mobile. */
.auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.auth-col { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 540px) {
  .auth-row { grid-template-columns: 1fr; gap: 0; }
}

/* Aside (right column on login/register) */
.auth-side {
  background: linear-gradient(180deg, var(--mint-50), var(--paper));
  border: 1px solid var(--mint-100);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
}
.auth-side h2 {
  font-family: 'Quicksand', sans-serif;
  font-size: 22px;
  margin: 0 0 12px;
}
.auth-side p { color: var(--ink-2); margin: 0 0 14px; }
.auth-perks {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.auth-perks li {
  position: relative;
  padding: 8px 0 8px 30px;
  color: var(--ink-2);
  font-size: 14.5px;
}
.auth-perks li::before {
  content: "✓";
  position: absolute; left: 0; top: 8px;
  width: 22px; height: 22px;
  background: var(--mint-400);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
}
.auth-trust {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px dashed var(--mint-200);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-trust-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.auth-trust-row span:first-child { font-size: 18px; }

/* Honeypot (identique au contact) */
.hp-field { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; opacity: 0; }

/* Role pills (register) */
.role-tabs--pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 18px;
}
.role-tabs--pills button {
  appearance: none;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.role-tabs--pills button:hover { border-color: var(--mint-300); }
.role-tabs--pills button.active {
  background: var(--mint-400);
  color: #fff;
  border-color: var(--mint-400);
  box-shadow: var(--shadow-mint);
}

/* ========== MON COMPTE ========== */
.account-page { padding: 50px 0 90px; }
.account-head {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.account-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
  color: #fff;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-mint);
  overflow: hidden;
}
.account-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Carte avatar dans /mon-compte/ */
.avatar-upload {
  display: flex; align-items: center; gap: 20px;
  margin-top: 8px;
}
.avatar-upload-preview {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
  color: #fff;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 40px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-mint);
  overflow: hidden;
  flex-shrink: 0;
}
.avatar-upload-preview img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-upload-fallback { line-height: 1; }
.avatar-upload-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.account-head h1 {
  font-family: 'Quicksand', sans-serif;
  font-size: 30px;
  margin: 0 0 4px;
}
.account-head .sub { margin: 0; color: var(--ink-3); }
.account-head-cta {
  margin-left: auto;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.account-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.account-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.account-card h2 {
  font-family: 'Quicksand', sans-serif;
  font-size: 20px;
  margin: 0 0 18px;
}
.account-card--rgpd { grid-column: span 2; border-color: var(--mint-100); }
.account-card--wide { grid-column: span 2; }

/* Code enfant */
.child-code-block {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: 6px 0 12px;
  padding: 16px 20px;
  background: var(--mint-50);
  border: 1px dashed var(--mint-300);
  border-radius: var(--radius);
}
.child-code {
  font-family: 'Quicksand', 'Menlo', monospace;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 4px;
  color: var(--mint-600);
  background: transparent;
  user-select: all;
}
.child-code-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Liste enfants (parent) */
.children-list { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 18px; }
.children-empty {
  padding: 20px;
  background: var(--mint-50);
  border: 1px dashed var(--mint-200);
  border-radius: var(--radius);
  color: var(--ink-3);
  text-align: center;
  font-size: 14px;
}
.child-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.child-row:hover { border-color: var(--mint-300); }
.child-row-avatar {
  flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
  color: #fff;
  font-weight: 700;
  font-family: 'Quicksand', sans-serif;
  overflow: hidden;
}
.child-row-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.child-row-info { flex: 1; min-width: 0; }
.child-row-name {
  font-weight: 600;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.child-row-level {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700;
  color: var(--mint-600);
  background: var(--mint-50);
  border: 1px solid var(--mint-100);
  padding: 3px 9px;
  border-radius: 999px;
}
.child-row-level-star { color: var(--sun); font-size: 13px; line-height: 1; }
.child-row-xp-bar {
  position: relative;
  height: 6px;
  background: #f0f4f2;
  border-radius: 999px;
  overflow: hidden;
  margin: 6px 0 4px;
  max-width: 280px;
}
.child-row-xp-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--mint-400), var(--mint-500), var(--sun));
  border-radius: 999px;
  transition: width .8s cubic-bezier(.2, .8, .2, 1);
}
.child-row-stats {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: baseline;
}
.child-row-stats .dot-sep { color: var(--line); }
.child-row-stats b { color: var(--ink-2); font-weight: 700; }
.child-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Parents liés (côté élève) ---------- */
.parents-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 14px;
}
.parent-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s ease;
}
.parent-row:hover { border-color: var(--coral-soft); }
.parent-row-avatar {
  flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--coral-soft), var(--coral));
  color: #fff;
  font-weight: 700;
  font-family: 'Quicksand', sans-serif;
  overflow: hidden;
}
.parent-row-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.parent-row-info { flex: 1; min-width: 0; }
.parent-row-name { font-weight: 600; }
.parent-row-email {
  font-size: 12px;
  color: var(--ink-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin-top: 2px;
  word-break: break-all;
}
.parent-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.child-link-form { margin-top: 10px; }
.child-link-row {
  display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap;
}
.child-link-row input {
  flex: 1; min-width: 180px;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 12px;
  font: inherit; font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.child-link-row input:focus {
  outline: none; border-color: var(--mint-500);
  background: var(--mint-50);
}

.btn-danger-ghost {
  background: transparent;
  color: var(--coral);
  border: 1px solid var(--coral-soft);
}
.btn-danger-ghost:hover { background: #fff3ee; }
.sub-block {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 12px;
}
.sub-tier {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  background: var(--mint-50);
  color: var(--mint-600);
  border: 1px solid var(--mint-200);
}
.sub-tier--essentiel { background: #eef1ff; color: #4a3ec8; border-color: #c9cfff; }
.sub-tier--classe    { background: #fff4e0; color: #8a5c00; border-color: #ffd89b; }
.sub-tier--ecole     { background: #fde9e6; color: #b8372a; border-color: var(--coral-soft); }
.sub-meta { color: var(--ink-3); font-size: 13px; }
.rgpd-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.rgpd-row:first-of-type { border-top: 0; }
.rgpd-row .sub { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.rgpd-row--danger b { color: #b8372a; }

.btn-danger {
  background: linear-gradient(135deg, var(--coral), #e8584a);
  color: #fff;
  box-shadow: var(--shadow-coral);
}
.btn-danger:hover { transform: translateY(-1px); }

/* Responsive */
@media (max-width: 980px) {
  .auth-container,
  .auth-container--wide { grid-template-columns: 1fr; }
  .auth-card { padding: 32px 24px; }
  .account-grid { grid-template-columns: 1fr; }
  .account-card--rgpd { grid-column: auto; }
  .account-card--wide { grid-column: auto; }
  .account-head-cta { margin-left: 0; width: 100%; }
  .child-row { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .auth-page { padding: 30px 0 60px; }
  .auth-head h1 { font-size: 26px; }
  .auth-card { padding: 26px 20px; border-radius: 24px; }
  .auth-side  { padding: 24px 20px; border-radius: 24px; }
  .rgpd-row { flex-direction: column; align-items: flex-start; }
}

/* ==================== ARCHIVE FILTRES (sidebar + cartes) ==================== */
.archive-section { padding: 40px 0 80px; }
.archive-head { margin-bottom: 28px; text-align: center; }
.archive-head h1 { font-family: 'Quicksand', sans-serif; font-size: 44px; margin: 0 0 10px; }
.archive-head p { color: var(--ink-2); font-size: 17px; max-width: 760px; margin: 0 auto; }

.archive-layout { display: block; }
.archive-body {
  display: grid; grid-template-columns: 260px 1fr; gap: 32px;
  align-items: flex-start;
}

/* Sidebar */
.archive-sidebar { position: sticky; top: 96px; }
.archive-sidebar-inner {
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 20px 18px;
  border: 1px solid var(--line);
}
.archive-sidebar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 8px; }
.archive-sidebar-head h2 { font-family: 'Quicksand', sans-serif; font-size: 18px; margin: 0; }
.archive-sidebar-reset {
  color: var(--coral); font-size: 12px; font-weight: 700; text-decoration: none;
  white-space: nowrap;
}
.archive-sidebar-reset:hover { text-decoration: underline; }

.archive-filter-group { border: none; padding: 0; margin: 0 0 22px; }
.archive-filter-group legend {
  font-weight: 800; font-size: 13px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-3); margin-bottom: 10px;
}
.archive-filter-sort select {
  width: 100%; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--mint-50);
  font: inherit; font-weight: 600; color: var(--ink);
  cursor: pointer;
}
.archive-filter-sort select:hover, .archive-filter-sort select:focus {
  border-color: var(--mint-400); outline: none;
}

.archive-filter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.archive-filter-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 12px;
  cursor: pointer; transition: background .15s, color .15s;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.archive-filter-chip:hover { background: var(--mint-50); }
.archive-filter-chip.is-active { background: var(--mint-100); color: var(--mint-600); }
.archive-filter-chip input[type=checkbox] { accent-color: var(--mint-500); margin: 0; }
.archive-filter-chip-lbl { flex: 1; }
.archive-filter-chip-count {
  font-size: 12px; font-weight: 700;
  background: rgba(0,0,0,.04); padding: 2px 8px; border-radius: 999px;
  color: var(--ink-3);
}
.archive-filter-chip.is-active .archive-filter-chip-count { background: rgba(34,184,132,.15); color: var(--mint-600); }

/* Mobile toggle */
.archive-filter-toggle {
  display: none;
  align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 16px; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--ink);
  margin-bottom: 16px;
}
.archive-filter-toggle:hover { background: var(--mint-50); }
.archive-filter-toggle-badge {
  background: var(--mint-500); color: #fff;
  font-size: 11px; font-weight: 800;
  padding: 1px 8px; border-radius: 999px; min-width: 20px; text-align: center;
}

/* Main */
.archive-summary { color: var(--ink-3); font-size: 14px; font-weight: 600; margin: 0 0 16px; }
.archive-grid--with-sidebar { grid-template-columns: repeat(3, 1fr); }
.archive-empty {
  background: #fff; border-radius: var(--radius-lg); padding: 40px;
  text-align: center; box-shadow: var(--shadow-sm);
}
.archive-empty p { color: var(--ink-3); margin: 0 0 16px; }
.archive-pagination { margin-top: 40px; text-align: center; }
.archive-pagination .page-numbers {
  display: inline-block; padding: 10px 14px; margin: 0 3px;
  border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm);
  color: var(--ink); font-weight: 700; text-decoration: none;
}
.archive-pagination .page-numbers:hover { background: var(--mint-50); color: var(--mint-600); }
.archive-pagination .page-numbers.current { background: var(--mint-500); color: #fff; }

/* Card meta (temps lecture, commentaires, date) */
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tag-niveau { background: var(--mint-50); color: var(--mint-600); }
.card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-3); font-weight: 600;
}
.card-meta-item {
  display: inline-flex; align-items: center; gap: 4px;
}
.card-meta-item svg { flex-shrink: 0; opacity: .7; }
.card-meta-date { margin-left: auto; }

.single-reading-time {
  /* Reste `inline` (pas inline-flex) pour s'aligner sur la baseline des <span>
     voisins dans `.single-wrap .meta` — sinon la ligne « 1 min de lecture »
     décroche verticalement par rapport à « CM2 · 20 avril 2026 ». */
  display: inline;
  color: var(--ink-3); font-weight: 600;
  white-space: nowrap;
}
.single-reading-time svg {
  vertical-align: -2px;
  margin-right: 4px;
}

@media (max-width: 980px) {
  .archive-body { grid-template-columns: 1fr; gap: 0; }
  .archive-sidebar {
    position: static;
    display: none;
    margin-bottom: 20px;
  }
  .archive-sidebar.is-open { display: block; }
  .archive-filter-toggle { display: inline-flex; }
  .archive-grid--with-sidebar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .archive-head h1 { font-size: 32px; }
  .archive-grid--with-sidebar { grid-template-columns: 1fr; }
}

/* ==================== COMMENTAIRES ==================== */
.comments-section {
  margin-top: 60px; padding-top: 40px;
  border-top: 2px solid var(--line);
}
.comments-head h2 {
  font-family: 'Quicksand', sans-serif;
  font-size: 24px; margin: 0 0 6px;
  display: flex; align-items: center;
}
.comments-sub { color: var(--ink-3); margin: 0 0 28px; }

.comments-list, .comments-list .children {
  list-style: none; margin: 0; padding: 0;
}
.comments-list .children {
  margin-top: 16px; padding-left: 28px;
  border-left: 2px solid var(--line);
}
.comments-list > li + li { margin-top: 18px; }

.comment-body {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 16px 18px; box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.comment--pending .comment-body { background: #fff8e1; border-color: #f5d87a; }
.comment--0 .comment-body { background: #f0f2f5; border-color: var(--line); }

.comment-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.comment-avatar img {
  border-radius: 50%;
  width: 36px; height: 36px; display: block;
}
.comment-byline {
  display: flex; flex-direction: column; line-height: 1.2; min-width: 0;
}
.comment-author { color: var(--ink); font-weight: 800; font-size: 15px; }
.comment-author-badge {
  display: inline-block; font-size: 11px; font-weight: 800;
  padding: 2px 8px; border-radius: 999px;
  margin-top: 3px; width: max-content;
  text-transform: uppercase; letter-spacing: .06em;
}
.comment-author-badge--teacher { background: linear-gradient(135deg,#ff9485,#ff7a6c); color: #fff; }
.comment-author-badge--parent  { background: var(--mint-100); color: var(--mint-600); }
.comment-author-badge--eleve   { background: #e9e3ff; color: #5a3ec8; }
.comment-time { margin-left: auto; color: var(--ink-3); font-size: 12px; font-weight: 600; white-space: nowrap; }

.comment-pending-note {
  background: rgba(255,210,63,.18); color: #8a6a00;
  padding: 6px 10px; border-radius: 10px;
  font-size: 13px; font-weight: 700;
  margin: 4px 0 10px;
}

.comment-content { color: var(--ink-2); line-height: 1.55; font-size: 15px; }
.comment-content p { margin: 0 0 8px; }
.comment-content p:last-child { margin-bottom: 0; }

.comment-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
}
.comment-reply-link {
  color: var(--mint-600); font-weight: 700; text-decoration: none;
}
.comment-reply-link:hover { text-decoration: underline; }

.comment-mod-actions { margin-left: auto; display: flex; gap: 6px; }
.comment-mod-btn {
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-3); cursor: pointer; font: inherit; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; font-size: 12px;
  transition: background .15s, color .15s, border-color .15s;
}
.comment-mod-btn:hover { background: var(--mint-50); color: var(--mint-600); border-color: var(--mint-400); }
.comment-mod-btn--danger:hover { background: #ffe8e5; color: var(--coral); border-color: var(--coral); }
.comment-mod-btn[disabled] { opacity: .5; cursor: progress; }

.comments-pagination { margin: 24px 0; text-align: center; }
.comments-pagination .page-numbers {
  display: inline-block; padding: 6px 10px; margin: 0 2px;
  border-radius: 10px; background: #fff; box-shadow: var(--shadow-sm);
  color: var(--ink); font-weight: 700; text-decoration: none;
}
.comments-pagination .page-numbers.current { background: var(--mint-500); color: #fff; }

.comments-login-prompt, .comments-closed {
  background: var(--mint-50); border-radius: var(--radius-lg);
  padding: 20px; text-align: center; margin-top: 24px;
  color: var(--ink-2);
}
.comments-login-prompt p { margin: 0 0 12px; }
.comments-login-prompt .btn { margin: 0 4px; }

/* Formulaire de commentaire */
.comment-respond {
  margin-top: 32px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.comment-reply-title {
  font-family: 'Quicksand', sans-serif;
  font-size: 18px; margin: 0 0 12px;
  display: flex; align-items: center; gap: 10px;
}
.comment-reply-title small a {
  font-size: 13px; color: var(--coral); font-weight: 700;
  font-family: inherit; text-decoration: none;
}
.comment-reply-title small a:hover { text-decoration: underline; }
.comment-user-badge {
  font-size: 13px; color: var(--ink-3); margin: 0 0 10px;
}
.comment-form-comment textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 14px;
  font: inherit; font-size: 15px; line-height: 1.5;
  resize: vertical; min-height: 100px;
  background: var(--mint-50);
}
.comment-form-comment textarea:focus {
  outline: none; border-color: var(--mint-400); background: #fff;
}
.form-submit { margin-top: 10px; }

@media (max-width: 640px) {
  .comments-list .children { padding-left: 14px; }
  .comment-body { padding: 14px; }
  .comment-mod-actions { margin-left: 0; flex-basis: 100%; justify-content: flex-start; }
  .comment-time { margin-left: auto; }
  .avatar-upload-preview { width: 80px; height: 80px; font-size: 34px; }
}

/* ---- Styling du markup NATIF WordPress (walker par défaut) ----
   On utilise `wp_list_comments` sans callback custom : WP génère ses propres
   classes (.comment-author, .fn, .comment-metadata, .reply, etc.). On les
   restyle pour qu'elles matchent la DA et suppriment tout bleu par défaut. */
.comments-list .comment-body {
  display: block;
  margin-bottom: 18px;
}
.comments-list .comment-meta {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.comments-list .comment-author.vcard {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 auto; min-width: 0;
}
.comments-list .comment-author .avatar {
  border-radius: 50%;
  width: 40px; height: 40px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.comments-list .comment-author .fn {
  font-weight: 800; color: var(--ink);
  font-style: normal;
  font-size: 15px;
}
/* Nom d'auteur : on neutralise tout lien (bleu par défaut) → apparence texte. */
.comments-list .comment-author .fn a,
.comments-list .comment-author .url {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}
.comments-list .comment-author .fn a:hover,
.comments-list .comment-author .url:hover {
  color: var(--mint-600);
}
/* "says:" retiré — superflu en français. */
.comments-list .comment-author .says { display: none; }

/* Date / permalien commentaire : muted, pas de bleu. */
.comments-list .comment-metadata {
  color: var(--ink-3); font-size: 12px; font-weight: 600;
  margin-left: auto;
  white-space: nowrap;
}
.comments-list .comment-metadata a {
  color: inherit; text-decoration: none;
}
.comments-list .comment-metadata a:hover { color: var(--mint-600); }
.comments-list .comment-metadata .edit-link {
  margin-left: 8px;
  color: var(--mint-600);
}

/* Bloc "Répondre" natif WP — même style que nos anciens liens custom. */
.comments-list .reply { margin-top: 10px; }
.comments-list .reply .comment-reply-link {
  display: inline-block;
  color: var(--mint-600);
  font-weight: 700;
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--mint-100);
  border-radius: 999px;
  font-size: 13px;
  background: var(--mint-50);
}
.comments-list .reply .comment-reply-link:hover {
  background: var(--mint-100);
}

/* Badges rôle (injectés via filter get_comment_author_link) — s'affichent
   inline après le nom. */
.comments-list .comment-author .comment-author-badge {
  vertical-align: middle;
  margin-left: 6px;
}

/* Commentaires enfants (thread) : indentation avec garde-fou visuel. */
.comments-list .children {
  list-style: none;
  margin: 16px 0 0;
  padding-left: 28px;
  border-left: 2px solid var(--line);
}
.comments-list .children > li + li { margin-top: 18px; }

/* « Cancel reply » du comment_form. */
#cancel-comment-reply-link {
  color: var(--coral);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  margin-left: 10px;
}
#cancel-comment-reply-link:hover { text-decoration: underline; }

/* ============================================================
   RÉACTIONS DE COMMENTAIRES
   ============================================================ */
.comment-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.comment-reaction {
  appearance: none;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.comment-reaction:hover:not(:disabled) {
  background: var(--mint-50);
  border-color: var(--mint-200);
  transform: translateY(-1px);
}
.comment-reaction:disabled { cursor: not-allowed; opacity: 0.7; }
.comment-reaction.is-empty .comment-reaction-count { display: none; }
.comment-reaction.is-active {
  background: var(--mint-100);
  border-color: var(--mint-400);
  color: var(--mint-600);
  box-shadow: 0 0 0 2px rgba(34, 184, 132, 0.15);
}
.comment-reaction-emoji { font-size: 15px; line-height: 1; }
.comment-reaction-count { min-width: 10px; text-align: center; font-size: 12px; }

/* ============================================================
   ONGLETS DU COMPTE
   ============================================================ */
.account-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: white;
  padding: 6px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  margin: 28px 0 24px;
}
.account-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--ink-2);
  font-family: 'Quicksand';
  font-weight: 700;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
  line-height: 1;
}
.account-tab:hover { background: var(--mint-50); color: var(--mint-600); }
.account-tab.is-active {
  background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
  color: white;
  box-shadow: var(--shadow-sm);
}
.account-tab:focus-visible { outline: 2px solid var(--mint-500); outline-offset: 2px; }
.account-tab-chip {
  background: rgba(255, 255, 255, 0.25);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.account-tab:not(.is-active) .account-tab-chip {
  background: var(--mint-100);
  color: var(--mint-600);
}
.account-tab-panel { display: none; }
.account-tab-panel.is-active { display: block; }

/* ============================================================
   ONGLET SOCIAL — stats en grille
   ============================================================ */
.social-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.social-stat {
  background: white;
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.social-stat-emoji { font-size: 28px; line-height: 1; margin-bottom: 8px; }
.social-stat-num {
  font-family: 'Quicksand'; font-weight: 700; font-size: 32px;
  color: var(--mint-600); line-height: 1; margin-bottom: 4px;
}
.social-stat-lbl { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.social-helper {
  background: var(--mint-50);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  color: var(--ink-2);
  font-size: 14px;
}
.social-helper p { margin: 0; }

/* ============================================================
   ONGLET BADGES — grille + cartes
   ============================================================ */
.badges-intro {
  display: flex;
  align-items: center;
  gap: 20px;
  background: white;
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 28px;
}
.badges-intro-count {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: 'Quicksand';
  font-weight: 700;
  color: var(--mint-600);
}
.badges-intro-count .num { font-size: 48px; line-height: 1; }
.badges-intro-count .total { font-size: 22px; color: var(--ink-3); }
.badges-intro-text h2 { margin: 0 0 4px; font-size: 22px; }
.badges-intro-text .sub { margin: 0; font-size: 14px; color: var(--ink-3); max-width: 60ch; }

.badges-group-h {
  font-family: 'Quicksand'; font-weight: 700; font-size: 18px;
  color: var(--ink); margin: 24px 0 12px;
}
.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
.badge-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.badge-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.badge-card.is-locked { opacity: 0.82; }
.badge-card.is-locked .badge-emoji { filter: grayscale(1); }
.badge-card.is-earned {
  background: linear-gradient(180deg, #fffbe8 0%, white 50%);
  border: 2px solid #f5d87a;
  padding: 16px 14px;
}
.badge-emoji { font-size: 38px; line-height: 1; margin-bottom: 8px; }
.badge-title { font-family: 'Quicksand'; font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.badge-desc { font-size: 12px; color: var(--ink-3); margin-bottom: 10px; min-height: 32px; }
.badge-progress {
  height: 6px; background: var(--mint-50); border-radius: 999px;
  overflow: hidden; margin: 4px 0 6px;
}
.badge-progress-bar {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--mint-400), var(--mint-600));
  border-radius: 999px; transition: width .4s ease;
}
.badge-state {
  font-size: 11px; font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .04em;
}
.badge-state--earned { color: #b58900; }

/* ============================================================
   BANNIÈRE "DÉJÀ LU" sur single lesson/fiche
   ============================================================ */
.content-seen-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mint-50);
  color: var(--mint-600);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  margin: 0 0 16px;
  border: 1px solid var(--mint-200);
}
.content-seen-emoji {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  background: var(--mint-500); color: white;
  border-radius: 50%;
  font-size: 11px;
}

/* ============================================================
   CARD BADGE sur archive-card
   ============================================================ */
.card-item.has-card-badge { position: relative; }
.card-badge {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  background: white;
  color: var(--mint-600);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  letter-spacing: .02em;
}
.card-badge--seen { background: var(--mint-100); color: var(--mint-600); }
.card-badge--perfect { background: linear-gradient(135deg, #ffd23f, #ffb347); color: #7a5300; }

/* ============================================================
   RESPONSIVE : onglets + social stats
   ============================================================ */
@media (max-width: 900px) {
  .social-stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .account-tabs {
    border-radius: var(--radius);
    padding: 4px;
    gap: 2px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .account-tabs::-webkit-scrollbar { display: none; }
  .account-tab {
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .social-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .badges-intro { flex-direction: column; text-align: center; padding: 20px; }
  .badges-intro-count .num { font-size: 40px; }
  .badges-grid { grid-template-columns: repeat(2, 1fr); }
  .comment-reactions { gap: 4px; }
  .comment-reaction { padding: 4px 8px 4px 6px; font-size: 12px; }
}

/* Catch-all : AUCUN lien bleu par défaut dans la zone de commentaires
   (formulaire de réponse, messages "logged_in_as", "must-log-in", cookies
   consent, etc.). Tout passe en mint, font-weight 700, sans soulignement. */
.comments-section a:not(.btn):not(.btn-primary):not(.btn-ghost):not(.btn-sm),
.comment-respond a:not(.btn):not(.btn-primary):not(.btn-ghost):not(.btn-sm) {
  color: var(--mint-600);
  text-decoration: none;
  font-weight: 700;
}
.comments-section a:not(.btn):not(.btn-primary):not(.btn-ghost):not(.btn-sm):hover,
.comment-respond a:not(.btn):not(.btn-primary):not(.btn-ghost):not(.btn-sm):hover {
  text-decoration: underline;
}
/* Le lien coral (ex: cancel-reply, comment-reply-title small a) garde sa couleur. */
.comments-section #cancel-comment-reply-link,
.comment-reply-title small a { color: var(--coral); }

/* ============================================================
   XP & NIVEAUX — pastille, barre, panneau « Niveau », badge dans
   les commentaires. Palette : dégradé mint→coral pour la barre,
   pastille mint claire pour le chip.
   ============================================================ */

/* --- Pastille « Niv. N » dans l'en-tête du compte + dans les commentaires --- */
.level-chip,
.comment-author-level {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, var(--mint-100), #fff6ef);
  color: var(--mint-600);
  font-family: 'Quicksand', sans-serif;
  font-weight: 800;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(45,178,144,.18);
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
}
.level-chip-star,
.comment-author-level::before {
  color: #f5a623;
  font-size: 13px;
}
.comment-author-level {
  /* on suffixe à `.comment-author-badge` : léger décalage */
  margin-top: 3px;
  margin-left: 4px;
  letter-spacing: 0;
  text-transform: none;
}
.level-chip:hover { background: linear-gradient(135deg, #ccebd9, #ffe7d4); }

/* --- Bloc XP dans l'en-tête de la page compte --- */
.account-head-xp {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.account-head-xp .xp-bar { flex: 1 1 180px; max-width: 260px; }
.account-head-xp .xp-bar-caption { font-size: 12px; color: var(--ink-3); font-weight: 700; }

/* --- Barre XP générique --- */
.xp-bar {
  position: relative;
  height: 10px;
  background: #eef2f0;
  border-radius: 999px;
  overflow: hidden;
}
.xp-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--mint-500, #2db290), #f5a623);
  border-radius: 999px;
  transition: width .35s ease;
}
.xp-bar--big { height: 16px; }

/* --- Hero du panneau « Niveau » : grosse étoile + info + barre --- */
.level-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(135deg, #fffbef, #eaf7f1);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
  border: 1px solid rgba(45,178,144,.12);
}
.level-hero-badge {
  position: relative;
  width: 92px; height: 92px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 30%, #fff2c7, #f5a623);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(245,166,35,.35), inset 0 -4px 10px rgba(0,0,0,.08);
  color: #fff;
  font-family: 'Quicksand', sans-serif;
  font-weight: 800;
}
.level-hero-badge-star {
  position: absolute;
  top: 10px; right: 12px;
  font-size: 18px;
  color: #fff;
  opacity: .9;
}
.level-hero-badge-num {
  font-size: 40px;
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.level-hero-info { flex: 1; min-width: 0; }
.level-hero-info h2 { margin: 0 0 4px; font-size: 24px; }
.level-hero-info .sub { margin: 0 0 12px; color: var(--ink-3); }
.level-hero-info .xp-bar { margin-top: 8px; }
.level-hero-info .xp-bar-caption { margin-top: 6px; font-size: 13px; color: var(--ink-3); font-weight: 700; }

/* --- « Comment gagner de l'XP ? » --- */
.level-how {
  background: white;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}
.level-how h3 {
  font-family: 'Quicksand'; font-weight: 700; margin: 0 0 12px; font-size: 18px;
}
.level-how-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 20px;
}
.level-how-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  color: var(--ink-2);
  font-size: 14px;
  border-bottom: 1px dashed var(--line);
}
.level-how-list li:last-child { border-bottom: 0; }
.level-how-emoji { font-size: 20px; line-height: 1; }

/* --- Historique des gains XP --- */
.level-history {
  background: white;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}
.level-history h3 {
  font-family: 'Quicksand'; font-weight: 700; margin: 0 0 12px; font-size: 18px;
}
.xp-history-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.xp-history-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
}
.xp-history-item:last-child { border-bottom: 0; }
.xp-history-plus {
  font-family: 'Quicksand'; font-weight: 800;
  background: var(--mint-100);
  color: var(--mint-600);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
}
.xp-history-body { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.xp-history-body .sub { font-weight: 500; }
.xp-history-when { font-size: 12px; white-space: nowrap; }

/* --- Responsive --- */
@media (max-width: 860px) {
  .level-hero { flex-direction: column; text-align: center; gap: 16px; padding: 22px; }
  .level-how-list { grid-template-columns: 1fr; }
  .xp-history-item {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "plus body"
      "when when";
  }
  .xp-history-plus  { grid-area: plus; }
  .xp-history-body  { grid-area: body; }
  .xp-history-when  { grid-area: when; text-align: right; }
}

/* ============================================================
   TOASTS DE GAIN D'XP — conteneur fixe bas-droite + cartes
   avec entrée slide + pulse + sortie en fondu.
   ============================================================ */
.xp-toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 40px);
}
.xp-toast {
  pointer-events: auto;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbf4 100%);
  border: 1px solid rgba(45,178,144,.22);
  border-left: 4px solid var(--mint-500);
  border-radius: 14px;
  padding: 12px 16px 12px 14px;
  min-width: 240px;
  max-width: 360px;
  box-shadow: 0 10px 30px rgba(19,153,107,.18), 0 3px 10px rgba(0,0,0,.06);
  font-family: inherit;
  color: var(--ink);
  /* État initial (avant .is-in) : caché à droite */
  opacity: 0;
  transform: translateX(30px) scale(.92);
  transition: opacity .3s ease, transform .4s cubic-bezier(.18,.89,.32,1.28);
}
.xp-toast.is-in {
  opacity: 1;
  transform: translateX(0) scale(1);
  animation: xpToastPulse .7s ease .15s 1;
}
.xp-toast.is-out {
  opacity: 0;
  transform: translateX(30px) scale(.96);
}
@keyframes xpToastPulse {
  0%   { box-shadow: 0 10px 30px rgba(19,153,107,.18), 0 3px 10px rgba(0,0,0,.06), 0 0 0 0 rgba(45,178,144,.35); }
  60%  { box-shadow: 0 10px 30px rgba(19,153,107,.18), 0 3px 10px rgba(0,0,0,.06), 0 0 0 14px rgba(45,178,144,0); }
  100% { box-shadow: 0 10px 30px rgba(19,153,107,.18), 0 3px 10px rgba(0,0,0,.06), 0 0 0 0 rgba(45,178,144,0); }
}
.xp-toast-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  font-size: 22px;
  background: radial-gradient(circle at 30% 30%, #fff6c7, #ffd56b);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(245,166,35,.35);
  animation: xpIconWobble .8s ease;
}
@keyframes xpIconWobble {
  0%   { transform: rotate(-30deg) scale(.5); }
  55%  { transform: rotate(12deg) scale(1.12); }
  100% { transform: rotate(0deg) scale(1); }
}
.xp-toast-body { min-width: 0; flex: 1; }
.xp-toast-title {
  font-family: 'Quicksand', sans-serif;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
  margin: 0 0 2px;
}
.xp-toast-plus {
  display: inline-block;
  background: var(--mint-100);
  color: var(--mint-600);
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 13px;
  margin-right: 6px;
}
.xp-toast-sub {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.35;
}
.xp-toast-cap {
  font-size: 11px;
  color: #a06600;
  margin-top: 4px;
  font-style: italic;
}

/* Level-up : variante festive dorée */
.xp-toast--levelup {
  border-left-color: #f5a623;
  background: linear-gradient(135deg, #fff9ec 0%, #ffefcf 100%);
}
.xp-toast--levelup .xp-toast-icon {
  background: radial-gradient(circle at 30% 30%, #fff, #f5a623);
  animation: xpIconSpin 1.2s ease;
}
@keyframes xpIconSpin {
  0%   { transform: rotate(-180deg) scale(.3); }
  60%  { transform: rotate(20deg) scale(1.2); }
  100% { transform: rotate(0deg) scale(1); }
}
.xp-toast--levelup .xp-toast-title { color: #8a5a00; }

/* Info neutre (plafond atteint) : bordure ambre, pas festive */
.xp-toast--info {
  border-left-color: #c77b00;
  background: linear-gradient(135deg, #fffaf0 0%, #fff3dd 100%);
}
.xp-toast--info .xp-toast-icon {
  background: radial-gradient(circle at 30% 30%, #fff, #f0ad4e);
  animation: none;
}

@media (max-width: 600px) {
  .xp-toasts { left: 12px; right: 12px; bottom: 12px; }
  .xp-toast { min-width: 0; max-width: none; }
}

/* Accessibilité : respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .xp-toast { transition: opacity .2s linear; transform: none !important; animation: none !important; }
  .xp-toast.is-in { animation: none; }
  .xp-toast-icon { animation: none; }
}

/* ============================================================
 * MÉDIAS ATTACHÉS (audio/vidéo) — affichés en haut des leçons/fiches.
 * Cf. wp/mu-plugins/crol-core/includes/media-embed.php
 * ============================================================ */

.post-media {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 18px 0 28px;
}
.post-media-block {
  background: linear-gradient(135deg, var(--mint-50) 0%, #f5fbf8 100%);
  border: 1px solid var(--mint-200, #d4f0e3);
  border-radius: 16px;
  padding: 14px 16px 16px;
  box-shadow: 0 6px 18px rgba(19, 153, 107, 0.06);
}
.post-media-block--video { border-color: #ffd6d0; background: linear-gradient(135deg, #fff4f2 0%, #fffaf8 100%); box-shadow: 0 6px 18px rgba(255,122,108,.08); }
.post-media-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--mint-600);
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.post-media-block--video .post-media-label { color: var(--coral, #ff7a6c); }

/* Player HTML5 natif. */
.post-media-native {
  display: block;
  width: 100%;
  border-radius: 12px;
  background: #fff;
}
audio.post-media-native {
  height: 44px;
  box-shadow: 0 2px 6px rgba(19,153,107,.1);
}
video.post-media-native {
  max-height: 480px;
  background: #000;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* Conteneur d'iframe responsive (oEmbed YouTube/Vimeo, etc.). */
.post-media-embed {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.post-media-embed iframe,
.post-media-embed embed,
.post-media-embed object {
  display: block;
  width: 100% !important;
  aspect-ratio: 16 / 9;
  height: auto !important;
  border: 0;
}
/* SoundCloud, Spotify : iframes plus courtes. */
.post-media-block--audio .post-media-embed iframe { aspect-ratio: auto; min-height: 152px; max-height: 232px; }

.post-media-fallback { margin: 0; }
.post-media-fallback a { color: var(--mint-600); font-weight: 700; text-decoration: underline; }

/* Aussi : on style proprement les blocs natifs Gutenberg audio/video
   quand ils sont placés directement dans le contenu via le block editor. */
.content > figure.wp-block-audio,
.content > figure.wp-block-video {
  margin: 22px 0;
}
.content figure.wp-block-audio audio,
.content figure.wp-block-video video {
  width: 100%;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(19,153,107,.1);
}
.content figure.wp-block-audio figcaption,
.content figure.wp-block-video figcaption,
.content figure.wp-block-embed figcaption {
  font-size: 13px;
  color: var(--ink-3, #6a7c87);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}
.content figure.wp-block-embed iframe { border-radius: 12px; }

/* ============================================================
 * BLOC "ACTIONS POST" (Imprimer / Télécharger en PDF)
 * ============================================================ */

.post-actions {
  margin: 36px 0 24px;
  padding: 18px 22px;
  background: linear-gradient(135deg, var(--mint-50) 0%, #ffffff 60%, #fffaf2 100%);
  border: 1px solid var(--mint-200, #d4f0e3);
  border-radius: 18px;
  box-shadow: 0 6px 22px rgba(19,153,107,.07);
}
.post-actions-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.post-actions-text {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 280px;
  min-width: 0;
}
.post-actions-emoji {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.post-actions-title {
  font-weight: 800;
  font-size: 16px;
  color: var(--ink, #1d2a33);
  line-height: 1.3;
}
.post-actions-sub {
  font-size: 13px;
  color: var(--ink-3, #6a7c87);
  line-height: 1.45;
  margin-top: 2px;
}
.post-actions-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.post-actions-buttons .btn { display: inline-flex; align-items: center; gap: 8px; }
.post-actions-buttons .btn svg { flex-shrink: 0; }

@media (max-width: 540px) {
  .post-actions-inner { flex-direction: column; align-items: stretch; }
  .post-actions-buttons { width: 100%; }
  .post-actions-buttons .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
 * PAGE DE GARDE PDF (.print-cover) — cachée à l'écran, visible
 * uniquement à l'impression (cf. @media print plus bas).
 * ============================================================ */

.print-cover { display: none; }

/* ============================================================
 * STYLES IMPRESSION — PDF brandé "La classe de Crol"
 * Le navigateur expose ces styles quand l'utilisateur clique
 * sur Imprimer ou Enregistrer au format PDF.
 * ============================================================ */

@media print {
  /* Page setup avec marges raisonnables. */
  @page {
    size: A4;
    margin: 1.5cm 1.4cm 1.6cm;
  }
  /* Première page (couverture) : pas de marge haute pour laisser
     respirer le header en pleine largeur. */
  @page :first {
    margin-top: 0.6cm;
  }

  /* On force les couleurs de marque à être imprimées (sans ça les
     navigateurs économisent l'encre et virent le fond mint). */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Reset général. */
  html, body {
    background: #ffffff !important;
    color: #1d2a33 !important;
    font-size: 11.5pt;
    line-height: 1.55;
  }
  body { font-family: Nunito, "Segoe UI", Arial, sans-serif; }

  /* Cache toute la chrome non-essentielle. */
  header.site-header,
  nav.navbar,
  .navbar,
  .site-nav,
  .header-nav,
  .nav-wrap,           /* nav réelle utilisée par ce thème */
  .nav-cta,
  .nav-toggle,
  footer,
  .site-footer,
  .footer,
  .crol-cookie-banner,
  .xp-toasts,
  .gated-notice,
  .post-actions,
  .post-media,         /* audios/vidéos non imprimables */
  .comments-area,
  .comments-section,
  #comments,
  .comment-respond,
  .crol-comments,
  .crol-comments-list,
  .breadcrumbs,
  .meta,
  .single-reading-time,
  .content-seen-banner,
  .account-tabs,
  .single-wrap > h1,
  .lead,
  .single-wrap > .meta,
  [data-no-print],
  .skip-link,
  .toc-floating,
  .level-chip,
  .xp-bar,
  .badge-toast,
  aside,
  .sidebar,
  .archive-filters,
  .tabs,
  button,
  .btn,
  /* Photos de profil — l'utilisateur ne veut pas de tête en haut de PDF.
     Couvre le menu (avatar-btn), les commentaires, les widgets compte. */
  .avatar,
  img.avatar,
  .avatar-btn,
  .avatar-btn-img,
  .avatar-btn-initial,
  .user-avatar,
  .comment-author .avatar,
  .crol-comment-avatar,
  .account-avatar,
  .login-avatar,
  #wpadminbar {
    display: none !important;
  }

  /* Empêche les coupures disgracieuses au milieu d'une image / illustration :
     l'image entière passe à la page suivante si elle ne tient pas sur celle-ci.
     Ça évite aussi qu'un éventuel header revienne se superposer à la photo
     en haut de page. */
  .content img,
  .content figure,
  .content .wp-block-image,
  .content .wp-block-gallery,
  .content blockquote,
  .content pre,
  .content table {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  /* Les images doivent rester proprement sur leur page sans bordure
     "bandeau" ou ombre portée résiduelle qui se transformerait en
     barre de couleur sur le PDF. */
  .content img {
    box-shadow: none !important;
    border: none !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Le contenu peut respirer. */
  .single-wrap {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  section { padding: 0 !important; margin: 0 !important; background: transparent !important; }
  main, .site-main { background: transparent !important; padding: 0 !important; }

  /* Couverture du PDF — première page. */
  .print-cover {
    display: block !important;
    page-break-after: always;
    break-after: page;
    margin: 0 -1.4cm;          /* déborde des marges @page pour effet pleine largeur */
    padding: 0 0 0;
    background: #ffffff;
  }
  .print-cover-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 1.4cm 24px;
    background: #22b884 !important;
    background-image: linear-gradient(135deg, #22b884 0%, #13996b 60%, #0f7f57 100%) !important;
    color: #ffffff !important;
  }
  .print-cover-logo {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #ffffff !important;
    padding: 6px;
    object-fit: contain;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  .print-cover-logo--letter {
    display: flex; align-items: center; justify-content: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 36px; font-weight: 700; color: #13996b !important;
    line-height: 1;
  }
  .print-cover-name {
    font-family: Fredoka, Nunito, sans-serif;
    font-size: 22pt; font-weight: 800; color: #ffffff !important;
    letter-spacing: .3px; line-height: 1.1;
  }
  .print-cover-tagline {
    font-size: 11pt; color: #e8fff5 !important;
    margin-top: 2px;
  }

  .print-cover-stripe {
    height: 6px;
    background: #ff7a6c !important;
    background-image: linear-gradient(90deg, #ff7a6c 0%, #ffd23f 50%, #22b884 100%) !important;
  }

  .print-cover-body {
    padding: 60px 1.4cm 40px;
    text-align: center;
  }
  .print-cover-kicker {
    font-size: 11pt;
    font-weight: 700;
    color: #13996b !important;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 18px;
  }
  .print-cover-title {
    font-family: Fredoka, Nunito, sans-serif;
    font-size: 30pt;
    font-weight: 800;
    color: #1d2a33 !important;
    line-height: 1.15;
    margin: 0 0 18px;
  }
  .print-cover-excerpt {
    font-size: 13pt;
    color: #4a5b66 !important;
    line-height: 1.55;
    max-width: 14cm;
    margin: 0 auto;
    font-style: italic;
  }

  .print-cover-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 1.4cm 32px;
    border-top: 1px solid #e6efec;
    background: #fafdfb !important;
  }
  .print-cover-link { flex: 1 1 auto; min-width: 0; }
  .print-cover-link-label {
    font-size: 9.5pt;
    color: #6a7c87 !important;
    margin-bottom: 4px;
  }
  .print-cover-link-url {
    font-size: 12pt;
    font-weight: 700;
    color: #13996b !important;
    word-break: break-all;
    line-height: 1.3;
  }
  .print-cover-link-meta {
    font-size: 9pt;
    color: #94a3b8 !important;
    margin-top: 8px;
  }
  .print-cover-qr {
    /* Largeur fixe pour le bloc droite du footer. On laisse 4mm de marge
       interne pour éviter tout risque de troncage en bord de page sur
       les moteurs d'impression qui arrondissent agressivement. */
    flex: 0 0 3.6cm;
    width: 3.6cm;
    text-align: center;
    overflow: visible;
    box-sizing: border-box;
    padding-right: 2mm;
  }
  /* Le QR est désormais un <img> base64 (PNG) — taille pilotée 100 %
     en CSS, pixel-parfait à l'impression. */
  .print-cover-qr-img {
    width: 3.2cm !important;
    height: 3.2cm !important;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    /* Important : empêche le moteur d'impression d'optimiser/désaturer
       le PNG (Chrome peut convertir en niveaux de gris sans cette règle). */
    image-rendering: pixelated;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .print-cover-qr-label {
    font-size: 8.5pt;
    color: #6a7c87 !important;
    margin-top: 4px;
    font-style: italic;
  }

  /* CONTENU principal — typo print-friendly. */
  .single-wrap > h1,
  .content h1, .content h2, .content h3, .content h4 {
    color: #13996b !important;
    page-break-after: avoid;
    break-after: avoid;
    line-height: 1.25;
  }
  .content h1 { font-size: 20pt; margin: 24pt 0 8pt; }
  .content h2 { font-size: 16pt; margin: 20pt 0 6pt; border-bottom: 2px solid #d4f0e3; padding-bottom: 4pt; }
  .content h3 { font-size: 13pt; margin: 16pt 0 4pt; }
  .content p, .content li { font-size: 11.5pt; line-height: 1.55; orphans: 3; widows: 3; }
  .content li { margin-bottom: 3pt; }

  /* Le titre principal (avant le contenu) doit être visible aussi : on
     l'a caché plus haut pour le bloc "single-wrap > h1" mais on veut le
     remplacer par celui de la couverture. Pas besoin d'autre action. */

  /* Liens : afficher l'URL entre parenthèses pour ce qui est imprimé. */
  .content a[href]:not([href^="#"]):not([href^="javascript"]):after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #6a7c87 !important;
    word-break: break-all;
    font-weight: 400;
  }
  /* Pas d'URL pour les ancres internes ni les boutons. */
  .content a[href^="#"]:after,
  .content a.btn:after { content: ""; }

  .content a { color: #13996b !important; text-decoration: underline; }

  /* Images : on cap leur taille pour éviter qu'elles ne débordent. */
  .content img,
  .content figure {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
    break-inside: avoid;
    margin: 12pt 0;
  }
  .content figure img { border-radius: 0; box-shadow: none; }
  .content figcaption {
    font-size: 9.5pt; font-style: italic; color: #6a7c87 !important;
    text-align: center; margin-top: 4pt;
  }

  /* Encadrés / blockquotes / pre. */
  .content blockquote {
    border-left: 4px solid #ffd23f !important;
    background: #fffbe6 !important;
    padding: 10pt 14pt;
    margin: 12pt 0;
    page-break-inside: avoid;
    color: #4a5b66 !important;
  }
  .content pre, .content code {
    font-family: "Courier New", monospace;
    font-size: 10pt;
    background: #f5fbf8 !important;
    border: 1px solid #d4f0e3 !important;
    border-radius: 4pt;
    padding: 2pt 4pt;
  }
  .content pre { padding: 8pt 10pt; page-break-inside: avoid; overflow: visible; white-space: pre-wrap; }

  /* Tables : encadrement propre + retour à la ligne. */
  .content table {
    width: 100% !important;
    border-collapse: collapse;
    page-break-inside: avoid;
    margin: 12pt 0;
  }
  .content table th, .content table td {
    border: 1px solid #d4f0e3;
    padding: 6pt 8pt;
    font-size: 10.5pt;
    text-align: left;
  }
  .content table th { background: #f5fbf8 !important; color: #13996b !important; font-weight: 700; }

  /* Listes (puces aux couleurs de marque). */
  .content ul li::marker { color: #22b884; }
  .content ol li::marker { color: #13996b; font-weight: 700; }

  /* Médias attachés audio/vidéo : on cache (pas imprimables) et on
     remplace par une ligne discrète "🎬 Vidéo disponible en ligne". */
  .post-media { display: none !important; }

  /* Les blocs vidéo/audio Gutenberg : pareil. */
  .content figure.wp-block-audio,
  .content figure.wp-block-video,
  .content figure.wp-block-embed {
    display: none !important;
  }

  /* On ajoute une note discrète en pied de chaque page via @page,
     mais @page { @bottom-center { content: "..."; } } n'est supporté
     que par paged.js et non par les browsers natifs. Skipped. */

  /* Forcer des contrastes lisibles (anti-economy mode). */
  ::selection { background: #ffd23f !important; color: #1d2a33 !important; }
}

/* ============================================================
   PAGE — Aide aux parents (page-aide-parents.php)
   --------------------------------------------------------------
   Toutes les animations sont CSS-only (keyframes en boucle, pas
   de JS). Les démos restent vivantes sans interaction. On respecte
   `prefers-reduced-motion` en bas de bloc pour les utilisateurs qui
   préfèrent réduire les mouvements.
   ============================================================ */

.ap-page {
  --ap-radius: 24px;
  --ap-radius-sm: 14px;
  --ap-shadow: 0 16px 40px -22px rgba(19, 41, 33, .25);
  --ap-shadow-soft: 0 8px 24px -14px rgba(19, 41, 33, .18);
  background: #ffffff;
  overflow-x: hidden; /* protège des blobs qui dépassent */
}

.ap-page .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.ap-section { padding: 80px 0; }
.ap-section--alt {
  background: linear-gradient(180deg, #fffaf1 0%, #ffffff 100%);
}
.ap-section-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.ap-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mint-600);
  background: var(--mint-50);
  border: 1px solid var(--mint-100);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.ap-section-head h2 {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--ink);
}
.ap-section-sub {
  color: var(--ink-3);
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
}

/* ---------- HERO ---------- */
.ap-hero {
  position: relative;
  padding: 70px 0 90px;
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(255, 122, 108, .10) 0%, transparent 60%),
    radial-gradient(50% 70% at 100% 100%, rgba(34, 184, 132, .12) 0%, transparent 60%),
    #fffaf1;
  overflow: hidden;
}
.ap-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.ap-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mint-600);
  background: #ffffff;
  border: 1px solid var(--mint-100);
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: var(--ap-shadow-soft);
}
.ap-eyebrow-dot {
  width: 8px; height: 8px;
  background: var(--mint-500);
  border-radius: 50%;
  animation: ap-pulse 2s ease-in-out infinite;
}
@keyframes ap-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: .6; }
}
.ap-hero-title {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: clamp(36px, 5.4vw, 60px);
  line-height: 1.05;
  color: var(--ink);
  margin: 18px 0 18px;
  letter-spacing: -0.5px;
}
.ap-hero-accent {
  position: relative;
  display: inline-block;
  color: var(--mint-600);
}
.ap-hero-scribble {
  display: inline-block;
  width: 230px;
  height: 18px;
  margin-left: 4px;
  color: var(--coral);
  vertical-align: -2px;
}
.ap-hero-scribble svg { width: 100%; height: 100%; overflow: visible; }
.ap-hero-scribble path {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: ap-scribble 1.6s ease-out 0.4s forwards;
}
@keyframes ap-scribble { to { stroke-dashoffset: 0; } }

.ap-hero-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 540px;
  margin: 0 0 28px;
}
.ap-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
.ap-hero-ctas .btn { font-size: 15px; }
.ap-hero-stats { display: flex; gap: 32px; flex-wrap: wrap; }
.ap-hero-stat { display: flex; flex-direction: column; }
.ap-hero-stat b {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 28px;
  color: var(--mint-600);
  line-height: 1;
}
.ap-hero-stat span { font-size: 13px; color: var(--ink-3); margin-top: 4px; }

/* Hero illustration — mini dashboard */
.ap-hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}
.ap-mini-dashboard {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow);
  overflow: hidden;
  transform: rotate(-1deg);
  animation: ap-float 5s ease-in-out infinite;
}
@keyframes ap-float {
  0%, 100% { transform: rotate(-1deg) translateY(0); }
  50% { transform: rotate(-1deg) translateY(-6px); }
}
.ap-md-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: #f7faf9;
  border-bottom: 1px solid var(--line);
}
.ap-md-dot { width: 11px; height: 11px; border-radius: 50%; }
.ap-md-dot--coral { background: var(--coral); }
.ap-md-dot--sun { background: var(--sun); }
.ap-md-dot--mint { background: var(--mint-500); }
.ap-md-title { margin-left: 12px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.ap-md-body { padding: 22px 22px 14px; display: flex; flex-direction: column; gap: 14px; }
.ap-md-row {
  display: grid;
  grid-template-columns: 70px 1fr 44px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.ap-md-label { font-weight: 700; color: var(--ink-2); }
.ap-md-bar {
  height: 8px;
  background: #f0f4f2;
  border-radius: 999px;
  overflow: hidden;
  display: block;
}
.ap-md-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  transform-origin: left;
  animation: ap-fill 2s cubic-bezier(.2, .8, .2, 1) forwards;
}
.ap-md-fill--mint { background: linear-gradient(90deg, var(--mint-400), var(--mint-600)); animation-delay: 0.2s; }
.ap-md-fill--coral { background: linear-gradient(90deg, var(--coral-soft), var(--coral)); animation-delay: 0.4s; }
.ap-md-fill--sun { background: linear-gradient(90deg, var(--sun-soft), var(--sun)); animation-delay: 0.6s; }
@keyframes ap-fill { to { width: var(--w, 70%); } }
.ap-md-pct { font-weight: 700; color: var(--ink); font-size: 13px; text-align: right; }
.ap-md-foot {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 22px 22px;
  border-top: 1px solid var(--line);
}
.ap-md-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
}
.ap-md-badge--unlocked {
  background: var(--mint-50);
  color: var(--mint-600);
  border: 1px solid var(--mint-200);
  animation: ap-badge-pop 1.2s ease-out 1.4s backwards;
}
.ap-md-badge--unlocking {
  background: #fff;
  color: var(--ink-3);
  border: 1px dashed var(--line);
  position: relative;
  overflow: hidden;
}
.ap-md-badge--unlocking::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(34, 184, 132, .25), transparent);
  transform: translateX(-100%);
  animation: ap-shimmer 2.4s ease-in-out infinite;
}
@keyframes ap-shimmer { to { transform: translateX(100%); } }
@keyframes ap-badge-pop {
  0% { transform: scale(.6); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

.ap-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(32px);
  z-index: 1;
  pointer-events: none;
}
.ap-hero-blob--mint {
  width: 240px; height: 240px;
  background: rgba(34, 184, 132, .35);
  top: -40px; right: -40px;
  animation: ap-blob 9s ease-in-out infinite;
}
.ap-hero-blob--coral {
  width: 180px; height: 180px;
  background: rgba(255, 122, 108, .28);
  bottom: -30px; left: -20px;
  animation: ap-blob 11s ease-in-out infinite reverse;
}
@keyframes ap-blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(20px, -16px) scale(1.08); }
  66% { transform: translate(-12px, 14px) scale(0.94); }
}

/* ---------- CARDS (le site en 30 secondes) ---------- */
.ap-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.ap-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--ap-radius);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ap-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ap-shadow);
}
.ap-card-icon {
  font-size: 36px;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff;
  border-radius: 18px;
  margin-bottom: 16px;
  box-shadow: var(--ap-shadow-soft);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.ap-card:hover .ap-card-icon { transform: rotate(-8deg) scale(1.08); }
.ap-card h3 {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 19px;
  margin: 0 0 8px;
  color: var(--ink);
}
.ap-card p { color: var(--ink-3); font-size: 14.5px; line-height: 1.5; margin: 0; }
.ap-card--mint  { background: linear-gradient(180deg, var(--mint-50), #ffffff); border-color: var(--mint-100); }
.ap-card--coral { background: linear-gradient(180deg, #fff2ef, #ffffff); border-color: #ffd9d2; }
.ap-card--sun   { background: linear-gradient(180deg, #fff6d6, #ffffff); border-color: #ffe79a; }
.ap-card--aqua  { background: linear-gradient(180deg, var(--aqua-50), #ffffff); border-color: var(--aqua-100); }

/* ---------- ACCESS — peut/peut pas ---------- */
.ap-access-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.ap-access-col {
  background: #ffffff;
  border: 2px solid var(--line);
  border-radius: var(--ap-radius);
  padding: 32px 28px;
  position: relative;
}
.ap-access-col--yes { border-color: var(--mint-200); background: linear-gradient(180deg, #ffffff, var(--mint-50)); }
.ap-access-col--no  { border-color: #ffd9d2; background: linear-gradient(180deg, #ffffff, #fff5f3); }
.ap-access-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ap-access-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 22px;
  color: #ffffff;
  flex-shrink: 0;
}
.ap-access-icon--yes { background: var(--mint-500); }
.ap-access-icon--no  { background: var(--coral); }
.ap-access-head h3 {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 22px;
  margin: 0;
  color: var(--ink);
}
.ap-access-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ap-access-list li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.ap-access-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--mint-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2313996b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.ap-access-col--no .ap-access-list li::before {
  background: #ffe1dd;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%23e85546' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- TUTOS ---------- */
.ap-tuto {
  display: grid;
  grid-template-columns: auto 1.1fr 1.4fr;
  gap: 32px;
  align-items: center;
  padding: 40px 0;
  border-bottom: 1px dashed var(--line);
}
.ap-tuto:last-child { border-bottom: 0; }
.ap-tuto--reverse { grid-template-columns: auto 1.4fr 1.1fr; }
.ap-tuto--reverse .ap-tuto-text { order: 3; }
.ap-tuto--reverse .ap-tuto-anim { order: 2; }
.ap-tuto-num {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 56px;
  font-weight: 800;
  color: var(--mint-600);
  line-height: 1;
  width: 80px;
  text-align: center;
  text-shadow: 3px 3px 0 var(--mint-100);
}
.ap-tuto-text h3 {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 24px;
  margin: 0 0 12px;
  color: var(--ink);
}
.ap-tuto-text p { color: var(--ink-2); font-size: 16px; line-height: 1.6; margin: 0 0 14px; }
.ap-tuto-tips { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ap-tuto-tips li {
  position: relative; padding-left: 22px;
  font-size: 14px; color: var(--ink-3); line-height: 1.55;
}
.ap-tuto-tips li::before {
  content: '💡';
  position: absolute; left: 0; top: 1px;
  font-size: 14px;
}
.ap-tuto-tips code {
  background: var(--mint-50);
  border: 1px solid var(--mint-100);
  color: var(--mint-600);
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 1px;
}

.ap-tuto-anim {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--ap-radius);
  padding: 24px;
  box-shadow: var(--ap-shadow);
  min-height: 280px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* TUTO 1 — signup form */
.ap-anim-screen {
  width: 100%;
  background: #f7faf9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.ap-anim-toolbar {
  background: #e9efed;
  padding: 8px 14px;
  font-size: 11px;
  color: var(--ink-3);
  font-family: ui-monospace, monospace;
}
.ap-anim-tab { background: #fff; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); }
.ap-anim-form { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.ap-anim-radio { display: flex; gap: 8px; }
.ap-anim-radio-opt {
  flex: 1; text-align: center; padding: 10px;
  background: #fff; border: 2px solid var(--line);
  border-radius: 12px; font-size: 13px; font-weight: 700;
  transition: all .3s ease;
}
.ap-anim-radio-opt--selected {
  border-color: var(--mint-500);
  background: var(--mint-50);
  color: var(--mint-600);
  animation: ap-select 3s ease-in-out infinite;
}
@keyframes ap-select {
  0%, 100% { transform: scale(1); }
  10%, 14% { transform: scale(1.05); }
}
.ap-anim-input {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: ui-monospace, monospace;
  color: var(--ink-2);
  min-height: 22px;
  display: flex; align-items: center; gap: 2px;
}
.ap-anim-input--email::before { content: '✉️'; margin-right: 8px; }
.ap-anim-input--password::before { content: '🔒'; margin-right: 8px; }
.ap-anim-typing::after {
  content: 'parent@email.com';
  color: var(--ink);
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: ap-type 4s steps(16) infinite;
  vertical-align: bottom;
}
@keyframes ap-type {
  0%, 10% { width: 0; }
  40%, 80% { width: 16ch; }
  100% { width: 0; }
}
.ap-anim-cursor {
  display: inline-block;
  width: 2px; height: 16px;
  background: var(--mint-500);
  margin-left: 2px;
  animation: ap-blink 1s steps(1) infinite;
}
@keyframes ap-blink { 50% { opacity: 0; } }
.ap-anim-dots { color: var(--ink-2); letter-spacing: 2px; }
.ap-anim-btn {
  background: var(--mint-500);
  color: #fff;
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  animation: ap-btn-press 4s ease-in-out infinite;
}
@keyframes ap-btn-press {
  0%, 80% { transform: scale(1); background: var(--mint-500); }
  85% { transform: scale(0.96); background: var(--mint-600); }
  90%, 100% { transform: scale(1); background: var(--mint-500); }
}
.ap-anim-toast {
  background: #fff;
  border: 1px solid var(--mint-200);
  border-left: 3px solid var(--mint-500);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mint-600);
  display: flex; align-items: center; gap: 8px;
  opacity: 0;
  transform: translateY(8px);
  animation: ap-toast 4s ease-in-out infinite;
}
@keyframes ap-toast {
  0%, 88% { opacity: 0; transform: translateY(8px); }
  92%, 99% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}

/* TUTO 2 — link flow */
.ap-link-flow {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.ap-link-card {
  flex: 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 14px;
  text-align: center;
  box-shadow: var(--ap-shadow-soft);
}
.ap-link-card--child { background: linear-gradient(180deg, var(--mint-50), #fff); border-color: var(--mint-200); }
.ap-link-card--parent { background: linear-gradient(180deg, #fff2ef, #fff); border-color: #ffd9d2; }
.ap-link-avatar {
  width: 52px; height: 52px;
  background: #fff;
  border-radius: 50%;
  margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  box-shadow: var(--ap-shadow-soft);
}
.ap-link-name { font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 8px; }
.ap-link-code {
  font-family: ui-monospace, monospace;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--mint-600);
  background: #fff;
  border: 2px dashed var(--mint-300);
  border-radius: 8px;
  padding: 6px 10px;
  display: inline-block;
}
.ap-link-code-label, .ap-link-input-label {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 6px;
}
.ap-link-arrow {
  flex-shrink: 0;
  width: 80px;
  color: var(--mint-500);
  animation: ap-arrow-shimmer 2s linear infinite;
}
.ap-link-arrow svg { display: block; width: 100%; height: auto; }
@keyframes ap-arrow-shimmer {
  0%, 100% { opacity: .5; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(4px); }
}
.ap-link-input {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: ui-monospace, monospace;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--coral);
  min-height: 18px;
  display: inline-flex; align-items: center;
}
.ap-link-typing::after {
  content: 'K7H3NPQR';
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: ap-type-link 4.5s steps(8) infinite;
  vertical-align: bottom;
}
@keyframes ap-type-link {
  0%, 8% { width: 0; }
  35%, 80% { width: 8ch; }
  100% { width: 0; }
}
.ap-link-cursor {
  display: inline-block;
  width: 2px; height: 14px;
  background: var(--coral);
  animation: ap-blink 1s steps(1) infinite;
}
.ap-link-success {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  background: var(--mint-500);
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 20px -8px rgba(34, 184, 132, .6);
  opacity: 0;
  animation: ap-success 4.5s ease-in-out infinite;
}
.ap-link-success span { font-weight: 800; margin-right: 4px; }
@keyframes ap-success {
  0%, 82% { opacity: 0; transform: translate(-50%, 12px); }
  88%, 96% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; }
}

/* TUTO 3 — progress chart */
.ap-progress-card {
  width: 100%;
  background: #fff;
  border-radius: 16px;
  padding: 22px;
  border: 1px solid var(--line);
}
.ap-progress-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.ap-progress-title { font-weight: 700; font-size: 14px; color: var(--ink); }
.ap-progress-pill {
  background: var(--mint-50);
  border: 1px solid var(--mint-200);
  color: var(--mint-600);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
}
.ap-progress-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 130px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 18px;
}
.ap-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--mint-300), var(--mint-500));
  border-radius: 6px 6px 2px 2px;
  height: 0;
  animation: ap-bar-grow 1.4s cubic-bezier(.2, .8, .2, 1) forwards;
}
.ap-bar:nth-child(1) { animation-delay: 0.05s; }
.ap-bar:nth-child(2) { animation-delay: 0.10s; }
.ap-bar:nth-child(3) { animation-delay: 0.15s; }
.ap-bar:nth-child(4) { animation-delay: 0.20s; }
.ap-bar:nth-child(5) { animation-delay: 0.25s; }
.ap-bar:nth-child(6) { animation-delay: 0.30s; }
.ap-bar:nth-child(7) { animation-delay: 0.35s; }
.ap-bar:nth-child(8) { animation-delay: 0.40s; }
.ap-bar:nth-child(9) { animation-delay: 0.45s; background: linear-gradient(180deg, var(--mint-400), var(--mint-600)); }
.ap-bar:nth-child(10) { animation-delay: 0.50s; background: linear-gradient(180deg, var(--coral-soft), var(--coral)); }
@keyframes ap-bar-grow { to { height: var(--h, 50%); } }
.ap-progress-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  text-align: center;
}
.ap-progress-stats > div {
  display: flex; flex-direction: column;
  padding: 10px;
  background: var(--mint-50);
  border-radius: 10px;
}
.ap-progress-stats b {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 22px;
  color: var(--mint-600);
}
.ap-progress-stats span { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

/* TUTO 4 — XP card */
.ap-xp-card {
  width: 100%;
  background: linear-gradient(135deg, #1d2a33 0%, #2a3a45 100%);
  color: #fff;
  border-radius: 16px;
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.ap-xp-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(255, 210, 63, .35), transparent 70%);
  pointer-events: none;
}
.ap-xp-level { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ap-xp-level-num {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--sun), var(--coral));
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #1d2a33;
  box-shadow: 0 6px 18px -6px rgba(255, 210, 63, .6);
  animation: ap-level-glow 3s ease-in-out infinite;
}
@keyframes ap-level-glow {
  0%, 100% { box-shadow: 0 6px 18px -6px rgba(255, 210, 63, .6); }
  50% { box-shadow: 0 6px 26px -4px rgba(255, 210, 63, .9); }
}
.ap-xp-level-label { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: 1px; }
.ap-xp-level-name { font-weight: 800; font-size: 16px; }
.ap-xp-bar {
  position: relative;
  height: 12px;
  background: rgba(255, 255, 255, .1);
  border-radius: 999px;
  overflow: visible;
  margin-bottom: 8px;
}
.ap-xp-fill {
  position: absolute; top: 0; left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--mint-400), var(--mint-500), var(--sun));
  border-radius: 999px;
  width: 0;
  animation: ap-xp-fill 4s ease-out infinite;
  box-shadow: 0 0 12px rgba(34, 184, 132, .5);
}
@keyframes ap-xp-fill {
  0% { width: 50%; }
  60%, 80% { width: 86%; }
  100% { width: 50%; }
}
.ap-xp-pop {
  position: absolute;
  top: -28px; right: 8px;
  background: var(--sun);
  color: #1d2a33;
  font-weight: 800;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 8px;
  opacity: 0;
  animation: ap-xp-pop 4s ease-out infinite;
}
@keyframes ap-xp-pop {
  0%, 50% { opacity: 0; transform: translateY(8px) scale(.8); }
  56%, 75% { opacity: 1; transform: translateY(0) scale(1); }
  85% { opacity: 0; transform: translateY(-12px) scale(1); }
  100% { opacity: 0; }
}
.ap-xp-meta {
  display: flex; justify-content: space-between;
  font-size: 12px; opacity: .8;
  margin-bottom: 18px;
}
.ap-xp-badges { display: flex; gap: 10px; }
.ap-xp-badge {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  position: relative;
}
.ap-xp-badge--locked { filter: grayscale(1) opacity(.3); }
.ap-xp-badge--unlock {
  background: linear-gradient(135deg, var(--sun), var(--coral));
  border-color: var(--sun);
  animation: ap-badge-unlock 4s ease-out infinite;
}
@keyframes ap-badge-unlock {
  0%, 70% { transform: scale(1) rotate(0); box-shadow: 0 0 0 rgba(255, 210, 63, 0); }
  78% { transform: scale(1.25) rotate(-8deg); box-shadow: 0 0 24px rgba(255, 210, 63, .8); }
  88% { transform: scale(1.1) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ---------- GAME (badges flottants) ---------- */
.ap-game-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.ap-game-text h2 {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: clamp(26px, 3.5vw, 36px);
  margin: 14px 0 16px;
  color: var(--ink);
}
.ap-game-text p { color: var(--ink-2); font-size: 16px; line-height: 1.6; margin: 0 0 14px; }
.ap-game-art {
  position: relative;
  height: 360px;
}
.ap-floating-badge {
  position: absolute;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 18px;
  font-size: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: var(--ap-shadow);
  animation: ap-float-badge 6s ease-in-out infinite;
}
.ap-floating-badge small { font-size: 11px; font-weight: 800; color: var(--ink-2); }
.ap-floating-badge--1 { top: 10%; left: 10%; background: linear-gradient(135deg, #fff, var(--mint-50)); animation-delay: 0s; }
.ap-floating-badge--2 { top: 5%; right: 5%; background: linear-gradient(135deg, #fff, #fff6d6); animation-delay: 1.5s; }
.ap-floating-badge--3 { bottom: 15%; left: 25%; background: linear-gradient(135deg, #fff, #fff2ef); animation-delay: 3s; }
.ap-floating-badge--4 { bottom: 5%; right: 12%; background: linear-gradient(135deg, #fff, var(--aqua-50)); animation-delay: 4.5s; }
@keyframes ap-float-badge {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-14px) rotate(2deg); }
}

/* ---------- FAQ ---------- */
.ap-faq-wrap { max-width: 820px; }
.ap-faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--ap-radius-sm);
  padding: 0;
  margin-bottom: 12px;
  transition: all .2s ease;
}
.ap-faq-item[open] {
  border-color: var(--mint-200);
  box-shadow: var(--ap-shadow-soft);
}
.ap-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  position: relative;
  padding-right: 50px;
}
.ap-faq-item summary::-webkit-details-marker { display: none; }
.ap-faq-item summary::after {
  content: '+';
  position: absolute;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  background: var(--mint-50);
  color: var(--mint-600);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 18px;
  transition: transform .2s ease;
}
.ap-faq-item[open] summary::after {
  content: '−';
  background: var(--mint-500);
  color: #fff;
}
.ap-faq-item p {
  margin: 0;
  padding: 0 22px 22px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.65;
}

/* ---------- CTA FINAL ---------- */
.ap-cta-final { padding-bottom: 100px; }
.ap-cta-card {
  background: linear-gradient(135deg, var(--mint-500) 0%, var(--mint-600) 100%);
  border-radius: var(--ap-radius);
  padding: 36px 44px;
  display: flex;
  align-items: center;
  gap: 28px;
  color: #fff;
  box-shadow: 0 24px 60px -24px rgba(34, 184, 132, .55);
  position: relative;
  overflow: hidden;
}
.ap-cta-card::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 63, .35), transparent 65%);
  pointer-events: none;
}
.ap-cta-emoji {
  font-size: 48px;
  width: 72px; height: 72px;
  background: rgba(255, 255, 255, .15);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  animation: ap-bounce 2.4s ease-in-out infinite;
}
@keyframes ap-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.ap-cta-text { flex: 1; }
.ap-cta-text h2 {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 26px;
  margin: 0 0 6px;
  color: #fff;
}
.ap-cta-text p { margin: 0; opacity: .92; font-size: 15px; line-height: 1.55; }
.ap-cta-card .btn-primary {
  background: #fff;
  color: var(--mint-600);
  flex-shrink: 0;
}
.ap-cta-card .btn-primary:hover { background: var(--mint-50); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 960px) {
  .ap-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .ap-hero-art { min-height: 320px; order: -1; }
  .ap-cards { grid-template-columns: repeat(2, 1fr); }
  .ap-access-grid { grid-template-columns: 1fr; }
  .ap-tuto, .ap-tuto--reverse {
    grid-template-columns: auto 1fr;
    gap: 20px;
  }
  .ap-tuto-anim { grid-column: 1 / -1; order: 3 !important; }
  .ap-tuto--reverse .ap-tuto-text { order: 2 !important; }
  .ap-tuto-num { font-size: 44px; width: 60px; }
  .ap-game-wrap { grid-template-columns: 1fr; gap: 32px; }
  .ap-game-art { height: 280px; }
}

@media (max-width: 600px) {
  .ap-section { padding: 56px 0; }
  .ap-cards { grid-template-columns: 1fr; }
  .ap-hero { padding: 50px 0 60px; }
  .ap-hero-stats { gap: 20px; }
  .ap-cta-card {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
  }
  .ap-link-flow { flex-direction: column; gap: 8px; }
  .ap-link-arrow { width: 30px; transform: rotate(90deg); }
  .ap-tuto-num { font-size: 32px; width: 44px; }
  .ap-tuto-text h3 { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ap-page *,
  .ap-page *::before,
  .ap-page *::after {
    animation: none !important;
    transition: none !important;
  }
  .ap-md-fill { width: var(--w, 70%) !important; }
  .ap-bar { height: var(--h, 50%) !important; }
}

/* ============================================================
   PAGES — Footer (rallye-lecture, projets, FAQ, contact)
   --------------------------------------------------------------
   Styles partagés + spécifiques à chaque page. On reste sobre :
   ces pages servent surtout à compléter le maillage et fournir
   un contenu propre, sans surcharger.
   ============================================================ */

/* ---------- Page "Rallye-lecture" : coming-soon ---------- */
.soon-page {
  padding: 80px 0 100px;
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(255, 122, 108, .08) 0%, transparent 60%),
    radial-gradient(50% 70% at 100% 100%, rgba(34, 184, 132, .10) 0%, transparent 60%),
    #fffaf1;
  min-height: 70vh;
}
.soon-hero {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 48px 36px;
  box-shadow: 0 18px 50px -28px rgba(19, 41, 33, .25);
}
.soon-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--coral);
  background: #fff5f3;
  border: 1px solid #ffd9d2;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.soon-hero-pulse {
  width: 8px; height: 8px;
  background: var(--coral);
  border-radius: 50%;
  animation: ap-pulse 2s ease-in-out infinite;
}
.soon-hero-emoji {
  font-size: 60px;
  margin-bottom: 8px;
  animation: ap-bounce 2.4s ease-in-out infinite;
}
.soon-hero h1 {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: clamp(32px, 5vw, 44px);
  margin: 0 0 14px;
  color: var(--ink);
}
.soon-hero-sub {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 32px;
}
.soon-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  max-width: 460px;
  margin: 0 auto 32px;
}
.soon-check {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14.5px;
  font-weight: 600;
  border: 1px solid var(--line);
}
.soon-check-icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.soon-check--done {
  background: var(--mint-50);
  border-color: var(--mint-200);
  color: var(--ink-2);
}
.soon-check--done .soon-check-icon { background: var(--mint-500); }
.soon-check--doing {
  background: #fff6d6;
  border-color: #ffe79a;
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
.soon-check--doing .soon-check-icon {
  background: var(--sun);
  color: #1d2a33;
  position: relative;
}
.soon-check--doing .soon-check-icon::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 2px solid #1d2a33;
  border-right-color: transparent;
  animation: soon-spin 1.2s linear infinite;
}
@keyframes soon-spin { to { transform: rotate(360deg); } }
.soon-check--todo {
  background: #fafafa;
  color: var(--ink-3);
  opacity: .75;
}
.soon-check--todo .soon-check-icon {
  background: transparent;
  border: 2px dashed var(--line);
}
.soon-hero-ctas {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-bottom: 24px;
}
.soon-hero-foot {
  font-size: 14px;
  color: var(--ink-3);
  font-style: italic;
  margin: 0;
}

/* ---------- Page "Projets" ---------- */
.proj-page {
  background: #ffffff;
}
.proj-hero {
  padding: 80px 0 60px;
  background: linear-gradient(180deg, #fffaf1 0%, #ffffff 100%);
  text-align: center;
}
.proj-hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mint-600);
  background: var(--mint-50);
  border: 1px solid var(--mint-100);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.proj-hero-title {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  margin: 0 0 18px;
  color: var(--ink);
}
.proj-hero-accent { color: var(--coral); }
.proj-hero-sub {
  max-width: 640px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}

.proj-axes { padding: 60px 0; }
.proj-section-title {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: clamp(24px, 3.5vw, 32px);
  margin: 0 0 12px;
  color: var(--ink);
  text-align: center;
}
.proj-section-sub {
  text-align: center;
  color: var(--ink-3);
  font-size: 15px;
  margin: 0 0 28px;
}
.proj-axes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 36px;
}
.proj-axe {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 24px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.proj-axe:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(19, 41, 33, .25);
}
.proj-axe-icon {
  font-size: 36px;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 18px;
  margin-bottom: 16px;
  background: #ffffff;
  box-shadow: 0 8px 20px -12px rgba(19, 41, 33, .25);
}
.proj-axe h3 {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 19px;
  margin: 0 0 8px;
  color: var(--ink);
}
.proj-axe p { color: var(--ink-3); font-size: 14.5px; line-height: 1.55; margin: 0; }
.proj-axe--mint  { background: linear-gradient(180deg, var(--mint-50), #ffffff); border-color: var(--mint-100); }
.proj-axe--coral { background: linear-gradient(180deg, #fff2ef, #ffffff); border-color: #ffd9d2; }
.proj-axe--sun   { background: linear-gradient(180deg, #fff6d6, #ffffff); border-color: #ffe79a; }
.proj-axe--aqua  { background: linear-gradient(180deg, var(--aqua-50), #ffffff); border-color: var(--aqua-100); }
.proj-axe--berry { background: linear-gradient(180deg, #f3eeff, #ffffff); border-color: #d8c8ff; }
.proj-axe:hover.proj-axe--mint  { border-color: var(--mint-300); }
.proj-axe:hover.proj-axe--coral { border-color: var(--coral); }
.proj-axe:hover.proj-axe--sun   { border-color: var(--sun); }
.proj-axe:hover.proj-axe--aqua  { border-color: var(--aqua-200); }
.proj-axe:hover.proj-axe--berry { border-color: var(--berry, #8b6bf0); }

.proj-news { padding: 60px 0 90px; background: linear-gradient(180deg, #ffffff 0%, #fffaf1 100%); }
.proj-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  margin-top: 32px;
}
.proj-news-card {
  display: block;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  text-decoration: none;
  color: inherit;
}
.proj-news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(19, 41, 33, .25);
}
.proj-news-thumb {
  aspect-ratio: 16 / 10;
  background: var(--mint-50);
  overflow: hidden;
}
.proj-news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proj-news-thumb--placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
  background: linear-gradient(135deg, var(--mint-50), var(--aqua-50));
}
.proj-news-body { padding: 18px 22px 22px; }
.proj-news-date {
  font-size: 12px;
  color: var(--mint-600);
  font-weight: 700;
  letter-spacing: .3px;
  margin-bottom: 6px;
}
.proj-news-title {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--ink);
  line-height: 1.25;
}
.proj-news-excerpt {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.5;
  margin: 0;
}
.proj-news-foot { text-align: center; margin-top: 36px; }

.proj-empty {
  text-align: center;
  background: #ffffff;
  border: 2px dashed var(--line);
  border-radius: 22px;
  padding: 48px 32px;
  max-width: 580px;
  margin: 0 auto;
}
.proj-empty-emoji { font-size: 48px; margin-bottom: 12px; }
.proj-empty h2 {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 26px;
  margin: 0 0 10px;
  color: var(--ink);
}
.proj-empty p {
  color: var(--ink-3);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 22px;
}

/* ---------- Page "FAQ" ---------- */
.faq-page { background: #ffffff; }
.faq-hero {
  padding: 70px 0 40px;
  background: linear-gradient(180deg, #fffaf1 0%, #ffffff 100%);
  text-align: center;
}
.faq-hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mint-600);
  background: var(--mint-50);
  border: 1px solid var(--mint-100);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.faq-hero h1 {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: clamp(30px, 4.5vw, 42px);
  margin: 0 0 14px;
  color: var(--ink);
}
.faq-hero-sub {
  max-width: 640px;
  margin: 0 auto;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.6;
}
.faq-body { padding: 50px 0 90px; }
.faq-wrap { max-width: 820px; }
.faq-theme { margin-bottom: 44px; }
.faq-theme-title {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 22px;
  margin: 0 0 16px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.faq-item {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 10px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item[open] {
  border-color: var(--mint-200);
  box-shadow: 0 8px 24px -14px rgba(19, 41, 33, .18);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 50px 16px 20px;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ink);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  background: var(--mint-50);
  color: var(--mint-600);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 17px;
}
.faq-item[open] summary::after { content: '−'; background: var(--mint-500); color: #fff; }
.faq-item p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.65;
}
.faq-item p a { color: var(--mint-600); text-decoration: underline; }
.faq-cta {
  margin-top: 40px;
  background: linear-gradient(135deg, var(--mint-500) 0%, var(--mint-600) 100%);
  color: #fff;
  border-radius: 22px;
  padding: 28px 32px;
  display: flex; align-items: center; gap: 22px;
  box-shadow: 0 18px 50px -22px rgba(34, 184, 132, .55);
}
.faq-cta-emoji {
  font-size: 36px;
  width: 60px; height: 60px;
  background: rgba(255, 255, 255, .15);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.faq-cta h3 {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 20px;
  margin: 0 0 6px;
  color: #fff;
}
.faq-cta p { margin: 0; opacity: .92; font-size: 14.5px; line-height: 1.5; }
.faq-cta a { color: #fff; text-decoration: underline; }

/* ---------- Page "Contact" ---------- */
.contact-page { background: #ffffff; }
.contact-hero {
  padding: 70px 0 50px;
  background:
    radial-gradient(50% 70% at 100% 100%, rgba(34, 184, 132, .10) 0%, transparent 60%),
    #fffaf1;
}
.contact-hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 44px;
  align-items: start;
}
.contact-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mint-600);
  background: #ffffff;
  border: 1px solid var(--mint-100);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
  box-shadow: 0 8px 20px -14px rgba(19, 41, 33, .15);
}
.contact-hero-pulse {
  width: 8px; height: 8px;
  background: var(--mint-500);
  border-radius: 50%;
  animation: ap-pulse 2s ease-in-out infinite;
}
.contact-hero-text h1 {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  margin: 0 0 16px;
  color: var(--ink);
}
.contact-hero-accent { color: var(--mint-600); }
.contact-hero-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 28px;
  max-width: 540px;
}
.contact-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.contact-hero-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 26px;
  box-shadow: 0 18px 50px -28px rgba(19, 41, 33, .25);
}
.contact-hero-card h2 {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 20px;
  margin: 0 0 14px;
  color: var(--ink);
}
.contact-tips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-tips li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.contact-tips li::before {
  content: '•';
  position: absolute;
  left: 4px; top: 0;
  color: var(--mint-500);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
}

.contact-routes { padding: 70px 0; }
.contact-section-title {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: clamp(24px, 3.5vw, 32px);
  margin: 0 0 36px;
  color: var(--ink);
  text-align: center;
}
.contact-routes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.contact-route {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 24px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.contact-route:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(19, 41, 33, .25);
}
.contact-route-icon {
  font-size: 32px;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
  margin-bottom: 14px;
  background: #ffffff;
  box-shadow: 0 8px 20px -12px rgba(19, 41, 33, .25);
}
.contact-route h3 {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--ink);
}
.contact-route p { color: var(--ink-3); font-size: 14.5px; line-height: 1.55; margin: 0; }
.contact-route--mint  { background: linear-gradient(180deg, var(--mint-50), #ffffff); border-color: var(--mint-100); }
.contact-route--coral { background: linear-gradient(180deg, #fff2ef, #ffffff); border-color: #ffd9d2; }
.contact-route--sun   { background: linear-gradient(180deg, #fff6d6, #ffffff); border-color: #ffe79a; }

.contact-final { padding: 0 0 90px; }
.contact-final-card {
  background: linear-gradient(135deg, var(--mint-500) 0%, var(--mint-600) 100%);
  color: #fff;
  border-radius: 24px;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  gap: 24px;
  box-shadow: 0 24px 60px -24px rgba(34, 184, 132, .55);
  position: relative;
  overflow: hidden;
}
.contact-final-card::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 63, .35), transparent 65%);
  pointer-events: none;
}
.contact-final-emoji {
  font-size: 40px;
  width: 64px; height: 64px;
  background: rgba(255, 255, 255, .15);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  animation: ap-bounce 2.4s ease-in-out infinite;
}
.contact-final-text { flex: 1; min-width: 0; }
.contact-final-text h2 {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 24px;
  margin: 0 0 6px;
  color: #fff;
}
.contact-final-text p { margin: 0; opacity: .92; font-size: 15px; line-height: 1.55; }
.contact-final-card .btn-primary {
  background: #fff;
  color: var(--mint-600);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.contact-final-card .btn-primary:hover { background: var(--mint-50); }

/* ---------- Responsive footer-pages ---------- */
@media (max-width: 760px) {
  .contact-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .contact-hero-card { order: 2; }
  .faq-cta { flex-direction: column; text-align: center; }
  .contact-final-card { flex-direction: column; text-align: center; padding: 28px 24px; }
}

/* ============================================================
   PAGE — Abonnements (page-abonnements.php)
   --------------------------------------------------------------
   Grille tarifaire publique. La page lit `crol_subscription_tiers`
   en option et reflète automatiquement les changements admin —
   les seules conventions visuelles ici sont sur la couleur
   (mint / coral / sun / aqua / berry) et le flag highlighted.
   ============================================================ */

.sub-page { background: #ffffff; }

/* ---------- Hero ---------- */
.sub-hero {
  padding: 80px 0 40px;
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(255, 122, 108, .08) 0%, transparent 60%),
    radial-gradient(50% 70% at 100% 100%, rgba(34, 184, 132, .10) 0%, transparent 60%),
    #fffaf1;
  text-align: center;
}
.sub-hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mint-600);
  background: var(--mint-50);
  border: 1px solid var(--mint-100);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.sub-hero-title {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  margin: 0 0 18px;
  color: var(--ink);
}
.sub-hero-accent { color: var(--coral); }
.sub-hero-sub {
  max-width: 640px;
  margin: 0 auto 24px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}

.sub-hero-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid var(--mint-200);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  box-shadow: 0 8px 20px -12px rgba(19, 41, 33, .15);
  margin-bottom: 24px;
}
.sub-hero-status--ok { color: var(--mint-600); }
.sub-hero-status > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: var(--mint-500);
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  font-size: 13px;
}
.sub-hero-status a { color: var(--mint-600); margin-left: 4px; font-weight: 700; }

/* ---------- Toggle Mensuel / Annuel ---------- */
.sub-period-toggle {
  display: inline-flex;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin-top: 8px;
  box-shadow: 0 8px 20px -12px rgba(19, 41, 33, .15);
}
.sub-period-btn {
  background: transparent;
  border: 0;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-3);
  cursor: pointer;
  transition: all .2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sub-period-btn.is-active {
  background: var(--mint-500);
  color: #ffffff;
}
.sub-period-save {
  background: var(--sun);
  color: #1d2a33;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .3px;
}
.sub-period-btn.is-active .sub-period-save {
  background: #ffffff;
  color: var(--mint-600);
}

/* ---------- Grille des tiers ---------- */
.sub-pricing { padding: 50px 0 70px; }
.sub-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  align-items: stretch;
  max-width: 980px;
  margin: 0 auto;
}
.sub-tier {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sub-tier:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px -22px rgba(19, 41, 33, .25);
}
.sub-tier--featured {
  border: 2px solid var(--coral);
  background: linear-gradient(180deg, #fff5f3 0%, #ffffff 70%);
  transform: scale(1.02);
}
.sub-tier--featured:hover { transform: scale(1.02) translateY(-4px); }
.sub-tier--current {
  border-color: var(--mint-500);
  background: linear-gradient(180deg, var(--mint-50) 0%, #ffffff 70%);
}

.sub-tier-ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--coral);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 8px 18px -8px rgba(255, 122, 108, .55);
}
.sub-tier-ribbon--current { background: var(--mint-500); box-shadow: 0 8px 18px -8px rgba(34, 184, 132, .55); }

.sub-tier-label {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 24px;
  margin: 0 0 4px;
  color: var(--ink);
}
.sub-tier-tagline {
  color: var(--ink-3);
  font-size: 14px;
  margin: 0 0 20px;
}

.sub-tier-price { margin: 12px 0 24px; }
.sub-tier-price-amount {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 42px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}
.sub-tier-price-amount small {
  font-size: 22px;
  font-weight: 700;
  color: var(--mint-600);
  margin-left: 2px;
}
.sub-tier-price-period {
  display: inline-block;
  margin-left: 6px;
  font-size: 14px;
  color: var(--ink-3);
}
.sub-tier-price-yearly-hint {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-3);
  font-style: italic;
}

.sub-tier-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.sub-tier-feat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.sub-tier-feat-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  font-size: 12px;
  margin-top: 2px;
}
.sub-tier-feat--yes .sub-tier-feat-icon {
  background: var(--mint-100);
  color: var(--mint-600);
}
.sub-tier-feat--no  {
  color: var(--ink-3);
  opacity: .65;
}
.sub-tier-feat--no  .sub-tier-feat-icon {
  background: #fee2e2;
  color: #b91c1c;
}

.sub-tier-cta-wrap { margin-top: auto; }
.sub-tier-cta {
  width: 100%;
  justify-content: center;
  font-size: 15px;
  padding: 12px 18px;
}
.sub-tier-cta[disabled] { opacity: .55; cursor: not-allowed; }

/* Variantes de couleur — surlignent juste l'accent prix + bouton */
.sub-tier--mint  .sub-tier-price-amount small { color: var(--mint-600); }
.sub-tier--coral .sub-tier-price-amount small { color: var(--coral); }
.sub-tier--sun   .sub-tier-price-amount small { color: #b88a00; }
.sub-tier--aqua  .sub-tier-price-amount small { color: #4fa9ac; }
.sub-tier--berry .sub-tier-price-amount small { color: var(--berry, #8b6bf0); }

.sub-pricing-foot {
  text-align: center;
  margin-top: 36px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.sub-pricing-foot svg { color: var(--mint-600); }

/* ---------- Bandeau de rassurance ---------- */
.sub-trust {
  padding: 70px 0;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf1 100%);
}
.sub-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}
.sub-trust-item {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 20px;
  text-align: center;
}
.sub-trust-emoji { font-size: 32px; margin-bottom: 10px; }
.sub-trust-item h3 {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 16px;
  margin: 0 0 6px;
  color: var(--ink);
}
.sub-trust-item p {
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.5;
}

/* ---------- FAQ tarifs (réutilise les styles .faq mais préfixés sub-) ---------- */
.sub-faq { padding: 60px 0 90px; }
.sub-faq-wrap { max-width: 760px; }
.sub-faq-title {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: clamp(24px, 3.5vw, 32px);
  margin: 0 0 28px;
  color: var(--ink);
  text-align: center;
}
.sub-faq-item {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 10px;
}
.sub-faq-item[open] {
  border-color: var(--mint-200);
  box-shadow: 0 8px 24px -14px rgba(19, 41, 33, .18);
}
.sub-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 50px 16px 20px;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ink);
  position: relative;
}
.sub-faq-item summary::-webkit-details-marker { display: none; }
.sub-faq-item summary::after {
  content: '+';
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  background: var(--mint-50);
  color: var(--mint-600);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 17px;
}
.sub-faq-item[open] summary::after { content: '−'; background: var(--mint-500); color: #fff; }
.sub-faq-item p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.65;
}

/* ============================================================
   GATED NOTICES — variantes par raison (login / subscribe / expired)
   --------------------------------------------------------------
   Le single.php pose une classe `.gated-notice--{login,subscribe,expired}`
   en plus de `.gated-notice` selon `crol_user_gate_reason()`. On garde
   la base existante (déjà stylée ailleurs) et on ajoute des variantes.
   ============================================================ */
.gated-notice {
  position: relative;
  background: #ffffff;
  border: 2px dashed var(--line);
  border-radius: 22px;
  padding: 36px 32px;
  text-align: center;
  margin: 24px 0;
}
.gated-notice-icon {
  font-size: 44px;
  margin-bottom: 12px;
}
.gated-notice h2 {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: clamp(22px, 3vw, 28px);
  margin: 0 0 12px;
  color: var(--ink);
}
.gated-notice p {
  max-width: 560px;
  margin: 0 auto 22px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.6;
}
.gated-notice-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.gated-notice--login {
  background: linear-gradient(180deg, var(--mint-50), #ffffff);
  border-color: var(--mint-200);
}
.gated-notice--subscribe {
  background: linear-gradient(180deg, #fff5f3, #ffffff);
  border-color: #ffd9d2;
}
.gated-notice--expired {
  background: linear-gradient(180deg, #fff6d6, #ffffff);
  border-color: #ffe79a;
}

/* ---------- Responsive abonnements ---------- */
@media (max-width: 720px) {
  .sub-tier--featured { transform: none; }
  .sub-tier--featured:hover { transform: translateY(-4px); }
  .sub-pricing-grid { gap: 28px; }
  .sub-tier-ribbon { font-size: 10px; padding: 5px 12px; }
}

/* ============================================================
   HOME — Section "Rejoindre la classe" (variantes des sub-tiers)
   --------------------------------------------------------------
   La section home utilise les mêmes classes `.sub-tier-*` que la
   page /abonnements/ (source visuelle commune), avec quelques
   ajustements compactant pour éviter que le bloc prenne toute
   la hauteur de l'écran. La grille est aussi limitée à 980px
   max comme sur /abonnements/, centrée.
   ============================================================ */

.home-sub-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  align-items: stretch;
  max-width: 880px;
  margin: 28px auto 0;
}
.home-sub-pricing-grid .sub-tier {
  padding: 28px 24px; /* un poil plus compact que sur /abonnements/ */
}
.home-sub-pricing-grid .sub-tier-features { gap: 8px; margin-bottom: 18px; }
.home-sub-pricing-grid .sub-tier-feat { font-size: 14px; }
.home-sub-pricing-grid .sub-tier-feat--more {
  color: var(--mint-600);
  font-weight: 600;
}
.home-sub-pricing-grid .sub-tier-feat--more .sub-tier-feat-icon {
  background: var(--mint-50);
  color: var(--mint-600);
}

.home-sub-status {
  max-width: 540px;
  margin: 0 auto 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid var(--mint-200);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mint-600);
  box-shadow: 0 8px 20px -12px rgba(19, 41, 33, .15);
  text-align: left;
}
.home-sub-status > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: var(--mint-500);
  color: #ffffff;
  border-radius: 50%;
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
}
.home-sub-status a { color: var(--mint-600); margin-left: 4px; font-weight: 700; text-decoration: underline; }

.home-sub-foot {
  text-align: center;
  margin: 32px 0 12px;
}
.home-sub-foot-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mint-600);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
  transition: background .2s ease;
}
.home-sub-foot-link:hover {
  background: var(--mint-50);
}
.home-sub-foot-link svg { transition: transform .2s ease; }
.home-sub-foot-link:hover svg { transform: translateX(3px); }

/* Le strip "enseignant" du bas — déjà stylé via `.join-footer-strip` mais on
   met à jour pour gérer 2 CTAs au lieu d'1 (formule Famille + tarif établissement). */
.join-footer-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .join-footer-ctas { width: 100%; justify-content: stretch; }
  .join-footer-ctas .btn { flex: 1; justify-content: center; }
  .home-sub-pricing-grid { max-width: 100%; }
}

/* ============================================================
   ABONNEMENT — onglet "Mon compte → Abonnement"
   ============================================================ */

.abo-card {
  position: relative;
  overflow: hidden;
  padding: 28px 28px 24px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
}
.abo-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--mint-400), var(--mint-600));
}
.abo-card--coral::before { background: linear-gradient(90deg, var(--coral-soft), var(--coral)); }
.abo-card--sun::before   { background: linear-gradient(90deg, var(--sun-soft), var(--sun)); }
.abo-card--mint::before  { background: linear-gradient(90deg, var(--mint-400), var(--mint-600)); }

.abo-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.abo-tier-label {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 26px; font-weight: 800;
  color: var(--ink); line-height: 1.1;
}
.abo-tier-tagline { color: var(--ink-3); font-size: 14px; margin-top: 2px; }

.abo-status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700;
  background: #f4f7f6; color: var(--ink-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.abo-status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3);
}
.abo-status-pill--active   { background: var(--mint-50); color: var(--mint-600); border-color: var(--mint-200); }
.abo-status-pill--active   .abo-status-dot { background: var(--mint-500); animation: ap-pulse 2s ease-in-out infinite; }
.abo-status-pill--trial    { background: var(--mint-50); color: var(--mint-600); border-color: var(--mint-200); }
.abo-status-pill--trial    .abo-status-dot { background: var(--mint-500); }
.abo-status-pill--classe   { background: #fff6d6; color: #b88a00; border-color: #ffe79a; }
.abo-status-pill--classe   .abo-status-dot { background: var(--sun); }
.abo-status-pill--past_due { background: #fff2ef; color: var(--coral); border-color: #ffd9d2; }
.abo-status-pill--past_due .abo-status-dot { background: var(--coral); animation: ap-pulse 1.4s ease-in-out infinite; }
.abo-status-pill--cancelled{ background: #f7f9fa; color: var(--ink-3); border-color: var(--line); }
.abo-status-pill--free     { background: #f7f9fa; color: var(--ink-3); border-color: var(--line); }

.abo-meta {
  color: var(--ink-3);
  font-size: 14px;
  margin: 8px 0 14px;
}
.abo-alert { margin: 12px 0 16px; }
.abo-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 14px;
}
.abo-actions .btn { font-size: 14.5px; }
.abo-classe-note {
  background: #fff6d6;
  border: 1px solid #ffe79a;
  color: #6a4e00;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 600;
  margin: 0;
  display: flex; align-items: center; gap: 8px;
}

.abo-portal-help {
  margin-top: 18px;
  padding: 14px 16px;
  background: #f7faf9;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 13.5px;
}
.abo-portal-help summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink-2);
  list-style: none;
  position: relative;
  padding-right: 28px;
}
.abo-portal-help summary::-webkit-details-marker { display: none; }
.abo-portal-help summary::after {
  content: '+';
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--mint-500); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
}
.abo-portal-help[open] summary::after { content: '−'; }
.abo-portal-help ul { margin: 12px 0 8px; padding-left: 22px; }
.abo-portal-help li { margin-bottom: 4px; color: var(--ink-2); }
.abo-portal-help p { color: var(--ink-3); font-size: 13px; margin: 8px 0 0; }

/* ---------- Carte d'invitation (foyer Famille) ---------- */
.abo-invite-card {
  background: linear-gradient(180deg, var(--mint-50) 0%, #ffffff 60%);
  border: 1px solid var(--mint-100);
}
.abo-invite-card h2 {
  font-family: Fredoka, Nunito, sans-serif;
  margin: 0 0 8px;
  color: var(--ink);
}
.abo-invite-card .sub { margin-bottom: 16px; }

.abo-invite-link-block {
  display: flex; gap: 8px; flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px 6px 6px 14px;
  margin-bottom: 12px;
}
.abo-invite-link {
  flex: 1; min-width: 0;
  border: 0; outline: 0;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  color: var(--ink-2);
  padding: 8px 4px;
}
.abo-invite-link:focus { outline: 2px solid var(--mint-300); border-radius: 6px; }
.abo-invite-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.abo-invite-actions .btn.is-copied { background: var(--mint-500); color: #fff; }
.abo-invite-foot {
  margin-top: 12px;
  padding: 10px 14px;
  background: #fff;
  border: 1px dashed var(--mint-200);
  border-radius: 10px;
  color: var(--ink-3);
  font-size: 12.5px;
  display: flex; align-items: center; gap: 8px;
}

.abo-linked-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--mint-200);
  border-radius: 14px;
  margin-top: 10px;
}
.abo-linked-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 18px;
  flex-shrink: 0;
}
.abo-linked-info { flex: 1; min-width: 0; }
.abo-linked-info .sub {
  font-size: 12.5px; color: var(--ink-3);
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}
.abo-linked-status {
  font-size: 12.5px; font-weight: 700;
  color: var(--mint-600);
  background: var(--mint-50);
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--mint-200);
}

/* ============================================================
   MODALE DE BIENVENUE post-checkout (#crolWelcomeModal)
   --------------------------------------------------------------
   On réutilise les classes `.modal-backdrop` / `.modal-wrap` /
   `.modal` pour bénéficier des transitions communes, en surcouche
   avec `.welcome-modal-*` pour les détails brandés.
   ============================================================ */

.welcome-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(13, 31, 25, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9000;
  opacity: 0;
  transition: opacity .3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.welcome-modal-backdrop.open { opacity: 1; }
.welcome-modal-backdrop[hidden] { display: none; }

body.welcome-modal-open { overflow: hidden; }

.welcome-modal-backdrop .modal-wrap {
  width: 100%;
  max-width: 540px;
  margin: auto;
}

.welcome-modal {
  background: #ffffff;
  border-radius: 28px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(13, 31, 25, .55), 0 0 0 1px rgba(255,255,255,.5);
  position: relative;
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
}
.welcome-modal-backdrop.open .welcome-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.welcome-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  z-index: 2;
  transition: background .2s ease;
}
.welcome-modal-close:hover { background: var(--mint-50); }

/* Confettis stylisés en arrière-plan du header */
.welcome-burst {
  position: absolute; top: 0; left: 0; right: 0; height: 200px;
  pointer-events: none;
  overflow: hidden;
}
.welcome-confetti {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 2px;
  opacity: 0;
  animation: welcome-confetti-fall 1.8s cubic-bezier(.2, .8, .2, 1) forwards;
}
.welcome-confetti--1 { left: 12%; background: var(--mint-500);  animation-delay: 0.05s; }
.welcome-confetti--2 { left: 28%; background: var(--coral);     animation-delay: 0.20s; }
.welcome-confetti--3 { left: 44%; background: var(--sun);       animation-delay: 0.10s; }
.welcome-confetti--4 { left: 60%; background: var(--mint-400);  animation-delay: 0.30s; }
.welcome-confetti--5 { left: 76%; background: var(--coral-soft);animation-delay: 0.15s; }
.welcome-confetti--6 { left: 92%; background: var(--sun-soft);  animation-delay: 0.25s; }
@keyframes welcome-confetti-fall {
  0%   { opacity: 0; transform: translateY(-30px) rotate(0); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(220px) rotate(540deg); }
}

.welcome-header {
  background: linear-gradient(135deg, var(--mint-50) 0%, #fffaf1 100%);
  padding: 44px 32px 28px;
  text-align: center;
  position: relative;
}
.welcome-emoji {
  font-size: 56px;
  margin-bottom: 8px;
  display: inline-block;
  animation: welcome-emoji-bounce .8s cubic-bezier(.2, .8, .2, 1.2) .15s backwards;
}
@keyframes welcome-emoji-bounce {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.welcome-title {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: clamp(22px, 4vw, 28px);
  margin: 0 0 8px;
  color: var(--ink);
  line-height: 1.15;
}
.welcome-sub {
  margin: 0 auto;
  max-width: 380px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

.welcome-invite-block {
  padding: 22px 32px 8px;
  border-top: 1px dashed var(--line);
}
.welcome-invite-head {
  display: flex; gap: 12px;
  margin-bottom: 16px;
  align-items: flex-start;
}
.welcome-invite-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  background: var(--mint-50);
  border: 1px solid var(--mint-200);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.welcome-invite-title {
  font-family: Fredoka, Nunito, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 4px;
}
.welcome-invite-sub {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.55;
}
.welcome-invite-email { width: 100%; justify-content: center; }
.welcome-invite-foot {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--mint-50);
  border-radius: 10px;
  font-size: 12px;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 8px;
  line-height: 1.45;
}

.welcome-linked {
  margin: 0 32px 16px;
  padding: 14px 16px;
  background: var(--mint-50);
  border: 1px solid var(--mint-200);
  border-radius: 14px;
  font-size: 14.5px;
  color: var(--mint-600);
  display: flex; align-items: center; gap: 8px;
  font-weight: 600;
}

.welcome-actions {
  padding: 22px 32px 28px;
  display: flex; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--line);
}
.welcome-actions .btn { flex: 1 1 auto; justify-content: center; }
.welcome-actions .btn-primary { min-width: 200px; }

@media (max-width: 540px) {
  .welcome-header { padding: 36px 24px 22px; }
  .welcome-invite-block { padding: 18px 24px 4px; }
  .welcome-actions { padding: 18px 24px 24px; flex-direction: column; }
  .welcome-actions .btn { width: 100%; }
}

/* ============================================================
   PAGE — /securiser-mon-compte/
   --------------------------------------------------------------
   Premier login d'un compte de classe → écran bloquant qui
   demande email + mot de passe perso. Visuel proche de la modal
   de bienvenue post-checkout pour cohérence (confettis, emoji
   qui rebondit, header gradient).
   ============================================================ */

.secure-page {
  background:
    radial-gradient(50% 70% at 12% 0%, rgba(255, 122, 108, .10) 0%, transparent 60%),
    radial-gradient(40% 60% at 100% 100%, rgba(34, 184, 132, .12) 0%, transparent 60%),
    #fffaf1;
  min-height: 80vh;
  padding: 50px 0 80px;
}

.secure-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 30px 80px -36px rgba(13, 31, 25, .35);
  padding: 0; /* on gère le padding via .secure-head et .secure-form */
}

.secure-burst {
  position: absolute;
  top: 0; left: 0; right: 0; height: 180px;
  pointer-events: none;
  overflow: hidden;
}
.secure-confetti {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 2px;
  opacity: 0;
  animation: secure-confetti-fall 1.6s cubic-bezier(.2, .8, .2, 1) forwards;
}
.secure-confetti--1 { left: 18%; background: var(--mint-500);  animation-delay: 0.10s; }
.secure-confetti--2 { left: 38%; background: var(--coral);     animation-delay: 0.25s; }
.secure-confetti--3 { left: 60%; background: var(--sun);       animation-delay: 0.15s; }
.secure-confetti--4 { left: 82%; background: var(--mint-400);  animation-delay: 0.35s; }
@keyframes secure-confetti-fall {
  0%   { opacity: 0; transform: translateY(-25px) rotate(0); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(200px) rotate(420deg); }
}

.secure-head {
  background: linear-gradient(135deg, var(--mint-50) 0%, #fffaf1 100%);
  padding: 44px 32px 24px;
  text-align: center;
  position: relative;
}
.secure-emoji {
  font-size: 56px;
  margin-bottom: 8px;
  display: inline-block;
  animation: welcome-emoji-bounce .8s cubic-bezier(.2, .8, .2, 1.2) .15s backwards;
}
.secure-head h1 {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: clamp(24px, 4vw, 30px);
  margin: 0 0 8px;
  color: var(--ink);
  line-height: 1.15;
}
.secure-head .sub {
  margin: 0 auto;
  max-width: 440px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

.secure-info {
  display: flex; gap: 12px;
  margin: 0 32px;
  padding: 14px 18px;
  background: var(--mint-50);
  border: 1px solid var(--mint-200);
  border-radius: 14px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.secure-info > span:first-child {
  flex-shrink: 0;
  font-size: 22px; line-height: 1;
}

.secure-form {
  padding: 22px 32px 28px;
}
.secure-form .auth-submit { width: 100%; justify-content: center; margin-top: 16px; }

.secure-foot {
  margin: 0 32px 24px;
  padding: 12px 16px;
  background: #f7f9fa;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--ink-3);
  font-size: 12.5px;
  display: flex; align-items: center; gap: 8px;
  line-height: 1.5;
}
.secure-foot a { color: var(--mint-600); font-weight: 600; }

@media (max-width: 540px) {
  .secure-head { padding: 36px 22px 20px; }
  .secure-info { margin: 0 22px; }
  .secure-form { padding: 18px 22px 22px; }
  .secure-foot { margin: 0 22px 22px; }
}