:root{
    --beige:#faf4ef;
    --ink:#404682;
    --blue:#94b9ff;
    --blue-soft:#c8dcf1;
    --green:#9abb50;
    --card:#f9f7f5;
    --border:#e7e2d2;
    --muted:#52525B;
    --radius:1.25rem;
    --shadow:0 10px 40px -20px rgba(30,40,90,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:"Inter",system-ui,sans-serif;
    background:var(--beige); color:var(--ink);
    line-height:1.45;
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Fredoka",sans-serif;margin:0}
a{color:inherit}
img{max-width:100%;display:block;height:auto}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:"Fredoka",sans-serif;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:1.35rem;color:var(--blue)}
.eyebrow.green{color:var(--green)}
.eyebrow.beige{color:var(--beige)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Language switcher */
.lang{position:absolute;top:20px;right:24px;display:flex;gap:10px;font-size:22px;z-index:10}
.lang button{background:none;border:0;cursor:pointer;font-size:22px;opacity:.55;transition:all .2s;padding:2px}
.lang button:hover{opacity:1}
.lang button.active{opacity:1;transform:scale(1.15)}

/* Intro & outro banner images */
.intro{padding-top:16px}
.intro-images{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    justify-items:center;
    gap:24px;
    max-width:760px;
    margin:0 auto;
}
.intro-images .intro-line{
    width:100%;max-width:220px;justify-self:stretch;
    object-fit:contain;
}
.intro-images .intro-line.right{transform:scaleX(-1)}
.intro-images .intro-center{
    width:auto;max-width:220px;height:auto;object-fit:contain;
}
.outro-images{margin-bottom:8px}

@media (max-width:640px){
    .intro-images{
        grid-template-columns:1fr;
        gap:12px;
        max-width:320px;
    }
    .intro-images .intro-line{display:none}
    .intro-images .intro-center{max-width:220px}
}

/* Anchor nav */
.anchors{
    display:flex;flex-wrap:wrap;
    column-gap:28px;row-gap:8px;
    margin:0 auto;padding:20px 0 0;max-width:980px;
    font-family:"Fredoka",sans-serif;font-weight:500;
}
.anchors a,.anchors .anchor-btn{
    color:var(--blue);text-decoration:none;font-size:1rem;
    border:0;background:none;cursor:pointer;padding:2px 2px;
    border-bottom:2px solid transparent;transition:all .2s;
    font-family:inherit;font-weight:500;
}
.anchors a:hover,.anchors .anchor-btn:hover{color:var(--ink);border-bottom-color:var(--green);font-weight:600}
@media (max-width:640px){
    .anchors{
        column-gap:0;row-gap:2px;
        padding:16px 12px 0;
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        justify-items:center;
        font-size:.9rem;
    }
    .anchors a,.anchors .anchor-btn{
        text-align:center;padding:4px 4px;font-size:.88rem;
        width:100%;
    }
}

/* Mission & Gaelle's card */
section.mission{padding:0px 24px 24px}
.mission-inner{
    max-width:980px;margin:0 auto;
    display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center;
}
.mission-text{max-width:560px; padding:20px 0 0 0}
.mission-text p{margin:0 0 8px;text-align: justify;}
.lead{font-size:1rem}
.quote{font-family:"Fredoka";font-weight:500;font-size:1.15rem;line-height:1;color:var(--green);margin-top:8px}
.card-gaelle{
    position:relative;background:var(--blue);border-radius:var(--radius);
    padding:64px 26px 26px;max-width:380px;margin:60px auto 0;text-align:center;
    box-shadow:0 15px 40px -25px rgba(30,40,90,.5);
}
.card-gaelle img{
    position:absolute;top:-56px;left:50%;transform:translateX(-50%);
    width:112px;height:112px;border-radius:50%;object-fit:cover;
    border:4px solid var(--beige);box-shadow:0 10px 25px -10px rgba(0,0,0,.35);
}
.card-gaelle h3{font-size:1.15rem;color:var(--ink);font-weight:600;letter-spacing: .14em}
.card-gaelle p{font-size:.92rem;color:rgba(42,47,90,.85);margin:10px 0 0}
@media (max-width:860px){
    .mission-inner{grid-template-columns:1fr;gap:24px}
    .mission-text{margin:0 auto}
}

/* Book a workshop CTA */
.pre-workshops{padding-top:24px}
.cta-lead{align-items:center;text-align:center;padding:10px 0 0}
.cta-tag{
    font-family:"Fredoka",sans-serif;font-weight:500;
    font-size:1rem;color:var(--ink);letter-spacing:.02em;margin:0;
}
.cta-arrow{
    display:inline-block;color:var(--green);
    font-size:1.6rem;line-height:1;
    animation:ctaBounce 1.8s ease-in-out infinite;
}
@keyframes ctaBounce{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(6px)}
}

/* Workshops */
section.workshops{padding:24px}
.workshops-list{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:38px}
.ws{
    position:relative;background:var(--card);border-radius:1.5rem;overflow:hidden;
    box-shadow:var(--shadow);display:grid;grid-template-columns:2fr 3fr;min-height:200px;
}
.ws.green{outline-color:rgba(139,201,90,.3)}

/* Carousel */
.ws-carousel{position:relative;overflow:hidden;background:#f2ecdc}
.ws-slides{position:relative;width:100%;height:100%;min-height:260px}
.ws-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.ws-slide.active{opacity:1}
.ws-slide img{width:100%;height:100%;object-fit:cover}
a.ws-credit:hover{background:rgba(0,0,0,.7);opacity:1;text-decoration:underline}
.ws-credit{
    position:absolute;left:10px;bottom:8px;
    font-size:.68rem;color:#fff;background:rgba(0,0,0,.35);
    padding:3px 8px;border-radius:6px;letter-spacing:.02em;opacity:.85;
}
.ws-nav{
    position:absolute;top:0;bottom:0;width:38%;display:flex;align-items:center;
    background:none;border:0;cursor:pointer;color:#fff;padding:0 10px;
    opacity:0;transition:opacity .25s ease;
}
.ws-nav.prev{left:0;justify-content:flex-start;background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,0))}
.ws-nav.next{right:0;justify-content:flex-end;background:linear-gradient(270deg,rgba(0,0,0,.25),rgba(0,0,0,0))}
.ws-carousel:hover .ws-nav{opacity:1}
.ws-nav:focus-visible{opacity:1;outline:2px solid #fff;outline-offset:-4px}
.ws-nav svg{width:22px;height:22px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.ws-dots{position:absolute;bottom:8px;right:10px;display:flex;gap:5px;z-index:2}
.ws-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);transition:all .25s}
.ws-dots span.active{background:#fff;transform:scale(1.3)}

/* Workshop cards */
.ws-body{position:relative;padding:28px 32px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.ws-body h3{font-size:1.15rem}
.ws-body .preview{color:var(--muted);font-size:.92rem;margin:0}
.ws-body .hint{margin-top:auto;color:var(--blue);font-size:.75rem;font-weight:500}
.ws.green .ws-body h3,.ws.green .ws-body .hint{color:var(--green)}
.ws-overlay{
    position:absolute;inset:0;background:rgba(200,220,241,.96);
    padding:28px 32px;display:flex;flex-direction:column;justify-content:center;gap:12px;
    opacity:0;transform:translateY(6px);transition:all .3s ease;pointer-events:none;
}
.ws.green .ws-overlay{background:rgba(213,235,187,.96)}
.ws-body:hover .ws-overlay,.ws-body:focus-within .ws-overlay{opacity:1;transform:none;pointer-events:auto}
.ws-overlay p{margin:0;font-size:.95rem;line-height:1.55}
.ws-overlay a{color:var(--blue);font-size:.8rem;text-decoration:underline;text-underline-offset:4px;align-self:flex-start;font-weight:500;position:relative;z-index:2}
.ws.green .ws-overlay a{color:var(--green)}
@media (max-width:640px){
    .ws{grid-template-columns:1fr;max-width:420px;margin:0 auto}
    .ws-carousel{min-height:180px}
    .ws-slides{min-height:180px}
    .ws-body{min-height:260px;padding:22px 22px 24px;gap:8px}
    .ws-overlay{
        padding:14px 16px;gap:6px;overflow:hidden;
        justify-content:flex-start;
    }
    .ws-overlay h3{font-size:1.15rem;letter-spacing:.1em}
    .ws-overlay p{font-size:0.92rem;line-height:1.35}
    .ws-overlay a{font-size:.72rem}
}

/* Facilitator note */
section.note{padding:0px 32px 24px 32px;scroll-margin-top:20px}
.note-inner{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:14px;text-align: justify;}
.note-inner .italic{font-style:italic;color:rgba(42,47,90,.8)}

/* Value cards */
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:8px;}
.value-card{
    perspective:1200px;
    min-height:210px;
    cursor:pointer;
    background:transparent;
    border:0;padding:0;
}
.value-inner{
    position:relative;width:100%;height:100%;min-height:210px;
    transition:transform .7s cubic-bezier(.4,.2,.2,1);
    transform-style:preserve-3d;
}

.value-face{
    position:absolute;inset:0;
    border-radius:1.25rem;
    padding:26px 28px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;gap:14px;
    backface-visibility:hidden;-webkit-backface-visibility:hidden;
    box-shadow:0 12px 30px -20px rgba(30,40,90,.45);
}
.value-front{ background:var(--green); }
.value-card:nth-child(2n) .value-front{ background:var(--blue); }

.value-front .value-icon{
    width:96px;height:96px;
    display:flex;align-items:center;justify-content:center;
    background:transparent;color:var(--ink);
}
.value-front .value-icon svg{ width:100%;height:100%; }
.value-front h4{
    color:var(--ink);
    font-family:"Fredoka",sans-serif;
    font-weight:700;
    font-size:1.05rem;
    line-height:1.25;
    max-width:180px;
}

.value-overlay{
    position:absolute;inset:0;background:rgba(249,247,245,.77);
    padding:22px 20px;display:flex;align-items:center;
    font-size:.9rem;line-height:1.5;
    border-radius: 1.25rem;
    opacity:0;transform:translateY(6px);transition:all .3s ease;
}
.value-back{
    background:rgba(249,247,245,.94);
    color:var(--ink);
    font-size:.92rem;line-height:1.5;
}
.value-card:nth-child(2n) .value-back{ background:rgb(249,247,245,.94); }
.value-back p{ margin:0; }
.value-card:hover .value-overlay,.value-card:focus-within .value-overlay{opacity:1;transform:none}

@media (max-width:900px){ .value-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){
    .value-grid{grid-template-columns:1fr;margin:0 10px}
    .value-inner{
        position:relative;width:80%;height:80%;
        margin: 0 auto;
    }
}

/* Intentions & Format */
section.intentions-format{padding:48px 24px;scroll-margin-top:20px;text-align: justify;}
.intentions-format-grid{max-width:980px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:48px}
.intentions-format-grid h2{margin-bottom:14px}
.intentions-format-grid ul{padding-left:20px;margin:0}
.intentions-format-grid li{margin:8px 0}
@media (max-width:720px){ .intentions-format-grid{grid-template-columns:1fr;gap:32px} }

/* Partners */
section.partners{padding:48px 24px}
.partners-inner{max-width:980px;margin:0 auto}
.partners-list{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;margin-top:20px}
.partner{max-width:140px;border-radius:10px;align-self: center;}
@media (max-width:640px){
    .partners-list{justify-content:space-around;gap:24px}
}

/* Testimonials */
section.testimonials{padding:24px 24px 56px}
.testimonials-inner{max-width:820px;margin:0 auto;text-align:center}
.testi-carousel{
    position:relative;margin-top:24px;padding:25px 45px;
    background:var(--card);
    box-shadow: var(--shadow);
    border-radius:1.5rem;
}
.testi-track{position:relative;height:120px}
.testi-slide{
    position:absolute;inset:0;margin:0;
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;
    opacity:0;transition:opacity .6s ease;pointer-events:none;
    padding:0 8px;
}
.testi-slide.active{opacity:1;pointer-events:auto;position:relative}
.testi-slide blockquote{
    margin:0;font-family:inherit,sans-serif;line-height:1.5;color:var(--ink);
    max-width:640px;
}
.testi-slide figcaption{font-size:.88rem;color:var(--muted);letter-spacing:.03em}
.testi-nav{
    position:absolute;top:50%;transform:translateY(-50%);
    background:var(--card);border:0;
    width:36px;height:36px;border-radius:50%;
    font-size:1.6rem;line-height:1;color:var(--ink);
    cursor:pointer;transition:background .2s;
}
.testi-nav.prev{left:10px}
.testi-nav.next{right:10px}
.testi-dots{display:flex;gap:6px;justify-content:center;margin-top:16px}
.testi-dots span{width:7px;height:7px;border-radius:50%;background:rgba(64,70,130,.25);transition:all .25s}
.testi-dots span.active{background:var(--blue);transform:scale(1.3)}
@media (max-width:520px){
    .testi-carousel{padding:28px 40px}
    .testi-slide blockquote{font-size:1rem}
}

/* Next steps */
section.next-steps{padding:48px 24px}
.next-steps-inner{
    max-width:800px;margin:0 auto;
    background:var(--blue);border-radius:1.5rem;overflow:hidden;
    box-shadow:0 10px 25px -10px rgba(0,0,0,.35);
    display:grid;grid-template-columns:3.4fr 1.6fr;min-height:280px;align-items:stretch;
}
.next-steps-body{min-width:0;padding:28px 32px;display:flex;flex-direction:column;justify-content:center}
.next-steps-grid{display:flex;flex-direction:column;gap:8px;margin-top:22px}
.next-steps-grid a{display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:rgba(42,47,90,.9);transition:color .2s}
.next-steps-grid a:hover{color:var(--beige)}
.next-steps-grid svg{width:24px;height:24px;flex-shrink:0;color:var(--blue);margin-top:2px}
.next-steps-image{position:relative;min-height:100%;background:#f2ecdc}
.next-steps-image img{
    position:absolute;inset:0;
    width:100%;height:100%;object-fit:cover;
    border-radius:0;box-shadow:none;
}
@media (max-width:640px){
    .next-steps-inner{grid-template-columns:1fr;min-height:0;max-width:420px}
    .next-steps-image{min-height:220px;height:220px}
    .next-steps-body{padding:22px 22px 24px}
}

/* CTA button */
.cta-wrap{text-align:center;margin:6px 0 4px}
.cta-btn{display:inline-block;padding:12px 28px;background:var(--blue);color:#fff;border-radius:999px;text-decoration:none;font-family:"Fredoka",sans-serif;font-weight:600;letter-spacing:.03em;font-size:1rem;box-shadow:0 10px 24px -12px rgba(30,40,90,.55);transition:transform .2s ease,background .2s ease}
.cta-btn:hover,.cta-btn:focus-visible{background:var(--ink);transform:translateY(-2px);outline:none}

/* Footer */
footer{padding:64px 24px 40px;text-align:center}
.footer-inner{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:10px}
.footer-links{display:flex;flex-direction:row;gap:8px;margin-top:14px}
.footer-sm{font-size:.75rem;color:var(--muted);margin-top:10px}
.link-btn{background:none;border:0;cursor:pointer;color:var(--blue);font:inherit;text-decoration:underline;text-underline-offset:4px;font-size:.9rem;padding:2px 6px}
.link-btn:hover{color:var(--ink)}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(30,35,70,.55);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal.open{display:flex}
.modal-box{background:#fff;border-radius:1.25rem;max-width:560px;width:100%;padding:36px 32px;position:relative;box-shadow:0 30px 80px -20px rgba(0,0,0,.4);max-height:90vh;overflow-y:auto}
.modal-box h2{margin-bottom:16px;color:var(--ink)}
.modal-box p{margin:6px 0;font-size:.95rem;text-align: justify;}
.modal-box details{margin:10px 0;border-bottom:1px solid var(--border);padding-bottom:8px}
.modal-box summary{cursor:pointer;font-weight:600;padding:6px 0}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:0;font-size:26px;cursor:pointer;color:var(--muted);line-height:1}
.modal-close:hover{color:var(--ink)}

/* Gallery modal carousel */
.modal-box-wide{max-width:820px}
.gallery-carousel{position:relative;margin-top:16px}
.gallery-slides{position:relative;aspect-ratio:4/3;width:100%;overflow:hidden;border-radius:1rem;background:#f2ecdc}
.gallery-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.gallery-slide.active{opacity:1}
.gallery-slide img{width:100%;height:100%;object-fit:cover}
.gallery-caption{
    position:absolute;left:0;right:0;bottom:0;
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:10px 14px;color:#fff;font-size:.85rem;
    background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0));
}
.gallery-caption a{color:#fff;text-decoration:underline}
.gallery-caption .muted{opacity:.8}
.gallery-nav{
    position:absolute;top:50%;transform:translateY(-50%);
    background:rgba(255,255,255,0);border:0;
    width:40px;height:40px;border-radius:50%;
    font-size:1.8rem;line-height:1;color:var(--ink);
    cursor:pointer;
}
.gallery-nav.prev{left:10px}
.gallery-nav.next{right:10px}
.gallery-dots{display:flex;gap:5px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.gallery-dots span{width:6px;height:6px;border-radius:50%;background:rgba(64,70,130,.25)}
.gallery-dots span.active{background:var(--blue);transform:scale(1.3)}

/* ============================================================
   ACCESSIBILITY NOTES & SUGGESTIONS
   ------------------------------------------------------------
   These are review notes for future improvements. No visual
   change is triggered by this block on its own.

   1. Colour contrast
      --muted (#8a8a95) on --beige (#faf4ef) is ~3.3:1, below
      WCAG AA (4.5:1) for body text. Use only for supporting
      captions ≥16px; darken to e.g. #6a6a75 for body copy.

   2. Focus visibility
      Buttons like .anchor-btn, .link-btn and .cta-btn rely on
      colour changes only. Consider a global rule such as:
        :focus-visible{outline:2px solid var(--ink);
                       outline-offset:3px;border-radius:4px}
      so keyboard users can always locate focus.

   3. Hover-only content
      .ws-overlay and .value-overlay reveal on :hover / :focus-
      within. Touch users can focus links inside them, but the
      overlay never persists. Adding a tap-to-toggle (JS) or an
      always-visible "Read more" affordance would help.

   4. Motion
      Carousels and .cta-arrow animate continuously. Wrap
      motion in @media (prefers-reduced-motion: reduce) and
      pause auto-rotation for users who requested less motion.

   5. Decorative images
      .intro-line images correctly use alt="" + aria-hidden.
      Keep this pattern for any purely decorative asset added
      later (partner logos that repeat the company name, etc.).

   6. Language switcher
      The flag buttons in .lang should each expose an
      aria-label ("English", "Deutsch", "Français") — flag
      emojis are announced inconsistently by screen readers.

   7. Modal traps
      Modals set aria-modal but focus is not trapped. Consider
      moving focus to .modal-close on open and restoring it to
      the trigger on close.
   ============================================================ */