/* ===========================================================
   ARTifact — Centre d'activités, Belvédère, Casablanca
   Design tokens + components
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,700&display=swap');

:root{
  /* -- palette (drawn from the ARTifact flyers) -- */
  --cream:        #FCE8C6;
  --cream-soft:   #FFF6E6;
  --white:        #FFFDF8;
  --ink:          #2B2420;
  --ink-soft:     #6B5F52;

  --yellow:       #F3B23E;
  --yellow-deep:  #E29A1E;
  --green:        #17A672;
  --green-deep:   #0E8259;
  --coral:        #E94F37;
  --blue:         #4FA3D9;
  --blue-deep:    #2E7CB3;
  --pink:         #EC5FA6;

  --radius-lg: 32px;
  --radius-md: 20px;
  --radius-sm: 12px;
  --shadow-soft: 0 14px 34px rgba(43,36,32,.14);
  --shadow-pop:  0 8px 0 rgba(43,36,32,.18);

  --font-display: 'Baloo 2', ui-rounded, 'Segoe UI', sans-serif;
  --font-body: 'Nunito', ui-sans-serif, system-ui, sans-serif;

  --wrap: 1160px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body, button, input, select, textarea{ overflow-wrap:normal; word-break:normal; hyphens:none; }
img, svg, video, iframe{ max-width:100%; }
h1, h2, h3, .tag, .btn{ text-wrap:balance; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  margin:0 0 .5em;
  line-height:1.12;
  letter-spacing:.2px;
}
h1{ font-size:clamp(2.1rem, 4.4vw, 3.4rem); font-weight:800; }
h2{ font-size:clamp(1.6rem, 3vw, 2.3rem); font-weight:700; }
h3{ font-size:1.25rem; font-weight:700; }
p{ margin:0 0 1em; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
section{ padding:88px 0; position:relative; scroll-margin-top:88px; }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head p{ color:var(--ink-soft); font-size:1.05rem; }
.center{ text-align:center; margin-inline:auto; }

/* -------------------- eyebrow / marker-highlight tag -------------------- */
.tag{
  position:relative;
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.5px;
  color:var(--ink);
  padding:.55rem 1.3rem;
  margin-bottom:1rem;
  transform:rotate(-1.4deg);
}
.tag::before{
  content:'';
  position:absolute; inset:-4px -8px;
  background:var(--yellow);
  border-radius:40% 60% 58% 42% / 62% 38% 62% 38%;
  transform:rotate(1.2deg);
  z-index:-1;
}
.tag.alt::before{ background:var(--blue); opacity:.55; }

/* -------------------- buttons -------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  padding:.85em 1.6em;
  border-radius:100px;
  border:none; cursor:pointer;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:active{ transform:translateY(2px); }
.btn:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }

.btn-primary{ background:var(--green); color:var(--white); box-shadow:var(--shadow-pop); }
.btn-primary:hover{ background:var(--green-deep); }

.btn-outline{ background:transparent; color:var(--ink); border:2px solid var(--ink); }

.btn-outline:hover{ background:var(--ink); color:var(--white); }

.btn-light{ background:var(--white); color:var(--ink); box-shadow:var(--shadow-pop); }
.btn-light:hover{ background:var(--cream-soft); }

.btn-sm{ padding:.6em 1.2em; font-size:.9rem; }

/* -------------------- header -------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(252,232,198,.88);
  backdrop-filter:blur(8px);
  border-bottom:2px solid rgba(43,36,32,.08);
}
/* §NAV — LA BARRE DÉBORDAIT, ET RIEN NE LE DISAIT.
 *
 * Signalé par le propriétaire le 2026-09-13, capture à l'appui. Trois défauts
 * dans une seule ligne de style :
 *
 *  ① `justify-content:space-between` SANS `gap` : quand la navigation devient
 *     large, le logo vient TOUCHER « Activités » — « ARTifactActivités » se
 *     lisait comme un seul mot.
 *  ② Les libellés en deux mots (« Formules & tarifs », « Nous trouver »,
 *     « Espace Parent ») se CASSAIENT en deux lignes, et la barre perdait son
 *     alignement : les items d'une ligne flottaient au-dessus de ceux qui en
 *     prenaient deux.
 *  ③ Le menu ne passait en burger qu'à 900 px. Entre 900 et ~1300 px, dix
 *     liens ne tiennent pas : la barre débordait par la droite, et c'est le
 *     bouton WhatsApp — le seul appel à l'action de l'en-tête — qui se faisait
 *     rogner.
 *
 * On ne rétrécit PAS la police pour faire tenir : un menu qu'il faut plisser
 * les yeux pour lire n'est pas un menu qui tient. */
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:32px; height:78px; }

/* Le logo et les actions ne se compriment jamais : c'est la navigation, au
   milieu, qui cède la place — et quand elle ne peut plus, le burger prend le
   relais (média ci-dessous). */
