:root {
  --sand:#F7F3EE; --white:#FFFFFF; --ink:#1C1C1E; --ink60:#666564; --ink30:#BDBCBB;
  --sage:#7BAE8A; --sagebg:#EEF5F0; --sun:#F0A500; --sunbg:#FEF6E4;
  --coral:#E8604C; --coralbg:#FDF0EE; --sky:#4B9CD3; --skybg:#EBF4FB;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { font-family:'DM Sans',sans-serif; background:var(--white); color:var(--ink); overflow-x:hidden; -webkit-font-smoothing:antialiased }

/* NAV */
#nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:0 48px; height:72px; transition:background .4s,box-shadow .4s }
#nav.solid { background:rgba(255,255,255,.96); box-shadow:0 1px 0 rgba(0,0,0,.06) }
.nav-logo { display:flex; align-items:center; text-decoration:none }
.nav-links { display:flex; gap:32px }
.nav-links a { text-decoration:none; font-size:.875rem; font-weight:500; color:var(--ink60); transition:color .2s }
.nav-links a:hover { color:var(--ink) }
.nav-btn { display:inline-block; background:var(--ink); color:#fff; border:none; border-radius:50px; padding:10px 22px; font-family:'DM Sans',sans-serif; font-size:.875rem; font-weight:500; cursor:pointer; text-decoration:none; transition:background .3s }
.nav-btn:hover { background:var(--coral) }
.btn-espace:hover { background:var(--sage) !important; color:white !important; }

/* HERO */
#hero { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:100px 48px 80px; background:var(--sand); gap:60px; position:relative; overflow:hidden }
.hero-orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:.3; pointer-events:none }
.hero-left { position:relative; z-index:2 }
.hero-pill { display:inline-flex; align-items:center; gap:8px; background:white; border-radius:50px; padding:6px 14px 6px 8px; font-size:.75rem; font-weight:600; color:var(--ink60); text-transform:uppercase; letter-spacing:.06em; margin-bottom:28px; border:1px solid rgba(0,0,0,.07) }
h1 { font-family:'DM Serif Display',serif; font-size:clamp(2.8rem,5vw,4rem); line-height:1.05; color:var(--ink); margin-bottom:20px }
h1 em { color:var(--coral); font-style:italic }
.hero-sub { font-size:1rem; line-height:1.75; color:var(--ink60); font-weight:300; max-width:460px; margin-bottom:36px }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap }

/* THE TWO KEY BUTTONS - exact same as working test */
.btn-fill {
  display:inline-block; padding:14px 28px; background:var(--coral); color:white;
  border-radius:50px; text-decoration:none; font-size:.9rem; font-weight:600;
  cursor:pointer; border:none; font-family:'DM Sans',sans-serif;
  transition:transform .3s,box-shadow .3s;
}
.btn-fill:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(232,96,76,.35) }
.btn-ghost {
  display:inline-block; padding:14px 24px; color:var(--ink); background:white;
  border-radius:50px; text-decoration:none; font-size:.9rem; font-weight:600;
  border:1.5px solid rgba(0,0,0,.15); cursor:pointer; font-family:'DM Sans',sans-serif;
  transition:border-color .3s;
}
.btn-ghost:hover { border-color:var(--ink) }

.hero-trust { margin-top:40px; display:grid; grid-template-columns:repeat(2, auto); justify-content:start; align-items:center; gap:18px 34px }
.hero-trust .trust-sep { display:none }
.trust-item { display:flex; align-items:center; gap:8px }
.trust-icon { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:.95rem }
.trust-text strong { display:block; font-size:.8rem; font-weight:600; color:var(--ink) }
.trust-text span { font-size:.75rem; color:var(--ink60) }
.trust-sep { width:1px; height:24px; background:rgba(0,0,0,.1) }
.hero-right { position:relative; z-index:2 }

/* ── Hero "Follow us" floating card (bottom-right of hero) ────── */
.hero-social {
  position:absolute;
  right:0;
  bottom:-52px;        /* dépasse subtilement sous la hero-card pour un effet "deuxième couche" */
  display:flex;
  align-items:center;
  gap:18px;
  padding:16px 22px 16px 18px;
  background:white;
  border-radius:60px;
  box-shadow:0 20px 50px rgba(0,0,0,.12);
  border:1.5px solid rgba(0,0,0,.04);
  z-index:5;
  text-decoration:none;
  /* Entrance animation */
  opacity:0;
  transform:translateY(20px) scale(.9);
  animation:heroSocialIn 1s cubic-bezier(.16,1,.3,1) 1.2s forwards;
}
@keyframes heroSocialIn {
  to { opacity:1; transform:translateY(0) scale(1); }
}
.hero-social-label {
  display:flex;
  flex-direction:column;
  gap:1px;
  padding-left:4px;
  padding-right:8px;
}
.hero-social-label .hero-social-title {
  font-family:'DM Serif Display', serif;
  font-size:1.15rem;
  color:var(--ink);
  line-height:1.1;
}
.hero-social-icons {
  display:flex;
  gap:10px;
}
.hero-social-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:60px; height:60px;
  border-radius:50%;
  background:rgba(0,0,0,.025);
  overflow:hidden;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),
             box-shadow .3s ease,
             background .3s ease;
}
.hero-social-icon picture,
.hero-social-icon img {
  width:100%; height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
}
.hero-social-icon:hover {
  transform:translateY(-3px) scale(1.1) rotate(-3deg);
  background:rgba(0,0,0,.05);
  box-shadow:0 10px 22px rgba(0,0,0,.15);
}
.hero-social-icon:nth-child(2):hover { transform:translateY(-3px) scale(1.1) rotate(3deg); }

/* Continuous gentle pulse on the whole pill to draw the eye */
.hero-social {
  /* Once the entrance animation completes, the pulse takes over */
  animation:heroSocialIn 1s cubic-bezier(.16,1,.3,1) 1.2s forwards,
            heroSocialPulse 3.5s ease-in-out 2.4s infinite;
}
@keyframes heroSocialPulse {
  0%, 100% { box-shadow:0 20px 50px rgba(0,0,0,.12); }
  50%      { box-shadow:0 24px 60px rgba(232,96,76,.18); }
}

/* Mobile: the floating absolute pill doesn't work on small screens —
   it ends up cropped, overflowing, or sitting on top of the dark stats
   section. Switch to a normal flow card below the hero card instead. */
