@font-face{font-family:"Lilita One";src:url("../assets/fonts/lilita-one/LilitaOne-Regular.woff") format("woff");font-style:normal;font-weight:400;font-display:swap}
:root{--site-font:"Lilita One","Arial Rounded MT Bold",system-ui,sans-serif;--ink:#06162a;--navy:#0b2443;--ice:#74d7ff;--pale:#eaf9ff;--blue:#1976d2;--ember:#ff914d;--panel:rgba(249,253,255,.91);--muted:#617288;--line:#cfe5ef;--shadow:0 20px 55px rgba(2,20,42,.16)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--site-font);font-synthesis:style;color:var(--ink);background:linear-gradient(#e8f8ff 0,#f8fcff 55%,#dff2fb 100%);min-height:100vh}.topbar{height:76px;display:flex;align-items:center;gap:28px;padding:0 max(20px,calc((100vw - 1240px)/2));background:rgba(5,22,43,.94);color:#fff;position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.12)}button,select,input,textarea{font:inherit}.brand{display:flex;align-items:center;gap:10px;color:#fff;background:none;border:0;cursor:pointer;padding:0}.brandmark{display:grid;place-items:center;width:38px;height:38px;background:linear-gradient(145deg,#baf0ff,#238dd4);clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);font-weight:950;color:#082240}.brand b,.brand small{display:block;line-height:1;text-align:left;letter-spacing:.08em}.brand small{font-size:9px;color:#8edfff;margin-top:4px}.topbar nav{display:flex;gap:8px;margin-left:auto}.topbar nav button,.language select{border:1px solid transparent;background:transparent;color:#cce9f8;padding:10px 12px;border-radius:12px;cursor:pointer}.topbar nav button:hover{background:#173757;color:#fff}.language span{position:absolute;clip:rect(0 0 0 0)}.language select{border-color:#33516c}.view{display:none;max-width:1240px;margin:auto;padding:42px 22px 80px;position:relative}.view.active{display:block}.home{min-height:calc(100vh - 76px);padding-top:82px}.aurora{position:absolute;inset:0 -15vw auto;height:450px;z-index:-1;background:radial-gradient(ellipse at 25% 30%,rgba(63,222,223,.25),transparent 42%),radial-gradient(ellipse at 70% 0,rgba(76,120,255,.28),transparent 40%);filter:blur(18px)}.hero-copy{max-width:750px}.eyebrow{font-size:12px;font-weight:900;letter-spacing:.17em;color:#1484b6;margin:0 0 12px}.hero-copy h1,.se
















/* Larger page-navigation labels, with compact spacing on narrow screens. */
.topbar nav button{font-size:20px}
@media(min-width:801px) and (max-width:1000px){
  .topbar nav{gap:4px}
  .topbar nav button{font-size:18px;padding-inline:6px}
}
@media(max-width:800px){
  .topbar nav{gap:2px}
  .topbar nav button{font-size:13px;padding-inline:2px}
}
































/* Wordmark de la barre supérieure. */
.brand-wordmark{display:block;width:124px;height:auto;max-height:46px;object-fit:contain}
@media(max-width:800px){.brand-wordmark{width:104px;max-height:42px}}
































/* Arbre de compétences T11 : même parcours ramifié pour les trois branches. */

/* Barre supérieure : navigation seule, sans logo. */
.topbar .brand{display:none}

/* Navigation : même colonne utile que le contenu des pages (hors rails publicitaires).
   Les six boutons se répartissent toujours toute la largeur disponible. */
.topbar{gap:0;padding-inline:max(22px,calc((100vw - 1196px)/2))}
.topbar nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));flex:1;min-width:0;width:100%;margin-left:0;gap:8px}
.topbar nav button{min-width:0;width:100%;text-align:center;white-space:nowrap}
@media(max-width:800px){
  .topbar{padding-inline:22px}
  .topbar nav{gap:2px}
  .topbar nav button{font-size:clamp(11px,3.2vw,14px);padding-inline:1px;white-space:normal;line-height:1.05}
}

/* Toutes les fenêtres de sélection utilisent la fermeture validée sur Talismans. */
#levelPicker,#furnacePicker{position:relative}
#levelPicker .dialog-close,#furnacePicker .dialog-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  color:#e9faff;
  background:#0b2d4e;
  border:1px solid #70c9e8;
  box-shadow:0 4px 10px rgba(0,21,48,.34);
}

/* Barre de navigation : séparateurs courts et bleus, inspirés du ruban de jeu. */
.topbar{background:linear-gradient(180deg,rgba(20,56,94,.97),rgba(12,39,70,.97))}
.topbar nav{gap:0}
.topbar nav button{position:relative}
.topbar nav button+button::before{
  content:"";
  position:absolute;
  left:0;
  top:20%;
  width:2px;
  height:60%;
  border-radius:2px;
  background:linear-gradient(90deg,rgba(4,23,48,.42),rgba(155,207,239,.35));
  box-shadow:1px 0 rgba(255,255,255,.08);
}