.logo{ font-family:var(--font-display); font-size:1.7rem; font-weight:800; text-decoration:none; display:flex; flex:0 0 auto; }
.logo span{ display:inline-block; }
.logo .l1{ color:#E63946; } /* A */
.logo .l2{ color:#3B7DD8; } /* R */
.logo .l3{ color:#EC5FA6; } /* T */
.logo .l4{ color:#8C8579; } /* i */
.logo .l5{ color:#2FAE66; } /* f */
.logo .l6{ color:#F2994A; } /* a */
.logo .l7{ color:#E2B93B; } /* c */
.logo .l8{ color:#231F20; } /* t */

.nav-links{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; min-width:0; }
/* UN LIBELLÉ NE SE CASSE PAS EN DEUX. C'est ce qui désalignait toute la barre. */
.nav-links a{ text-decoration:none; font-weight:700; font-size:.98rem; color:var(--ink); padding:.3em 0; border-bottom:2px solid transparent; white-space:nowrap; }
.nav-links a:hover{ border-color:var(--green); }

.nav-actions{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }

/* Le drapeau britannique sert ici à changer réellement de langue. Son
   libellé court reste lisible sur mobile et ne concurrence pas WhatsApp. */
.language-toggle{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-width:58px; min-height:42px; padding:7px 10px;
  color:var(--ink); background:var(--white); border:2px solid rgba(43,36,32,.15);
  border-radius:100px; cursor:pointer; box-shadow:0 4px 0 rgba(43,36,32,.10);
  font-family:var(--font-display); font-size:.82rem; font-weight:800;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.language-toggle:hover{ border-color:var(--blue); box-shadow:0 4px 0 rgba(59,125,216,.20); }
.language-toggle:active{ transform:translateY(2px); box-shadow:0 2px 0 rgba(43,36,32,.10); }
.language-toggle:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }
.language-flag{
  display:inline-flex;align-items:center;justify-content:center;
  width:27px;height:18px;border-radius:4px;background-position:center;
  background-repeat:no-repeat;background-size:cover;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
}
.language-flag-gb{background-image:url('/assets/flag-gb.svg')}
.language-flag-fr{background-image:url('/assets/flag-fr.svg')}
.language-code{ line-height:1; }

/* Entre le grand écran et le téléphone, on resserre la navigation AVANT de la
   replier : dix liens tiennent encore, plus serrés, jusqu'à ce qu'ils ne
   tiennent plus. */
@media (max-width: 1240px){ .nav-links{ gap:18px; } .nav-links a{ font-size:.94rem; } }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:26px; height:3px; background:var(--ink); margin:5px 0; border-radius:3px; }

/* ⚠️ 1100 ET NON 900 : mesuré, dix liens plus le bouton WhatsApp ne tiennent pas
   en dessous de ~1100 px. L'ancien seuil laissait une plage de 200 px où la
   barre débordait en silence. Le hero garde le sien (900) : ce sont deux
   contraintes différentes, et les confondre ferait bouger la mise en page
   d'accueil pour une raison de menu. */
@media (max-width: 1100px){
  .nav-links{
    position:fixed; inset:78px 0 0 0; height:calc(100dvh - 78px);
    background:var(--cream-soft); flex-direction:column; justify-content:flex-start;
    padding:32px 24px; gap:22px; opacity:0; pointer-events:none;
    transition:opacity .2s ease;
  }
  .nav-links.open{ opacity:1; pointer-events:auto; }
  .nav-links a{ font-size:1.15rem; }
  .nav-toggle{ display:block; }
  .nav-actions .btn span.long{ display:none; }
}

@media (max-width: 460px){
  .site-header .wrap{ gap:10px; }
  .nav-actions{ gap:8px; }
  .language-toggle{ min-width:44px; width:44px; min-height:42px; padding:6px; }
  .language-code{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
}

/* -------------------- hero -------------------- */
.hero{ padding-top:64px; overflow:hidden; }
.hero .wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.hero-copy p.lead{ font-size:1.12rem; color:var(--ink-soft); max-width:52ch; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:1.6rem; }

.hero-facts{ display:flex; gap:28px; margin-top:2.2rem; flex-wrap:wrap; }
.hero-facts div strong{ display:block; font-family:var(--font-display); font-size:1.35rem; }
.hero-facts div span{ font-size:.88rem; color:var(--ink-soft); }

.hero-visual{ position:relative; display:flex; justify-content:center; }
.hero-visual .blob{
  position:absolute; width:340px; height:340px; background:var(--yellow);
  border-radius:42% 58% 66% 34% / 45% 45% 55% 55%; z-index:0; opacity:.9;
}
.hero-visual img{ position:relative; z-index:1; width:78%; filter:drop-shadow(0 18px 24px rgba(43,36,32,.18)); }

@media (max-width: 900px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; margin-bottom:8px; }
  .hero-visual .blob{ width:220px; height:220px; }
  .hero-visual img{ width:56%; }
}

/* -------------------- about strip -------------------- */
.about{ padding-top:40px; }
.about .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.about-card{ background:var(--white); border-radius:var(--radius-lg); padding:2.2rem; box-shadow:var(--shadow-soft); }
@media (max-width: 900px){ .about .wrap{ grid-template-columns:1fr; } }

/* -------------------- activities grid -------------------- */
.activities-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:20px; }
.activity-card{
  background:var(--white); border-radius:var(--radius-md); padding:1.6rem 1.4rem;
  box-shadow:var(--shadow-soft); transition:transform .18s ease;
}
.activity-card:hover{ transform:translateY(-5px); }
.activity-card .emoji{ font-size:2rem; display:block; margin-bottom:.5rem; }
.activity-card h3{ margin-bottom:.35rem; }
.activity-card p{ color:var(--ink-soft); font-size:.94rem; margin:0; }

.coming-soon{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  margin:0 0 24px; padding:1rem 1.2rem; border-radius:var(--radius-md);
  background:linear-gradient(120deg,#EAF6FF,#FFF4C9); border:2px solid var(--blue);
}
.coming-soon-icon{
  display:grid; place-items:center; width:48px; height:48px; position:relative;
  border-radius:50%; background:#fff; border:2px solid var(--blue);
  font-size:1.45rem; line-height:1;
}
.coming-soon-icon b{
  position:absolute; right:-5px; bottom:-5px; display:grid; place-items:center;
  width:22px; height:22px; border-radius:50%; background:var(--blue-deep);
  color:#fff; font:900 .58rem/1 var(--font-body); letter-spacing:.02em;
}
.coming-soon div{ display:flex; flex-direction:column; min-width:0; }
.coming-soon div strong{ font-family:var(--font-display); font-size:1.08rem; }
.coming-soon div span{ color:var(--ink-soft); font-size:.9rem; line-height:1.45; }
.coming-soon a{ color:var(--blue-deep); font-weight:900; white-space:nowrap; }

.adult-invitation{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px;
  margin:0 0 24px; padding:1.2rem 1.35rem; border-radius:var(--radius-md);
  background:linear-gradient(120deg,#EAF6FF,#FFF0F4); border:2px solid var(--pink);
  scroll-margin-top:88px;
}
.adult-invitation-icon{ font-size:2.2rem; }
.adult-invitation > div{ min-width:0; }
.adult-invitation strong{ display:block; font-family:var(--font-display); font-size:1.25rem; line-height:1.2; }
.adult-invitation p{ margin:.25rem 0 0; color:var(--ink-soft); line-height:1.5; font-size:.92rem; }
.adult-kicker{ display:block; color:var(--pink); font-size:.72rem; font-weight:900; letter-spacing:.08em; }
@media (max-width:720px){
  .adult-invitation{ grid-template-columns:auto 1fr; }
  .adult-invitation .btn{ grid-column:1 / -1; justify-content:center; }
  .offer-audience-guide{ grid-template-columns:1fr; }
}

.offers-section{ background:linear-gradient(180deg,var(--cream-soft),#fff); }
.offer-tabs{ display:flex; justify-content:center; gap:10px; margin:0 0 24px; }
.offer-tab{
  min-width:min(240px,48%); border:2px solid #D8CEBE; border-radius:999px;
  background:#fff; color:var(--ink); padding:.8rem 1rem; cursor:pointer;
  font:800 .95rem/1.2 var(--font-display); box-shadow:var(--shadow-soft);
}
.offer-tab:hover{ border-color:var(--green); }
.offer-tab.is-active, .offer-tab[aria-selected="true"]{ background:var(--green); border-color:var(--green); color:#fff; }
.offer-tab:focus-visible{ outline:3px solid color-mix(in srgb,var(--green) 32%,transparent); outline-offset:3px; }
.offer-panel[hidden]{ display:none; }
.offer-panel-intro{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .75rem; margin:0 0 16px; color:var(--ink-soft); }
.offer-panel-intro strong{ color:var(--green-deep); font-family:var(--font-display); font-size:1.05rem; }
.featured-offers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:18px; align-items:stretch; }
.featured-offer{ position:relative; display:flex; flex-direction:column; min-width:0; background:#fff; border:2px solid #E8DCC9; border-radius:var(--radius-md); padding:1.4rem; box-shadow:var(--shadow-soft); }
.featured-offer.is-promo{ border-color:var(--coral); background:linear-gradient(145deg,#FFF9E9,#FFF0F4); }
.featured-offer .offer-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.featured-offer .offer-badge{ display:inline-flex; max-width:100%; background:var(--green); color:#fff; border-radius:999px; padding:.35rem .7rem; font-size:.72rem; font-weight:900; }
.featured-offer .offer-audience{ color:var(--ink-soft); font-size:.78rem; font-weight:800; }
.featured-offer h3{ margin:.8rem 0 .35rem; font-size:clamp(1.15rem,2vw,1.45rem); line-height:1.18; }
.featured-offer .offer-meta{ color:var(--ink-soft); font-size:.88rem; margin:0 0 .55rem; }
.featured-offer .offer-price{ display:flex; min-width:0; flex-wrap:wrap; align-items:baseline; gap:7px; margin:.35rem 0 .7rem; }
.featured-offer .offer-price strong{
  display:inline-block; color:var(--green-deep); font-family:var(--font-display);
  font-size:clamp(1.45rem,7.5vw,1.8rem); line-height:1; white-space:nowrap;
  overflow-wrap:normal; word-break:keep-all; font-variant-numeric:tabular-nums;
}
.featured-offer .offer-price del{ display:inline-block; color:var(--ink-soft); font-size:.88rem; white-space:nowrap; }
.featured-offer .offer-promo{
  max-width:100%; color:var(--coral); font-weight:900; margin:.15rem 0 .7rem;
  white-space:normal; overflow-wrap:anywhere;
}
/* La réduction courte reste flashée sur une ligne. Le libellé commercial d'un
   carnet, placé hors de `.offer-top`, peut en revanche revenir à la ligne. */
.featured-offer .offer-top .offer-promo{ white-space:nowrap; overflow-wrap:normal; }
.featured-offer .promo-benefits,
.featured-offer .offer-benefits{
  list-style:none; margin:.8rem 0; padding:0; display:grid; gap:.55rem;
}
.featured-offer .promo-benefits li,
.featured-offer .offer-benefits li{
  position:relative; padding-left:1.55rem; color:var(--ink);
  font-family:var(--font-body); font-size:.92rem; font-weight:700; line-height:1.35;
}
.featured-offer .promo-benefits li::before,
.featured-offer .offer-benefits li::before{
  content:'✓'; position:absolute; left:0; top:0; color:var(--green); font-weight:900;
}
.featured-offer .offer-action{ margin-top:auto; padding-top:.75rem; }
.featured-offer .offer-action a{ display:flex; justify-content:center; width:100%; text-align:center; }
.offers-disclaimer{ color:var(--ink-soft); font-size:.82rem; margin:16px 0 0; }

/* -------------------- formules cloud (signature shape) -------------------- */
.formules{ }
.formules-layout{ display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:start; }
@media (max-width: 980px){
  .formules-layout{ grid-template-columns:1fr; }
  /* Les bosses décoratives sortaient de la carte et recouvraient le texte
     d'introduction sur téléphone. La carte compacte garde la couleur sans
     poser un calque sur le contenu précédent. */
  .cloud{ overflow:hidden; border-radius:32px; margin-top:0; padding:2rem 1.5rem; }
  .cloud .bump{ display:none; }
}

.cloud{
  position:relative;
  background:var(--yellow);
  border-radius:56px;
  /* Les bosses dépassent de 58 px : cette réserve les maintient sous le texte
     d'introduction, y compris sur les grands écrans. */
  margin-top:58px;
  padding:3rem 2.6rem;
}
.cloud .bump{ position:absolute; background:var(--yellow); border-radius:50%; z-index:0; }
.cloud .b1{ width:120px; height:120px; top:-46px; left:8%; }
.cloud .b2{ width:150px; height:150px; top:-58px; left:38%; }
.cloud .b3{ width:110px; height:110px; top:-40px; right:10%; }
.cloud .b4{ width:130px; height:130px; bottom:-50px; left:16%; }
.cloud .b5{ width:150px; height:150px; bottom:-60px; right:14%; }
.cloud-content{ position:relative; z-index:1; }
.cloud-content h3{ color:var(--ink); margin-bottom:1.1rem; font-size:1.15rem; }
.formule-item{ color:var(--green-deep); font-weight:800; font-family:var(--font-display); font-size:1.08rem; margin:0 0 1.1rem; }
.formule-item small{ display:block; font-family:var(--font-body); font-weight:600; color:var(--ink); font-size:.85rem; margin-top:.2rem; }
.formule-item:last-child{ margin-bottom:0; }

.carnets{ display:flex; flex-direction:column; gap:16px; }
.carnet-card{ background:var(--white); border-radius:var(--radius-md); padding:1.5rem 1.6rem; box-shadow:var(--shadow-soft); }
.carnet-card .badge{ display:inline-block; background:var(--cream); color:var(--ink); font-weight:800; font-family:var(--font-display); font-size:.85rem; padding:.3em .9em; border-radius:100px; margin-bottom:.6rem; }
.carnet-card ul{ margin:.6rem 0 0; padding-left:1.2rem; color:var(--ink-soft); }
.carnet-note{ font-size:.9rem; color:var(--ink-soft); }

/* -------------------- summer camp -------------------- */
.camp{ background:var(--blue); color:var(--white); border-radius:var(--radius-lg); margin:0 24px; padding:64px 40px; max-width:calc(var(--wrap) - 48px); margin-inline:auto; }
.camp .section-head p{ color:rgba(255,255,255,.88); }
.camp .tag::before{ background:var(--white); }
.camp .tag{ color:var(--blue-deep); }
.camp-badges{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:1.4rem; }
.camp-badge{ background:var(--white); color:var(--blue-deep); font-family:var(--font-display); font-weight:700; padding:.5em 1.1em; border-radius:100px; font-size:.92rem; }
.camp-badge.pink{ background:var(--pink); color:var(--white); }
.camp-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
@media (max-width:900px){ .camp-grid{ grid-template-columns:1fr; } .camp{ padding:48px 24px; } }
.camp-features{ display:flex; flex-direction:column; gap:12px; margin:1.4rem 0 1.8rem; }
.camp-features div{ display:flex; gap:.6em; align-items:flex-start; font-weight:700; }
.camp-visual{ display:flex; justify-content:center; }
.camp-visual img{ width:70%; filter:drop-shadow(0 16px 22px rgba(0,0,0,.2)); }

/* -------------------- espace parent demo -------------------- */
.parent-demo{ background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); overflow:hidden; }
.parent-demo-head{ background:var(--ink); color:var(--white); padding:1.6rem 2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.parent-demo-head span.pill{ background:var(--coral); font-size:.78rem; font-weight:800; padding:.3em .85em; border-radius:100px; letter-spacing:.4px; }
.parent-demo-body{ padding:2rem; display:grid; grid-template-columns:1fr 1fr; gap:28px; }
@media (max-width:800px){ .parent-demo-body{ grid-template-columns:1fr; } }

.progress-track{ background:var(--cream); border-radius:100px; height:14px; overflow:hidden; margin:.6rem 0 .4rem; }
.progress-fill{ background:var(--green); height:100%; border-radius:100px; transition:width .4s ease; }

.slot-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:10px; margin-top:.8rem; }
.slot{ border:2px solid var(--cream); background:var(--cream-soft); border-radius:var(--radius-sm); padding:.7rem .5rem; text-align:center; cursor:pointer; font-weight:700; font-size:.86rem; transition:.15s; }
.slot:hover{ border-color:var(--green); }
.slot.full{ opacity:.45; cursor:not-allowed; text-decoration:line-through; }
.slot.booked{ background:var(--green); color:var(--white); border-color:var(--green); }

.upcoming-list{ list-style:none; margin:.6rem 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.upcoming-list li{ display:flex; justify-content:space-between; background:var(--cream-soft); border-radius:var(--radius-sm); padding:.7rem 1rem; font-weight:700; font-size:.92rem; }
.upcoming-list li span.date{ color:var(--ink-soft); font-weight:600; }

/* -------------------- news -------------------- */
.news-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:22px; }
.news-card{ background:var(--white); border-radius:var(--radius-md); padding:1.6rem; box-shadow:var(--shadow-soft); }
.news-card .date{ display:inline-block; background:var(--green); color:var(--white); font-weight:700; font-size:.78rem; padding:.25em .8em; border-radius:100px; margin-bottom:.7rem; }
.news-card h3{ margin-bottom:.4rem; }
.news-card p{ color:var(--ink-soft); font-size:.94rem; margin:0; }
.news-card .type-badge{ display:inline-block; font-weight:800; font-size:.75rem; padding:.25em .8em; border-radius:100px; margin-bottom:.7rem; margin-right:.4em; }
.news-card .type-badge.camp{ background:var(--blue); color:var(--white); }
.news-card .type-badge.fermeture{ background:var(--coral); color:var(--white); }
.news-card .type-badge.ouverture{ background:var(--green); color:var(--white); }
.news-card .type-badge.horaire{ background:var(--yellow); color:var(--ink); }
.news-card .type-badge.annonce{ background:var(--cream); color:var(--ink); }
.news-card--promo{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#fff0b8 0%,#ffe4ee 100%);
  border:2px solid var(--coral); box-shadow:0 16px 34px rgba(233,79,55,.17);
}
.news-card--promo::after{
  content:""; position:absolute; width:150px; height:150px; border-radius:50%;
  right:-70px; bottom:-80px; background:rgba(255,255,255,.42); pointer-events:none;
}
.promo-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.promo-badge{ background:var(--ink); color:var(--white); border-radius:100px; padding:.45em .9em; font-size:.72rem; font-weight:900; letter-spacing:.06em; white-space:nowrap; }
.promo-highlight{ color:var(--coral); font-size:clamp(1.15rem,4vw,1.7rem); line-height:1.05; font-weight:900; text-align:right; white-space:nowrap; }
@media (min-width:461px) and (max-width:900px){
  .promo-top{ gap:6px; }
  .promo-badge{ padding:.4em .65em; font-size:.63rem; letter-spacing:.035em; }
  .promo-highlight{ font-size:1.28rem; }
}
.news-card--promo h3{ font-size:clamp(1.25rem,3vw,1.65rem); line-height:1.15; color:var(--ink); }
.news-card--promo .promo-reference{ color:var(--ink-soft); font-weight:800; text-decoration:line-through; margin:.15rem 0 .9rem; }
.promo-benefits{ list-style:none; padding:0; margin:.8rem 0; display:grid; gap:.55rem; }
.promo-benefits li{ position:relative; padding-left:1.55rem; color:var(--ink); font-weight:700; line-height:1.35; }
.promo-benefits li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--green); font-weight:900; }
.news-card--promo .promo-urgency{ background:rgba(255,255,255,.78); color:var(--coral); font-weight:900; text-align:center; border-radius:10px; padding:.65rem .8rem; margin:.9rem 0 .65rem; }
.news-card--promo .promo-card-link,
.news-card--promo .promo-cta{ display:block; color:var(--green); font-size:1rem; font-weight:900; text-align:center; margin:.5rem 0 0; }
.news-card--promo .promo-card-link{ padding:.7rem .8rem; border:2px solid var(--green); border-radius:999px; background:rgba(255,255,255,.72); text-decoration:none; }
.news-card--promo .promo-card-link:hover,
.news-card--promo .promo-card-link:focus-visible{ background:var(--green); color:var(--white); }

.camps-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:22px; }
.camps-empty{ color:var(--ink-soft); }
.camp-card{ background:var(--white); border-radius:var(--radius-md); padding:1.6rem; box-shadow:var(--shadow-soft); border-top:5px solid var(--blue); }
.camp-card h3{ margin-bottom:.5rem; }
.camp-card .dates{ display:inline-block; background:var(--cream); color:var(--ink); font-weight:800; font-size:.85rem; padding:.3em .8em; border-radius:100px; margin-bottom:.6rem; }
.camp-card .cal-badge{ display:inline-block; margin-left:.4em; font-size:.72rem; font-weight:700; padding:.2em .7em; border-radius:100px; }
.camp-card .cal-badge.maroc{ background:#DFF4EC; color:#0E8259; }
.camp-card .cal-badge.mission_francaise{ background:#E4F1FA; color:#2E7CB3; }
.camp-card .cal-badge.les_deux{ background:#FCEBCB; color:#8A6110; }
.camp-card p{ color:var(--ink-soft); font-size:.94rem; margin:0; }

/* -------------------- contact -------------------- */
.contact-layout{ display:grid; grid-template-columns:1fr 1fr; gap:44px; }
@media (max-width:900px){ .contact-layout{ grid-template-columns:1fr; } }
.contact-info ul{ list-style:none; margin:1.4rem 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.contact-info li{ display:flex; gap:.8em; align-items:flex-start; font-weight:700; }
.contact-info li span.ic{ font-size:1.3rem; }
.contact-copy{ display:flex; flex-direction:column; min-width:0; gap:.15rem; }
.contact-copy > span, .contact-copy small{ color:var(--ink-soft); font-weight:400; line-height:1.45; }
.contact-copy b{ color:var(--ink); }
.map-embed{ border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-soft); margin-top:1.2rem; }
.map-embed iframe{ width:100%; height:230px; border:0; display:block; }

.form-card{ background:var(--white); border-radius:var(--radius-lg); padding:2rem; box-shadow:var(--shadow-soft); }
.form-row{ margin-bottom:1.1rem; display:flex; flex-direction:column; gap:.4rem; }
.form-row label{ font-weight:700; font-size:.92rem; }
.form-row input, .form-row select, .form-row textarea{
  font-family:var(--font-body); font-size:1rem; padding:.75em .9em; border-radius:var(--radius-sm);
  border:2px solid var(--cream); background:var(--cream-soft); color:var(--ink);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline:none; border-color:var(--green); }
.form-note{ font-size:.85rem; color:var(--ink-soft); margin-top:.8rem; }

/* -------------------- footer -------------------- */
footer{ background:var(--ink); color:var(--cream-soft); padding:56px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:36px; margin-bottom:36px; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr; } }
footer h4{ color:var(--white); font-family:var(--font-display); font-size:1.05rem; margin-bottom:.9rem; }
footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
footer a{ text-decoration:none; color:var(--cream-soft); opacity:.85; }
footer a:hover{ opacity:1; text-decoration:underline; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.15); padding-top:22px; font-size:.85rem; opacity:.75; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* -------------------- floating whatsapp -------------------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:60;
  background:#25D366; color:#fff; width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  box-shadow:0 10px 22px rgba(0,0,0,.25); text-decoration:none;
}
.wa-float:hover{ transform:scale(1.06); }

/* -------------------- reveal on scroll -------------------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.reveal.in{ opacity:1; transform:none; }

/* -------------------- misc -------------------- */
.badge-soon{ display:inline-flex; align-items:center; gap:.4em; background:var(--coral); color:var(--white); font-weight:800; font-size:.75rem; padding:.3em .8em; border-radius:100px; }
.badge-live{ display:inline-flex; align-items:center; gap:.4em; background:var(--green); color:var(--white); font-weight:800; font-size:.75rem; padding:.3em .8em; border-radius:100px; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- correctif : logo lisible sur le fond sombre du footer ---------- */
/* Le "t" (#231F20) et le "i" (#8C8579) étaient quasi invisibles sur le marron. */
footer .logo .l8 { color: #FFF6E6; }
footer .logo .l4 { color: #C9BFB0; }

/* ===========================================================
   AMÉLIORATIONS VISUELLES — profondeur, rythme et animations
   =========================================================== */

/* Dégradé de fond subtil : évite l'aplat monotone */
body {
  background:
    radial-gradient(1100px 620px at 88% -8%, rgba(243,178,62,.20), transparent 62%),
    radial-gradient(900px 520px at -12% 22%, rgba(79,163,217,.13), transparent 58%),
    var(--cream);
  background-attachment: fixed;
}

/* Titres : ligne colorée sous les titres de section */
/* Le titre passe TOUJOURS sous l'étiquette (« eyebrow »), jamais collé à
   côté : sans cela, un titre court (« La vie du centre ») se plaçait sur la
   même ligne que la pastille, contre elle. display:block force le retour à
   la ligne ; width:fit-content garde le soulignement sous le seul texte. */
.section-head h2 { position:relative; display:block; width:fit-content; max-width:100%; margin-top:.5rem; padding-bottom:.32em; }
/* Étiquette (eyebrow) + badge « En ligne » : la pastille verte ne doit pas
   coller au blob orange de l'étiquette. On les pose sur une ligne dédiée,
   alignés verticalement, avec un vrai écart entre eux, puis le titre passe
   dessous (display:block ci-dessus). */
.section-head .tag { margin-right:1.6rem; vertical-align:middle; }
.section-head .badge-live { vertical-align:middle; margin-bottom:1rem; }
.section-head h2::after {
  content:''; position:absolute; left:0; bottom:0; height:5px; width:64px;
  background:linear-gradient(90deg, var(--green), var(--yellow));
  border-radius:99px;
}

/* Cartes d'activité : élévation et liseré de couleur au survol */
.activity-card {
  position:relative; overflow:hidden;
  transition:transform .26s cubic-bezier(.2,.9,.3,1), box-shadow .26s ease;
}
.activity-card::before {
  content:''; position:absolute; left:0; top:0; height:100%; width:4px;
  background:linear-gradient(180deg, var(--green), var(--yellow));
  transform:scaleY(0); transform-origin:top; transition:transform .28s ease;
}
.activity-card:hover { transform:translateY(-7px); box-shadow:0 22px 42px rgba(43,36,32,.16); }
.activity-card:hover::before { transform:scaleY(1); }
.activity-card .emoji { transition:transform .28s cubic-bezier(.3,1.4,.5,1); display:inline-block; }
.activity-card:hover .emoji { transform:scale(1.18) rotate(-7deg); }

/* Boutons : reflet qui balaie au survol */
.btn { position:relative; overflow:hidden; }
.btn::after {
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
}
.btn:hover::after { animation:btnSheen .65s ease; }
@keyframes btnSheen { to { transform:translateX(100%); } }
.btn-primary:hover { box-shadow:0 10px 24px rgba(23,166,114,.34); }

/* Cartes camps et actualités : accent latéral animé */
.camp-card, .news-card { transition:transform .24s ease, box-shadow .24s ease; }
.camp-card:hover, .news-card:hover { transform:translateY(-5px); box-shadow:0 20px 38px rgba(43,36,32,.15); }

/* Le bloc tarifaire reste immobile pour ne jamais masquer le texte voisin. */
.cloud { animation:none; }

/* Illustration du hero */
.hero-visual img { animation:heroFloat 6.5s ease-in-out infinite; }
@keyframes heroFloat { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-13px) } }
.hero-visual .blob { animation:blobMorph 13s ease-in-out infinite; }
@keyframes blobMorph {
  0%,100% { border-radius:42% 58% 66% 34% / 45% 45% 55% 55%; }
  50%     { border-radius:58% 42% 38% 62% / 55% 60% 40% 45%; }
}

/* Chiffres clés du hero : entrée en cascade */
.hero-facts div { animation:aaRiseUp .55s ease both; }
.hero-facts div:nth-child(1) { animation-delay:.10s }
.hero-facts div:nth-child(2) { animation-delay:.20s }
.hero-facts div:nth-child(3) { animation-delay:.30s }
@keyframes aaRiseUp { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }

/* En-tête : ombre à l'apparition du défilement */
.site-header { transition:box-shadow .24s ease, background .24s ease; }
.site-header.scrolled { box-shadow:0 6px 22px rgba(43,36,32,.11); }

/* Liens de navigation : soulignement animé */
.nav-links a { position:relative; border-bottom:none !important; }
.nav-links a::after {
  content:''; position:absolute; left:0; bottom:-3px; height:2.5px; width:100%;
  background:var(--green); border-radius:2px;
  transform:scaleX(0); transform-origin:right; transition:transform .26s ease;
}
.nav-links a:hover::after { transform:scaleX(1); transform-origin:left; }

/* Bouton WhatsApp flottant : pulsation discrète */
.wa-float { transition:transform .2s ease, box-shadow .2s ease; }
.wa-float::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(37,211,102,.55); animation:waPulse 2.6s ease-out infinite;
}
@keyframes waPulse {
  0% { transform:scale(1); opacity:.75 }
  70% { transform:scale(1.5); opacity:0 }
  100% { opacity:0 }
}
.wa-float:hover { transform:scale(1.09); box-shadow:0 14px 30px rgba(37,211,102,.42); }

/* Champs de formulaire : mise en avant à la saisie */
.form-row input, .form-row select, .form-row textarea { transition:border-color .18s ease, box-shadow .18s ease; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  box-shadow:0 0 0 4px rgba(23,166,114,.14);
}

/* Apparition au défilement, plus travaillée */
.reveal { transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.9,.3,1), transform .7s cubic-bezier(.2,.9,.3,1); }

@media (prefers-reduced-motion: reduce) {
  .cloud, .hero-visual img, .hero-visual .blob, .hero-facts div, .wa-float::before { animation:none !important; }
  * { transition-duration:.01ms !important; }
}

/* ---------- galerie publique ---------- */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:16px; }
.gallery-empty { color:var(--ink-soft); }
.gallery-item {
  position:relative; border-radius:var(--radius-md); overflow:hidden; cursor:pointer;
  box-shadow:var(--shadow-soft); background:var(--cream-soft); border:none; padding:0;
  animation:aaRiseUp .5s ease both;
}
.gallery-item img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.9,.3,1); }
.gallery-item:hover img { transform:scale(1.07); }
.gallery-item figcaption {
  position:absolute; left:0; right:0; bottom:0; padding:.9rem .9rem .7rem;
  background:linear-gradient(transparent, rgba(43,36,32,.82));
  color:#fff; font-size:.86rem; font-weight:700; text-align:left;
  transform:translateY(100%); transition:transform .3s ease;
}
.gallery-item:hover figcaption, .gallery-item:focus-visible figcaption { transform:translateY(0); }
.gallery-item:focus-visible { outline:3px solid var(--green); outline-offset:3px; }

.lightbox { position:fixed; inset:0; background:rgba(28,23,20,.94); z-index:100;
  display:flex; align-items:center; justify-content:center; animation:aaFadeIn .2s ease; }
@keyframes aaFadeIn { from { opacity:0 } to { opacity:1 } }
.lightbox[hidden] { display:none; }
.lightbox-fig { margin:0; max-width:90vw; max-height:88vh; text-align:center; }
.lightbox-fig img { max-width:90vw; max-height:78vh; border-radius:14px; display:block;
  animation:aaZoom .26s cubic-bezier(.2,.9,.3,1); }
@keyframes aaZoom { from { opacity:0; transform:scale(.94) } to { opacity:1; transform:none } }
.lightbox-fig figcaption { color:#FFF6E6; margin-top:1rem; font-weight:700; }
.lightbox-close, .lightbox-nav { position:absolute; background:rgba(255,255,255,.14); color:#fff;
  border:none; cursor:pointer; border-radius:50%; width:52px; height:52px; font-size:1.6rem; line-height:1;
  transition:background .18s ease, transform .18s ease; }
.lightbox-close:hover, .lightbox-nav:hover { background:rgba(255,255,255,.3); transform:scale(1.08); }
.lightbox-close { top:22px; right:22px; }
.lightbox-nav.prev { left:22px; }
.lightbox-nav.next { right:22px; }
@media (max-width:640px) {
  .lightbox-nav { width:44px; height:44px; font-size:1.3rem; }
  .lightbox-nav.prev { left:8px; } .lightbox-nav.next { right:8px; }
}

/* ============================================================================
   AFFINAGE VISUEL
   ----------------------------------------------------------------------------
   L'identité (couleurs du flyer, Baloo 2 + Nunito) ne change pas. Ce qui est
   repris ici : l'échelle typographique, le rythme vertical, la hiérarchie et
   l'accessibilité — c'est-à-dire l'exécution, pas la direction artistique.
   ========================================================================== */

:root{
  /* Échelle typographique fluide : plus de tailles figées en px.
     clamp(min, préféré, max) — le texte s'adapte sans média-queries. */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.92rem);
  --step-0:  clamp(1rem,    0.95rem + 0.24vw, 1.12rem);
  --step-1:  clamp(1.22rem, 1.13rem + 0.44vw, 1.5rem);
  --step-2:  clamp(1.5rem,  1.34rem + 0.79vw, 2rem);
  --step-3:  clamp(1.85rem, 1.58rem + 1.33vw, 2.7rem);
  --step-4:  clamp(2.25rem, 1.83rem + 2.1vw,  3.6rem);

  /* Rythme vertical : une seule échelle pour tous les espacements. */
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  --ring: 0 0 0 4px rgba(23,166,114,.32);
}

/* ---------- rythme des sections ---------- */
section{ padding-block: var(--space-xl); }
.section-head{ margin-bottom: var(--space-lg); max-width: 62ch; }
.section-head p{ font-size: var(--step-0); line-height:1.65; color:var(--ink-soft); }

/* Alternance discrète : une section sur deux reçoit un fond légèrement plus
   clair, pour que l'œil segmente la page sans avoir besoin de traits. */
section:nth-of-type(even){
  background: linear-gradient(180deg, rgba(255,253,248,0) 0%, rgba(255,253,248,.55) 12%, rgba(255,253,248,.55) 88%, rgba(255,253,248,0) 100%);
}

/* ---------- typographie ---------- */
h1{ font-size: var(--step-4); line-height:1.04; letter-spacing:-.02em; }
h2{ font-size: var(--step-3); line-height:1.1;  letter-spacing:-.015em; }
h3{ font-size: var(--step-1); line-height:1.25; }
body{ font-size: var(--step-0); line-height:1.65; }
p{ max-width: 68ch; }

/* L'étiquette de section : petite, espacée, en majuscules — elle annonce
   sans concurrencer le titre. */
.tag{
  font-size: var(--step--1); letter-spacing:.09em; text-transform:uppercase;
  font-weight:800;
}

/* ---------- hero ---------- */
.hero h1{
  max-width:22ch; margin-bottom:var(--space-sm);
  font-size:clamp(1.75rem,2.4vw,2.5rem); line-height:1.1;
}
.hero .lede{ font-size: var(--step-1); line-height:1.5; color:var(--ink-soft); max-width:52ch; }
.hero-facts{ margin-top: var(--space-md); gap: var(--space-md); }
.hero-facts div strong{ font-size: var(--step-2); line-height:1; }
.hero-facts div span{ font-size: var(--step--1); color:var(--ink-soft); }

/* ---------- cartes : une seule règle d'élévation ---------- */
.activity-card, .news-card, .camp-card, .formule-card{
  border-radius: var(--radius-md);
  background: var(--white);
  padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
}
.activity-card h3, .camp-card h3, .news-card h3{ margin-bottom:.45rem; }
.activity-card p, .camp-card p, .news-card p{ font-size:.94rem; line-height:1.6; margin:0; }

/* ---------- grilles homogènes ---------- */
.activities-grid, .news-grid, .camps-grid, .gallery-grid{
  gap: clamp(14px, 1.4vw, 22px);
}

/* ---------- boutons ---------- */
.btn{
  font-size: var(--step-0); font-weight:800;
  padding: .8em 1.5em; border-radius:100px;
  display:inline-flex; align-items:center; gap:.5em;
}
.btn-sm{ font-size: var(--step--1); padding:.6em 1.1em; }

/* ---------- accessibilité : focus toujours visible ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .gallery-item:focus-visible{
  outline:3px solid var(--green); outline-offset:3px; border-radius:6px;
}
.btn:focus-visible{ box-shadow: var(--ring); }

/* Lien d'évitement pour la navigation au clavier */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--green); color:#fff; padding:.8em 1.4em;
  border-radius:0 0 12px 0; font-weight:800; text-decoration:none;
}
.skip-link:focus{ left:0; }

/* ---------- mobile ---------- */
@media (max-width: 720px){
  .hero-facts{ flex-wrap:wrap; gap: var(--space-sm) var(--space-md); }
  .section-head{ margin-bottom: var(--space-md); }
  .gallery-grid{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); }
  p{ max-width:none; }
}

/* Une section masquée hors saison ne doit laisser aucun espace vide. */
[hidden]{ display:none !important; }


/* ===== §7 — Galerie animée : transitions fluides au survol et à l'apparition ===== */
.gallery-grid figure {
  transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease;
  will-change: transform;
}
.gallery-grid figure:hover,
.gallery-grid figure:focus-within {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 14px 34px rgba(35,28,24,.18);
  z-index: 2;
}
.gallery-grid figure img { transition: filter .45s ease; }
.gallery-grid figure:hover img { filter: saturate(1.12); }

/* Apparition en cascade quand la galerie entre dans le champ */
.gallery-grid.is-revealed figure {
  animation: galleryFadeUp .6s cubic-bezier(.22,.61,.36,1) both;
}
.gallery-grid.is-revealed figure:nth-child(1)  { animation-delay: .00s; }
.gallery-grid.is-revealed figure:nth-child(2)  { animation-delay: .06s; }
.gallery-grid.is-revealed figure:nth-child(3)  { animation-delay: .12s; }
.gallery-grid.is-revealed figure:nth-child(4)  { animation-delay: .18s; }
.gallery-grid.is-revealed figure:nth-child(5)  { animation-delay: .24s; }
.gallery-grid.is-revealed figure:nth-child(6)  { animation-delay: .30s; }
.gallery-grid.is-revealed figure:nth-child(n+7){ animation-delay: .36s; }

@keyframes galleryFadeUp {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Respect du réglage système : aucune animation si l'utilisateur la refuse. */
@media (prefers-reduced-motion: reduce) {
  .gallery-grid figure,
  .gallery-grid figure img,
  .gallery-grid.is-revealed figure { animation: none !important; transition: none !important; }
  .gallery-grid figure:hover { transform: none; }
}


/* ============================================================================
   §VITRINE 2026-09 — MACHINE DE CONVERSION
   ----------------------------------------------------------------------------
   Aucune couleur, aucune police, aucun rayon nouveau : tout ci-dessous
   s'exprime avec les jetons déjà définis en haut de ce fichier. Ce qui change
   est la HIÉRARCHIE (ce que l'œil voit en premier) et les CHEMINS D'ACTION
   (par où l'on repart), pas la direction artistique.
   ========================================================================== */

/* ---------- réassurance : quatre faits, jamais quatre promesses ---------- */
.reassure{ padding-block: clamp(1.4rem, 1rem + 2vw, 2.6rem); }
.reassure-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
  background:var(--white); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft); padding:1.4rem 1.2rem;
}
.reassure-list li{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.15rem; }
.reassure-list li span{ font-size:1.5rem; line-height:1; }
.reassure-list li strong{ font-family:var(--font-display); font-size:var(--step-0); }
.reassure-list li small{ color:var(--ink-soft); font-size:var(--step--1); }
@media (max-width: 640px){
  .reassure-list{ grid-template-columns:repeat(2, 1fr); gap:18px 10px; padding:1.2rem .9rem; }
}

/* ---------- les quatre piliers ---------- */
.piliers-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:clamp(14px,1.4vw,22px); }
.pilier{
  background:var(--white); border-radius:var(--radius-md);
  padding:clamp(1.3rem,1rem + 1vw,1.9rem);
  box-shadow:var(--shadow-soft);
  border-top:5px solid var(--green);
  transition:transform .24s ease, box-shadow .24s ease;
}
.pilier:hover{ transform:translateY(-5px); box-shadow:0 20px 38px rgba(43,36,32,.15); }
.pilier-emoji{ font-size:2rem; display:block; margin-bottom:.5rem; }
.pilier h3{ margin-bottom:.35rem; }
.pilier p{ color:var(--ink-soft); font-size:.94rem; margin:0; }
.pilier-creer{ border-top-color:var(--coral); }
.pilier-bouger{ border-top-color:var(--pink); }
.pilier-decouvrir{ border-top-color:var(--blue); }
.pilier-partager{ border-top-color:var(--yellow); }

/* ---------- cartes d'activité : la promesse, puis le détail, puis l'action ---
   La phrase de bénéfice est en corps de texte plein ; la description venue du
   catalogue est plus petite et plus pâle. C'est la seule chose qui distingue
   « ce que ton enfant va vivre » de « ce que contient le cours » — et c'est
   dans cet ordre-là qu'un parent les lit. */
.activity-card{ display:flex; flex-direction:column; }
.activity-benefit{ color:var(--ink); font-weight:700; font-size:.98rem; margin:0 0 .45rem; }
.activity-detail{ color:var(--ink-soft); font-size:.88rem; line-height:1.55; margin:0; }
.activity-cta{
  margin-top:auto; padding-top:.9rem;
  align-self:flex-start;
  font-family:var(--font-display); font-weight:800; font-size:var(--step--1);
  color:var(--green-deep); text-decoration:none;
  border-bottom:2px solid transparent;
}
.activity-cta:hover{ border-bottom-color:var(--green); }
.activities-more, .gallery-more, .video-cta{ margin-top:var(--space-md); text-align:center; }
.activities-more, .gallery-more{ max-width:none; }

/* ---------- pour les parents ---------- */
.parents-layout{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(20px,3vw,44px); align-items:start; }
@media (max-width: 980px){ .parents-layout{ grid-template-columns:1fr; } }
.engagements{ list-style:none; margin:0 0 1.2rem; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.engagements li{ position:relative; padding-left:1.6rem; color:var(--ink-soft); font-size:.95rem; }
.engagements li::before{ content:'✓'; position:absolute; left:0; top:0; color:var(--green); font-weight:900; }
.engagements-note{ font-size:.9rem; color:var(--ink-soft); margin:0; padding-top:1rem; border-top:1px solid rgba(43,36,32,.1); }
.parent-demo-body--single{ grid-template-columns:1fr; }
.parent-features{ list-style:none; margin:0 0 1.3rem; padding:0; display:flex; flex-direction:column; gap:.6rem; color:var(--ink-soft); font-weight:700; font-size:.95rem; }
.parent-actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- immersion vidéo ---------- */
.video-frame{
  margin:0; position:relative;
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-soft); background:var(--ink);
}
.video-frame video{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; background:var(--ink); }
.video-frame figcaption{ color:var(--cream-soft); background:var(--ink); font-size:var(--step--1); padding:.8rem 1.1rem; text-align:left; }
.video-toggle{
  position:absolute; right:14px; bottom:74px;
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.9); color:var(--ink); font-size:1.1rem; line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.video-toggle:hover{ background:#fff; }

/* ---------- devis anniversaires / groupes ---------- */
.quote-box{ max-width:560px; margin:var(--space-lg) auto 0; background:var(--white); border-radius:var(--radius-md); padding:clamp(1.4rem,1rem + 1.4vw,2rem); box-shadow:var(--shadow-soft); }
.quote-box h3{ margin-top:0; }
.quote-intro{ font-size:.92rem; color:var(--ink-soft); }
.quote-box input, .quote-box select, .quote-box textarea{
  width:100%; padding:.75em .9em; border:2px solid var(--cream);
  border-radius:var(--radius-sm); font-family:inherit; font-size:.95rem; background:var(--cream-soft);
}
.quote-box input:focus, .quote-box select:focus, .quote-box textarea:focus{ outline:none; border-color:var(--green); }

/* ---------- questions fréquentes ---------- */
.faq-list{ display:flex; flex-direction:column; gap:10px; max-width:820px; }
.faq-item{
  background:var(--white); border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft); overflow:hidden;
}
.faq-item summary{
  cursor:pointer; list-style:none;
  font-family:var(--font-display); font-weight:700; font-size:var(--step-0);
  padding:1.05rem 3rem 1.05rem 1.3rem; position:relative;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; position:absolute; right:1.2rem; top:50%; transform:translateY(-50%);
  font-size:1.5rem; line-height:1; color:var(--green); font-weight:700;
}
.faq-item[open] summary::after{ content:'−'; }
.faq-item summary:focus-visible{ outline:3px solid var(--green); outline-offset:-3px; }
.faq-answer{ padding:0 1.3rem 1.15rem; }
.faq-answer p{ margin:0; color:var(--ink-soft); font-size:.96rem; line-height:1.65; }

/* ---------- témoignages (structure prête, section masquée tant qu'aucun avis
     réel n'est disponible — voir le commentaire dans index.html) ---------- */
.temoignages-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:clamp(14px,1.4vw,22px); }
.temoignage{ margin:0; background:var(--white); border-radius:var(--radius-md); padding:clamp(1.3rem,1rem + 1vw,1.9rem); box-shadow:var(--shadow-soft); border-left:5px solid var(--yellow); }
.temoignage blockquote{ margin:0 0 .8rem; font-size:1rem; line-height:1.6; }
.temoignage figcaption{ font-size:var(--step--1); color:var(--ink-soft); font-weight:700; }

/* ---------- contact : le formulaire annonce ce qu'il fait ---------- */
.form-title{ margin-top:0; }
.form-lead{ color:var(--ink-soft); font-size:.92rem; margin-bottom:1.3rem; }

/* ---------- appel final ---------- */
.cta-final-box{
  background:var(--green); color:var(--white);
  border-radius:var(--radius-lg); padding:clamp(2rem,1.4rem + 3vw,3.6rem);
  text-align:center; box-shadow:var(--shadow-soft);
}
.cta-final-box h2{ color:var(--white); margin-bottom:.6rem; }
.cta-final-box p{ color:rgba(255,255,255,.92); max-width:52ch; margin-inline:auto; }
.cta-final-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:var(--space-md); }
.cta-final-box .btn-primary{ background:var(--white); color:var(--green-deep); }
.cta-final-box .btn-primary:hover{ background:var(--cream-soft); }
.cta-final-box .btn-outline{ border-color:var(--white); color:var(--white); }
.cta-final-box .btn-outline:hover{ background:var(--white); color:var(--green-deep); }

