:root{
    --bg: #FFF8E4;
    --bg-alt: #FFFFFF;
    --blue: #1B2CA0;
    --blue-dark: #121F73;
    --yellow: #FFD400;
    --yellow-soft: #FFF0AE;
    --ink: #16182B;
    --ink-soft: #4A4C63;
    --border: #E8DFC0;
    --radius: 18px;
    --shadow: 0 10px 30px rgba(27,44,160,0.10);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Roboto', system-ui, sans-serif;
    font-size:16px;
    line-height:1.55;
  }
  h1,h2,h3,.brand-name{
    font-family:'Philosopher', Georgia, serif;
    color:var(--blue-dark);
    line-height:1.15;
    margin:0 0 .5em;
  }
  a{color:inherit;}
  img{max-width:100%;height:auto;display:block;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 20px;}
  .section{padding:72px 0;}
  .section-head{text-align:center;max-width:640px;margin:0 auto 44px;}
  .section-head h2{font-size:clamp(1.6rem,4vw,2.3rem);}
  .section-head p{color:var(--ink-soft);font-size:1.05rem;}
  .eyebrow{
    display:inline-block;
    font-family:'Roboto',sans-serif;
    font-weight:700;
    font-size:.78rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--blue);
    background:var(--yellow-soft);
    padding:5px 12px;
    border-radius:999px;
    margin-bottom:14px;
  }

  /* Header */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(255,248,228,0.92);
    backdrop-filter:saturate(180%) blur(8px);
    border-bottom:1px solid var(--border);
  }
  .nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 20px;max-width:1120px;margin:0 auto;
  }
  .brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
  .brand img{width:42px;height:42px;border-radius:10px;}
  .brand-name{font-size:1.3rem;margin:0;}
  .nav-links{display:flex;gap:28px;list-style:none;margin:0;padding:0;}
  .nav-links a{text-decoration:none;font-weight:500;color:var(--ink);}
  .nav-links a:hover{color:var(--blue);}
  .nav-cta{
    background:var(--blue);color:#fff;padding:9px 18px;border-radius:999px;
    font-weight:700;text-decoration:none;font-size:.92rem;
  }
  .nav-toggle{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--blue-dark);}
  @media (max-width:760px){
    .nav-links, .nav-cta{display:none;}
    .nav-toggle{display:block;}
    .nav.open .nav-links{
      display:flex;flex-direction:column;gap:14px;
      position:absolute;top:100%;left:0;right:0;
      background:var(--bg-alt);padding:20px;border-bottom:1px solid var(--border);
    }
    .nav.open .nav-cta{display:inline-block;margin:0 20px 20px;text-align:center;}
  }

  /* Hero */
  .hero{padding:64px 0 40px;}
  .hero-grid{
    display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
  }
  @media (max-width:820px){.hero-grid{grid-template-columns:1fr;text-align:center;}}
  .hero h1{font-size:clamp(2rem,5vw,2.9rem);}
  .hero p.lede{font-size:1.15rem;color:var(--ink-soft);max-width:520px;}
  @media (max-width:820px){.hero p.lede{margin-left:auto;margin-right:auto;}}
  .hero-actions{display:flex;gap:16px;margin-top:28px;flex-wrap:wrap;}
  @media (max-width:820px){.hero-actions{justify-content:center;}}
  .btn{
    display:inline-block;padding:14px 26px;border-radius:999px;
    font-weight:700;text-decoration:none;font-size:1rem;
    border:2px solid transparent;cursor:pointer;
  }
  .btn-primary{background:var(--yellow);color:var(--blue-dark);}
  .btn-primary:hover{background:#ffdf33;}
  .btn-outline{border-color:var(--blue);color:var(--blue);background:transparent;}
  .btn-outline:hover{background:var(--blue);color:#fff;}
  .hero-visual{
    background:var(--yellow-soft);border-radius:28px;padding:32px;
    box-shadow:var(--shadow);position:relative;
  }
  .hero-visual img{margin:0 auto;max-width:280px;width:100%;height:auto;}
  .badge-float{
    position:absolute;top:18px;right:18px;background:#fff;border-radius:14px;
    padding:8px 12px;font-size:.8rem;font-weight:700;color:var(--blue);
    box-shadow:0 6px 16px rgba(0,0,0,0.08);
  }

  /* Feature cards */
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  @media (max-width:820px){.grid-3{grid-template-columns:1fr;}}
  .card{
    background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius);
    padding:28px;
  }
  .card .icon{
    width:48px;height:48px;border-radius:12px;background:var(--yellow-soft);
    display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:16px;
  }
  .card h3{font-size:1.15rem;}
  .card p{color:var(--ink-soft);margin:0;}

  /* Pricing */
  .pricing-group-title{
    font-weight:700;color:var(--blue);margin:36px 0 16px;font-size:1rem;
    text-transform:uppercase;letter-spacing:.05em;
  }
  .pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .pricing-grid.trio{grid-template-columns:repeat(3,1fr);}
  .pricing-grid.duo{grid-template-columns:repeat(2,1fr);max-width:720px;margin:0 auto;}
  @media (max-width:900px){.pricing-grid, .pricing-grid.trio{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.pricing-grid, .pricing-grid.trio, .pricing-grid.duo{grid-template-columns:1fr;}}
  .price-card{
    background:var(--bg-alt);border:2px solid var(--border);border-radius:var(--radius);
    padding:26px 22px;display:flex;flex-direction:column;gap:14px;position:relative;
    overflow:hidden;isolation:isolate;
  }
  .price-card::before{
    content:"";position:absolute;top:-60px;right:-60px;width:180px;height:180px;
    background:radial-gradient(circle, var(--yellow-soft) 0%, rgba(255,240,174,0) 72%);
    z-index:0;pointer-events:none;
  }
  .price-card::after{
    content:"";position:absolute;right:-18px;bottom:-18px;width:130px;height:130px;
    background:url("assets/logo-taupe.webp") center/contain no-repeat;
    opacity:.08;z-index:0;pointer-events:none;
  }
  .price-card > *{position:relative;z-index:1;}
  .price-card:nth-of-type(3n+2)::before{background:radial-gradient(circle, rgba(27,44,160,.10) 0%, rgba(27,44,160,0) 72%);}
  /* Painting-background variant: a real artwork shown at near-natural scale in a band
     across the top of the card (not stretched to cover the whole card, which was
     zooming in far too tight), fading into the plain card background just below it. */
  .price-card.has-art{
    --card-art: none;
    --art-pos: top center;
  }
  .price-card.has-art::before{
    content:"";position:absolute;top:0;left:0;right:0;width:auto;height:172px;z-index:0;pointer-events:none;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.15) 62%, var(--bg-alt) 100%),
      var(--card-art);
    background-size:cover;background-position:var(--art-pos);background-repeat:no-repeat;
  }
  .price-card.has-art::after{content:none;}
  /* .highlight::before below would otherwise clobber the art background (same specificity,
     later in source order) — restate it here so the painting always wins on highlighted cards. */
  .price-card.has-art.highlight::before{
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.15) 62%, var(--bg-alt) 100%),
      var(--card-art);
    background-size:cover;background-position:var(--art-pos);background-repeat:no-repeat;
  }
  /* Price and title sit directly over the artwork band, whose tone varies a lot from one
     painting to another (dark Rembrandt vs. pale fresco). Legibility comes only from this
     text-shadow halo now — the gradient above stays the original light veil (barely tinted
     until the very bottom edge) so the paintings stay crisp, not washed out. */
  .price-card.has-art h3,
  .price-card.has-art:not(.bundle) .price{
    text-shadow:
      0 1px 2px rgba(255,255,255,.95), 0 -1px 2px rgba(255,255,255,.95),
      1px 0 2px rgba(255,255,255,.95), -1px 0 2px rgba(255,255,255,.95),
      0 1px 6px rgba(255,255,255,.9), 0 0 10px rgba(255,255,255,.7);
  }
  .price-card.art-francais{--card-art:url("assets/bg-francais.webp");}
  .price-card.art-maths{--card-art:url("assets/bg-maths-physique.webp");--art-pos:100% top;}
  .price-card.art-physique{--card-art:url("assets/bg-physique.webp");}
  .price-card.art-chimie{--card-art:url("assets/bg-chimie.webp");}
  .price-card.art-anglais{--card-art:url("assets/bg-anglais.webp");}
  .price-card.art-maths-physique{--card-art:url("assets/bg-maths.webp");--art-pos:top center;}
  /* Bundle card keeps its blue brand background, tinted over the artwork so the white text stays legible everywhere, not just up top. */
  .price-card.bundle.has-art{
    --card-art: none;
    background-image:
      linear-gradient(120deg, rgba(18,31,115,.58), rgba(27,44,160,.52)),
      var(--card-art);
    background-size:cover;background-position:center 35%;background-repeat:no-repeat;
  }
  /* Lighter tint means the fresco itself now provides less guaranteed contrast for the white
     text, so give it the same halo treatment as the other has-art cards. */
  .price-card.bundle.has-art h3,
  .price-card.bundle.has-art .price,
  .price-card.bundle.has-art p.desc{
    text-shadow:0 1px 4px rgba(18,31,115,.9), 0 2px 12px rgba(18,31,115,.7);
  }
  .price-card.bundle.art-tout{--card-art:url("assets/bg-tout.webp");}
  .price-card.highlight{border-color:var(--blue);box-shadow:var(--shadow);}
  .price-card.highlight::before{background:radial-gradient(circle, rgba(27,44,160,.12) 0%, rgba(27,44,160,0) 72%);}
  .price-card .tag{
    align-self:flex-start;background:var(--blue);color:#fff;
    font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;
    text-transform:uppercase;letter-spacing:.04em;z-index:2;
  }
  .price-card h3{font-size:1.1rem;margin-bottom:0;}
  .price-card .price{font-family:'Philosopher',serif;font-size:2.1rem;color:var(--blue-dark);}
  .price-card .price span{font-size:1rem;font-weight:400;color:var(--ink-soft);font-family:'Roboto',sans-serif;}
  .price-card p.desc{color:var(--ink-soft);font-size:.92rem;flex-grow:1;margin:0;}
  .price-card p.note{color:var(--blue);font-size:.8rem;font-style:italic;margin:0;}
  .price-card .btn{text-align:center;}
  .price-card.bundle{
    grid-column:1 / -1;
    display:grid;grid-template-columns:1.4fr auto auto;align-items:center;gap:20px;
    background:var(--blue);color:#fff;border:none;
  }
  .price-card.bundle::before{background:radial-gradient(circle, rgba(255,212,0,.22) 0%, rgba(255,212,0,0) 72%);}
  .price-card.bundle::after{opacity:.14;}
  .price-card.bundle h3, .price-card.bundle .price{color:#fff;}
  .price-card.bundle p.desc{color:#dfe3ff;}
  .price-card.bundle .price span{color:#c9cdf5;}
  @media (max-width:700px){.price-card.bundle{grid-template-columns:1fr;text-align:center;}}

  /* Steps */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step;}
  @media (max-width:820px){.steps{grid-template-columns:1fr;}}
  .step{text-align:center;padding:0 12px;}
  .step .num{
    counter-increment:step;
    width:48px;height:48px;border-radius:50%;background:var(--yellow);
    color:var(--blue-dark);font-weight:700;font-family:'Philosopher',serif;font-size:1.3rem;
    display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
  }
  .step h3{font-size:1.1rem;}
  .step p{color:var(--ink-soft);margin:0;}

  /* FAQ */
  details{
    background:var(--bg-alt);border:1px solid var(--border);border-radius:14px;
    padding:18px 20px;margin-bottom:12px;
  }
  summary{font-weight:700;cursor:pointer;font-size:1.02rem;color:var(--blue-dark);}
  details p{margin:12px 0 0;color:var(--ink-soft);}

  /* CTA band */
  .cta-band{
    background:var(--blue);color:#fff;border-radius:28px;padding:52px 40px;text-align:center;
  }
  .cta-band h2{color:#fff;}
  .cta-band p{color:#dfe3ff;max-width:520px;margin:0 auto 24px;}

  footer{background:var(--blue-dark);color:#cfd3f5;padding:56px 0 30px;font-size:.92rem;}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:36px;}
  @media (max-width:760px){.footer-grid{grid-template-columns:1fr;}}
  footer h4{color:#fff;font-family:'Roboto',sans-serif;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px;}
  footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
  footer a{text-decoration:none;color:#cfd3f5;}
  footer a:hover{color:#fff;}
  .footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
  .footer-brand img{width:36px;height:36px;border-radius:9px;}
  .footer-brand span{font-family:'Philosopher',serif;color:#fff;font-size:1.15rem;}
  .legal-block details{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.12);}
  .legal-block summary{color:#fff;}
  .legal-block details p, .legal-block details li{color:#cfd3f5;}
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,0.12);padding-top:20px;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#9aa0d0;font-size:.85rem;
  }
  .social-icon{
    display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
    border-radius:50%;background:rgba(255,255,255,0.08);
  }

/* ===== Extra components for content pages ===== */
.page-hero{padding:44px 0 8px;}
.page-hero .eyebrow{margin-bottom:10px;}
.page-hero h1{font-size:clamp(1.8rem,4.5vw,2.5rem);max-width:760px;}
.breadcrumb{font-size:.85rem;color:var(--ink-soft);margin-bottom:10px;}
.breadcrumb a{color:var(--blue);text-decoration:none;font-weight:600;}
.breadcrumb a:hover{text-decoration:underline;}

.byline{
  display:flex;align-items:center;gap:12px;margin:18px 0 36px;
  padding:14px 18px;background:var(--yellow-soft);border-radius:14px;max-width:620px;
}
.byline img{width:40px;height:40px;border-radius:50%;flex-shrink:0;}
.byline .name{font-weight:700;color:var(--blue-dark);}
.byline .role{font-size:.85rem;color:var(--ink-soft);}

.prose{max-width:700px;margin:0 auto;}
.prose h2{font-size:1.5rem;margin-top:2.2em;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:1.15rem;margin-top:1.8em;}
.prose p{margin:0 0 1.1em;color:var(--ink);}
.prose p.lead{font-size:1.1rem;color:var(--ink-soft);}
.prose strong{color:var(--blue-dark);}
.prose ul, .prose ol{margin:0 0 1.1em;padding-left:1.3em;}
.prose li{margin-bottom:.4em;}
.prose a{color:var(--blue);text-decoration:underline;}
.prose blockquote{
  margin:1.5em 0;padding:4px 0 4px 20px;border-left:4px solid var(--yellow);
  font-style:italic;color:var(--ink-soft);
}
.prose figure{margin:1.8em 0;text-align:center;}
.prose figure img{border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow);}
.prose figcaption{font-size:.85rem;color:var(--ink-soft);margin-top:8px;}

.article-block{border-top:1px solid var(--border);padding-top:56px;margin-top:56px;}
.article-block:first-of-type{border-top:none;padding-top:0;margin-top:0;}

.toc{
  max-width:700px;margin:0 auto 48px;background:var(--bg-alt);border:1px solid var(--border);
  border-radius:16px;padding:22px 26px;
}
.toc h2{font-size:.95rem;text-transform:uppercase;letter-spacing:.05em;color:var(--blue);margin-bottom:12px;}
.toc ol{margin:0;padding-left:1.2em;}
.toc li{margin-bottom:6px;}
.toc a{color:var(--ink);text-decoration:none;font-weight:500;}
.toc a:hover{color:var(--blue);text-decoration:underline;}

.transcript-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:1.8em 0;}
@media (max-width:700px){.transcript-grid{grid-template-columns:1fr;}}
.transcript-grid figure{margin:0;}
.transcript-grid.single{max-width:420px;margin-left:auto;margin-right:auto;}

.callout{
  background:var(--yellow-soft);border-radius:14px;padding:18px 20px;margin:1.8em 0;
  font-size:.95rem;color:var(--ink);
}
.callout strong{color:var(--blue-dark);}

.stat-pill{
  display:inline-flex;align-items:baseline;gap:5px;background:var(--yellow-soft);
  color:var(--blue-dark);font-weight:700;font-size:.82rem;padding:4px 10px;border-radius:999px;
}
.stat-pill b{font-family:'Philosopher',serif;font-size:1rem;}

.deck-section{padding:44px 0;border-top:1px solid var(--border);}
.deck-section:first-of-type{border-top:none;}
.deck-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:700px;margin:0 auto 18px;}
.deck-head h2{margin:0;font-size:1.4rem;}

.back-cta{
  max-width:700px;margin:56px auto 0;text-align:center;background:var(--blue);
  border-radius:22px;padding:40px 30px;color:#fff;
}
.back-cta h2{color:#fff;}
.back-cta p{color:#dfe3ff;}

.nav-links a.active{color:var(--blue);font-weight:700;}

/* Back to top */
.back-to-top{
  position:fixed;right:20px;bottom:20px;z-index:60;
  width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  background:var(--blue);color:#fff;font-size:1.3rem;line-height:1;
  box-shadow:0 8px 22px rgba(27,44,160,.35);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:hover{background:var(--blue-dark);}
@media (max-width:600px){.back-to-top{right:14px;bottom:14px;width:42px;height:42px;}}