/* Centre de Loisirs AJL — identité visuelle */

:root {
  --ink: #352b47;
  --muted: #70637d;
  --blue-dark: #39285f;
  --blue: #7764d8;
  --sky: #a78bfa;
  --sky-pale: #f0edff;
  --yellow: #ffc09b;
  --yellow-pale: #fff0e5;
  --coral: #e55f94;
  --coral-pale: #ffedf4;
  --surface: #fffdfb;
  --surface-soft: #fcf9ff;
  --line: #e8def3;
  --success: #27866f;
  --danger: #cc4754;
  --shadow-sm: 0 5px 14px rgba(35, 61, 108, .08);
  --shadow-md: 0 14px 32px rgba(35, 61, 108, .12);
  --shadow-lg: 0 24px 54px rgba(35, 61, 108, .18);
  --radius: 20px;
  --transition: 180ms ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-width: none; scrollbar-color: transparent transparent; }
@supports selector(::-webkit-scrollbar) {
  html { scrollbar-width: none; scrollbar-color: auto; }
  ::-webkit-scrollbar { display: none; width: 0; height: 0; }
}
.scroll-progress-rail { position: fixed; top: 88px; right: 14px; bottom: 78px; z-index: 150; width: 8px; overflow: visible; border: 1px solid rgba(255, 255, 255, .65); border-radius: 999px; background: rgba(57, 40, 95, .3); box-shadow: 0 0 12px rgba(229, 95, 148, .35); touch-action: none; }
.scroll-progress-rail[hidden] { display: none; }
.scroll-progress-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #e55f94, #ffc457 30%, #5dd6c8 58%, #7764d8 82%, #ff78a5); background-size: 100% 220%; box-shadow: 0 0 12px rgba(229, 95, 148, .75); transform: scaleY(var(--scroll-progress, 0)); transform-origin: top; transition: transform 100ms linear; animation: scrollbar-color-flow 2.4s linear infinite; }
.scroll-progress-marker { position: absolute; top: var(--scroll-progress-position, 0%); left: 50%; width: 20px; height: 20px; border: 3px solid #fff; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px rgba(229, 95, 148, .7), 0 0 15px rgba(255, 192, 155, .95); cursor: grab; touch-action: none; transform: translate(-50%, -50%); transition: top 100ms linear; animation: scroll-progress-pulse 1.25s ease-in-out infinite alternate; }
.scroll-progress-marker.is-dragging { cursor: grabbing; transition: none; }
.scroll-progress-marker:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: 3px; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at -8% 4%, rgba(255, 192, 155, .34), transparent 26rem),
    radial-gradient(circle at 105% 30%, rgba(167, 139, 250, .22), transparent 28rem),
    #fffafd;
  font-family: ui-rounded, "Nunito", "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  line-height: 1.6;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
@keyframes scrollbar-spark {
  from { box-shadow: 0 0 5px 1px rgba(229, 95, 148, .65), inset 0 0 0 1px rgba(255, 255, 255, .65); }
  to { box-shadow: 0 0 15px 3px rgba(93, 214, 200, .92), inset 0 0 0 1px #fff; }
}
@keyframes scrollbar-color-flow {
  from { background-position: 0 0; }
  to { background-position: 0 100%; }
}
@keyframes scroll-progress-pulse {
  from { scale: .85; box-shadow: 0 0 0 2px rgba(229, 95, 148, .45), 0 0 8px rgba(255, 192, 155, .68); }
  to { scale: 1.12; box-shadow: 0 0 0 4px rgba(167, 139, 250, .56), 0 0 18px rgba(93, 214, 200, .9); }
}

/* En-tête et navigation */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 4px solid var(--yellow);
  background: linear-gradient(105deg, #38265e, #6d4c9d 60%, #a35a9c);
  background-size: 160% 160%;
  box-shadow: 0 5px 16px rgba(57, 40, 95, .24);
  backdrop-filter: blur(14px);
  animation: gradient-shift 12s ease-in-out infinite;
}
header::after {
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 4px;
  content: "";
  background: repeating-linear-gradient(90deg, var(--yellow) 0 22px, var(--coral) 22px 44px, var(--sky) 44px 66px);
}
.header-content {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem;
  width: min(1240px, calc(100% - 2rem));
  min-height: 76px;
  margin: 0 auto;
}
.logo {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex: 0 0 auto;
  color: #fff;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -.03em;
  text-decoration: none;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(10, 25, 72, .28);
}
.logo:hover { color: var(--yellow); animation: logo-wiggle 560ms cubic-bezier(.36, .07, .19, .97); }
.header-content nav { justify-self: center; }
.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  margin: 0;
  padding: .32rem;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(34, 21, 65, .27);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: nav-arrive 650ms cubic-bezier(.16, 1, .3, 1) both;
}
.site-nav a {
  position: relative;
  display: block;
  padding: .55rem .85rem;
  border-radius: 999px;
  color: #fff;
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition), transform var(--transition);
}
.site-nav a::after {
  position: absolute;
  right: .82rem;
  bottom: .25rem;
  left: .82rem;
  height: 2px;
  border-radius: 2px;
  content: "";
  background: linear-gradient(90deg, var(--yellow), var(--coral));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms cubic-bezier(.2, .7, .2, 1);
}
.site-nav a[aria-current="page"]::after, .site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }
.site-nav a::before {
  display: inline-block;
  margin-right: .42rem;
  font-size: .92rem;
  transition: transform 220ms ease;
}
.site-nav li:nth-child(1) a::before { content: "⌂"; }
.site-nav li:nth-child(2) a::before { content: "◷"; }
.site-nav li:nth-child(3) a::before { content: "▣"; }
.site-nav li:nth-child(4) a::before { content: "✦"; }
.site-nav a:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); }
.site-nav a:hover::before { animation: nav-icon-wow 620ms cubic-bezier(.2, 1.4, .4, 1); }
.site-nav a[aria-current="page"] { color: var(--blue-dark); background: var(--yellow); box-shadow: 0 4px 10px rgba(32, 18, 57, .2); }
.auth-buttons { display: flex; flex: 0 0 auto; gap: .5rem; }
.auth-buttons button {
  min-height: 0;
  padding: .55rem .82rem;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  color: #fff;
  background: transparent;
  box-shadow: none;
  font-size: .83rem;
  font-weight: 800;
}
.auth-buttons button:hover { border-color: var(--yellow); color: var(--blue-dark); background: var(--yellow); transform: none; }

