/* ═══════════════════════════════════════════════════════
   PRÉPA EXAMEN CIVIQUE — Design System
   Cloned from qcmcivique.fr design language
   Primary: hsl(220 80% 45%) | Accent: hsl(355 75% 52%)
   ═══════════════════════════════════════════════════════ */

*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:hsl(var(--border))}
h1,h2,h3,h4,h5,h6,p{margin:0}
ol,ul{list-style:none;margin:0;padding:0}
img,svg{display:block;vertical-align:middle}
img{max-width:100%;height:auto}
button{font-family:inherit;cursor:pointer;background:none;border:0;padding:0;color:inherit}
a{color:inherit;text-decoration:none}

:root {
  --background:    0 0% 100%;
  --foreground:    220 15% 20%;
  --card:          0 0% 100%;
  --card-foreground:220 15% 20%;
  --primary:       220 80% 45%;
  --primary-foreground:0 0% 100%;
  --primary-hover: 220 80% 38%;
  --accent:        355 75% 52%;
  --accent-foreground:0 0% 100%;
  --accent-hover:  355 75% 45%;
  --secondary:     220 15% 96%;
  --secondary-foreground:220 15% 20%;
  --muted:         220 15% 96%;
  --muted-foreground:220 12% 46%;
  --destructive:   0 75% 52%;
  --destructive-foreground:0 0% 100%;
  --border:        220 15% 88%;
  --input:         220 15% 88%;
  --ring:          220 80% 45%;
  --radius:        .75rem;
  --success:       142 76% 36%;
  --shadow-soft:   0 2px 8px -2px hsl(220 15% 20%/.08);
  --shadow-medium: 0 4px 16px -4px hsl(220 15% 20%/.12);
  --shadow-strong: 0 8px 32px -8px hsl(220 15% 20%/.16);
}

html { line-height:1.5; -webkit-text-size-adjust:100%; font-family:ui-sans-serif,system-ui,sans-serif; }
body { margin:0; background:hsl(var(--background)); color:hsl(var(--foreground)); line-height:1.5; }

/* ── Typography ─────────────────────────────────────── */
h1 { font-size:clamp(1.875rem,5vw,3rem); font-weight:700; line-height:1.2; }
h2 { font-size:clamp(1.5rem,3.5vw,1.875rem); font-weight:700; line-height:1.3; }
h3 { font-size:1.125rem; font-weight:700; line-height:1.4; }
h4 { font-size:1rem; font-weight:600; }

/* ── Layout ─────────────────────────────────────────── */
.container { max-width:1280px; margin:0 auto; padding:0 1rem; }
@media(min-width:640px){ .container{ padding:0 1.5rem; } }
@media(min-width:1024px){ .container{ padding:0 2rem; } }

/* ── Gradient text (hero title) ─────────────────────── */
.gradient-text {
  background:linear-gradient(to right, hsl(var(--primary)), hsl(var(--accent)));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:500; font-size:.875rem; line-height:1; white-space:nowrap;
  border-radius:var(--radius); padding:.625rem 1.25rem;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  cursor:pointer; border:none; font-family:inherit;
  outline:none;
}
.btn:focus-visible { box-shadow:0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--background)); }
.btn-primary {
  background:hsl(var(--primary)); color:hsl(var(--primary-foreground));
}
.btn-primary:hover { background:hsl(var(--primary-hover)); }
.btn-accent {
  background:hsl(var(--accent)); color:hsl(var(--accent-foreground));
}
.btn-accent:hover { background:hsl(var(--accent-hover)); }
.btn-secondary {
  background:hsl(var(--secondary)); color:hsl(var(--secondary-foreground));
}
.btn-secondary:hover { background:hsl(var(--muted)); }
.btn-outline {
  background:transparent; color:hsl(var(--foreground));
  border:1.5px solid hsl(var(--border));
}
.btn-outline:hover { background:hsl(var(--secondary)); }
.btn-outline-primary {
  background:transparent; color:hsl(var(--primary));
  border:1.5px solid hsl(var(--primary));
}
.btn-outline-primary:hover { background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); }
.btn-ghost {
  background:transparent; color:hsl(var(--foreground));
}
.btn-ghost:hover { background:hsl(var(--secondary)); }
.btn-lg { padding:.875rem 1.75rem; font-size:1rem; border-radius:var(--radius); }
.btn-sm { padding:.375rem .75rem; font-size:.8125rem; border-radius:.5rem; }
.btn-xs { padding:.25rem .625rem; font-size:.75rem; border-radius:.375rem; }
.btn-pill { border-radius:9999px; }
.btn-full { width:100%; }
.btn:disabled { opacity:.5; pointer-events:none; }

