:root { --teal:#4BBFBF; --teal-dark:#3aa0a0; --green:#7bc142; --orange:#e8821a; --dark:#1a1a1a; --cream:#faf6f0; }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Lato',sans-serif; background:var(--cream); color:var(--dark); overflow-x:hidden; }
nav { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(75,191,191,0.96); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:space-between; padding:0 2rem; height:64px; }
.nav-logo { font-family:'Caveat',cursive; font-size:1.4rem; font-weight:700; color:white; text-decoration:none; }
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a { color:white; text-decoration:none; font-size:0.78rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; opacity:0.9; }
.nav-links a:hover { opacity:1; border-bottom:2px solid white; }
.burger { display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; cursor:pointer; background:none; border:none; padding:4px; z-index:200; }
.burger span { display:block; width:100%; height:2px; background:white; border-radius:2px; transition:transform 0.3s, opacity 0.3s; transform-origin:center; }
.burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.mobile-menu { display:none; position:fixed; inset:0; top:64px; background:rgba(55,170,170,0.98); z-index:99; flex-direction:column; align-items:center; justify-content:center; transform:translateY(-100%); transition:transform 0.4s; }
.mobile-menu.open { transform:translateY(0); }
.mobile-menu a { color:white; text-decoration:none; font-family:'Caveat',cursive; font-size:2.8rem; font-weight:700; padding:1rem 2rem; width:100%; text-align:center; border-bottom:1px solid rgba(255,255,255,0.15); }
.mobile-menu a:hover { background:rgba(255,255,255,0.1); }
@media(max-width:600px) { .nav-links{display:none;} .burger{display:flex;} .mobile-menu{display:flex;} .nav-logo{font-size:1.1rem;} }
.hero { min-height:100vh; background:#fff; display:flex; align-items:center; justify-content:center; padding:80px 2rem 3rem; }
.hero-inner { text-align:center; max-width:760px; display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.hero-logo { width:clamp(320px,70vw,640px); height:auto; display:block; }
.hero-tagline { font-size:clamp(1rem,2.2vw,1.25rem); color:#555; line-height:1.5; }
.hero-subtitle { font-size:0.9rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:#555; }
.hero-subtitle em { font-style:normal; color:var(--teal); margin:0 0.5rem; }
.city-badge { display:inline-flex; align-items:center; gap:0.8rem; background:var(--teal); color:white; padding:0.5rem 1.2rem; font-size:0.7rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; border:2px solid var(--teal-dark); }
.city-badge span { font-size:0.6rem; opacity:0.8; border-left:1px solid rgba(255,255,255,0.5); padding-left:0.8rem; }
section { padding:5rem 2rem; scroll-margin-top:64px; }
.container { max-width:1000px; margin:0 auto; }
.section-label { font-family:'Caveat',cursive; font-size:1rem; font-weight:600; color:var(--teal); letter-spacing:0.05em; text-transform:uppercase; margin-bottom:0.4rem; }
h2 { font-family:'Caveat',cursive; font-size:clamp(2.2rem,5vw,3rem); font-weight:700; margin-bottom:2rem; color:var(--dark); }
h2 em { font-style:italic; color:var(--teal); }
#actualites { background:var(--cream); }
.venue-note { font-size:0.95rem; color:#555; margin-bottom:1.8rem; }
.venue-link { color:var(--teal); font-weight:700; text-decoration:none; border-bottom:1px solid var(--teal); }
.venue-maps { font-size:0.75rem; color:#999; }
.events-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; }
.event-card { background:white; border-left:4px solid var(--teal); padding:1.5rem; transition:transform 0.2s,box-shadow 0.2s; box-shadow:2px 4px 12px rgba(0,0,0,0.06); }
.event-card:hover { transform:translateY(-3px); box-shadow:4px 8px 24px rgba(75,191,191,0.18); }
.event-card.orange { border-left-color:var(--orange); }
.event-card.green  { border-left-color:var(--green); }
.event-date { font-family:'Caveat',cursive; font-size:1.5rem; font-weight:700; color:var(--teal); margin-bottom:0.3rem; }
.event-card.orange .event-date { color:var(--orange); }
.event-card.green  .event-date { color:var(--green); }
.event-title { font-weight:700; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:0.8rem; color:var(--dark); }
.event-items { list-style:none; }
.event-items li { font-size:0.88rem; line-height:1.6; padding:0.3rem 0; border-bottom:1px dashed #eee; display:flex; gap:0.5rem; align-items:flex-start; }
.event-items li:last-child { border-bottom:none; }
.event-items li::before { content:'*'; color:var(--teal); font-size:0.7rem; margin-top:0.3rem; flex-shrink:0; }
.event-card.orange .event-items li::before { color:var(--orange); }
.event-card.green  .event-items li::before { color:var(--green); }
.event-note { font-family:'Caveat',cursive; font-size:1.1rem; color:var(--green); font-weight:700; margin-top:0.8rem; }
#galerie { background:white; }
#galerie h2 em { color:var(--orange); }
#galerie .section-label { color:var(--orange); }
.gallery-intro { font-size:0.95rem; color:#666; margin-bottom:2rem; line-height:1.7; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0.8rem; }
.gallery-item { position:relative; overflow:hidden; cursor:pointer; aspect-ratio:4/3; background:#eee; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; display:block; }
.gallery-item:hover img { transform:scale(1.05); }
.gallery-overlay { position:absolute; inset:0; background:rgba(75,191,191,0); display:flex; align-items:center; justify-content:center; transition:background 0.3s; }
.gallery-overlay span { color:white; font-size:2rem; opacity:0; transition:opacity 0.3s; }
.gallery-item:hover .gallery-overlay { background:rgba(75,191,191,0.35); }
.gallery-item:hover .gallery-overlay span { opacity:1; }
.lightbox { display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.92); align-items:center; justify-content:center; padding:1rem; }
.lightbox.active { display:flex; }
.lightbox-inner { max-width:90vw; max-height:90vh; display:flex; flex-direction:column; align-items:center; gap:0.8rem; }
.lightbox-img { max-width:90vw; max-height:82vh; object-fit:contain; display:block; }
.lightbox-caption { color:rgba(255,255,255,0.7); font-size:0.78rem; text-align:center; }
.lightbox-close { position:fixed; top:1.2rem; right:1.5rem; color:white; font-size:2rem; cursor:pointer; background:none; border:none; line-height:1; }
.lightbox-prev,.lightbox-next { position:fixed; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:white; font-size:1.8rem; width:48px; height:48px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.lightbox-prev { left:0.8rem; } .lightbox-next { right:0.8rem; }
.lightbox-prev:hover,.lightbox-next:hover { background:rgba(75,191,191,0.4); }
.lightbox-counter { color:rgba(255,255,255,0.45); font-size:0.72rem; }
#qui { background:var(--teal); color:white; }
#qui h2 { color:white; } #qui h2 em { color:var(--dark); }
#qui .section-label { color:rgba(255,255,255,0.75); }
.intro-text { font-size:1.1rem; line-height:1.8; max-width:680px; margin-bottom:3rem; font-weight:300; }
.disciplines { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
@media(max-width:640px) { .disciplines { grid-template-columns:1fr; } }
.disc-card { background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2); padding:2rem; }
.disc-card:hover { background:rgba(255,255,255,0.18); }
.prof-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem; }
.prof-portrait { width:68px; height:68px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,0.5); flex-shrink:0; }
.disc-card h3 { font-family:'Caveat',cursive; font-size:1.8rem; font-weight:700; color:white; margin-bottom:0.1rem; }
.prof-name { font-weight:700; font-size:0.9rem; color:rgba(255,255,255,0.85); }
.disc-card p { font-size:0.88rem; line-height:1.75; color:rgba(255,255,255,0.85); margin-bottom:0.8rem; }
.pills { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.8rem; }
.pill { background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.3); color:white; font-size:0.68rem; font-weight:700; padding:0.3rem 0.7rem; text-transform:uppercase; }
.compagnie-link { display:inline-flex; align-items:center; gap:0.4rem; margin-top:1rem; color:white; text-decoration:none; font-size:0.78rem; font-weight:700; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,0.4); padding-bottom:2px; }
.compagnie-link:hover { color:var(--dark); }
#contact { background:var(--dark); color:white; }
#contact h2 { color:white; } #contact h2 em { color:var(--teal); }
#contact .section-label { color:var(--teal); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
@media(max-width:640px) { .contact-grid { grid-template-columns:1fr; } }
.contact-item { padding:1.5rem; border:1px solid rgba(255,255,255,0.1); margin-bottom:1rem; transition:border-color 0.2s; }
.contact-item:hover { border-color:var(--teal); }
.contact-label { font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--teal); font-weight:700; margin-bottom:0.3rem; }
.contact-value { font-family:'Caveat',cursive; font-size:1.4rem; color:white; text-decoration:none; display:block; }
a.contact-value:hover { color:var(--teal); }
.infos-box { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); padding:1.5rem; }
.infos-box h3 { font-family:'Caveat',cursive; font-size:1.4rem; color:var(--teal); margin-bottom:1rem; }
.infos-box p { font-size:0.82rem; line-height:2.1; color:rgba(255,255,255,0.55); }
.support-bar { margin-top:3rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.support-label { font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.35); }
.city-badge-sm { background:var(--teal); padding:0.4rem 0.9rem; border:2px solid white; }
.city-badge-sm div:first-child { font-size:0.55rem; font-weight:700; letter-spacing:0.1em; color:white; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,0.5); padding-bottom:0.2rem; margin-bottom:0.2rem; }
.city-badge-sm div:last-child { font-size:0.45rem; font-weight:400; letter-spacing:0.08em; color:white; text-transform:uppercase; }
footer { background:#111; color:rgba(255,255,255,0.35); padding:3rem 2rem 1.5rem; font-size:0.72rem; }
.footer-grid { max-width:1000px; margin:0 auto 2rem; display:grid; grid-template-columns:1fr 1fr 1fr; gap:2rem; }
@media(max-width:640px) { .footer-grid { grid-template-columns:1fr; gap:1.5rem; } }
.footer-col h4 { font-family:'Caveat',cursive; font-size:1rem; color:var(--teal); font-weight:700; margin-bottom:0.8rem; }
.footer-col p,.footer-col address { font-style:normal; line-height:2.1; color:rgba(255,255,255,0.4); }
footer a { color:rgba(255,255,255,0.55); text-decoration:none; display:block; line-height:2.1; transition:color 0.2s; }
footer a:hover { color:var(--teal); }
.footer-bottom { max-width:1000px; margin:0 auto; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,0.08); text-align:center; }
.fi { opacity:0; transform:translateY(20px); transition:opacity 0.6s ease,transform 0.6s ease; }
.fi.visible { opacity:1; transform:translateY(0); }

#ateliers{background:var(--cream);}
.ateliers-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1rem;}
@media(max-width:700px){.ateliers-grid{grid-template-columns:1fr;}}
.atelier-card{background:white;padding:2rem;box-shadow:2px 4px 12px rgba(0,0,0,0.06);border-top:4px solid var(--teal);transition:transform 0.2s,box-shadow 0.2s;}
.atelier-card:hover{transform:translateY(-3px);box-shadow:4px 8px 24px rgba(75,191,191,0.15);}
.atelier-card.orange{border-top-color:var(--orange);}
.atelier-card.green{border-top-color:var(--green);}
.atelier-card h3{font-family:'Caveat',cursive;font-size:1.6rem;font-weight:700;color:var(--dark);margin-bottom:0.3rem;}
.atelier-prof{font-size:0.75rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--teal);margin-bottom:1rem;}
.atelier-card p{font-size:0.88rem;line-height:1.8;color:#444;margin-bottom:0.8rem;}
.atelier-card-links{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-top:0.5rem;}
.atelier-link{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.75rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(75,191,191,0.4);padding-bottom:2px;}
.atelier-link:hover{border-bottom-color:currentColor;}
.btn-reserve{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.75rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;background:var(--orange);color:white!important;text-decoration:none!important;padding:0.45rem 1rem;transition:opacity 0.2s;}
.btn-reserve:hover{opacity:0.85;}
.event-reserve{margin-top:0.8rem;}
.event-reserve a{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.75rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;background:var(--orange);color:white!important;text-decoration:none!important;padding:0.4rem 0.9rem;transition:opacity 0.2s;}
.event-reserve a:hover{opacity:0.85;}