/* ---------- barre d'action mobile ----------
   Elle n'existe QUE sur petit écran : sur grand écran, la pastille flottante
   historique fait déjà le travail sans manger de hauteur utile. */
.mobile-cta{ display:none; }
@media (max-width: 820px){
  .wa-float{ display:none; }
  .mobile-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    display:flex; gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background:rgba(255,253,248,.96);
    box-shadow:0 -6px 22px rgba(43,36,32,.14);
    transform:translateY(110%);
    transition:transform .26s cubic-bezier(.2,.9,.3,1);
    /* §BARRE-CACHEE-FOCUSABLE (2026-09-19) — `translateY` DÉPLACE, IL NE
       RETIRE PAS. La barre glissée hors de l'écran restait dans l'ordre de
       tabulation : au clavier, deux liens invisibles se prenaient le focus
       avant le contenu, et un lecteur d'écran les annonçait. On retire donc
       aussi la VISIBILITÉ — `visibility:hidden` sort de l'ordre de tabulation
       et de l'arbre d'accessibilité, et il se transitionne (contrairement à
       `display`), donc l'animation d'apparition est conservée intacte.
       Le délai vaut la durée du glissement : masquer AVANT la fin ferait
       disparaître la barre en plein mouvement. */
    visibility:hidden;
    transition:transform .26s cubic-bezier(.2,.9,.3,1), visibility 0s linear .26s;
  }
  .mobile-cta.is-visible{ transform:none; visibility:visible; transition:transform .26s cubic-bezier(.2,.9,.3,1), visibility 0s; }
  .mobile-cta-btn{
    flex:1; text-align:center; text-decoration:none;
    font-family:var(--font-display); font-weight:800; font-size:.95rem;
    padding:.85em .6em; border-radius:100px;
  }
  .mobile-cta-btn.primary{ background:var(--green); color:var(--white); }
  .mobile-cta-btn.secondary{ background:var(--cream); color:var(--ink); }
  /* La barre ne doit RIEN recouvrir : on rend sa hauteur au bas de page. */
  body.has-mobile-cta footer{ padding-bottom:84px; }
  .nav-parent{ color:var(--green-deep) !important; }
}
@media (prefers-reduced-motion: reduce){
  .mobile-cta{ transition:none; }
}