/* ── Card ────────────────────────────────────────────── */
.card {
  background:hsl(var(--card)); color:hsl(var(--card-foreground));
  border-radius:var(--radius); border:1px solid hsl(var(--border));
  box-shadow:var(--shadow-soft);
}
.card-hover {
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.card-hover:hover {
  box-shadow:var(--shadow-strong);
  transform:translateY(-2px);
}

/* ── Badge / Pill ────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center;
  border-radius:9999px; padding:.25rem .75rem;
  font-size:.75rem; font-weight:500; line-height:1;
  border:1px solid transparent;
}
.badge-primary { background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); }
.badge-accent   { background:hsl(var(--accent)); color:hsl(var(--accent-foreground)); }
.badge-destructive { background:hsl(var(--destructive)); color:hsl(var(--destructive-foreground)); }
.badge-secondary{ background:hsl(var(--secondary)); color:hsl(var(--secondary-foreground)); border-color:hsl(var(--border)); }
.badge-outline  { background:transparent; border-color:hsl(var(--border)); color:hsl(var(--foreground)); }
.badge-success  { background:hsl(var(--success)); color:#fff; }

/* ── Avatar circle ───────────────────────────────────── */
.avatar {
  border-radius:9999px; display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:.875rem; flex-shrink:0;
}

/* ── NAVBAR ──────────────────────────────────────────── */
.pec-header {
  background:hsl(var(--background));
  border-bottom:1px solid hsl(var(--border));
  position:sticky; top:0; z-index:50;
}
.pec-header-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:4rem; /* 64px */
}
.pec-logo {
  display:flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:1.125rem; color:hsl(var(--primary));
  transition:color .3s;
}
.pec-logo:hover { color:hsl(var(--primary-hover)); }
.pec-logo-text { display:none; }
@media(min-width:640px){ .pec-logo-text{ display:inline; } }

.pec-nav-links {
  display:none; align-items:center; gap:1.5rem;
}
@media(min-width:1024px){ .pec-nav-links{ display:flex; } }

.pec-nav-link {
  font-size:.875rem; font-weight:500;
  color:hsl(var(--muted-foreground));
  transition:all .3s; padding:.25rem 0;
}
.pec-nav-link:hover { color:hsl(var(--primary)); }
.pec-nav-link.active {
  color:hsl(var(--primary));
  border-bottom:2px solid hsl(var(--primary));
}
/* Highlighted nav link (QCM) */
.pec-nav-link-cta {
  font-size:.875rem; font-weight:600;
  background:hsl(var(--primary)); color:hsl(var(--primary-foreground));
  padding:.375rem .75rem; border-radius:9999px;
  box-shadow:var(--shadow-soft);
  transition:all .3s;
}
.pec-nav-link-cta:hover { background:hsl(var(--primary-hover)); transform:scale(1.05); }

.pec-nav-right { display:flex; align-items:center; gap:.5rem; }
.pec-nav-social { display:none; align-items:center; gap:.25rem; margin-right:.5rem; }
@media(min-width:768px){ .pec-nav-social{ display:flex; } }
.pec-nav-social-link {
  padding:.375rem; color:hsl(var(--muted-foreground));
  border-radius:.375rem; transition:color .3s; display:flex;
}
.pec-nav-social-link:hover { color:hsl(var(--primary)); }

.pec-hamburger {
  display:flex; padding:.5rem; color:hsl(var(--foreground));
  border-radius:.5rem; transition:background .2s;
}
.pec-hamburger:hover { background:hsl(var(--secondary)); }
@media(min-width:1024px){ .pec-hamburger{ display:none; } }

.pec-mobile-nav {
  display:none; flex-direction:column;
  background:hsl(var(--background)); border-top:1px solid hsl(var(--border));
  padding:.75rem 1rem 1rem;
}
.pec-mobile-nav.open { display:flex; }
.pec-mobile-nav a {
  padding:.75rem .5rem; font-size:.9375rem; font-weight:500;
  color:hsl(var(--foreground)); border-radius:.5rem;
  transition:all .2s; display:block;
}
.pec-mobile-nav a:hover { background:hsl(var(--secondary)); color:hsl(var(--primary)); }
.pec-mobile-nav-divider { height:1px; background:hsl(var(--border)); margin:.5rem 0; }

/* ── HERO ────────────────────────────────────────────── */
.pec-hero { padding:2rem 0 3rem; }
@media(min-width:768px){ .pec-hero{ padding:4rem 0 3rem; } }
@media(min-width:1024px){ .pec-hero{ padding:3rem 0; } }
.pec-hero-content { text-align:center; max-width:56rem; margin:0 auto; }
.pec-hero-content > * + * { margin-top:1rem; }
@media(min-width:768px){ .pec-hero-content > * + *{ margin-top:1.5rem; } }
.pec-hero-title { padding:0 .5rem; }
.pec-hero-sub { font-size:1.125rem; color:hsl(var(--muted-foreground)); padding:0 1rem; }
@media(min-width:768px){ .pec-hero-sub{ font-size:1.25rem; } }
.pec-hero-meta { font-size:.875rem; color:hsl(var(--muted-foreground)); }
.pec-hero-meta span { font-weight:600; color:hsl(var(--foreground)); }

/* Exam level cards (3 cols under hero) */
.pec-level-grid {
  display:grid; grid-template-columns:1fr; gap:1rem;
  max-width:64rem; margin:0 auto;
}
@media(min-width:768px){ .pec-level-grid{ grid-template-columns:repeat(3,1fr); } }

