:root{
    --ink: #0E2A23;
    --ink-soft: #163832;
    --paper: #FFFFFF;
    --sage: #EEF5F0;
    --gold: #F2B705;
    --gold-dark: #8A6900;
    --coral: #C2451F;
    --denim: #3E6E8E;
    --moss: #4F7A68;
    --slate: #4B5A54;
    --slate-light: #647670;
    --border: rgba(14,42,35,0.12);
    --border-light: rgba(255,255,255,0.16);
    --shadow: 0 24px 48px -28px rgba(14,42,35,0.35);
    --container: 1180px;
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  p{ text-align: justify; text-justify: inter-word; }
  ul{ list-style:none; }
  button{ font-family:inherit; cursor:pointer; border:none; background:none; }

  .wrap{
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 28px;
  }

  h1,h2,h3{
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.01em;
  }

  .eyebrow{
    display:inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--moss);
    margin-bottom: 14px;
    position: relative;
    padding-left: 18px;
  }
  .eyebrow::before{
    content:"";
    position:absolute;
    left:0; top:50%;
    transform: translateY(-50%);
    width: 10px; height: 2px;
    background: var(--gold);
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.98rem;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    white-space: nowrap;
  }
  .btn:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
  .btn-primary{
    background: var(--gold);
    color: var(--ink);
  }
  .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(242,183,5,0.55); }
  .btn-ghost{
    background: transparent;
    color: var(--paper);
    border: 1.5px solid var(--border-light);
  }
  .btn-ghost:hover{ background: rgba(255,255,255,0.08); transform: translateY(-2px); }
  .btn-dark{
    background: var(--ink);
    color: var(--paper);
  }
  .btn-dark:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }

  /* ---------- Header ---------- */
  header{
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height: 84px;
  }
  .logo{
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    font-style: italic;
    color: var(--ink);
  }
  .logo span{ color: var(--gold-dark); }
  .nav-links{
    display:flex;
    align-items:center;
    gap: 40px;
  }
  .nav-links a{
    font-weight: 600;
    font-size: 0.96rem;
    color: var(--slate);
    transition: color .15s ease;
  }
  .nav-links a:hover{ color: var(--ink); }
  .nav-actions{ display:flex; align-items:center; gap: 18px; }
  .nav-actions a.login{ font-weight: 700; font-size: 0.95rem; color: var(--ink); }
  .lang-switch{
    display:flex; align-items:center; gap:7px;
    font-family: var(--font-body); font-weight:700; font-size:0.86rem; color: var(--ink);
    background: var(--paper); border: 1.5px solid var(--border); border-radius: 999px;
    padding: 9px 14px; cursor:pointer; transition: all .18s ease;
  }
  .lang-switch:hover{ border-color: var(--ink); background: var(--sage); }
  .lang-switch:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
  .lang-switch i{ font-size:0.92rem; color: var(--gold-dark); }
  .lang-switch-mobile{ width:100%; justify-content:center; margin-top:10px; }
  .nav-toggle{
    display:none;
    font-size: 1.4rem;
    color: var(--ink);
  }
  .mobile-panel{
    display:none;
    flex-direction:column;
    gap: 4px;
    padding: 10px 0 24px;
    border-top: 1px solid var(--border);
  }
  .mobile-panel a{
    padding: 12px 4px;
    font-weight:600;
    color: var(--ink);
    border-bottom: 1px solid var(--border);
  }
  .mobile-panel.open{ display:flex; }

  /* ---------- Hero ---------- */
  .hero{
    background: var(--ink);
    color: var(--paper);
    position: relative;
    overflow: hidden;
    padding: 96px 0 120px;
  }
  .hero::before{
    content:"";
    position:absolute;
    width: 620px; height: 620px;
    background: radial-gradient(circle, rgba(242,183,5,0.22), transparent 70%);
    top: -220px; right: -160px;
    border-radius: 50%;
  }
  .hero::after{
    content:"";
    position:absolute;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(255,107,74,0.16), transparent 70%);
    bottom: -180px; left: -120px;
    border-radius: 50%;
  }
  .hero-grid{
    position: relative;
    z-index: 2;
    display:grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items:center;
  }
  .hero-copy .eyebrow{ color: var(--gold); }
  .hero-copy .eyebrow::before{ background: var(--gold); }
  .hero h1{
    font-size: clamp(2.4rem, 4.2vw + 1rem, 3.9rem);
    color: var(--paper);
    max-width: 13ch;
  }
  .hero-copy p{
    margin-top: 22px;
    font-size: 1.12rem;
    color: rgba(255,255,255,0.72);
    max-width: 46ch;
  }
  .hero-cta{
    display:flex;
    gap: 16px;
    margin-top: 36px;
    flex-wrap: wrap;
  }
  .hero-visual{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    align-content:center;
  }
  .float-card{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 10px;
    padding: 22px 18px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.92rem;
    text-align:center;
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--border-light);
    color: rgba(255,255,255,0.85);
  }
  .float-card i{ font-size: 1.15rem; color: var(--gold); }
  @keyframes riseIn{
    from{ opacity:0; transform: translateY(18px); }
    to{ opacity:1; transform: translateY(0); }
  }
  .hero-copy > *, .hero-visual .float-card{
    animation: riseIn .7s ease both;
  }
  .hero-copy .eyebrow{ animation-delay: .05s; }
  .hero-copy h1{ animation-delay: .12s; }
  .hero-copy p{ animation-delay: .2s; }
  .hero-cta{ animation: riseIn .7s ease both; animation-delay: .28s; }
  .fc-1{ animation-delay: .34s; } .fc-2{ animation-delay: .4s; } .fc-3{ animation-delay: .46s; } .fc-4{ animation-delay: .52s; }
  .fc-5{ animation-delay: .58s; } .fc-6{ animation-delay: .64s; } .fc-7{ animation-delay: .7s; } .fc-8{ animation-delay: .76s; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .hero-copy > *, .hero-visual .float-card, .hero-cta{ animation:none; }
  }

  /* ---------- Section shared ---------- */
  section{ padding: 100px 0; }
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap: 30px;
    margin-bottom: 48px;
  }
  .section-head h2{
    font-size: clamp(1.8rem, 2.4vw + 1rem, 2.6rem);
    max-width: 16ch;
  }
  .section-head p{
    color: var(--slate);
    max-width: 42ch;
    font-size: 1.02rem;
  }

  /* ---------- Quick actions (accès rapide aux formulaires) ---------- */
  .quick-actions{ padding: 56px 0; background: var(--sage); border-bottom: 1px solid var(--border); }
  .qa-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .qa-card{
    display:flex; flex-direction:column; align-items:flex-start;
    background: var(--paper); border-radius: var(--radius-md); border: 1.5px solid var(--border);
    padding: 28px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .qa-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--ink); }
  .qa-card.qa-primary{ background: var(--ink); border-color: var(--ink); }
  .qa-card.qa-primary .qa-icon{ background: var(--gold); color: var(--ink); }
  .qa-card.qa-primary h3, .qa-card.qa-primary p{ color: var(--paper); }
  .qa-card.qa-primary p{ color: rgba(255,255,255,0.72); }
  .qa-card.qa-primary .qa-link{ color: var(--gold); }
  .qa-icon{
    width: 52px; height: 52px; border-radius: 14px; background: var(--sage); color: var(--gold-dark);
    display:flex; align-items:center; justify-content:center; font-size: 1.3rem; margin-bottom: 18px;
  }
  .qa-card h3{ font-size: 1.15rem; margin-bottom: 8px; }
  .qa-card p{ color: var(--slate); font-size: 0.92rem; margin-bottom: 18px; }
  .qa-link{ font-weight: 800; font-size: 0.9rem; color: var(--ink); margin-top:auto; }

  /* ---------- Filter pills ---------- */
  .filters{
    display:flex;
    flex-wrap:wrap;
    gap: 10px;
    margin-bottom: 44px;
  }
  .filter-btn{
    padding: 10px 20px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--slate);
    transition: all .15s ease;
  }
  .filter-btn:hover{ border-color: var(--ink); color: var(--ink); }
  .filter-btn.active{
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }

  /* ---------- Course cards ---------- */
  .course-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
  .course-card{
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow:hidden;
    transition: transform .2s ease, box-shadow .2s ease;
    position: relative;
    background: var(--paper);
  }
  .course-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
  .course-top{
    height: 6px;
  }
  .course-body{ padding: 26px; }
  .course-meta-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom: 14px;
  }
  .course-cat{
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .badge-new{
    font-size: 0.72rem;
    font-weight: 800;
    background: var(--coral);
    color: var(--paper);
    padding: 4px 10px;
    border-radius: 999px;
  }
  .course-card h3{
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.3;
  }
  .course-card p.desc{
    color: var(--slate);
    font-size: 0.94rem;
    margin-bottom: 20px;
  }
  .course-stats{
    display:flex;
    gap: 16px;
    font-size: 0.84rem;
    color: var(--slate-light);
    margin-bottom: 20px;
  }
  .course-stats span{ display:flex; align-items:center; gap:6px; }
  .course-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top: 18px;
    border-top: 1px solid var(--border);
  }
  .price-block .price-eur{ font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; }
  .price-block .price-usd{ font-size: 0.8rem; color: var(--slate-light); }
  .course-footer a{
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--ink);
    padding: 10px 18px;
    border-radius: 999px;
    border: 1.5px solid var(--ink);
    transition: all .15s ease;
  }
  .course-footer a:hover{ background: var(--ink); color: var(--paper); }
  .course-card.hidden{ display:none; }

  .catalog-link{
    display:flex;
    justify-content:center;
    margin-top: 46px;
  }

  /* ---------- Pack spotlight ---------- */
  .pack-section{ background: var(--sage); }
  .pack-card{
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--radius-lg);
    padding: 56px;
    display:grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 40px;
    align-items:center;
    position: relative;
    overflow:hidden;
  }
  .pack-ribbon{
    position:absolute;
    top: 28px; left: -46px;
    background: var(--gold);
    color: var(--ink);
    font-weight: 800;
    font-size: 0.82rem;
    padding: 6px 60px;
    transform: rotate(-40deg);
  }
  .pack-card h3{
    font-size: clamp(1.5rem, 2vw + 1rem, 2.1rem);
    margin-bottom: 16px;
    max-width: 18ch;
  }
  .pack-card p{ color: rgba(255,255,255,0.72); max-width: 44ch; margin-bottom: 22px; }
  .pack-meta{
    display:flex;
    gap: 26px;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.65);
    margin-bottom: 26px;
  }
  .pack-meta span{ display:flex; align-items:center; gap:8px; }
  .pack-price-box{
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 32px;
    text-align:center;
  }
  .pack-old{
    text-decoration: line-through;
    color: rgba(255,255,255,0.5);
    font-size: 0.95rem;
  }
  .pack-new{
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--gold);
    margin: 6px 0 4px;
  }
  .pack-usd{ font-size: 0.82rem; color: rgba(255,255,255,0.55); margin-bottom: 22px; }

  /* ---------- Categories ---------- */
  .cat-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
  .cat-card{
    padding: 28px 22px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    transition: border-color .15s ease, transform .15s ease;
  }
  .cat-card:hover{ transform: translateY(-3px); border-color: var(--ink); }
  .cat-icon{
    width: 46px; height: 46px;
    border-radius: 12px;
    display:flex; align-items:center; justify-content:center;
    font-size: 1.15rem;
    margin-bottom: 16px;
    color: var(--paper);
  }
  .cat-card h4{ font-weight: 700; font-size: 1.02rem; margin-bottom: 4px; }
  .cat-card span{ color: var(--slate-light); font-size: 0.86rem; }

  /* ---------- Partners ---------- */
  .partners-section{ background: var(--sage); }
  .partners-cta{ display:flex; justify-content:center; margin-top: 40px; }
  .partners-note{ text-align:center; margin-top: 22px; color: var(--slate); font-size: 0.92rem; }
  .partners-note a{ font-weight:700; color: var(--ink); text-decoration: underline; text-underline-offset:2px; }

  /* ---------- Why us ---------- */
  .why-grid{
    display:grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 60px;
  }
  .why-left h2{ font-size: clamp(1.9rem, 2.6vw + 1rem, 2.7rem); margin-bottom: 20px; }
  .why-left p{ color: var(--slate); font-size: 1.02rem; max-width: 38ch; }
  .feature-row{
    display:flex;
    gap: 22px;
    padding: 26px 0;
    border-bottom: 1px solid var(--border);
  }
  .feature-row:first-child{ padding-top: 0; }
  .feature-icon{
    flex-shrink:0;
    width: 48px; height: 48px;
    border-radius: 12px;
    background: var(--sage);
    color: var(--moss);
    display:flex; align-items:center; justify-content:center;
    font-size: 1.15rem;
  }
  .feature-text h4{ font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
  .feature-text p{ color: var(--slate); font-size: 0.94rem; }

  /* ---------- FAQ ---------- */
  .faq-section{ background: var(--sage); }
  .faq-grid{
    display:grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 60px;
  }
  .faq-left h2{ font-size: clamp(1.9rem,2.6vw + 1rem,2.6rem); margin-bottom: 18px; max-width: 14ch; }
  .faq-left p{ color: var(--slate); margin-bottom: 26px; max-width: 36ch; }
  details.faq-item{
    background: var(--paper);
    border-radius: var(--radius-sm);
    padding: 6px 24px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
  }
  details.faq-item summary{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 18px 0;
    font-weight: 700;
    font-size: 1rem;
    cursor:pointer;
  }
  details.faq-item summary::-webkit-details-marker{ display:none; }
  details.faq-item summary i{
    transition: transform .2s ease;
    color: var(--moss);
    flex-shrink:0;
    margin-left: 16px;
  }
  details.faq-item[open] summary i{ transform: rotate(45deg); }
  details.faq-item p{
    color: var(--slate);
    font-size: 0.94rem;
    padding-bottom: 20px;
  }

  /* ---------- Footer ---------- */
  footer{
    background: var(--ink);
    color: rgba(255,255,255,0.75);
    padding: 80px 0 30px;
  }
  .footer-top{
    display:grid;
    grid-template-columns: 1.4fr 0.8fr 0.8fr;
    gap: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid var(--border-light);
  }
  .footer-brand .logo{ color: var(--paper); }
  .footer-brand p{ margin: 18px 0 26px; max-width: 40ch; font-size: 0.95rem; }
  .wa-btn{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    background: #5C8A6A;
    color: var(--paper);
    padding: 13px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
  }
  .wa-btn:hover{ filter: brightness(1.08); }
  .footer-col h5{
    color: var(--paper);
    font-size: 0.92rem;
    margin-bottom: 20px;
    font-weight: 700;
  }
  .footer-col li{ margin-bottom: 12px; }
  .footer-col a{ font-size: 0.92rem; transition: color .15s ease; }
  .footer-col a:hover{ color: var(--paper); }
  .footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top: 26px;
    font-size: 0.84rem;
    color: rgba(255,255,255,0.62);
    flex-wrap: wrap;
    gap: 10px;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 980px){
    .hero-grid{ grid-template-columns: 1fr; }
    .hero-visual{ margin-top: 28px; }
    .qa-grid{ grid-template-columns: 1fr 1fr; }
    .course-grid{ grid-template-columns: repeat(2,1fr); }
    .cat-grid{ grid-template-columns: repeat(2,1fr); }
    .why-grid, .faq-grid{ grid-template-columns: 1fr; }
    .pack-card{ grid-template-columns: 1fr; }
    .footer-top{ grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 720px){
    .nav-links, .nav-actions .login{ display:none; }
    .nav-toggle{ display:block; }
    section{ padding: 64px 0; }
    .quick-actions{ padding: 40px 0; }
    .qa-grid{ grid-template-columns: 1fr; }
    .hero{ padding: 64px 0 80px; }
    .course-grid{ grid-template-columns: 1fr; }
    .cat-grid{ grid-template-columns: 1fr 1fr; }
    .section-head{ flex-direction:column; align-items:flex-start; }
    .footer-top{ grid-template-columns: 1fr; }
    .pack-card{ padding: 34px 26px; }
    .pack-ribbon{ left: -54px; }
  }
  @media (max-width: 420px){
    .wrap{ padding: 0 18px; }
    .nav{ height: 72px; }
    .logo{ font-size: 1.35rem; }
    .nav-actions{ gap: 10px; }
    .nav-actions .btn{ padding: 11px 18px; font-size: 0.9rem; }
    .lang-switch{ padding: 9px 10px; }
    .cat-grid{ grid-template-columns: 1fr; }
    .hero-visual{ grid-template-columns: 1fr; }
    .hero-cta{ flex-direction: column; align-items: stretch; }
    .hero-cta .btn{ width: 100%; }
  }