/* ---------- affinages mobile 375 / 390 / 430 px ---------- */
@media (max-width: 460px){
  .hero{ padding-top:32px; }
  .hero h1{ font-size:clamp(1.55rem,6.8vw,1.8rem); line-height:1.1; }
  .hero-copy p.lead{ font-size:1rem; line-height:1.55; }
  .hero-ctas{ gap:10px; }
  .hero-ctas .btn{ width:100%; justify-content:center; }
  .hero-facts{ gap:.9rem 1.4rem; }
  .cta-final-actions .btn{ width:100%; justify-content:center; }
  .parent-actions .btn{ width:100%; justify-content:center; }
  .quote-box form > div{ grid-template-columns:1fr !important; }
  #selfsaleFormBox form > div{ grid-template-columns:1fr !important; }
  .faq-item summary{ font-size:.98rem; padding-right:2.6rem; }
  .video-toggle{ bottom:66px; width:42px; height:42px; }
  .coming-soon{ grid-template-columns:auto 1fr; }
  .coming-soon a{ grid-column:1 / -1; white-space:normal; }
  .adult-invitation{ grid-template-columns:auto 1fr; padding:1rem; gap:10px; }
  .adult-invitation .btn{ grid-column:1 / -1; justify-content:center; }
  .offer-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .offer-tab{ min-width:0; padding:.72rem .5rem; font-size:.84rem; }
  .promo-top{ align-items:center; gap:8px; flex-wrap:nowrap; }
  .promo-badge{ font-size:.64rem; padding:.42em .68em; letter-spacing:.035em; }
  .promo-highlight{ font-size:1rem; flex:0 0 auto; }
  /* L'étiquette et la remise occupent chacune leur ligne si la carte est
     étroite ; le pourcentage reste entier, sans sortir de la carte. */
  .featured-offer .offer-top{ flex-wrap:wrap; }
  .featured-offer .offer-badge{ white-space:nowrap; }
  .featured-offer .offer-promo{ font-size:.92rem; }
  .featured-offer .offer-top .offer-promo{ flex:0 0 auto; }
  .news-card, .featured-offer, .carnet-card{ padding:1.15rem; }
  .contact-info li{ gap:.6rem; }
}