@media (max-width: 1024px) {
  .hero-social {
    position:static;
    margin:24px auto 0;
    right:auto;
    bottom:auto;
    width:fit-content;
    max-width:100%;
    box-sizing:border-box;
    /* Override the animation transform so it lands centered, not offset */
    transform:translateY(20px) scale(.9);
    animation:heroSocialInMobile 1s cubic-bezier(.16,1,.3,1) 1.2s forwards,
              heroSocialPulse 3.5s ease-in-out 2.4s infinite;
  }
  @keyframes heroSocialInMobile {
    to { opacity:1; transform:translateY(0) scale(1); }
  }
}
@media (max-width: 640px) {
  .hero-social {
    padding:12px 18px 12px 12px;
    gap:12px;
    border-radius:50px;
  }
  .hero-social-label .hero-social-title {
    font-size:.95rem;
    white-space:nowrap;  /* keep "Suivez-nous" on a single line */
  }
  .hero-social-icon { width:48px; height:48px; }
}
/* Very narrow phones: make sure nothing overflows */
@media (max-width: 380px) {
  .hero-social {
    padding:10px 14px 10px 10px;
    gap:10px;
  }
  .hero-social-label { padding-left:2px; padding-right:4px; }
  .hero-social-label .hero-social-title { font-size:.9rem; }
  .hero-social-icon { width:42px; height:42px; }
  .hero-social-icons { gap:6px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-social {
    opacity:1;
    transform:translateY(0) scale(1);
    animation:none;
  }
}

.hero-card { background:#FEFAF6; border-radius:28px; overflow:hidden; box-shadow:0 32px 80px rgba(0,0,0,.1) }
/* Visuel hero affiché en entier (ratio naturel) — le bas crème de l'image se fond dans la carte */
.hero-card .hero-card-top--full { height:auto !important; display:block !important; font-size:0 !important; }
.hero-card .hero-card-top--full img { width:100% !important; height:auto !important; display:block; }
/* Bandeau des 4 atouts, en HTML (texte net + traduisible) */
.hero-perks {
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  padding:18px 20px 4px; background:transparent;
}
.hero-perk { display:flex; align-items:center; gap:9px; min-width:0 }
.hero-perk-ic {
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.8rem; line-height:1;
}
.hp-pink { background:#FBDDE0; color:#E0808C } .hp-sun { background:#FCEBBE; color:#E0A63A }
.hp-sky  { background:#D6E9F2; color:#6FA8C4 } .hp-sage{ background:#DCEBDD; color:#7BAE8A }
.hero-perk strong { display:block; font-size:.72rem; font-weight:600; color:var(--ink); line-height:1.25 }
.hero-perk span   { display:block; font-size:.66rem; color:var(--ink60); line-height:1.3; margin-top:1px }
@media (max-width:900px) {
  .hero-perks { grid-template-columns:repeat(2,1fr); gap:12px 10px; padding:14px 16px }
  .hero-perk strong { font-size:.74rem } .hero-perk span { font-size:.68rem }
}
.hero-card-top { height:300px; background:linear-gradient(135deg,#C8E6D4,#7DBFA1); display:flex; align-items:center; justify-content:center; font-size:7rem }
.hero-card-body { padding:24px 28px }
.hero-card-body h3 { font-family:'DM Serif Display',serif; font-size:1.3rem; margin-bottom:4px }
/* Horaires d'ouverture, sous l'adresse : même langage que les pastilles de la carte (icône ronde sauge) */
.hero-hours { display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:5px 14px 5px 5px; border-radius:999px; background:#F3F7F2; border:1px solid rgba(123,174,138,.25); font-size:.78rem; font-weight:600; color:var(--ink); line-height:1.2 }
.hero-hours-ic { width:24px; height:24px; border-radius:50%; background:#DCEBDD; display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; flex:none }
.hero-card-body p { font-size:.85rem; color:var(--ink60) }
.hero-chip { position:absolute; z-index:4; background:white; border-radius:14px; padding:10px 16px; box-shadow:0 8px 28px rgba(0,0,0,.12); font-size:.78rem; font-weight:600; display:flex; align-items:center; gap:8px }
.chip1 { top:-14px; right:-14px; color:var(--sage) }
.chip2 { bottom:-52px; left:-18px; color:var(--sun) }

/* STATS */
#stats { background:var(--ink); padding:0 48px }
.stats-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr) }
.stat-cell { padding:40px 28px; border-right:1px solid rgba(255,255,255,.08) }
.stat-cell:last-child { border-right:none }
.stat-n { font-family:'DM Serif Display',serif; font-size:2.6rem; color:white; display:block; line-height:1; margin-bottom:6px }
.stat-l { font-size:.8rem; color:rgba(255,255,255,.45) }

/* SECTIONS */
.section { padding:100px 48px }
.container { max-width:1200px; margin:0 auto }
.eyebrow { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--coral); display:block; margin-bottom:12px }
.h2 { font-family:'DM Serif Display',serif; font-size:clamp(2rem,4vw,3rem); line-height:1.1; color:var(--ink) }
.h2 em { color:var(--coral); font-style:italic }
.body-text { font-size:1rem; color:var(--ink60); line-height:1.75; font-weight:300; max-width:520px }
.divider { height:1px; background:rgba(0,0,0,.06) }

/* REVEAL */
.rv { opacity:0; transform:translateY(28px); transition:opacity .6s,transform .6s }
.rv.in { opacity:1; transform:none }
.rvl { opacity:0; transform:translateX(-36px); transition:opacity .6s,transform .6s }
.rvl.in { opacity:1; transform:none }
.rvr { opacity:0; transform:translateX(36px); transition:opacity .6s,transform .6s }
.rvr.in { opacity:1; transform:none }

/* ABOUT */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center }
.about-portrait { width:100%; aspect-ratio:4/5; border-radius:28px; background:linear-gradient(160deg,#D4EAD8,#A8CBB0); display:flex; align-items:center; justify-content:center; font-size:8rem; box-shadow:0 40px 100px rgba(0,0,0,.1); position:relative }
/* Calque de clipping interne : contient l'image (parallax GSAP) sans rogner le badge */
.about-portrait-clip { position:absolute; inset:0; border-radius:28px; overflow:hidden; z-index:1 }
.about-badge { position:absolute; bottom:-16px; right:-16px; z-index:3; background:white; border-radius:18px; padding:18px 22px; box-shadow:0 12px 40px rgba(0,0,0,.1) }
.about-badge-lbl { font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink60); margin-bottom:4px }
.about-badge-name { font-family:'DM Serif Display',serif; font-size:1.1rem }
.about-badge-role { font-size:.78rem; color:var(--sage); font-weight:500; margin-top:2px }
.about-quote { margin-top:28px; padding:20px 24px; border-left:3px solid var(--sage); background:var(--sagebg); border-radius:0 12px 12px 0; font-family:'DM Serif Display',serif; font-size:1rem; line-height:1.6; font-style:italic }
.about-quote cite { display:block; margin-top:10px; font-family:'DM Sans',sans-serif; font-size:.75rem; font-style:normal; font-weight:600; color:var(--ink60) }
.pillars { margin-top:32px; display:none }

/* GROUPS */
.groups-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
.group-card { background:white; border-radius:28px; overflow:hidden; transition:transform .4s,box-shadow .4s }
.group-card:hover { transform:translateY(-6px); box-shadow:0 24px 60px rgba(0,0,0,.1) }
.group-top { padding:32px 20px 24px; text-align:center }
.group-emoji { font-size:3.2rem; margin-bottom:14px; display:block }
.group-name { font-family:'DM Serif Display',serif; font-size:1.2rem; margin-bottom:6px }
.group-age { font-size:.75rem; font-weight:700; border-radius:50px; padding:4px 12px; display:inline-block; margin-top:4px }
.group-bottom { padding:16px 20px 24px; border-top:1px solid rgba(0,0,0,.05); font-size:.83rem; color:var(--ink60); line-height:1.6 }

/* ACTIVITIES */
.acts-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start }
.acts-sticky { position:sticky; top:90px }
.acts-partners { margin-top:32px; padding:24px; background:var(--sand); border-radius:28px }
.acts-partners h4 { font-weight:600; font-size:.88rem; margin-bottom:14px }
.partner-tags { display:flex; flex-wrap:wrap; gap:8px }
.ptag { padding:5px 12px; background:white; border-radius:50px; font-size:.75rem; font-weight:500; color:var(--ink60); border:1px solid rgba(0,0,0,.08) }
.acts-list { display:flex; flex-direction:column }
.act-row { display:flex; align-items:flex-start; gap:18px; padding:20px 0; border-bottom:1px solid rgba(0,0,0,.06) }
.act-row:first-child { border-top:1px solid rgba(0,0,0,.06) }
.act-n { font-family:'DM Serif Display',serif; font-size:1rem; color:var(--ink30); min-width:24px; padding-top:2px }
.act-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0 }
.act-body strong { display:block; font-weight:600; color:var(--ink); margin-bottom:3px; font-size:.9rem }
.act-body p { font-size:.83rem; color:var(--ink60); line-height:1.6 }
/* ── Galerie d'activités : images qui défilent, légende posée dessus ── */
.acts-gallery { display:flex; flex-direction:column; gap:22px }
.act-card {
  position:relative; margin:0; border-radius:24px; overflow:hidden;
  aspect-ratio:4/5; background:#EFE8E1;
  box-shadow:0 14px 40px rgba(0,0,0,.10);
  opacity:0; transform:translateY(46px) scale(.965);
  transition:opacity .85s cubic-bezier(.22,.7,.24,1),
             transform .85s cubic-bezier(.22,.7,.24,1),
             box-shadow .35s ease;
}
.act-card.in { opacity:1; transform:none }
.act-card:hover { box-shadow:0 22px 56px rgba(0,0,0,.16) }
/* L'image est plus haute que la carte : la marge sert au parallaxe sans
   jamais laisser apparaître de bord vide. */
.act-card img {
  position:absolute; left:0; width:100%;
  top:-9%; height:118%;
  object-fit:cover; display:block;
  will-change:transform;
}
/* Entrée en cascade du contenu de la légende */
.act-card .act-card-n,
.act-card figcaption strong,
.act-card figcaption p {
  opacity:0; transform:translateY(14px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.7,.24,1);
}
.act-card.in .act-card-n        { opacity:.72; transform:none; transition-delay:.18s }
.act-card.in figcaption strong  { opacity:1;   transform:none; transition-delay:.26s }
.act-card.in figcaption p       { opacity:.9;  transform:none; transition-delay:.34s }
.act-card figcaption {
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:26px 26px 24px;
  color:#fff;
  /* Voile dégradé : la légende reste lisible quelle que soit la photo */
  background:linear-gradient(180deg,
    rgba(12,26,20,0) 0%,
    rgba(12,26,20,.34) 34%,
    rgba(12,26,20,.72) 66%,
    rgba(12,26,20,.90) 100%);
}
/* Pastille emoji en haut à gauche de chaque photo */
.act-card-ic {
  position:absolute; top:20px; left:20px; z-index:3;
  width:54px; height:54px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; line-height:1;
  background:rgba(255,255,255,.94);
  box-shadow:0 6px 20px rgba(10,26,20,.22);
  opacity:0; transform:translateY(-10px) scale(.9);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.7,.24,1);
}
.act-card.in .act-card-ic { opacity:1; transform:none; transition-delay:.12s }
@media (max-width:900px) {
  .act-card-ic { top:14px; left:14px; width:46px; height:46px; font-size:1.25rem; border-radius:14px }
}
.act-card-n {
  display:inline-block; font-family:'DM Serif Display',serif;
  font-size:.9rem; letter-spacing:.08em; color:rgba(255,255,255,.72); margin-bottom:6px;
}
.act-card figcaption strong {
  display:block; font-family:'DM Serif Display',serif; font-weight:400;
  font-size:1.5rem; line-height:1.2; margin-bottom:6px;
}
.act-card figcaption p { font-size:.9rem; line-height:1.55; color:rgba(255,255,255,.9) }
@media (max-width:900px) {
  .act-card { aspect-ratio:3/4 }
  .act-card figcaption { padding:20px }
  .act-card figcaption strong { font-size:1.25rem }
}
@media (prefers-reduced-motion: reduce) {
  .act-card { opacity:1; transform:none; transition:none }
  .act-card img { transition:none; transform:none !important; top:0; height:100% }
  .act-card .act-card-n, .act-card figcaption strong, .act-card figcaption p,
  .act-card .act-card-ic {
    opacity:1; transform:none; transition:none;
  }
  .act-card.in .act-card-n { opacity:.72 }
  .act-card.in figcaption p { opacity:.9 }
}

/* SPACES */
.spaces-hd .h2 { color:white }
.spaces-hd p { color:rgba(255,255,255,.5); margin:14px auto 0; max-width:480px; font-size:1rem; line-height:1.7; font-weight:300 }
.bento { display:grid; grid-template-columns:repeat(12,1fr); gap:14px }
.sp { border-radius:28px; overflow:hidden; position:relative; min-height:240px; display:flex; flex-direction:column; justify-content:flex-end; padding:26px; transition:transform .4s }
.sp:hover { transform:scale(1.01) }
.sp.a { grid-column:span 7; min-height:360px; background:linear-gradient(135deg,#3A7D5C,#2A5C42) }
.sp.b { grid-column:span 5; min-height:360px; background:linear-gradient(135deg,#B7956A,#8F7050) }
.sp.c { grid-column:span 5; min-height:360px; background:linear-gradient(135deg,#C85250,#A03835) }
.sp.d { grid-column:span 7; min-height:360px; background:linear-gradient(135deg,#4A7DA8,#2E5A85) }
.sp-lbl { font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.5); margin-bottom:5px }
.sp-title { font-family:'DM Serif Display',serif; font-size:1.4rem; color:white }
.sp.a .sp-title { font-size:1.7rem }
.sp-desc { font-size:.8rem; color:rgba(255,255,255,.65); margin-top:7px; line-height:1.5 }
.sp-num { position:absolute; top:20px; right:20px; font-family:'DM Serif Display',serif; font-size:3rem; color:rgba(255,255,255,.1); line-height:1 }

/* FOOD */
.food-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center }
.food-cards { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.food-card { background:white; border-radius:28px; padding:24px; transition:transform .3s }
.food-card:hover { transform:translateY(-4px) }
.food-card.wide { grid-column:span 2; background:var(--sage) }
.food-card.wide .fc-n,.food-card.wide .fc-d,.food-card.wide .fc-i { color:white }
.food-card.wide .fc-d { color:rgba(255,255,255,.8) }
.fc-i { font-size:1.8rem; margin-bottom:12px; display:block }
.fc-n { font-weight:600; font-size:.9rem; color:var(--ink); margin-bottom:4px }
.fc-d { font-size:.8rem; color:var(--ink60); line-height:1.5 }
.food-pts { list-style:none; display:flex; flex-direction:column; gap:12px; margin-top:28px }
.food-pts li { display:flex; align-items:flex-start; gap:10px; font-size:.88rem; color:var(--ink60); line-height:1.5 }
.food-pts li::before { content:'✓'; width:20px; height:20px; border-radius:50%; background:var(--sage); color:white; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.7rem; font-weight:700; margin-top:1px }

/* APP */
.app-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center }
.phone-wrap { max-width:280px; margin:0 auto }
.phone-frame { background:var(--ink); border-radius:36px; padding:12px; box-shadow:0 40px 80px rgba(0,0,0,.2) }
.phone-screen { background:#121212; border-radius:26px; overflow:hidden }
.ph-top { display:flex; justify-content:space-between; align-items:center; padding:14px 16px 6px }
.ph-logo { font-family:'DM Serif Display',serif; font-size:.9rem; color:white }
.ph-card { margin:0 10px 10px; background:#1E1E1E; border-radius:14px; padding:12px; border:1px solid rgba(255,255,255,.05) }
.ph-head { display:flex; align-items:center; gap:8px; margin-bottom:8px }
.ph-av { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.85rem }
.ph-name { font-size:.72rem; font-weight:600; color:rgba(255,255,255,.9) }
.ph-time { font-size:.62rem; color:rgba(255,255,255,.35); margin-left:auto }
.ph-msg { font-size:.72rem; color:rgba(255,255,255,.65); line-height:1.5 }
.ph-photos { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:0 10px 10px }
.ph-photo { height:66px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.6rem }
.app-feats { display:flex; flex-direction:column; gap:18px; margin-top:32px }
.app-feat { display:flex; align-items:flex-start; gap:14px }
.app-feat-icon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0 }
.app-feat strong { display:block; font-weight:600; margin-bottom:2px; color:var(--ink); font-size:.88rem }
.app-feat p { font-size:.8rem; color:var(--ink60); line-height:1.5 }

/* TESTIMONIALS */
.testi-hd { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px }
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.tc { background:white; border-radius:28px; padding:28px; display:flex; flex-direction:column; gap:18px; transition:transform .4s,box-shadow .4s }
.tc:hover { transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,.07) }
.tc-stars { color:var(--sun); font-size:.85rem; letter-spacing:2px }
.tc-text { font-size:.88rem; color:var(--ink60); line-height:1.7; font-style:italic; flex:1 }
.tc-foot { display:flex; align-items:center; gap:12px; padding-top:18px; border-top:1px solid rgba(0,0,0,.06) }
.tc-av { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; flex-shrink:0 }
.tc-name strong { display:block; font-weight:600; font-size:.85rem; color:var(--ink) }
.tc-name span { font-size:.75rem; color:var(--ink60) }

/* ═══════════════════════════════════════════════════════════════════
   TESTIMONIALS — Hero stats band + Google trophy badge
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero stats band (3 cards: 5,0 · 22 · 100%) ───────────────── */
.testi-stats {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  max-width:780px;
  margin:0 auto 36px;
}
.testi-stat {
  position:relative;
  padding:24px 18px;
  border-radius:22px;
  background:white;
  border:1px solid rgba(0,0,0,.05);
  text-align:center;
  box-shadow:0 4px 18px rgba(0,0,0,.03);
  /* Hidden until in view */
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    transform .7s cubic-bezier(.16,1,.3,1),
    box-shadow .35s ease;
}
.testi-stats.is-visible .testi-stat { opacity:1; transform:translateY(0); }
.testi-stats.is-visible .testi-stat:nth-child(1) { transition-delay:.05s; }
.testi-stats.is-visible .testi-stat:nth-child(2) { transition-delay:.18s; }
.testi-stats.is-visible .testi-stat:nth-child(3) { transition-delay:.31s; }
.testi-stat:hover {
  transform:translateY(-4px) !important;
  box-shadow:0 14px 32px rgba(0,0,0,.07);
}
.testi-stat-ico {
  font-size:1.5rem;
  margin-bottom:8px;
  display:block;
  line-height:1;
}
.testi-stat-num {
  font-family:'DM Serif Display', serif;
  font-size:2.4rem;
  line-height:1;
  margin-bottom:6px;
  font-feature-settings:'tnum';
}
.testi-stat:nth-child(1) .testi-stat-num { color:#FBBC04; }
.testi-stat:nth-child(2) .testi-stat-num { color:var(--coral); }
.testi-stat:nth-child(3) .testi-stat-num { color:var(--sage); }
.testi-stat-label {
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink60);
  text-transform:uppercase;
}
/* Coloured top border accent like the group counters */
.testi-stat:nth-child(1) { border-top:3px solid #FBBC04; }
.testi-stat:nth-child(2) { border-top:3px solid var(--coral); }
.testi-stat:nth-child(3) { border-top:3px solid var(--sage); }

@media (max-width: 640px) {
  .testi-stats { gap:10px; margin-bottom:28px; }
  .testi-stat { padding:18px 8px; border-radius:18px; }
  .testi-stat-num { font-size:1.7rem; }
  .testi-stat-ico { font-size:1.2rem; }
  .testi-stat-label { font-size:.62rem; }
}

/* ── Google badge — TROPHY version ──────────────────────────────
   The badge is the centerpiece: large rating, halo behind it,
   stars that light up one by one when the section enters view. */
.google-badge {
  position:relative;
  display:flex;
  align-items:center;
  gap:28px;
  max-width:600px;
  margin:0 auto 56px;
  padding:30px 36px;
  background:white;
  border-radius:28px;
  border:1.5px solid rgba(0,0,0,.05);
  box-shadow:0 12px 40px rgba(0,0,0,.06);
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  /* Hidden until scrolled into view */
  opacity:0;
  transform:translateY(20px) scale(.95);
  transition:
    opacity .8s cubic-bezier(.16,1,.3,1) .35s,
    transform .8s cubic-bezier(.16,1,.3,1) .35s,
    box-shadow .4s ease,
    border-color .4s ease;
}
.google-badge.is-visible {
  opacity:1;
  transform:translateY(0) scale(1);
}
/* Golden halo behind the badge */
.google-badge::before {
  content:'';
  position:absolute;
  inset:-30px;
  background:radial-gradient(ellipse at center,
    rgba(251,188,4,.18) 0%,
    rgba(251,188,4,.08) 30%,
    transparent 65%);
  z-index:-1;
  border-radius:50%;
  opacity:0;
  transition:opacity 1s ease 1s;
  pointer-events:none;
}
.google-badge.is-visible::before { opacity:1; }
.google-badge:hover {
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 20px 50px rgba(0,0,0,.08);
  border-color:rgba(251,188,4,.4);
}

/* Logo Google — bigger, with subtle continuous pulse once visible */
.google-badge-logo {
  flex-shrink:0;
  width:64px; height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.google-badge-logo svg {
  width:100%; height:100%;
  display:block;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.08));
}

.google-badge-content {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.google-badge-top {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.google-badge-rating {
  font-family:'DM Serif Display', serif;
  font-size:2.4rem;
  line-height:1;
  color:var(--ink);
  font-feature-settings:'tnum';
}
/* Star container — each star fades in one by one */
.google-badge-stars {
  display:inline-flex;
  gap:3px;
  font-size:1.4rem;
  line-height:1;
  color:rgba(0,0,0,.08);  /* default unlit grey */
}
.google-badge-stars .gb-star {
  opacity:.18;
  color:rgba(0,0,0,.4);
  transform:scale(.7);
  transition:opacity .35s ease, color .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.google-badge.is-visible .gb-star {
  opacity:1;
  color:#FBBC04;
  transform:scale(1);
}
/* Stagger each star — they light up sequentially when badge becomes visible */
.google-badge.is-visible .gb-star:nth-child(1) { transition-delay:.8s; }
.google-badge.is-visible .gb-star:nth-child(2) { transition-delay:.95s; }
.google-badge.is-visible .gb-star:nth-child(3) { transition-delay:1.10s; }
.google-badge.is-visible .gb-star:nth-child(4) { transition-delay:1.25s; }
.google-badge.is-visible .gb-star:nth-child(5) { transition-delay:1.40s; }

.google-badge-count {
  font-size:.9rem;
  color:var(--ink60);
  font-weight:500;
}
.google-badge-count strong { color:var(--ink); font-weight:700; }
.google-badge-cta {
  flex-shrink:0;
  font-size:.85rem;
  font-weight:600;
  color:var(--coral);
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  padding:10px 20px;
  border-radius:50px;
  background:rgba(232,96,76,.08);
  transition:background .3s ease, transform .3s ease;
}
.google-badge-cta::after {
  content:'→';
  display:inline-block;
  transition:transform .3s ease;
}
.google-badge:hover .google-badge-cta {
  background:var(--coral);
  color:white;
}
.google-badge:hover .google-badge-cta::after {
  transform:translateX(4px);
}

@media (max-width: 640px) {
  .google-badge {
    gap:18px;
    padding:22px 22px;
    flex-wrap:wrap;
    margin-bottom:40px;
  }
  .google-badge-logo { width:48px; height:48px; }
  .google-badge-rating { font-size:1.9rem; }
  .google-badge-stars { font-size:1.1rem; }
  .google-badge-cta {
    width:100%;
    justify-content:center;
    text-align:center;
    margin-top:8px;
  }
}

/* ── Empty state — friendlier, animated ───────────────────────── */
.testi-empty {
  text-align:center;
  padding:48px 24px;
  max-width:520px;
  margin:0 auto;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1) .8s, transform .7s cubic-bezier(.16,1,.3,1) .8s;
}
.testi-empty.is-visible {
  opacity:1;
  transform:translateY(0);
}
.testi-empty-ico {
  font-size:3.4rem;
  margin-bottom:18px;
  line-height:1;
  display:inline-block;
  animation:emptyFloat 4s ease-in-out infinite;
}
@keyframes emptyFloat {
  0%, 100% { transform:translateY(0); }
  50%      { transform:translateY(-6px); }
}
.testi-empty h3 {
  font-family:'DM Serif Display', serif;
  font-size:1.6rem;
  margin-bottom:12px;
  color:var(--ink);
}
.testi-empty p {
  color:var(--ink60);
  line-height:1.65;
  margin-bottom:28px;
  font-size:.95rem;
}
.testi-empty-btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  border-radius:50px;
  background:var(--ink);
  color:white;
  border:none;
  font-size:.92rem;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background .3s ease;
}
.testi-empty-btn:hover {
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  background:var(--coral);
}

@media (prefers-reduced-motion: reduce) {
  .testi-stat,
  .google-badge,
  .testi-empty {
    opacity:1;
    transform:none;
    transition:box-shadow .3s ease;
  }
  .google-badge.is-visible .gb-star { transition:none; }
  .google-badge::before { opacity:1 !important; transition:none; }
  .testi-empty-ico { animation:none; }
}

/* ── Review submission modal ─────────────────────────────────── */
.review-modal-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(20,20,20,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:reviewFadeIn .25s ease;
}
@keyframes reviewFadeIn { from { opacity:0 } to { opacity:1 } }
.review-modal {
  background:white;
  border-radius:24px;
  padding:40px;
  max-width:520px; width:100%;
  max-height:90vh;
  overflow-y:auto;
  position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.25);
  animation:reviewSlideUp .35s cubic-bezier(.16,1,.3,1);
}
@keyframes reviewSlideUp {
  from { opacity:0; transform:translateY(30px) scale(.96); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.review-modal h3 {
  font-family:'DM Serif Display',serif;
  font-size:1.7rem;
  color:var(--ink);
  margin-bottom:8px;
  padding-right:32px;
}
.review-modal-sub {
  font-size:.88rem;
  color:var(--ink60);
  margin-bottom:24px;
  line-height:1.5;
}
.review-modal-close {
  position:absolute; top:16px; right:16px;
  background:rgba(0,0,0,.05);
  border:none;
  width:36px; height:36px;
  border-radius:50%;
  cursor:pointer;
  font-size:1.1rem;
  color:var(--ink60);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.review-modal-close:hover { background:rgba(0,0,0,.1); }

.review-field { margin-bottom:18px; }
.review-field label {
  display:block;
  font-size:.78rem;
  font-weight:700;
  color:var(--ink);
  margin-bottom:8px;
  letter-spacing:.02em;
}
.review-field select,
.review-field textarea {
  width:100%; box-sizing:border-box;
  padding:12px 14px;
  border:1.5px solid rgba(0,0,0,.1);
  border-radius:12px;
  font-size:.95rem;
  font-family:inherit;
  color:var(--ink);
  transition:border-color .2s ease;
  background:white;
}
.review-field select:focus,
.review-field textarea:focus {
  outline:none;
  border-color:var(--coral);
}
.review-field textarea {
  resize:vertical;
  min-height:120px;
  line-height:1.5;
}
.review-charcount {
  font-size:.7rem;
  color:var(--ink60);
  text-align:right;
  margin-top:4px;
}

/* Star rating selector */
.review-stars {
  display:flex; gap:6px;
}
.review-star {
  background:none; border:none;
  cursor:pointer;
  font-size:2.2rem;
  color:rgba(0,0,0,.12);
  padding:0;
  transition:color .2s ease, transform .15s ease;
  line-height:1;
}
.review-star:hover {
  transform:scale(1.15);
}
.review-star.is-active,
.review-star.is-hover {
  color:var(--sun);
}

.review-error {
  background:rgba(232,96,76,.08);
  color:var(--coral);
  padding:10px 14px;
  border-radius:10px;
  font-size:.85rem;
  margin-bottom:14px;
  display:none;
}
.review-error.show { display:block; }

.review-actions {
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:24px;
}
.review-btn-primary,
.review-btn-ghost {
  padding:11px 22px;
  border-radius:50px;
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
  border:none;
  font-family:inherit;
  transition:all .2s ease;
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
}
.review-btn-primary {
  background:var(--coral);
  color:white;
}
.review-btn-primary:hover { background:#d05545; }
.review-btn-primary:disabled { opacity:.6; cursor:wait; }
.review-btn-primary.is-loading .review-btn-label { opacity:0; }
.review-btn-primary.is-loading .auth-spinner { display:inline-block; }
.review-btn-ghost {
  background:transparent;
  color:var(--ink60);
}
.review-btn-ghost:hover {
  background:rgba(0,0,0,.04);
  color:var(--ink);
}

/* Info cards (auth required, no child, success) */
.review-info-card {
  text-align:center;
  padding:24px 20px;
  background:rgba(0,0,0,.025);
  border-radius:16px;
}
.review-info-success { background:rgba(123,174,138,.1); }
.review-info-ico {
  font-size:2.5rem;
  margin-bottom:12px;
  line-height:1;
}
.review-info-card h4 {
  font-family:'DM Serif Display',serif;
  font-size:1.3rem;
  color:var(--ink);
  margin-bottom:8px;
}
.review-info-card p {
  font-size:.9rem;
  color:var(--ink60);
  line-height:1.5;
  margin-bottom:16px;
}
.review-info-card .review-btn-primary {
  display:inline-block;
  text-decoration:none;
}

/* Loading & empty states for the public reviews grid */
.testi-loading {
  font-size:.9rem;
  color:var(--ink60);
}

@media (max-width: 600px) {
  .review-modal { padding:28px 22px; border-radius:20px; }
  .review-modal h3 { font-size:1.4rem; }
  .review-star { font-size:1.9rem; }
}

/* CTA */
#cta { background:var(--coral); padding:90px 48px; position:relative; overflow:hidden }
#cta::before { content:''; position:absolute; width:600px; height:600px; border-radius:50%; background:rgba(255,255,255,.07); top:-250px; right:-150px; pointer-events:none }
.cta-grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1.2fr 1fr; gap:64px; align-items:center; position:relative; z-index:1 }
.cta-h2 { font-family:'DM Serif Display',serif; font-size:clamp(2rem,4vw,3rem); color:white; line-height:1.15 }
.cta-sub { font-size:.95rem; color:rgba(255,255,255,.85); margin-top:10px; line-height:1.6; font-weight:300 }
.cta-right { display:flex; flex-direction:column; gap:14px; align-items:flex-start }
.btn-white { display:inline-flex; align-items:center; gap:8px; background:white; color:var(--coral); padding:13px 26px; border-radius:50px; font-weight:600; font-size:.88rem; text-decoration:none; transition:transform .3s,box-shadow .3s; white-space:nowrap }
.btn-white:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.18) }
.cta-contacts { display:flex; flex-direction:column; gap:10px }
.cta-contact { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.85); text-decoration:none; font-size:.85rem; transition:color .2s }
.cta-contact:hover { color:white }
.cta-contact-icon { width:32px; height:32px; background:rgba(255,255,255,.15); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:.9rem }

/* Map (Leaflet) */
.cta-map-wrap { position:relative; border-radius:20px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.15); height:300px; background:rgba(255,255,255,.08); transition:transform .35s ease, box-shadow .35s ease }
.cta-map-wrap:hover { transform:translateY(-3px); box-shadow:0 24px 60px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.2) }
.cta-map { width:100%; height:100%; background:#e6e2dc }
.cta-map .leaflet-control-attribution { font-size:9px; background:rgba(255,255,255,.7); color:#666; padding:1px 5px }
.cta-map .leaflet-control-attribution a { color:#888 }
.cta-map .leaflet-control-zoom a { background:white; color:var(--coral); border-color:rgba(0,0,0,.08); font-weight:600 }
.cta-map .leaflet-control-zoom a:hover { background:#fff7f5; color:var(--coral) }
/* Pin Kids' Island — image PNG custom */
.ki-pin-img { animation:kiPinFloat 2.6s ease-in-out infinite; transition:filter .3s ease; filter:drop-shadow(0 4px 8px rgba(0,0,0,.28)); }
.ki-pin-img:hover { filter:drop-shadow(0 6px 12px rgba(0,0,0,.4)) brightness(1.05); }
@keyframes kiPinFloat { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-4px) } }
.ki-popup .leaflet-popup-content-wrapper { background:white; border-radius:14px; box-shadow:0 12px 32px rgba(0,0,0,.18); padding:4px }
.ki-popup .leaflet-popup-content { margin:14px 16px; font-family:'DM Sans',sans-serif; font-size:.85rem; line-height:1.5; color:var(--ink) }
.ki-popup .leaflet-popup-content strong { display:block; font-family:'DM Serif Display',serif; font-size:1rem; color:var(--coral); margin-bottom:4px; font-weight:400 }
.ki-popup .leaflet-popup-content a { color:var(--coral); text-decoration:none; font-weight:500; font-size:.8rem; display:inline-block; margin-top:8px }
.ki-popup .leaflet-popup-content a:hover { text-decoration:underline }
.ki-popup .leaflet-popup-tip { background:white }

/* ═══════════════════════════════════════════════════
   KI GALLERY — Lightbox des espaces (clic sur cartes bento)
   ═══════════════════════════════════════════════════ */
#ki-gallery {
  position:fixed; inset:0; z-index:10000;
  background:linear-gradient(135deg, var(--kg-c1, #0D1F1A) 0%, rgba(0,0,0,.85) 50%, var(--kg-c2, #1A3D2E) 100%);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .45s ease, visibility .45s ease, background .6s ease;
  overflow-y:auto;
}

/* ── Ambient particles (style imm.) ──────────────── */
#ki-gallery .kg-ptcls {
  position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0;
}
#ki-gallery .kg-pt {
  position:absolute; border-radius:50%;
  animation:kgPf linear infinite; opacity:0;
}
@keyframes kgPf {
  0%   { transform:translateY(0); opacity:0; }
  10%  { opacity:.5; }
  90%  { opacity:.2; }
  100% { transform:translateY(-100vh); opacity:0; }
}

/* ── Drift emojis (decorative) ───────────────────── */
#ki-gallery .kg-drift {
  position:fixed; pointer-events:none; z-index:1;
  font-size:3rem;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.3));
  animation:kgDrift 22s linear infinite;
  opacity:0;
  transition:opacity .8s ease .3s;
}
#ki-gallery.is-open .kg-drift { opacity:.55; }
#ki-gallery .kg-drift.d1 { top:12%; animation-duration:24s; }
#ki-gallery .kg-drift.d2 { top:48%; animation-duration:30s; animation-delay:-9s; font-size:2.4rem; }
#ki-gallery .kg-drift.d3 { top:78%; animation-duration:34s; animation-delay:-16s; font-size:2.8rem; }
@keyframes kgDrift {
  0%   { left:-10%; transform:translateY(0) rotate(-8deg); }
  50%  { transform:translateY(-25px) rotate(8deg); }
  100% { left:110%; transform:translateY(0) rotate(-8deg); }
}

#ki-gallery.is-open {
  opacity:1; visibility:visible; pointer-events:auto;
}
.kg-inner {
  max-width:1200px; margin:0 auto;
  padding:64px 32px 80px;
  position:relative;
  z-index:2;
  transform:translateY(20px);
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
#ki-gallery.is-open .kg-inner {
  transform:translateY(0);
}
.kg-close {
  position:fixed; top:20px; right:20px; z-index:5;
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:white; font-size:1.5rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s, transform .25s, border-color .25s;
}
.kg-close:hover { background:var(--kg-accent, #F47D60); border-color:var(--kg-accent, #F47D60); transform:rotate(90deg); }
.kg-header { text-align:center; margin-bottom:40px; }
.kg-eyebrow {
  display:inline-block; font-size:.7rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--kg-accent, #F47D60); margin-bottom:14px;
  opacity:0; transform:translateY(-10px);
  transition:opacity .5s ease, transform .5s ease;
  transition-delay:.15s;
}
.kg-title {
  font-family:'DM Serif Display',serif;
  font-size:clamp(1.8rem, 4vw, 2.8rem);
  color:white; line-height:1.1; margin:0;
  opacity:0; transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:.25s;
}
.kg-sub {
  margin-top:14px; color:rgba(255,255,255,.6);
  font-size:.95rem; line-height:1.6; font-weight:300;
  max-width:560px; margin-left:auto; margin-right:auto;
  opacity:0; transform:translateY(15px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:.4s;
}
#ki-gallery.is-open .kg-eyebrow,
#ki-gallery.is-open .kg-title,
#ki-gallery.is-open .kg-sub { opacity:1; transform:translateY(0); }
.kg-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:14px;
  max-width:1100px;
  margin:0 auto;
}
/* Adaptive layout — fewer photos = larger cards filling the space */
.kg-grid.kg-count-1 {
  grid-template-columns:1fr;
  max-width:720px;
}
.kg-grid.kg-count-1 .kg-item { aspect-ratio:16/10; }
.kg-grid.kg-count-2 {
  grid-template-columns:1fr 1fr;
  max-width:900px;
  gap:18px;
}
.kg-grid.kg-count-2 .kg-item { aspect-ratio:4/5; }
.kg-grid.kg-count-3 {
  grid-template-columns:repeat(3, 1fr);
  max-width:1000px;
}
.kg-grid.kg-count-3 .kg-item { aspect-ratio:4/5; }
.kg-grid.kg-count-4 {
  grid-template-columns:repeat(2, 1fr);
  max-width:900px;
  gap:18px;
}
.kg-grid.kg-count-4 .kg-item { aspect-ratio:4/3; }
.kg-item {
  position:relative; aspect-ratio:4/3;
  border-radius:14px; overflow:hidden;
  cursor:pointer; background:rgba(255,255,255,.04);
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
  opacity:0; transform:translateY(20px) scale(.96);
  animation:kgItemIn .5s cubic-bezier(.16,1,.3,1) forwards;
}
#ki-gallery.is-open .kg-item:nth-child(1)  { animation-delay:.10s }
#ki-gallery.is-open .kg-item:nth-child(2)  { animation-delay:.16s }
#ki-gallery.is-open .kg-item:nth-child(3)  { animation-delay:.22s }
#ki-gallery.is-open .kg-item:nth-child(4)  { animation-delay:.28s }
#ki-gallery.is-open .kg-item:nth-child(5)  { animation-delay:.34s }
#ki-gallery.is-open .kg-item:nth-child(6)  { animation-delay:.40s }
#ki-gallery.is-open .kg-item:nth-child(7)  { animation-delay:.46s }
#ki-gallery.is-open .kg-item:nth-child(8)  { animation-delay:.52s }
@keyframes kgItemIn {
  to { opacity:1; transform:translateY(0) scale(1); }
}
.kg-item img { width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1); }
.kg-item:hover { transform:translateY(-4px); box-shadow:0 12px 32px color-mix(in srgb, var(--kg-accent, #F47D60) 35%, transparent); }
.kg-item:hover img { transform:scale(1.06); }
.kg-item::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, transparent 60%, color-mix(in srgb, var(--kg-accent, #F47D60) 20%, transparent) 100%);
  opacity:0; transition:opacity .3s;
  pointer-events:none;
}
.kg-item:hover::after { opacity:1; }
.kg-cap {
  position:absolute; left:14px; bottom:12px; right:14px;
  color:white; font-size:.78rem; line-height:1.3;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
  opacity:0; transform:translateY(8px);
  transition:opacity .3s, transform .3s;
  pointer-events:none;
}
.kg-item:hover .kg-cap { opacity:1; transform:translateY(0); }

/* ── Contextual details (chips style imm.) ──────── */
.kg-details {
  max-width:900px;
  margin:48px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1) .55s, transform .7s cubic-bezier(.16,1,.3,1) .55s;
}
#ki-gallery.is-open .kg-details { opacity:1; transform:translateY(0); }
.kg-det {
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  transition:background .3s, border-color .3s, transform .3s;
}
.kg-det:hover {
  background:rgba(255,255,255,.1);
  border-color:color-mix(in srgb, var(--kg-accent, #F47D60) 40%, transparent);
  transform:translateY(-2px);
}
.kg-det-icon {
  width:42px; height:42px; flex-shrink:0;
  border-radius:11px;
  background:color-mix(in srgb, var(--kg-accent, #F47D60) 22%, rgba(255,255,255,.05));
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem;
}
.kg-det-text {
  color:rgba(255,255,255,.85);
  font-size:.88rem;
  font-weight:400;
  line-height:1.4;
}

/* Zoom on click — full image overlay */
.kg-zoom {
  position:fixed; inset:0; z-index:10001;
  background:rgba(0,0,0,.96);
  display:flex; align-items:center; justify-content:center;
  padding:32px;
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
  cursor:zoom-out;
}
.kg-zoom.is-open { opacity:1; visibility:visible; }
.kg-zoom img {
  max-width:100%; max-height:100%;
  object-fit:contain; border-radius:8px;
  box-shadow:0 30px 60px rgba(0,0,0,.5);
  transform:scale(.9);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.kg-zoom.is-open img { transform:scale(1); }
.kg-zoom-nav {
  position:fixed; top:50%; transform:translateY(-50%);
  width:54px; height:54px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  color:white; font-size:1.4rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s, border-color .25s;
  z-index:1;
}
.kg-zoom-nav:hover { background:var(--kg-accent, #F47D60); border-color:var(--kg-accent, #F47D60); }
.kg-zoom-prev { left:24px; }
.kg-zoom-next { right:24px; }
.kg-zoom-counter {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.7); font-size:.85rem; letter-spacing:.05em;
  background:rgba(0,0,0,.4); padding:8px 16px; border-radius:50px;
  border:1px solid rgba(255,255,255,.1);
}

/* Click hint on bento cards */
.sp { cursor:pointer; }
.sp::after {
  content:'⤢';
  position:absolute; top:18px; left:18px;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.12); backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  color:white; display:flex; align-items:center; justify-content:center;
  font-size:1rem; opacity:0; transform:scale(.7);
  transition:opacity .3s, transform .3s, background .25s;
  pointer-events:none; z-index:3;
}
.sp:hover::after { opacity:1; transform:scale(1); background:#F47D60; }
/* Per-card hint color hint */
.sp[data-gallery="b1"]:hover::after { background:#7BAE8A; }
.sp[data-gallery="b2"]:hover::after { background:#C3B1E1; }
.sp[data-gallery="b3"]:hover::after { background:#4B9CD3; }
.sp[data-gallery="b4"]:hover::after { background:#7BAE8A; }

@media (max-width:768px) {
  .kg-inner { padding:56px 16px 64px; }
  .kg-grid { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
  .kg-grid.kg-count-1 { grid-template-columns:1fr; }
  .kg-grid.kg-count-2 { grid-template-columns:1fr 1fr; gap:10px; }
  .kg-grid.kg-count-3 { grid-template-columns:repeat(2, 1fr); }
  .kg-grid.kg-count-4 { grid-template-columns:repeat(2, 1fr); gap:10px; }
  .kg-details { grid-template-columns:1fr; gap:10px; margin-top:32px; }
  .kg-det { padding:12px 14px; }
  .kg-det-icon { width:36px; height:36px; font-size:1rem; }
  .kg-det-text { font-size:.83rem; }
  .kg-zoom-nav { width:44px; height:44px; }
  .kg-zoom-prev { left:8px; }
  .kg-zoom-next { right:8px; }
  .sp::after { opacity:.7; transform:scale(1); top:14px; left:14px; width:32px; height:32px; font-size:.85rem; }
}

/* FOOTER */
footer { background:var(--ink); padding:56px 48px 28px; color:rgba(255,255,255,.4) }
.footer-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:48px; margin-bottom:40px }
.footer-brand p { font-size:.83rem; line-height:1.7; margin-top:14px; max-width:240px }
.footer-col h5 { font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.3); margin-bottom:16px }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:9px }
.footer-col ul a { color:rgba(255,255,255,.5); text-decoration:none; font-size:.83rem; transition:color .2s }
.footer-col ul a:hover { color:white }
.footer-legal {
  display:flex; justify-content:center; align-items:center; gap:12px;
  padding:22px 0 0; font-size:.86rem; flex-wrap:wrap;
}
.footer-legal a { color:rgba(255,255,255,.75); text-decoration:none; transition:color .25s ease }
.footer-legal a:hover { color:#fff; text-decoration:underline }
.footer-legal span { color:rgba(255,255,255,.35) }
.footer-bottom { max-width:1200px; margin:0 auto; border-top:1px solid rgba(255,255,255,.07); padding-top:24px; display:flex; justify-content:space-between; font-size:.78rem }
/* Signature du créateur du site, tout en bas de l'accueil */
.ki-credit{max-width:1200px;margin:18px auto 0;display:flex;justify-content:center}
.ki-credit a{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;color:rgba(255,255,255,.42);text-decoration:none;letter-spacing:.01em;transition:color .25s}
.ki-credit a img{width:18px;height:auto;opacity:.6;filter:saturate(.6);transition:opacity .25s,filter .25s}
.ki-credit a:hover,.ki-credit a:focus-visible{color:rgba(255,255,255,.85)}
.ki-credit a:hover img,.ki-credit a:focus-visible img{opacity:1;filter:none}
.ki-credit a:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:4px;border-radius:4px}
.ki-credit b{font-weight:600;color:rgba(255,255,255,.6)}

/* ── Footer "Suivez-nous" social block ──────────────────────── */
.footer-social { margin-top:22px; }
.footer-social h5 {
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(255,255,255,.3);
  margin-bottom:14px;
  font-weight:600;
}
.footer-social-row {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.footer-social-link {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px 8px 8px;
  border-radius:50px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  text-decoration:none;
  color:rgba(255,255,255,.7);
  font-size:.82rem;
  font-weight:600;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),
             background .3s ease,
             border-color .3s ease,
             color .3s ease;
}
.footer-social-link picture {
  display:inline-block;
  width:32px; height:32px;
  border-radius:50%;
  overflow:hidden;
  background:white;
  flex-shrink:0;
}
.footer-social-link img {
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}
.footer-social-link:hover {
  transform:translateY(-3px);
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.18);
  color:white;
}

/* ═══════════════════════════════
   MODAL — display:none/flex (comme le test qui marche)
═══════════════════════════════ */
#modal-overlay {
  display:none; position:fixed; inset:0; z-index:900;
  background:rgba(28,28,30,.6); align-items:center; justify-content:center; padding:20px;
}
#modal-overlay.show { display:flex }
#modal {
  background:white; border-radius:28px; overflow:hidden;
  display:grid; grid-template-columns:300px 1fr;
  max-width:780px; width:100%; box-shadow:0 40px 100px rgba(0,0,0,.25);
  max-height:90vh; overflow-y:auto; position:relative;
}
.modal-close {
  position:absolute; top:16px; right:16px; z-index:10;
  width:34px; height:34px; border-radius:50%; border:none;
  background:rgba(0,0,0,.08); color:var(--ink); font-size:.85rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.modal-close:hover { background:rgba(0,0,0,.15) }
.modal-left { background:var(--ink); padding:40px 28px; display:flex; flex-direction:column }
.modal-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.1); border-radius:50px; padding:5px 12px; font-size:.7rem; font-weight:700; color:rgba(255,255,255,.7); letter-spacing:.08em; text-transform:uppercase; width:fit-content; margin-bottom:18px }
.modal-h3 { font-family:'DM Serif Display',serif; font-size:1.8rem; color:white; line-height:1.1; margin-bottom:12px }
.modal-sub { font-size:.83rem; color:rgba(255,255,255,.6); line-height:1.65; margin-bottom:28px }
.modal-infos { display:flex; flex-direction:column; gap:12px; margin-top:auto }
.minfo { display:flex; align-items:flex-start; gap:10px; font-size:.78rem; color:rgba(255,255,255,.65); line-height:1.5; text-decoration:none; transition:color .2s }
.minfo:hover { color:rgba(255,255,255,.9) }
.modal-right { padding:40px 32px; overflow-y:auto }
.form-title { font-family:'DM Serif Display',serif; font-size:1.2rem; color:var(--ink); margin-bottom:22px }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.form-group { display:flex; flex-direction:column; gap:5px; margin-bottom:12px }
.form-group label { font-size:.72rem; font-weight:700; color:var(--ink60); text-transform:uppercase; letter-spacing:.06em }
.form-group input,.form-group select,.form-group textarea { border:1.5px solid rgba(0,0,0,.1); border-radius:10px; padding:10px 13px; font-family:'DM Sans',sans-serif; font-size:.875rem; color:var(--ink); background:white; outline:none; width:100% }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:var(--sage) }
.form-group textarea { resize:vertical; min-height:76px }
.form-error { font-size:.8rem; color:var(--coral); min-height:18px; margin-bottom:4px }
.modal-submit { width:100%; padding:14px; background:var(--coral); color:white; border:none; border-radius:10px; font-family:'DM Sans',sans-serif; font-weight:600; font-size:.9rem; cursor:pointer }
.modal-submit:hover { background:#d44e3c }
.form-note { font-size:.73rem; color:var(--ink30); text-align:center; margin-top:10px }
.success-wrap { text-align:center; padding:28px 0 }
.success-wrap .ck { font-size:3rem; margin-bottom:14px }
.success-wrap h4 { font-family:'DM Serif Display',serif; font-size:1.4rem; margin-bottom:10px }
.success-wrap p { font-size:.85rem; color:var(--ink60); line-height:1.6; max-width:260px; margin:0 auto 18px }
.success-mail-link { display:none; align-items:center; gap:8px; background:var(--coral); color:white; padding:11px 22px; border-radius:50px; font-weight:600; font-size:.85rem; text-decoration:none; width:fit-content; margin:0 auto 14px }
.success-contacts { background:var(--sagebg); border-radius:14px; padding:14px; font-size:.8rem; color:var(--ink60); line-height:1.7 }
.success-contacts strong { color:var(--sage); display:block; margin-bottom:4px; font-size:.75rem; text-transform:uppercase }
.close-btn { margin-top:14px; background:var(--ink); color:white; border:none; padding:10px 24px; border-radius:50px; font-family:'DM Sans',sans-serif; font-size:.83rem; font-weight:500; cursor:pointer }

/* ═══════════════════════════════
   IMMERSIVE — display:none/flex (comme le test qui marche)
═══════════════════════════════ */
#imm {
  display:none; position:fixed; inset:0; z-index:800; overflow:hidden;
}
#imm.show { display:block }
#imm-nav { position:absolute; top:0; left:0; right:0; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:16px 32px; background:linear-gradient(to bottom,rgba(0,0,0,.5),transparent) }
#imm-dots { display:flex; gap:7px; align-items:center }
.idot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.3); cursor:pointer; border:none; padding:0; transition:all .3s }
.idot.on { width:22px; border-radius:3px; background:rgba(255,255,255,.9) }
#imm-close-btn { width:36px; height:36px; border-radius:50%; border:1.5px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1); color:white; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1rem }
#imm-prog { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.1); z-index:10 }
#imm-bar { height:100%; background:var(--sage); transition:width .5s; width:0% }

.sc { display:none; position:absolute; inset:0; background:linear-gradient(135deg,var(--c1),var(--c2)); align-items:center; justify-content:center; overflow:hidden }
.sc.on { display:flex }
.ptcls { position:absolute; inset:0; pointer-events:none; overflow:hidden }

/* ── PHOTO BACKDROP for immersive scenes ── */
.sc-photo {
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
}
.sc-photo img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.15);
  will-change:transform;
}
.sc.on .sc-photo img {
  animation:kenBurns 22s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  0%   { transform:scale(1.15) translate(-2%, -1%); }
  100% { transform:scale(1.28) translate(2%, 2%); }
}
.sc-photo::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, var(--c1) 0%, rgba(0,0,0,.55) 50%, var(--c2) 100%);
  opacity:.78;
  mix-blend-mode:multiply;
}
.sc-photo-vignette {
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
  z-index:1;
}
/* Subtle floating decorative emoji that drifts across photo scenes */
.sc-drift {
  position:absolute; pointer-events:none; z-index:2;
  font-size:3rem;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.3));
  animation:driftEmoji 18s linear infinite;
  opacity:.7;
}
.sc-drift.d1 { top:18%; animation-duration:24s; }
.sc-drift.d2 { top:62%; animation-duration:28s; animation-delay:-8s; }
.sc-drift.d3 { top:38%; animation-duration:32s; animation-delay:-15s; font-size:2.2rem; }
@keyframes driftEmoji {
  0%   { left:-8%; transform:translateY(0) rotate(-10deg); }
  50%  { transform:translateY(-30px) rotate(10deg); }
  100% { left:108%; transform:translateY(0) rotate(-10deg); }
}


/* Welcome scene photo collage */
.sc-collage {
  position:absolute; inset:0; pointer-events:none; z-index:1;
  overflow:hidden;
}
.sc-coll-img {
  position:absolute; border-radius:24px; overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
  background-size:cover; background-position:center;
  opacity:0;
  animation:collageFloat 8s ease-in-out infinite;
}
.sc.on .sc-coll-img { animation:collageEnter 1.4s cubic-bezier(.16,1,.3,1) forwards, collageFloat 8s ease-in-out infinite 1.4s; }
@keyframes collageEnter {
  0%   { opacity:0; transform:translateY(40px) scale(.85) rotate(var(--rot)); }
  100% { opacity:.42; transform:translateY(0) scale(1) rotate(var(--rot)); }
}
@keyframes collageFloat {
  0%,100% { transform:translateY(0) rotate(var(--rot)); }
  50%     { transform:translateY(-14px) rotate(calc(var(--rot) + 1deg)); }
}
.sc-coll-1 {
  --rot:-5deg;
  width:240px; height:300px;
  top:14%; left:6%;
  background-image:url('/assets/1fa0348381.jpg');
  animation-delay:0s, 1.4s;
}
.sc-coll-2 {
  --rot:6deg;
  width:200px; height:260px;
  top:55%; left:14%;
  background-image:url('/assets/ca87ad3ee6.jpg');
  animation-delay:.25s, 1.65s;
}
.sc-coll-3 {
  --rot:-4deg;
  width:220px; height:280px;
  top:22%; right:8%;
  background-image:url('/assets/233939ba09.jpg');
  animation-delay:.5s, 1.9s;
}
@media (max-width: 768px) {
  .sc-collage { display:none; }
}

/* Boost scene-content z-index above photo */
.sc-center, .sc-split { position:relative; z-index:3; }
.sc .scard { 
  background:rgba(255,255,255,.08) !important;
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 30px 80px rgba(0,0,0,.45) !important;
}
.sc .sc-h2, .sc .sc-h1 {
  text-shadow:0 4px 24px rgba(0,0,0,.4);
}
.sc .sc-txt, .sc .sc-body {
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.pt { position:absolute; border-radius:50%; animation:pf linear infinite; opacity:0 }
@keyframes pf { 0%{transform:translateY(0);opacity:0} 10%{opacity:.5} 90%{opacity:.2} 100%{transform:translateY(-100vh);opacity:0} }
.deco { position:absolute; font-size:16vw; pointer-events:none; opacity:.07; animation:sw 8s ease-in-out infinite; user-select:none }
@keyframes sw { 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)} }

.sc-center { text-align:center; max-width:620px; padding:40px 24px; position:relative; z-index:2 }
.sc-tag { display:inline-block; background:rgba(123,174,138,.25); border:1px solid rgba(123,174,138,.4); color:#A8D5B8; border-radius:50px; padding:5px 16px; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; margin-bottom:16px }
.sc-tag.gold { background:rgba(240,165,0,.2); border-color:rgba(240,165,0,.4); color:#F0C060 }
.sc-h1 { font-family:'DM Serif Display',serif; font-size:clamp(2.2rem,5vw,3.6rem); color:white; line-height:1.05; margin-bottom:12px }
.sc-h1 em { color:#7BAE8A; font-style:italic }
.sc-sub { font-size:.75rem; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.4); margin-bottom:16px }
.sc-body { font-size:.95rem; color:rgba(255,255,255,.75); line-height:1.75; font-weight:300; margin-bottom:22px }
.sc-split { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; max-width:960px; padding:84px 44px 44px; width:100%; position:relative; z-index:2 }
.sc-split.rev { direction:rtl }
.sc-split.rev>* { direction:ltr }
.scard { border-radius:22px; padding:28px 22px; box-shadow:0 40px 80px rgba(0,0,0,.4); min-height:320px; display:flex; flex-direction:column; justify-content:space-between }
.scard-badge { display:inline-flex; align-items:center; background:rgba(255,255,255,.15); border-radius:50px; padding:4px 12px; font-size:.7rem; font-weight:700; color:rgba(255,255,255,.9); width:fit-content; margin-bottom:10px }
.scard-em { font-size:4rem; text-align:center; margin:10px 0 }
.scard-chips { display:grid; grid-template-columns:1fr 1fr; gap:6px }
.schip { background:rgba(255,255,255,.12); border-radius:8px; padding:6px 10px; font-size:.7rem; font-weight:600; color:rgba(255,255,255,.85) }
.scard-stats { display:flex; gap:12px }
.sstat { flex:1; background:rgba(255,255,255,.1); border-radius:12px; padding:12px; text-align:center }
.sstat strong { display:block; font-family:'DM Serif Display',serif; font-size:1.7rem; color:white }
.sstat span { font-size:.68rem; color:rgba(255,255,255,.55); margin-top:2px; display:block }
.scard-ptnrs { display:grid; grid-template-columns:1fr 1fr; gap:7px }
.sptnr { background:rgba(255,255,255,.12); border-radius:11px; padding:11px; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:1.5rem }
.sptnr span { font-size:.68rem; font-weight:600; color:rgba(255,255,255,.8) }
.sc-num { font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.3); margin-bottom:9px }
.sc-h2 { font-family:'DM Serif Display',serif; font-size:clamp(1.5rem,3vw,2.2rem); color:white; line-height:1.1; margin-bottom:11px }
.sc-txt { font-size:.88rem; color:rgba(255,255,255,.7); line-height:1.7; font-weight:300 }
.sc-dets { display:flex; flex-direction:column; gap:11px; margin:18px 0 }
.sdet { display:flex; align-items:flex-start; gap:11px }
.sdet-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0 }
.sdet strong { display:block; color:white; font-weight:600; font-size:.83rem; margin-bottom:2px }
.sdet span { font-size:.75rem; color:rgba(255,255,255,.5); line-height:1.4 }
.sc-nav { display:flex; gap:10px; margin-top:22px }
.sc-prev { padding:10px 20px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.7); border:1.5px solid rgba(255,255,255,.15); border-radius:50px; font-family:'DM Sans',sans-serif; font-size:.83rem; cursor:pointer }
.sc-prev:hover { background:rgba(255,255,255,.15); color:white }
.sc-next { display:inline-flex; align-items:center; gap:7px; padding:10px 22px; background:var(--sage); color:white; border:none; border-radius:50px; font-family:'DM Sans',sans-serif; font-size:.83rem; font-weight:600; cursor:pointer }
.sc-next:hover { background:#6BA07A }
.sc-final-btns { display:flex; gap:11px; justify-content:center; flex-wrap:wrap; margin-bottom:18px }
.btn-cta-i { display:inline-flex; align-items:center; gap:7px; padding:13px 26px; background:var(--coral); color:white; border:none; border-radius:50px; font-family:'DM Sans',sans-serif; font-size:.9rem; font-weight:600; cursor:pointer }
.btn-ghost-i { padding:13px 22px; background:rgba(255,255,255,.1); color:rgba(255,255,255,.8); border:1.5px solid rgba(255,255,255,.2); border-radius:50px; font-family:'DM Sans',sans-serif; font-size:.9rem; cursor:pointer }
.imm-links { display:flex; gap:16px; justify-content:center; flex-wrap:wrap }
.imm-link { color:rgba(255,255,255,.5); text-decoration:none; font-size:.8rem; transition:color .2s }
.imm-link:hover { color:rgba(255,255,255,.9) }

/* CTA — disposition compacte sur écrans moyens (avant le passage mobile à 1024px) */
@media(max-width:1200px) and (min-width:1025px){
  .cta-grid{gap:40px}
}

/* RESPONSIVE */
@media(max-width:1024px){
  #hero{grid-template-columns:1fr;padding:90px 24px 56px}
  .hero-right{display:none}
  .about-grid,.food-grid,.app-grid,.acts-layout{grid-template-columns:1fr;gap:40px}
  .acts-sticky{position:static}
  .groups-grid{grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:1fr 1fr}
  .sp{grid-column:span 1!important}
  .testi-grid{grid-template-columns:1fr}
  .cta-grid{grid-template-columns:1fr}
  .cta-right{align-items:flex-start}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .section{padding:72px 24px}
  #stats{padding:0 24px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  #nav{padding:0 24px}
  .nav-links{display:none}
  #cta{padding:64px 24px}
  footer{padding:48px 24px 24px}
  .sc-split{grid-template-columns:1fr;padding:76px 24px 36px;gap:20px}
  .sc-split.rev{direction:ltr}
  .scard{display:none}
}
@media(max-width:640px){
  .groups-grid{grid-template-columns:1fr}
  .food-cards{grid-template-columns:1fr}
  .food-card.wide{grid-column:span 1}
  #modal{grid-template-columns:1fr}
  .modal-left{display:none}
  .form-row{grid-template-columns:1fr}
  .testi-hd{flex-direction:column;gap:8px}
}

/* ══ ESPACE CLIENT ══ */

/* Add only the new variables (lavender) — keep originals from main :root */
:root {
  --lavender:#8B7EC8; --lavenderbg:#F0EEF9;
}

/* ── LOGIN ── */
#portal-app-shell {
  align-items:stretch;
}
#portal-app-shell.show { display:flex !important; }
#login-screen {
  display:flex; min-height:100vh; align-items:stretch;
  position:relative;
}
/* La carte crème flotte par-dessus : on aère la droite */
.login-left {
  flex:1; width:100%; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:48px;
  background:#15392B;
}
/* Image dans ::after, avec masque dégradé qui rend son bord gauche transparent
   => le bord rectangulaire disparaît, fondu parfait dans le vert. */