/* Mise en page */
main { width: 100%; margin: 0; padding: 0; }
main > section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: max(600px, calc(100svh - 76px));
  margin: 0;
  padding: clamp(4.5rem, 9vw, 8rem) max(1.25rem, calc((100% - 1180px) / 2));
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255, 255, 255, .96);
  box-shadow: none;
  isolation: isolate;
  text-align: center;
}
main > section::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  content: "";
  background: linear-gradient(90deg, var(--sky) 0 42%, var(--yellow) 42% 69%, var(--coral) 69%);
}
main > section > * { position: relative; z-index: 1; width: min(1180px, 100%); margin-right: auto; margin-left: auto; }
main > section > form { width: min(700px, 100%); }
main > section > .hero { width: auto; }
main > section:not(.hero)::after {
  position: absolute;
  right: -7rem;
  bottom: -7rem;
  z-index: 0;
  width: 19rem;
  height: 19rem;
  border: 34px solid rgba(167, 139, 250, .13);
  border-radius: 47% 53% 59% 41% / 42% 42% 58% 58%;
  content: "";
  transform: rotate(22deg);
  animation: decorative-float 9s ease-in-out infinite;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2 { color: var(--blue-dark); letter-spacing: -.04em; }
h1 { margin-bottom: .7rem; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.08; }
h2 { margin-bottom: 1.4rem; font-size: clamp(1.55rem, 3vw, 2.15rem); line-height: 1.15; }
h2::after {
  display: block;
  width: 56px;
  height: 6px;
  margin-top: .8rem;
  margin-right: auto;
  margin-left: auto;
  border-radius: 99px;
  content: "";
  background: linear-gradient(90deg, var(--yellow) 0 56%, var(--coral) 56%);
}
h3 { margin: 0 0 .45rem; color: var(--blue-dark); font-size: 1.05rem; line-height: 1.3; }
p { margin-bottom: 1rem; color: var(--muted); }
section > p:first-of-type { max-width: 720px; font-size: 1.06rem; }

/* Accueil */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: max(630px, calc(100svh - 76px));
  padding: clamp(4rem, 9vw, 8rem) max(1.25rem, calc((100% - 1180px) / 2));
  border: 0;
  background:
    radial-gradient(circle at 87% 21%, var(--yellow) 0 4.7rem, transparent 4.8rem),
    radial-gradient(circle at 77% 35%, rgba(255, 255, 255, .17) 0 .55rem, transparent .6rem),
    radial-gradient(circle at 92% 50%, rgba(255, 255, 255, .16) 0 .8rem, transparent .86rem),
    linear-gradient(125deg, #493073, #8050a6 54%, #df79a8 100%);
  background-size: 140% 140%;
  animation: gradient-shift 14s ease-in-out infinite;
  isolation: isolate;
}
.hero::before { top: auto; bottom: 0; height: 9px; background: var(--yellow); }
.hero::after {
  position: absolute;
  right: 5%;
  bottom: 7%;
  z-index: -1;
  color: rgba(255, 255, 255, .82);
  content: "JOUER · CRÉER · GRANDIR";
  font-size: clamp(.85rem, 2vw, 1.2rem);
  font-weight: 900;
  letter-spacing: .18em;
  transform: rotate(-7deg);
  animation: floating-label 5s ease-in-out infinite;
}
.hero > .hero-airplane { position: absolute; top: 0; left: 0; z-index: 0; width: auto; max-width: none; margin: 0; color: #fff; font-size: clamp(4rem, 9vw, 7rem); line-height: 1; white-space: nowrap; filter: drop-shadow(0 5px 0 rgba(57, 40, 95, .2)); animation: airplane-across 6.5s cubic-bezier(.35, .05, .65, .95) 0ms 1 both; pointer-events: none; }
.hero-airplane::before { position: absolute; top: 52%; right: 78%; width: min(18vw, 190px); height: 4px; border-radius: 99px; content: ""; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85)); transform: rotate(-8deg); }
.hero > .hero-confetti { position: absolute; inset: 0; z-index: 0; width: 100%; max-width: none; margin: 0; overflow: hidden; pointer-events: none; }
main > section > .section-balloons { position: absolute; inset: 0; z-index: 2; width: 100%; max-width: none; margin: 0; pointer-events: none; }
.section-balloon { position: absolute; display: block; width: 68px; height: 112px; min-height: 0; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; pointer-events: auto; }
.section-balloon::before { display: none; }
.section-balloon:hover, .section-balloon:focus-visible { background: transparent; box-shadow: none; transform: none; }
.section-balloon:hover .balloon-body, .section-balloon:focus-visible .balloon-body, .section-balloon.is-rising .balloon-body { animation: balloon-rise 850ms cubic-bezier(.16, 1, .3, 1) both; }
.balloon-burst-layer { position: fixed; inset: 0; z-index: 9998; overflow: hidden; pointer-events: none; }
.balloon-burst-particle { position: absolute; width: var(--burst-size); height: calc(var(--burst-size) * 1.65); border-radius: 3px; background: var(--burst-color); box-shadow: 0 0 11px var(--burst-color); animation: balloon-burst-flight 760ms cubic-bezier(.14, .78, .25, 1) both; }
.balloon-burst-particle.is-round { border-radius: 50%; }
.section-balloon-left { left: clamp(.75rem, 4vw, 3.5rem); }
.section-balloon-right { right: clamp(.75rem, 4vw, 3.5rem); }
.section-balloon-high { top: 18%; }
.section-balloon-low { bottom: 12%; }
.balloon-body { position: absolute; top: 0; left: 10px; width: 48px; height: 62px; border-radius: 50% 50% 48% 48%; background: radial-gradient(ellipse at 31% 27%, rgba(255, 255, 255, .78), transparent 20%), var(--balloon-color); box-shadow: inset -7px -7px 0 rgba(43, 29, 68, .11), 0 5px 12px rgba(32, 22, 53, .14); animation: balloon-drift 4.6s ease-in-out var(--float-delay, 0ms) infinite; }
.balloon-body::before { position: absolute; bottom: -6px; left: 19px; width: 10px; height: 9px; clip-path: polygon(0 0, 100% 0, 50% 100%); content: ""; background: var(--balloon-color); }
.balloon-body::after { position: absolute; top: 67px; left: 23px; width: 1px; height: 40px; content: ""; background: rgba(255, 255, 255, .74); transform: rotate(3deg); transform-origin: top; }
.hero-confetti span { position: absolute; width: var(--confetti-size, 13px); height: calc(var(--confetti-size, 13px) * 1.65); border-radius: 3px; background: var(--confetti-color); box-shadow: 0 3px 10px rgba(35, 20, 55, .2); opacity: 0; animation: confetti-wow 7s cubic-bezier(.2, .7, .2, 1) var(--confetti-delay, 0ms) infinite; }
.hero-confetti span:nth-child(1) { top: 18%; left: 12%; --confetti-color: #ffd45b; --burst-x: -110px; --burst-y: -90px; --confetti-delay: 0ms; }
.hero-confetti span:nth-child(2) { top: 30%; right: 14%; --confetti-color: #ff7ea8; --burst-x: 90px; --burst-y: -100px; --confetti-delay: 80ms; }
.hero-confetti span:nth-child(3) { top: 68%; left: 15%; --confetti-color: #82dbff; --burst-x: -100px; --burst-y: 65px; --confetti-delay: 140ms; }
.hero-confetti span:nth-child(4) { top: 72%; right: 19%; --confetti-color: #a9ed91; --burst-x: 100px; --burst-y: 70px; --confetti-delay: 40ms; }
.hero-confetti span:nth-child(5) { top: 17%; right: 31%; --confetti-color: #ffb36f; --burst-x: 70px; --burst-y: -100px; --confetti-delay: 180ms; }
.hero-confetti span:nth-child(6) { bottom: 14%; left: 36%; --confetti-color: #d6a7ff; --burst-x: -70px; --burst-y: 90px; --confetti-delay: 100ms; }
.hero-confetti span:nth-child(7) { top: 46%; left: 7%; --confetti-color: #fff07a; --burst-x: -120px; --burst-y: 0px; --confetti-size: 10px; --confetti-delay: 220ms; }
.hero-confetti span:nth-child(8) { top: 48%; right: 8%; --confetti-color: #91f0d2; --burst-x: 120px; --burst-y: 0px; --confetti-size: 10px; --confetti-delay: 60ms; }
.hero-confetti span:nth-child(9) { top: 24%; left: 29%; --confetti-color: #ff8e72; --burst-x: -70px; --burst-y: -90px; --confetti-size: 9px; --confetti-delay: 260ms; }
.hero-confetti span:nth-child(10) { bottom: 22%; right: 32%; --confetti-color: #8de0ff; --burst-x: 80px; --burst-y: 90px; --confetti-size: 11px; --confetti-delay: 160ms; }
.hero-confetti span:nth-child(11) { top: 78%; left: 28%; --confetti-color: #ffc2e2; --burst-x: -90px; --burst-y: 90px; --confetti-size: 9px; --confetti-delay: 300ms; }
.hero-confetti span:nth-child(12) { top: 78%; right: 10%; --confetti-color: #fff07a; --burst-x: 120px; --burst-y: 80px; --confetti-size: 12px; --confetti-delay: 120ms; }
.hero-confetti span:nth-child(3n) { border-radius: 50%; }
.hero-confetti span:nth-child(4n) { width: var(--confetti-size, 13px); height: var(--confetti-size, 13px); }
.hero h1 { max-width: 720px; margin-bottom: 1rem; color: #fff; font-size: clamp(2.4rem, 5.5vw, 4.35rem); text-shadow: 0 3px 0 rgba(57, 40, 95, .22); animation: hero-burst 1100ms cubic-bezier(.16, 1, .3, 1) both; }
.hero h1::before {
  display: block;
  width: fit-content;
  margin: 0 auto 1rem;
  padding: .38rem .72rem;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  color: var(--blue-dark);
  content: "CENTRE DE LOISIRS AJL";
  background: var(--yellow);
  box-shadow: 0 5px 0 rgba(36, 59, 115, .16);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-shadow: none;
  transform-origin: center;
  animation: badge-pop 760ms 180ms cubic-bezier(.2, 1.4, .4, 1) both;
}
.hero p { max-width: 650px; margin: 0; color: #eef6ff; font-size: clamp(1rem, 1.8vw, 1.2rem); }
.hero p { animation: hero-enter 700ms 140ms both; }
.hero .vacation-countdown { display: flex; width: auto; flex-direction: column; align-items: center; gap: .65rem; margin: 1.5rem auto 0; animation: hero-enter 700ms 280ms both; }
.vacation-countdown-label { margin: 0; color: var(--yellow); font-size: .82rem; font-weight: 900; line-height: 1.25; text-transform: uppercase; }
.vacation-countdown-units { display: flex; justify-content: center; }
.vacation-countdown-unit { display: grid; min-width: 5.2rem; justify-items: center; gap: .22rem; padding: 0 .9rem; border-right: 1px solid rgba(255, 255, 255, .38); }
.vacation-countdown-unit:last-child { border-right: 0; }
.vacation-countdown-value { color: #fff; font-size: 2rem; font-variant-numeric: tabular-nums; font-weight: 900; line-height: 1; text-shadow: 0 2px 0 rgba(57, 40, 95, .22); transform-origin: center bottom; }
.vacation-countdown-value.is-flipping { animation: countdown-flip 360ms cubic-bezier(.18, .75, .2, 1) both; }
.vacation-countdown-unit-label { color: rgba(255, 255, 255, .82); font-size: .68rem; font-weight: 800; line-height: 1.2; text-transform: uppercase; }

/* Les sections de l'accueil alternent comme des univers d'activités. */
.home-page main > section:nth-of-type(2) {
  background:
    radial-gradient(circle at 8% 84%, rgba(255, 207, 75, .44) 0 10rem, transparent 10.1rem),
    radial-gradient(circle at 95% 12%, rgba(90, 146, 242, .18) 0 13rem, transparent 13.1rem),
    #fcfaff;
}
.home-page main > section:nth-of-type(3) {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .76), rgba(255, 255, 255, .8)),
    repeating-linear-gradient(-45deg, #fff0e5 0 16px, #fff9f4 16px 32px);
}
.home-page main > section:nth-of-type(4) {
  background:
    radial-gradient(circle at 92% 12%, rgba(242, 107, 94, .22) 0 13rem, transparent 13.1rem),
    #fff8f6;
}
.home-page main > section:nth-of-type(5) {
  background:
    radial-gradient(circle at 10% 14%, rgba(167, 139, 250, .25) 0 13rem, transparent 13.1rem),
    #faf8ff;
}
.home-page main > section:nth-of-type(6) {
  color: #fff;
  background:
    radial-gradient(circle at 90% 18%, rgba(255, 207, 75, .95) 0 5rem, transparent 5.1rem),
    linear-gradient(135deg, #3c285f, #754c9f 64%, #c8669e);
  background-size: 145% 145%;
  animation: gradient-shift 14s ease-in-out infinite;
}
.home-page main > section:nth-of-type(6)::before { background: var(--yellow); }
.home-page main > section:nth-of-type(6) h2 { color: #fff; }
.home-page main > section:nth-of-type(6) h2::after { background: linear-gradient(90deg, var(--yellow) 0 56%, #fff 56%); }
.home-page main > section:nth-of-type(6) > p { color: #e9f2ff; }
.home-page main > section:nth-of-type(6) form { background: #fff; }

/* Équipe et contenus en cartes */
.team-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 260px)); justify-content: center; align-items: start; gap: 1.5rem; }
.team-director-container { display: flex; justify-content: center; margin-bottom: 2rem; }
.team-director-container .team-member { max-width: 260px; }
.team-age-group + .team-age-group { margin-top: 2.5rem; }
.team-age-group > h3 { margin-bottom: 1rem; text-align: center; }
.team-member {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.team-member:nth-child(3n + 2) { transform: translateY(1.15rem); }
.team-member:hover { border-color: var(--sky); transform: perspective(900px) translateY(-8px) rotateX(1.5deg) rotateY(-1.2deg) scale(1.015); box-shadow: var(--shadow-md); }
.team-member.is-following-pointer { border-color: var(--yellow); transform: perspective(900px) translate3d(var(--card-shift-x, 0), -8px, 0) rotateX(var(--card-tilt-x, 0deg)) rotateY(var(--card-tilt-y, 0deg)) scale(1.035); box-shadow: 0 22px 42px rgba(35, 61, 108, .2), 0 0 0 2px rgba(255, 192, 155, .45); transition: transform 80ms linear, box-shadow 180ms ease, border-color 180ms ease; }
.team-member img { width: 100%; height: 290px; object-fit: cover; object-position: 50% 42%; background: var(--sky-pale); transition: transform 520ms cubic-bezier(.2, .7, .2, 1); }
.team-member:hover img { transform: scale(1.045); }
.home-page .team-member:hover img { animation: team-photo-whoa 820ms cubic-bezier(.16, 1, .3, 1) both; }
.team-member-placeholder { display: flex; flex-direction: column; }
.team-placeholder-visual { display: grid; width: 100%; height: 290px; place-items: center; border-bottom: 1px dashed var(--line); color: var(--muted); background: var(--surface-soft); font-size: .95rem; font-weight: 700; }
.team-member.team-director { border-color: rgba(229, 95, 148, .42); box-shadow: 0 14px 32px rgba(106, 66, 130, .14); }
.home-page .team-member.scroll-reveal.is-revealed { animation: team-flip-in 900ms cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms); }
.team-director .team-member-info::before { display: inline-flex; margin-bottom: .55rem; padding: .2rem .65rem; border-radius: 999px; color: #7b3156; content: "Direction"; background: var(--coral-pale); font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.team-member-info { padding: 1.1rem 1rem 1.25rem; }
.team-member-info h3 { margin-bottom: .2rem; }
.team-member-info p { margin: 0; color: var(--coral); font-size: .9rem; font-weight: 800; }

.info-grid, .planning-grid, .documents-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.info-grid { margin: 1.5rem 0 0; }
.practical-info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.day-timeline-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.day-timeline-grid > .planning-card { flex: 0 1 calc((100% - 3rem) / 4); }
.home-page .day-timeline-grid .planning-card.scroll-reveal.is-revealed { animation: timeline-pop 850ms cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms); }
.info-card, .planning-card {
  position: relative;
  min-height: 100%;
  padding: 1.35rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, #fffdfc, var(--surface-soft));
  box-shadow: var(--shadow-sm);
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}
.info-card::after, .planning-card::after { position: absolute; top: 0; left: 0; width: 100%; height: 5px; content: ""; background: var(--yellow); }
.planning-card::after { background: var(--coral); }
.info-card:nth-child(3n + 2)::after { background: var(--sky); }
.info-card:nth-child(3n)::after { background: var(--coral); }
.info-card:nth-child(3n + 2) .emoji { background: var(--sky-pale); }
.info-card:nth-child(3n) .emoji { background: var(--coral-pale); }
.info-card:hover, .planning-card:hover { border-color: rgba(167, 139, 250, .6); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.info-card:hover .emoji { animation: emoji-wow 520ms cubic-bezier(.2, 1.4, .4, 1); }
.planning-card:hover::after { transform-origin: left center; animation: planning-sweep 680ms cubic-bezier(.16, 1, .3, 1); }
.info-card h3 { margin-top: .25rem; }
.info-card p, .planning-card .description { margin-bottom: 0; font-size: .94rem; }
.holiday-calendar { margin-top: 2.5rem; }
.holiday-calendar > h3 { margin-bottom: .45rem; font-size: 1.35rem; }
.holiday-calendar > p { margin-bottom: 1rem; }
.holiday-calendar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1rem; }
.holiday-period {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .65rem;
  padding: 1.25rem 1rem 1.35rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, #fff, #fff9f4);
  box-shadow: 0 8px 22px rgba(35, 61, 108, .08);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.holiday-period::before { position: absolute; inset: 0 0 auto; height: 5px; content: ""; background: var(--coral); }
.holiday-period:nth-child(2)::before { background: var(--sky); }
.holiday-period:nth-child(3)::before { background: var(--yellow); }
.holiday-period:nth-child(4)::before { background: #a78bfa; }
.holiday-period:hover { border-color: rgba(167, 139, 250, .65); box-shadow: 0 14px 30px rgba(35, 61, 108, .14); transform: translateY(-3px); }
.holiday-period-season { padding: .28rem .7rem; border-radius: 999px; color: var(--coral); background: var(--coral-pale); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.holiday-period:nth-child(2) .holiday-period-season { color: #315c91; background: var(--sky-pale); }
.holiday-period:nth-child(3) .holiday-period-season { color: #795900; background: var(--yellow-pale); }
.holiday-period:nth-child(4) .holiday-period-season { color: #61439d; background: #f0eaff; }
.holiday-period-dates { display: grid; justify-items: center; gap: .05rem; margin: 0; color: var(--blue-dark); }
.holiday-period-prefix { color: var(--muted); font-size: .76rem; font-weight: 700; }
.holiday-period-range { font-size: clamp(1.8rem, 3vw, 2.25rem); font-weight: 900; letter-spacing: -.06em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.holiday-period-range span { color: var(--coral); font-size: .88rem; font-weight: 800; letter-spacing: 0; }
.holiday-period-month { color: var(--muted); font-size: .9rem; font-weight: 700; }
.holiday-period-month span { color: var(--blue-dark); font-weight: 900; }
.emoji {
  display: grid;
  width: 3.1rem;
  height: 3.1rem;
  margin-bottom: .9rem;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow-pale);
  font-size: 1.5rem;
  animation: icon-float 3.8s ease-in-out infinite;
}
.info-card:nth-child(2) .emoji { animation-delay: .5s; }
.info-card:nth-child(3) .emoji { animation-delay: 1s; }
.info-card:nth-child(4) .emoji { animation-delay: 1.5s; }
.info-card:nth-child(5) .emoji { animation-delay: 2s; }
.info-card:nth-child(6) .emoji { animation-delay: 2.5s; }
.planning-card .time { margin-bottom: .8rem; color: var(--coral); font-size: .84rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.planning-card .title { margin-bottom: .55rem; color: var(--blue-dark); font-size: 1.08rem; font-weight: 900; line-height: 1.25; }

/* Boutons et formulaires */
button, .btn-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 46px;
  padding: .7rem 1.15rem;
  border: 0;
  border-radius: 12px;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(120deg, #6854c9, #9a6cdb);
  background-size: 180% 180%;
  box-shadow: 0 7px 16px rgba(104, 84, 201, .25);
  font-size: .95rem;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
button::before, .btn-secondary::before { position: absolute; top: 0; left: -115%; width: 68%; height: 100%; content: ""; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-22deg); transition: left 420ms ease; }
button:hover, .btn-secondary:hover { background: linear-gradient(120deg, #5a45b5, #8d5ccc); box-shadow: 0 9px 18px rgba(104, 84, 201, .28); transform: translateY(-1px) scale(1.015); }
button:hover::before, .btn-secondary:hover::before { left: 145%; }
button:active, .btn-secondary:active { transform: scale(.98); }
.btn-secondary { background: linear-gradient(120deg, #d9508b, #ef829d); box-shadow: 0 7px 16px rgba(217, 80, 139, .24); }
.btn-secondary:hover { background: linear-gradient(120deg, #c9447e, #e26d8d); box-shadow: 0 11px 22px rgba(217, 80, 139, .3); }
.btn-danger { background: var(--danger); }
form {
  max-width: 700px;
  margin: 1.5rem auto 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, #fff, var(--surface-soft));
  box-shadow: 0 12px 26px rgba(35, 61, 108, .06);
  text-align: left;
}
.form-group { margin-bottom: 1.15rem; }
label { display: block; margin-bottom: .42rem; color: var(--blue-dark); font-size: .92rem; font-weight: 900; transform-origin: left center; transition: color 180ms ease, transform 180ms ease; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="file"], textarea, select {
  width: 100%;
  min-height: 46px;
  padding: .72rem .82rem;
  border: 1.5px solid #ddd1ec;
  border-radius: 11px;
  outline: none;
  color: var(--ink);
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input[type="file"] { padding: .57rem; }
textarea { min-height: 130px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--sky); box-shadow: 0 0 0 4px rgba(167, 139, 250, .22); }
.form-group:focus-within > label { color: var(--coral); transform: translateX(5px) rotate(-1deg); }
form button { display: flex; margin-right: auto; margin-left: auto; }

/* Galerie, accès et gestion */
.photo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 1rem; }
.photo-item { position: relative; aspect-ratio: 1; overflow: hidden; border: 5px solid #fff; border-radius: 18px; background: var(--sky-pale); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.photo-item:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.photo-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms cubic-bezier(.2, .7, .2, 1); }
.photo-item:hover img { transform: scale(1.04); }
.photo-open-button { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; box-shadow: none; cursor: zoom-in; }
.photo-open-button:hover { transform: none; box-shadow: none; }
.photo-open-button:focus-visible { z-index: 1; outline-offset: -5px; }
.photo-caption { position: absolute; right: .6rem; bottom: .6rem; left: .6rem; padding: .35rem .55rem; border-radius: 8px; color: #fff; background: rgba(57, 40, 95, .78); font-size: .78rem; font-weight: 800; text-align: center; }
.photo-empty-state { grid-column: 1 / -1; display: flex; min-height: 240px; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg, #fff, var(--surface-soft)); text-align: center; }
.photo-empty-state::before { width: 2.5rem; height: 3px; margin-bottom: 1.1rem; content: ""; background: var(--yellow); }
.photo-empty-state h3 { margin-bottom: .45rem; color: var(--blue-dark); }
.photo-empty-state p { max-width: 34rem; margin: 0; color: var(--muted); }
.access-panel, .child-info, .admin-panel, .upload-section { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }
.access-panel { margin-bottom: 1.5rem; padding: 1.5rem; border-left: 5px solid var(--yellow); text-align: center; }
.access-panel p, .child-info p { margin-bottom: 1rem; }
.child-info { margin-bottom: 1.5rem; padding: 1rem 1.25rem; }
.admin-panel { padding: clamp(1.25rem, 3vw, 2rem); }
.upload-section { margin-top: 1rem; padding: 1.25rem; border-style: dashed; background: #fff; }
.upload-section form { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; }
.documents-grid { margin-top: .25rem; }
.planning-viewer {
  width: min(1180px, 100%);
  margin: 2.5rem auto 0;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  overflow: hidden;
  border: 1px solid rgba(167, 139, 250, .35);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(240, 237, 255, .9));
  box-shadow: var(--shadow-md);
}
.canteen-menu-viewer {
  margin-top: .75rem;
  margin-bottom: 2.5rem;
  border: 2px solid var(--coral);
  border-top-width: 8px;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, var(--coral-pale));
}
.canteen-menu-viewer .planning-viewer-header { margin-bottom: 1.25rem; }
.canteen-menu-viewer .planning-viewer-header h2 { font-size: 1.8rem; }
.planning-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  text-align: left;
}
.planning-viewer-header h2 { margin-bottom: 0; font-size: clamp(1.35rem, 2.5vw, 1.8rem); }
.planning-viewer-header h2::after { display: none; }
.viewer-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .65rem; }
.menu-day-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.menu-day-filter { min-height: 42px; padding: .55rem .95rem; border: 1px solid var(--line); border-radius: 999px; color: var(--blue-dark); background: #fff; font: inherit; font-size: .9rem; font-weight: 800; cursor: pointer; transition: transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease; }
.menu-day-filter:hover { transform: translateY(-2px); }
.menu-day-filter[aria-pressed="true"] { border-color: var(--blue-dark); color: #fff; background: var(--blue-dark); animation: menu-filter-select 360ms cubic-bezier(.2, 1.5, .4, 1) both; }
.menu-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.menu-table { width: 100%; min-width: 760px; border-collapse: collapse; text-align: left; }
.menu-table th, .menu-table td { padding: .9rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.menu-table th { position: sticky; top: 0; color: #fff; background: var(--blue-dark); font-size: .9rem; font-weight: 900; }
.menu-table td:first-child { min-width: 130px; color: var(--coral); font-weight: 900; }
.menu-table tbody tr:nth-child(even) { background: #fbfaff; }
.menu-table tbody tr { animation: meal-row-arrive 460ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--row-delay, 0ms); }
.menu-table tbody.is-day-change tr { animation: menu-day-fade 260ms ease both; }
.menu-table tbody tr:hover { background: var(--sky-pale); }
.menu-table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 700px) {
  .canteen-menu-viewer { padding: 1rem; border-top-width: 6px; }
  .canteen-menu-viewer .planning-viewer-header { margin-bottom: .9rem; }
  .canteen-menu-viewer .planning-viewer-header h2 { font-size: 1.45rem; }
  .canteen-menu-viewer .viewer-kicker { font-size: .72rem; }
  .menu-day-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .menu-day-filter { min-width: 0; min-height: 44px; padding: .5rem .6rem; font-size: .82rem; }
  .menu-day-filter:first-child { grid-column: 1 / -1; }
  .menu-table-wrap { overflow: visible; border: 0; background: transparent; }
  .menu-table { display: block; min-width: 0; }
  .menu-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
  .menu-table thead tr, .menu-table thead th { position: absolute; display: block; width: 1px; height: 1px; padding: 0; overflow: hidden; border: 0; }
  .menu-table tbody { display: grid; gap: .8rem; }
  .menu-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; padding: .85rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
  .menu-table tbody tr:nth-child(even), .menu-table tbody tr:hover { background: #fff; }
  .menu-table td, .menu-table td:first-child { min-width: 0; padding: .65rem; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--surface-soft); overflow-wrap: anywhere; }
  .menu-table td:first-child { grid-column: 1 / -1; border-color: transparent; color: var(--blue-dark); background: var(--yellow-pale); font-size: 1rem; }
  .menu-table td::before { display: block; margin-bottom: .25rem; color: var(--coral); content: attr(data-label); font-size: .68rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
}
@media (max-width: 360px) {
  .menu-table tbody tr { grid-template-columns: minmax(0, 1fr); }
  .menu-table td:first-child { grid-column: auto; }
}
.btn-download { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 46px; padding: .7rem 1.15rem; border: 1px solid rgba(104, 84, 201, .3); border-radius: 12px; color: var(--blue-dark); background: linear-gradient(120deg, var(--sky-pale), #fff); box-shadow: var(--shadow-sm); font-size: .95rem; font-weight: 900; line-height: 1.2; text-decoration: none; transition: transform var(--transition), box-shadow var(--transition), background var(--transition); }
.btn-download:hover { box-shadow: var(--shadow-md); transform: translateY(-1px) scale(1.015); }
.btn-download:active { transform: scale(.98); }
.btn-download::after { content: "↓"; font-size: 1.05rem; transition: transform 240ms cubic-bezier(.2, .7, .2, 1); }
.btn-download:hover::after { transform: translateY(4px); }
.viewer-kicker { margin-bottom: .2rem; color: var(--coral); font-size: .78rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.planning-pdf { display: block; width: 100%; height: max(82svh, 850px); border: 0; border-radius: 14px; background: #fff; }
.planning-pdf.is-loaded { animation: pdf-fade-in 320ms ease-out both; }
.planning-pdf p { padding: 2rem; }
.planning-pdf a { color: var(--blue); font-weight: 900; }
.planning-viewer .btn-secondary::after { display: inline-block; margin-left: .12rem; content: "↗"; transition: transform 220ms cubic-bezier(.2, .7, .2, 1); }
.planning-viewer .btn-secondary:hover::after { transform: translate(3px, -3px); }
.document-viewer { border-top: 6px solid var(--sky); }
.document-viewer + .document-viewer { margin-top: 1.5rem; }
.document-viewer .planning-viewer-header { align-items: flex-start; }
.document-viewer .planning-viewer-header > div:first-child { min-width: 0; }
.document-viewer .viewer-actions { flex: 0 1 auto; }
.document-viewer .btn-download, .document-viewer .btn-secondary { min-width: 0; white-space: normal; text-align: center; }
.activity-planning-viewer { border-top-color: var(--coral); }
.pedagogical-project-viewer { border-top-color: var(--sky); }
.activity-planning-viewer .planning-pdf { height: clamp(28rem, 72svh, 50rem); }
.pedagogical-project-viewer .planning-pdf { height: clamp(34rem, 82svh, 58rem); }

/* Messages, modale et pied de page */
.alert { margin-top: 1rem; padding: .9rem 1rem; border-radius: 12px; font-weight: 800; }
.alert-success { border-left: 5px solid var(--success); color: #176449; background: #e6f7ef; }
.alert-error { border-left: 5px solid var(--danger); color: #992e3a; background: #fff0f1; }
.alert-info { border-left: 5px solid var(--sky); color: var(--blue-dark); background: var(--sky-pale); }
.alert-success {
  position: relative;
  padding-right: 3rem;
  padding-left: 3rem;
  overflow: visible;
  animation: success-arrive 600ms cubic-bezier(.16, 1, .3, 1) both;
}
.alert-success::before {
  position: absolute;
  top: 50%;
  left: .9rem;
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  content: "✓";
  background: var(--success);
  font-size: .86rem;
  transform: translateY(-50%) scale(0);
  animation: success-check 430ms 150ms cubic-bezier(.2, 1.5, .4, 1) both;
}
.alert-success::after {
  position: absolute;
  top: 50%;
  right: 1.1rem;
  color: var(--coral);
  content: "✦";
  font-size: 1.15rem;
  text-shadow: -.8rem -.7rem 0 var(--yellow), .65rem -.85rem 0 var(--sky), -.65rem .7rem 0 var(--coral);
  transform: translateY(-50%) scale(0);
  animation: success-spark 850ms 120ms ease-out both;
}
.modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(24, 43, 82, .62); backdrop-filter: blur(5px); }
.modal.active { display: flex; animation: modal-backdrop 260ms ease both; }
.modal-content { width: min(100%, 480px); max-height: calc(100vh - 2rem); padding: 1.7rem; overflow: auto; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-lg); }
.modal.active .modal-content { animation: modal-enter 460ms cubic-bezier(.16, 1, .3, 1) both; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.modal-header h2 { margin: 0; font-size: 1.5rem; }
.modal-content form { margin-top: 1.25rem; }
.close { display: grid; width: 38px; min-height: 38px; padding: 0; place-items: center; border-radius: 50%; color: var(--blue-dark); background: var(--sky-pale); box-shadow: none; font-size: 1.8rem; font-weight: 400; line-height: 1; }
.close:hover { color: #fff; background: var(--coral); transform: rotate(90deg); }
.gift-trigger { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 200; display: grid; width: 62px; height: 62px; min-height: 62px; padding: 0; place-items: center; border: 3px solid #fff; border-radius: 50%; background: linear-gradient(145deg, #f05f98, #8e5cd2); box-shadow: 0 8px 24px rgba(53, 43, 71, .32); font-size: 1.8rem; }
.gift-trigger:hover { transform: translateY(-5px) rotate(-8deg) scale(1.08); }
.gift-confetti-burst { position: fixed; inset: 0; z-index: 999; overflow: hidden; pointer-events: none; }
.gift-confetti-piece { position: absolute; width: var(--confetti-size); height: calc(var(--confetti-size) * 1.55); border-radius: 3px; background: var(--confetti-color); box-shadow: 0 0 12px var(--confetti-color); opacity: 0; animation: gift-confetti-flight 1250ms cubic-bezier(.12, .7, .28, 1) var(--confetti-delay) both; }
.gift-confetti-piece.is-round { border-radius: 50%; }
.gift-confetti-piece.is-ribbon { width: calc(var(--confetti-size) * .55); height: calc(var(--confetti-size) * 2.8); border-radius: 999px; }
.gift-dialog { width: min(94vw, 720px); max-width: 720px; max-height: min(92svh, 900px); padding: 0; overflow: auto; border: 0; border-radius: 16px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow-lg); }
.gift-dialog[open] { animation: gift-arrive 440ms cubic-bezier(.16, 1, .3, 1) both; }
.gift-dialog::backdrop { background: rgba(35, 27, 53, .66); backdrop-filter: blur(6px); }
.gift-dialog-content { position: relative; padding: clamp(1rem, 3vw, 1.6rem); text-align: center; }
.gift-dialog-close { position: absolute; top: .7rem; right: .7rem; display: grid; width: 38px; height: 38px; min-height: 38px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: #fff; box-shadow: none; font-size: 1.5rem; line-height: 1; }
.gift-dialog-kicker { margin: 0 2rem .3rem; color: #c64579; font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.gift-dialog h2 { margin: 0 2rem 1rem; font-size: 1.65rem; }
.gift-dialog h2::after { display: none; }
.gift-photo-placeholder { display: grid; width: 100%; min-height: 220px; aspect-ratio: 4 / 3; place-items: center; border: 2px dashed #cbb8df; border-radius: 10px; color: var(--blue-dark); background: repeating-linear-gradient(135deg, #f7f1ff 0 14px, #fffafc 14px 28px); font-size: 1rem; font-weight: 900; line-height: 1.5; }
.gift-team-photo { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; background: #f1edf4; object-fit: contain; object-position: center; box-shadow: var(--shadow-sm); }
.gift-dialog-message { max-width: 380px; margin: 1rem auto 0; color: var(--muted); font-size: .98rem; }
.photo-lightbox { position: fixed; width: min(94vw, 1200px); max-width: min(94vw, 1200px); max-height: 94vh; margin: auto; padding: 3.5rem 4rem 1rem; overflow: auto; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; color: #fff; background: #17212d; box-shadow: 0 24px 80px rgba(0, 0, 0, .42); }
.photo-lightbox[open] { animation: lightbox-enter 420ms cubic-bezier(.16, 1, .3, 1) both; }
.photo-lightbox::backdrop { background: rgba(8, 18, 32, .86); backdrop-filter: blur(5px); animation: modal-backdrop 280ms ease both; }
.photo-lightbox img { display: block; width: auto; max-width: 100%; max-height: calc(94vh - 6rem); margin: 0 auto; object-fit: contain; }
.photo-lightbox img.is-changing { animation: photo-change 420ms cubic-bezier(.16, 1, .3, 1) both; }
.photo-lightbox img.is-changing.is-reverse { animation-name: photo-change-reverse; }
.photo-lightbox-close { position: absolute; top: .65rem; right: .65rem; display: grid; width: 40px; aspect-ratio: 1; padding: 0; place-items: center; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .12); box-shadow: none; font-size: 1.7rem; line-height: 1; transition: transform 260ms cubic-bezier(.2, .7, .2, 1), background-color 220ms ease; }
.photo-lightbox-close:hover { background: var(--coral); transform: rotate(90deg) scale(1.08); }
.photo-lightbox-nav { position: absolute; top: 50%; z-index: 1; display: grid; width: 46px; height: 46px; min-height: 0; padding: 0 0 .2rem; appearance: none; place-items: center; transform: translateY(-50%); border: 1px solid rgba(255, 255, 255, .36); border-radius: 50%; color: #fff; background: rgba(16, 26, 38, .6); box-shadow: 0 5px 18px rgba(0, 0, 0, .22); backdrop-filter: blur(8px); font-family: Georgia, serif; font-size: 2.4rem; font-weight: 400; line-height: 1; }
.photo-lightbox-nav:hover { transform: translateY(-50%) scale(1.08); border-color: #fff; background: var(--coral); }
.photo-lightbox-previous:hover { transform: translate(-4px, -50%) scale(1.08); }
.photo-lightbox-next:hover { transform: translate(4px, -50%) scale(1.08); }
.photo-lightbox-nav:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.photo-lightbox-previous { left: .85rem; }
.photo-lightbox-next { right: .85rem; }
.photo-lightbox-nav[hidden] { display: none; }
.photo-lightbox-caption { margin: .75rem 0 0; color: rgba(255, 255, 255, .85); text-align: center; }
.soft-section { background: linear-gradient(135deg, var(--yellow-pale), #fff 65%); }
.check-list { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; color: var(--muted); }
.check-list li { position: relative; padding-left: 2rem; }
.check-list li::before { position: absolute; top: .13rem; left: 0; display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border-radius: 50%; color: var(--blue-dark); content: "✓"; background: var(--yellow); font-size: .8rem; font-weight: 900; }
footer { margin-top: 3rem; padding: 2.5rem 1rem; border-top: 5px solid var(--yellow); color: #e7efff; background: var(--blue-dark); text-align: center; }
footer { background-image: radial-gradient(circle at 12% 50%, rgba(255, 192, 155, .3) 0 4rem, transparent 4.1rem), radial-gradient(circle at 88% 70%, rgba(167, 139, 250, .38) 0 6rem, transparent 6.1rem); }

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes floating-label {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50% { transform: rotate(-7deg) translateY(-10px); }
}
@keyframes airplane-across {
  0% { opacity: 0; transform: translate3d(-10rem, 12rem, 0) rotate(14deg) scale(.7); }
  8% { opacity: 1; transform: translate3d(-3rem, 7rem, 0) rotate(10deg) scale(.85); }
  82% { opacity: 1; transform: translate3d(calc(100vw + 8rem), -5rem, 0) rotate(-7deg) scale(1.15); }
  100% { opacity: 0; transform: translate3d(calc(100vw + 11rem), -8rem, 0) rotate(-7deg) scale(1.15); }
}
@keyframes balloon-drift {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-9px) rotate(2deg); }
}
@keyframes balloon-rise {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-24px) scale(1.16); }
  70% { transform: translateY(-17px) scale(1.11); }
  100% { transform: translateY(-20px) scale(1.13); }
}
@keyframes balloon-burst-flight {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(35deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(.15) rotate(var(--burst-spin)); }
}
@keyframes countdown-flip {
  0% { opacity: .25; transform: perspective(180px) rotateX(-72deg) translateY(7px); }
  72% { opacity: 1; transform: perspective(180px) rotateX(12deg) translateY(-1px); }
  100% { opacity: 1; transform: perspective(180px) rotateX(0) translateY(0); }
}
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-burst {
  0% { opacity: 0; transform: translateY(90px) scale(.55) rotate(-8deg); }
  65% { opacity: 1; transform: translateY(-16px) scale(1.08) rotate(2deg); }
  82% { transform: translateY(5px) scale(.98) rotate(-.5deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes confetti-wow {
  0% { opacity: 0; transform: translate(var(--burst-x), var(--burst-y)) rotate(-140deg) scale(.15); }
  22% { opacity: 1; transform: translate(0, 0) rotate(25deg) scale(1.2); }
  38% { opacity: 1; transform: translate(0, -16px) rotate(95deg) scale(1); }
  78% { opacity: .9; transform: translate(0, 12px) rotate(250deg) scale(.9); }
  100% { opacity: 0; transform: translate(var(--burst-x), calc(var(--burst-y) * -1)) rotate(360deg) scale(.15); }
}
@keyframes team-flip-in {
  0% { opacity: 0; transform: perspective(900px) rotateY(-38deg) translateY(52px) scale(.76); }
  72% { opacity: 1; transform: perspective(900px) rotateY(7deg) translateY(-8px) scale(1.03); }
  100% { opacity: 1; transform: perspective(900px) rotateY(0) translateY(0) scale(1); }
}
@keyframes team-photo-whoa {
  0% { transform: scale(1) rotate(0); filter: saturate(1); }
  58% { transform: scale(1.24) rotate(-3deg); filter: saturate(1.45) brightness(1.12); }
  78% { transform: scale(1.14) rotate(1deg); }
  100% { transform: scale(1.17) rotate(0); filter: saturate(1.2) brightness(1.04); }
}
@keyframes timeline-pop {
  0% { opacity: 0; transform: translateY(75px) rotate(-8deg) scale(.72); }
  68% { opacity: 1; transform: translateY(-12px) rotate(2deg) scale(1.06); }
  86% { transform: translateY(4px) rotate(-.5deg) scale(.99); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes badge-pop {
  from { opacity: 0; transform: translateY(8px) scale(.76) rotate(-6deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes underline-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes success-arrive {
  0% { opacity: 0; transform: translateY(14px) scale(.96); }
  72% { opacity: 1; transform: translateY(-2px) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes success-check {
  from { opacity: 0; transform: translateY(-50%) scale(0) rotate(-35deg); }
  to { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); }
}
@keyframes success-spark {
  0% { opacity: 0; transform: translateY(-50%) scale(.2) rotate(-25deg); }
  28% { opacity: 1; transform: translateY(-50%) scale(1.25) rotate(12deg); }
  100% { opacity: 0; transform: translateY(-50%) scale(.45) rotate(40deg); }
}
@keyframes logo-wiggle {
  0%, 100% { transform: rotate(0); }
  24% { transform: rotate(-5deg) scale(1.04); }
  52% { transform: rotate(4deg) scale(1.04); }
  76% { transform: rotate(-2deg); }
}
@keyframes modal-backdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modal-enter {
  0% { opacity: 0; transform: translateY(22px) scale(.94); }
  76% { opacity: 1; transform: translateY(-3px) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes lightbox-enter {
  from { opacity: 0; transform: translateY(14px) scale(.965); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes photo-change {
  from { opacity: 0; transform: translateX(24px) scale(.985); filter: saturate(.75); }
  to { opacity: 1; transform: translateX(0) scale(1); filter: saturate(1); }
}
@keyframes photo-change-reverse {
  from { opacity: 0; transform: translateX(-24px) scale(.985); filter: saturate(.75); }
  to { opacity: 1; transform: translateX(0) scale(1); filter: saturate(1); }
}
@keyframes pdf-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes menu-filter-select {
  0% { transform: scale(.9); }
  72% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes meal-row-arrive {
  0% { opacity: 0; transform: translateY(8px) scale(.99); }
  72% { opacity: 1; transform: translateY(-1px) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes menu-day-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes nav-arrive {
  from { opacity: 0; transform: translateY(-10px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes nav-icon-wow {
  0% { transform: translateY(0) rotate(0) scale(1); }
  42% { transform: translateY(-7px) rotate(-34deg) scale(1.45); }
  72% { transform: translateY(1px) rotate(18deg) scale(.9); }
  100% { transform: translateY(-2px) rotate(352deg) scale(1.15); }
}
@keyframes emoji-wow {
  0% { transform: translateY(0) rotate(0) scale(1); }
  38% { transform: translateY(-14px) rotate(-24deg) scale(1.3); }
  68% { transform: translateY(3px) rotate(18deg) scale(.92); }
  100% { transform: translateY(-7px) rotate(360deg) scale(1.12); }
}
@keyframes planning-sweep {
  0% { transform: scaleX(.04); background: var(--coral); }
  58% { transform: scaleX(1.08); background: var(--yellow); }
  100% { transform: scaleX(1); background: var(--coral); }
}
@keyframes heading-wow {
  0% { opacity: 0; transform: translateY(24px) scale(.72) rotate(-4deg); }
  68% { opacity: 1; transform: translateY(-6px) scale(1.08) rotate(1deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes heading-starburst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.08) rotate(-50deg); }
  36% { opacity: .92; transform: translate(-50%, -50%) scale(1.28) rotate(24deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.85) rotate(110deg); }
}
@keyframes decorative-float {
  0%, 100% { transform: rotate(22deg) translate3d(0, 0, 0); }
  50% { transform: rotate(35deg) translate3d(-1.2rem, -1.7rem, 0); }
}
@keyframes icon-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-7px) rotate(-4deg); }
}
@keyframes gift-arrive {
  from { opacity: 0; transform: translateY(24px) scale(.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes gift-confetti-flight {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.18) rotate(0); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(45deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--confetti-x)), calc(-50% + var(--confetti-y))) scale(.45) rotate(var(--confetti-spin)); }
}
@keyframes cursor-trail-fade {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(18deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(0) rotate(var(--spark-rotation)); }
}
footer p { margin: 0 0 .35rem; color: inherit; font-size: .92rem; }
.hidden { display: none !important; }
.visible { display: block !important; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.cursor-trail-layer { position: fixed; inset: 0; z-index: 9999; overflow: hidden; pointer-events: none; }
.cursor-trail-particle { position: absolute; width: var(--spark-size); height: var(--spark-size); border-radius: 50%; background: var(--spark-color); box-shadow: 0 0 12px var(--spark-color); animation: cursor-trail-fade 680ms cubic-bezier(.16, 1, .3, 1) both; }
.cursor-trail-particle.is-diamond { border-radius: 2px; }

main > section.scroll-reveal,
.team-member.scroll-reveal,
.info-card.scroll-reveal,
.planning-card.scroll-reveal,
.photo-item.scroll-reveal {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 680ms cubic-bezier(.2, .7, .2, 1), translate 680ms cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
main > section.scroll-reveal.is-revealed,
.team-member.scroll-reveal.is-revealed,
.info-card.scroll-reveal.is-revealed,
.planning-card.scroll-reveal.is-revealed,
.photo-item.scroll-reveal.is-revealed { opacity: 1; translate: 0 0; }
.photo-item.scroll-reveal { translate: 0 12px; transition: opacity 440ms ease, translate 440ms ease; }
main > section.scroll-reveal.is-revealed h2::after { animation: underline-draw 720ms 180ms cubic-bezier(.2, .7, .2, 1) both; }
.home-page main > section.scroll-reveal.is-revealed h2 { animation: heading-wow 820ms cubic-bezier(.16, 1, .3, 1) both; }
.home-page main > section.scroll-reveal.is-revealed h2::before { position: absolute; top: 50%; left: 50%; z-index: -1; color: var(--yellow); content: "✦"; font-size: 5.5rem; line-height: 1; text-shadow: 0 0 12px rgba(255, 192, 155, .9), 0 0 28px rgba(167, 139, 250, .75); pointer-events: none; animation: heading-starburst 880ms 80ms cubic-bezier(.16, 1, .3, 1) both; }

@media (max-width: 920px) {
  .header-content { display: flex; flex-wrap: wrap; min-height: 68px; gap: .7rem; }
  .header-content nav { order: 3; flex: 1 0 100%; min-width: 0; }
  .site-nav { display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .2rem; overflow: visible; padding: .3rem; border-radius: 18px; }
  .site-nav a { min-height: 44px; padding: .55rem .35rem; text-align: center; }
  .site-nav a::after { right: 20%; left: 20%; }
  .site-nav a::before { margin-right: .3rem; }
  .auth-buttons { flex: 1 0 100%; justify-content: center; padding-bottom: .65rem; }
  .auth-buttons button { flex: 1 1 0; max-width: 190px; }
  .day-timeline-grid > .planning-card { flex-basis: calc((100% - 1rem) / 2); }
  .section-balloon { transform: scale(.72); transform-origin: top center; opacity: .8; }
  .section-balloon:hover, .section-balloon:focus-visible { transform: scale(.72); }
  .section-balloon-left { left: .15rem; }
  .section-balloon-right { right: .15rem; }
}
@media (max-width: 640px) {
  main > section { min-height: 100svh; padding: 4rem 1.25rem; }
  .header-content { width: min(100% - 1rem, 1240px); }
  .logo { max-width: 100%; overflow: hidden; font-size: 1.05rem; text-overflow: ellipsis; }
  .site-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .28rem; padding: .35rem; }
  .site-nav a { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: .35rem; padding: .55rem .4rem; font-size: .84rem; }
  .site-nav a::before { display: inline-block; margin: 0; font-size: .9rem; }
  .hero { min-height: 100svh; }
  .hero::after { right: 4%; bottom: 8%; max-width: 180px; font-size: .75rem; text-align: right; }
  .scroll-progress-rail { top: 118px; right: 10px; bottom: 76px; }
  .hero .vacation-countdown { margin-top: 1.1rem; }
  .vacation-countdown-unit { min-width: 4rem; padding: 0 .55rem; }
  .vacation-countdown-value { font-size: 1.65rem; }
  .vacation-countdown-unit-label { font-size: .62rem; }
  .team-member:nth-child(3n + 2) { transform: none; }
  .team-container { grid-template-columns: minmax(0, min(100%, 320px)); }
  .info-grid, .planning-grid, .documents-grid { grid-template-columns: 1fr; }
  .day-timeline-grid > .planning-card { flex-basis: 100%; }
  .team-member img { height: 320px; }
  .photo-gallery { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
  .planning-viewer-header { align-items: flex-start; flex-direction: column; }
  .planning-viewer-header .btn-secondary, .planning-viewer-header .btn-download { width: 100%; }
  .planning-viewer-header .viewer-actions { width: 100%; }
  .planning-pdf { height: max(76svh, 560px); }
  .modal-content { padding: 1.25rem; }
  .gift-trigger { right: max(.75rem, env(safe-area-inset-right)); bottom: max(.75rem, env(safe-area-inset-bottom)); width: 56px; height: 56px; min-height: 56px; }
  .gift-dialog-content { padding: 1.5rem 1.1rem; }
  .gift-dialog h2 { font-size: 1.4rem; }
  .gift-photo-placeholder { min-height: 170px; }
}
@media (max-width: 760px), (max-height: 620px) {
  .section-balloons { display: none; }
}
@media (max-width: 920px) {
  .document-viewer .planning-viewer-header { display: grid; gap: .85rem; }
  .document-viewer .viewer-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: .55rem; }
  .document-viewer .viewer-actions > a { width: 100%; min-height: 48px; padding: .65rem .75rem; font-size: .9rem; }
}
@media (max-width: 700px) {
  .document-viewer { margin-top: 1.25rem; padding: 1rem; border-radius: 18px; }
  .activity-planning-viewer .planning-pdf { height: clamp(22rem, 58svh, 34rem); }
  .pedagogical-project-viewer .planning-pdf { height: clamp(26rem, 70svh, 40rem); }
}
@media (max-width: 400px) {
  .document-viewer .viewer-actions { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .cursor-trail-layer { display: none; }
  main > section.scroll-reveal,
  .team-member.scroll-reveal,
  .info-card.scroll-reveal,
  .planning-card.scroll-reveal,
  .photo-item.scroll-reveal { opacity: 1; translate: none; transition: none; }
}