/* ---------- page /activites/ : le détail, activité par activité ---------- */
.activity-index{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.activity-index a{
  display:inline-block; text-decoration:none;
  background:var(--white); border:2px solid var(--cream);
  border-radius:100px; padding:.5em 1.1em;
  font-family:var(--font-display); font-weight:700; font-size:var(--step--1);
  transition:border-color .18s ease, transform .18s ease;
}
.activity-index a:hover{ border-color:var(--green); transform:translateY(-2px); }

.activity-detail-list .wrap{ display:flex; flex-direction:column; gap:clamp(18px,2.4vw,32px); }
.activity-page-card{
  display:grid; grid-template-columns:260px 1fr; gap:clamp(16px,2vw,32px);
  background:var(--white); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft); overflow:hidden;
  scroll-margin-top:96px; /* l'ancre ne doit pas passer sous l'en-tête collant */
}
.activity-page-body{ padding:clamp(1.4rem,1rem + 1.6vw,2.2rem) clamp(1.4rem,1rem + 1.6vw,2.2rem) clamp(1.4rem,1rem + 1.6vw,2.2rem) 0; }
.activity-page-body h2{ margin-bottom:.4rem; }
.activity-page-body p{ font-size:.96rem; line-height:1.65; color:var(--ink-soft); }
.activity-page-body .activity-benefit{ color:var(--ink); font-size:var(--step-1); font-family:var(--font-display); font-weight:700; line-height:1.35; margin-bottom:.9rem; }
.activity-audience{ font-size:.9rem !important; }
.activity-audience strong{ color:var(--ink); }