.login-left::after {
  content:''; position:absolute; top:0; bottom:0; right:0; z-index:0;
  width:46%;
  background:url('/assets/site/login-hero.jpg') no-repeat right center;
  background-size:auto 100%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 30%, #000 70%);
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 30%, #000 70%);
}
/* Légère teinte verte d'harmonisation par-dessus l'image */
.login-left::before {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(21,57,43,.45) 50%,
    rgba(21,57,43,.18) 72%,
    rgba(21,57,43,0) 90%);
}
.login-left > * { position:relative; z-index:2; }
.login-logo img { height:54px; width:auto; opacity:1; }
.login-hero { position:relative; z-index:2; max-width:520px; }
.login-hero h2 { font-family:'DM Serif Display',serif; font-size:2.9rem; color:white; line-height:1.12; margin-bottom:18px }
.login-hero h2 em { color:#F4A78C; font-style:italic }
.login-hero p { font-size:1.05rem; color:rgba(255,255,255,.78); line-height:1.7; font-weight:300; max-width:380px }
.login-hero .login-welcome { display:flex; align-items:center; gap:8px; color:#9FD0B0; font-size:.95rem; font-weight:500; margin-bottom:18px; }
.login-stats { display:flex; gap:32px }
.login-stat strong { display:block; font-family:'DM Serif Display',serif; font-size:2rem; color:white }
.login-stat span { font-size:.8rem; color:rgba(255,255,255,.45) }
/* 4 atouts en bas du panneau gauche (style maquette) */
.login-features {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; max-width:520px;
}
.login-feature { display:flex; align-items:flex-start; gap:11px; }
.login-feature-ic {
  font-size:1.15rem; line-height:1; flex-shrink:0;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); backdrop-filter:blur(4px);
}
.login-feature strong { display:block; color:white; font-size:.9rem; font-weight:600; margin-bottom:2px; }
.login-feature span { display:block; color:rgba(255,255,255,.62); font-size:.78rem; line-height:1.4; }
.login-right {
  position:absolute; top:50%; right:60px; transform:translateY(-50%);
  width:430px; z-index:3;
  background:#FAF6EF;
  display:flex; flex-direction:column; justify-content:center;
  padding:46px 42px;
  border-radius:26px;
  box-shadow:0 30px 80px rgba(13,31,26,.40);
}
/* En-tête du panneau : logo centré (façon maquette) */
.auth-card-head { display:flex; justify-content:center; margin-bottom:8px; }
.auth-card-logo { height:96px; width:auto; }
/* Titre centré + trait coral dessous */
.auth-card-title { text-align:center; line-height:1.2; }
.auth-title-rule {
  display:block; width:54px; height:3px; border-radius:2px;
  background:var(--coral); margin:14px auto 26px;
}
/* Lien "Première connexion ? Activer mon compte" */
.auth-switch { text-align:center; margin-top:22px; font-size:.9rem; color:#888; }
.auth-link-strong { color:var(--coral); font-weight:600; }
.login-right h2 { font-family:'DM Serif Display',serif; font-size:1.8rem; margin-bottom:6px }
.login-right p { font-size:.875rem; color:#888; margin-bottom:32px }
.login-tabs { display:flex; gap:0; background:var(--sand); border-radius:12px; padding:4px; margin-bottom:28px }
.login-tab {
  flex:1; padding:9px; text-align:center; border:none; background:none;
  border-radius:9px; font-family:'DM Sans',sans-serif; font-size:.85rem; font-weight:500;
  color:#888; cursor:pointer; transition:all .25s;
}
.login-tab.active { background:white; color:var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.08) }
.form-field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px }
.form-field label { font-size:.75rem; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:.06em }
.form-field input {
  border:1.5px solid rgba(0,0,0,.1); border-radius:10px; padding:12px 14px;
  font-family:'DM Sans',sans-serif; font-size:.95rem; color:var(--ink);
  outline:none; transition:border-color .2s;
}
.form-field input:focus { border-color:var(--sage) }
.btn-login {
  width:100%; padding:14px; background:var(--coral); color:white; border:none;
  border-radius:12px; font-family:'DM Sans',sans-serif; font-size:.95rem; font-weight:600;
  cursor:pointer; transition:background .3s; margin-top:8px;
}
.btn-login:hover { background:#d44e3c }
.login-demo { margin-top:24px; padding:16px; background:var(--sagebg); border-radius:12px; font-size:.8rem; color:#555; line-height:1.6 }
.login-demo strong { color:var(--sage); display:block; margin-bottom:4px }

/* ═══════════════════════════════════════════════════
   🔐 NEW AUTH UI — Premium animated
═══════════════════════════════════════════════════ */
#portal-app-shell { display:flex; }

/* Floating particles in background */
.auth-particles {
  position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0;
}
.auth-particle {
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle, rgba(123,174,138,.55) 0%, rgba(123,174,138,0) 70%);
  animation:authFloat 18s linear infinite;
}
.auth-particle:nth-child(1) { left:8%;  top:80%; animation-delay:0s;    width:8px;height:8px; }
.auth-particle:nth-child(2) { left:22%; top:90%; animation-delay:-3s;   width:5px;height:5px; background:radial-gradient(circle, rgba(232,96,76,.45) 0%, transparent 70%); }
.auth-particle:nth-child(3) { left:35%; top:75%; animation-delay:-7s; }
.auth-particle:nth-child(4) { left:48%; top:95%; animation-delay:-2s;   width:4px;height:4px; }
.auth-particle:nth-child(5) { left:62%; top:85%; animation-delay:-9s;   background:radial-gradient(circle, rgba(244,180,0,.5) 0%, transparent 70%); }
.auth-particle:nth-child(6) { left:75%; top:80%; animation-delay:-5s;   width:7px;height:7px; }
.auth-particle:nth-child(7) { left:88%; top:90%; animation-delay:-12s; }
.auth-particle:nth-child(8) { left:15%; top:60%; animation-delay:-15s;  width:5px;height:5px; }
.auth-particle:nth-child(9)  { left:4%;  top:94%; animation-delay:-4s;  width:4px;height:4px; animation-duration:15s; }
.auth-particle:nth-child(10) { left:12%; top:72%; animation-delay:-11s; width:7px;height:7px; animation-duration:22s; background:radial-gradient(circle, rgba(255,255,255,.38) 0%, transparent 70%); }
.auth-particle:nth-child(11) { left:19%; top:98%; animation-delay:-8s;  width:3px;height:3px; animation-duration:13s; }
.auth-particle:nth-child(12) { left:28%; top:68%; animation-delay:-17s; width:6px;height:6px; animation-duration:20s; background:radial-gradient(circle, rgba(244,167,140,.48) 0%, transparent 70%); }
.auth-particle:nth-child(13) { left:33%; top:88%; animation-delay:-2s;  width:4px;height:4px; animation-duration:17s; }
.auth-particle:nth-child(14) { left:41%; top:78%; animation-delay:-13s; width:8px;height:8px; animation-duration:24s; background:radial-gradient(circle, rgba(255,214,153,.45) 0%, transparent 70%); }
.auth-particle:nth-child(15) { left:47%; top:96%; animation-delay:-6s;  width:3px;height:3px; animation-duration:14s; }
.auth-particle:nth-child(16) { left:54%; top:65%; animation-delay:-19s; width:5px;height:5px; animation-duration:19s; background:radial-gradient(circle, rgba(255,255,255,.34) 0%, transparent 70%); }
.auth-particle:nth-child(17) { left:59%; top:86%; animation-delay:-9s;  width:6px;height:6px; animation-duration:21s; }
.auth-particle:nth-child(18) { left:66%; top:74%; animation-delay:-16s; width:4px;height:4px; animation-duration:16s; background:radial-gradient(circle, rgba(244,167,140,.42) 0%, transparent 70%); }
.auth-particle:nth-child(19) { left:72%; top:97%; animation-delay:-5s;  width:7px;height:7px; animation-duration:23s; }
.auth-particle:nth-child(20) { left:81%; top:69%; animation-delay:-12s; width:3px;height:3px; animation-duration:15s; background:radial-gradient(circle, rgba(255,214,153,.42) 0%, transparent 70%); }
@keyframes authFloat {
  0%   { transform:translateY(0) translateX(0) scale(1); opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { transform:translateY(-120vh) translateX(40px) scale(.6); opacity:0; }
}

/* Entrance animations */
.auth-anim { opacity:0; transform:translateY(16px); animation:authReveal .7s cubic-bezier(.16,1,.3,1) forwards; }
.auth-anim-1 { animation-delay:.05s; }
.auth-anim-2 { animation-delay:.15s; }
.auth-anim-3 { animation-delay:.25s; }
.auth-anim-4 { animation-delay:.35s; }
.auth-anim-5 { animation-delay:.45s; }
.auth-anim-6 { animation-delay:.55s; }
.auth-anim-7 { animation-delay:.65s; }
.auth-anim-8 { animation-delay:.75s; }
@keyframes authReveal {
  to { opacity:1; transform:translateY(0); }
}

/* Logo subtle breathe */
.login-logo img { animation:authLogoBreathe 6s ease-in-out infinite; }
@keyframes authLogoBreathe {
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.04); }
}

/* Close button */
.auth-close {
  position:absolute; top:20px; right:20px; z-index:10;
  width:36px; height:36px; border-radius:50%; border:none;
  background:rgba(0,0,0,.04); color:#666;
  font-size:1.6rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.auth-close:hover { background:rgba(0,0,0,.08); color:#000; transform:rotate(90deg); }

/* Tabs (Connexion / Inscription) with sliding indicator */
.auth-tabs {
  position:relative;
  display:flex; gap:0;
  background:var(--sand);
  border-radius:14px; padding:5px;
  margin-bottom:28px;
}
.auth-tab {
  flex:1; padding:11px 16px; text-align:center;
  border:none; background:none; cursor:pointer;
  font-family:'DM Sans',sans-serif; font-size:.9rem; font-weight:600;
  color:#888; border-radius:10px;
  position:relative; z-index:2;
  transition:color .3s;
}
.auth-tab.active { color:var(--ink); }
.auth-tab-indicator {
  position:absolute; top:5px; left:5px;
  width:calc(50% - 5px); height:calc(100% - 10px);
  background:white; border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
  z-index:1;
}
.auth-tabs.signup .auth-tab-indicator { transform:translateX(100%); }

/* Slider for panels (slide between Signin / Signup / Forgot) */
.auth-slider {
  overflow:hidden;
  width:100%;
  max-width:100%;
}
.auth-slides {
  display:flex;
  width:300%;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.auth-slides.show-signup  { transform:translateX(-33.333%); }
.auth-slides.show-forgot  { transform:translateX(-66.666%); }
.auth-panel {
  width:33.333%;
  flex-shrink:0;
  padding:0 4px;
  box-sizing:border-box;
}
.auth-panel.dim { opacity:.4; pointer-events:none; }

.auth-h2 {
  font-family:'DM Serif Display',serif;
  font-size:1.7rem; line-height:1.15;
  margin-bottom:8px;
}
.auth-sub {
  font-size:.92rem; color:#777; margin-bottom:24px; line-height:1.5;
}

/* Fields */
.auth-field { margin-bottom:14px; }
.auth-field-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:0; }
.auth-field-row .auth-field { margin-bottom:14px; }
.auth-field label {
  display:block; font-size:.78rem; font-weight:600; color:#555;
  margin-bottom:6px;
}
.auth-field input {
  width:100%; box-sizing:border-box;
  padding:13px 16px;
  border:1.5px solid rgba(0,0,0,.1);
  border-radius:12px;
  font-family:'DM Sans',sans-serif; font-size:.95rem;
  background:white; color:var(--ink);
  outline:none;
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.auth-field input:focus {
  border-color:var(--sage);
  box-shadow:0 0 0 4px rgba(123,174,138,.12);
}
.auth-field input.has-error {
  border-color:var(--coral);
  box-shadow:0 0 0 4px rgba(232,96,76,.12);
  animation:authShake .4s;
}
@keyframes authShake {
  0%,100% { transform:translateX(0); }
  20%     { transform:translateX(-6px); }
  40%     { transform:translateX(6px); }
  60%     { transform:translateX(-3px); }
  80%     { transform:translateX(3px); }
}

/* Password input with toggle */
.auth-pwd-wrap { position:relative; }
.auth-pwd-wrap input { padding-right:46px; }
.auth-pwd-toggle {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:none; background:none;
  font-size:1.05rem; cursor:pointer; color:#999;
  display:flex; align-items:center; justify-content:center;
  border-radius:6px;
}
.auth-pwd-toggle:hover { color:#555; background:rgba(0,0,0,.04); }

/* Password strength meter */
.auth-pwd-strength {
  display:flex; align-items:center; gap:8px;
  margin-top:6px;
}
.auth-pwd-bar {
  flex:1; height:4px; background:rgba(0,0,0,.06); border-radius:2px; overflow:hidden;
}
.auth-pwd-bar span {
  display:block; height:100%; width:0; background:#bbb;
  border-radius:2px;
  transition:width .3s, background .3s;
}
.auth-pwd-bar span.lvl-1 { width:25%; background:#e74c3c; }
.auth-pwd-bar span.lvl-2 { width:50%; background:#f39c12; }
.auth-pwd-bar span.lvl-3 { width:75%; background:#3498db; }
.auth-pwd-bar span.lvl-4 { width:100%; background:#27ae60; }
.auth-pwd-label { font-size:.72rem; color:#888; min-width:90px; text-align:right; }

/* Row with checkbox + forgot link */
.auth-row {
  display:flex; align-items:center; justify-content:space-between;
  margin:6px 0 18px; flex-wrap:wrap; gap:8px;
}
.auth-check {
  display:inline-flex; align-items:center; gap:8px;
  cursor:pointer; font-size:.85rem; color:#555;
  user-select:none;
}
.auth-check input { width:16px; height:16px; accent-color:var(--sage); cursor:pointer; }
.auth-check-tos { display:flex; margin:8px 0 18px; font-size:.82rem; line-height:1.45; align-items:flex-start; }
.auth-check-tos input { margin-top:2px; flex-shrink:0; }
.auth-check-tos a { color:var(--sage); text-decoration:underline; }
.auth-link {
  background:none; border:none; cursor:pointer;
  color:var(--sage); font-family:'DM Sans',sans-serif;
  font-size:.85rem; font-weight:500;
  padding:4px 6px; border-radius:6px;
  transition:background .2s;
}
.auth-link:hover { background:var(--sagebg); }

/* Primary button */
.auth-btn-primary {
  position:relative;
  width:100%; padding:14px 20px;
  background:#1A3D2E; color:white;
  border:none; border-radius:12px; cursor:pointer;
  font-family:'DM Sans',sans-serif; font-size:.95rem; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:transform .2s, box-shadow .2s, background .2s;
  overflow:hidden;
}
.auth-btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(26,61,46,.28); background:#142d22; }
.auth-btn-primary:active { transform:translateY(0); }
.auth-btn-primary:disabled { opacity:.65; cursor:not-allowed; transform:none; }
.auth-btn-primary.loading .auth-btn-label { opacity:.4; }
.auth-btn-primary.loading .auth-spinner { opacity:1; }

.auth-spinner {
  position:absolute;
  width:18px; height:18px;
  border:2.5px solid rgba(255,255,255,.3);
  border-top-color:white;
  border-radius:50%;
  opacity:0;
  animation:authSpin .8s linear infinite;
}
@keyframes authSpin { to { transform:rotate(360deg); } }

/* Divider OR */
.auth-divider {
  display:flex; align-items:center; gap:14px;
  margin:24px 0;
}
.auth-divider::before, .auth-divider::after {
  content:''; flex:1; height:1px; background:rgba(0,0,0,.1);
}
.auth-divider span {
  font-size:.7rem; font-weight:600; color:#999;
  letter-spacing:.12em; text-transform:uppercase;
}

/* Social buttons */
.auth-social { display:flex; flex-direction:column; gap:10px; }
.auth-social-btn {
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:12px 16px;
  background:white;
  border:1.5px solid rgba(0,0,0,.1);
  border-radius:12px; cursor:pointer;
  font-family:'DM Sans',sans-serif; font-size:.92rem; font-weight:600;
  color:var(--ink);
  transition:all .25s;
}
.auth-social-btn:hover {
  border-color:rgba(0,0,0,.25);
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  transform:translateY(-2px);
}
.auth-social-btn:active { transform:translateY(0); }
.auth-social-btn svg { flex-shrink:0; }
.auth-social-btn.auth-soon {
  opacity:.55;
  cursor:not-allowed;
}
.auth-social-btn.auth-soon:hover {
  transform:none; box-shadow:none; border-color:rgba(0,0,0,.1);
}
.auth-soon-tag {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:.65rem; padding:3px 8px; border-radius:50px;
  background:var(--sand); color:#888; font-weight:600;
  letter-spacing:.04em;
}

/* Role selector cards */
.auth-role-selector {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-bottom:18px;
}
.auth-role-option { cursor:pointer; }
.auth-role-option input { position:absolute; opacity:0; pointer-events:none; }
.auth-role-card {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:18px 12px;
  background:var(--sand);
  border:2px solid transparent;
  border-radius:14px;
  transition:all .25s;
  text-align:center;
}
.auth-role-option:hover .auth-role-card { background:rgba(0,0,0,.03); }
.auth-role-option input:checked ~ .auth-role-card {
  background:var(--sagebg);
  border-color:var(--sage);
  transform:scale(1.02);
}
.auth-role-emoji { font-size:1.7rem; line-height:1; }
.auth-role-label { font-size:.85rem; font-weight:600; color:var(--ink); }

/* Error / success boxes */
.auth-error, .auth-success {
  display:none;
  padding:12px 14px;
  border-radius:10px;
  font-size:.85rem; line-height:1.45;
  margin-bottom:14px;
  animation:authReveal .35s ease-out;
}
.auth-error.show, .auth-success.show { display:block; }
.auth-error  { background:rgba(232,96,76,.08); color:#a83a2c; border:1px solid rgba(232,96,76,.25); }
.auth-success { background:rgba(123,174,138,.12); color:#3a6b48; border:1px solid rgba(123,174,138,.3); }

/* Back link in forgot panel */
.auth-back {
  background:none; border:none; cursor:pointer;
  color:#777; font-size:.85rem; font-family:'DM Sans',sans-serif;
  padding:0 0 16px; display:inline-flex; align-items:center; gap:4px;
  transition:color .2s;
}
.auth-back:hover { color:var(--ink); }

/* Override the old .login-right padding for new layout */
.login-right { position:relative; }

/* Mobile auth refinements */
@media (max-width: 768px) {
  .login-right { padding:24px 20px 36px !important; width:100% !important; margin:0 !important; border-radius:0 !important; box-shadow:none !important; max-height:none !important; }
  .auth-h2 { font-size:1.4rem !important; }
  .auth-sub { font-size:.85rem !important; margin-bottom:20px !important; }
  .auth-tabs { margin-bottom:20px !important; }
  .auth-tab { font-size:.82rem !important; padding:10px !important; }
  .auth-field-row { grid-template-columns:1fr !important; gap:0 !important; }
  .auth-role-card { padding:14px 10px !important; }
  .auth-role-emoji { font-size:1.4rem !important; }
  .auth-role-label { font-size:.78rem !important; }
  .auth-particles { display:none; }
  .auth-close { top:12px !important; right:12px !important; width:32px !important; height:32px !important; }
  .auth-divider { margin:18px 0 !important; }
  .auth-soon-tag { font-size:.6rem !important; right:8px !important; padding:2px 6px !important; }
}

/* ── APP SHELL ── */
#portal-app { display:none; min-height:100vh; flex-direction:column }
#portal-app.show { display:flex }

/* TOP BAR */
#topbar {
  height:60px; background:white; border-bottom:1px solid rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; position:sticky; top:0; z-index:100;
}
.topbar-logo { transition:opacity .2s; }
.topbar-logo:hover { opacity:.7; }
.topbar-logo img { height:32px; object-fit:contain }
.topbar-center { font-size:.85rem; color:#888; font-weight:500 }
.topbar-right { display:flex; align-items:center; gap:16px }
.topbar-notif {
  width:36px; height:36px; border-radius:50%; background:var(--sand);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  position:relative; font-size:1rem; border:none;
}
.notif-badge {
  position:absolute; top:4px; right:4px; width:8px; height:8px;
  background:var(--coral); border-radius:50%; border:2px solid white;
}
.topbar-user { display:flex; align-items:center; gap:10px; cursor:pointer }
.user-av {
  width:36px; height:36px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:1rem; font-weight:700; color:white;
}
.user-name { font-size:.875rem; font-weight:600 }
.user-role { font-size:.72rem; color:#888 }
.btn-logout {
  padding:7px 16px; background:var(--sand); border:none; border-radius:50px;
  font-family:'DM Sans',sans-serif; font-size:.8rem; font-weight:500; cursor:pointer; color:#555;
}
.btn-logout:hover { background:#eee }

/* LAYOUT */
#layout { display:flex; flex:1; overflow:hidden }

/* SIDEBAR */
#sidebar {
  width:220px; background:white; border-right:1px solid rgba(0,0,0,.06);
  display:flex; flex-direction:column; padding:20px 12px; gap:4px; flex-shrink:0;
  overflow-y:auto;
}
.sidebar-section { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#bbb; padding:12px 10px 6px; margin-top:8px }
.sidebar-link {
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px;
  text-decoration:none; font-size:.875rem; font-weight:500; color:#666;
  cursor:pointer; border:none; background:none; width:100%; text-align:left;
  transition:background .2s, color .2s;
}
.sidebar-link:hover { background:var(--sand); color:var(--ink) }
.sidebar-link.active { background:var(--sagebg); color:var(--sage) }
.sidebar-link .icon { font-size:1.1rem; width:20px; text-align:center }
.sidebar-badge {
  margin-left:auto; background:var(--coral); color:white;
  font-size:.65rem; font-weight:700; border-radius:50px; padding:2px 7px;
}

/* MAIN */
#main { flex:1; overflow-y:auto; padding:32px; }
.page { display:none }
.page.active { display:block }
.page-header { margin-bottom:28px }
.page-header h2 { font-family:'DM Serif Display',serif; font-size:1.8rem; color:var(--ink) }
.page-header p { font-size:.9rem; color:#888; margin-top:4px }

/* CARDS */
.card { background:white; border-radius:20px; padding:24px; box-shadow:0 2px 12px rgba(0,0,0,.05) }
.card-title { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#bbb; margin-bottom:12px }

/* GRID */
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:20px }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px }

/* STAT CARDS */
.stat-card {
  background:white; border-radius:20px; padding:22px; box-shadow:0 2px 12px rgba(0,0,0,.05);
  display:flex; flex-direction:column; gap:8px;
}
.stat-card .stat-icon { width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:4px }
.stat-card .stat-value { font-family:'DM Serif Display',serif; font-size:2rem; color:var(--ink); line-height:1 }
.stat-card .stat-label { font-size:.8rem; color:#888 }
.stat-card .stat-trend { font-size:.75rem; font-weight:600; color:var(--sage) }

/* RAPPORT QUOTIDIEN */
.rapport-card {
  background:white; border-radius:20px; padding:24px; box-shadow:0 2px 12px rgba(0,0,0,.05);
  margin-bottom:20px;
}
.rapport-header { display:flex; align-items:center; gap:14px; margin-bottom:20px }
.rapport-av { width:52px; height:52px; border-radius:50%; object-fit:cover; border:3px solid var(--sagebg) }
.rapport-av-placeholder { width:52px; height:52px; border-radius:50%; background:var(--sagebg); display:flex; align-items:center; justify-content:center; font-size:1.5rem }
.rapport-name { font-family:'DM Serif Display',serif; font-size:1.2rem }
.rapport-date { font-size:.8rem; color:#888 }
.rapport-group { font-size:.75rem; font-weight:600; color:var(--sage); background:var(--sagebg); padding:3px 10px; border-radius:50px; display:inline-block; margin-top:2px }
.rapport-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px }
.rapport-item { text-align:center; background:var(--sand); border-radius:14px; padding:14px 10px }
.rapport-item .r-icon { font-size:1.6rem; margin-bottom:6px }
.rapport-item .r-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:#999; margin-bottom:4px }
.rapport-item .r-val { font-size:.85rem; font-weight:600; color:var(--ink) }
.rapport-note { background:var(--sagebg); border-radius:14px; padding:16px; font-size:.875rem; color:#555; line-height:1.6 }
.rapport-note strong { color:var(--sage); display:block; margin-bottom:4px; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em }
.rapport-photos { display:flex; gap:10px; margin-top:16px }
.rapport-photo { width:80px; height:80px; border-radius:12px; object-fit:cover; background:var(--sand); display:flex; align-items:center; justify-content:center; font-size:1.8rem; flex-shrink:0 }

/* MESSAGERIE */
.msg-layout { display:grid; grid-template-columns:280px 1fr; gap:0; height:580px; background:white; border-radius:20px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.05) }
.msg-list { border-right:1px solid rgba(0,0,0,.06); overflow-y:auto }
.msg-list-header { padding:14px 16px; border-bottom:1px solid rgba(0,0,0,.06); font-weight:600; font-size:.9rem; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.msg-list-header-title { flex:1; }
.msg-list-header-add {
  width:30px; height:30px;
  border-radius:50%;
  background:var(--coralbg);
  color:var(--coral);
  border:none;
  cursor:pointer;
  font-size:1.1rem;
  line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, background .2s ease;
  font-weight:600;
}
.msg-list-header-add:hover {
  background:var(--coral);
  color:white;
  transform:scale(1.1) rotate(90deg);
}

/* ═══════════════════════════════════════════════════
   💬 NEW CONVERSATION PICKER MODAL
   ═══════════════════════════════════════════════════ */
.newconv-overlay {
  position:fixed; inset:0; z-index:10500;
  background:rgba(15,23,30,.45);
  backdrop-filter:blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  animation:newconvFade .25s ease;
}
.newconv-overlay.open { display:flex; }
@keyframes newconvFade {
  from { opacity:0; }
  to { opacity:1; }
}
.newconv-modal {
  background:white;
  border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.25);
  width:100%;
  max-width:480px;
  max-height:80vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  animation:newconvPop .35s cubic-bezier(.16,1,.3,1);
}
@keyframes newconvPop {
  from { opacity:0; transform:translateY(20px) scale(.95); }
  to   { opacity:1; transform:translateY(0)   scale(1); }
}
.newconv-header {
  padding:20px 24px;
  border-bottom:1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.newconv-header h3 {
  margin:0;
  font-size:1.05rem;
  font-weight:700;
  color:var(--ink);
}
.newconv-close {
  width:32px; height:32px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,.04);
  cursor:pointer;
  font-size:1.1rem;
  color:var(--ink60);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.newconv-close:hover { background:rgba(0,0,0,.08); }
.newconv-step-label {
  padding:14px 24px 6px;
  font-size:.8rem;
  color:var(--ink60);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:600;
}
.newconv-list {
  padding:8px 12px 20px;
  overflow-y:auto;
  flex:1;
}
.newconv-item {
  padding:14px 12px;
  border-radius:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:12px;
  transition:background .15s ease;
}
.newconv-item:hover {
  background:rgba(244,125,96,.08);
}
.newconv-item-av {
  width:42px; height:42px;
  border-radius:50%;
  background:var(--sagebg);
  color:var(--sage);
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  flex-shrink:0;
}
.newconv-item-info {
  flex:1; min-width:0;
}
.newconv-item-name {
  font-weight:600;
  font-size:.95rem;
  color:var(--ink);
}
.newconv-item-sub {
  font-size:.8rem;
  color:var(--ink60);
  margin-top:2px;
}
.newconv-item-arrow {
  color:var(--ink60);
  font-size:1.1rem;
}
.newconv-family-group {
  padding:12px 12px 0;
}
.newconv-family-title {
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:700;
  color:var(--coral);
  padding:6px 12px;
  margin-bottom:4px;
}
.newconv-empty {
  padding:32px 24px;
  text-align:center;
  color:var(--ink60);
  font-size:.9rem;
}

/* ═══════════════════════════════════════════════════
   🗑️ DELETE button on conversation items
   ═══════════════════════════════════════════════════ */
.msg-item { position:relative; }
.msg-item-delete {
  /* sits on top of the time block on the right and reveals on hover */
  position:absolute;
  top:50%;
  right:14px;
  transform:translateY(-50%) scale(.85);
  width:30px; height:30px;
  border-radius:50%;
  border:none;
  background:white;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  color:var(--ink60);
  cursor:pointer;
  font-size:.95rem;
  opacity:0;
  pointer-events:none;
  display:flex;
  align-items:center; justify-content:center;
  transition:opacity .18s ease, transform .18s ease, background .15s ease, color .15s ease;
  z-index:3;
}
.msg-item:hover .msg-item-delete {
  opacity:1;
  transform:translateY(-50%) scale(1);
  pointer-events:auto;
}
.msg-item:hover .msg-item-time { opacity:0; transition:opacity .18s ease; }
.msg-item-time { transition:opacity .18s ease; }
.msg-item-delete:hover {
  background:#FEE2E2;
  color:#DC2626;
  box-shadow:0 2px 12px rgba(220,38,38,.25);
}
@media (max-width: 768px) {
  /* On mobile, always show delete button (no hover) */
  .msg-item-delete { opacity:.55; pointer-events:auto; transform:translateY(-50%) scale(1); }
  .msg-item-delete:active { opacity:1; background:#FEE2E2; color:#DC2626; }
  /* On mobile, shift the time over so it doesn't sit under the delete button */
  .msg-item-time { margin-right:36px; }
}
.msg-item { display:flex; align-items:center; gap:12px; padding:14px 16px; cursor:pointer; transition:background .2s; border-bottom:1px solid rgba(0,0,0,.04) }
.msg-item:hover { background:var(--sand) }
.msg-item.active { background:var(--sagebg) }
.msg-item-av { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; flex-shrink:0 }
.msg-item-name { font-size:.875rem; font-weight:600; color:var(--ink) }
.msg-item-preview { font-size:.78rem; color:#888; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px }
.msg-item-time { font-size:.68rem; color:#bbb; margin-left:auto; flex-shrink:0 }
.msg-unread { width:8px; height:8px; background:var(--coral); border-radius:50%; flex-shrink:0 }
.msg-conversation { display:flex; flex-direction:column; height:100% }
.msg-conv-header { padding:16px 20px; border-bottom:1px solid rgba(0,0,0,.06); display:flex; align-items:center; gap:12px }
.msg-conv-header strong { font-size:.95rem }
.msg-conv-header span { font-size:.78rem; color:#888 }
.msg-conv-body { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:14px }
.msg-bubble { max-width:72%; }
.msg-bubble.me { align-self:flex-end }
.msg-bubble .bubble { padding:12px 16px; border-radius:18px; font-size:.875rem; line-height:1.5 }
.msg-bubble.them .bubble { background:var(--sand); color:var(--ink); border-bottom-left-radius:4px }
.msg-bubble.me .bubble { background:var(--sage); color:white; border-bottom-right-radius:4px }
.msg-bubble .time { font-size:.68rem; color:#bbb; margin-top:4px; text-align:right }
.msg-bubble.them .time { text-align:left }
.msg-input-bar { padding:16px; border-top:1px solid rgba(0,0,0,.06); display:flex; gap:10px; align-items:center }
.msg-input { flex:1; border:1.5px solid rgba(0,0,0,.1); border-radius:50px; padding:10px 16px; font-family:'DM Sans',sans-serif; font-size:.875rem; outline:none }
.msg-input:focus { border-color:var(--sage) }
.btn-send { width:40px; height:40px; background:var(--sage); color:white; border:none; border-radius:50%; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center }

/* DOCUMENTS */
.doc-item {
  display:flex; align-items:center; gap:16px; padding:16px 20px;
  background:white; border-radius:16px; box-shadow:0 2px 8px rgba(0,0,0,.05);
  margin-bottom:10px; transition:transform .2s;
}
.doc-item:hover { transform:translateX(4px) }
.doc-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0 }
.doc-name { font-weight:600; font-size:.9rem; color:var(--ink) }
.doc-meta { font-size:.78rem; color:#888; margin-top:2px }
.doc-download { margin-left:auto; padding:7px 16px; background:var(--sand); border:none; border-radius:50px; font-size:.78rem; font-weight:500; cursor:pointer; color:#555; transition:background .2s }
.doc-download:hover { background:var(--sagebg); color:var(--sage) }

/* PLANNING */
.planning-header { display:grid; grid-template-columns:80px repeat(5,1fr); gap:1px; background:rgba(0,0,0,.06); border-radius:16px 16px 0 0; overflow:hidden; margin-bottom:1px }
.planning-day { padding:12px; text-align:center; background:white }
.planning-day .day-name { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#999 }
.planning-day .day-num { font-family:'DM Serif Display',serif; font-size:1.4rem; color:var(--ink); line-height:1 }
.planning-day.today .day-num { color:var(--coral) }
.planning-day.today .day-name { color:var(--coral) }
.planning-grid { display:grid; grid-template-columns:80px repeat(5,1fr); gap:1px; background:rgba(0,0,0,.06); border-radius:0 0 16px 16px; overflow:hidden }
.planning-time { padding:10px 12px; background:white; font-size:.72rem; color:#bbb; font-weight:500; border-bottom:1px solid rgba(0,0,0,.04) }
.planning-cell { background:white; min-height:60px; padding:4px; border-bottom:1px solid rgba(0,0,0,.04); position:relative }
.planning-event {
  border-radius:8px; padding:6px 8px; font-size:.72rem; font-weight:600;
  margin-bottom:3px; cursor:default; line-height:1.3;
}
.event-sage { background:var(--sagebg); color:var(--sage) }
.event-coral { background:var(--coralbg); color:var(--coral) }
.event-sun { background:var(--sunbg); color:var(--sun) }
.event-sky { background:var(--skybg); color:var(--sky) }
.event-lav { background:var(--lavenderbg); color:var(--lavender) }

/* PROFIL ENFANT */
.child-profile { display:grid; grid-template-columns:280px 1fr; gap:24px }
.child-card { background:white; border-radius:20px; padding:28px; text-align:center; box-shadow:0 2px 12px rgba(0,0,0,.05) }
.child-avatar { width:80px; height:80px; border-radius:50%; background:var(--sagebg); display:flex; align-items:center; justify-content:center; font-size:2.5rem; margin:0 auto 16px }
.child-name { font-family:'DM Serif Display',serif; font-size:1.4rem; margin-bottom:4px }
.child-age { font-size:.85rem; color:#888; margin-bottom:12px }
.child-group { display:inline-flex; align-items:center; gap:6px; background:var(--sagebg); color:var(--sage); border-radius:50px; padding:6px 14px; font-size:.8rem; font-weight:700 }
.child-info { margin-top:20px; display:flex; flex-direction:column; gap:10px; text-align:left }
.child-info-row { display:flex; justify-content:space-between; font-size:.85rem; padding:10px 0; border-bottom:1px solid rgba(0,0,0,.05) }
.child-info-row:last-child { border-bottom:none }
.child-info-row .label { color:#888 }
.child-info-row .val { font-weight:600; color:var(--ink) }
.progress-bar { height:8px; background:rgba(0,0,0,.06); border-radius:4px; overflow:hidden; margin-top:4px }
.progress-fill { height:100%; border-radius:4px; transition:width 1s ease }

/* TEAM DASHBOARD */
.children-table { background:white; border-radius:20px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.05) }
.children-table table { width:100%; border-collapse:collapse }
.children-table th { padding:12px 16px; text-align:left; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#bbb; border-bottom:1px solid rgba(0,0,0,.06) }
.children-table td { padding:14px 16px; font-size:.875rem; border-bottom:1px solid rgba(0,0,0,.04) }
.children-table tr:last-child td { border-bottom:none }
.children-table tr:hover td { background:var(--sand) }
.status-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:50px; font-size:.72rem; font-weight:700 }
.status-present { background:var(--sagebg); color:var(--sage) }
.status-absent { background:var(--coralbg); color:var(--coral) }
.status-late { background:var(--sunbg); color:var(--sun) }
.avatar-sm { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700 }

/* RESPONSIVE */
@media(max-width:900px) {
  .login-left { display:none }
  .login-right { width:100% }
  #sidebar { display:none }
  .grid2,.grid3,.grid4 { grid-template-columns:1fr }
  .child-profile { grid-template-columns:1fr }
  .rapport-grid { grid-template-columns:repeat(2,1fr) }
  .planning-header,.planning-grid { grid-template-columns:60px repeat(5,1fr) }
}


/* Portal overlay fixes */
#portal-app-shell { display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999; background:white; overflow-y:auto; }
#portal-dashboard { display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999; background:#F7F3EE; flex-direction:column; overflow:hidden; }
#portal-dashboard #topbar { flex-shrink:0; }
#portal-dashboard #layout { flex:1; overflow:hidden; display:flex; }

/* ── Fix PWA iOS : hauteur dynamique + safe-area + masquage du site vitrine ── */
#portal-app-shell, #portal-dashboard {
  height: 100vh;            /* fallback navigateurs anciens */
  height: 100dvh;          /* hauteur réelle visible iOS (exclut barres système) */
  bottom: auto;            /* on pilote par height, pas par bottom (bug iOS) */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Quand le portail est ouvert, on neutralise complètement le site vitrine
   pour qu'il ne transparaisse jamais sous l'espace client (bug iOS observé). */
html.portal-open, html.portal-open body { overflow: hidden !important; height: 100%; }
html.portal-open #app,
html.portal-open header,
html.portal-open footer,
html.portal-open .site-nav,
html.portal-open #flyOverlay { display: none !important; }

#portal-dashboard #main { flex:1; overflow-y:auto; }

/* ═══════════════════════════════════════════════════
   🛠 ADMIN UI styles
═══════════════════════════════════════════════════ */
.admin-quick-btn {
  padding:10px 16px;
  background:white;
  border:1.5px solid rgba(0,0,0,.1);
  border-radius:50px;
  font-family:'DM Sans',sans-serif; font-size:.85rem; font-weight:600;
  color:var(--ink); cursor:pointer;
  transition:all .2s;
}
.admin-quick-btn:hover {
  border-color:var(--sage);
  background:var(--sagebg);
  transform:translateY(-1px);
}
.admin-row {
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  background:white;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.05);
  transition:all .2s;
}
.admin-row:hover { border-color:rgba(0,0,0,.1); box-shadow:0 4px 14px rgba(0,0,0,.04); }
.admin-row-avatar {
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--sagebg); color:var(--sage);
  font-weight:600; font-size:1.05rem;
  flex-shrink:0;
}
.admin-row-body { flex:1; min-width:0; }
.admin-row-title { font-weight:600; color:var(--ink); margin-bottom:2px; }
.admin-row-meta { font-size:.8rem; color:#888; }
.admin-row-actions { display:flex; gap:6px; flex-shrink:0; flex-wrap:wrap; }
.admin-action-btn {
  padding:6px 12px;
  font-size:.78rem; font-weight:600;
  border:none; border-radius:50px;
  cursor:pointer; font-family:'DM Sans',sans-serif;
  transition:all .2s;
}
.admin-action-btn.primary { background:var(--sage); color:white; }
.admin-action-btn.primary:hover { background:#5a8a6a; }
.admin-action-btn.secondary { background:var(--sand); color:var(--ink); }
.admin-action-btn.secondary:hover { background:rgba(0,0,0,.06); }
.admin-action-btn.danger { background:#fee; color:#c33; }
.admin-action-btn.danger:hover { background:#fdd; }

.admin-code-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  background:var(--sand);
  border:1.5px dashed rgba(0,0,0,.15);
  border-radius:8px;
  font-family:'DM Mono',monospace; font-weight:700;
  font-size:1.05rem; letter-spacing:.15em;
  color:var(--ink);
  cursor:pointer;
  transition:all .2s;
}
.admin-code-pill:hover { border-color:var(--sage); background:var(--sagebg); }
.admin-code-pill.used { opacity:.4; cursor:default; text-decoration:line-through; }

.admin-status-pill {
  display:inline-block; padding:3px 10px;
  border-radius:50px;
  font-size:.7rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase;
}
.admin-status-pill.active   { background:rgba(123,174,138,.15); color:#3a6b48; }
.admin-status-pill.pending  { background:rgba(244,180,0,.15);   color:#a07c00; }
.admin-status-pill.suspended{ background:rgba(232,96,76,.15);   color:#a83a2c; }

.admin-empty {
  text-align:center; padding:40px 20px;
  color:#999;
  background:white; border-radius:14px;
  border:2px dashed rgba(0,0,0,.08);
}
.admin-empty .emoji { font-size:2.5rem; display:block; margin-bottom:10px; }

@media (max-width: 768px) {
  .admin-row { flex-wrap:wrap; }
  .admin-row-actions { width:100%; margin-top:6px; }
  .admin-quick-btn { padding:8px 12px !important; font-size:.78rem !important; }
}

/* ═══════════════════════════════════════════════════
   📄 DOCUMENTS — tabs, status badges, upload modal
═══════════════════════════════════════════════════ */
.docs-tabs {
  display:flex; gap:6px; flex-wrap:wrap;
  border-bottom:1px solid rgba(0,0,0,.06);
  padding-bottom:0;
  margin-bottom:8px;
}
.docs-tab {
  padding:9px 16px;
  background:none; border:none;
  border-bottom:2px solid transparent;
  font-family:'DM Sans',sans-serif; font-size:.85rem; font-weight:600;
  color:#888; cursor:pointer;
  transition:all .2s;
}
.docs-tab:hover { color:var(--ink); }
.docs-tab.active {
  color:var(--ink);
  border-bottom-color:var(--sage);
}

.doc-status {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px;
  border-radius:50px;
  font-size:.7rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
}
.doc-status.to-sign  { background:rgba(244,180,0,.15); color:#a07c00; }
.doc-status.signed   { background:rgba(123,174,138,.15); color:#3a6b48; }
.doc-status.shared   { background:rgba(96,148,232,.15); color:#2a5da8; }
.doc-status.pending  { background:rgba(232,96,76,.12); color:#a83a2c; }

.doc-item-meta-line {
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  margin-top:4px;
}

/* Upload modal */
.upload-modal-overlay {
  position:fixed; inset:0; z-index:99999;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.upload-modal {
  background:white;
  border-radius:20px;
  padding:28px;
  max-width:480px; width:100%;
  max-height:90vh; overflow-y:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.3);
}
.upload-modal h3 {
  font-family:'DM Serif Display',serif;
  font-size:1.4rem;
  margin-bottom:6px;
}
.upload-dropzone {
  display:block;
  border:2px dashed rgba(0,0,0,.15);
  border-radius:14px;
  padding:32px 20px;
  text-align:center;
  cursor:pointer;
  transition:all .2s;
  background:var(--sand);
  box-sizing:border-box;
  width:100%;
}
.upload-dropzone:hover {
  border-color:var(--sage);
  background:var(--sagebg);
}
.upload-dropzone.dragover {
  border-color:var(--sage);
  background:var(--sagebg);
  transform:scale(1.02);
}
.upload-dropzone .icon { font-size:2.5rem; display:block; margin-bottom:10px; }
.upload-dropzone .label { display:block; font-weight:600; color:var(--ink); margin-bottom:4px; }
.upload-dropzone .hint { display:block; font-size:.78rem; color:#888; }
.upload-dropzone input[type=file] { display:none; }

.upload-file-info {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  background:var(--sagebg);
  border:1.5px solid var(--sage);
  border-radius:12px;
  margin-bottom:14px;
}
.upload-file-info .filename { flex:1; min-width:0; font-weight:600; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upload-file-info .size { font-size:.78rem; color:#666; flex-shrink:0; }
.upload-file-info .remove {
  background:none; border:none; cursor:pointer;
  font-size:1.2rem; color:#999;
  padding:4px 8px;
}

.doc-empty {
  text-align:center; padding:48px 24px; color:#999;
  background:white; border-radius:14px;
  border:2px dashed rgba(0,0,0,.08);
}
.doc-empty .emoji { font-size:3rem; display:block; margin-bottom:10px; }

/* PDF / image preview lightbox */
.preview-overlay {
  position:fixed; inset:0; z-index:100000;
  background:rgba(0,0,0,.85);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.preview-content {
  background:white;
  border-radius:14px;
  max-width:90vw; max-height:90vh;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.preview-content iframe, .preview-content img {
  width:80vw; height:80vh;
  max-width:900px;
  border:none;
  display:block;
  object-fit:contain;
  background:white;
}
.preview-close {
  position:absolute; top:14px; right:14px;
  background:white; border:none;
  width:40px; height:40px;
  border-radius:50%;
  font-size:1.4rem;
  cursor:pointer;
  z-index:1;
}

/* ═══════════════════════════════════════════════════
   ✅ PRÉSENCES — pointage du jour
═══════════════════════════════════════════════════ */
.presence-row {
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  background:white;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.05);
  transition:all .2s;
}
.presence-row.present  { border-left:4px solid var(--sage); }
.presence-row.absent   { border-left:4px solid var(--coral); opacity:.85; }
.presence-row.pending  { border-left:4px solid rgba(0,0,0,.08); }
.presence-row.departed { border-left:4px solid var(--sky); }

.presence-avatar {
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--sagebg); color:var(--sage);
  font-weight:700; font-size:1.1rem;
  flex-shrink:0;
}
.presence-body { flex:1; min-width:0; }
.presence-name { font-weight:600; color:var(--ink); }
.presence-group { font-size:.78rem; color:#888; }
.presence-times {
  display:flex; gap:6px; align-items:center; flex-wrap:wrap;
  font-size:.85rem;
}
.presence-time-pill {
  background:var(--sand);
  padding:5px 11px; border-radius:50px;
  font-family:'DM Mono', monospace; font-weight:600;
}
.presence-actions {
  display:flex; gap:6px; flex-wrap:wrap; flex-shrink:0;
}

@media (max-width:768px) {
  .presence-row { flex-wrap:wrap; }
  .presence-actions { width:100%; margin-top:6px; }
}

/* ═══════════════════════════════════════════════════
   🔍 ADMIN GLOBAL SEARCH
═══════════════════════════════════════════════════ */
.admin-search-wrap {
  position:relative;
  margin-bottom:16px;
}
.admin-search-input {
  width:100%;
  padding:12px 16px 12px 42px;
  border:1.5px solid rgba(0,0,0,.1);
  border-radius:14px;
  font-size:.95rem;
  background:white;
  box-sizing:border-box;
  transition:border-color .2s, box-shadow .2s;
}
.admin-search-input:focus {
  outline:none;
  border-color:var(--sage);
  box-shadow:0 0 0 3px rgba(123,174,138,.15);
}
.admin-search-wrap::before {
  content:"🔍";
  position:absolute;
  left:14px; top:50%;
  transform:translateY(-50%);
  font-size:1.05rem;
  opacity:.6;
  pointer-events:none;
}
.admin-search-results {
  position:absolute;
  top:calc(100% + 6px); left:0; right:0;
  background:white;
  border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,.12);
  max-height:400px;
  overflow-y:auto;
  z-index:1000;
  display:none;
}
.admin-search-results.open { display:block; }
.admin-search-result {
  display:flex; align-items:center; gap:12px;
  padding:11px 16px;
  cursor:pointer;
  border-bottom:1px solid rgba(0,0,0,.04);
  transition:background .15s;
}
.admin-search-result:last-child { border-bottom:none; }
.admin-search-result:hover, .admin-search-result.active {
  background:var(--sand);
}
.admin-search-result .av {
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--sagebg); color:var(--sage);
  font-weight:700; font-size:.85rem;
  flex-shrink:0;
}
.admin-search-result .body { flex:1; min-width:0; }
.admin-search-result .title { font-weight:600; color:var(--ink); font-size:.9rem; }
.admin-search-result .sub { font-size:.74rem; color:#888; }
.admin-search-result .pill {
  font-size:.65rem; padding:3px 9px;
  background:var(--sagebg); color:var(--sage);
  border-radius:50px;
  text-transform:uppercase; letter-spacing:.04em; font-weight:700;
}

/* ═══════════════════════════════════════════════════
   📸 REPORT PHOTOS — staff upload + parent view
═══════════════════════════════════════════════════ */
.rep-photos-row {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
  gap:8px;
}
.rep-photo-thumb {
  position:relative;
  aspect-ratio:1;
  border-radius:10px;
  overflow:hidden;
  background:var(--sand);
  border:1.5px solid rgba(0,0,0,.05);
}
.rep-photo-thumb img {
  width:100%; height:100%; object-fit:cover; display:block;
  cursor:pointer;
}
.rep-photo-remove {
  position:absolute; top:4px; right:4px;
  background:rgba(0,0,0,.7); color:white;
  border:none; border-radius:50%;
  width:22px; height:22px;
  cursor:pointer; font-size:.95rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.rep-photo-add {
  aspect-ratio:1;
  border:2px dashed rgba(0,0,0,.15);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  cursor:pointer;
  font-size:1.5rem; color:#999;
  background:var(--sand);
  transition:all .2s;
}
.rep-photo-add:hover {
  border-color:var(--sage);
  background:var(--sagebg);
  color:var(--sage);
}
.rep-photo-add small { font-size:.65rem; font-weight:600; margin-top:2px; }

.dr-photo-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:8px;
  margin-top:8px;
}
.dr-photo {
  aspect-ratio:1;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  background:var(--sand);
}
.dr-photo img { width:100%; height:100%; object-fit:cover; display:block; }

/* ═══════════════════════════════════════════════════
   💶 FACTURES — cards
═══════════════════════════════════════════════════ */
.facture-card {
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  background:white;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.05);
  transition:all .2s;
}
.facture-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.05); border-color:rgba(0,0,0,.1); }
.facture-card.overdue { border-left:4px solid var(--coral); }
.facture-card.pending { border-left:4px solid var(--sun); }
.facture-card.paid    { border-left:4px solid var(--sage); }
.fac-icon {
  width:50px; height:50px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; flex-shrink:0;
}
.fac-body { flex:1; min-width:0; }
.fac-title { font-weight:600; color:var(--ink); margin-bottom:2px; }
.fac-meta { font-size:.78rem; color:#888; }
.fac-amount {
  font-family:'DM Serif Display',serif; font-size:1.3rem;
  color:var(--ink); flex-shrink:0;
  text-align:right;
}
.fac-amount small { display:block; font-family:'DM Sans',sans-serif; font-size:.65rem; color:#999; font-weight:500; }

@media (max-width: 768px) {
  .facture-card { flex-wrap:wrap; padding:14px; }
  .fac-amount { width:100%; text-align:left; font-size:1.4rem; margin-top:6px; }
}

/* ═══════════════════════════════════════════════════
   📅 EVENTS — cards with RSVP
═══════════════════════════════════════════════════ */
.event-card {
  display:flex; gap:16px;
  padding:18px 20px;
  background:white;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.05);
  transition:all .2s;
}
.event-card:hover { box-shadow:0 4px 18px rgba(0,0,0,.06); }
.event-card.past { opacity:.55; }
.event-date-block {
  flex-shrink:0;
  width:64px;
  text-align:center;
  padding:10px 4px;
  border-radius:14px;
  background:var(--sagebg);
  color:var(--sage);
}
.event-date-block .day {
  font-family:'DM Serif Display',serif;
  font-size:1.6rem; line-height:1;
}
.event-date-block .month {
  font-size:.68rem; font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-top:2px;
}
.event-card.outing  .event-date-block { background:#e1f0e6; color:#3a6b48; }
.event-card.meeting .event-date-block { background:var(--skybg); color:#2a5da8; }
.event-card.party   .event-date-block { background:var(--coralbg); color:#a83a2c; }
.event-card.closure .event-date-block { background:#f5dbd6; color:#a83a2c; }
.event-card.other   .event-date-block { background:var(--sand); color:#666; }

.event-body { flex:1; min-width:0; }
.event-type-pill {
  display:inline-flex; padding:3px 10px;
  border-radius:50px;
  font-size:.68rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  margin-bottom:6px;
}
.event-card.outing  .event-type-pill { background:#e1f0e6; color:#3a6b48; }
.event-card.meeting .event-type-pill { background:var(--skybg); color:#2a5da8; }
.event-card.party   .event-type-pill { background:var(--coralbg); color:#a83a2c; }
.event-card.closure .event-type-pill { background:#f5dbd6; color:#a83a2c; }
.event-card.other   .event-type-pill { background:var(--sand); color:#666; }

.event-title {
  font-family:'DM Serif Display',serif;
  font-size:1.15rem;
  color:var(--ink);
  margin-bottom:4px;
}
.event-meta {
  font-size:.8rem; color:#888;
  margin-bottom:8px;
}
.event-desc {
  font-size:.88rem; color:#555;
  line-height:1.55;
  white-space:pre-wrap;
}
.event-rsvp-row {
  display:flex; gap:8px; flex-wrap:wrap;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(0,0,0,.05);
}
.rsvp-btn {
  padding:7px 14px;
  border:1.5px solid rgba(0,0,0,.1);
  background:white;
  border-radius:50px;
  font-size:.78rem; font-weight:600;
  cursor:pointer; font-family:'DM Sans',sans-serif;
  transition:all .2s;
}
.rsvp-btn:hover { background:var(--sand); }
.rsvp-btn.active.yes { background:var(--sage); color:white; border-color:var(--sage); }
.rsvp-btn.active.no  { background:var(--coral); color:white; border-color:var(--coral); }
.rsvp-stats {
  font-size:.74rem; color:#888;
  align-self:center;
  margin-left:auto;
}

@media (max-width: 768px) {
  .event-card { flex-direction:column; padding:16px; }
  .event-date-block { width:auto; display:inline-flex; gap:8px; padding:6px 12px; }
  .event-date-block .day, .event-date-block .month { display:inline; font-size:.95rem; }
}

/* ═══════════════════════════════════════════════════
   ⚙️ SETTINGS — page layout, switches, theme
═══════════════════════════════════════════════════ */
.topbar-icon-btn {
  background:none; border:none;
  width:40px; height:40px;
  border-radius:50%;
  font-size:1.15rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
  flex-shrink:0;
}
.topbar-icon-btn:hover { background:rgba(0,0,0,.04); }

/* Profile photo section */
.profile-photo-section {
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.profile-photo-preview {
  width:96px; height:96px;
  border-radius:50%;
  background:var(--sagebg);
  color:var(--sage);
  display:flex; align-items:center; justify-content:center;
  font-family:'DM Serif Display', serif;
  font-size:2.4rem; font-weight:600;
  overflow:hidden;
  flex-shrink:0;
  border:3px solid white;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}
.profile-photo-preview img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.profile-photo-actions {
  flex:1; min-width:200px;
}

/* Avatar in topbar — support image */
.user-av {
  overflow:hidden;
}
.user-av img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* Messaging avatars support image too */
.msg-item-av, .msg-conv-av, .presence-avatar {
  overflow:hidden;
}
.msg-item-av img, .msg-conv-av img, .presence-avatar img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

.settings-toggle-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid rgba(0,0,0,.05);
}
.settings-toggle-row:last-child { border-bottom:none; }
.settings-toggle-row > div:first-child { flex:1; min-width:0; }

/* iOS-style toggle switch */
.ki-switch {
  position:relative; display:inline-block;
  width:46px; height:26px;
  flex-shrink:0;
}
.ki-switch input { opacity:0; width:0; height:0; }
.ki-switch-slider {
  position:absolute; cursor:pointer;
  top:0; left:0; right:0; bottom:0;
  background:#ccc;
  transition:.3s;
  border-radius:26px;
}
.ki-switch-slider::before {
  position:absolute; content:"";
  height:20px; width:20px;
  left:3px; bottom:3px;
  background:white;
  transition:.3s;
  border-radius:50%;
  box-shadow:0 2px 4px rgba(0,0,0,.2);
}
.ki-switch input:checked + .ki-switch-slider { background:var(--sage); }
.ki-switch input:checked + .ki-switch-slider::before { transform:translateX(20px); }
.ki-switch input:focus + .ki-switch-slider { box-shadow:0 0 0 3px rgba(123,174,138,.2); }

/* Theme picker */
.theme-selector {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:12px;
}
.theme-option {
  cursor:pointer;
  border:2px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:14px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:all .2s;
}
.theme-option:hover { border-color:var(--sage); }
.theme-option input { display:none; }
.theme-option:has(input:checked) {
  border-color:var(--sage);
  background:var(--sagebg);
}
.theme-preview {
  width:80px; height:50px;
  border-radius:8px;
  position:relative;
  border:1px solid rgba(0,0,0,.06);
}
.theme-preview.light { background:linear-gradient(135deg,#F7F3EE 0%,#FFFFFF 100%); }
.theme-preview.dark  { background:linear-gradient(135deg,#1F1F23 0%,#2C2C30 100%); }
.theme-preview.auto  { background:linear-gradient(90deg,#F7F3EE 0%,#F7F3EE 50%,#1F1F23 50%,#2C2C30 100%); }
.theme-option span { font-weight:600; font-size:.85rem; }

/* Color picker for admin accent */
.color-picker-row {
  display:flex; gap:14px; flex-wrap:wrap;
}
.color-option {
  cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.color-option input { display:none; }
.color-swatch {
  width:52px; height:52px;
  border-radius:50%;
  transition:transform .2s, box-shadow .2s;
  border:3px solid white;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
.color-option:hover .color-swatch { transform:scale(1.05); }
.color-option:has(input:checked) .color-swatch {
  box-shadow:0 0 0 3px var(--ink);
  transform:scale(1.08);
}
.color-option span { font-size:.75rem; font-weight:600; }

/* ═══════════════════════════════════════════════════
   🌙 DARK MODE — full theme override
   Limité au portail (html.portal-open) : le thème mémorisé est réappliqué au
   démarrage, et ne doit jamais assombrir le site public.
═══════════════════════════════════════════════════ */
html.portal-open body.dark-mode {
  --sand:#1F1F23;
  --white:#15151A;
  --ink:#F5F4F1;
  --ink60:#B8B7B5;
  --ink30:#555;
  --sagebg:#1E2A23;
  --sunbg:#2A2417;
  --coralbg:#2A1A17;
  --skybg:#1A2530;
  --lavenderbg:#252035;
}
html.portal-open body.dark-mode #portal-dashboard { background:#15151A; }
html.portal-open body.dark-mode .card,
html.portal-open body.dark-mode .doc-item,
html.portal-open body.dark-mode .facture-card,
html.portal-open body.dark-mode .event-card,
html.portal-open body.dark-mode .admin-row,
html.portal-open body.dark-mode .daily-report-card,
html.portal-open body.dark-mode .presence-row,
html.portal-open body.dark-mode .msg-layout,
html.portal-open body.dark-mode .msg-list,
html.portal-open body.dark-mode .msg-conversation,
html.portal-open body.dark-mode .msg-item,
html.portal-open body.dark-mode .upload-modal,
html.portal-open body.dark-mode .preview-content,
html.portal-open body.dark-mode .notif-toast {
  background:#1F1F23;
  color:#F5F4F1;
  border-color:rgba(255,255,255,.08);
}
html.portal-open body.dark-mode #topbar,
html.portal-open body.dark-mode #sidebar-parent,
html.portal-open body.dark-mode #sidebar-equipe,
html.portal-open body.dark-mode #sidebar-admin {
  background:#1A1A1F;
  border-color:rgba(255,255,255,.08);
}
html.portal-open body.dark-mode .stat-card { background:#1F1F23; border-color:rgba(255,255,255,.05); }
html.portal-open body.dark-mode .sidebar-link { color:#B8B7B5; }
html.portal-open body.dark-mode .sidebar-link:hover { background:#26262B; color:#F5F4F1; }
html.portal-open body.dark-mode .sidebar-link.active { background:var(--sage); color:white; }
html.portal-open body.dark-mode .topbar-icon-btn:hover { background:rgba(255,255,255,.06); }
html.portal-open body.dark-mode .admin-quick-btn { background:#26262B; color:#F5F4F1; border-color:rgba(255,255,255,.08); }
html.portal-open body.dark-mode .admin-quick-btn:hover { background:#33333A; }
html.portal-open body.dark-mode .docs-tab { color:#888; }
html.portal-open body.dark-mode .docs-tab.active { color:#F5F4F1; border-bottom-color:var(--sage); }
html.portal-open body.dark-mode input[type="text"],
html.portal-open body.dark-mode input[type="email"],
html.portal-open body.dark-mode input[type="password"],
html.portal-open body.dark-mode input[type="number"],
html.portal-open body.dark-mode input[type="date"],
html.portal-open body.dark-mode input[type="time"],
html.portal-open body.dark-mode input[type="month"],
html.portal-open body.dark-mode select,
html.portal-open body.dark-mode textarea {
  background:#26262B;
  color:#F5F4F1;
  border-color:rgba(255,255,255,.1);
}
html.portal-open body.dark-mode input[readonly] { background:#1A1A1F; color:#888; }
html.portal-open body.dark-mode .msg-bubble.them .bubble { background:#26262B; color:#F5F4F1; }
html.portal-open body.dark-mode .msg-input-bar { background:#1F1F23; border-color:rgba(255,255,255,.08); }
html.portal-open body.dark-mode .dr-meal, html.portal-open body.dark-mode .dr-note { background:#26262B; border-color:rgba(255,255,255,.05); }
html.portal-open body.dark-mode .doc-empty, html.portal-open body.dark-mode .admin-empty { background:#1F1F23; border-color:rgba(255,255,255,.08); color:#888; }
html.portal-open body.dark-mode .pwa-banner { background:linear-gradient(135deg, #1E2A23 0%, #2A2417 100%); border-color:rgba(123,174,138,.2); }

/* ═══════════════════════════════════════════════════
   📲 PWA install + 🔔 notification banners
═══════════════════════════════════════════════════ */
.pwa-banner {
  display:flex; align-items:center; gap:14px;
  margin:12px 16px 0;
  padding:14px 16px;
  background:linear-gradient(135deg, var(--sagebg) 0%, #FEF6E4 100%);
  border:1px solid rgba(123,174,138,.3);
  border-radius:16px;
  box-shadow:0 4px 14px rgba(0,0,0,.05);
  animation:pwaBannerSlide .4s cubic-bezier(.16,1,.3,1);
  position:relative; z-index:30;
}
@keyframes pwaBannerSlide {
  from { transform:translateY(-10px); opacity:0; }
  to   { transform:translateY(0); opacity:1; }
}
.pwa-banner-icon {
  width:44px; height:44px; flex-shrink:0;
  background:white; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
}
.pwa-banner-body { flex:1; min-width:0; }
.pwa-banner-title { font-weight:600; color:var(--ink); font-size:.95rem; margin-bottom:2px; }
.pwa-banner-text { font-size:.8rem; color:#666; line-height:1.4; }
.pwa-banner-actions { display:flex; gap:8px; flex-shrink:0; align-items:center; }
.pwa-banner-dismiss, .pwa-banner-install {
  font-family:'DM Sans',sans-serif; font-weight:600;
  border:none; cursor:pointer;
  padding:8px 14px; border-radius:50px;
  font-size:.78rem;
  transition:all .2s;
}
.pwa-banner-dismiss { background:transparent; color:#888; }
.pwa-banner-dismiss:hover { background:rgba(0,0,0,.04); color:var(--ink); }
.pwa-banner-install { background:var(--sage); color:white; }
.pwa-banner-install:hover { background:#5a8a6a; }

@media (max-width: 768px) {
  .pwa-banner { 
    margin:8px 10px 0; padding:11px 13px; flex-wrap:wrap;
    gap:10px;
  }
  .pwa-banner-icon { width:38px; height:38px; font-size:1.25rem; }
  .pwa-banner-title { font-size:.88rem; }
  .pwa-banner-text { font-size:.74rem; }
  .pwa-banner-actions { width:100%; justify-content:flex-end; margin-top:4px; }
}

/* In-app toast for foreground notifications */
.notif-toast {
  position:fixed; top:20px; right:20px;
  background:white;
  border-radius:14px;
  padding:14px 18px;
  box-shadow:0 12px 36px rgba(0,0,0,.15);
  display:flex; gap:12px; align-items:flex-start;
  max-width:360px;
  z-index:100002;
  animation:toastSlide .3s cubic-bezier(.16,1,.3,1);
  cursor:pointer;
  border-left:4px solid var(--sage);
}
@keyframes toastSlide {
  from { transform:translateX(20px); opacity:0; }
  to   { transform:translateX(0); opacity:1; }
}
.notif-toast.leaving { animation:toastLeave .3s forwards; }
@keyframes toastLeave {
  to { transform:translateX(20px); opacity:0; }
}
.notif-toast-icon { font-size:1.4rem; flex-shrink:0; }
.notif-toast-body { flex:1; min-width:0; }
.notif-toast-title { font-weight:600; color:var(--ink); margin-bottom:2px; }
.notif-toast-text { font-size:.85rem; color:#666; line-height:1.4; }
.notif-toast-close {
  background:none; border:none; cursor:pointer;
  color:#999; font-size:1.2rem; padding:0 4px;
}
@media (max-width:768px) {
  .notif-toast { top:10px; right:10px; left:10px; max-width:none; }
}

/* ═══════════════════════════════════════════════════
   💬 MESSAGING — refinements (unread, mobile drawer)
═══════════════════════════════════════════════════ */
.msg-item { cursor:pointer; }
.msg-item.unread .msg-item-name { font-weight:700; }
.msg-item.unread .msg-item-preview { color:var(--ink); font-weight:500; }
.msg-item-unread-count {
  background:var(--coral); color:white;
  font-size:.7rem; font-weight:700;
  min-width:20px; height:20px; padding:0 6px;
  border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  margin-left:6px;
}
.msg-empty-list {
  padding:40px 24px; text-align:center; color:#999;
}
.msg-empty-list .emoji { font-size:2.5rem; display:block; margin-bottom:8px; }

/* Sidebar badge for unread count */
.sidebar-badge {
  background:var(--coral) !important; color:white !important;
}

/* Mobile : when a conversation is open, slide list off-screen */
@media (max-width: 768px) {
  .msg-layout {
    grid-template-columns:1fr !important;
    height:auto !important;
    min-height:calc(100vh - 200px) !important;
    position:relative;
  }
  .msg-list {
    border-right:none !important;
    border-bottom:1px solid rgba(0,0,0,.06);
  }
  .msg-layout.conv-open .msg-list { display:none; }
  .msg-layout:not(.conv-open) .msg-conversation { display:none; }
  /* Back button on mobile */
  .msg-conv-header { gap:10px; }
  .msg-conv-back {
    background:none; border:none; cursor:pointer;
    font-size:1.3rem; padding:4px 8px; color:var(--ink);
    border-radius:8px; flex-shrink:0;
  }
  .msg-conv-back:hover { background:rgba(0,0,0,.04); }
}
.msg-conv-back { display:none; }
@media (max-width: 768px) { .msg-conv-back { display:inline-block; } }

/* ═══════════════════════════════════════════════════
   📋 DAILY REPORT styles (parent view + staff editor)
═══════════════════════════════════════════════════ */
/* Parent-side report cards */
.daily-report-card {
  background:white;
  border-radius:16px;
  padding:20px;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 2px 10px rgba(0,0,0,.03);
  transition:all .2s;
}
.daily-report-card:hover { box-shadow:0 6px 22px rgba(0,0,0,.06); }
.dr-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:14px; padding-bottom:14px;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.dr-date {
  font-family:'DM Serif Display',serif; font-size:1.15rem;
  color:var(--ink);
}
.dr-time { font-size:.72rem; color:#999; }
.dr-mood-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:50px;
  font-size:.85rem; font-weight:600;
}
.dr-mood-badge.good     { background:rgba(123,174,138,.15); color:#3a6b48; }
.dr-mood-badge.mixed    { background:rgba(244,180,0,.15);  color:#a07c00; }
.dr-mood-badge.difficult{ background:rgba(232,96,76,.15);  color:#a83a2c; }
.dr-section {
  margin-bottom:12px;
}
.dr-section-title {
  font-size:.7rem; font-weight:700; color:#888;
  letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:6px;
}
.dr-meals {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.dr-meal {
  background:var(--sand); padding:10px;
  border-radius:10px; text-align:center;
  font-size:.82rem;
}
.dr-meal-icon { font-size:1.3rem; display:block; margin-bottom:2px; }
.dr-meal-status { font-weight:600; color:var(--ink); }
.dr-meal-status.full     { color:#3a6b48; }
.dr-meal-status.partial  { color:#a07c00; }
.dr-meal-status.refused  { color:#a83a2c; }
.dr-naps {
  display:flex; flex-wrap:wrap; gap:8px;
}
.dr-nap-pill {
  background:rgba(96,148,232,.12); color:#2a5da8;
  padding:6px 12px; border-radius:50px;
  font-size:.82rem; font-weight:500;
}
.dr-tags {
  display:flex; flex-wrap:wrap; gap:6px;
}
.dr-tag {
  background:var(--sagebg); color:var(--sage);
  padding:5px 11px; border-radius:50px;
  font-size:.78rem; font-weight:500;
}
.dr-note {
  background:#FEF6E4;
  border-radius:12px; padding:14px 16px;
  font-size:.92rem; line-height:1.55;
  color:#5a4900;
  border-left:3px solid var(--sun);
}
.dr-empty {
  text-align:center; padding:48px 24px; color:#999;
  background:white; border-radius:14px;
  border:2px dashed rgba(0,0,0,.08);
}
.dr-empty .emoji { font-size:3rem; display:block; margin-bottom:10px; }
.dr-author {
  font-size:.72rem; color:#999; margin-top:6px;
}

/* Staff-side report editor */
.rep-label {
  display:block; font-size:.78rem; font-weight:700; color:#555;
  letter-spacing:.04em; text-transform:uppercase;
  margin-bottom:8px;
}
.rep-mood-row { display:flex; gap:10px; }
.rep-mood { flex:1; cursor:pointer; }
.rep-mood input { position:absolute; opacity:0; pointer-events:none; }
.rep-mood span {
  display:flex; flex-direction:column; align-items:center;
  padding:12px 8px;
  background:var(--sand);
  border:2px solid transparent;
  border-radius:14px;
  font-size:1.8rem; line-height:1;
  transition:all .2s;
}
.rep-mood span small { font-size:.72rem; font-weight:600; color:#666; margin-top:4px; }
.rep-mood input:checked ~ span {
  background:var(--sagebg); border-color:var(--sage); transform:scale(1.03);
}
.rep-select {
  width:100%; padding:9px 12px;
  border:1.5px solid rgba(0,0,0,.1); border-radius:10px;
  font-size:.88rem; background:white;
}
.rep-activity-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:8px;
}
.rep-activity { cursor:pointer; }
.rep-activity input { position:absolute; opacity:0; pointer-events:none; }
.rep-activity span {
  display:block;
  padding:9px 12px;
  background:var(--sand);
  border:2px solid transparent;
  border-radius:50px;
  font-size:.82rem; font-weight:500;
  text-align:center;
  transition:all .2s;
}
.rep-activity input:checked ~ span {
  background:var(--sagebg); border-color:var(--sage); color:var(--sage);
}
.rep-nap-row {
  display:flex; gap:8px; align-items:center;
  padding:9px 12px;
  background:var(--sand); border-radius:10px;
}
.rep-nap-row input[type=time] {
  padding:6px 10px;
  border:1px solid rgba(0,0,0,.1); border-radius:8px;
  font-size:.85rem; background:white;
}
.rep-nap-remove {
  margin-left:auto;
  background:rgba(232,96,76,.1); color:#a83a2c;
  border:none; border-radius:6px;
  width:28px; height:28px; cursor:pointer; font-size:1.1rem;
}

@media (max-width: 768px) {
  .rep-mood-row { gap:6px; }
  .rep-mood span { padding:9px 4px; font-size:1.4rem; }
  .dr-meals { grid-template-columns:1fr 1fr 1fr; gap:6px; }
  .dr-meal { padding:8px 4px; font-size:.74rem; }
}

/* ═══════════════════════════════════════════════════
   ✨ MAGICAL ENHANCEMENTS — animations & immersion ✨
═══════════════════════════════════════════════════ */

/* Scroll progress bar */
#scroll-progress {
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--coral),var(--sun),var(--sage),var(--sky));
  background-size:300% 100%;
  z-index:200; transition:width .15s ease-out;
  animation:gradientShift 4s ease infinite;
  box-shadow:0 0 10px rgba(232,96,76,.5);
}
@keyframes gradientShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* Page preloader */
#preloader {
  position:fixed; inset:0; z-index:99999;
  background:#FFFFFF;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:24px;
  transition:opacity .6s ease, visibility .6s ease;
}
#preloader.hide { opacity:0; visibility:hidden; }
.preloader-logo {
  width:auto; height:240px; max-width:90vw; display:block;
  animation:preloaderFloat 2.4s ease-in-out infinite;
  object-fit:contain;
}
@keyframes preloaderFloat {
  0%,100% { transform:translateY(0) scale(1); }
  50%     { transform:translateY(-10px) scale(1.04); }
}
.preloader-ring {
  position:absolute; width:260px; height:260px;
  border:2px solid transparent;
  border-top-color:var(--coral);
  border-right-color:var(--sun);
  border-radius:50%;
  animation:ringSpin 2s linear infinite;
  opacity:.35;
}
@keyframes ringSpin { to { transform:rotate(360deg); } }
.preloader-stage {
  position:relative; display:flex; align-items:center; justify-content:center;
  width:260px; height:260px;
}
.preloader-text {
  font-family:'DM Serif Display',serif; font-size:1rem; color:var(--ink60);
  letter-spacing:.12em; text-transform:uppercase;
  animation:textPulse 2s ease-in-out infinite;
}
@keyframes textPulse { 0%,100%{opacity:.5} 50%{opacity:1} }
.preloader-dots { display:flex; gap:6px; margin-top:4px; }
.preloader-dots span {
  width:8px; height:8px; border-radius:50%; background:var(--coral);
  animation:dotBounce 1.4s ease-in-out infinite;
}
.preloader-dots span:nth-child(2){ background:var(--sun); animation-delay:.2s }
.preloader-dots span:nth-child(3){ background:var(--sage); animation-delay:.4s }
.preloader-dots span:nth-child(4){ background:var(--sky); animation-delay:.6s }
@keyframes dotBounce { 0%,80%,100%{transform:translateY(0);opacity:.5} 40%{transform:translateY(-12px);opacity:1} }

/* ── HERO MAGIC ── */
#hero { position:relative; }
.hero-floaters {
  position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1;
}
.hero-floater {
  position:absolute; font-size:2rem;
  animation:floatUp 12s linear infinite;
  opacity:0;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.08));
}
@keyframes floatUp {
  0%   { transform:translateY(110vh) rotate(0deg) scale(.8); opacity:0; }
  10%  { opacity:.7; }
  50%  { transform:translateY(50vh) rotate(180deg) scale(1); opacity:.5; }
  90%  { opacity:.4; }
  100% { transform:translateY(-20vh) rotate(360deg) scale(.8); opacity:0; }
}

/* Hero title shine effect */
h1 em {
  background:linear-gradient(120deg, var(--coral) 0%, #FF8B6B 25%, var(--coral) 50%, #FF8B6B 75%, var(--coral) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmerText 3s ease-in-out infinite;
}
@keyframes shimmerText { 0%,100%{background-position:0% center} 50%{background-position:200% center} }

/* Hero card subtle float */
.hero-card { animation:gentleFloat 6s ease-in-out infinite; }
@keyframes gentleFloat {
  0%,100% { transform:translateY(0); box-shadow:0 32px 80px rgba(0,0,0,.1); }
  50%     { transform:translateY(-10px); box-shadow:0 42px 100px rgba(0,0,0,.15); }
}
.hero-chip { animation:chipPulse 3s ease-in-out infinite; }
.hero-chip.chip2 { animation-delay:1.5s }
@keyframes chipPulse {
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.06); box-shadow:0 12px 36px rgba(232,96,76,.3); }
}

/* Hero buttons shimmer */
.btn-fill {
  position:relative; overflow:hidden;
}
.btn-fill::before {
  content:''; position:absolute; top:0; left:-100%;
  width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transition:left .6s;
}
.btn-fill:hover::before { left:100%; }

/* ── REVEAL with bounce ── */
.rv, .rvl, .rvr { transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }

/* ── GROUPS — bouncing emojis & glow ── */
.group-card { 
  position:relative; cursor:pointer;
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s; 
}
.group-card::before {
  content:''; position:absolute; inset:0; border-radius:28px;
  background:radial-gradient(circle at 50% 0%, currentColor, transparent 70%);
  opacity:0; transition:opacity .4s; pointer-events:none;
}
.group-card:hover::before { opacity:.08; }
.group-card:hover { transform:translateY(-12px) rotate(-1deg); }
.group-card:hover .group-emoji { animation:emojiBounce .6s ease; }
.group-card:nth-child(1) { color:var(--sage); }
.group-card:nth-child(2) { color:var(--sun); }
.group-card:nth-child(3) { color:var(--sky); }
.group-card:nth-child(4) { color:var(--coral); }
@keyframes emojiBounce {
  0%,100% { transform:translateY(0) scale(1); }
  30%     { transform:translateY(-15px) scale(1.2) rotate(-8deg); }
  60%     { transform:translateY(-8px) scale(1.1) rotate(6deg); }
}
.group-emoji { display:inline-block; transition:transform .3s; }

/* Idle gentle wiggle for emojis */
.group-card .group-emoji { animation:idleWiggle 4s ease-in-out infinite; }
.group-card:nth-child(2) .group-emoji { animation-delay:1s }
.group-card:nth-child(3) .group-emoji { animation-delay:2s }
.group-card:nth-child(4) .group-emoji { animation-delay:3s }
@keyframes idleWiggle {
  0%,100% { transform:rotate(-3deg); }
  50%     { transform:rotate(3deg); }
}

/* ── PILLARS sparkle on hover ── */
.pillar { position:relative; overflow:hidden; cursor:pointer; }
.pillar::after {
  content:''; position:absolute; top:50%; left:50%;
  width:0; height:0; border-radius:50%;
  background:radial-gradient(circle, rgba(123,174,138,.3) 0%, transparent 70%);
  transition:width .5s ease, height .5s ease;
  transform:translate(-50%, -50%);
  pointer-events:none;
}
.pillar:hover::after { width:300px; height:300px; }
.pillar:hover .pillar-icon { animation:iconWobble .5s ease; }
@keyframes iconWobble {
  0%,100% { transform:rotate(0); }
  25%     { transform:rotate(-15deg) scale(1.1); }
  75%     { transform:rotate(15deg) scale(1.1); }
}

/* ── ACTIVITY ROWS — slide indicator ── */
.act-row { position:relative; transition:padding-left .3s, background .3s; cursor:pointer; }
.act-row:hover { padding-left:12px; background:linear-gradient(to right, var(--sagebg), transparent); border-radius:16px; }
.act-row:hover .act-icon { animation:iconWobble .5s ease; }
.act-row::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:0; background:var(--sage); border-radius:2px;
  transition:height .3s;
}
.act-row:hover::before { height:60%; }

/* ── SPACES bento — playful hover ── */
.sp { transition:transform .4s cubic-bezier(.16,1,.3,1); cursor:pointer; }
.sp::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.15) 0%, transparent 50%);
  opacity:0; transition:opacity .4s; pointer-events:none;
}
.sp:hover::before { opacity:1; }
.sp:hover { transform:scale(1.02) rotate(.3deg); }
.sp img { transition:transform .8s cubic-bezier(.16,1,.3,1); }
.sp:hover img { transform:scale(1.08); }

/* ── FOOD CARDS — bounce on hover ── */
.food-card { cursor:pointer; }
.food-card:hover .fc-i { animation:iconWobble .5s ease; }

/* ── APP feats ── */
.app-feat { transition:transform .3s; }
.app-feat:hover { transform:translateX(8px); }
.app-feat:hover .app-feat-icon { animation:iconWobble .5s ease; }

/* ── TESTI cards ── */
.tc { cursor:pointer; transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s; }
.tc:hover { transform:translateY(-8px) rotate(-.5deg); box-shadow:0 30px 60px rgba(0,0,0,.1); }
.tc-stars { transition:transform .3s; display:inline-block; }
.tc:hover .tc-stars { animation:starPulse .8s ease; }
@keyframes starPulse {
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.2); }
}

/* ── CTA — playful magic ── */
#cta::after {
  content:''; position:absolute; width:400px; height:400px; border-radius:50%;
  background:rgba(255,255,255,.05);
  bottom:-200px; left:-100px;
  animation:slowFloat 15s ease-in-out infinite;
  pointer-events:none;
}
@keyframes slowFloat {
  0%,100% { transform:translate(0,0) scale(1); }
  50%     { transform:translate(50px,-30px) scale(1.1); }
}
.btn-white { position:relative; overflow:hidden; }
.btn-white::before {
  content:''; position:absolute; top:0; left:-100%;
  width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(232,96,76,.2),transparent);
  transition:left .6s;
}
.btn-white:hover::before { left:100%; }

/* ── STATS counters glow ── */
.stat-cell { transition:background .3s; }
.stat-cell:hover { background:rgba(255,255,255,.04); }
.stat-n {
  background:linear-gradient(120deg, white 0%, #F0A500 50%, white 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ── NAV — glowing logo on hover ── */
.nav-logo img { transition:transform .3s, filter .3s; }
.nav-logo:hover img { transform:rotate(-5deg) scale(1.05); }
.btn-espace { position:relative; overflow:hidden; }
.btn-espace::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(123,174,138,.3), transparent);
  transform:translateX(-100%); transition:transform .5s;
}
.btn-espace:hover::after { transform:translateX(100%); }

/* ── ABOUT portrait — gentle hover ── */
.about-portrait { transition:transform .5s cubic-bezier(.16,1,.3,1); }
.about-portrait:hover { transform:scale(1.02) rotate(-1deg); }
.about-badge { transition:transform .3s; }
.about-portrait:hover .about-badge { transform:scale(1.1) rotate(3deg); }

/* ── IMMERSIVE — enhanced particles ── */
.deco { animation:swayBig 10s ease-in-out infinite; }
@keyframes swayBig {
  0%,100% { transform:rotate(-6deg) scale(1); }
  50%     { transform:rotate(6deg) scale(1.05); }
}

/* Sparkles for immersive scenes */
.sparkle {
  position:absolute; pointer-events:none;
  width:12px; height:12px;
  background:radial-gradient(circle, white 0%, transparent 70%);
  border-radius:50%;
  animation:sparkleAnim 3s ease-in-out infinite;
}
@keyframes sparkleAnim {
  0%,100% { opacity:0; transform:scale(0); }
  50%     { opacity:1; transform:scale(1); }
}

/* Scene title entrance */
.sc.on .sc-h1, .sc.on .sc-h2 { animation:titleSlideIn .8s cubic-bezier(.16,1,.3,1) both; }
.sc.on .sc-body, .sc.on .sc-txt { animation:fadeUp 1s cubic-bezier(.16,1,.3,1) .2s both; }
.sc.on .scard { animation:cardBounceIn 1s cubic-bezier(.34,1.56,.64,1) both; }
.sc.on .sc-tag, .sc.on .sc-num { animation:fadeIn .6s ease both; }
@keyframes titleSlideIn {
  0% { opacity:0; transform:translateY(30px); }
  100% { opacity:1; transform:translateY(0); }
}
@keyframes fadeUp {
  0% { opacity:0; transform:translateY(20px); }
  100% { opacity:1; transform:translateY(0); }
}
@keyframes cardBounceIn {
  0% { opacity:0; transform:scale(.7) rotate(-3deg); }
  100% { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* Sc-next button magic */
.sc-next { position:relative; overflow:hidden; transition:transform .3s, box-shadow .3s; }
.sc-next:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(123,174,138,.5); }
.sc-next::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transition:left .5s;
}
.sc-next:hover::before { left:100%; }

/* ── CONFETTI for success modal ── */
.confetti-container {
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  overflow:hidden;
}
.confetti {
  position:absolute; width:10px; height:10px;
  animation:confettiFall 3s ease-in forwards;
}
@keyframes confettiFall {
  0% { transform:translateY(-20px) rotate(0deg); opacity:1; }
  100% { transform:translateY(100vh) rotate(720deg); opacity:0; }
}

/* ── Nav links underline ── */
.nav-links a { position:relative; }
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:50%; transform:translateX(-50%);
  width:0; height:2px; background:var(--coral); border-radius:2px;
  transition:width .3s;
}
.nav-links a:hover::after { width:100%; }

/* ── Soft entrance for hero text ── */
@keyframes heroFadeUp {
  0% { opacity:0; transform:translateY(20px); }
  100% { opacity:1; transform:translateY(0); }
}
.hero-pill, h1, .hero-sub, .hero-btns, .hero-trust {
  animation:heroFadeUp .9s cubic-bezier(.16,1,.3,1) both;
}
.hero-pill { animation-delay:.05s; }
h1 { animation-delay:.15s; }
.hero-sub { animation-delay:.3s; }
.hero-btns { animation-delay:.45s; }
.hero-trust { animation-delay:.6s; }
.hero-right { animation:heroFadeUp 1s cubic-bezier(.16,1,.3,1) .3s both; }

/* ── LANGUAGE SWITCHER ── */
.lang-switch {
  display:flex; align-items:center; gap:6px;
  padding:6px; border-radius:999px;
  background:rgba(0,0,0,.04);
  margin-right:14px;
}
.lang-btn {
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  border:none; background:transparent; cursor:pointer;
  padding:0; overflow:hidden;
  transition:transform .25s, background .25s, box-shadow .25s, filter .25s;
  filter:grayscale(.4) opacity(.55);
}
.lang-btn svg {
  width:22px; height:22px;
  border-radius:50%;
  display:block;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(0,0,0,.08) inset;
}
.lang-btn:hover { transform:scale(1.15); filter:grayscale(0) opacity(1); }
.lang-btn.active {
  background:white; box-shadow:0 4px 12px rgba(0,0,0,.1);
  filter:grayscale(0) opacity(1); transform:scale(1.1);
}
.lang-btn-text {
  font-family:'DM Sans',sans-serif; font-size:.7rem; font-weight:700;
  color:var(--ink60); letter-spacing:.04em;
  filter:none; opacity:.55;
}
.lang-btn-text:hover { opacity:1; color:var(--ink); }
.lang-btn-text.active { color:var(--ink); opacity:1; }
@media (max-width: 768px) {
  .lang-switch { padding:4px; gap:2px; margin-right:8px; }
  .lang-btn { width:26px; height:26px; }
  .lang-btn svg { width:18px; height:18px; }
}

/* ── Header social mini icons (next to lang switcher) ─────────── */
.social-mini {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:4px;
}
.social-mini-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px; height:36px;
  border-radius:50%;
  background:rgba(0,0,0,.03);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .25s ease, box-shadow .3s ease;
  overflow:hidden;
}
.social-mini-link picture,
.social-mini-link img {
  width:100%; height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none; /* clicks pass through to the <a> */
}
.social-mini-link:hover {
  transform:translateY(-2px) scale(1.08);
  background:rgba(0,0,0,.06);
  box-shadow:0 8px 18px rgba(0,0,0,.1);
}
@media (max-width: 920px) {
  /* On tablet, hide the header socials (footer remains) to save horizontal space */
  .social-mini { display:none; }
}

/* ═══════════════════════════════════════════════════
   🎬 PREMIUM SCROLL ANIMATIONS (GSAP-driven)
═══════════════════════════════════════════════════ */

/* ── 2. PINNED HORIZONTAL SCROLL — Groups ── */
#groups-horizontal {
  position:relative;
  overflow:hidden;
  background:var(--sand);
}
.h-track {
  display:flex;
  gap:32px;
  padding:0 8vw;
  height:100vh;
  align-items:center;
  will-change:transform;
}
.h-intro {
  flex-shrink:0;
  width:50vw; max-width:560px;
  padding-right:40px;
}
.h-intro .eyebrow { color:var(--sage); }
.h-intro h2 {
  font-family:'DM Serif Display',serif;
  font-size:clamp(2.5rem, 5vw, 4rem); line-height:1.05;
  margin-top:14px; color:var(--ink);
}
.h-intro h2 em {
  font-style:italic; color:var(--coral);
}
.h-intro p {
  margin-top:24px; font-size:1.05rem; line-height:1.8;
  color:var(--ink60); max-width:440px;
}

/* ── Animated counters in the intro card ── */
.h-counters {
  margin-top:32px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  max-width:440px;
}
.h-counter {
  position:relative;
  padding:18px 14px;
  border-radius:20px;
  background:linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.75) 100%);
  border:1px solid rgba(0,0,0,.04);
  text-align:center;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
  opacity:0;
  transform:translateY(20px);
}
.h-counters.is-in-view .h-counter {
  opacity:1;
  transform:translateY(0);
}
.h-counters.is-in-view .h-counter:nth-child(1) { transition:transform .6s cubic-bezier(.16,1,.3,1) .05s, opacity .6s ease .05s, box-shadow .4s ease; }
.h-counters.is-in-view .h-counter:nth-child(2) { transition:transform .6s cubic-bezier(.16,1,.3,1) .18s, opacity .6s ease .18s, box-shadow .4s ease; }
.h-counters.is-in-view .h-counter:nth-child(3) { transition:transform .6s cubic-bezier(.16,1,.3,1) .31s, opacity .6s ease .31s, box-shadow .4s ease; }
.h-counter:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
/* Each counter has a subtle accent color (matches its themed card) */
.h-counter:nth-child(1) { border-top:3px solid var(--sage); }
.h-counter:nth-child(2) { border-top:3px solid var(--coral); }
.h-counter:nth-child(3) { border-top:3px solid var(--sky); }
.h-counter-num {
  font-family:'DM Serif Display', serif;
  font-size:2.4rem; line-height:1;
  color:var(--ink);
  font-feature-settings:'tnum'; /* tabular numbers so they don't shift width while counting */
  margin-bottom:6px;
}
.h-counter:nth-child(1) .h-counter-num { color:var(--sage); }
.h-counter:nth-child(2) .h-counter-num { color:var(--coral); }
.h-counter:nth-child(3) .h-counter-num { color:var(--sky); }
.h-counter-label {
  display:flex; flex-direction:column; gap:2px;
}
.h-counter-label span {
  font-size:.72rem; font-weight:700;
  color:var(--ink); letter-spacing:.02em;
}
.h-counter-label small {
  font-size:.62rem; color:var(--ink60);
  font-weight:500; letter-spacing:.04em;
}
@media (max-width: 768px) {
  .h-counters { gap:10px; margin-top:24px; }
  .h-counter { padding:14px 8px; border-radius:16px; }
  .h-counter-num { font-size:1.9rem; }
  .h-counter-label span { font-size:.66rem; }
  .h-counter-label small { font-size:.58rem; }
}

/* ── Rich photo animations on group cards ────────────────────────── */

/* Permanent Ken Burns — subtle continuous zoom & pan on each card image
   so photos feel alive even when nothing is happening. Each card uses
   a different keyframe set + delay to avoid synchronized look. */
@keyframes kenburns-1 {
  0%   { transform:scale(1.05) translate(0%, 0%); }
  50%  { transform:scale(1.12) translate(-2%, -1.5%); }
  100% { transform:scale(1.05) translate(0%, 0%); }
}
@keyframes kenburns-2 {
  0%   { transform:scale(1.06) translate(1%, 0%); }
  50%  { transform:scale(1.13) translate(-1.5%, 1.5%); }
  100% { transform:scale(1.06) translate(1%, 0%); }
}
@keyframes kenburns-3 {
  0%   { transform:scale(1.05) translate(-1%, 1%); }
  50%  { transform:scale(1.14) translate(2%, -1%); }
  100% { transform:scale(1.05) translate(-1%, 1%); }
}
@keyframes kenburns-4 {
  0%   { transform:scale(1.07) translate(0%, -1%); }
  50%  { transform:scale(1.12) translate(-1%, 2%); }
  100% { transform:scale(1.07) translate(0%, -1%); }
}
.h-card.c1 .h-card-bg { animation:kenburns-1 18s ease-in-out infinite; }
.h-card.c2 .h-card-bg { animation:kenburns-2 20s ease-in-out infinite -4s; }
.h-card.c3 .h-card-bg { animation:kenburns-3 22s ease-in-out infinite -8s; }
.h-card.c4 .h-card-bg { animation:kenburns-4 19s ease-in-out infinite -12s; }

/* On hover, pause Ken Burns and apply a stronger zoom (the existing
   `.h-card:hover .h-card-bg { transform:scale(1.06) }` rule gets
   overridden — we want a more pronounced reveal). */
.h-card:hover .h-card-bg {
  animation-play-state:paused;
  transform:scale(1.15) !important;
  transition:transform 1s cubic-bezier(.16,1,.3,1);
}

/* Specular shine sweep on hover — a soft white gradient that slides
   diagonally across the card to make it feel polished and premium. */
.h-card-shine {
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,.22) 48%,
    rgba(255,255,255,.45) 50%,
    rgba(255,255,255,.22) 52%,
    transparent 70%);
  background-size:220% 220%;
  background-position:-100% -100%;
  opacity:0;
  transition:opacity .3s ease;
  mix-blend-mode:overlay;
}
.h-card:hover .h-card-shine {
  opacity:1;
  animation:shineSweep 1.2s cubic-bezier(.6,0,.4,1) .15s forwards;
}
@keyframes shineSweep {
  0%   { background-position:-100% -100%; }
  100% { background-position:100% 100%; }
}

/* On hover, the bottom text shifts up slightly (parallax-like). The
   number in the corner fades a bit so the photo stands out. */
.h-card-bottom {
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.h-card:hover .h-card-bottom {
  transform:translateY(-6px);
}
.h-card-num { transition:opacity .3s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.h-card:hover .h-card-num {
  opacity:.35;
  transform:scale(1.08) rotate(-2deg);
}

/* Accessibility: respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .h-card.c1 .h-card-bg, .h-card.c2 .h-card-bg,
  .h-card.c3 .h-card-bg, .h-card.c4 .h-card-bg { animation:none; }
}
.h-progress-line {
  margin-top:40px; display:flex; align-items:center; gap:12px;
  font-size:.8rem; color:var(--ink60); letter-spacing:.05em;
}
.h-progress-line::before {
  content:'→'; font-size:1.4rem; color:var(--coral);
  animation:arrowSlide 2s ease-in-out infinite;
}
@keyframes arrowSlide {
  0%,100% { transform:translateX(0); }
  50%     { transform:translateX(8px); }
}
.h-card {
  flex-shrink:0;
  width:380px; height:520px;
  border-radius:32px;
  position:relative;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.12);
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s;
  cursor:pointer;
  background:#1a1a1a;
}
.h-card:hover {
  transform:translateY(-12px);
  box-shadow:0 50px 120px rgba(0,0,0,.18);
}
.h-card-bg {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s cubic-bezier(.16,1,.3,1), filter .5s;
  z-index:0;
}
/* Hover behavior for the image lives in the "Rich photo animations" section below */
.h-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(165deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.85) 100%);
  z-index:1;
  pointer-events:none;
  transition:opacity .4s;
}
/* Subtle color accent overlay matching each group color */
.h-card.c1::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(123,174,138,.18) 0%, transparent 60%); z-index:1; pointer-events:none; mix-blend-mode:soft-light; }
.h-card.c2::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(240,165,0,.22) 0%, transparent 60%); z-index:1; pointer-events:none; mix-blend-mode:soft-light; }
.h-card.c3::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(75,156,211,.22) 0%, transparent 60%); z-index:1; pointer-events:none; mix-blend-mode:soft-light; }
.h-card.c4::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(232,96,76,.22) 0%, transparent 60%); z-index:1; pointer-events:none; mix-blend-mode:soft-light; }

.h-card-emoji {
  position:absolute; top:24px; left:24px;
  z-index:3;
  width:64px; height:64px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; line-height:1;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  /* Per-card animations are defined in the "Per-animal idle animations" block below */
}

/* ── Per-animal idle animations (replaces the generic wiggle) ───────
   Each group's emoji moves in a character-specific way to add personality
   to the cards. The animations are gentle and won't distract from
   browsing.
*/
.h-card.c1 .h-card-emoji {
  animation:babyMonkeyBlink 5s ease-in-out infinite;
}
.h-card.c2 .h-card-emoji {
  animation:monkeyHop 4.5s cubic-bezier(.5,0,.5,1) infinite .8s;
}
.h-card.c3 .h-card-emoji {
  animation:giraffeTilt 6s ease-in-out infinite 1.6s;
  /* perspective on the .h-card-emoji isn't needed; the child img tilts too */
}
.h-card.c4 .h-card-emoji {
  animation:giraffeNod 5.5s ease-in-out infinite 2.4s;
}

/* Petit Singe — soft vertical squash (like a blink/squeeze) */
@keyframes babyMonkeyBlink {
  0%, 86%, 100% { transform:scale(1, 1); }
  90%           { transform:scale(1.04, .88); }   /* squish */
  94%           { transform:scale(.98, 1.02); }   /* recovery */
}

/* Singe — periodic hop with a tiny anticipation crouch */
@keyframes monkeyHop {
  0%, 70%, 100% { transform:translateY(0) scale(1, 1); }
  74%           { transform:translateY(2px) scale(1.04, .92); }  /* crouch */
  80%           { transform:translateY(-10px) scale(.96, 1.06); }/* jump up */
  86%           { transform:translateY(0) scale(1.02, .98); }    /* land */
}

/* Petites Girafes — slow head tilt left/right (curious) */
@keyframes giraffeTilt {
  0%, 100% { transform:rotate(-6deg); }
  50%      { transform:rotate(6deg); }
}

/* Girafes — gentle vertical nod (looking around) */
@keyframes giraffeNod {
  0%, 100% { transform:translateY(0) rotate(-2deg); }
  40%      { transform:translateY(-3px) rotate(0deg); }
  60%      { transform:translateY(0) rotate(2deg); }
  80%      { transform:translateY(-2px) rotate(0deg); }
}

/* ── Expressive hover reactions per emoji ───────────────────────────
   On hover the emoji "wakes up" with a more energetic animation. The
   container also pops slightly to draw attention. */
.h-card-emoji {
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),
             box-shadow .4s ease,
             background .4s ease;
}
.h-card:hover .h-card-emoji {
  background:rgba(255,255,255,1);
  box-shadow:0 14px 36px rgba(0,0,0,.25);
}

/* Override the idle animation on hover with an "excited" version */
.h-card.c1:hover .h-card-emoji {
  animation:babyMonkeyExcited .55s cubic-bezier(.34,1.56,.64,1) infinite;
}
.h-card.c2:hover .h-card-emoji {
  animation:monkeyHopFast .7s cubic-bezier(.5,0,.5,1) infinite;
}
.h-card.c3:hover .h-card-emoji {
  animation:giraffeTiltFast 1.6s ease-in-out infinite;
}
.h-card.c4:hover .h-card-emoji {
  animation:giraffeNodFast 1.4s ease-in-out infinite;
}

@keyframes babyMonkeyExcited {
  0%, 100% { transform:scale(1, 1) rotate(0deg); }
  25%      { transform:scale(1.08, .92) rotate(-4deg); }
  50%      { transform:scale(.95, 1.08) rotate(0deg); }
  75%      { transform:scale(1.08, .92) rotate(4deg); }
}
@keyframes monkeyHopFast {
  0%, 100% { transform:translateY(0) scale(1, 1); }
  30%      { transform:translateY(2px) scale(1.06, .88); }
  55%      { transform:translateY(-14px) scale(.94, 1.08); }
  80%      { transform:translateY(0) scale(1.04, .96); }
}
@keyframes giraffeTiltFast {
  0%, 100% { transform:rotate(-10deg); }
  50%      { transform:rotate(10deg); }
}
@keyframes giraffeNodFast {
  0%, 100% { transform:translateY(0) rotate(-4deg); }
  40%      { transform:translateY(-5px) rotate(0deg); }
  60%      { transform:translateY(0) rotate(4deg); }
  80%      { transform:translateY(-3px) rotate(0deg); }
}

/* Accessibility: respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .h-card.c1 .h-card-emoji, .h-card.c2 .h-card-emoji,
  .h-card.c3 .h-card-emoji, .h-card.c4 .h-card-emoji,
  .h-card.c1:hover .h-card-emoji, .h-card.c2:hover .h-card-emoji,
  .h-card.c3:hover .h-card-emoji, .h-card.c4:hover .h-card-emoji {
    animation:none;
  }
}

.h-card-num {
  position:absolute; top:32px; right:32px;
  z-index:3;
  font-family:'DM Serif Display',serif;
  font-size:2.4rem; color:rgba(255,255,255,.55); line-height:1;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
  font-style:italic;
}
.h-card-bottom {
  position:absolute; bottom:0; left:0; right:0;
  padding:28px;
  z-index:2;
}
.h-card-age {
  display:inline-block; padding:6px 14px; border-radius:50px;
  font-size:.7rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; margin-bottom:14px; color:white;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.h-card.c1 .h-card-age { background:var(--sage); }
.h-card.c2 .h-card-age { background:var(--sun); }
.h-card.c3 .h-card-age { background:var(--sky); }
.h-card.c4 .h-card-age { background:var(--coral); }
.h-card-name {
  font-family:'DM Serif Display',serif;
  font-size:1.7rem; line-height:1.1; color:white; margin-bottom:8px;
  text-shadow:0 2px 16px rgba(0,0,0,.5);
}
.h-card-desc {
  font-size:.88rem; color:rgba(255,255,255,.88); line-height:1.55;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}

/* ── 3. PILLARS STACK & REVEAL ── */
#pillars-stack-section {
  position:relative;
  height:280vh;
  background:linear-gradient(180deg, var(--sand) 0%, #FFFFFF 100%);
}
#pillars-stack-pin {
  position:sticky; top:0;
  height:100vh; width:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
/* Rotating flags background */
.pillars-flags {
  position:absolute; inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.pflag {
  position:absolute;
  width:140px; height:140px;
  object-fit:contain;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.15));
  opacity:.6;
  user-select:none;
  -webkit-user-drag:none;
  transform-origin:center center;
}
/* Each flag traces the SAME big loop path, staggered in time */
.pflag1 {
  top:50%; left:50%;
  margin-left:-70px; margin-top:-70px;
  animation:bigLoop 20s linear infinite;
}
.pflag2 {
  top:50%; left:50%;
  margin-left:-70px; margin-top:-70px;
  animation:bigLoop 20s linear infinite -6.66s;  /* offset 1/3 of cycle */
}
.pflag3 {
  top:50%; left:50%;
  margin-left:-70px; margin-top:-70px;
  animation:bigLoop 20s linear infinite -13.33s; /* offset 2/3 of cycle */
}

/* Big looping path matching the blue arrows on the user's annotation:
   start top-left FR → sweep down toward center → curve under piliers → 
   sweep up to bottom-right LU/US → curve over the top → return to top-left.
   Each step rotates the flag by 45°+ so it spins as it moves. */
@keyframes bigLoop {
  0%   { transform:translate(-540px, -240px) rotate(0deg); }    /* top-left (FR position) */
  10%  { transform:translate(-340px, -100px) rotate(72deg); }   /* descending */
  20%  { transform:translate(-180px,  60px) rotate(144deg); }   /* below-left of piliers */
  30%  { transform:translate(   0px, 180px) rotate(216deg); }   /* under piliers */
  40%  { transform:translate( 220px, 200px) rotate(288deg); }   /* under-right */
  50%  { transform:translate( 480px, 180px) rotate(360deg); }   /* bottom-right (LU/US) */
  60%  { transform:translate( 560px,  40px) rotate(432deg); }   /* right side rising */
  70%  { transform:translate( 480px,-180px) rotate(504deg); }   /* top-right */
  80%  { transform:translate( 200px,-280px) rotate(576deg); }   /* top crossing */
  90%  { transform:translate(-200px,-280px) rotate(648deg); }   /* top going left */
  100% { transform:translate(-540px,-240px) rotate(720deg); }   /* back to start */
}

@media (max-width: 768px) {
  .pflag { width:80px; height:80px; opacity:.4; margin-left:-40px; margin-top:-40px; }
  /* Smaller loop on mobile */
  @keyframes bigLoop {
    0%   { transform:translate(-140px, -180px) rotate(0deg); }
    25%  { transform:translate(  60px,  140px) rotate(180deg); }
    50%  { transform:translate( 140px,  180px) rotate(360deg); }
    75%  { transform:translate(  20px, -180px) rotate(540deg); }
    100% { transform:translate(-140px, -180px) rotate(720deg); }
  }
}
.pillars-wrap {
  width:100%; max-width:1120px; padding:0 24px;
  position:relative;
  z-index:2;
}
.pillars-wrap-hd {
  text-align:center; margin-bottom:48px;
}
.pillars-wrap-hd .eyebrow { color:var(--coral); }
.pillars-wrap-hd h2 {
  font-family:'DM Serif Display',serif;
  font-size:clamp(2rem, 4vw, 3rem); line-height:1.1;
  margin-top:14px; color:var(--ink);
}
.pillars-wrap-hd h2 em { font-style:italic; color:var(--coral); }
.pillars-stack {
  position:relative; height:440px;
}
.pcard {
  position:absolute; left:0; right:0; top:0;
  background:#FBF4EE;
  border-radius:28px;
  padding:0;
  overflow:hidden;
  min-height:440px;
  box-shadow:0 30px 80px rgba(0,0,0,.22);
  border:1px solid rgba(0,0,0,.05);
  display:block;
  will-change:transform, opacity;
}
/* Volet photo — ratio proche des portraits d'origine, donc très peu de recadrage */
.pcard-media { position:absolute; left:0; top:0; bottom:0; width:64%; overflow:hidden; }
.pcard-photo {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.pcard.p1 .pcard-photo { object-position:center 42%; }
.pcard.p2 .pcard-photo { object-position:center 55%; }
.pcard.p3 .pcard-photo { object-position:30% center; }
/* Fondu discret vers le panneau vert, pour éviter une arête nette */
/* Le fondu est porté par le panneau lui-même (masque), pas par un calque sur la photo */
.pcard-icon {
  position:absolute; top:22px; left:22px; z-index:2;
  width:60px; height:60px;
  border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem;
  background:rgba(255,255,255,.94);
  box-shadow:0 6px 20px rgba(10,26,20,.25);
}
.pcard-body {
  position:absolute; right:0; top:0; bottom:0; width:52%; z-index:2;
  display:flex; flex-direction:column; justify-content:center;
  padding:44px 48px 44px 150px;
  /* Corail profond translucide : garde la teinte de la charte tout en gardant
     un contraste suffisant avec le texte blanc une fois composé sur le fond. */
  /* Fondu porté par le dégradé de fond lui-même : contrairement à mask-image
     (ignoré par Safari quand il accompagne backdrop-filter), un background
     dégradé est supporté partout, sans exception. */
  background:linear-gradient(90deg,
    rgba(210,70,52,0)    0%,
    rgba(210,70,52,.30)  8%,
    rgba(207,68,50,.68) 17%,
    rgba(203,66,48,.90) 24%,
    rgba(198,63,45,.96) 31%,
    rgba(186,55,38,.97) 65%,
    rgba(176,50,34,.98) 100%);
}
.pcard-body strong {
  display:block; font-family:'DM Serif Display',serif;
  font-size:2rem; color:#fff; margin-bottom:14px;
  font-weight:400; line-height:1.15;
}
.pcard-body p {
  font-size:1.02rem; color:rgba(255,255,255,.9); line-height:1.65;
}
/* Mouvement réduit : le script d'animation ne s'exécute pas du tout, donc la pile
   absolue laisserait les 3 cartes superposées (une seule visible). On les remet
   en colonne pour que le contenu reste accessible. */
@media (prefers-reduced-motion: reduce) {
  .pillars-stack { height:auto; }
  .pcard { position:relative; margin-bottom:22px; }
}

/* ═══════════════════════════════════════════════════
   LOCALISATION — Accès transfrontalier
   ═══════════════════════════════════════════════════ */
.loc-intro {
  max-width:760px; margin:0 auto 56px;
  text-align:center;
}
.loc-intro .eyebrow { color:var(--coral); }
.loc-intro .h2 em { color:var(--coral); }
.loc-lead {
  margin:18px auto 0 !important;
  font-size:1.05rem;
  color:var(--ink60);
  line-height:1.7;
  text-align:center !important;
  max-width:680px !important;
}
.loc-lead strong { color:var(--ink); font-weight:600; }

.loc-routes {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  max-width:1100px;
  margin:0 auto 64px;
}
.loc-route {
  background:white;
  border-radius:24px;
  padding:32px 28px;
  text-align:center;
  position:relative;
  transition:transform .3s ease, box-shadow .3s ease;
  border:1px solid rgba(0,0,0,.03);
}

/* ── Scroll reveal — stagger pour les 3 routes ── */
.loc-route.rv {
  opacity:0;
  transform:translateY(40px) scale(.95);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.loc-route.rv.in {
  opacity:1;
  transform:translateY(0) scale(1);
}
.loc-route.rv:nth-child(1).in { transition-delay:.05s; }
.loc-route.rv:nth-child(2).in { transition-delay:.2s; }
.loc-route.rv:nth-child(3).in { transition-delay:.35s; }

/* Hover (override pour ne pas casser l'anim reveal) */
.loc-route.rv.in:hover {
  transform:translateY(-6px) scale(1);
  box-shadow:0 16px 40px rgba(244,125,96,.12);
}

/* Drapeau qui rebondit légèrement à l'apparition */
.loc-route.rv .loc-route-flag {
  display:inline-block;
  transition:transform .6s cubic-bezier(.34, 1.56, .64, 1);
  transform:scale(.7) rotate(-12deg);
}
.loc-route.rv.in .loc-route-flag {
  transform:scale(1) rotate(0deg);
  transition-delay:.4s;
}
.loc-route.rv:nth-child(2).in .loc-route-flag { transition-delay:.55s; }
.loc-route.rv:nth-child(3).in .loc-route-flag { transition-delay:.7s; }

/* Pastille route (A1, A3, A6) qui pop avec scale */
.loc-route.rv .loc-route-road {
  opacity:0;
  transform:translateY(8px) scale(.8);
  transition:opacity .5s, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.loc-route.rv.in .loc-route-road {
  opacity:1;
  transform:translateY(0) scale(1);
  transition-delay:.6s;
}
.loc-route.rv:nth-child(2).in .loc-route-road { transition-delay:.75s; }
.loc-route.rv:nth-child(3).in .loc-route-road { transition-delay:.9s; }
.loc-route-flag {
  font-size:2.6rem;
  line-height:1;
  margin-bottom:14px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.08));
}
.loc-route-name {
  font-family:'DM Serif Display', serif;
  font-size:1.4rem;
  color:var(--ink);
  margin-bottom:6px;
}
.loc-route-road {
  display:inline-block;
  background:var(--coral);
  color:white;
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.1em;
  padding:5px 12px;
  border-radius:50px;
  margin-bottom:14px;
}
.loc-route-desc {
  font-size:.92rem;
  color:var(--ink60);
  line-height:1.55;
}

.loc-map-wrap {
  max-width:1100px;
  margin:0 auto;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
  position:relative;
}

/* Scroll reveal — la map "remonte" avec un zoom léger */
.loc-map-wrap.rv {
  opacity:0;
  transform:translateY(60px) scale(.96);
  transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
  transition-delay:.15s;
}
.loc-map-wrap.rv.in {
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Liseré corail décoratif autour de la map au reveal */
.loc-map-wrap::before {
  content:'';
  position:absolute;
  inset:-2px;
  border:2px solid var(--coral);
  border-radius:24px;
  opacity:0;
  pointer-events:none;
  transition:opacity .8s ease;
  z-index:2;
}
.loc-map-wrap.in::before {
  opacity:.35;
  transition-delay:.6s;
}
.loc-map-wrap iframe {
  display:block;
  filter:saturate(.95) contrast(1.02);
}

@media (max-width:1024px) {
  .loc-routes { grid-template-columns:1fr; gap:18px; max-width:560px; }
  .loc-intro { margin-bottom:40px; }
  .loc-map-wrap iframe { height:380px; }
}
@media (max-width:600px) {
  .loc-map-wrap { border-radius:16px; }
  .loc-map-wrap iframe { height:320px; border-radius:16px !important; }
  .loc-route { padding:24px 20px; border-radius:20px; }
  .loc-route-flag { font-size:2.2rem; }
}

/* Mobile responsive — simplify heavy effects */
@media (max-width: 768px) {
  .h-track { flex-direction:column; height:auto; padding:60px 6vw; gap:20px; }
  .h-intro { width:100%; padding:0; }
  .h-card { width:100%; height:auto; min-height:400px; }
  
  #pillars-stack-section { height:auto; }
  #pillars-stack-pin { position:relative; height:auto; padding:60px 0; }
  .pillars-wrap { padding:0 24px; }
  .pillars-stack { height:auto; }
  .pcard { position:relative; margin-bottom:20px; padding:0; min-height:0; }
  .pcard-media { position:relative; width:100%; height:260px; }
  .pcard-body {
    position:relative; right:auto; top:auto; bottom:auto; width:100%;
    margin-top:-70px; padding:70px 28px 30px;
    background:linear-gradient(180deg,
      rgba(210,70,52,0)    0%,
      rgba(210,70,52,.35) 16%,
      rgba(203,66,48,.85) 34%,
      rgba(196,61,44,.96) 48%,
      rgba(176,50,34,.98) 100%);
  }
  
}

/* ═══════════════════════════════════════════════════
   📱 MOBILE COMPREHENSIVE OPTIMIZATION
   Single source of truth — overrides everything earlier
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Prevent horizontal overflow at root level */
  html, body { overflow-x:hidden; max-width:100vw; }
  img, picture, video, iframe, canvas, svg, table { max-width:100%; }

  /* ── NAV ── */
  #nav { padding:0 12px !important; height:60px !important; gap:8px !important; }
  .nav-logo { flex-shrink:0; min-width:0 !important; }
  .nav-logo img { height:32px !important; }
  .nav-logo span { font-size:.9rem !important; }
  .nav-links { display:none !important; }
  /* The right-side container shouldn't overflow */
  #nav > div:last-child { 
    flex-shrink:1 !important; 
    min-width:0 !important; 
    gap:6px !important;
    overflow:hidden;
  }
  .nav-btn { 
    padding:7px 12px !important; 
    font-size:.72rem !important;
    flex-shrink:0;
    white-space:nowrap;
  }
  .btn-espace { 
    padding:7px 10px !important; 
    font-size:.7rem !important;
    flex-shrink:0;
    white-space:nowrap;
  }
  .btn-espace svg { display:none; }
  .lang-switch { 
    padding:3px !important; 
    gap:1px !important; 
    margin-right:0 !important;
    flex-shrink:0;
  }
  .lang-btn { width:24px !important; height:24px !important; }
  .lang-btn svg { width:16px !important; height:16px !important; }
  .lang-btn-text { font-size:.62rem !important; }

  /* ── HERO ── */
  #hero { 
    min-height:auto !important; 
    padding:88px 20px 48px !important; 
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
  .hero-pill { font-size:.7rem !important; margin-bottom:18px !important; }
  h1 { font-size:clamp(2rem, 8vw, 2.8rem) !important; line-height:1.1 !important; }
  .hero-sub { font-size:.95rem !important; margin-bottom:24px !important; }
  .hero-btns { flex-wrap:wrap; gap:10px !important; }
  .btn-fill, .btn-ghost { 
    padding:12px 20px !important; 
    font-size:.85rem !important; 
    width:100%; 
    text-align:center;
    box-sizing:border-box;
  }
  .hero-trust {
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
    margin-top:24px !important;
    align-items:flex-start !important;
  }
  .hero-trust .trust-sep { display:none !important; }
  .trust-item { width:100%; }
  /* Re-enable hero card on mobile but smaller */
  .hero-right { display:block !important; }
  .hero-card { max-width:100%; margin:0 auto; }
  .hero-card-top { height:200px !important; }
  .hero-chip { font-size:.7rem !important; padding:8px 12px !important; }

  /* ── STATS ── */
  #stats { padding:0 16px !important; }
  .stats-grid { grid-template-columns:1fr 1fr !important; }
  .stat-cell { padding:24px 16px !important; }
  .stat-cell:nth-child(2n) { border-right:none !important; }
  .stat-cell:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.08); }
  .stat-n { font-size:1.9rem !important; }
  .stat-l { font-size:.72rem !important; }

  /* ── ZOOM TO FULLSCREEN — section supprimée ── */

  /* ── ABOUT ── */
  .section { padding:56px 20px !important; }
  .about-grid { grid-template-columns:1fr !important; gap:32px !important; }
  .h2 { font-size:clamp(1.7rem, 6vw, 2.2rem) !important; line-height:1.15 !important; }
  .body-text { font-size:.95rem !important; }
  .about-quote { font-size:.92rem !important; padding:16px 18px !important; }
  .about-portrait { aspect-ratio:4/5; }
  .about-badge { 
    bottom:-12px !important; 
    right:-8px !important; 
    padding:12px 16px !important;
  }
  .about-badge-name { font-size:.95rem !important; }
  .about-badge-role { font-size:.72rem !important; }
  .pillars { gap:10px !important; }
  .pillar { padding:12px 14px !important; }
  .pillar strong { font-size:.85rem !important; }
  .pillar span { font-size:.78rem !important; }

  /* ── HORIZONTAL GROUPS — sur mobile : empilement vertical, pas de scroll horizontal ── */
  #groups-horizontal { 
    height:auto !important;
    overflow:visible !important;
    background:var(--sand) !important;
    padding:48px 0 !important;
  }
  .h-track { 
    flex-direction:column !important; 
    height:auto !important; 
    padding:0 20px !important; 
    gap:14px !important;
    align-items:stretch !important;
    transform:none !important;
  }
  .h-intro { 
    width:100% !important;
    max-width:none !important;
    flex-shrink:0 !important;
    padding:0 0 16px 0 !important;
  }
  .h-intro h2 { font-size:1.9rem !important; line-height:1.1 !important; }
  .h-intro p { font-size:.9rem !important; margin-top:14px !important; }
  .h-progress-line { display:none !important; }
  .h-card { 
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:380px !important;
    transform:none !important;
    opacity:1 !important;
    border-radius:24px !important;
  }
  .h-card-emoji {
    width:48px !important;
    height:48px !important;
    font-size:1.5rem !important;
    top:16px !important;
    left:16px !important;
    border-radius:14px !important;
  }
  .h-card-num { font-size:1.6rem !important; top:18px !important; right:18px !important; }
  .h-card-bottom { padding:20px !important; }
  .h-card-age { font-size:.62rem !important; padding:5px 11px !important; margin-bottom:10px !important; }
  .h-card-name { font-size:1.25rem !important; margin-bottom:6px !important; }
  .h-card-desc { font-size:.78rem !important; line-height:1.5 !important; }

  /* ── PILLARS STACK — sur mobile : pas de pin, juste un empilement normal ── */
  #pillars-stack-section { 
    height:auto !important;
    padding:48px 0 !important;
    position:relative !important;
    overflow:hidden !important;
  }
  #pillars-stack-pin { 
    position:relative !important; 
    top:auto !important;
    height:auto !important;
    padding:0 !important;
  }
  /* Drapeaux : on garde l'animation mais en plus petit, en position absolue */
  .pillars-flags { 
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    pointer-events:none !important;
    z-index:0 !important;
  }
  .pflag {
    width:70px !important;
    height:70px !important;
    opacity:.25 !important;
  }
  /* Réduire l'amplitude de la boucle pour mobile */
  @keyframes bigLoopMobile {
    0%   { transform:translate(-130px, -120px) rotate(0deg); }
    25%  { transform:translate(0, 80px)        rotate(180deg); }
    50%  { transform:translate(130px, 120px)   rotate(360deg); }
    75%  { transform:translate(20px, -100px)   rotate(540deg); }
    100% { transform:translate(-130px, -120px) rotate(720deg); }
  }
  .pflag1, .pflag2, .pflag3 {
    top:50% !important;
    left:50% !important;
    bottom:auto !important;
    right:auto !important;
    margin-left:-35px !important;
    margin-top:-35px !important;
    animation:bigLoopMobile 18s linear infinite !important;
  }
  .pflag2 { animation-delay:-6s !important; }
  .pflag3 { animation-delay:-12s !important; }

  .pillars-wrap { padding:0 20px !important; max-width:none !important; position:relative; z-index:2 !important; }
  .pillars-wrap-hd { margin-bottom:32px !important; text-align:center !important; }
  .pillars-wrap-hd h2 { font-size:1.7rem !important; line-height:1.15 !important; }
  .pillars-wrap-hd .eyebrow { font-size:.7rem !important; }
  /* Désactive l'empilement absolu : on remet en flow normal */
  .pillars-stack { 
    height:auto !important; 
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
  }
  .pcard { 
    position:relative !important;
    transform:none !important;
    opacity:1 !important;
    z-index:auto !important;
    padding:0 !important;
    min-height:0 !important;
    grid-template-columns:1fr !important;
    border-radius:20px !important;
    margin:0 !important;
  }
  .pcard-media { position:relative !important; width:100% !important; height:220px !important; }
  .pcard-body {
    position:relative !important; right:auto !important; top:auto !important; bottom:auto !important;
    width:100% !important; margin-top:-60px !important; padding:64px 22px 26px !important;
  }
  .pcard-icon { 
    width:54px !important; 
    height:54px !important; 
    font-size:1.5rem !important;
  }
  .pcard-body strong { font-size:1.45rem !important; }
  .pcard-body p { font-size:.92rem !important; }
  .pcard-icon { top:16px !important; left:16px !important; }

  /* ── ACTIVITIES ── */
  .acts-layout { grid-template-columns:1fr !important; gap:32px !important; }
  .acts-sticky { position:static !important; }
  .acts-list { gap:6px !important; }
  .act-row { padding:16px 0 !important; gap:14px !important; }
  .act-n { font-size:.85rem !important; min-width:20px; }
  .act-icon { width:38px !important; height:38px !important; font-size:1.05rem !important; }
  .act-body strong { font-size:.9rem !important; }
  .act-body p { font-size:.8rem !important; }
  .acts-partners { margin-top:24px !important; padding:18px !important; }

  /* ── SPACES BENTO ── */
  .bento { grid-template-columns:1fr !important; gap:12px !important; }
  .sp { 
    grid-column:span 1 !important; 
    min-height:240px !important;
    padding:20px !important;
  }
  .sp.a, .sp.b, .sp.c, .sp.d { min-height:260px !important; }
  .sp-title { font-size:1.15rem !important; }
  .sp.a .sp-title { font-size:1.4rem !important; }
  .sp-desc { font-size:.82rem !important; }
  .sp-num { font-size:2.2rem !important; top:14px !important; right:16px !important; }

  /* ── FOOD ── */
  .food-grid { grid-template-columns:1fr !important; gap:32px !important; }
  .food-cards { grid-template-columns:1fr !important; gap:12px !important; }
  .food-card.wide { grid-column:span 1 !important; }
  .food-card { padding:22px !important; }

  /* ── PARALLAX BAND ── */

  /* ── APP ── */
  .app-grid { grid-template-columns:1fr !important; gap:32px !important; }
  .phone-wrap { max-width:280px !important; margin:0 auto !important; }
  .app-feat { padding:14px !important; gap:12px !important; }
  .app-feat-icon { width:40px !important; height:40px !important; }
  .app-feat strong { font-size:.9rem !important; }
  .app-feat p { font-size:.8rem !important; }

  /* ── TESTIMONIALS ── */
  .testi-grid { grid-template-columns:1fr !important; gap:14px !important; }
  .testi-hd { 
    flex-direction:column !important; 
    gap:14px !important; 
    align-items:flex-start !important;
    margin-bottom:32px !important;
  }
  .tc { padding:24px !important; }
  .tc-text { font-size:.92rem !important; }

  /* ── CTA ── */
  #cta { padding:56px 20px !important; }
  .cta-grid { grid-template-columns:1fr !important; gap:24px !important; }
  .cta-h2 { font-size:1.9rem !important; }
  .cta-sub { font-size:.95rem !important; }
  .btn-white { padding:12px 22px !important; font-size:.88rem !important; }
  .cta-right { align-items:flex-start !important; }
  .cta-contact { font-size:.85rem !important; }
  .cta-map-wrap { aspect-ratio:auto !important; height:240px !important; width:100% !important; border-radius:16px !important; order:99 !important; }
  .cta-map { width:100% !important; height:100% !important; }

  /* ── FOOTER ── */
  footer { padding:40px 20px 24px !important; }
  .footer-grid { grid-template-columns:1fr 1fr !important; gap:24px !important; }
  .footer-brand { grid-column:span 2 !important; margin-bottom:8px; }
  .footer-grid h5 { font-size:.78rem !important; }
  .footer-grid li { font-size:.82rem !important; }
  .footer-bottom { 
    flex-direction:column !important; 
    gap:8px !important; 
    text-align:center !important;
    font-size:.75rem !important;
  }

  /* ── MODAL ── */
  #modal { 
    grid-template-columns:1fr !important;
    width:calc(100vw - 24px) !important;
    max-width:none !important;
    max-height:calc(100vh - 24px) !important;
    overflow-y:auto !important;
  }
  .modal-left { display:none !important; }
  .modal-right { padding:32px 24px !important; }
  .modal-h3 { font-size:1.7rem !important; }
  .modal-sub { font-size:.9rem !important; }
  .form-row { grid-template-columns:1fr !important; gap:12px !important; }
  .form-group input, 
  .form-group select, 
  .form-group textarea { 
    font-size:1rem !important; /* prevents iOS zoom-on-focus */
    padding:11px 14px !important;
  }
  .form-group label { font-size:.8rem !important; }
  .modal-submit { padding:13px 20px !important; font-size:.92rem !important; }

  /* ── IMMERSIVE EXPERIENCE ── */
  #imm { padding:0 !important; }
  .sc-center { padding:32px 20px !important; max-width:100% !important; }
  .sc-h1 { font-size:1.9rem !important; line-height:1.15 !important; }
  .sc-sub { font-size:.7rem !important; margin-bottom:12px !important; }
  .sc-body { font-size:.9rem !important; }
  .sc-split { 
    grid-template-columns:1fr !important; 
    padding:60px 16px 24px !important; 
    gap:16px !important;
  }
  .sc-split.rev { direction:ltr !important; }
  .scard { display:none !important; } /* hide decorative card on mobile */
  .sc-h2 { font-size:1.5rem !important; }
  .sc-txt { font-size:.85rem !important; }
  .sc-num { font-size:.65rem !important; }
  .sc-dets { gap:10px !important; }
  .sdet-icon { width:32px !important; height:32px !important; font-size:.95rem !important; }
  .sdet strong { font-size:.78rem !important; }
  .sdet span { font-size:.7rem !important; }
  .sc-nav { gap:8px !important; flex-wrap:wrap; }
  .sc-prev, .sc-next { 
    padding:9px 16px !important; 
    font-size:.78rem !important; 
    flex:1;
    min-width:0;
  }
  .sc-final-btns { gap:8px !important; flex-direction:column; }
  .btn-cta-i, .btn-ghost-i { 
    padding:12px 20px !important; 
    font-size:.85rem !important;
    width:100%;
  }
  .imm-links { gap:12px !important; font-size:.72rem !important; }
  .deco { font-size:24vw !important; opacity:.05 !important; }
  .sc-drift { font-size:2rem !important; }
  .sc-photo-vignette { background:radial-gradient(ellipse at center, transparent 10%, rgba(0,0,0,.7) 100%) !important; }
  /* Slow down Ken Burns on mobile to save battery */
  .sc.on .sc-photo img { animation-duration:30s !important; }

  /* ── HIDE/REDUCE DECORATIVE EFFECTS ON MOBILE ── */
  .hero-floater { display:none !important; }
  .preloader-stage { transform:scale(.85); }
  /* Disable parallax/heavy transforms on hover (no hover on mobile anyway) */
  .group-card:hover, .pillar:hover, .tc:hover, .h-card:hover, .sp:hover {
    transform:none !important;
  }
  /* Ensure scroll progress bar is visible but not too thick */
  #scroll-progress { height:2px !important; }
}

/* Extra-small phones (iPhone SE, etc.) */
@media (max-width: 380px) {
  #nav { padding:0 12px !important; }
  .lang-switch { display:none !important; }
  h1 { font-size:1.85rem !important; }
  .h2 { font-size:1.55rem !important; }
  .section { padding:48px 16px !important; }
  .stat-n { font-size:1.6rem !important; }
  .h-card { min-height:320px; }
  .pcard { padding:18px !important; }
  .pcard-icon { width:46px !important; height:46px !important; font-size:1.3rem !important; }
  .h-card-name { font-size:1.2rem !important; }
}

/* ═══════════════════════════════════════════════════
   📱 ESPACE CLIENT (PORTAL) — MOBILE FIXES
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── AUTH/LOGIN SCREEN ── */
  #portal-app-shell {
    flex-direction:column !important;
    min-height:100vh !important;
    overflow-y:auto !important;
  }
  .login-left {
    flex:0 0 auto !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:24px 20px 20px !important;
    max-height:none !important;
  }
  .login-left::before { font-size:9rem !important; bottom:-2rem !important; right:-2rem !important; }
  .login-logo img { height:36px !important; }
  .login-hero h2 { font-size:1.5rem !important; line-height:1.15 !important; margin-bottom:6px !important; }
  .login-hero p { font-size:.82rem !important; max-width:none !important; line-height:1.45 !important; }
  .login-stats { gap:14px !important; margin-top:14px !important; }
  .login-stat strong { font-size:1.2rem !important; }
  .login-stat span { font-size:.65rem !important; }
  .login-right {
    width:100% !important;
    flex:0 0 auto !important;
    box-sizing:border-box !important;
    padding:24px 20px 36px !important;
    max-width:100vw !important;
    overflow-x:hidden !important;
    min-width:0 !important;
  }
  /* ── BULLETPROOF MOBILE: stack panels, show only the active one ── */
  .auth-slider {
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
    min-width:0 !important;
  }
  .auth-slides {
    display:block !important;
    width:100% !important;
    transform:none !important;
    transition:none !important;
  }
  /* Hide all panels by default on mobile */
  .auth-panel {
    display:none !important;
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    padding:0 !important;
  }
  /* Show only the panel matching the slider state */
  .auth-slides:not(.show-signup):not(.show-forgot) #panelSignin { display:block !important; }
  .auth-slides.show-signup  #panelSignup { display:block !important; }
  .auth-slides.show-forgot  #panelForgot { display:block !important; }

  .login-right h2 { font-size:1.4rem !important; }
  .login-right p { font-size:.82rem !important; margin-bottom:20px !important; }
  .login-tab { font-size:.78rem !important; padding:8px !important; }
  .form-field input { font-size:1rem !important; padding:11px 13px !important; }
  .btn-login { padding:13px !important; font-size:.9rem !important; }
  .login-demo { font-size:.74rem !important; padding:12px !important; }

  /* ── DASHBOARD APP SHELL ── */
  #portal-dashboard {
    overflow-y:auto !important;
  }
  #portal-dashboard #layout {
    flex-direction:column !important;
    overflow:visible !important;
  }
  
  /* TOP BAR — compact, single row, horizontal scroll if needed */
  #topbar {
    height:auto !important;
    min-height:56px !important;
    padding:8px 12px !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
  }
  .topbar-logo img { height:28px !important; }
  .topbar-center { display:none !important; }
  .topbar-right {
    gap:8px !important;
    flex-shrink:0;
  }
  .topbar-notif { width:36px !important; height:36px !important; font-size:1rem !important; }
  .topbar-user { gap:6px !important; }
  .user-av { 
    width:32px !important; 
    height:32px !important; 
    font-size:.85rem !important;
    flex-shrink:0;
  }
  .topbar-user > div:not(.user-av) { display:none !important; } /* hide name+role text on mobile */
  .btn-logout { 
    padding:6px 12px !important; 
    font-size:.72rem !important;
    flex-shrink:0;
  }

  /* SIDEBAR → horizontal scroll tab strip */
  #sidebar-parent, #sidebar-equipe, #sidebar-admin {
    width:100% !important;
    height:auto !important;
    flex-direction:row !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    border-right:none !important;
    border-bottom:1px solid rgba(0,0,0,.08) !important;
    padding:10px !important;
    gap:6px !important;
    background:white !important;
    position:sticky !important;
    top:56px !important;
    z-index:50;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #sidebar-parent::-webkit-scrollbar, 
  #sidebar-equipe::-webkit-scrollbar,
  #sidebar-admin::-webkit-scrollbar { display:none; }
  
  .sidebar-section { display:none !important; } /* hide section labels on mobile */
  
  .sidebar-link {
    flex-shrink:0 !important;
    padding:8px 14px !important;
    font-size:.8rem !important;
    border-radius:50px !important;
    background:var(--sand) !important;
    white-space:nowrap !important;
    width:auto !important;
    margin:0 !important;
  }
  .sidebar-link .icon {
    margin-right:4px !important;
    width:auto !important;
    font-size:1rem !important;
  }
  .sidebar-link .sidebar-badge {
    margin-left:6px !important;
    font-size:.62rem !important;
    padding:1px 6px !important;
  }

  /* MAIN CONTENT — full width, less padding */
  #main {
    padding:20px 16px !important;
    overflow-y:visible !important;
  }
  
  /* Dashboard page-specific */
  #main h1, #main h2 { font-size:1.6rem !important; line-height:1.15 !important; }
  #main h3 { font-size:1.1rem !important; }
  
  /* Cards inside dashboard */
  .dash-card, .info-card, .summary-card, .stat-card {
    padding:18px !important;
    margin-bottom:12px !important;
  }
  
  /* Generic grid rows in portal — stack everything */
  #main [style*="grid-template-columns"]:not(.h-track):not(.bento) {
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  
  /* Buttons inside main */
  #main button:not(.sidebar-link):not(.btn-logout):not(.topbar-notif) {
    font-size:.85rem !important;
    padding:10px 16px !important;
  }

  /* Tables → make scrollable */
  #main table {
    display:block;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }
}

/* Touch-device tweaks */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover-only effects that look weird on touch */
  *:hover { transition:none; }
  /* Make all interactive elements meet 44px touch target minimum */
  .nav-btn, .btn-espace, .btn-fill, .btn-ghost, 
  .lang-btn, .modal-submit, .sc-prev, .sc-next, 
  .btn-cta-i, .btn-ghost-i, .btn-white {
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}


/* ═══════════════════════════════════════════════════
   KIDS' ISLAND — LOGIN PREMIUM V2
   Desktop + mobile responsive override
═══════════════════════════════════════════════════ */
#portal-app-shell.show,
#portal-app-shell[style*="display: flex"],
#portal-app-shell {
  background:#f8f2e9 !important;
}
#portal-app-shell.show #login-screen,
#login-screen {
  min-height:100vh !important;
  min-height:100dvh !important;
  width:100% !important;
  display:flex !important;
  position:relative !important;
  overflow:hidden !important;
  background:#fbf4ea !important;
  isolation:isolate !important;
}
#login-screen::before {
  content:'';
  position:absolute; inset:-25%; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,122,92,.22) 0 12%, transparent 33%),
    radial-gradient(circle at 82% 74%, rgba(37,104,82,.18) 0 15%, transparent 36%),
    radial-gradient(circle at 56% 8%, rgba(255,214,153,.18) 0 10%, transparent 28%);
  filter:blur(26px);
  animation:kiLoginAurora 18s ease-in-out infinite alternate;
}
@keyframes kiLoginAurora {
  0% { transform:translate3d(-2%, -1%, 0) scale(1); }
  100% { transform:translate3d(2%, 2%, 0) scale(1.08); }
}
#login-screen::after {
  content:'';
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(9,44,35,.72) 0%, rgba(9,44,35,.48) 35%, rgba(9,44,35,0) 62%),
    radial-gradient(circle at 85% 10%, rgba(255,255,255,.55), transparent 28%);
}
.auth-particles { z-index:5 !important; opacity:.55 !important; }
.login-left {
  position:relative !important;
  flex:1 1 auto !important;
  min-height:100vh !important;
  padding:58px 52px 46px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  overflow:hidden !important;
  background:
    linear-gradient(90deg, rgba(5,57,45,.98) 0%, rgba(5,69,54,.86) 39%, rgba(5,69,54,.25) 74%, rgba(255,255,255,0) 100%),
    url('/assets/login-pack/backgrounds/background-login-desktop.webp') center center / cover no-repeat !important;
  z-index:2 !important;
}
.login-left::before {
  content:'' !important;
  position:absolute !important; inset:0 !important; z-index:1 !important; pointer-events:none !important;
  background:
    linear-gradient(180deg, rgba(3,33,26,.12) 0%, rgba(3,33,26,.56) 100%),
    radial-gradient(circle at 43% 48%, rgba(255,255,255,.06), transparent 28%) !important;
}
.login-left::after {
  content:'' !important;
  position:absolute !important; inset:auto auto 78px 68px !important;
  width:230px !important; height:130px !important; z-index:2 !important; opacity:.42 !important;
  background:url('/assets/login-pack/ornaments/path-dotted.png') center / contain no-repeat !important;
  mask-image:none !important; -webkit-mask-image:none !important;
  animation:kiDottedFloat 8s ease-in-out infinite !important;
}
@keyframes kiDottedFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.login-logo,
.login-hero,
.login-features { position:relative !important; z-index:3 !important; }
.login-logo img {
  height:112px !important;
  max-width:260px !important;
  width:auto !important;
  object-fit:contain !important;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.22)) !important;
  animation:authLogoBreathe 6s ease-in-out infinite !important;
}
.login-hero { max-width:620px !important; margin-top:auto !important; margin-bottom:84px !important; }
.login-hero .login-welcome {
  color:#DDF1E7 !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  padding:10px 14px !important;
  border-radius:999px !important;
  width:max-content !important;
  backdrop-filter:blur(12px) !important;
}
.login-hero h2 {
  font-size:clamp(3.2rem, 5.3vw, 6.1rem) !important;
  line-height:.96 !important;
  letter-spacing:-.055em !important;
  color:#fff !important;
  text-wrap:balance !important;
  text-shadow:0 20px 60px rgba(0,0,0,.32) !important;
  margin:0 0 24px !important;
}
.login-hero h2 em { color:#ff7d63 !important; font-style:italic !important; }
.login-hero p {
  color:rgba(255,255,255,.82) !important;
  font-size:1.13rem !important;
  line-height:1.65 !important;
  max-width:500px !important;
}
.login-features {
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:14px !important;
  max-width:850px !important;
  padding:0 !important;
}
.login-feature {
  min-height:86px !important;
  padding:16px !important;
  border-radius:22px !important;
  background:rgba(255,255,255,.105) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  backdrop-filter:blur(16px) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.12) !important;
  transform:translateZ(0) !important;
}
.login-feature-ic { background:rgba(255,255,255,.18) !important; }
.login-feature strong { color:#fff !important; font-size:.86rem !important; }
.login-feature span { color:rgba(255,255,255,.66) !important; }
.login-right {
  position:absolute !important;
  top:50% !important; right:clamp(36px, 5vw, 82px) !important;
  transform:translateY(-50%) !important;
  width:min(455px, 35vw) !important;
  max-height:calc(100vh - 56px) !important;
  overflow-y:auto !important;
  z-index:6 !important;
  box-sizing:border-box !important;
  padding:42px 40px 34px !important;
  border-radius:30px !important;
  background:linear-gradient(180deg, rgba(255,250,243,.96), rgba(249,241,230,.94)) !important;
  border:1px solid rgba(255,255,255,.78) !important;
  box-shadow:0 40px 110px rgba(16,37,31,.34), inset 0 1px 0 rgba(255,255,255,.78) !important;
  backdrop-filter:blur(20px) saturate(120%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(120%) !important;
}
.login-right::-webkit-scrollbar { width:0; height:0; }
.login-right::before {
  content:'';
  position:absolute; top:-58px; right:-46px; width:150px; height:150px; z-index:-1; opacity:.65;
  background:url('/assets/login-pack/ornaments/leaves-corner.png') center / contain no-repeat;
  transform:rotate(3deg);
  animation:kiLeaves 7s ease-in-out infinite;
}
.login-right::after {
  content:'';
  position:absolute; bottom:-40px; left:-54px; width:110px; height:110px; z-index:-1; opacity:.72;
  background:url('/assets/login-pack/ornaments/clover.png') center / contain no-repeat;
  animation:kiLeaves 8s ease-in-out infinite reverse;
}
@keyframes kiLeaves { 0%,100%{transform:translateY(0) rotate(3deg)} 50%{transform:translateY(-10px) rotate(-2deg)} }
.auth-close {
  top:18px !important; right:18px !important;
  background:rgba(255,255,255,.68) !important;
  color:rgba(33,31,30,.55) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.06) !important;
}
.auth-card-head { margin-bottom:18px !important; }
.auth-card-logo {
  height:122px !important;
  width:auto !important;
  max-width:260px !important;
  object-fit:contain !important;
}
.auth-h2.auth-card-title {
  font-size:2.12rem !important;
  line-height:1.08 !important;
  letter-spacing:-.03em !important;
  color:#191817 !important;
  margin:2px auto 0 !important;
  max-width:330px !important;
}
.auth-title-rule { width:48px !important; height:3px !important; background:#ff7d63 !important; margin:18px auto 28px !important; }
.auth-field { margin-bottom:16px !important; }
.auth-field label { color:#6d6760 !important; font-weight:700 !important; font-size:.78rem !important; letter-spacing:0 !important; text-transform:none !important; }
.auth-field input {
  height:54px !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.86) !important;
  border:1px solid rgba(25,24,23,.10) !important;
  box-shadow:0 8px 18px rgba(30,20,10,.03) !important;
}
.auth-field input:focus {
  border-color:rgba(24,84,66,.55) !important;
  box-shadow:0 0 0 5px rgba(24,84,66,.10), 0 10px 22px rgba(30,20,10,.05) !important;
}
.auth-row { margin:6px 0 18px !important; }
.auth-check input { accent-color:#ff7d63 !important; }
.auth-link { color:#ff6f57 !important; }
.auth-btn-primary {
  height:58px !important;
  border-radius:15px !important;
  background:linear-gradient(135deg, #063f31 0%, #0a664f 100%) !important;
  box-shadow:0 18px 38px rgba(6,63,49,.28) !important;
}
.auth-btn-primary:hover { background:linear-gradient(135deg, #052f26 0%, #07543f 100%) !important; transform:translateY(-2px) !important; }
.auth-divider { margin:24px 0 !important; }
.auth-social { display:flex !important; flex-direction:column !important; gap:12px !important; }
.auth-social-btn {
  height:54px !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(25,24,23,.10) !important;
  box-shadow:0 8px 18px rgba(30,20,10,.035) !important;
}
.auth-social-btn:hover { transform:translateY(-2px) !important; box-shadow:0 14px 28px rgba(30,20,10,.075) !important; }
.auth-switch { margin-top:24px !important; }
.auth-link-strong { color:#ff6f57 !important; }

@media (max-width: 1100px) {
  .login-left { padding:40px 28px 32px !important; }
  .login-hero { margin-bottom:40px !important; max-width:560px !important; }
  .login-features { grid-template-columns:repeat(2, minmax(0,1fr)) !important; max-width:560px !important; }
  .login-right { right:24px !important; width:420px !important; }
}
@media (max-width: 900px) {
  #login-screen { display:block !important; min-height:100dvh !important; overflow:auto !important; }
  #login-screen::after { background:linear-gradient(180deg, rgba(8,58,45,.80), rgba(8,58,45,.08) 48%, rgba(248,242,233,.96) 78%) !important; }
  .login-left {
    display:flex !important;
    width:100% !important;
    min-height:40vh !important;
    padding:24px 20px 92px !important;
    background:
      linear-gradient(180deg, rgba(5,57,45,.86), rgba(5,57,45,.18)),
      url('/assets/login-pack/backgrounds/background-login-mobile.webp') center top / cover no-repeat !important;
  }
  .login-left::after { left:20px !important; bottom:24px !important; width:150px !important; height:90px !important; opacity:.32 !important; }
  .login-logo img { height:88px !important; max-width:210px !important; }
  .login-hero { margin:22px 0 0 !important; max-width:92vw !important; }
  .login-hero .login-welcome { font-size:.76rem !important; padding:7px 10px !important; margin-bottom:12px !important; }
  .login-hero h2 { font-size:clamp(2.2rem, 10vw, 3.55rem) !important; line-height:1 !important; }
  .login-hero p { font-size:.95rem !important; max-width:340px !important; }
  .login-features { display:none !important; }
  .login-right {
    position:relative !important;
    top:auto !important; right:auto !important;
    transform:none !important;
    width:calc(100% - 28px) !important;
    margin:-72px auto 18px !important;
    max-height:none !important;
    padding:28px 20px 26px !important;
    border-radius:28px !important;
    box-shadow:0 26px 70px rgba(16,37,31,.22) !important;
  }
  .auth-card-logo { height:96px !important; }
  .auth-h2.auth-card-title { font-size:1.65rem !important; }
  .auth-field input, .auth-btn-primary, .auth-social-btn { height:52px !important; }
  .auth-close { top:12px !important; right:12px !important; }
}
@media (max-width: 390px) {
  .login-right { width:calc(100% - 20px) !important; padding:24px 16px 22px !important; }
  .auth-card-logo { height:82px !important; }
  .auth-h2.auth-card-title { font-size:1.45rem !important; }
}

/* Login refinements: portrait fondu, titre respirant, fournisseurs actifs uniquement. */
#btnApple,
#btnFacebook { display:none !important; }

@media (min-width: 901px) {
  .login-feature-ic {
    display:inline-grid !important;
    place-items:center !important;
    flex:0 0 36px !important;
    width:36px !important;
    height:36px !important;
    padding:0 !important;
    box-sizing:border-box !important;
    text-align:center !important;
    line-height:1 !important;
    font-size:1.05rem !important;
  }
  .login-left {
    background:
      linear-gradient(90deg,
        #063f31 0%,
        #063f31 34%,
        #174f40 53%,
        #587367 70%,
        #b8b9aa 84%,
        #eee5d6 100%) !important;
  }
  .login-left::before {
    content:'' !important;
    position:absolute !important;
    inset:0 auto 0 42% !important;
    width:min(32vw, 520px) !important;
    height:100% !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:url('/assets/site/login-hero.jpg') center / cover no-repeat !important;
    opacity:.96 !important;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.30) 7%, #000 20%, #000 76%, rgba(0,0,0,.55) 86%, transparent 100%) !important;
            mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.30) 7%, #000 20%, #000 76%, rgba(0,0,0,.55) 86%, transparent 100%) !important;
    -webkit-mask-repeat:no-repeat !important;
            mask-repeat:no-repeat !important;
  }
  .login-hero {
    max-width:min(42vw, 660px) !important;
    padding:6px 20px 10px 2px !important;
    overflow:visible !important;
  }
  .login-hero h2 {
    max-width:100% !important;
    padding:.07em .12em .12em 0 !important;
    overflow:visible !important;
    font-size:clamp(3rem, 4.45vw, 5.15rem) !important;
    line-height:1.03 !important;
    letter-spacing:-.038em !important;
    text-wrap:pretty !important;
  }
  .login-hero h2 > span,
  .login-hero h2 > em {
    display:block !important;
    overflow:visible !important;
  }
  .login-hero p { max-width:430px !important; }
}

/* Composition mobile dédiée : le visuel reste lisible et la carte ne coupe plus le titre. */
@media (max-width: 900px) {
  html.portal-open,
  html.portal-open body {
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    overscroll-behavior-x:none !important;
    touch-action:pan-y !important;
  }
  #portal-app-shell {
    width:100% !important;
    max-width:100vw !important;
    overflow-x:hidden !important;
    overscroll-behavior-x:none !important;
    touch-action:pan-y !important;
  }
  #login-screen {
    box-sizing:border-box !important;
    max-width:100vw !important;
    min-height:100dvh !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior-x:none !important;
    touch-action:pan-y !important;
    background:#f5eee4 !important;
  }
  .login-left {
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100vw !important;
    min-height:420px !important;
    padding:20px 20px 78px !important;
    justify-content:flex-start !important;
    background:linear-gradient(90deg, #063f31 0%, #063f31 46%, #174f40 74%, #315f52 100%) !important;
  }
  .login-left::before {
    content:'' !important;
    position:absolute !important;
    inset:0 auto 0 40% !important;
    width:52% !important;
    height:100% !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:
      linear-gradient(180deg, rgba(3,33,26,.04), rgba(3,33,26,.26)),
      url('/assets/site/login-hero.jpg') center / cover no-repeat !important;
    opacity:.94 !important;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 9%, #000 22%, #000 76%, rgba(0,0,0,.48) 88%, transparent 100%) !important;
            mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 9%, #000 22%, #000 76%, rgba(0,0,0,.48) 88%, transparent 100%) !important;
    -webkit-mask-repeat:no-repeat !important;
            mask-repeat:no-repeat !important;
  }
  .login-left::after { display:none !important; }
  .login-logo img {
    height:68px !important;
    max-width:160px !important;
  }
  .login-hero {
    width:min(88%, 430px) !important;
    max-width:none !important;
    margin:22px 0 0 !important;
    padding:0 8px !important;
    overflow:visible !important;
  }
  .login-hero .login-welcome {
    width:max-content !important;
    max-width:100% !important;
    margin-bottom:14px !important;
    padding:7px 10px !important;
    font-size:.72rem !important;
  }
  .login-hero h2 {
    max-width:390px !important;
    margin:0 0 14px !important;
    padding:.05em .12em .10em 0 !important;
    overflow:visible !important;
    font-size:clamp(2.05rem, 8.4vw, 3rem) !important;
    line-height:1.01 !important;
    letter-spacing:-.035em !important;
    text-wrap:pretty !important;
  }
  .login-hero h2 > span,
  .login-hero h2 > em {
    display:block !important;
    overflow:visible !important;
  }
  .login-hero p {
    display:block !important;
    max-width:310px !important;
    margin:0 !important;
    font-size:.82rem !important;
    line-height:1.45 !important;
  }
  .login-right {
    box-sizing:border-box !important;
    max-width:calc(100vw - 24px) !important;
    width:calc(100% - 24px) !important;
    margin:-46px auto 16px !important;
    padding:24px 20px 24px !important;
    border-radius:25px !important;
    max-height:none !important;
    overflow:hidden !important;
  }
  .auth-close {
    top:12px !important;
    right:12px !important;
    width:34px !important;
    height:34px !important;
  }
  .auth-card-head { margin-bottom:6px !important; }
  .auth-card-logo {
    height:76px !important;
    max-width:180px !important;
  }
  .auth-h2.auth-card-title {
    max-width:280px !important;
    font-size:1.55rem !important;
    line-height:1.08 !important;
  }
  .auth-title-rule { margin:12px auto 20px !important; }
  .auth-field { margin-bottom:13px !important; }
  .auth-field input,
  .auth-btn-primary,
  .auth-social-btn { height:50px !important; }
  .auth-row {
    margin:4px 0 14px !important;
    gap:6px !important;
  }
  .auth-divider { margin:18px 0 !important; }
  .auth-switch { margin-top:18px !important; }
}

@media (max-width: 390px) {
  .login-left { min-height:390px !important; padding:18px 16px 70px !important; }
  .login-logo img { height:60px !important; }
  .login-hero { width:94% !important; margin-top:16px !important; padding:0 4px !important; }
  .login-hero h2 { font-size:clamp(1.9rem, 9vw, 2.45rem) !important; }
  .login-hero p { max-width:270px !important; }
  .login-right { width:calc(100% - 16px) !important; margin-top:-38px !important; padding:22px 16px !important; }
  .auth-card-logo { height:68px !important; }
  .auth-h2.auth-card-title { font-size:1.42rem !important; }
  .auth-check,
  .auth-link { font-size:.78rem !important; }
}




/* === IDN audit corrections: public counters, immersive CTA & glyph cleanup === */
.h-counter-num[data-target], #testiStatCount, #testiStatRecommend { min-width: 2ch; }
.sc-final-btns { display:flex !important; align-items:center !important; justify-content:center !important; gap:16px !important; flex-wrap:wrap !important; }
.sc-final-btns > button { margin:0 !important; white-space:nowrap !important; flex:0 0 auto !important; }
.schip { display:inline-flex !important; align-items:center !important; justify-content:center !important; white-space:nowrap !important; line-height:1.2 !important; }
.imm-links { display:flex !important; align-items:center !important; justify-content:center !important; gap:14px !important; flex-wrap:wrap !important; }
.imm-links span { display:inline-flex !important; }
@media (max-width:640px){
  .sc-final-btns { flex-direction:column !important; gap:12px !important; width:100% !important; }
  .sc-final-btns > button { width:min(280px,100%) !important; }
  .imm-links { flex-direction:column !important; gap:8px !important; }
  .imm-links span { display:none !important; }
}



/* ═══════════════════════════════════════════════════
   IDN/Kids' Island — Premium motion pass
   Hero vivant · immersion cinématique · app parent animée
═══════════════════════════════════════════════════ */
#hero::before{
  content:'';position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 18% 28%, rgba(123,174,138,.28), transparent 24%),
    radial-gradient(circle at 75% 18%, rgba(232,96,76,.18), transparent 25%),
    radial-gradient(circle at 68% 78%, rgba(240,165,0,.14), transparent 24%);
  filter:blur(18px);animation:kiHeroBreath 14s ease-in-out infinite alternate;
}
@keyframes kiHeroBreath{0%{transform:scale(1) translate3d(0,0,0);opacity:.82}100%{transform:scale(1.08) translate3d(-2%,1%,0);opacity:1}}
.hero-floaters{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none}
.ki-floater{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:999px;filter:drop-shadow(0 16px 28px rgba(0,0,0,.08));opacity:.78;will-change:transform;animation:kiFloatUp linear infinite}
.ki-floater.balloon{width:38px;height:48px;background:linear-gradient(145deg,#F47D60,#F8B195);box-shadow:inset -8px -8px 16px rgba(0,0,0,.06)}
.ki-floater.balloon::after{content:'';position:absolute;bottom:-10px;left:50%;width:1px;height:18px;background:rgba(28,28,30,.18)}
.ki-floater.cloud{width:110px;height:42px;background:rgba(255,255,255,.65);filter:blur(.2px) drop-shadow(0 14px 24px rgba(0,0,0,.04));opacity:.54}
.ki-floater.cloud::before,.ki-floater.cloud::after{content:'';position:absolute;border-radius:50%;background:inherit}.ki-floater.cloud::before{width:50px;height:50px;left:18px;bottom:8px}.ki-floater.cloud::after{width:64px;height:64px;right:15px;bottom:4px}
.ki-floater.spark{width:8px;height:8px;background:rgba(255,255,255,.95);box-shadow:0 0 24px rgba(255,255,255,.8)}
@keyframes kiFloatUp{0%{transform:translate3d(var(--x,0),110vh,0) rotate(var(--r,0deg))}100%{transform:translate3d(calc(var(--x,0) + var(--dx,0px)),-22vh,0) rotate(calc(var(--r,0deg) + 16deg))}}
.hero-card{transform-style:preserve-3d;will-change:transform;transition:transform .18s ease, box-shadow .3s ease;position:relative;z-index:2}
.hero-card::after{content:'';position:absolute;inset:0;border-radius:28px;background:linear-gradient(120deg, transparent 15%, rgba(255,255,255,.32) 45%, transparent 75%);opacity:0;transform:translateX(-60%);transition:opacity .3s ease;pointer-events:none}.hero-card:hover::after{opacity:.65;animation:kiShine 1.1s ease forwards}@keyframes kiShine{to{transform:translateX(70%)}}
#stats{position:relative;overflow:hidden}#stats::before{content:'';position:absolute;left:8%;right:8%;top:-60px;height:160px;background:radial-gradient(ellipse at center,rgba(232,96,76,.18),transparent 65%);filter:blur(16px);pointer-events:none}.stat-cell{transform:translateY(10px);transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .7s;opacity:.92}.stat-cell.in{transform:translateY(0);opacity:1}
#imm.show .sc.on{animation:kiSceneIn .7s cubic-bezier(.16,1,.3,1)}@keyframes kiSceneIn{0%{opacity:.15;filter:blur(10px);transform:scale(1.02)}100%{opacity:1;filter:blur(0);transform:scale(1)}}
.sc-photo::before{content:'';position:absolute;inset:-15%;z-index:1;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.18),transparent 25%);opacity:.7;mix-blend-mode:screen;animation:kiSpotMove 9s ease-in-out infinite alternate}@keyframes kiSpotMove{0%{--mx:25%;--my:30%}100%{--mx:72%;--my:64%}}
.sc-split{perspective:1000px}.sc.on .scard{animation:kiCardRise .8s cubic-bezier(.16,1,.3,1) both}.sc.on .sc-h2,.sc.on .sc-txt,.sc.on .sdet{animation:kiTextRise .75s cubic-bezier(.16,1,.3,1) both}.sc.on .sc-txt{animation-delay:.08s}.sc.on .sdet:nth-child(1){animation-delay:.16s}.sc.on .sdet:nth-child(2){animation-delay:.24s}@keyframes kiCardRise{from{opacity:0;transform:translateY(30px) rotateX(7deg) scale(.96)}to{opacity:1;transform:none}}@keyframes kiTextRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ki-imm-time{position:absolute;left:32px;bottom:26px;z-index:11;display:flex;align-items:center;gap:12px;color:white;font-weight:700;letter-spacing:.05em}.ki-imm-time::before{content:'';width:52px;height:2px;background:rgba(255,255,255,.45)}.ki-imm-time span{font-family:'DM Serif Display',serif;font-size:1.8rem}.ki-imm-timeline{position:absolute;right:28px;top:50%;transform:translateY(-50%);z-index:11;display:flex;flex-direction:column;gap:12px}.ki-imm-timeline button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.28);cursor:pointer;transition:all .25s}.ki-imm-timeline button.on{height:34px;border-radius:99px;background:white}
#app{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#F7F3EE 100%)}#app::before{content:'';position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(123,174,138,.18),transparent 65%);left:-160px;top:40px;filter:blur(8px)}#app::after{content:'';position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(232,96,76,.14),transparent 62%);right:-160px;bottom:-160px;filter:blur(10px)}
.ki-app-showcase{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;min-height:620px}.ki-phone{position:relative;width:min(340px,86vw);height:690px;background:#11251e;border-radius:48px;padding:14px;box-shadow:0 48px 100px rgba(19,47,38,.28), inset 0 0 0 2px rgba(255,255,255,.08);transform-style:preserve-3d;will-change:transform;animation:kiPhoneFloat 6s ease-in-out infinite}.ki-phone::before{content:'';position:absolute;top:9px;left:50%;transform:translateX(-50%);width:96px;height:26px;background:#0B1713;border-radius:0 0 18px 18px;z-index:5}.ki-phone-screen{position:relative;height:100%;border-radius:38px;overflow:hidden;background:linear-gradient(180deg,#F8F3EB 0%,#FDFBF8 100%)}.ki-phone-hero{padding:44px 18px 18px;background:linear-gradient(135deg,#1F6B57,#79B58B);color:white;position:relative;overflow:hidden}.ki-phone-hero::after{content:'🎈';position:absolute;right:20px;top:34px;font-size:3rem;filter:drop-shadow(0 10px 18px rgba(0,0,0,.15));animation:kiBalloonBob 4s ease-in-out infinite}.ki-phone-hello{font-size:.8rem;opacity:.78}.ki-phone-child{font-family:'DM Serif Display',serif;font-size:1.7rem;line-height:1.05;margin-top:3px}.ki-phone-sub{font-size:.76rem;opacity:.8;margin-top:8px}.ki-live-feed{padding:16px;display:flex;flex-direction:column;gap:10px}.ki-feed-item{display:flex;gap:10px;align-items:flex-start;background:white;border-radius:18px;padding:12px;box-shadow:0 10px 24px rgba(19,47,38,.06);border:1px solid rgba(0,0,0,.04);opacity:0;transform:translateY(18px);animation:kiFeedIn 12s ease-in-out infinite}.ki-feed-item:nth-child(1){animation-delay:.2s}.ki-feed-item:nth-child(2){animation-delay:1.2s}.ki-feed-item:nth-child(3){animation-delay:2.2s}.ki-feed-item:nth-child(4){animation-delay:3.2s}.ki-feed-icon{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.ki-feed-body strong{display:block;font-size:.78rem;color:#16241E}.ki-feed-body span{display:block;font-size:.68rem;color:#728078;line-height:1.4;margin-top:2px}.ki-memory{margin:0 16px 14px;border-radius:22px;overflow:hidden;background:#172A22;color:white;box-shadow:0 16px 34px rgba(19,47,38,.16);transform:translateZ(20px)}.ki-memory-top{height:128px;background:url('/assets/app-mockup.jpg') center/cover;position:relative}.ki-memory-top::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.58),transparent)}.ki-memory-text{padding:14px}.ki-memory-text strong{display:block;font-family:'DM Serif Display',serif;font-size:1.05rem}.ki-memory-text p{font-size:.72rem;line-height:1.45;color:rgba(255,255,255,.78);margin-top:4px}.ki-app-note{position:absolute;left:0;top:86px;transform:translateX(-42%) rotate(-4deg);background:white;border-radius:24px;padding:16px 18px;box-shadow:0 24px 60px rgba(19,47,38,.14);max-width:210px;animation:kiNoteFloat 5s ease-in-out infinite}.ki-app-note.right{left:auto;right:0;top:330px;transform:translateX(42%) rotate(5deg);animation-delay:-1.4s}.ki-app-note small{display:block;color:#839088;font-weight:700;text-transform:uppercase;font-size:.58rem;letter-spacing:.08em}.ki-app-note strong{font-size:.86rem;color:#132D25}.ki-app-note p{font-size:.72rem;color:#68756E;line-height:1.42;margin-top:4px}.ki-app-stories{display:flex;gap:6px;margin:10px 16px 12px}.ki-story{height:4px;flex:1;border-radius:99px;background:rgba(19,47,38,.12);overflow:hidden}.ki-story::after{content:'';display:block;height:100%;width:0;background:#E8604C;animation:kiStory 12s linear infinite}.ki-story:nth-child(2)::after{animation-delay:3s}.ki-story:nth-child(3)::after{animation-delay:6s}.ki-story:nth-child(4)::after{animation-delay:9s}@keyframes kiPhoneFloat{0%,100%{transform:translateY(0) rotateY(-5deg) rotateX(2deg)}50%{transform:translateY(-14px) rotateY(5deg) rotateX(-1deg)}}@keyframes kiNoteFloat{0%,100%{margin-top:0}50%{margin-top:-12px}}@keyframes kiBalloonBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(4deg)}}@keyframes kiFeedIn{0%,6%{opacity:0;transform:translateY(18px)}10%,78%{opacity:1;transform:none}88%,100%{opacity:.55;transform:translateY(-4px)}}@keyframes kiStory{0%{width:0}24%{width:100%}25%,100%{width:100%}}
/* ═══ Section « Application » : accueil actuel de l'espace parent ═══ */
.ki-pm{font-size:10px;display:flex;flex-direction:column;gap:.9em;padding:3.7em 1.25em 1.2em;height:100%;box-sizing:border-box}
.ki-pm-bar{display:flex;align-items:center;justify-content:space-between}
.ki-pm-btn{width:3.2em;height:3.2em;border-radius:1em;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08);display:inline-flex;align-items:center;justify-content:center;font-size:1.05em;color:#15392B}
.ki-pm-logo{height:3.1em;width:auto}
.ki-pm-r{display:flex;gap:.6em}
.ki-pm-av{width:3.2em;height:3.2em;border-radius:50%;background:#2E6B45;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:1em}
.ki-pm-hero{border-radius:1.8em;padding:1.35em 1.5em;background:linear-gradient(135deg,#15392B,#2E6B45);color:#fff;position:relative;overflow:hidden}
.ki-pm-hero::after{content:'🎈';position:absolute;right:.5em;top:.15em;font-size:2.5em;animation:kiBalloonBob 4s ease-in-out infinite}
.ki-pm-hero>b{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:1.85em;line-height:1.12}
.ki-pm-hero>span{display:block;font-size:1em;opacity:.85;margin-top:.2em}
.ki-pm-cta{display:flex;align-items:center;gap:.9em;border-radius:1.5em;padding:1.05em 1.2em;background:linear-gradient(135deg,#C9432F,#B23A28);color:#fff}
.ki-pm-cta b{display:block;font-size:1.08em;line-height:1.25}
.ki-pm-cta small{display:block;font-size:.86em;opacity:.9}
.ki-pm-cta-ic{font-size:1.6em}
.ki-pm-arrow{margin-left:auto;font-weight:700}
.ki-pm-kid{background:#fff;border-radius:1.8em;padding:1.2em;box-shadow:0 8px 22px rgba(21,57,43,.08)}
.ki-pm-top{display:flex;gap:.9em;align-items:center}
.ki-pm-kav{font-size:1.5em;width:2.3em;height:2.3em;flex:none;border-radius:50%;background:linear-gradient(135deg,#F4B9A9,#E8604C);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:'DM Serif Display',serif}
.ki-pm-top b{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:1.6em;color:#15392B;line-height:1.1}
.ki-pm-top small{font-size:.95em;color:#6b6b6b}
.ki-pm-status{margin:.9em 0;background:#EAF4EC;color:#2E6B45;border-radius:1em;padding:.7em .9em;font-weight:700;font-size:1.02em;display:flex;align-items:center;gap:.6em}
.ki-pm-status i{width:.7em;height:.7em;flex:none;border-radius:50%;background:#3DA35D;animation:kiPmPulse 2s ease-out infinite}
@keyframes kiPmPulse{0%{box-shadow:0 0 0 0 rgba(61,163,93,.5)}100%{box-shadow:0 0 0 .8em rgba(61,163,93,0)}}
.ki-pm-tiles{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.ki-pm-tile{background:#FAF6EF;border-radius:1.1em;padding:.7em .5em;text-align:center}
.ki-pm-tile em{display:block;font-style:normal;font-size:1.45em;line-height:1.25}
.ki-pm-tile b{display:block;font-size:1.2em;color:#15392B}
.ki-pm-tile small{font-size:.76em;letter-spacing:.06em;text-transform:uppercase;color:#7a7f7c}
.ki-pm-quote{margin:.9em 0 0;font-size:.96em;font-style:italic;color:#555;line-height:1.45}
.ki-pm-more{display:block;margin-top:.55em;font-size:1em;font-weight:700;color:#C9432F}
.ki-pm-event{display:flex;align-items:center;gap:.9em;background:#fff;border-radius:1.5em;padding:.85em 1em;box-shadow:0 8px 22px rgba(21,57,43,.06)}
.ki-pm-date{width:3.6em;flex:none;text-align:center;background:#FDEDE8;border-radius:1em;padding:.45em 0;color:#C9432F;line-height:1}
.ki-pm-date b{display:block;font-family:'DM Serif Display',serif;font-size:1.7em;font-weight:400}
.ki-pm-date small{font-size:.74em;font-weight:700}
.ki-pm-ev{min-width:0}
.ki-pm-ev small{display:block;font-size:.8em;color:#2E6B45;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ki-pm-ev b{display:block;font-size:1.08em;color:#15392B}
.ki-pm-yes{margin-left:auto;flex:none;background:#2E6B45;color:#fff;border-radius:999px;padding:.55em .85em;font-size:.88em;font-weight:700;white-space:nowrap}
.ki-pm-msg{display:flex;align-items:center;gap:.8em;background:#fff;border-radius:1.5em;padding:.85em 1em;box-shadow:0 8px 22px rgba(21,57,43,.06)}
.ki-pm-msg-av{width:3.1em;height:3.1em;flex:none;border-radius:50%;background:#EAF4EC;color:#2E6B45;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.95em}
.ki-pm-msg-b{min-width:0;flex:1}
.ki-pm-msg-b b{display:flex;justify-content:space-between;gap:.6em;font-size:1.02em;color:#15392B}
.ki-pm-msg-b time{font-weight:400;font-size:.85em;color:#8a918d}
.ki-pm-msg-b small{display:block;font-size:.9em;color:#5b6660;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ki-pm-dot{width:.75em;height:.75em;flex:none;border-radius:50%;background:#E8604C}
.ki-pm-in{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.ki-pm.is-on .ki-pm-in{opacity:1;transform:none}
.ki-pm-clock{transition:color .4s}.ki-pm-clock.tick{color:#2E6B45}
@media(max-width:900px){.ki-pm{font-size:9.1px}}
@media(prefers-reduced-motion:reduce){.ki-pm-in{opacity:1!important;transform:none!important;transition:none!important}.ki-pm-status i,.ki-pm-hero::after{animation:none}}
.ki-app-copy{position:relative;z-index:2}.ki-feature-premium{position:relative;overflow:hidden}.ki-feature-premium::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.65),transparent);transform:translateX(-110%);opacity:0}.ki-feature-premium:hover::after{opacity:1;animation:kiFeatureShine .9s ease forwards}@keyframes kiFeatureShine{to{transform:translateX(110%)}}
@media(max-width:900px){.ki-app-showcase{min-height:auto;padding:10px 0 24px}.ki-phone{width:min(310px,86vw);height:628px}.ki-app-note{display:none}.ki-imm-timeline,.ki-imm-time{display:none}}
@media(prefers-reduced-motion:reduce){.ki-floater,.ki-phone,.ki-app-note,.ki-feed-item,.ki-story::after,#hero::before{animation:none!important}.hero-card{transition:none}}