/*
Theme Name: Atelier AAA
Theme URI: https://www.atelieraaa.org
Author: YK Marketing Agency
Description: Thème personnalisé pour l'Atelier AAA — Annecy
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: atelier-aaa
*/

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --ink:            #0B0B09;
  --ink-soft:       #1A1A17;
  --turquoise:      #1FB6AC;
  --turquoise-dark: #0E7A72;
  --pastel-a:       #DCEFEE;
  --pastel-b:       #FBE4D3;
  --pastel-c:       #FBF6EA;
  --paper:          #FFFFFF;
  --muted:          #5B5850;
  --font-display:   'Archivo Black', sans-serif;
  --font-body:      'Inter', sans-serif;
  --max:            1200px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html  { scroll-behavior: smooth; }
body  { font-family: var(--font-body); color: var(--ink); background: var(--paper); line-height: 1.55; font-size: 16px; -webkit-font-smoothing: antialiased; }
img   { max-width: 100%; display: block; }
a     { color: inherit; text-decoration: none; }
ul    { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink) !important;
}
p { line-height: 1.6; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.wrap  { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
section { padding: 80px 0; }
:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 3px; }

/* ==========================================================================
   COMPOSANTS PARTAGÉS
   ========================================================================== */
.eyebrow {
  display: inline-block;
  background: var(--turquoise);
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  text-transform: none !important;
}

.dots { display: flex; gap: 6px; margin: 18px 0 22px; }
.dots span { width: 8px; height: 8px; border-radius: 2px; background: var(--turquoise); opacity: .4; }
.dots span:first-child { opacity: 1; }

.btn-fill {
  display: inline-block;
  background: var(--turquoise) !important;
  color: #fff !important;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--font-body) !important;
  font-weight: 700;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: transform .12s ease;
}
.btn-fill:hover { transform: translateY(-2px); }

.btn-outline {
  display: inline-block;
  background: transparent !important;
  border: 2px solid var(--ink) !important;
  color: var(--ink) !important;
  padding: 12px 26px;
  border-radius: 999px;
  font-family: var(--font-body) !important;
  font-weight: 700;
  font-size: 15px;
  transition: background .12s, color .12s;
}
.btn-outline:hover { background: var(--ink) !important; color: #fff !important; }
.btn-outline.on-dark { border-color: rgba(255,255,255,.5) !important; color: #fff !important; }
.btn-outline.on-dark:hover { background: #fff !important; color: var(--ink) !important; }

.dashed-divider { border-top: 1.5px dashed rgba(11,11,9,.25); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(11,11,9,.08);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-badge {
  background: var(--turquoise);
  color: #fff;
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: 16px;
  padding: 8px 14px;
  border-radius: 10px;
  transform: rotate(-4deg);
  display: inline-block;
  text-transform: uppercase;
}
.logo-name { font-weight: 700; font-size: 14px; letter-spacing: .01em; color: var(--ink); }

.site-nav ul { display: flex; gap: 6px; }
.site-nav a {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  padding: 10px 15px !important;
  border-radius: 999px !important;
  color: var(--ink) !important;
  transition: background .15s;
}
.site-nav a:hover { background: var(--pastel-a) !important; }
.site-nav a.current { background: var(--ink) !important; color: #fff !important; }

.nav-cta {
  background: var(--ink) !important;
  color: #fff !important;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  transition: background .12s;
}
.nav-cta:hover { background: var(--turquoise-dark) !important; }

.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.menu-toggle span { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: var(--ink); margin: 5px 0; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  background: var(--turquoise);
  color: #fff;
  padding: 70px 0 0;
  overflow: hidden;
}
.hero-inner { padding-bottom: 90px; }
.hero .kicker { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.85); margin-bottom: 18px; }
.hero h1 {
  font-size: clamp(34px, 6vw, 68px) !important;
  max-width: 14ch;
  color: #fff !important;
}
.hero .lead { margin-top: 22px; font-size: 17.5px; color: rgba(255,255,255,.9); max-width: 44ch; }
.cta-row { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero .cta-row .btn-fill { background: var(--ink) !important; }

.hero-strip {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.25);
  padding: 22px 0;
  font-size: 14px;
  color: rgba(255,255,255,.9);
}
.hero-strip div { display: flex; flex-direction: column; gap: 3px; }
.hero-strip strong { font-weight: 700; color: #fff; }

/* ==========================================================================
   INTRO
   ========================================================================== */
.intro .wrap { display: flex; gap: 48px; align-items: flex-end; flex-wrap: wrap; }
.big-year {
  font-family: var(--font-display) !important;
  font-size: clamp(70px, 11vw, 130px) !important;
  color: var(--ink) !important;
  line-height: .85;
  text-transform: none !important;
}
.intro-text { flex: 1; min-width: 260px; padding-bottom: 8px; }
.intro-text p { color: var(--muted); font-size: 16.5px; max-width: 52ch; }

/* ==========================================================================
   ACTIVITÉS
   ========================================================================== */
.activities { background: var(--pastel-a); }
.activities .head { max-width: 60ch; }
.activities .head h2 { font-size: clamp(26px, 3.2vw, 36px) !important; }
.activities .head p { color: var(--muted); font-size: 16.5px; margin-top: 8px; }
.activities-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }

.activity-card { background: #fff; border-radius: 20px; padding: 32px; }
.activity-card .tag {
  display: inline-block;
  background: var(--ink);
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
  text-transform: none !important;
  font-family: var(--font-body) !important;
}
.activity-card .swatch { height: 100px; border-radius: 12px; margin-bottom: 20px; }
.activity-card:nth-child(1) .swatch { background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); }
.activity-card:nth-child(2) .swatch { background: linear-gradient(135deg, #FF9A62, #E86A35); }
.activity-card h3 { font-size: 20px !important; margin-bottom: 10px; text-transform: none !important; color: var(--ink) !important; }
.activity-card p { color: var(--muted); font-size: 15.5px; }
.activity-card .link {
  display: inline-block;
  margin-top: 16px;
  font-weight: 700;
  font-size: 14.5px;
  border-bottom: 2px solid var(--ink);
  color: var(--ink) !important;
}
.activity-card .link:hover { color: var(--turquoise) !important; border-color: var(--turquoise); }

/* ==========================================================================
   AGENDA
   ========================================================================== */
.agenda .head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 36px; }
.agenda .head h2 { font-size: clamp(26px, 3.2vw, 34px) !important; }
.agenda .head p { color: var(--muted); font-size: 15px; margin-top: 6px; }

.card-row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}
.card-row::-webkit-scrollbar { height: 6px; }
.card-row::-webkit-scrollbar-thumb { background: rgba(11,11,9,.2); border-radius: 3px; }

.event-card { flex: 0 0 auto; width: 280px; scroll-snap-align: start; background: #fff; border-radius: 18px; overflow: hidden; }
.event-card .top { height: 130px; position: relative; }
.event-card:nth-child(1) .top { background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); }
.event-card:nth-child(2) .top { background: linear-gradient(135deg, #FFC65C, #E8972E); }
.event-card:nth-child(3) .top { background: linear-gradient(135deg, #FF9A62, #E86A35); }
.event-card .badge {
  position: absolute; top: 14px; left: 14px;
  background: #fff; color: var(--ink) !important;
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-body) !important;
  text-transform: none !important;
}
.event-card .body { padding: 20px; }
.event-card .when { font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.event-card .title { font-family: var(--font-body) !important; font-weight: 700 !important; font-size: 16.5px; margin-bottom: 10px; text-transform: none !important; color: var(--ink) !important; }
.event-card .who { font-size: 13px; font-weight: 700; color: var(--turquoise-dark); }
.agenda-ctas { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }

/* ==========================================================================
   LEGACY
   ========================================================================== */
.legacy { background: var(--ink); color: #fff; }
.legacy .wrap { max-width: 820px; }
.legacy h2 {
  font-size: clamp(24px, 3.6vw, 40px) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  color: #fff !important;
  line-height: 1.3;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { background: var(--pastel-b); }
.contact .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; }
.contact h2 { font-size: clamp(24px, 3vw, 32px) !important; margin-bottom: 14px; }
.contact .lead { color: var(--muted); max-width: 42ch; margin-bottom: 26px; }

.signup { display: flex; gap: 10px; max-width: 420px; flex-wrap: wrap; }
.signup input {
  flex: 1; min-width: 180px; padding: 14px 18px;
  border-radius: 999px; border: 1.5px solid rgba(11,11,9,.2);
  background: #fff; font-family: var(--font-body); font-size: 15px;
  color: var(--ink);
}
.signup button {
  background: var(--ink); color: #fff; border: none;
  padding: 0 24px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  cursor: pointer; min-height: 48px;
}
.signup button:hover { background: var(--turquoise-dark); }

.contact-info .label {
  font-size: 13px; font-weight: 700; color: var(--turquoise-dark);
  text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px;
}
.contact-info p { font-size: 15px; margin-bottom: 4px; color: var(--ink); }
.contact-info .block { margin-bottom: 22px; }

.socials { display: flex; gap: 10px; margin-top: 6px; }
.socials a {
  width: 38px; height: 38px; border-radius: 50%;
  color: #fff !important; display: flex; align-items: center; justify-content: center;
  transition: filter .12s;
}
.socials a:hover { filter: brightness(1.12); }
.socials a.fb { background: #1877F2; }
.socials a.ig { background: linear-gradient(135deg, #F9CE34 0%, #EE2A7B 45%, #6228D7 100%); }
.socials a.yt { background: #FF0000; }
.socials svg { width: 18px; height: 18px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--ink); color: #9C988E; padding: 32px 0; }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13px; }
.site-footer a { color: #9C988E !important; }
.site-footer a:hover { color: #fff !important; }

/* ==========================================================================
   PAGE HEADER (intérieure)
   ========================================================================== */
.page-header { background: var(--pastel-a); padding: 56px 0 48px; }
.breadcrumb { font-size: 13.5px; color: var(--muted); margin-bottom: 20px; }
.breadcrumb a { font-weight: 600; color: var(--turquoise-dark) !important; }
.page-header h1 { font-size: clamp(38px, 6vw, 64px) !important; }
.page-header p { color: var(--muted); font-size: 16.5px; max-width: 56ch; margin-top: 16px; }

/* ==========================================================================
   QUI SOMMES-NOUS
   ========================================================================== */
.mission-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 44px; }
.mission-card { background: var(--pastel-c); border-radius: 20px; padding: 30px; }
.mission-card .num { font-family: var(--font-display) !important; font-size: 15px; color: var(--turquoise-dark); margin-bottom: 16px; }
.mission-card h3 { font-size: 19px !important; margin-bottom: 10px; text-transform: none !important; color: var(--ink) !important; }
.mission-card p { color: var(--muted); font-size: 15px; }

.timeline { background: var(--ink); color: #fff; }
.timeline .head { max-width: 60ch; margin-bottom: 48px; }
.timeline .head h2 { color: #fff !important; font-size: clamp(26px,3.2vw,36px) !important; }
.timeline .head p { color: #C9C4BC; margin-top: 8px; }
.timeline-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.timeline-item { border-left: 2px solid var(--turquoise); padding-left: 20px; }
.timeline-item .year { font-family: var(--font-display) !important; font-size: 28px; color: var(--turquoise); margin-bottom: 10px; }
.timeline-item p { color: #C9C4BC; font-size: 14.5px; }

.team .head p { color: var(--muted); margin-top: 8px; }
.team-note { background: var(--pastel-a); border-radius: 14px; padding: 16px 20px; font-size: 14px; color: var(--muted); margin-top: 32px; }
.team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 24px; }
.avatar { width: 100%; aspect-ratio: 1; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display) !important; font-size: 28px; color: #fff; margin-bottom: 16px; }
.avatar.c1 { background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); }
.avatar.c2 { background: linear-gradient(135deg, #FF9A62, #E86A35); }
.avatar.c3 { background: linear-gradient(135deg, #FFC65C, #E8972E); }
.avatar.c4 { background: linear-gradient(135deg, #8FD0CC, #3E9C95); }
.team-card .name { font-weight: 700; font-size: 16px; margin-bottom: 2px; }
.team-card .role { color: var(--muted); font-size: 14px; }

/* ==========================================================================
   NOS ATELIERS
   ========================================================================== */
.quicknav { display: flex; gap: 10px; padding: 24px 0; flex-wrap: wrap; }
.quicknav a {
  background: #fff; border: 1.5px solid rgba(11,11,9,.18);
  padding: 9px 18px; border-radius: 999px;
  font-weight: 600; font-size: 14px; color: var(--ink) !important;
}
.quicknav a:hover { border-color: var(--ink); }

.pedagogy-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 44px; }
.pedagogy-card { background: var(--pastel-c); border-radius: 20px; padding: 30px; }
.pedagogy-card h3 { font-size: 19px !important; margin-bottom: 10px; text-transform: none !important; color: var(--ink) !important; }
.pedagogy-card p { color: var(--muted); font-size: 15px; }

.discipline { padding: 80px 0; }
.discipline .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.discipline-visual { height: 280px; border-radius: 22px; }
.visual-anim { background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); }
.visual-fixe { background: linear-gradient(135deg, #FF9A62, #E86A35); }
.discipline h2 { font-size: clamp(26px,3.4vw,38px) !important; margin-bottom: 16px; }
.discipline p { color: var(--muted); font-size: 16.5px; max-width: 48ch; margin-bottom: 20px; }
.format-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.format-list span {
  background: #fff; border: 1.5px solid rgba(11,11,9,.15);
  padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
}
.discipline.reverse .visual { order: 2; }

/* ==========================================================================
   AGENDA PAGE
   ========================================================================== */
.filters { display: flex; gap: 10px; flex-wrap: wrap; padding: 28px 0 8px; }
.filter-btn {
  background: #fff; border: 1.5px solid rgba(11,11,9,.18); color: var(--ink);
  padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 14px;
  cursor: pointer; font-family: var(--font-body); transition: .12s;
}
.filter-btn:hover { border-color: var(--ink); }
.filter-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.event-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 32px; }
.event-grid .event-card {
  width: auto; flex: none;
  border: 1px solid rgba(11,11,9,.1);
  transition: transform .15s, box-shadow .15s;
}
.event-grid .event-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(11,11,9,.08); }
.event-grid .event-card:nth-child(1) .top { background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); }
.event-grid .event-card:nth-child(2) .top { background: linear-gradient(135deg, #FFC65C, #E8972E); }
.event-grid .event-card:nth-child(3) .top { background: linear-gradient(135deg, #FF9A62, #E86A35); }
.event-grid .event-card:nth-child(4) .top { background: linear-gradient(135deg, #8FD0CC, #3E9C95); }
.event-grid .event-card:nth-child(5) .top { background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); }
.event-grid .event-card:nth-child(6) .top { background: linear-gradient(135deg, #FFC65C, #E8972E); }
.event-grid .event-card:nth-child(7) .top { background: linear-gradient(135deg, #FF9A62, #E86A35); }
.event-grid .event-card:nth-child(8) .top { background: linear-gradient(135deg, #8FD0CC, #3E9C95); }
.event-grid .event-card:nth-child(9) .top { background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); }
.agenda-note { color: var(--muted); font-size: 13.5px; margin-top: 36px; padding-top: 24px; border-top: 1.5px dashed rgba(11,11,9,.2); }

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.form-card { background: var(--pastel-c); border-radius: 24px; padding: 40px; }
.form-card h2 { font-size: 22px !important; text-transform: none !important; margin-bottom: 24px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px; border-radius: 10px;
  border: 1.5px solid rgba(11,11,9,.18); background: #fff;
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
}
.field textarea { resize: vertical; min-height: 120px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-size: 13px; color: var(--muted); margin-top: 14px; }

.hours-row { display: flex; justify-content: space-between; font-size: 14.5px; padding: 8px 0; border-bottom: 1px solid rgba(11,11,9,.08); color: var(--ink); }
.hours-row span:first-child { color: var(--muted); }
.map-wrap { border-radius: 20px; overflow: hidden; margin-top: 56px; border: 1px solid rgba(11,11,9,.1); }
.map-wrap iframe { width: 100%; height: 360px; border: 0; display: block; }

/* ==========================================================================
   MENTIONS LÉGALES
   ========================================================================== */
.legal-note { background: var(--pastel-b); border-radius: 16px; padding: 20px 24px; font-size: 14.5px; color: var(--muted); margin-bottom: 44px; max-width: 74ch; }
.legal-body { max-width: 74ch; }
.legal-block { margin-bottom: 40px; scroll-margin-top: 90px; }
.legal-block h2 { font-family: var(--font-body) !important; font-weight: 700 !important; font-size: 19px !important; text-transform: none !important; color: var(--ink) !important; margin-bottom: 12px; }
.legal-block p { color: var(--muted); font-size: 15.5px; margin-bottom: 10px; }
.placeholder { background: var(--pastel-c); padding: 1px 8px; border-radius: 5px; color: var(--ink); font-weight: 600; }
.toc { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; }
.toc a { background: #fff; border: 1.5px solid rgba(11,11,9,.18); padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink) !important; }
.toc a:hover { border-color: var(--ink); }

/* ==========================================================================
   CTA BLOCK (pages intérieures)
   ========================================================================== */
.cta-block { background: var(--pastel-b); padding: 56px 0; }
.cta-block.dark { background: var(--ink); }
.cta-block .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta-block h2 { font-size: clamp(22px,2.8vw,30px) !important; }
.cta-block p { color: var(--muted); margin-top: 8px; font-size: 15px; }
.cta-block.dark h2 { color: #fff !important; }
.cta-block.dark p { color: #C9C4BC; }
.cta-row-block { display: flex; gap: 14px; flex-wrap: wrap; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 960px) {
  .mission-grid, .pedagogy-grid { grid-template-columns: 1fr 1fr; }
  .timeline-row { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .event-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .wrap { padding: 0 20px; }
  section, .discipline { padding: 52px 0; }
  .site-header .wrap { padding: 14px 20px; }
  .site-nav, .nav-cta { display: none; }
  .menu-toggle { display: block; }
  .hero-strip { flex-direction: column; gap: 14px; }
  .activities-grid { grid-template-columns: 1fr; }
  .contact .wrap, .discipline .wrap, .cta-block .wrap { grid-template-columns: 1fr; }
  .event-card { width: 250px; }
  .intro .wrap { align-items: flex-start; }
  .mission-grid, .pedagogy-grid, .timeline-row, .team-grid, .event-grid { grid-template-columns: 1fr; }
  .discipline.reverse .visual { order: 0; }
  .field-row { grid-template-columns: 1fr; }
  .form-card { padding: 26px; }
}

/* Logo image */
.logo-img { height: 52px; width: auto; display: block; }

/* Bouton Réserver agenda — noir */
.agenda-btn-reserv { background: var(--ink) !important; }
.agenda-btn-reserv:hover { background: var(--turquoise-dark) !important; }

/* ==========================================================================
   CORRECTIONS MOBILE COMPLÈTES
   ========================================================================== */

/* Éviter le scroll horizontal */
html, body { overflow-x: hidden; max-width: 100%; }

/* ==========================================================================
   TABLETTE (< 960px)
   ========================================================================== */
@media (max-width: 960px) {
  .event-grid { grid-template-columns: 1fr 1fr !important; }
  .mission-grid, .pedagogy-grid { grid-template-columns: 1fr 1fr !important; }
  .timeline-row { grid-template-columns: 1fr 1fr !important; }
  .team-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ==========================================================================
   MOBILE (< 880px)
   ========================================================================== */
@media (max-width: 880px) {

  /* Header */
  .site-nav { display: none !important; }
  .site-nav.open { display: flex !important; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; flex-direction: column; align-items: center; justify-content: center; gap: 24px; z-index: 9999; }
  .site-nav ul { flex-direction: column; align-items: center; gap: 8px; }
  .site-nav a { font-size: 18px !important; padding: 12px 24px !important; }
  .nav-cta { display: none; }
  .menu-toggle { display: block !important; }
  .logo-img { height: 40px !important; }

  /* Hero */
  .hero { padding: 48px 0 0 !important; }
  .hero h1 { font-size: clamp(28px, 8vw, 40px) !important; }
  .hero .lead { font-size: 15px !important; }
  .hero-inner { padding-bottom: 48px !important; }
  .hero-strip { flex-direction: column !important; gap: 12px !important; padding: 16px 0 !important; }
  .hero .cta-row { flex-direction: column !important; }
  .hero .cta-row a { text-align: center !important; }
  .btn-fill, .btn-outline { width: 100%; text-align: center !important; box-sizing: border-box; }

  /* Intro */
  .intro .wrap { flex-direction: column !important; gap: 16px !important; }
  .big-year { font-size: clamp(60px, 16vw, 90px) !important; }

  /* Activités */
  .activities-grid { grid-template-columns: 1fr !important; }

  /* Agenda */
  .agenda-ctas { flex-direction: column !important; }
  .agenda-ctas a { text-align: center !important; }

  /* Grilles intérieures */
  .mission-grid, .pedagogy-grid, .timeline-row, .team-grid, .event-grid { grid-template-columns: 1fr !important; }

  /* Contact */
  .contact .wrap { grid-template-columns: 1fr !important; }

  /* Discipline */
  .discipline .wrap { grid-template-columns: 1fr !important; }
  .discipline.reverse .visual { order: 0 !important; }

  /* Boutique */
  .boutique .wrap { grid-template-columns: 1fr !important; }

  /* CTA block */
  .cta-block .wrap { flex-direction: column !important; align-items: flex-start !important; }

  /* Formulaire contact */
  .field-row { grid-template-columns: 1fr !important; }
  .form-card { padding: 20px !important; }
  .signup { flex-direction: column !important; }
  .signup input, .signup button { width: 100% !important; }

  /* Section padding */
  section { padding: 48px 0 !important; }
  .wrap { padding: 0 16px !important; }
  .site-header .wrap { padding: 12px 16px !important; }

  /* Carte événement */
  .event-card { width: 260px !important; }

  /* Grille contact page */
  .contact-grid { grid-template-columns: 1fr !important; }
  
  /* Map */
  .map-wrap iframe { height: 220px !important; }
  
  /* Page header */
  .page-header h1 { font-size: clamp(28px, 8vw, 42px) !important; }
}

/* ==========================================================================
   TRÈS PETIT ÉCRAN (< 400px)
   ========================================================================== */
@media (max-width: 400px) {
  .big-year { font-size: 55px !important; }
  .hero h1 { font-size: 26px !important; }
  .event-card { width: 240px !important; }
}

/* ==========================================================================
   PAGE CONTACT — MOBILE COMPLÉMENTS
   ========================================================================== */
@media (max-width: 880px) {
  /* Grille form + infos en 1 colonne */
  section .wrap[style*="grid"] { display: block !important; }
  .contact-grid,
  section > .wrap > .form-card { margin-bottom: 32px; }

  /* Champs pleine largeur */
  .field input,
  .field select,
  .field textarea { font-size: 16px !important; } /* évite le zoom iOS */

  /* Bouton envoyer pleine largeur */
  .form-card .btn-fill { width: 100% !important; }

  /* Horaires lisibles */
  .hours-row { flex-direction: column !important; gap: 2px; }
  .hours-row span:first-child { font-weight: 700; }

  /* Carte Google Maps */
  .map-wrap { margin-top: 32px !important; }
  .map-wrap iframe { height: 240px !important; }

  /* Info contact */
  .contact-info .block { margin-bottom: 18px; }

  /* Réseaux sociaux */
  .socials { gap: 12px; margin-top: 12px; }
}

/* ==========================================================================
   MENU MOBILE — REFONTE COMPLÈTE
   Cible les classes exactes générées par WordPress
   ========================================================================== */

/* Desktop : menu visible, hamburger caché */
.site-nav { display: flex !important; align-items: center; }
.site-nav .menu { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.menu-toggle { display: none !important; }

@media (max-width: 880px) {
  /* Hamburger visible */
  .menu-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 10001;
    position: relative;
  }
  .menu-toggle span {
    display: block;
    width: 24px;
    height: 2.5px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  /* Hamburger animé quand ouvert */
  .menu-toggle.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .menu-toggle.is-open span:nth-child(2) { opacity: 0; }
  .menu-toggle.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* Nav cachée par défaut sur mobile */
  .site-nav {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: var(--paper) !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000 !important;
    gap: 0 !important;
  }

  /* Quand ouverte */
  .site-nav.is-open {
    display: flex !important;
  }

  /* Items du menu */
  .site-nav .menu {
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    padding: 0 24px !important;
  }

  .site-nav .menu-item { width: 100%; text-align: center; }

  .site-nav .menu-item a {
    display: block !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    padding: 16px 24px !important;
    border-radius: 12px !important;
    color: var(--ink) !important;
    transition: background 0.15s ease !important;
  }

  .site-nav .menu-item a:hover,
  .site-nav .menu-item.current-menu-item a {
    background: var(--pastel-a) !important;
    color: var(--turquoise-dark) !important;
  }

  /* Bouton Réserver dans le menu mobile */
  .site-nav::after {
    content: '';
  }

  /* CTA "Réserver un stage" — caché sur mobile (déjà dans le menu) */
  .nav-cta { display: none !important; }

  /* Logo plus petit */
  .logo-img { height: 38px !important; }
  .site-header .wrap { padding: 12px 16px !important; }
}

/* ==========================================================================
   ANIMATIONS AU SCROLL
   ========================================================================== */
.anim-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.anim-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.anim-delay { transition-delay: 0.15s !important; }
.anim-delay-2 { transition-delay: 0.3s !important; }

/* Sections qui s'animent */
.intro, .activities, .agenda, .legacy, .contact,
.mission-card, .timeline-item, .team-card,
.event-card, .activity-card, .pedagogy-card,
.page-header, .cta-block {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.intro.visible, .activities.visible, .agenda.visible,
.legacy.visible, .contact.visible,
.mission-card.visible, .timeline-item.visible,
.team-card.visible, .event-card.visible,
.activity-card.visible, .pedagogy-card.visible,
.page-header.visible, .cta-block.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respecter la préférence de réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
  *, .anim-fade-up,
  .intro, .activities, .agenda, .legacy, .contact,
  .mission-card, .timeline-item, .team-card,
  .event-card, .activity-card, .pedagogy-card,
  .page-header, .cta-block {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   PAGE CONTACT — LAYOUT RESPONSIVE PROPRE
   ========================================================================== */
.contact-page { padding: 56px 0 0; }
.contact-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: start;
}
.form-card h2 {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  text-transform: none !important;
  margin-bottom: 24px;
  color: var(--ink) !important;
}
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.field-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-row-2 .field-item { display: flex; flex-direction: column; }
.field-row-2 .field-item label { font-size: 13.5px; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.field input, .field select, .field textarea, .field-item input, .field-item select {
  width: 100%; padding: 13px 16px; border-radius: 10px;
  border: 1.5px solid rgba(11,11,9,.18); background: #fff;
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus,
.field-item input:focus, .field-item select:focus {
  outline: none; border-color: var(--turquoise);
}
.field textarea { resize: vertical; min-height: 130px; }
.contact-submit { margin-top: 4px; }
.form-note { font-size: 13px; color: var(--muted); margin-top: 12px; }

.hours-row {
  display: flex; justify-content: space-between;
  font-size: 14.5px; padding: 8px 0;
  border-bottom: 1px solid rgba(11,11,9,.08);
  color: var(--ink); flex-wrap: wrap; gap: 4px;
}
.hours-row span:first-child { color: var(--muted); }

@media (max-width: 880px) {
  .contact-layout { grid-template-columns: 1fr !important; gap: 32px !important; }
  .field-row-2 { grid-template-columns: 1fr !important; gap: 0 !important; }
  .field-row-2 .field-item { margin-bottom: 16px; }
  .contact-submit { width: 100% !important; text-align: center; }
  .hours-row { flex-direction: column; }
  .map-wrap iframe { height: 220px !important; }
}

/* ==========================================================================
   THE EVENTS CALENDAR — INTÉGRATION AU DESIGN DU THÈME
   ========================================================================== */

/* Masquer le style par défaut de TEC */
.tribe-events-page-title,
.tribe-events-back,
.tribe-bar-form,
.tribe-events-calendar,
.tribe-events-views-v2-widget-events-list,
.tribe-common { display: none !important; }

/* Filtres */
.aaa-event-filters {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 28px 0 8px;
}
.aaa-event-filters .filter-btn {
  background: #fff; border: 1.5px solid rgba(11,11,9,.18); color: var(--ink);
  padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 14px;
  cursor: pointer; font-family: var(--font-body); transition: .12s;
}
.aaa-event-filters .filter-btn:hover { border-color: var(--ink); }
.aaa-event-filters .filter-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Grille d'événements */
.aaa-events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

/* Carte événement */
.aaa-event-card {
  background: #fff;
  border: 1px solid rgba(11,11,9,.1);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex; flex-direction: column;
}
.aaa-event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(11,11,9,.1);
}

.aaa-event-top {
  height: 140px;
  background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));
  position: relative;
  flex-shrink: 0;
}
/* Couleurs alternées selon catégorie */
.aaa-event-card[data-cat="stages-vacances"] .aaa-event-top { background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); }
.aaa-event-card[data-cat="ateliers-hebdomadaires"] .aaa-event-top { background: linear-gradient(135deg, #FFC65C, #E8972E); }
.aaa-event-card[data-cat="evenements-projections"] .aaa-event-top,
.aaa-event-card[data-cat="evenement-projection"] .aaa-event-top { background: linear-gradient(135deg, #FF9A62, #E86A35); }

.aaa-event-top .badge {
  position: absolute; top: 14px; left: 14px;
  background: #fff; color: var(--ink);
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-body);
}

.aaa-event-body {
  padding: 20px;
  display: flex; flex-direction: column;
  gap: 8px; flex: 1;
}
.aaa-event-date { font-size: 13px; color: var(--muted); font-weight: 600; }
.aaa-event-title { font-family: var(--font-body); font-weight: 700; font-size: 17px; color: var(--ink); line-height: 1.3; }
.aaa-event-places { font-size: 13px; font-weight: 700; color: var(--turquoise-dark); }
.aaa-event-cta {
  margin-top: auto !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  text-align: center;
}

/* Aucun événement */
.aaa-no-events {
  text-align: center;
  padding: 64px 0;
  color: var(--muted);
}
.aaa-no-events p { margin-bottom: 24px; font-size: 17px; }

/* Page détail d'un événement — style thème */
.tribe-events { font-family: var(--font-body) !important; }
.tribe-events h1.tribe-events-single-event-title {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  font-size: clamp(28px, 4vw, 42px) !important;
}
.tribe-events .tribe-events-single { max-width: var(--max); margin: 0 auto; padding: 0 32px; }

/* Responsive */
@media (max-width: 960px) {
  .aaa-events-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .aaa-events-grid { grid-template-columns: 1fr !important; }
  .aaa-event-filters { gap: 8px; }
  .aaa-event-filters .filter-btn { padding: 8px 14px; font-size: 13px; }
}

/* ==========================================================================
   PAGE DÉTAIL ÉVÉNEMENT
   ========================================================================== */
.event-hero { overflow: hidden; }

.event-detail-section { padding: 56px 0; }
.event-detail-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 56px;
  align-items: start;
}

.event-description { color: var(--muted); font-size: 16.5px; line-height: 1.7; margin-bottom: 32px; }
.event-description p { margin-bottom: 14px; }

.event-infos-box {
  background: var(--pastel-c);
  border-radius: 20px;
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.event-info-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.event-info-value { font-size: 15px; font-weight: 600; color: var(--ink); }

/* Carte inscription */
.event-register-card {
  background: var(--paper);
  border: 1.5px solid rgba(11,11,9,.1);
  border-radius: 24px;
  padding: 32px;
  position: sticky;
  top: 90px;
}
.event-rsvp-form .field { margin-bottom: 16px; }
.event-rsvp-form .field label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.event-rsvp-form .field input,
.event-rsvp-form .field textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1.5px solid rgba(11,11,9,.18); background: var(--paper);
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
}
.event-rsvp-form .field input:focus,
.event-rsvp-form .field textarea:focus { outline: none; border-color: var(--turquoise); }
.event-rsvp-form .field textarea { min-height: 90px; resize: vertical; }
.event-contact-note { margin-top: 16px; text-align: center; font-size: 14px; color: var(--muted); }
.event-contact-note a { color: var(--turquoise-dark); font-weight: 600; }

@media (max-width: 880px) {
  .event-detail-layout { grid-template-columns: 1fr !important; }
  .event-infos-box { grid-template-columns: 1fr !important; }
  .event-register-card { position: static !important; }
  .event-hero { min-height: 240px !important; }
}

/* ==========================================================================
   PAGE ÉVÉNEMENT UNIQUE — OVERRIDE TEC
   ========================================================================== */
.tribe-events-pg-template,
.tribe-events-page-template { background: transparent !important; }
.tribe-events-single { display: none !important; }

.aaa-event-page { font-family: var(--font-body); max-width: 100%; }
.aaa-event-page-body { padding: 32px 0 0; }

.aaa-event-page-info-strip {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px;
}
.aaa-info-pill {
  background: var(--pastel-a); color: var(--ink);
  padding: 8px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
}

.aaa-event-page-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 40px;
  align-items: start;
}

.aaa-event-desc { color: var(--muted); font-size: 16.5px; line-height: 1.7; }
.aaa-event-desc p { margin-bottom: 14px; }

.aaa-register-card {
  background: var(--paper);
  border: 1.5px solid rgba(11,11,9,.1);
  border-radius: 24px;
  padding: 28px;
  position: sticky;
  top: 90px;
}
.aaa-register-card h2 {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  text-transform: none !important;
  margin-bottom: 6px;
  color: var(--ink) !important;
}
.aaa-register-card > p { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.aaa-field { margin-bottom: 14px; }
.aaa-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; color: var(--ink); }
.aaa-field input, .aaa-field textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1.5px solid rgba(11,11,9,.18); background: var(--paper);
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  font-size: 16px; /* évite zoom iOS */
}
.aaa-field input:focus, .aaa-field textarea:focus { outline: none; border-color: var(--turquoise); }
.aaa-field textarea { min-height: 80px; resize: vertical; }
.aaa-rsvp-success {
  background: var(--pastel-a); border-radius: 10px; padding: 14px 16px;
  margin-top: 12px; color: var(--turquoise-dark); font-weight: 600; font-size: 14px;
}

@media (max-width: 880px) {
  .aaa-event-page-layout { grid-template-columns: 1fr !important; }
  .aaa-register-card { position: static !important; }
  .aaa-event-page-hero, .aaa-event-page-hero-plain { margin: -16px -16px 0 !important; }
  .aaa-event-page-info-strip { gap: 8px; }
  .aaa-info-pill { font-size: 13px; padding: 7px 12px; }
}

/* Masquer le titre et l'en-tête natifs de TEC sur la page single */
.single-tribe_events .tribe-events-single-event-title,
.single-tribe_events .tribe-events-schedule,
.single-tribe_events .tribe-events-back,
.single-tribe_events .tribe-events-cal-links,
.single-tribe_events .tribe-events-single .tribe-events-schedule,
.single-tribe_events h1.tribe-events-single-event-title,
.tribe-events-single .tribe-events-schedule { display: none !important; }

/* Forcer le layout 2 colonnes sur la page événement */
.single-tribe_events .aaa-event-page-layout {
  display: grid !important;
  grid-template-columns: 1.3fr 0.7fr !important;
  gap: 40px !important;
}

/* Corriger l'espacement global */
.single-tribe_events .tribe-events-single { padding: 0 !important; }
.single-tribe_events .tribe-events-pg-template { max-width: var(--max) !important; margin: 0 auto !important; padding: 0 32px !important; }

@media (max-width: 880px) {
  .single-tribe_events .aaa-event-page-layout { grid-template-columns: 1fr !important; }
  .single-tribe_events .tribe-events-pg-template { padding: 0 16px !important; }
}

/* ==========================================================================
   PAGE ÉVÉNEMENT — DESIGN COMPLET v2
   ========================================================================== */

/* Reset TEC */
.single-tribe_events .tribe-events-single-event-title,
.single-tribe_events .tribe-events-schedule,
.single-tribe_events .tribe-events-back,
.single-tribe_events .tribe-events-cal-links { display:none!important; }

/* Conteneur principal */
.aaa-evf { font-family: var(--font-body); }

/* ── HERO ── */
.aaa-evf-hero {
  background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));
  background-size: cover;
  background-position: center;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 32px 32px;
}
.aaa-evf-cat-ateliers-hebdomadaires .aaa-evf-hero { background: linear-gradient(135deg, #FFC65C, #E8972E); }
.aaa-evf-cat-evenements-projections .aaa-evf-hero { background: linear-gradient(135deg, #FF9A62, #E86A35); }
.aaa-evf-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,11,9,.82) 0%, rgba(11,11,9,.1) 60%);
}
.aaa-evf-hero-content {
  position: relative;
  padding: 48px 40px 44px;
  max-width: 900px;
}
.aaa-evf-breadcrumb {
  display: inline-block; color: rgba(255,255,255,.75);
  font-size: 13px; font-weight: 600; margin-bottom: 16px;
  transition: color .15s;
}
.aaa-evf-breadcrumb:hover { color: #fff !important; }
.aaa-evf-badge {
  display: inline-block;
  background: rgba(255,255,255,.2);
  color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  padding: 5px 14px; border-radius: 999px;
  margin-bottom: 14px;
}
.aaa-evf-h1 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 5vw, 52px) !important;
  color: #fff !important;
  text-transform: uppercase !important;
  line-height: 1.05 !important;
  margin-bottom: 20px;
}
.aaa-evf-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.aaa-evf-pill {
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 13.5px; font-weight: 600;
  padding: 7px 16px; border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* ── CORPS ── */
.aaa-evf-body {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 40px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px 32px 80px;
}

/* ── CARTES GAUCHE ── */
.aaa-evf-col-left { display: flex; flex-direction: column; gap: 24px; }
.aaa-evf-card {
  background: var(--paper);
  border: 1.5px solid rgba(11,11,9,.08);
  border-radius: 20px;
  padding: 32px;
}
.aaa-evf-card-info { background: var(--pastel-c); border-color: transparent; }
.aaa-evf-card-title {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  text-transform: none !important;
  color: var(--ink) !important;
  margin-bottom: 18px;
}
.aaa-evf-desc { color: var(--muted); font-size: 16px; line-height: 1.75; }
.aaa-evf-desc p { margin-bottom: 12px; }

/* Infos pratiques */
.aaa-evf-info-list { display: flex; flex-direction: column; gap: 16px; }
.aaa-evf-info-row { display: flex; gap: 14px; align-items: flex-start; }
.aaa-evf-info-icon { font-size: 20px; width: 32px; flex-shrink: 0; }
.aaa-evf-info-lbl { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.aaa-evf-info-val { font-size: 15px; font-weight: 600; color: var(--ink); }

/* ── CARD INSCRIPTION ── */
.aaa-evf-col-right { position: relative; }
.aaa-evf-register {
  background: var(--ink);
  border-radius: 24px;
  padding: 32px;
  position: sticky;
  top: 90px;
  color: #fff;
}
.aaa-evf-register-top { text-align: center; margin-bottom: 28px; }
.aaa-evf-register-emoji { font-size: 36px; margin-bottom: 12px; }
.aaa-evf-register h2 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  color: #fff !important;
  text-transform: uppercase !important;
  margin-bottom: 8px;
}
.aaa-evf-register p { color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.5; }

.aaa-evf-field { margin-bottom: 14px; }
.aaa-evf-field label {
  display: block; font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.8); margin-bottom: 7px;
}
.aaa-evf-field label span { color: var(--turquoise); }
.aaa-evf-field label em { font-style: normal; color: rgba(255,255,255,.45); font-size: 12px; }
.aaa-evf-field input, .aaa-evf-field textarea {
  width: 100%; padding: 13px 16px; border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08);
  color: #fff; font-family: var(--font-body); font-size: 15px;
  transition: border-color .15s;
}
.aaa-evf-field input::placeholder, .aaa-evf-field textarea::placeholder { color: rgba(255,255,255,.35); }
.aaa-evf-field input:focus, .aaa-evf-field textarea:focus {
  outline: none; border-color: var(--turquoise);
  background: rgba(255,255,255,.12);
}
.aaa-evf-field textarea { resize: vertical; }

.aaa-evf-submit {
  width: 100%; padding: 15px;
  background: var(--turquoise); color: #fff;
  border: none; border-radius: 999px;
  font-family: var(--font-body); font-weight: 700; font-size: 16px;
  cursor: pointer; transition: background .15s, transform .12s;
  margin-top: 6px;
}
.aaa-evf-submit:hover { background: var(--turquoise-dark); transform: translateY(-2px); }
.aaa-evf-note { color: rgba(255,255,255,.5); font-size: 13px; text-align: center; margin-top: 10px; }

.aaa-evf-success {
  display: none; gap: 14px; align-items: flex-start;
  background: rgba(31,182,172,.2); border: 1px solid var(--turquoise);
  border-radius: 14px; padding: 16px; margin-top: 14px; color: #fff;
}
.aaa-evf-success-check { font-size: 22px; flex-shrink: 0; }
.aaa-evf-register-foot {
  margin-top: 20px; text-align: center;
  font-size: 13.5px; color: rgba(255,255,255,.5);
}
.aaa-evf-register-foot a { color: var(--turquoise) !important; font-weight: 600; }

/* ── RESPONSIVE ── */
@media (max-width: 880px) {
  .aaa-evf-hero { min-height: 280px; border-radius: 0 0 20px 20px; }
  .aaa-evf-hero-content { padding: 32px 20px 32px; }
  .aaa-evf-h1 { font-size: 26px !important; }
  .aaa-evf-pills { gap: 8px; }
  .aaa-evf-pill { font-size: 12px; padding: 6px 12px; }
  .aaa-evf-body { grid-template-columns: 1fr !important; padding: 24px 16px 56px; gap: 24px; }
  .aaa-evf-card { padding: 22px; }
  .aaa-evf-register { position: static !important; }
}

/* ==========================================================================
   AMELIA — SURCHARGE COULEURS THÈME
   ========================================================================== */

/* Couleur principale → turquoise */
:root {
  --am-c-primary: #1FB6AC !important;
  --am-c-primary-op10: rgba(31,182,172,.1) !important;
  --am-c-primary-op60: rgba(31,182,172,.6) !important;
}

/* Boutons Amelia */
.am-button.am-button--primary,
.amelia-v2-booking .am-button--primary {
  background: var(--turquoise) !important;
  border-color: var(--turquoise) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
}
.am-button.am-button--primary:hover {
  background: var(--turquoise-dark) !important;
  border-color: var(--turquoise-dark) !important;
}

/* Titres Amelia */
.amelia-v2-booking h1,
.amelia-v2-booking h2,
.amelia-v2-booking h3 {
  font-family: var(--font-body) !important;
  color: var(--ink) !important;
  text-transform: none !important;
}

/* Cartes événements Amelia */
.amelia-v2-booking .am-event-list-card {
  border-radius: 18px !important;
  border: 1.5px solid rgba(11,11,9,.08) !important;
  overflow: hidden !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
.amelia-v2-booking .am-event-list-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(11,11,9,.1) !important;
}

/* Badge disponibilité */
.amelia-v2-booking .am-badge--success {
  background: var(--pastel-a) !important;
  color: var(--turquoise-dark) !important;
}

/* Prix / gratuit */
.amelia-v2-booking .am-event-price {
  color: var(--turquoise-dark) !important;
  font-weight: 700 !important;
}

/* Formulaire Amelia */
.amelia-v2-booking .am-input {
  border-radius: 10px !important;
  border-color: rgba(11,11,9,.18) !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
}
.amelia-v2-booking .am-input:focus {
  border-color: var(--turquoise) !important;
}

/* Mobile */
@media (max-width: 880px) {
  .amelia-v2-booking .am-event-list {
    grid-template-columns: 1fr !important;
  }
}

/* Contact page — fond pêche sur tout */
.contact-page { padding-bottom: 0; }
.contact-page .form-card {
  background: #fff !important;
  box-shadow: 0 4px 24px rgba(11,11,9,.06);
}
.contact-page .form-card h2 {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  text-transform: none !important;
  color: var(--ink) !important;
  margin-bottom: 24px;
}
.contact-page .hours-row { border-color: rgba(11,11,9,.12); }
.contact-page .contact-info .label { color: var(--turquoise-dark); }

/* Fix animations — éléments visibles par défaut, animés ensuite */
.page-header, .cta-block, .intro, .activities, .agenda,
.legacy, .contact, .mission-card, .timeline-item,
.team-card, .event-card, .activity-card, .pedagogy-card,
.aaa-event-card, .aaa-evf-left, .aaa-evf-right,
.contact-form-col, .contact-info-col, .map-wrap, .anim-fade-up {
  opacity: 1 !important;
  transform: none !important;
}
.page-header.visible, .cta-block.visible { opacity: 1 !important; transform: none !important; }

/* Supprimer "Generated with Amelia" */
.amelia-v2-booking .am-events__footer,
.am-events__footer,
[class*="am-powered"],
.amelia-v2-booking footer { display: none !important; }

/* Amelia — couleurs thème AAA */
.amelia-v2-booking .am-event-list-item {
  border-left: 3px solid var(--turquoise) !important;
  border-radius: 12px !important;
  background: #fff !important;
  margin-bottom: 12px !important;
  padding: 16px 20px !important;
  transition: box-shadow .15s ease !important;
}
.amelia-v2-booking .am-event-list-item:hover {
  box-shadow: 0 6px 20px rgba(11,11,9,.09) !important;
}
.amelia-v2-booking .am-event__name,
.amelia-v2-booking .am-event-list-item h3 {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  font-size: 17px !important;
}
.amelia-v2-booking .am-event__date,
.amelia-v2-booking .am-event-list-item .am-date {
  color: var(--turquoise-dark) !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
}
.amelia-v2-booking .am-badge--open,
.amelia-v2-booking [class*="am-badge"] {
  background: var(--pastel-a) !important;
  color: var(--turquoise-dark) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
}
.amelia-v2-booking .am-button,
.amelia-v2-booking button[class*="am-button--primary"],
.amelia-v2-booking .am-events__btn {
  background: var(--turquoise) !important;
  border-color: var(--turquoise) !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  color: #fff !important;
}
.amelia-v2-booking .am-button:hover {
  background: var(--turquoise-dark) !important;
}
/* Barre de recherche */
.amelia-v2-booking .am-events__search input {
  border-radius: 999px !important;
  border-color: rgba(11,11,9,.18) !important;
  font-family: var(--font-body) !important;
}

/* ==========================================================================
   AMELIA — POPUP MOBILE RESPONSIVE
   ========================================================================== */
/* Popup modale Amelia */
.amelia-v2-booking .am-dialog,
.amelia-v2-booking .el-dialog,
.amelia-v2-booking [class*="am-dialog"],
.amelia-v2-booking [class*="el-dialog"] {
  width: calc(100vw - 32px) !important;
  max-width: 560px !important;
  margin: 16px auto !important;
  border-radius: 20px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
}

/* Overlay */
.amelia-v2-booking .am-dialog-mask,
.amelia-v2-booking .el-overlay,
.amelia-v2-booking [class*="am-overlay"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

/* Boutons dans la popup */
.amelia-v2-booking .am-dialog button,
.amelia-v2-booking [class*="am-dialog"] button {
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
}

@media (max-width: 880px) {
  /* Forcer la popup à 100% de la largeur mobile */
  .amelia-v2-booking .am-dialog,
  .amelia-v2-booking .el-dialog,
  .amelia-v2-booking [class*="am-dialog"],
  .amelia-v2-booking [class*="el-dialog"] {
    width: calc(100vw - 24px) !important;
    margin: 12px !important;
    max-height: 85vh !important;
  }

  /* Contenu scrollable */
  .amelia-v2-booking [class*="am-dialog__body"],
  .amelia-v2-booking [class*="el-dialog__body"] {
    overflow-y: auto !important;
    max-height: 60vh !important;
  }

  /* Boutons de la popup côte à côte */
  .amelia-v2-booking [class*="am-dialog__footer"],
  .amelia-v2-booking [class*="el-dialog__footer"] {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    padding: 16px !important;
  }
  .amelia-v2-booking [class*="am-dialog__footer"] button,
  .amelia-v2-booking [class*="el-dialog__footer"] button {
    flex: 1 !important;
    min-width: 120px !important;
  }

  /* Liste événements sur mobile */
  .amelia-v2-booking .am-event-list-item {
    flex-wrap: wrap !important;
  }
  .amelia-v2-booking .am-event-list-item button {
    width: 100% !important;
    margin-top: 10px !important;
  }
}

/* ==========================================================================
   AGENDA — CARTES ÉVÉNEMENTS
   ========================================================================== */
.filters { display:flex; gap:10px; flex-wrap:wrap; padding:28px 0 8px; }
.filter-btn {
  background:#fff; border:1.5px solid rgba(11,11,9,.18); color:var(--ink);
  padding:10px 18px; border-radius:999px; font-weight:600; font-size:14px;
  cursor:pointer; font-family:var(--font-body); transition:.12s;
}
.filter-btn:hover { border-color:var(--ink); }
.filter-btn.active { background:var(--ink); color:#fff; border-color:var(--ink); }

.event-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:32px; }
.event-grid .event-card {
  width:auto; flex:none;
  border:1px solid rgba(11,11,9,.1);
  border-radius:18px; overflow:hidden; background:#fff;
  display:flex; flex-direction:column;
  transition:transform .15s, box-shadow .15s;
  opacity:1 !important; transform:none !important;
}
.event-grid .event-card:hover { transform:translateY(-4px) !important; box-shadow:0 12px 28px rgba(11,11,9,.09); }
.event-grid .event-card .top { height:120px; position:relative; flex-shrink:0; }
.event-grid .event-card[data-category="stage"] .top { background:linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); }
.event-grid .event-card[data-category="atelier"] .top { background:linear-gradient(135deg, #FFC65C, #E8972E); }
.event-grid .event-card[data-category="projection"] .top { background:linear-gradient(135deg, #FF9A62, #E86A35); }
.event-grid .event-card .badge {
  position:absolute; top:14px; left:14px;
  background:#fff; color:var(--ink);
  font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px;
}
.event-grid .event-card .body { padding:20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.event-grid .event-card .when { font-size:13px; color:var(--muted); font-weight:600; }
.event-grid .event-card .title { font-weight:700; font-size:16.5px; color:var(--ink); line-height:1.3; }
.event-grid .event-card .who { font-size:13px; font-weight:700; color:var(--turquoise-dark); }
.event-cta { margin-top:auto !important; text-align:center; padding:11px 20px !important; font-size:14px !important; }
.agenda-note { color:var(--muted); font-size:13.5px; margin-top:36px; padding-top:24px; border-top:1.5px dashed rgba(11,11,9,.2); }

@media (max-width:960px) { .event-grid { grid-template-columns:1fr 1fr !important; } }
@media (max-width:600px) {
  .event-grid { grid-template-columns:1fr !important; }
  .filters { gap:8px; }
  .filter-btn { padding:9px 14px; font-size:13px; }
}