:root{
    --pink: #F2C9E6;
    --pink-deep: #EBABD8;
    --blue: #B6D6F2;
    --blue-deep: #8FBEE8;
    --footer-bg: #3A2E4A;
    --card: #FFFFFF;
    --ink-dark: #3A2E3D;
    --ink-soft: #6B5B70;
    --line: #E3C9DE;
    --radius: 18px;
    --shadow: 0 10px 30px -12px rgba(58,46,61,0.16);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--pink);
    color:var(--ink-dark);
    font-family:'Public Sans', sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:600;
    line-height:1.15;
    margin:0 0 .5em;
    color:var(--ink-dark);
  }
  p{margin:0 0 1em;}
  a{color:inherit;}
  img{max-width:100%; display:block;}
  .container{
    width:100%;
    max-width:1080px;
    margin:0 auto;
    padding:0 22px;
  }
  .eyebrow{
    display:inline-block;
    font-size:.78rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#3A6B8A;
    font-weight:700;
    margin-bottom:.6em;
  }

  /* ---------- HEADER ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:var(--pink-deep);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .nav-wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 22px;
    max-width:1080px; margin:0 auto;
  }
  .brand{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:1.7rem;
    color:var(--ink-dark);
    text-decoration:none;
  }
  .brand span{display:block; font-family:'Public Sans',sans-serif; font-weight:500; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;}
  nav.links{display:none; gap:26px; font-size:.92rem; font-weight:500;}
  nav.links a{text-decoration:none; color:var(--ink-soft); transition:color .2s;}
  nav.links a:hover{color:var(--ink-dark);}
  .nav-cta{
    display:none;
    background:var(--ink-dark); color:#fff; text-decoration:none;
    padding:10px 18px; border-radius:999px; font-size:.88rem; font-weight:600;
    transition:background .2s ease, transform .15s ease;
  }
  .nav-cta:hover{background:var(--ink-dark); transform:translateY(-1px);}
  .burger{
    background:none; border:1px solid var(--line); border-radius:10px;
    width:42px; height:42px; display:flex; align-items:center; justify-content:center;
    cursor:pointer;
  }
  .burger span, .burger span::before, .burger span::after{
    content:''; display:block; width:20px; height:2px; background:var(--ink-dark); position:relative; transition:.2s;
  }
  .burger span::before{position:absolute; top:-6px;}
  .burger span::after{position:absolute; top:6px;}
  #menu-toggle{display:none;}
  .mobile-menu{
    display:none; flex-direction:column; gap:2px;
    background:var(--card); border-top:1px solid var(--line);
  }
  .mobile-menu a{
    padding:14px 22px; text-decoration:none; color:var(--ink-dark); font-weight:500;
    border-bottom:1px solid var(--line);
  }
  #menu-toggle:checked ~ .mobile-menu{display:flex;}

  @media(min-width:820px){
    .burger{display:none;}
    nav.links{display:flex;}
    .nav-cta{display:inline-block;}
  }

  /* ---------- HERO ---------- */
  .hero{
    padding:52px 0 60px;
  }
  .hero-grid{
    display:grid; gap:34px;
  }
  .hero-photo{
  aspect-ratio:4/3; overflow:hidden;
  box-shadow:var(--shadow); border:1px solid var(--line);
  }
  .hero-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  .hero-photo .ph-label{
    font-size:.78rem; color:var(--ink-soft); background:rgba(255,255,255,0.85);
    padding:8px 14px; border-radius:10px; line-height:1.5;
  }
  .hero-text h1{font-size:2.1rem; margin-bottom:.4em;}
  .hero-text .lead{font-size:1.05rem; color:var(--ink-soft); max-width:46ch;}
  .hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px;}
  .btn{
    display:inline-flex;
    gap:8px;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-weight:600;
    font-size:.94rem;
    padding:13px 22px;
    border-radius:999px;
    border:1px solid transparent;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn-primary{background:var(--ink-dark); color:#fff; box-shadow:0 8px 20px -8px rgba(58,46,61,0.5);}
  .btn-ghost{background:#fff; color:var(--ink-dark); border:1.5px solid var(--ink-dark);}
  
  @media(min-width:860px){
    .hero-grid{grid-template-columns:1fr 1fr; align-items:center;}
    .hero-text h1{font-size:2.7rem;}
  }

  /* ---------- WAVE DIVIDER (signature) ---------- */
  .wave-pink-blue{
    width:100%; height:44px; display:block;
    background:var(--pink);
    color:var(--blue);
  }

  .wave-blue-pink{
    width:100%; height:44px; display:block;
    background:var(--blue);
    color:var(--pink);
  }

  .wave-blue-purple{
    width:100%; height:44px; display:block;
    background:var(--blue);
    color:var(--footer-bg);
  }

  /* ---------- SECTION GENERIC ---------- */
  section{padding:32px 0;}
  .section-head{max-width:56ch; margin-bottom:34px;}
  .section-head h2{font-size:1.7rem;}
  .section-head p{color:var(--ink-soft);}

  /* ---------- ABOUT ---------- */
  #apropos{background:var(--blue); color:var(--ink-dark);}
  #apropos h2, #apropos .eyebrow{color:var(--ink-dark);}
  #apropos .eyebrow{color:#3A6B8A;}
  .about-grid{display:grid; gap:30px;}
  .about-photo{
  aspect-ratio:3/4; overflow:hidden;
  box-shadow:var(--shadow); border:1px solid var(--line);
  }
  .about-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  .about-photo .ph-label{font-size:.78rem; color:var(--ink-dark); opacity:.75;}
  .about-text p{color:var(--ink-dark);}
  @media(min-width:400px){ .about-grid{grid-template-columns:0.5fr 1fr; align-items:center; gap:32px;} }

  /* ---------- ACTIVITES ---------- */
  .cards{display:grid; gap:22px; grid-template-columns:1fr;}
  @media(min-width:700px){ .cards{grid-template-columns:repeat(3,1fr);} }
  .card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:26px; box-shadow:var(--shadow);
  }
  .card .icon{
    width:46px; height:46px; border-radius:12px;
    background:rgba(143,190,232,0.22); color:#3A6B8A;
    display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  }
  .card h3{font-size:1.12rem; margin-bottom:.35em;}
  .card p{color:var(--ink-soft); font-size:.95rem; margin:0;}
  .card .tag{
    display:inline-block; margin-top:14px; font-size:.72rem; letter-spacing:.06em;
    text-transform:uppercase; color:#C085B0; font-weight:700;
  }

  /* ---------- LIVRET ---------- */
  #livret{
    background:var(--blue);
  }
  .livret-box{
    display:grid; gap:26px; align-items:center;
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    padding:30px; box-shadow:var(--shadow);
  }
  @media(min-width:780px){ .livret-box{grid-template-columns:1fr auto;} }
  .livret-box h3{font-size:1.25rem;}
  .livret-box p{color:var(--ink-soft); margin-bottom:0; font-size:.94rem;}
  .badge-lock{
    display:inline-flex; align-items:center; gap:6px;
    font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:var(--ink-dark); background:rgba(182,214,242,0.45);
    padding:6px 12px; border-radius:999px; margin-bottom:12px;
  }
  .btn-disabled{
    background:#F1E7EE; color:#B0A0AC; cursor:not-allowed;
    box-shadow:none;
  }
  .btn-disabled:hover{transform:none;}
  .livret-note{font-size:.82rem; color:var(--ink-soft); margin-top:10px;}

  /* ---------- CONTACT ---------- */
  #contact{background:var(--footer-bg); color:#F2E8F0;}
  #contact .eyebrow{color:var(--blue-deep);}
  #contact h2{color:#fff;}
  #contact p{color:var(--blue-deep);}
  #contact a{color:var(--blue-deep);}
  .contact-grid{display:grid; gap:18px;}
  @media(min-width:700px){ .contact-grid{grid-template-columns:repeat(3,1fr);} }
  .contact-item{
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16);
    border-radius:var(--radius); padding:22px;
  }
  .contact-item .icon{color:var(--blue-deep); margin-bottom:10px;}
  .contact-item h4{margin:0 0 6px; font-family:'Public Sans',sans-serif; font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color:#EAD9E4;}
  .contact-item a, .contact-item p{color:#F2E8F0; text-decoration:none; margin:0; font-size:.98rem;}

  footer{
    background:var(--footer-bg); color:#C6B6C2; text-align:center;
    padding:24px 22px; font-size:.82rem; border-top:1px solid rgba(255,255,255,0.1);
  }
  footer p{margin:0 0 6px;}
  footer p:last-child{margin-bottom:0;}
  footer a{color:#E0CEDA; text-decoration:underline; text-underline-offset:2px;}
  footer a:hover{color:#fff;}