/* BASE COMMUNE */
:root{color-scheme:dark;--accent:#9dc4d9;--glow:#2d6781;--line:#ffffff18}*{box-sizing:border-box}body{margin:0;background:#060709;color:#eeece7;font-family:Arial,Helvetica,sans-serif}button{font:inherit;cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:5px}header{height:90px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo{font-size:35px;font-weight:800;letter-spacing:-2px}.logo span{color:var(--accent)}.header-note{font-size:9px;letter-spacing:3px;color:#85888c}header button{background:transparent;border:1px solid #ffffff30;border-radius:30px;padding:13px 22px;font-size:12px}
/* SCÈNE UNIQUE ET CONTENU REMPLAÇABLE */
.experience{position:relative;min-height:590px;height:calc(100svh - 230px);max-height:950px;overflow:hidden;display:flex;align-items:center;padding:45px 5%}.content{position:relative;z-index:2;width:49%;max-width:640px;padding-bottom:25px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--accent);line-height:1.8;margin:0 0 30px}h1{font-size:clamp(50px,5.8vw,88px);line-height:1.02;letter-spacing:-4px;font-weight:400;margin:0 0 28px}h1 em{font-style:normal;color:var(--accent)}.description{max-width:420px;color:#afb2b8;font-size:15px;line-height:1.8;margin-bottom:25px}.features{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 25px;max-width:470px}.features li{font-size:10px;padding:9px 12px;border:1px solid #ffffff20;border-radius:30px;color:#bcbec4}.cta{padding:17px 25px;background:var(--accent);color:#080a0d;border:0;border-radius:30px;font-size:13px;font-weight:600}.small-note{font-size:10px;color:#7e8289;margin-top:20px;line-height:1.7}.edge-note{position:absolute;right:26px;top:50%;writing-mode:vertical-rl;font-size:8px;letter-spacing:3px;color:#72767f}.paging{position:absolute;bottom:25px;left:5%;display:flex;gap:25px;align-items:center;color:#91949c;font:10px monospace}.paging button{background:transparent;border:1px solid #ffffff20;border-radius:50%;width:35px;height:35px;font-size:17px}.content.enter{animation:enter .45s ease both}@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
/* PLANÈTE : le canvas projette les cartes sur une sphère, sans faux dégradé tournant. */
.planet-stage{position:absolute;inset:0 1% 0 41%;display:flex;align-items:center;justify-content:center;pointer-events:none}.planet-stage canvas{width:min(53vw,690px);height:min(53vw,690px);position:relative;z-index:1;transform:rotate(-12deg)}.halo{width:65%;aspect-ratio:1;position:absolute;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--glow) 16%,transparent),transparent 68%);filter:blur(40px)}.planet-label{position:absolute;bottom:27px;right:9%;display:flex;gap:22px;font-size:8px;letter-spacing:2px;color:#737b8a;z-index:2}.planet-label span:first-child{color:var(--accent)}.stars{position:absolute;inset:0;opacity:.45;background-image:radial-gradient(1px 1px at 65% 16%,#fff,transparent),radial-gradient(1px 1px at 72% 63%,#fff,transparent),radial-gradient(1px 1px at 51% 80%,#fff,transparent),radial-gradient(1px 1px at 87% 32%,#fff,transparent),radial-gradient(1px 1px at 97% 72%,#fff,transparent);background-size:320px 330px}
/* NAVIGATION PERSISTANTE */
.service-nav{margin:0 5%;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.service-nav button{position:relative;display:flex;align-items:center;gap:14px;text-align:left;background:transparent;border:0;padding:25px 12px;color:#92959c;font-size:12px;min-height:90px;transition:color .25s,background .25s}.service-nav small{display:block;font:8px monospace;letter-spacing:1.4px;margin-bottom:10px;color:#686f7b}.service-nav button[aria-pressed=true]{color:#fff;background:#ffffff04}.service-nav button[aria-pressed=true]::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--accent)}.service-nav button:hover{background:#ffffff07;color:#fff}.mini{display:block;width:30px;height:30px;border-radius:50%;flex-shrink:0;background-size:200% 100%;box-shadow:inset -10px -3px 10px #000b}.earth{background-image:url(planets/2k_earth_daymap.jpg)}.mars{background-image:url(planets/2k_mars.jpg)}.neptune{background-image:url(planets/2k_neptune.jpg)}.jupiter{background-image:url(planets/2k_jupiter.jpg)}.saturn{background-image:url(planets/2k_saturn.jpg)}footer{padding:23px 5%;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:9px;color:#717780}footer button{font-size:9px;border:0;background:transparent;color:#a3a8af;padding:0}.ranno-ad{font-size:9px;color:#85888c}
/* PERSONNALITÉS : couleurs naturelles des planètes, détails typographiques distincts. */
body[data-theme=discord]{--accent:#96b6ef;--glow:#294bc9}body[data-theme=bots]{--accent:#d7b99a;--glow:#965e38}body[data-theme=games]{--accent:#dea284;--glow:#b65332}body[data-theme=minecraft]{--accent:#ddcfae;--glow:#a4895c}body[data-theme=games] h1{font-family:Georgia,serif;letter-spacing:-3px}body[data-theme=bots] .features li{border-radius:3px}body[data-theme=discord] h1 em{font-style:italic}body[data-theme=minecraft] canvas{transform:rotate(-22deg)}
/* DIALOGUES ET BRIEF LOCAL */
dialog{width:min(560px,92vw);max-height:90svh;overflow:auto;background:#111318;color:#eee;border:1px solid #ffffff28;border-radius:20px;padding:40px}dialog::backdrop{background:#000c;backdrop-filter:blur(7px)}dialog h2{font-weight:400;letter-spacing:-2px;font-size:38px;line-height:1.1;margin:15px 0 25px}dialog p{font-size:13px;line-height:1.8;color:#aaa}dialog a{color:var(--accent);text-decoration:underline}.close{position:absolute;right:17px;top:12px;border:0;background:transparent;font-size:27px;color:#aaa}form{display:grid;gap:12px}form label{font-size:12px;color:#bbb}select,textarea{width:100%;font:14px/1.7 Arial,sans-serif;background:#191c23;color:#eee;border:1px solid #ffffff25;border-radius:8px;padding:12px}form .cta{justify-self:start;margin-top:8px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
/* MOBILE : une seule prestation affichée, navigation horizontale. */
@media(max-width:900px){.header-note{display:none}.content{width:54%}h1{font-size:55px}.service-nav button{gap:8px;padding:22px 7px;font-size:10px}.mini{width:22px;height:22px}.planet-label{font-size:7px;gap:10px}}
@media(max-width:620px){header{height:75px;padding:0 6%}.logo{font-size:28px}header button{font-size:10px;padding:11px 13px}.experience{padding:325px 6% 70px;min-height:720px;height:auto;align-items:flex-end}.content{width:100%;padding:0}.planet-stage{inset:0 0 auto 0;height:310px}.planet-stage canvas{width:340px;height:340px}.planet-label{bottom:4px;right:auto;gap:18px}.halo{width:280px}.eyebrow{font-size:8px;margin-bottom:17px}h1{font-size:46px;letter-spacing:-2px;margin-bottom:18px}.description{font-size:13px;line-height:1.7;margin-bottom:15px;max-width:95%}.features{margin-bottom:18px}.features li{font-size:9px;padding:7px 10px}.small-note{font-size:9px;margin-top:12px}.paging{bottom:15px;left:6%}.edge-note{display:none}.service-nav{margin:0 6%;display:flex;overflow-x:auto;scrollbar-width:thin}.service-nav button{flex:0 0 145px;min-height:80px;padding:16px 10px;font-size:11px}.service-nav small{font-size:7px}.mini{width:25px;height:25px}footer{padding:22px 6%;flex-wrap:wrap;font-size:8px;gap:15px}dialog{padding:30px}dialog h2{font-size:33px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* VERSION CENTRÉE : flèches latérales et détails au défilement vertical. */
.experience{height:calc(100svh - 90px);min-height:730px;display:block;touch-action:pan-y}.planet-stage{inset:100px 0 180px;align-items:center}.planet-stage canvas{width:min(48vw,530px);height:min(48vw,530px)}.planet-label{bottom:0;right:auto;left:50%;transform:translateX(-50%);white-space:nowrap}.content{width:100%;max-width:none;text-align:center;padding:0;position:static}.content .eyebrow{margin:0}.content h1{position:absolute;top:75px;left:50%;transform:translateX(-50%);font-size:clamp(28px,3vw,42px);width:90%;letter-spacing:-1.5px;line-height:1.15}.content h1 br{display:none}.content h1 em{margin-left:10px}.description{position:absolute;bottom:110px;left:50%;transform:translateX(-50%);max-width:510px;width:75%;font-size:13px;margin:0}.features,.small-note,.content .cta,.edge-note{display:none}.paging{inset:0;pointer-events:none}.paging button{position:absolute;top:47%;pointer-events:auto;border:0;background:transparent;font-size:33px;color:#969da6;width:50px;height:60px}.paging #previous{left:7%}.paging #next{right:7%}.paging span{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);font-size:9px}.discover-down{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--accent);padding:10px}.project-details{padding:90px 8%;border-top:1px solid var(--line);background:linear-gradient(#0b0e14,#060709)}.project-details h2{font-size:42px;font-weight:400;letter-spacing:-1.5px;margin:20px 0}.project-details>p:not(.eyebrow){max-width:730px;color:#aab0bb;line-height:1.9;font-size:16px}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin:55px 0}.detail-grid h3{font-weight:400;font-size:19px;color:var(--accent)}.detail-grid p,.detail-grid li{font-size:14px;line-height:1.9;color:#aab0bb}.detail-grid ul,.detail-grid ol{padding-left:18px}.detail-grid .cta{margin-top:15px}#back-scene{font-size:12px;color:#aaa}.content.enter{animation:none}body[data-theme=discord] canvas{transform:rotate(-22deg)}body[data-theme=minecraft] canvas{transform:rotate(-12deg)}
@media(max-width:620px){.experience{height:calc(100svh - 75px);min-height:650px;padding:25px 6%}.content h1{top:70px;font-size:27px}.planet-stage{inset:130px 0 190px}.planet-stage canvas{width:330px;height:330px}.planet-label{font-size:7px;gap:10px}.description{bottom:100px;font-size:12px;width:82%}.paging #previous{left:2%}.paging #next{right:2%}.paging button{font-size:26px;top:43%}.paging span{bottom:65px}.discover-down{bottom:16px;white-space:nowrap}.project-details{padding:60px 7%}.project-details h2{font-size:31px}.detail-grid{grid-template-columns:1fr;gap:20px;margin:30px 0}.project-details>p:not(.eyebrow){font-size:14px}}

/* Planète sortante, superposée à la scène pendant le passage. */
.planet-stage canvas.departing-planet{position:absolute;z-index:2;pointer-events:none}

/* IDENTITÉ : Manrope locale, mot-symbole raffiné et X dessinée par deux traits. */
@font-face{font-family:Manrope;src:url(fonts/Manrope.ttf) format('truetype');font-weight:200 800;font-display:swap}
.logo{font-family:Manrope,Arial,sans-serif;font-size:30px;font-weight:550;letter-spacing:-1.2px;display:inline-flex;align-items:center;gap:3px}.logo .brand-part{color:#eeece7}.brand-x{position:relative;display:inline-block;width:28px;height:34px;font-size:0;color:var(--accent)!important;margin:0 3px}.brand-x::before,.brand-x::after{content:"";position:absolute;left:12px;top:0;width:3px;height:35px;border-radius:1px;background:var(--accent);transform:rotate(34deg)}.brand-x::after{transform:rotate(-34deg);height:27px;top:4px;background:#f0e8da}.more-info{position:absolute;bottom:43px;left:50%;transform:translateX(-50%);border:1px solid #ffffff28;border-radius:30px;background:#ffffff06;color:#d5d9df;padding:12px 20px;font:11px Manrope,Arial,sans-serif;white-space:nowrap}.more-info:hover{border-color:var(--accent);background:#ffffff0c}.discover-down{bottom:0;font-size:9px}.paging span{display:none}
/* DIALOGUE DE RÉALISATIONS : présentation éditoriale avec statuts explicites. */
#portfolio-dialog{width:min(790px,94vw);padding:50px;font-family:Manrope,Arial,sans-serif}#portfolio-dialog h2{font-size:43px;line-height:1.2}#portfolio-dialog h2 em{font-style:normal;color:var(--accent)}#portfolio-intro{max-width:570px}.portfolio-item{display:grid;grid-template-columns:35px 1fr;gap:20px;padding:28px 0;border-top:1px solid #ffffff15}.portfolio-index{font:11px monospace;color:#717984;padding-top:5px}.portfolio-item small{font-size:8px;letter-spacing:1.6px;color:var(--accent)}.portfolio-item h3{font-size:23px;font-weight:500;letter-spacing:-.6px;margin:9px 0}.portfolio-item p{font-size:12px;line-height:1.9;max-width:570px}.portfolio-item a{font-size:11px;text-decoration:none;border-bottom:1px solid #ffffff25;padding-bottom:3px;display:inline-block;margin-top:5px}#portfolio-dialog>.cta{margin-top:15px}@media(max-width:620px){.logo{font-size:25px}.brand-x{height:29px;width:24px}.brand-x::before{height:29px;left:10px}.brand-x::after{height:23px;top:3px;left:10px}.more-info{bottom:39px;padding:10px 16px;font-size:10px}.discover-down{bottom:0}#portfolio-dialog{padding:30px 24px}#portfolio-dialog h2{font-size:33px}.portfolio-item{grid-template-columns:25px 1fr;gap:10px}.portfolio-item h3{font-size:21px}.description{bottom:115px}}

/* DEMANDE PERSONNALISÉE : sections lisibles et champs adaptés au service. */
#project-dialog{width:min(740px,94vw);padding:40px}#brief-form{gap:24px}#brief-form fieldset{border:0;border-top:1px solid #ffffff18;padding:25px 0 0;margin:0;display:grid;gap:12px}#brief-form legend{font:16px Manrope,Arial,sans-serif;padding-right:15px}#brief-form legend span{color:var(--accent);font-size:11px;margin-right:10px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-row>div{display:grid;gap:10px}#project-specific{display:grid;gap:12px}#brief-form input{width:100%;padding:12px;border:1px solid #ffffff25;background:#191c23;color:#eee;font:14px/1.7 Arial;border-radius:8px}#brief-form small{font-size:10px;color:#979ca7;line-height:1.6}.form-local{border-left:2px solid var(--accent);padding:0 0 0 15px;font-size:11px!important}.form-intro{max-width:550px}#brief-review[hidden]{display:none}#brief-summary{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.9 Manrope,Arial,sans-serif;background:#ffffff04;border:1px solid #ffffff15;border-radius:12px;padding:20px}#brief-review h3{font-weight:400;color:var(--accent)}@media(max-width:620px){#project-dialog{padding:30px 23px}.form-row{grid-template-columns:1fr}}

/* CIEL VIVANT : déplacement uniquement quand l’étoile est invisible. */
.stars{background-image:none;opacity:1;pointer-events:none;overflow:hidden}
.sky-star{position:absolute;display:block;width:var(--star-size);height:var(--star-size);border-radius:50%;background:#e8efff;box-shadow:0 0 4px #cadbff66;opacity:0;animation:star-breathe var(--star-cycle) linear infinite}
@keyframes star-breathe{0%,100%{opacity:0}15%{opacity:.08}40%{opacity:var(--star-peak)}65%{opacity:.15}80%{opacity:calc(var(--star-peak)*.6)}94%{opacity:0}}
.stars-paused .sky-star{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.sky-star{animation:none!important;opacity:var(--star-peak)}}