.pec-level-card {
  background:hsl(var(--card)); border-radius:var(--radius);
  padding:1.5rem; box-shadow:var(--shadow-medium);
  display:flex; flex-direction:column; cursor:pointer;
  text-decoration:none; color:inherit;
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.pec-level-card:hover { box-shadow:var(--shadow-strong); transform:translateY(-4px); }
.pec-level-card-icon {
  width:3.5rem; height:3.5rem; border-radius:9999px;
  display:flex; align-items:center; justify-content:center; margin:0 auto 1rem;
}
.pec-level-card-icon-primary { background:hsl(var(--primary)/.1); }
.pec-level-card-icon-accent   { background:hsl(var(--accent)/.1); }
.pec-level-card-icon-destructive { background:hsl(var(--destructive)/.1); }
.pec-level-card h3 { text-align:center; margin-bottom:.5rem; }
.pec-level-card p  { font-size:.875rem; color:hsl(var(--muted-foreground)); text-align:center; margin-bottom:1.5rem; flex:1; }

/* Main action cards (2 cols) */
.pec-action-grid {
  display:grid; grid-template-columns:1fr; gap:1rem;
  max-width:56rem; margin:2rem auto 0;
}
@media(min-width:640px){ .pec-action-grid{ grid-template-columns:repeat(2,1fr); gap:1.5rem; } }
@media(min-width:768px){ .pec-action-grid{ margin-top:3rem; gap:1.5rem; } }

.pec-action-card {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:.75rem; padding:1.5rem;
  background:hsl(var(--card)); border-radius:var(--radius);
  border:2px solid hsl(var(--border)); box-shadow:var(--shadow-soft);
  text-decoration:none; color:inherit; height:100%;
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
@media(min-width:768px){
  .pec-action-card { gap:1rem; padding:2rem; }
  .pec-action-card:hover { transform:scale(1.05); box-shadow:var(--shadow-strong); }
}
.pec-action-card:hover { border-color:hsl(var(--primary)); }
.pec-action-card.accent:hover { border-color:hsl(var(--accent)); }
.pec-action-card-icon {
  width:3.5rem; height:3.5rem; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
}
@media(min-width:768px){ .pec-action-card-icon{ width:4rem; height:4rem; } }
.pec-action-card-icon-primary { background:hsl(var(--primary)/.1); }
.pec-action-card-icon-accent  { background:hsl(var(--accent)/.1); }
.pec-action-card h2 { font-size:1.25rem; }
@media(min-width:768px){ .pec-action-card h2{ font-size:1.5rem; } }
.pec-action-card p { font-size:.875rem; color:hsl(var(--muted-foreground)); }
@media(min-width:768px){ .pec-action-card p{ font-size:1rem; } }

/* ── STATS BAR ───────────────────────────────────────── */
.pec-stats-bar {
  background:hsl(var(--primary)); color:hsl(var(--primary-foreground));
  padding:2rem 0;
}
.pec-stats-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1rem; text-align:center;
}
@media(min-width:768px){ .pec-stats-grid{ grid-template-columns:repeat(4,1fr); gap:2rem; } }
.pec-stat-num { font-size:1.875rem; font-weight:700; line-height:1; margin-bottom:.25rem; }
@media(min-width:768px){ .pec-stat-num{ font-size:2.25rem; } }
.pec-stat-lbl { font-size:.75rem; opacity:.9; }
@media(min-width:768px){ .pec-stat-lbl{ font-size:.875rem; } }

/* ── FEATURES ────────────────────────────────────────── */
.pec-features-grid {
  display:grid; grid-template-columns:1fr; gap:1rem;
  max-width:64rem; margin:0 auto;
}
@media(min-width:640px){ .pec-features-grid{ grid-template-columns:repeat(2,1fr); gap:2rem; } }
@media(min-width:768px){ .pec-features-grid{ grid-template-columns:repeat(3,1fr); } }

.pec-feature-card {
  padding:1.25rem; text-align:center;
  background:hsl(var(--card)); border-radius:var(--radius);
  border:1px solid hsl(var(--border)); box-shadow:var(--shadow-soft);
}
@media(min-width:768px){ .pec-feature-card{ padding:1.5rem; } }
.pec-feature-icon {
  width:2.5rem; height:2.5rem; border-radius:9999px;
  background:hsl(var(--primary)/.1);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto .75rem;
}
@media(min-width:768px){ .pec-feature-icon{ width:3rem; height:3rem; margin-bottom:1rem; } }
.pec-feature-card h3 { margin-bottom:.5rem; }
@media(min-width:768px){ .pec-feature-card h3{ margin-bottom:.75rem; } }
.pec-feature-card p { font-size:.875rem; color:hsl(var(--muted-foreground)); }
@media(min-width:768px){ .pec-feature-card p{ font-size:1rem; } }
/* 3rd card span on sm */
@media(min-width:640px) and (max-width:767px){
  .pec-feature-card:nth-child(3){ grid-column:span 2; }
}

/* ── TESTIMONIALS ────────────────────────────────────── */
.pec-testi-grid {
  display:grid; grid-template-columns:1fr; gap:1rem;
}
@media(min-width:640px){ .pec-testi-grid{ grid-template-columns:repeat(2,1fr); gap:1.5rem; } }
@media(min-width:1024px){ .pec-testi-grid{ grid-template-columns:repeat(3,1fr); } }

.pec-testi-card {
  padding:1.25rem; background:hsl(var(--card));
  border-radius:var(--radius); border:1px solid hsl(var(--border));
  box-shadow:var(--shadow-soft);
}
@media(min-width:768px){ .pec-testi-card{ padding:1.5rem; } }
.pec-testi-header { display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem; }
.pec-testi-avatar {
  width:2.5rem; height:2.5rem; border-radius:9999px;
  background:hsl(var(--primary)/.1); color:hsl(var(--primary));
  display:flex; align-items:center; justify-content:center;
  font-size:.875rem; font-weight:600; flex-shrink:0;
}
.pec-testi-name { font-size:.875rem; font-weight:600; }
.pec-testi-meta { font-size:.875rem; color:hsl(var(--muted-foreground)); }
.pec-testi-meta span { font-weight:500; color:hsl(var(--foreground)); }

/* ── CENTERS CTA ─────────────────────────────────────── */
.pec-centers-cta {
  background:linear-gradient(to right, hsl(var(--primary)/.05), hsl(var(--accent)/.05));
  border:1px solid hsl(var(--primary)/.2);
  border-radius:var(--radius); padding:1.5rem;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  max-width:56rem; margin:0 auto;
  text-align:center;
}
@media(min-width:768px){
  .pec-centers-cta { flex-direction:row; text-align:left; padding:2rem; gap:1.5rem; }
}
.pec-centers-cta-icon {
  width:3rem; height:3rem; border-radius:9999px;
  background:hsl(var(--primary)/.1); display:flex; align-items:center;
  justify-content:center; flex-shrink:0;
}
@media(min-width:768px){ .pec-centers-cta-icon{ width:4rem; height:4rem; } }
.pec-centers-cta h3 { font-size:1.25rem; margin-bottom:.25rem; }
@media(min-width:768px){ .pec-centers-cta h3{ font-size:1.5rem; margin-bottom:.5rem; } }
.pec-centers-cta p { font-size:.875rem; color:hsl(var(--muted-foreground)); }
@media(min-width:768px){ .pec-centers-cta p{ font-size:1rem; } }

/* ── THEME CARDS ─────────────────────────────────────── */
.pec-theme-grid {
  display:grid; grid-template-columns:1fr; gap:1rem;
}
@media(min-width:768px){ .pec-theme-grid{ grid-template-columns:repeat(3,1fr); gap:1.5rem; } }

.pec-theme-card {
  display:block; text-decoration:none; color:inherit;
  background:hsl(var(--card)); border-radius:var(--radius);
  border:2px solid hsl(var(--border)); padding:1.5rem;
  box-shadow:var(--shadow-soft);
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.pec-theme-card:hover { transform:scale(1.05); box-shadow:var(--shadow-strong); }
.pec-theme-card.primary:hover { border-color:hsl(var(--primary)); }
.pec-theme-card.accent:hover  { border-color:hsl(var(--accent)); }
.pec-theme-card-inner { text-align:center; display:flex; flex-direction:column; gap:.75rem; }
.pec-theme-card-icon {
  width:3rem; height:3rem; border-radius:9999px;
  display:flex; align-items:center; justify-content:center; margin:0 auto;
  font-size:1.25rem;
}
.pec-theme-card-icon-primary { background:hsl(var(--primary)/.1); }
.pec-theme-card-icon-accent  { background:hsl(var(--accent)/.1); }
.pec-theme-card h3 { font-size:1.125rem; }
.pec-theme-card p  { font-size:.875rem; color:hsl(var(--muted-foreground)); }

/* ── FAQ ─────────────────────────────────────────────── */
.pec-faq-card { max-width:56rem; margin:0 auto; }
.pec-faq-item { border-bottom:1px solid hsl(var(--border)); }
.pec-faq-item:first-child { border-top:1px solid hsl(var(--border)); }
.pec-faq-trigger {
  display:flex; width:100%; align-items:center; justify-content:space-between;
  padding:1rem 0; font-weight:500; font-size:.875rem; text-align:left;
  color:hsl(var(--foreground)); cursor:pointer; background:none; border:0;
  transition:color .2s; gap:1rem; font-family:inherit; line-height:1.5;
}
@media(min-width:768px){ .pec-faq-trigger{ font-size:1rem; } }
.pec-faq-trigger:hover { text-decoration:underline; }
.pec-faq-chevron {
  flex-shrink:0; color:hsl(var(--muted-foreground));
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.pec-faq-item.open .pec-faq-chevron { transform:rotate(180deg); }
.pec-faq-body {
  overflow:hidden; max-height:0;
  transition:max-height .35s cubic-bezier(.4,0,.2,1), padding .35s;
  font-size:.875rem; color:hsl(var(--muted-foreground));
  padding:0; line-height:1.7;
}
.pec-faq-item.open .pec-faq-body { max-height:500px; padding-bottom:1rem; }

/* ── ABOUT SECTION ───────────────────────────────────── */
.pec-about-list { display:flex; flex-direction:column; gap:.75rem; }
.pec-about-item { display:flex; align-items:flex-start; gap:.5rem; }
@media(min-width:768px){ .pec-about-item{ gap:.75rem; } }
.pec-about-icon { color:hsl(var(--success)); flex-shrink:0; margin-top:.125rem; }

/* ── SHARE ───────────────────────────────────────────── */
.pec-share { max-width:28rem; margin:0 auto; }
.pec-share-label {
  font-size:.875rem; font-weight:500; color:hsl(var(--muted-foreground));
  display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem;
}
.pec-share-btns { display:flex; flex-wrap:wrap; gap:.5rem; }

/* ── FOOTER ──────────────────────────────────────────── */
.pec-footer {
  background:hsl(var(--muted)/.5);
  border-top:1px solid hsl(var(--border));
  padding:3rem 0;
}
.pec-footer-grid {
  display:grid; grid-template-columns:1fr; gap:2rem; margin-bottom:2rem;
  font-size:.875rem;
}
@media(min-width:640px){ .pec-footer-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .pec-footer-grid{ grid-template-columns:1.2fr 1fr 1.3fr 1fr; } }
.pec-footer-heading {
  font-weight:700; color:hsl(var(--foreground)); margin-bottom:1rem;
  display:flex; align-items:center; gap:.5rem;
}
.pec-footer-links { display:flex; flex-direction:column; gap:.5rem; }
.pec-footer-link {
  color:hsl(var(--muted-foreground)); transition:color .2s;
  display:flex; align-items:center; gap:.5rem;
}
.pec-footer-link:hover { color:hsl(var(--primary)); }
.pec-footer-link-plain {
  color:hsl(var(--muted-foreground)); transition:color .2s;
}
.pec-footer-link-plain:hover { color:hsl(var(--primary)); }
.pec-footer-blog-link {
  color:hsl(var(--muted-foreground)); transition:color .2s;
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pec-footer-blog-link:hover { color:hsl(var(--primary)); }
.pec-footer-more {
  display:inline-flex; align-items:center; gap:.25rem;
  margin-top:.75rem; font-size:.75rem; font-weight:500;
  color:hsl(var(--primary));
}
.pec-footer-more:hover { text-decoration:underline; }
.pec-footer-bottom {
  border-top:1px solid hsl(var(--border)); padding-top:2rem;
  text-align:center; font-size:.875rem; color:hsl(var(--muted-foreground));
}
.pec-footer-bottom-links {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.5rem 1rem; font-size:.75rem; margin-bottom:1rem;
}
.pec-footer-bottom-sep { color:hsl(var(--border)); }
.pec-footer-modules {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.5rem 1rem; font-size:.75rem; margin-bottom:1rem;
}
.pec-footer-legal {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.5rem 1rem; font-size:.75rem; margin-top:1rem; padding-top:1rem;
  border-top:1px solid hsl(var(--border));
}

/* ── FORMS ───────────────────────────────────────────── */
.pec-label { display:block; font-size:.875rem; font-weight:500; margin-bottom:.375rem; }
.pec-input, .pec-select, .pec-textarea {
  width:100%; padding:.625rem .875rem;
  border:1px solid hsl(var(--input));
  border-radius:.5rem; font-size:.9375rem; font-family:inherit;
  background:hsl(var(--background)); color:hsl(var(--foreground));
  transition:border-color .2s, box-shadow .2s;
  outline:none;
}
.pec-input:focus, .pec-select:focus, .pec-textarea:focus {
  border-color:hsl(var(--ring));
  box-shadow:0 0 0 3px hsl(var(--ring)/.15);
}
.pec-input::placeholder, .pec-textarea::placeholder { color:hsl(var(--muted-foreground)/.7); }
.pec-textarea { resize:vertical; min-height:6rem; line-height:1.6; }
.pec-form-group { margin-bottom:1.25rem; }

/* ── AUTH PAGES ──────────────────────────────────────── */
.pec-auth-page {
  min-height:100vh; background:hsl(var(--secondary));
  display:flex; align-items:center; justify-content:center; padding:2rem 1rem;
}
.pec-auth-card {
  background:hsl(var(--card)); border-radius:var(--radius);
  border:1px solid hsl(var(--border)); box-shadow:var(--shadow-strong);
  padding:2.5rem 2rem; width:100%; max-width:28rem;
}
@media(min-width:640px){
  .pec-auth-card { box-shadow:var(--shadow-strong); padding:2.5rem; }
}
.pec-auth-logo {
  text-align:center; margin-bottom:1.5rem;
  font-weight:700; font-size:1.25rem; color:hsl(var(--primary));
}
.pec-auth-logo a { color:inherit; }

/* ── DASHBOARD ───────────────────────────────────────── */
.pec-dash { min-height:100vh; display:flex; flex-direction:column; background:hsl(var(--background)); }
.pec-dash-layout {
  display:grid; grid-template-columns:1fr;
  flex:1; max-width:1300px; margin:0 auto; width:100%; padding:1.5rem 1rem;
  gap:1.5rem;
}
@media(min-width:1024px){ .pec-dash-layout{ grid-template-columns:260px 1fr; } }

.pec-sidebar {
  background:hsl(var(--card)); border-radius:var(--radius);
  border:1px solid hsl(var(--border)); padding:1.25rem;
  height:fit-content; position:sticky; top:5rem;
}
.pec-sidebar-user { margin-bottom:1.25rem; padding-bottom:1rem; border-bottom:1px solid hsl(var(--border)); }
.pec-sidebar-avatar {
  width:3rem; height:3rem; border-radius:9999px;
  background:hsl(var(--primary)/.1); color:hsl(var(--primary));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.1rem; margin-bottom:.625rem;
}
.pec-sidebar-name { font-weight:700; font-size:.9375rem; color:hsl(var(--foreground)); }
.pec-sidebar-email { font-size:.75rem; color:hsl(var(--muted-foreground)); margin-top:.125rem; }
.pec-sidebar-nav { display:flex; flex-direction:column; gap:.125rem; }
.pec-sidebar-link {
  display:flex; align-items:center; gap:.625rem;
  padding:.5rem .75rem; border-radius:.5rem; font-size:.875rem; font-weight:500;
  color:hsl(var(--muted-foreground)); transition:all .2s; cursor:pointer; border:0;
  background:none; font-family:inherit; width:100%; text-align:left;
}
.pec-sidebar-link:hover { background:hsl(var(--secondary)); color:hsl(var(--foreground)); }
.pec-sidebar-link.active { background:hsl(var(--primary)/.08); color:hsl(var(--primary)); font-weight:600; }

/* ── QUIZ ENGINE ─────────────────────────────────────── */
.pec-quiz-wrap { max-width:48rem; margin:0 auto; padding:2rem 1rem; }
.pec-quiz-progress-bar {
  height:.5rem; background:hsl(var(--secondary)); border-radius:9999px; overflow:hidden;
}
.pec-quiz-progress-fill {
  height:100%; background:hsl(var(--primary));
  border-radius:9999px; transition:width .4s ease;
}
.pec-quiz-timer {
  display:flex; align-items:center; gap:.5rem;
  font-size:1rem; font-weight:700; color:hsl(var(--foreground));
  background:hsl(var(--secondary)); padding:.5rem 1rem;
  border-radius:.5rem; min-width:5rem; justify-content:center;
}
.pec-quiz-timer.warning { color:hsl(var(--destructive)); background:hsl(var(--destructive)/.1); }

.pec-quiz-card {
  background:hsl(var(--card)); border-radius:var(--radius);
  border:1px solid hsl(var(--border)); box-shadow:var(--shadow-medium);
  padding:1.5rem;
}
@media(min-width:768px){ .pec-quiz-card{ padding:2rem; } }
.pec-quiz-q-num { font-size:.75rem; font-weight:700; color:hsl(var(--muted-foreground)); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.75rem; }
.pec-quiz-q-text { font-size:1.0625rem; font-weight:600; color:hsl(var(--foreground)); margin-bottom:1.5rem; line-height:1.6; }
@media(min-width:768px){ .pec-quiz-q-text{ font-size:1.125rem; } }

.pec-quiz-options { display:flex; flex-direction:column; gap:.75rem; }
.pec-quiz-option {
  display:flex; align-items:center; gap:.875rem;
  padding:.875rem 1rem; border:1.5px solid hsl(var(--border));
  border-radius:.75rem; cursor:pointer;
  font-size:.9375rem; color:hsl(var(--foreground));
  background:hsl(var(--card)); text-align:left;
  font-family:inherit; transition:all .2s; width:100%;
}
.pec-quiz-option:hover:not(:disabled) { border-color:hsl(var(--primary)); background:hsl(var(--primary)/.04); }
.pec-quiz-option.selected { border-color:hsl(var(--primary)); background:hsl(var(--primary)/.08); }
.pec-quiz-option.correct  { border-color:hsl(var(--success)); background:hsl(var(--success)/.08); color:hsl(var(--success)); }
.pec-quiz-option.incorrect{ border-color:hsl(var(--destructive)); background:hsl(var(--destructive)/.08); color:hsl(var(--destructive)); }
.pec-quiz-option-letter {
  width:2rem; height:2rem; border-radius:9999px;
  background:hsl(var(--secondary)); color:hsl(var(--muted-foreground));
  font-weight:700; font-size:.8125rem; display:flex; align-items:center;
  justify-content:center; flex-shrink:0;
}
.pec-quiz-option.selected  .pec-quiz-option-letter { background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); }
.pec-quiz-option.correct   .pec-quiz-option-letter { background:hsl(var(--success)); color:#fff; }
.pec-quiz-option.incorrect .pec-quiz-option-letter { background:hsl(var(--destructive)); color:#fff; }

.pec-quiz-explanation {
  margin-top:1rem; padding:.875rem 1rem;
  background:hsl(var(--primary)/.06); border-left:3px solid hsl(var(--primary));
  border-radius:0 .5rem .5rem 0; font-size:.875rem;
  color:hsl(var(--foreground)); display:none; line-height:1.6;
}
.pec-quiz-explanation.show { display:block; }

/* ── ALERTS ──────────────────────────────────────────── */
.pec-alert {
  padding:.875rem 1rem; border-radius:.5rem; font-size:.875rem;
  margin-bottom:1rem; display:none; align-items:center; gap:.625rem;
}
.pec-alert.show { display:flex; }
.pec-alert-success { background:hsl(var(--success)/.1); color:hsl(var(--success)); border:1px solid hsl(var(--success)/.2); }
.pec-alert-error   { background:hsl(var(--destructive)/.1); color:hsl(var(--destructive)); border:1px solid hsl(var(--destructive)/.2); }
.pec-alert-info    { background:hsl(var(--primary)/.08); color:hsl(var(--primary)); border:1px solid hsl(var(--primary)/.2); }

/* ── SPINNER ─────────────────────────────────────────── */
.pec-spinner {
  width:1.5rem; height:1.5rem;
  border:2px solid hsl(var(--border)); border-top-color:hsl(var(--primary));
  border-radius:9999px; animation:spin .65s linear infinite; display:inline-block;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── SECTION HELPERS ─────────────────────────────────── */
.py-12 { padding-top:3rem; padding-bottom:3rem; }
.py-16 { padding-top:4rem; padding-bottom:4rem; }
.py-8  { padding-top:2rem; padding-bottom:2rem; }
@media(min-width:768px){
  .md-py-12 { padding-top:3rem; padding-bottom:3rem; }
  .md-py-16 { padding-top:4rem; padding-bottom:4rem; }
  .md-py-8  { padding-top:2rem; padding-bottom:2rem; }
}
.section-heading { text-align:center; margin-bottom:2rem; }
@media(min-width:768px){ .section-heading{ margin-bottom:3rem; } }
.section-heading h2 { margin-bottom:.75rem; }
.section-heading p  { color:hsl(var(--muted-foreground)); max-width:44rem; margin:0 auto; }
.bg-secondary { background:hsl(var(--secondary)); }
.max-w-5xl { max-width:64rem; margin:0 auto; }
.max-w-4xl { max-width:56rem; margin:0 auto; }
.max-w-3xl { max-width:48rem; margin:0 auto; }
.text-center { text-align:center; }
.text-muted { color:hsl(var(--muted-foreground)); }
.font-medium { font-weight:500; }
.font-semibold { font-weight:600; }
.font-bold { font-weight:700; }
.text-sm { font-size:.875rem; }
.text-xs { font-size:.75rem; }
.text-primary { color:hsl(var(--primary)); }
.text-accent  { color:hsl(var(--accent)); }
.mt-2  { margin-top:.5rem; }
.mt-3  { margin-top:.75rem; }
.mt-4  { margin-top:1rem; }
.mt-6  { margin-top:1.5rem; }
.mt-8  { margin-top:2rem; }
.mb-2  { margin-bottom:.5rem; }
.mb-3  { margin-bottom:.75rem; }
.mb-4  { margin-bottom:1rem; }
.mb-6  { margin-bottom:1.5rem; }
.mb-8  { margin-bottom:2rem; }
.mb-12 { margin-bottom:3rem; }
.gap-4 { gap:1rem; }
.gap-2 { gap:.5rem; }
.flex   { display:flex; }
.flex-col { flex-direction:column; }
.items-center { align-items:center; }
.justify-center { justify-content:center; }
.flex-wrap { flex-wrap:wrap; }
.w-full { width:100%; }
.border-t { border-top:1px solid hsl(var(--border)); }
.pt-4 { padding-top:1rem; }
.pt-8 { padding-top:2rem; }

/* ── COOKIE BANNER ───────────────────────────────────── */
.pec-cookie {
  position:fixed; bottom:0; left:0; right:0; z-index:50;
  padding:1rem; background:hsl(var(--background));
  border-top:1px solid hsl(var(--border)); box-shadow:0 -4px 16px hsl(220 15% 20%/.08);
}
.pec-cookie-inner {
  max-width:56rem; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:1rem;
}
@media(min-width:640px){ .pec-cookie-inner{ flex-direction:row; } }
.pec-cookie p { font-size:.875rem; color:hsl(var(--muted-foreground)); text-align:center; }
@media(min-width:640px){ .pec-cookie p{ text-align:left; } }
.pec-cookie-btns { display:flex; gap:.75rem; flex-shrink:0; }

/* ── SVG icons ───────────────────────────────────────── */
svg { pointer-events:none; }

@media(prefers-reduced-motion:reduce){
  *, *:before, *:after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* Logo */
.pec-logo img{transition:opacity .2s}
.pec-logo:hover img{opacity:.85}

/* PWA popup animation */
@keyframes slideUp {
  from { transform: translateX(-50%) translateY(2rem); opacity:0; }
  to   { transform: translateX(-50%) translateY(0);    opacity:1; }
}

/* ════════════════════════════════════════════════
   MOBILE OVERFLOW & LAYOUT FIXES v1.7.0
   ════════════════════════════════════════════════ */

/* Global overflow prevention */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
*, *::before, *::after {
  box-sizing: border-box;
}

/* Prevent any element from causing horizontal scroll */
.container {
  overflow-x: hidden;
}

/* ── Header / Nav mobile ──────────────────────── */
.pec-header {
  overflow: visible; /* needed for dropdown */
}
.pec-header-inner {
  flex-wrap: nowrap;
  min-height: 4rem;
  overflow: visible;
}
.pec-logo {
  flex-shrink: 0;
  max-width: 60%;
}
.pec-logo img {
  max-height: 40px;
  width: auto;
  max-width: 100%;
}
.pec-nav-right {
  flex-shrink: 0;
  gap: .25rem;
}
/* Hide text buttons on small screens */
@media(max-width: 479px) {
  .pec-nav-right .btn { display: none; }
  .pec-hamburger { display: flex !important; }
}
@media(max-width: 639px) {
  .pec-nav-right .btn-ghost { display: none; }
}

/* Mobile nav dropdown — full width, proper stacking */
.pec-mobile-nav {
  position: relative;
  z-index: 200;
  width: 100%;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.pec-mobile-nav.open {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  overflow-y: auto;
}

/* ── Hero section mobile ──────────────────────── */
@media(max-width: 767px) {
  .pec-hero {
    padding: 2rem 0 2rem;
  }
  h1 { font-size: clamp(1.5rem, 6vw, 2.25rem); }
  h2 { font-size: clamp(1.2rem, 5vw, 1.875rem); }
}

/* ── Level / Action cards mobile ─────────────── */
.pec-level-grid {
  grid-template-columns: 1fr;
  gap: .75rem;
}
@media(min-width: 640px) {
  .pec-level-grid { grid-template-columns: 1fr; }
}
@media(min-width: 900px) {
  .pec-level-grid { grid-template-columns: repeat(3,1fr); }
}

.pec-action-grid {
  grid-template-columns: 1fr;
  gap: .75rem;
  margin-top: 1.5rem;
}
@media(min-width: 540px) {
  .pec-action-grid { grid-template-columns: repeat(2,1fr); }
}

/* ── Stats bar mobile ─────────────────────────── */
.pec-stats-grid {
  grid-template-columns: repeat(2,1fr);
  gap: 1rem;
}
@media(min-width: 640px) {
  .pec-stats-grid { grid-template-columns: repeat(4,1fr); }
}

/* ── Features grid mobile ─────────────────────── */
.pec-features-grid {
  grid-template-columns: 1fr;
  gap: .75rem;
}
@media(min-width: 540px) {
  .pec-features-grid { grid-template-columns: repeat(2,1fr); }
}
@media(min-width: 900px) {
  .pec-features-grid { grid-template-columns: repeat(3,1fr); }
}
@media(min-width: 540px) and (max-width: 899px) {
  .pec-features-grid .pec-feature-card:nth-child(3) { grid-column: span 2; }
}

/* ── Testimonials mobile ──────────────────────── */
.pec-testi-grid {
  grid-template-columns: 1fr;
  gap: .75rem;
}
@media(min-width: 640px) {
  .pec-testi-grid { grid-template-columns: repeat(2,1fr); gap: 1.25rem; }
}
@media(min-width: 1024px) {
  .pec-testi-grid { grid-template-columns: repeat(3,1fr); }
}

/* ── Theme grid mobile ────────────────────────── */
.pec-theme-grid {
  grid-template-columns: 1fr;
  gap: .75rem;
}
@media(min-width: 640px) {
  .pec-theme-grid { grid-template-columns: repeat(2,1fr); }
}
@media(min-width: 900px) {
  .pec-theme-grid { grid-template-columns: repeat(3,1fr); }
}

/* ── FAQ mobile ───────────────────────────────── */
.pec-faq-trigger {
  font-size: .875rem;
  padding: .875rem 0;
  line-height: 1.5;
  width: 100%;
  text-align: left;
  word-break: break-word;
}
.pec-faq-chevron {
  flex-shrink: 0;
  min-width: 18px;
}
.pec-faq-body {
  font-size: .875rem;
  line-height: 1.7;
  word-break: break-word;
}

/* ── Footer mobile ────────────────────────────── */
.pec-footer-grid {
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media(min-width: 640px) {
  .pec-footer-grid { grid-template-columns: repeat(2,1fr); }
}
@media(min-width: 1024px) {
  .pec-footer-grid { grid-template-columns: 1.2fr 1fr 1.3fr 1fr; }
}
.pec-footer-bottom-links,
.pec-footer-modules,
.pec-footer-legal {
  flex-wrap: wrap;
  justify-content: center;
  gap: .375rem .75rem;
}

/* ── Dashboard mobile ─────────────────────────── */
.pec-dash-layout {
  grid-template-columns: 1fr;
  padding: 1rem;
  gap: 1rem;
}
@media(min-width: 1024px) {
  .pec-dash-layout { grid-template-columns: 240px 1fr; }
}
.pec-sidebar {
  position: static !important;
}

/* ── Auth card mobile ─────────────────────────── */
.pec-auth-card {
  padding: 1.5rem 1.25rem;
  max-width: calc(100vw - 2rem);
}
@media(min-width: 480px) {
  .pec-auth-card { padding: 2.5rem; }
}

/* ── Quiz mobile ──────────────────────────────── */
.pec-quiz-wrap {
  padding: 1rem .75rem;
}
@media(min-width: 640px) {
  .pec-quiz-wrap { padding: 2rem 1rem; }
}
.pec-quiz-card {
  padding: 1.25rem;
}
.pec-quiz-q-text {
  font-size: 1rem;
  word-break: break-word;
}
.pec-quiz-option {
  padding: .75rem .875rem;
  font-size: .875rem;
}
.pec-quiz-option-letter {
  flex-shrink: 0;
}

/* ── Centers grid mobile ──────────────────────── */
@media(max-width: 639px) {
  #centers-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Blog grid mobile ─────────────────────────── */
@media(max-width: 639px) {
  .card { border-radius: .5rem; }
}

/* ── PWA popup mobile ─────────────────────────── */
#pec-pwa-popup {
  left: 1rem !important;
  right: 1rem !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
}

/* ── Cookie banner mobile ─────────────────────── */
.pec-cookie-inner {
  flex-direction: column;
  text-align: center;
  gap: .75rem;
}
@media(min-width: 540px) {
  .pec-cookie-inner { flex-direction: row; text-align: left; }
}

/* ── Eligibility choices mobile ───────────────── */
.elig-choice {
  font-size: .875rem;
  padding: .875rem 1rem;
}

/* ── Checkout grid mobile ─────────────────────── */
@media(max-width: 767px) {
  .checkout-grid,
  [style*="grid-template-columns:1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* ── Prevent table overflow ───────────────────── */
table {
  width: 100%;
  table-layout: fixed;
  word-break: break-word;
}
@media(max-width: 639px) {
  table { font-size: .8rem; }
  th, td { padding: .5rem .5rem !important; }
}

/* ── Generic mobile grid overrides ────────────── */
@media(max-width: 639px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2,1fr) !important;
  }
}

/* ── Livret chapters grid mobile ──────────────── */
@media(max-width: 639px) {
  #valeurs .card,
  #histoire .card,
  #institutions .card,
  #droits .card { padding: 1.25rem; }
}

/* ── Image overflow fix ───────────────────────── */
img {
  max-width: 100%;
  height: auto;
}

/* ── Slide-up animation for PWA ───────────────── */
@keyframes slideUp {
  from { opacity:0; transform:translateY(1.5rem); }
  to   { opacity:1; transform:translateY(0); }
}