:root{--bg:#02020a;--cyan:#56efff;--blue:#62a8ff;--pink:#ff65dc;--violet:#9a72ff;--white:#f7f8ff;--muted:#aeb6cc}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--white);font-family:Inter,Segoe UI,Arial,sans-serif}body{overflow-x:hidden}
button{font:inherit}.is-hidden{visibility:hidden}.site{min-height:100vh;background:radial-gradient(circle at 50% 52%,#061736 0,#030817 34%,#02020a 68%);position:relative;overflow:hidden}.site.reveal{animation:siteReveal 1.4s ease both}@keyframes siteReveal{from{opacity:0;filter:blur(7px)}to{opacity:1;filter:none}}
.start-screen{position:fixed;inset:0;background:#000;z-index:1000;display:grid;place-items:center;transition:opacity 1.1s ease,visibility 1.1s}.start-screen.exit{opacity:0;visibility:hidden}.start-inner{text-align:center}.start-copy{font-size:clamp(1rem,1.6vw,1.45rem);letter-spacing:.16em;text-transform:uppercase;color:white;text-shadow:0 0 10px rgba(255,255,255,.6),0 0 28px rgba(140,180,255,.35);margin-bottom:2.2rem}.start-luciole{border:0;background:transparent;cursor:pointer;padding:0;filter:brightness(.28) saturate(.9);animation:introPulse 2.3s ease-in-out infinite;transition:.4s}.start-luciole:hover{filter:brightness(.55) saturate(1.15);transform:scale(1.035)}.start-luciole img{width:min(30vw,340px);display:block}.start-luciole.awake{filter:brightness(1.2) saturate(1.1);transform:scale(1.09)}@keyframes introPulse{50%{filter:brightness(.42) saturate(1.05);drop-shadow(0 0 15px rgba(82,225,255,.35))}}
.brand{position:fixed;z-index:20;top:34px;left:48px}.wordmark{font-size:clamp(1.5rem,2.4vw,2.85rem);letter-spacing:.28em;font-weight:300}.tagline{margin-top:8px;font-size:clamp(.54rem,.72vw,.72rem);letter-spacing:.28em;color:#e9ebf3;opacity:.86}.sound-toggle{position:fixed;z-index:30;right:32px;top:32px;border:1px solid rgba(255,255,255,.2);background:rgba(4,8,20,.5);color:#fff;border-radius:999px;padding:10px 15px;letter-spacing:.12em;font-size:.72rem;cursor:pointer;backdrop-filter:blur(8px)}
.view{display:none}.view.active{display:block}.home-view{min-height:100vh;position:relative}.ambient{position:absolute;border-radius:50%;filter:blur(70px);opacity:.13;pointer-events:none}.ambient-a{width:36vw;height:36vw;background:#e42ed4;left:-8vw;top:28vh}.ambient-b{width:38vw;height:38vw;background:#167bff;right:-9vw;top:28vh}
.firefly-wrap{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:min(84vw,1080px);aspect-ratio:1/1;filter:drop-shadow(0 0 18px rgba(38,180,255,.22))}.firefly{position:absolute;inset:7% 0 0 0;width:100%;height:88%;object-fit:contain;user-select:none;pointer-events:none;transition:filter .35s ease,transform .35s ease}.firefly-wrap:has(.nav-zone:hover) .firefly{filter:brightness(1.08) saturate(1.08)}
.nav-zone{position:absolute;border:0;background:transparent;color:#fff;cursor:pointer;z-index:5;outline:none}.nav-zone .label{position:absolute;white-space:nowrap;letter-spacing:.16em;font-size:clamp(.9rem,1.55vw,1.7rem);font-weight:350;text-shadow:0 0 14px currentColor;transition:.25s}.nav-zone .node{position:absolute;width:14px;height:14px;border-radius:50%;border:1px solid currentColor;background:#fff;box-shadow:0 0 8px currentColor,0 0 24px currentColor;animation:pulse 3.8s ease-in-out infinite}.nav-zone .trace{position:absolute;height:1px;background:linear-gradient(90deg,currentColor,transparent);opacity:.55;transition:.25s;transform-origin:left center}.nav-zone:hover .label{transform:scale(1.08);text-shadow:0 0 10px currentColor,0 0 26px currentColor}.nav-zone:hover .trace{opacity:1}.nav-zone:hover .node{animation:none;transform:scale(1.5);box-shadow:0 0 12px currentColor,0 0 35px currentColor}.nav-zone:focus-visible{outline:1px solid currentColor;border-radius:12px}
@keyframes pulse{0%,62%,100%{transform:scale(1);opacity:.72}72%{transform:scale(1.65);opacity:1}82%{transform:scale(1);opacity:.8}}
.zone-kids{color:var(--pink);left:1%;top:42%;width:40%;height:26%}.zone-kids .label{left:-1%;top:47%}.zone-kids .node{left:18%;top:49%;animation-delay:0s}.zone-kids .trace{left:20%;top:52%;width:46%;transform:rotate(6deg)}
.zone-ado{color:#8a9cff;right:1%;top:42%;width:40%;height:26%}.zone-ado .label{right:-2%;top:47%}.zone-ado .node{right:18%;top:49%;animation-delay:.7s}.zone-ado .trace{right:20%;top:52%;width:46%;transform:rotate(174deg)}
.zone-glow{color:var(--cyan);left:39%;top:39%;width:22%;height:36%}.zone-glow .label{left:50%;top:38%;transform:translateX(-50%)}.zone-glow:hover .label{transform:translateX(-50%) scale(1.08)}.zone-glow .node{left:50%;top:58%;transform:translateX(-50%);animation-delay:1.4s}.zone-glow:hover .node{transform:translateX(-50%) scale(1.5)}
.zone-project{color:#d89aff;left:27%;top:5%;width:46%;height:39%;border-radius:45% 45% 30% 30%}
.zone-project .label{left:50%;top:20%;transform:translateX(-50%)}
.zone-project:hover .label{transform:translateX(-50%) scale(1.08)}
.zone-project .node{left:50%;top:29%;transform:translateX(-50%);animation-delay:2.1s}
.zone-project:hover .node{transform:translateX(-50%) scale(1.5)}
.zone-project .trace{left:50%;top:34%;width:14%;transform:rotate(90deg)}
.zone-contact{color:#8feaff;left:34%;bottom:8%;width:32%;height:38%;border-radius:30% 30% 45% 45%}
.zone-contact .label{left:50%;bottom:32%;transform:translateX(-50%)}
.zone-contact:hover .label{transform:translateX(-50%) scale(1.08)}
.zone-contact .node{left:50%;top:54%;transform:translateX(-50%);animation-delay:2.8s}
.zone-contact:hover .node{transform:translateX(-50%) scale(1.5)}
.zone-contact .trace{left:50%;top:59%;width:14%;transform:rotate(90deg)}
.footer{position:fixed;z-index:20;bottom:24px;left:38px;right:38px;display:flex;gap:15px;align-items:center;color:#c9d4e5;font-size:.65rem;letter-spacing:.13em;text-transform:uppercase}.footer .copy{margin-left:auto}
.coming-soon{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.62);backdrop-filter:blur(10px);display:grid;place-items:center}.coming-card{width:min(90vw,500px);padding:42px;border:1px solid rgba(108,220,255,.25);background:linear-gradient(145deg,rgba(7,15,35,.96),rgba(15,4,31,.94));box-shadow:0 0 60px rgba(65,110,255,.18);text-align:center;position:relative;border-radius:20px}.coming-title{font-size:1.8rem;letter-spacing:.18em;color:#fff;text-shadow:0 0 20px #63cfff}.coming-card p{color:#cbd6e7;line-height:1.7}.close-btn{position:absolute;right:15px;top:10px;background:transparent;border:0;color:#fff;font-size:2rem;cursor:pointer}
.project-view{min-height:100vh;padding:120px 5vw 110px;background:radial-gradient(circle at 50% 0,#171133 0,#07101f 30%,#02020a 72%);overflow:auto}.project-shell{width:min(1180px,100%);margin:auto}.back-home{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#fff;border-radius:999px;padding:11px 18px;cursor:pointer;margin-bottom:44px}.project-kicker{letter-spacing:.2em;color:#a9eaff;font-size:.75rem;text-transform:uppercase}.project-view h1{font-size:clamp(2.4rem,5vw,5rem);line-height:1.03;max-width:950px;font-weight:300;margin:16px 0 25px;text-shadow:0 0 35px rgba(101,184,255,.18)}.project-intro{max-width:850px;color:#cbd4e7;line-height:1.8;font-size:1.08rem}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:60px 0 26px}.project-card,.not-hotaria,.universe{border:1px solid rgba(128,208,255,.15);background:linear-gradient(145deg,rgba(10,23,47,.74),rgba(19,7,39,.62));backdrop-filter:blur(8px);border-radius:22px;padding:30px;box-shadow:inset 0 0 40px rgba(89,149,255,.04)}.project-card.wide{grid-column:1/-1}.project-card span{color:#ff79da;letter-spacing:.14em;font-size:.72rem}.project-card h2{font-weight:400;font-size:1.45rem}.project-card p,.universe p,.not-hotaria p{color:#c4cee0;line-height:1.7}.universes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0}.universe h3{font-size:1.55rem;letter-spacing:.14em}.universe.glow h3{color:#7af7ff}.universe.kids h3{color:#ff77dc}.universe.ado h3{color:#8ba8ff}.not-hotaria{margin-top:26px}.not-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:18px}.not-grid strong{color:#fff}
@media(max-width:820px){.brand{top:22px;left:22px}.sound-toggle{top:20px;right:18px}.footer{position:absolute;bottom:14px;left:18px;right:18px;flex-wrap:wrap}.footer .copy{margin-left:0;width:100%}.firefly-wrap{width:120vw;top:50%}.zone-kids .label{left:8%;top:38%}.zone-ado .label{right:8%;top:38%}.zone-project .label{top:5%}.zone-contact .label{bottom:5%}.project-grid,.universes,.not-grid{grid-template-columns:1fr}.project-card.wide{grid-column:auto}.project-view{padding:110px 20px 90px}.start-luciole img{width:min(58vw,300px)}.start-copy{padding:0 22px}.tagline{max-width:250px;line-height:1.6}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* Correctif : respecter l'attribut hidden de la fenêtre prototype */
.coming-soon[hidden]{display:none!important}

/* Correctif zones cliquables : Projet + Contact */
.zone-project:hover,
.zone-contact:hover{
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.035),transparent 58%);
}

.footer-link{
  appearance:none;border:0;background:transparent;color:inherit;
  font:inherit;letter-spacing:inherit;text-transform:inherit;padding:0;
  cursor:pointer;transition:.2s;text-decoration:none
}
.footer-link:hover,.footer-link:focus-visible{
  color:#fff;text-shadow:0 0 12px rgba(120,220,255,.8);outline:none
}
.legal-modal[hidden]{display:none!important}
.legal-modal{
  position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.76);
  backdrop-filter:blur(12px);display:grid;place-items:center;padding:24px
}
.legal-card{
  width:min(92vw,860px);max-height:min(82vh,760px);overflow:auto;
  border:1px solid rgba(116,220,255,.25);
  background:linear-gradient(145deg,rgba(6,14,33,.985),rgba(18,6,35,.975));
  border-radius:22px;padding:42px 44px;position:relative;
  box-shadow:0 0 70px rgba(70,130,255,.17)
}
.legal-close{position:sticky;float:right;right:0;top:0;z-index:2}
.legal-card h2{font-weight:350;font-size:clamp(1.8rem,3vw,2.7rem);letter-spacing:.08em;margin:0 45px 25px 0}
.legal-card h3{font-weight:500;color:#a9eaff;margin-top:28px}
.legal-card p,.legal-card li{color:#c8d2e4;line-height:1.75}
.legal-card ul{padding-left:22px}
.legal-note{
  border-left:2px solid #ff79da;padding:10px 16px;margin:22px 0;
  background:rgba(255,121,218,.055);color:#e7d8ea
}

/* LE PROJET et CONTACT ont été déplacés dans le footer */
.zone-project,.zone-contact{display:none!important}

.footer{
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.footer-main{
  color:#eaf8ff!important;
  font-weight:600!important;
  letter-spacing:.16em!important;
}
.footer-main:hover,
.footer-main:focus-visible{
  color:#fff!important;
  text-shadow:
    0 0 7px rgba(255,255,255,.95),
    0 0 16px rgba(95,210,255,.7)!important;
}
.footer-separator{opacity:.42;margin:0 4px}
@media (max-width:760px){
  .footer{justify-content:center;padding-inline:18px;row-gap:8px}
  .footer .copy{width:100%;text-align:center;margin-left:0}
}


/* ===== Pages GLOW / KIDS / ADO / CONTACT ===== */
.branch-view{
  min-height:100vh;
  padding:118px 5vw 120px;
  overflow:auto;
  background:
    radial-gradient(circle at 50% 0,rgba(23,36,75,.62),transparent 33%),
    radial-gradient(circle at 100% 40%,rgba(168,48,186,.12),transparent 38%),
    #02020a;
}
.branch-shell{width:min(1180px,100%);margin:auto}
.branch-back{margin-bottom:42px}
.branch-kicker{letter-spacing:.22em;color:#b7eefe;font-size:.75rem;text-transform:uppercase}
.branch-view h1{
  max-width:980px;margin:16px 0 24px;font-weight:300;
  font-size:clamp(2.5rem,5vw,5.2rem);line-height:1.02;
  text-shadow:0 0 36px rgba(104,194,255,.18)
}
.branch-intro{max-width:900px;color:#cbd5e8;line-height:1.85;font-size:1.08rem}
.branch-grid,.contact-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:55px 0 28px
}
.branch-card,.catalogue-placeholder{
  border:1px solid rgba(128,208,255,.15);
  background:linear-gradient(145deg,rgba(10,23,47,.76),rgba(19,7,39,.62));
  backdrop-filter:blur(8px);border-radius:22px;padding:30px;
  box-shadow:inset 0 0 40px rgba(89,149,255,.04)
}
.branch-card span{font-size:.7rem;letter-spacing:.18em;color:#a9eaff}
.branch-card h2,.catalogue-placeholder h2{font-weight:400;font-size:1.45rem}
.branch-card p,.catalogue-placeholder p{color:#c4cee0;line-height:1.72}
.branch-kids .branch-kicker,.branch-kids .branch-card span{color:#ff82df}
.branch-ado .branch-kicker,.branch-ado .branch-card span{color:#9eb0ff}
.branch-glow .branch-kicker,.branch-glow .branch-card span{color:#77f3ff}
.contact-view .branch-kicker,.contact-view .branch-card span{color:#d7a5ff}
.parent-card{grid-column:1/-1}
.catalogue-placeholder{
  margin-top:26px;display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center
}
.ghost-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;opacity:.42}
.ghost-cards i{
  display:block;aspect-ratio:16/10;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(145deg,rgba(70,160,220,.12),rgba(120,50,150,.08));
  box-shadow:0 0 26px rgba(70,170,255,.06)
}

/* ===== Ambiance mobile uniquement ===== */
.mobile-atmosphere{display:none}

@media (max-width:820px) and (orientation:portrait){
  html,body{overflow-x:hidden;overflow-y:auto}
  .site{min-height:100svh;overflow:visible}
  .home-view{
    min-height:116svh;height:auto;overflow:visible;isolation:isolate;
    padding-bottom:145px;
  }
  .brand{top:22px;left:22px;right:100px}
  .wordmark{
    font-size:clamp(1.7rem,8vw,2.4rem);letter-spacing:.24em;
    text-shadow:0 0 8px rgba(255,255,255,.55),0 0 22px rgba(145,185,255,.22)
  }
  .tagline{font-size:clamp(.48rem,2.2vw,.66rem);letter-spacing:.19em;max-width:280px}
  .sound-toggle{top:20px;right:16px;padding:9px 11px;font-size:.61rem}

  .mobile-atmosphere{
    display:block;position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden
  }
  .jungle{
    position:absolute;width:46vw;height:30vh;opacity:.12;mix-blend-mode:screen;
    background:
      radial-gradient(ellipse at 20% 34%,rgba(38,108,120,.72) 0 8%,transparent 9%),
      radial-gradient(ellipse at 42% 54%,rgba(31,89,110,.62) 0 10%,transparent 11%),
      radial-gradient(ellipse at 68% 40%,rgba(74,48,120,.44) 0 11%,transparent 12%);
    filter:blur(.2px)
  }
  .jungle-l{left:-23vw;top:24vh;transform:rotate(-18deg)}
  .jungle-r{right:-23vw;top:48vh;transform:scaleX(-1) rotate(-16deg)}

  .mini-firefly{
    position:absolute;width:4px;height:4px;border-radius:50%;background:#f2ffff;
    box-shadow:0 0 7px #fff,0 0 15px #aef9ff,0 0 24px rgba(99,229,255,.72);
    opacity:.32;animation:mobileFirefly 8s ease-in-out infinite
  }
  .mf1{left:13%;top:27%;animation-delay:-1s}.mf2{left:83%;top:31%;animation-delay:-4s}
  .mf3{left:18%;top:60%;animation-delay:-2.5s}.mf4{left:76%;top:65%;animation-delay:-6s}
  .mf5{left:10%;top:82%;animation-delay:-5s}.mf6{left:88%;top:79%;animation-delay:-3.5s}
  @keyframes mobileFirefly{
    0%,100%{transform:translate(0,0) scale(.7);opacity:.2}
    24%{transform:translate(8px,-13px) scale(1.15);opacity:.82}
    50%{transform:translate(-5px,-28px) scale(.85);opacity:.36}
    74%{transform:translate(11px,-16px) scale(1.3);opacity:.92}
  }

  .firefly-wrap{
    left:50%;top:50%;transform:translate(-50%,-50%);
    width:min(88vw,520px);aspect-ratio:1/1;z-index:5
  }
  .firefly{inset:7% 0 0;width:100%;height:88%;object-fit:contain}

  .zone-kids{left:21%;top:-5%;width:58%;height:30%}
  .zone-kids .label{left:50%;top:0;transform:translateX(-50%);font-size:clamp(.9rem,5vw,1.25rem)}
  .zone-kids:hover .label{transform:translateX(-50%) scale(1.06)}
  .zone-kids .node{left:50%;top:26%;transform:translateX(-50%)}
  .zone-kids:hover .node{transform:translateX(-50%) scale(1.5)}
  .zone-kids .trace{left:50%;top:34%;width:20%;transform:rotate(90deg)}

  .zone-glow{left:-1%;top:40%;width:43%;height:35%}
  .zone-glow .label{left:0;top:42%;transform:none;font-size:clamp(.88rem,4.7vw,1.2rem)}
  .zone-glow:hover .label{transform:scale(1.06)}
  .zone-glow .node{left:29%;top:61%;transform:none}
  .zone-glow:hover .node{transform:scale(1.5)}

  .zone-ado{right:-1%;left:auto;top:40%;width:43%;height:35%}
  .zone-ado .label{right:0;top:42%;font-size:clamp(.88rem,4.7vw,1.2rem)}
  .zone-ado .node{right:29%;top:61%}
  .zone-ado .trace{right:31%;top:65%;width:47%;transform:rotate(187deg)}

  .nav-zone .node{width:11px;height:11px}

  .footer{
    position:absolute;left:18px;right:18px;bottom:36px;
    justify-content:center;gap:7px 9px;row-gap:8px;
    font-size:.54rem;line-height:1.45;text-align:center
  }
  .footer .footer-main{font-size:.68rem}
  .footer-separator{width:100%;height:0;overflow:hidden;opacity:0}
  .footer .copy{width:100%;text-align:center;margin-left:0;padding-bottom:8px}

  .branch-view,.project-view{
    min-height:100svh;padding:100px 18px 118px
  }
  .branch-view h1,.project-view h1{font-size:clamp(2.1rem,10vw,3.35rem)}
  .branch-intro,.project-intro{font-size:.98rem}
  .branch-grid,.contact-grid,.project-grid,.universes,.not-grid{
    grid-template-columns:1fr
  }
  .parent-card,.project-card.wide{grid-column:auto}
  .catalogue-placeholder{grid-template-columns:1fr}
  .ghost-cards{grid-template-columns:repeat(3,1fr)}
  .legal-card{width:94vw;max-height:86svh;padding:34px 22px}
  .start-copy{font-size:clamp(.92rem,4.8vw,1.2rem);padding:0 18px}
  .start-luciole img{width:min(58vw,285px)}
}


/* ================================================================
   HOTARIA — FINAL PRÉ-LANCEMENT
   Additions uniquement : intro d'entrée, lucioles desktop discrètes,
   email Contact. La composition desktop existante reste inchangée.
   ================================================================ */

.start-intro{
  width:min(680px,86vw);
  margin:-.9rem auto 2rem;
  color:rgba(232,238,249,.78);
  font-size:clamp(.72rem,1.05vw,.95rem);
  line-height:1.7;
  letter-spacing:.045em;
  text-transform:none;
  text-shadow:0 0 14px rgba(133,193,255,.10);
}

.contact-email{
  color:#b9f6ff;
  text-decoration:none;
  border-bottom:1px solid rgba(124,231,255,.3);
  transition:.2s ease;
}
.contact-email:hover,
.contact-email:focus-visible{
  color:#fff;
  border-bottom-color:rgba(255,255,255,.8);
  text-shadow:0 0 14px rgba(98,227,255,.55);
}

/* Lucioles d'ambiance desktop — volontairement très faibles et espacées */
.desktop-fireflies{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.desktop-firefly{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(233,255,255,.82);
  box-shadow:
    0 0 4px rgba(255,255,255,.42),
    0 0 9px rgba(126,238,255,.26);
  opacity:.13;
  animation:desktopFireflyDrift 13s ease-in-out infinite;
}
.df1{left:11%;top:24%;animation-delay:-2s}
.df2{left:83%;top:20%;animation-delay:-7s}
.df3{left:19%;top:68%;animation-delay:-10s}
.df4{left:77%;top:66%;animation-delay:-4s}
.df5{left:32%;top:18%;animation-delay:-8s}
.df6{left:69%;top:77%;animation-delay:-12s}

@keyframes desktopFireflyDrift{
  0%,100%{transform:translate(0,0) scale(.75);opacity:.08}
  25%{transform:translate(7px,-9px) scale(1);opacity:.24}
  52%{transform:translate(-4px,-17px) scale(.85);opacity:.12}
  76%{transform:translate(8px,-11px) scale(1.08);opacity:.20}
}

/* Sur mobile, on conserve uniquement l'ambiance mobile déjà prévue. */
@media (max-width:820px){
  .desktop-fireflies{display:none}
  .start-intro{
    width:min(88vw,560px);
    margin:-.7rem auto 1.55rem;
    font-size:clamp(.72rem,3.2vw,.9rem);
    line-height:1.6;
    padding:0 10px;
  }
}

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce){
  .desktop-firefly,
  .mini-firefly{animation:none !important}
}