/* L'EMPLACEMENT MÉDIA, ET POURQUOI IL EST VIDE.
   Aucune photo réelle du centre n'est disponible dans le dépôt. Plutôt qu'une
   banque d'images générique — qui ferait ressembler ARTifact à n'importe quel
   autre centre, exactement le contraire du but — l'emplacement est nommé
   (`data-media-slot`) et tient sa place avec l'emoji de l'activité.
   Les dix photos à produire sont décrites dans docs/ARTIFACT_MEDIA_SHOTLIST.md ;
   pour en poser une, remplacer le contenu du bloc par une <img> et retirer
   `aria-hidden`. */
.activity-page-media{
  background:linear-gradient(150deg, var(--cream) 0%, var(--cream-soft) 100%);
  display:flex; align-items:center; justify-content:center; min-height:180px;
}
.activity-page-media span{ font-size:clamp(3rem, 2rem + 5vw, 5rem); line-height:1; }
.activity-page-media img{ width:100%; height:100%; object-fit:cover; }

@media (max-width: 760px){
  .activity-page-card{ grid-template-columns:1fr; }
  .activity-page-media{ min-height:130px; }
  .activity-page-body{ padding:1.4rem; }
  .activity-page-card{ scroll-margin-top:80px; }
}

/* ---------- HERO MOBILE : LE TITRE D'ABORD ----------
   LE DÉFAUT CORRIGÉ ICI EST LE PLUS COÛTEUX DE TOUTE LA PAGE. La règle
   historique `.hero-visual{ order:-1 }` plaçait le logo AVANT le texte sur
   téléphone : sur un écran de 375 px, l'illustration occupait tout le premier
   écran et le titre — la seule phrase qui explique ce qu'est ARTifact —
   n'apparaissait qu'après un défilement. Le visiteur qui repart avant de
   faire défiler n'a donc jamais lu ce que le centre propose.

   Le logo n'est pas perdu pour autant : il est déjà dans l'en-tête collant,
   visible en permanence. Il repasse donc après le texte, en plus petit. */