/* Navigation mobile : barre défilante horizontalement, page active surlignée et recentrée. */
@media(max-width:600px){
  .topbar{gap:8px;padding-inline:12px 10px}
  .topbar nav{display:flex;gap:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .topbar nav.at-end{-webkit-mask-image:none;mask-image:none}
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav button{flex:0 0 auto;width:auto;padding:10px 12px;font-size:15px;line-height:1;white-space:nowrap;scroll-snap-align:center}
  .topbar nav button[aria-current="page"]{color:#fff;background:rgba(116,215,255,.2);box-shadow:inset 0 0 0 1px rgba(116,215,255,.5)}
  .topbar nav button[aria-current="page"]::before,.topbar nav button[aria-current="page"]+button::before{opacity:0}
}

/* Arrière-plan du document : visible lors du rebond de défilement sur mobile (haut et bas de page). */
html,body{background-color:#123f66}

/* Fenêtres de sélection : même forme que celle de la Chaudière (coins arrondis 22 px, liseré bleu 2 px). */
dialog#levelPicker,dialog#levelPicker.charm-level-picker{border-radius:22px;border:2px solid rgba(131,203,240,.65)}

/* Mobile : fenêtres de sélection fixées à l'écran et limitées à la hauteur réellement visible (barres du navigateur
   déduites), avec défilement interne — le haut n'est plus coupé et le bas reste atteignable. */
@media(max-width:767px){
  dialog#levelPicker,dialog#levelPicker.charm-level-picker{position:fixed;inset:0;margin:auto;max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
}

/* Fenêtres de sélection : page en arrière-plan floutée et voilée (même flou que la fenêtre T11). */
dialog#furnacePicker::backdrop,dialog#levelPicker::backdrop{background:rgba(2,15,29,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* Sélecteur de langue : plus discret que les boutons du menu, mais lisible */
.language select{font-size:13px;padding:5px 8px;border-radius:9px}

/* Pas de zoom au double appui (sélection rapide des niveaux) ; le zoom à deux doigts reste possible. */
html{touch-action:manipulation}

/* Menu des langues (src/lang-menu.js) : même famille que les boutons de la barre du haut */
.lang-menu{position:relative;flex:none}
.lang-menu .lang-current{display:flex;align-items:center;gap:6px;font:inherit;font-size:13px;line-height:1;color:#fff;background:linear-gradient(180deg,#124d81 0,#185e95 44%,#10466f 100%);border:1px solid rgba(116,215,255,.45);border-radius:9px;padding:6px 9px;cursor:pointer;text-shadow:0 1px 1px rgba(3,24,46,.45)}
.lang-menu .lang-current:hover,.lang-menu .lang-current[aria-expanded="true"]{background:linear-gradient(180deg,#165a96 0,#1d6cab 44%,#135282 100%);border-color:rgba(116,215,255,.7)}
.lang-menu .lang-current i{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.lang-menu .lang-current[aria-expanded="true"] i{transform:translateY(1px) rotate(-135deg)}
.lang-menu .lang-list{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:150px;margin:0;padding:6px;list-style:none;background:linear-gradient(180deg,rgba(20,56,94,.98),rgba(12,39,70,.98));border:1px solid rgba(116,215,255,.32);border-radius:12px;box-shadow:0 12px 28px rgba(1,14,30,.45);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.lang-menu .lang-list[hidden]{display:none}
.lang-menu .lang-list li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:#cce9f8;font-size:15px;line-height:1;cursor:pointer;outline:none;white-space:nowrap}
.lang-menu .lang-list li b{min-width:22px;font-weight:inherit;font-size:12px;color:#74d7ff}
.lang-menu .lang-list li:hover,.lang-menu .lang-list li:focus-visible{background:#173757;color:#fff}
.lang-menu .lang-list li[aria-selected="true"]{color:#fff;background:rgba(116,215,255,.2);box-shadow:inset 0 0 0 1px rgba(116,215,255,.5)}

/* Changement de langue (src/i18n.js) : la page en cours se floute, la page d'arrivée apparaît floutée puis redevient nette ;
   l'accueil (page par défaut au chargement) n'est jamais montré quand on revient sur une autre page. */
html.lang-leaving main{filter:blur(14px);transition:filter .15s ease}
html.lang-returning main{filter:blur(14px)}
html.lang-revealing main{transition:filter .3s ease}
/* bords de l'écran : un flou rend les bords du contenu semi-transparents ; un cadre sombre dégradé les recouvre */
body::after{content:"";position:fixed;inset:0;z-index:15;pointer-events:none;opacity:0;visibility:hidden;box-shadow:inset 0 0 36px 28px #0c2746}
html.lang-leaving body::after{opacity:1;visibility:visible;transition:opacity .15s ease}
html.lang-returning body::after{opacity:1;visibility:visible}
html.lang-revealing body::after{visibility:visible;transition:opacity .3s ease,visibility 0s .3s}
html.lang-returning-away #home{visibility:hidden}

/* Menu du haut défilant (mobile) : chevron discret à droite tant qu'il reste des onglets (src/ui-extras.js) */
.nav-more{display:none}
@media(max-width:600px){
  .nav-more{position:relative;z-index:1;flex:none;display:flex;align-items:center;justify-content:flex-end;width:24px;height:34px;margin-left:-24px;padding:0 3px 0 0;border:0;background:linear-gradient(90deg,rgba(16,47,82,0),rgba(16,47,82,.96) 55%);color:#cce9f8;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s ease}
  .nav-more.show{opacity:.85;pointer-events:auto}
  .nav-more i{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateX(-2px) rotate(-45deg);filter:drop-shadow(0 0 3px rgba(116,215,255,.55))}
}

/* Pages T11 et T12 : retour en haut, aux couleurs cuivrées de ces pages (src/ui-extras.js) */
.to-top{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));z-index:14;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgba(240,170,120,.55);border-radius:50%;background:rgba(42,14,12,.86);box-shadow:inset 0 1px rgba(255,220,190,.14),0 6px 16px rgba(20,4,4,.45);color:#ffc79c;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease,visibility 0s .2s}
.to-top.show{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease}
.to-top:hover{border-color:#ffc79c;background:linear-gradient(180deg,#d9804f,#a8502f);color:#fff}
.to-top i{width:11px;height:11px;border-left:2.5px solid currentColor;border-top:2.5px solid currentColor;transform:translateY(3px) rotate(45deg)}

/* « Nous contacter » (src/contact.js) : bouton en bas de l'accueil et fenêtre dans le style des fenêtres de sélection */
#home .disclaimer .contact-open{margin-left:10px;padding:4px 11px;border:1px solid rgba(116,215,255,.55);border-radius:999px;background:rgba(116,215,255,.14);color:#fff;font:inherit;font-size:12px;line-height:1.2;cursor:pointer;vertical-align:baseline;white-space:nowrap}
#home .disclaimer .contact-open:hover{background:rgba(116,215,255,.28)}
#contactDialog{width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;overflow:auto;overscroll-behavior:contain;color:#fff;border:2px solid rgba(131,203,240,.65);border-radius:22px;background:linear-gradient(180deg,#236b9b,#123f68);font-family:var(--site-font)}
#contactDialog::backdrop{background:rgba(2,15,29,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#contactDialog form{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px 18px 18px}
#contactDialog .dialog-close{position:absolute;right:12px;top:12px;z-index:2}
#contactDialog h2{margin:0 40px 0 0;font-size:26px}
#contactDialog .contact-intro{margin:0;color:#d9f3ff;font-size:14px;line-height:1.3}
#contactDialog .contact-field{display:flex;flex-direction:column;gap:5px;font-size:13px;color:#bdf4ff;letter-spacing:.02em}
#contactDialog input,#contactDialog textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid rgba(131,203,240,.5);border-radius:12px;background:rgba(6,30,56,.55);color:#fff;font:15px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;outline:none}
#contactDialog textarea{resize:vertical;min-height:110px}
#contactDialog input::placeholder,#contactDialog textarea::placeholder{color:rgba(204,233,248,.55)}
#contactDialog input:focus,#contactDialog textarea:focus{border-color:#74d7ff;box-shadow:0 0 0 3px rgba(116,215,255,.2)}
#contactDialog .contact-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#contactDialog .contact-note{margin:0;font-size:12px;color:#c8ebfc}
#contactDialog .contact-status{margin:0;min-height:1em;font-size:14px}
#contactDialog .contact-status:empty{display:none}
#contactDialog .contact-status[data-kind="ok"]{color:#8ef0a5}
#contactDialog .contact-status[data-kind="error"]{color:#ffb3a7}
#contactDialog .contact-send{align-self:stretch;padding:12px;border:1px solid #ffd27a;border-radius:14px;background:linear-gradient(180deg,#ffb84d,#f08a24);color:#3b1d00;font:inherit;font-size:17px;cursor:pointer;box-shadow:0 4px 12px rgba(1,22,48,.35)}
#contactDialog .contact-send:disabled{opacity:.6;cursor:wait}