@font-face{font-family:Montserrat;src:url(../fonts/montserrat-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-latin-wght-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
:root{--fond:#0b111b;--fond2:#121b29;--carte:#16202f;--texte:#eef2f5;--doux:#a9b8c9;--cyan:#1fb8e6;--cyan-texte:#4fd3f7;--encre:#0d1117;--r:14px;--marge:clamp(18px,4vw,56px);--entete:64px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--entete)}
body{margin:0;background:radial-gradient(120% 90% at 65% 35%,#1a2a44 0%,#0e1624 55%,var(--fond) 100%) fixed var(--fond);color:var(--texte);font:400 1.02rem/1.6 Montserrat,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-weight:800;line-height:1.08;margin:0;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(1.9rem,3.5vw,3.3rem)}
h1>span{display:block}
h1 .l{white-space:nowrap}
.js #accueil .carte{container-type:inline-size}
.js #accueil h1{font-size:min(3.3rem,7.7cqi)}
html[lang=ja].js #accueil h1{font-size:min(3.1rem,8.4cqi)}
#voile{position:fixed;inset:0;z-index:95;background:var(--fond);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s .2s}
#voile.on{opacity:1;visibility:visible;transition:opacity .2s ease,visibility 0s}
h2{font-size:clamp(1.9rem,3.6vw,3.2rem)}
h3{font-size:1.2rem;line-height:1.2}
p{margin:0}
a{color:inherit}
.accent{color:var(--cyan-texte)}
.evite{position:absolute;left:-999px}
.evite:focus{left:12px;top:12px;z-index:50;background:var(--cyan);color:var(--encre);padding:10px 14px;border-radius:10px}
:focus-visible{outline:3px solid var(--cyan-texte);outline-offset:3px}

.btn{display:inline-flex;align-items:center;gap:.5em;min-height:48px;padding:0 22px;border-radius:10px;font:700 1rem/1 Montserrat,system-ui,sans-serif;text-decoration:none;border:0;cursor:pointer;transition:transform .2s,background-color .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-plein{background:var(--cyan);color:var(--encre)}
.btn-plein:hover{background:#5fd6f8}
.btn-trait{background:rgba(255,255,255,.08);color:var(--texte)}
.btn-trait:hover{background:rgba(255,255,255,.16)}
.btn.petit{min-height:40px;padding:0 16px;font-size:.92rem}
.duree{opacity:.7;font-weight:500}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.rond{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:var(--texte);font:700 1.05rem/1 Montserrat,sans-serif;cursor:pointer;flex:none}
.rond:hover{background:rgba(255,255,255,.2)}

.entete{position:fixed;inset:0 0 auto 0;height:var(--entete);z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 var(--marge);background:linear-gradient(#0b111bd9,#0b111b00)}
.langues{position:relative;font-size:.88rem;font-weight:700}
.langues summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:10px;background:rgba(255,255,255,.08);user-select:none}
.langues summary::-webkit-details-marker{display:none}
.langues summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.langues[open] summary::after{transform:translateY(2px) rotate(225deg)}
.langues summary:hover{background:rgba(255,255,255,.16)}
.langues-menu{position:absolute;right:0;top:calc(100% + 8px);display:grid;min-width:132px;padding:6px;border-radius:12px;background:var(--carte);box-shadow:0 14px 40px #000a;animation:descend .22s cubic-bezier(.2,.7,.2,1)}
.langues-menu a{padding:10px 12px;border-radius:8px;text-decoration:none!important;opacity:1!important;white-space:nowrap}
.langues-menu a:hover{background:rgba(255,255,255,.1);color:var(--cyan-texte)}
@keyframes descend{from{opacity:0;transform:translateY(-8px)}}
#son{width:40px;height:40px;display:grid;place-items:center}
#son[aria-pressed=false] .ondes,#son[aria-pressed=true] .barre{display:none}
#son[aria-pressed=true]{background:var(--cyan);color:var(--encre)}
.pot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.merci{color:var(--cyan-texte)!important;font-weight:700;text-align:center}
.fiche-appel{max-width:1320px;margin:64px auto 0;padding:0 var(--marge)}
.fiche-appel div{background:var(--cyan);color:var(--encre);border-radius:20px;padding:clamp(24px,4vw,44px);display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.fiche-appel h3{font-size:clamp(1.3rem,2.6vw,2rem);max-width:22ch}
.fiche-appel .btn{background:var(--encre);color:var(--texte)}
@font-face{font-family:"Zen Kaku Gothic New";src:url(../fonts/zenkaku-ja-500.woff2) format("woff2");font-weight:100 600;font-display:swap}
@font-face{font-family:"Zen Kaku Gothic New";src:url(../fonts/zenkaku-ja-700.woff2) format("woff2");font-weight:601 799;font-display:swap}
@font-face{font-family:"Zen Kaku Gothic New";src:url(../fonts/zenkaku-ja-900.woff2) format("woff2");font-weight:800 900;font-display:swap}
html[lang=ja] body,html[lang=ja] .btn,html[lang=ja] button,html[lang=ja] input,html[lang=ja] textarea{font-family:Montserrat,"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif}
html[lang=ja] h1,html[lang=ja] h2,html[lang=ja] h3,html[lang=ja] .grand{line-height:1.3;font-weight:900;line-break:strict;word-break:auto-phrase}
html[lang=ja] h1{font-size:clamp(1.6rem,2.9vw,2.7rem)}
html[lang=ja] #t-apropos{white-space:normal}
.logo{font-weight:800;font-size:1.35rem;text-decoration:none}
.entete nav{display:flex;align-items:center;gap:clamp(10px,2.4vw,28px);font-weight:600;font-size:.95rem}
.entete nav>*,.entete nav a,.langues summary{white-space:nowrap;flex:none}
.entete nav a:not(.btn){text-decoration:none;opacity:.86;padding:10px 0}
.entete nav a:not(.btn):hover{opacity:1;color:var(--cyan-texte)}

#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity .45s ease;display:block}
#scene.pret{opacity:1}
.sans-3d #scene{display:none}
.sans-3d body{background:url(../medias/plateau.jpg?v=12) center 30%/cover fixed var(--fond)}
#chargeur{position:fixed;inset:0;z-index:100;background:var(--fond);display:grid;place-items:center;padding:var(--marge);transition:opacity .45s ease,visibility 0s .45s;--p:0%}
html:not(.js) #chargeur{display:none}
#chargeur.fini{opacity:0;visibility:hidden;pointer-events:none}
#chargeur.fini .ch-boite{transform:scale(1.04)}
.ch-boite{width:min(720px,100%);display:grid;gap:18px;transition:transform .45s ease}
.ch-tete{display:flex;justify-content:space-between;align-items:baseline}
.ch-nom{font-weight:800;font-size:1.35rem}
.ch-tc{font-weight:700;font-variant-numeric:tabular-nums;font-size:clamp(1.3rem,4vw,2rem);color:var(--cyan-texte)}
.ch-pistes{position:relative;display:grid;gap:8px;padding:14px 0}
.ch-piste{position:relative;height:clamp(22px,4.4vw,34px);border-radius:8px;background:var(--carte);overflow:hidden}
.ch-piste i{position:absolute;top:0;bottom:0;border-radius:7px;background:var(--cyan);clip-path:inset(0 0 0 0)}
.ch-piste i.b{background:#35578a}.ch-piste i.c{background:#ff8a3d}.ch-piste i.d{background:#28507a}
.ch-piste::after{content:"";position:absolute;inset:0;left:var(--p);background:var(--carte);opacity:.86}
.ch-tete-lecture{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:#fff;border-radius:2px}
.ch-tete-lecture::before{content:"";position:absolute;top:-2px;left:-6px;border:7px solid transparent;border-top:10px solid #fff}
.ch-texte{display:flex;justify-content:space-between;color:var(--doux);font-size:.92rem;font-weight:600;font-variant-numeric:tabular-nums}
#charge{position:fixed;right:var(--marge);bottom:18px;z-index:5;font-size:.85rem;color:var(--doux);transition:opacity .5s}
#charge.fini,.sans-3d #charge,html:not(.js) #charge{opacity:0;pointer-events:none}

#reperes{position:fixed;inset:0;z-index:3;pointer-events:none}
#reperes button{position:absolute;left:0;top:0;pointer-events:auto;border:0;border-radius:99px;min-height:36px;padding:0 14px;background:#0d1117cc;color:var(--texte);font:700 .85rem/1 Montserrat,sans-serif;cursor:pointer;opacity:0;transition:opacity .35s,background-color .2s;white-space:nowrap;will-change:transform}
#reperes button::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cyan);margin-right:8px}
#reperes.visibles button{opacity:1}
#reperes:not(.visibles) button{pointer-events:none}
#reperes button:hover{background:var(--cyan);color:var(--encre)}
#reperes button:hover::before{background:var(--encre)}
#bulle{position:fixed;left:0;top:0;z-index:6;pointer-events:none;background:var(--cyan);color:var(--encre);font-weight:700;font-size:.85rem;padding:7px 12px;border-radius:99px;opacity:0;transition:opacity .15s;white-space:nowrap}
#bulle.vue{opacity:1}

.parcours{position:relative;z-index:2;pointer-events:none}
.js .parcours::before{content:"";position:fixed;inset:0;background:linear-gradient(90deg,#0b111bf7 0%,#0b111be8 30%,#0b111b00 60%);pointer-events:none}
.chapitre{min-height:100vh;display:flex;align-items:center;padding:calc(var(--entete) + 20px) var(--marge) 40px}
.carte{max-width:560px;pointer-events:auto;display:grid;gap:20px}
.carte p{color:var(--doux);font-size:1.08rem;max-width:46ch}
.carte .signe{color:var(--texte);font-weight:600;font-size:1.15rem}
.carte .aide{font-size:.9rem}
.js .chapitre{height:130vh;min-height:0;display:block;padding:0}
.js .carte{position:fixed;left:var(--marge);top:50%;width:min(38vw,560px);transform:translateY(calc(-50% + 26px));opacity:0;visibility:hidden;transition:opacity .45s,transform .6s cubic-bezier(.2,.7,.2,1),visibility 0s .45s}
.js .chapitre.actif .carte{opacity:1;visibility:visible;transform:translateY(-50%);transition:opacity .5s .1s,transform .7s cubic-bezier(.2,.7,.2,1) .1s,visibility 0s}
.js.suite-vue .carte{opacity:0!important;visibility:hidden!important}

.suite{position:relative;z-index:4;background:var(--fond);border-radius:28px 28px 0 0;box-shadow:0 -30px 80px #0009}
.bloc{padding:clamp(64px,9vw,120px) var(--marge);max-width:1320px;margin:0 auto}
.bloc.teinte{max-width:none;background:var(--fond2)}
.bloc.teinte>*{max-width:1208px;margin-left:auto;margin-right:auto}
.tete{display:grid;gap:14px;margin-bottom:28px}
.tete p,.bloc p{color:var(--doux)}
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filtres button{border:0;border-radius:99px;min-height:44px;padding:0 18px;background:var(--carte);color:var(--texte);font:600 .92rem/1 Montserrat,sans-serif;cursor:pointer}
.filtres button[aria-pressed=true]{background:var(--cyan);color:var(--encre)}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.projet{position:relative;display:grid;gap:12px;align-content:start;text-align:left;border:0;background:none;color:inherit;font:inherit;padding:0;cursor:pointer}
.projet[hidden]{display:none}
.projet .vignette{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--carte)}
.projet img,.projet video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.projet video{opacity:0;transition:opacity .3s}
.projet video.joue{opacity:1}
.projet:hover img,.projet:hover video{transform:scale(1.04)}
.projet .objectif{position:absolute;left:12px;top:12px;z-index:2;background:#0d1117cc;border-radius:99px;padding:6px 12px;font-size:.8rem;font-weight:600}
.projet b{font-weight:800;font-size:1.15rem;display:block}
.projet span.t{color:var(--doux);font-size:.95rem;line-height:1.4}
.projet.appel{background:var(--cyan);color:var(--encre);border-radius:var(--r);padding:26px;align-content:end;aspect-ratio:4/5;text-decoration:none}
.projet.appel b{font-size:1.7rem;line-height:1.1}
.projet.appel span{font-weight:600}

.offres{list-style:none;padding:0;margin:40px auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.offres li{cursor:default;user-select:none;-webkit-user-select:none;background:var(--carte);border-radius:var(--r);padding:26px;display:grid;gap:10px;align-content:start;transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .35s}
.offres h3{transition:color .35s}
@media (hover:hover){.offres li:hover{transform:translateY(-5px);background:#1c2a3d}.offres li:hover h3{color:var(--cyan-texte)}}
.sous{margin-top:64px;font-size:1.6rem}
.etapes{list-style:none;counter-reset:e;padding:0;margin:28px auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px}
.etapes li{counter-increment:e;color:var(--doux)}
.etapes li::before{content:counter(e);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--cyan);color:var(--encre);font-weight:800;margin-bottom:14px}
.etapes b{color:var(--texte);display:block}

.apropos{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:clamp(28px,6vw,80px);align-items:center}
.apropos>div{display:grid;gap:20px;min-width:0}
.apropos p{max-width:60ch}
#t-apropos{font-size:clamp(1.8rem,3.1vw,2.8rem)}
@media (min-width:1000px){#t-apropos{white-space:nowrap}}
@media (max-width:999px){#t-apropos{white-space:nowrap;font-size:min(1.8rem,6.1vw)}html[lang=ja] #t-apropos{white-space:nowrap;font-size:min(1.8rem,5.5vw)}}
@media (max-width:440px){html[lang=ja] .entete nav>a:not(.btn){display:none}.entete nav{gap:8px}.langues summary{padding:0 10px}}
.photo{margin:0;border-radius:var(--r);overflow:hidden;background:linear-gradient(#6fb6e6,#2b4f74 55%,#1b2a3d)}
.photo img{display:block;width:100%;height:auto}
.outils{font-weight:600;color:var(--texte)!important}

.contact{text-align:center}
.contact .chapo{margin-top:16px;font-size:1.1rem;max-width:52ch!important}
.contact .actions{margin-top:28px;justify-content:center}
.formulaire{display:grid;grid-template-columns:1fr 1fr;gap:26px 18px;margin-top:48px;max-width:720px!important;text-align:left;background:var(--carte);border-radius:20px;padding:clamp(20px,4vw,36px)}
.formulaire input,.formulaire textarea{background:var(--fond2)}
.champ{display:grid;gap:10px}
.formulaire .btn{margin-top:10px}
.formulaire .mention{margin-top:4px}
.champ.large,.formulaire .btn,.formulaire p{grid-column:1/-1}
.formulaire .btn{justify-self:center}
.formulaire .mention{text-align:center}
label{font-weight:600;font-size:.92rem}
input,textarea{font:inherit;font-size:1rem;color:var(--texte);background:var(--carte);border:2px solid transparent;border-radius:10px;padding:13px 14px;width:100%}
input:focus,textarea:focus{outline:0;border-color:var(--cyan)}
.erreur{color:#ffb4a8!important;font-weight:600}
.mention{font-size:.88rem}

.pied{padding:80px var(--marge) 36px;text-align:center;display:grid;gap:22px;background:var(--fond)}
.pied .grand{font-weight:800;font-size:clamp(2.2rem,7vw,5.5rem);line-height:1.05}
.liens{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;font-weight:600}
.liens a{text-decoration:none;padding:10px 0}
.liens a:hover{color:var(--cyan-texte)}
.petit-texte{font-size:.85rem;color:var(--doux)}

dialog{border:0;padding:0;color:var(--texte);background:var(--fond)}
dialog::backdrop{background:#05080dcc}
#fiche{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0}
#fiche[open]{display:flex;flex-direction:column;animation:monte .45s cubic-bezier(.2,.7,.2,1)}
@keyframes monte{from{opacity:0;transform:translateY(30px)}}
.fiche-barre{display:flex;align-items:center;gap:10px;padding:10px var(--marge);flex:none}
.fiche-barre span{font-weight:800;margin:0 6px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fiche-corps{overflow-y:auto;flex:1;padding:10px 0 80px;overscroll-behavior:contain}
.fiche-intro{padding:0 var(--marge);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,5vw,70px);max-width:1320px;margin:10px auto 0}
.fiche-intro h2{font-size:clamp(1.7rem,3.4vw,3rem)}
.fiche-intro p{color:var(--doux)}
.fiche-intro .col{display:grid;gap:16px;align-content:start}
.faits{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.faits li{background:var(--carte);border-radius:99px;padding:8px 14px;font-size:.88rem;font-weight:600}
.faits li b{color:var(--cyan-texte);font-weight:700}
.rangee{margin-top:44px}
.rangee-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 var(--marge);max-width:1320px;margin:0 auto 14px}
.rangee-tete h3{font-size:1.35rem}
.rangee-tete div{display:flex;gap:8px}
.piste{display:flex;gap:14px;overflow-x:auto;padding:0 max(var(--marge),calc((100vw - 1320px)/2 + var(--marge))) 6px;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding-left:max(var(--marge),calc((100vw - 1320px)/2 + var(--marge)))}
.piste::-webkit-scrollbar{display:none}
.crea{flex:none;height:min(62vh,560px);border-radius:var(--r);overflow:hidden;position:relative;scroll-snap-align:start;background:var(--carte);border:0;padding:0;cursor:pointer;display:block}
.crea img,.crea video{height:100%;width:100%;object-fit:cover;display:block}
.crea video{position:absolute;inset:0;opacity:0;transition:opacity .25s}
.crea video.vu{opacity:1}
.crea.apercu .jouer{opacity:.0;transition:opacity .2s}
.crea img{-webkit-user-drag:none;user-select:none;pointer-events:none;transition:filter .4s}
#haut{position:fixed;right:var(--marge);bottom:max(22px,env(safe-area-inset-bottom));z-index:30;width:52px;height:52px;border-radius:50%;border:0;background:var(--cyan);color:var(--encre);font:800 1.3rem/1 Montserrat,sans-serif;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .3s,transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s .3s,background-color .2s;box-shadow:0 10px 30px #0008}
#haut.parti{transition:none!important;opacity:0!important;visibility:hidden!important}
#haut.vu{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s,background-color .2s}
#haut:hover{background:#5fd6f8}
.piste{cursor:grab;user-select:none;-webkit-user-select:none}
.piste.glisse{cursor:grabbing;scroll-snap-type:none}
.piste.glisse .crea{pointer-events:none}
@media (hover:hover) and (pointer:fine){.piste{scroll-snap-type:none}}
.crea.image{cursor:default}
.crea .jouer{position:absolute;inset:auto auto 12px 12px;background:var(--cyan);color:var(--encre);font:700 .85rem/1 Montserrat,sans-serif;border-radius:99px;padding:9px 14px;display:flex;gap:8px;align-items:center}
.crea.lecture .jouer{display:none}
#reel{background:none;max-width:none;max-height:none;width:100vw;height:100dvh;margin:0}
#reel[open]{display:grid;place-items:center}
#reel video{max-height:92dvh;max-width:92vw;border-radius:var(--r);background:#000;aspect-ratio:9/16}
#reel .fermer{position:fixed;top:14px;right:var(--marge)}

.page-texte{max-width:760px;margin:0 auto;padding:calc(var(--entete) + 40px) var(--marge) 80px;display:grid;gap:18px}
.page-texte h1{font-size:clamp(2rem,4vw,3rem)}
.page-texte h2{font-size:1.4rem;margin-top:18px}
.page-texte p,.page-texte li{color:var(--doux)}
.page-texte mark{background:#ffe27a;color:#111;padding:0 4px;border-radius:4px}

@media (max-width:860px){
  #reperes button{min-height:30px;padding:0 10px;font-size:.74rem}
  .js .parcours::before{display:none}
  .entete nav>a:not(.btn):nth-child(n+2){display:none}
  .js .carte{left:0;right:0;top:auto;bottom:0;width:auto;max-width:none;transform:translateY(26px);padding:70px var(--marge) max(22px,env(safe-area-inset-bottom));background:linear-gradient(#0b111b00,#0b111bf2 34%);gap:14px}
  .js .chapitre.actif .carte{transform:none}
  .carte p{font-size:1rem}
  .carte .aide{display:none}
  .apropos{grid-template-columns:1fr}
  .photo{max-width:70vw}
  .formulaire{grid-template-columns:1fr}
  .fiche-intro{grid-template-columns:1fr}
  .crea{height:min(58vh,480px)}
  .grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .projet b{font-size:1rem}
  .projet .objectif .pre{display:none}
  .projet .objectif{font-size:.74rem;left:8px;top:8px;white-space:nowrap}
  .projet span.t{font-size:.85rem}
  .projet.appel{padding:16px}
  .projet.appel b{font-size:1.2rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
:root{color-scheme:dark}

.note-trad{font-size:.9rem;background:var(--carte);border-radius:10px;padding:12px 16px}
.pied-legal{padding-top:20px}