@media (max-width: 900px){
  .hero-visual{ order:0; margin-bottom:0; margin-top:var(--space-md); }
  .hero-visual img{ width:44%; max-width:200px !important; }
  .hero-visual .blob{ width:170px; height:170px; }
  .hero .wrap{ gap:0; }
  .hero .tag{ font-size:.72rem; letter-spacing:.06em; }
}
@media (max-width: 460px){
  .hero-visual img{ width:40%; max-width:160px !important; }
  .hero-visual .blob{ width:140px; height:140px; }
}

/* ---------- TIROIR DE NAVIGATION MOBILE : UN DÉFAUT QUI NE SE VOIT PAS ----
   MESURE FAITE SUR UN ÉCRAN DE 390 px, MENU FERMÉ :
     document.querySelector('#navLinks a').focus()
     → document.activeElement === ce lien   (vrai)
     → getComputedStyle(#navLinks).visibility === 'visible'

   Le tiroir fermé doit aussi rester DANS la largeur de la page. Le déplacer de
   100 % vers la droite doublait réellement `document.scrollWidth` sur iPhone
   et permettait un défilement horizontal accidentel. Il reste donc en place,
   invisible et non cliquable, puis apparaît par opacité. `visibility:hidden`
   le retire aussi du clavier et des lecteurs d'écran. `overflow-x:clip` reste
   une seconde barrière sans créer le contexte de défilement qui casserait
   l'en-tête collant. */
html, body{ overflow-x: clip; }
@media (max-width: 900px){
  .nav-links{
    visibility:hidden;
    overflow-y:auto;                      /* dix entrées sur un petit écran */
    transition:opacity .2s ease, visibility 0s linear .2s;
    padding-bottom:96px;                  /* la barre d'action ne cache rien */
  }
  .nav-links.open{ visibility:visible; transition:opacity .2s ease, visibility 0s; }
}