/*
Template: home.css
Version: 1.0.0
Author: Perspective3 Studio
*/

/* Section: Home (hero, offcanvas, navigation, artwork, CTA) */
 :root { --bg1:#071C2A; --bg2:#071C2A; --violet:#3a1a57; --blue:#2E5BFF; --mint:#00D1B2; --white:#F8FAFC; --text:rgba(248, 250, 252, .88); --text2:rgba(248, 250, 252, .62); --line:rgba(248, 250, 252, .12); --navW:340px; --gutter:clamp(16px, 3.2vw, 48px); --radius:18px; --topPad:clamp(16px, 2.6vw, 30px); --burgerPad:clamp(14px, 2.6vw, 36px); }
* { box-sizing:border-box; }
body.p3s-home { margin:0; background:radial-gradient(1200px 800px at 70% 10%, rgba(90, 30, 130, .55), transparent 55%), radial-gradient(900px 700px at 35% 30%, rgba(0, 120, 190, .35), transparent 60%), linear-gradient(90deg, #061828 0%, #071C2A 55%, #1a1430 100%); color:var(--white); font-family:'Saira', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; overflow-x:hidden; overflow-y:hidden; }
.p3s-hero { height:100dvh; min-height:100dvh; max-height:100dvh; position:relative; overflow:hidden; padding-bottom:0; }
.p3s-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(to right, transparent 0, transparent calc(var(--navW) - 1px), rgba(255, 255, 255, .10) var(--navW), transparent calc(var(--navW) + 1px), transparent 60%, rgba(255, 255, 255, .08) 60%, transparent calc(60% + 1px) ); pointer-events:none; }
.p3s-streaks { position:absolute; inset:0; pointer-events:none; z-index:2; mix-blend-mode:screen; opacity:.95; }
.p3s-streak { position:absolute; left:var(--x); top:var(--y); transform:translateZ(0); filter:blur(.15px); opacity:.75; }
.p3s-streak.is-v { width:2px; height:var(--h, 180px); border-radius:999px; background:linear-gradient( 180deg, rgba(46, 91, 255, 0) 0%, rgba(46, 91, 255, .55) 30%, rgba(0, 209, 178, .55) 58%, rgba(255, 0, 214, .55) 78%, rgba(255, 0, 214, 0) 100% ); box-shadow:0 0 18px rgba(46, 91, 255, .18), 0 0 26px rgba(255, 0, 214, .14); animation:p3sStreakFall var(--dur, 10s) linear infinite; animation-delay:var(--d, 0s); }
.p3s-streak.is-h { width:var(--w, 64px); height:3px; border-radius:999px; background:linear-gradient( 90deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, .75) 45%, rgba(46, 91, 255, .55) 70%, rgba(248, 250, 252, 0) 100% ); box-shadow:0 0 22px rgba(248, 250, 252, .10); animation:p3sGlint var(--dur, 7.5s) ease-in-out infinite; animation-delay:var(--d, 0s); }
.p3s-burgerToggle { position:absolute; left:-9999px; }
.p3s-burger { position:fixed; top:var(--burgerPad); right:var(--burgerPad); width:44px; height:36px; display:flex; flex-direction:column; justify-content:center; gap:7px; cursor:pointer; z-index:1001; border:0; padding:0; background:transparent; }
.p3s-burger span { display:block; height:2px; background:rgba(248, 250, 252, .75); border-radius:2px; transform-origin:center; }
.p3s-offcanvas { position:fixed; top:0; right:0; width:min(420px, 92vw); height:100svh; background:linear-gradient(180deg, rgba(10, 18, 34, .98), rgba(18, 12, 38, .98)); border-left:1px solid rgba(255, 255, 255, .10); transform:translateX(110%); transition:transform .35s ease; z-index:1002; }
.p3s-offcanvas__inner { padding:26px 22px; display:flex; flex-direction:column; gap:22px; height:100%; overflow:auto; -webkit-overflow-scrolling:touch; }
.p3s-offcanvas__top { display:flex; align-items:center; justify-content:flex-end; }
.p3s-offcanvas__brand { text-align:center; margin-top:8px; }
.p3s-offcanvas__brand img { height:64px; width:auto; opacity:.98; }
.p3s-offcanvas__close { font-size:34px; line-height:1; cursor:pointer; opacity:.8; }
.p3s-offcanvas__close { border:0; background:transparent; color:rgba(248, 250, 252, .92); padding:0; }
.p3s-offcanvas__nav a, .p3s-offcanvas__legal a { display:block; padding:12px 10px; color:rgba(248, 250, 252, .86); text-decoration:none; border-radius:12px; }
.p3s-offcanvas__nav a:hover, .p3s-offcanvas__legal a:hover { background:rgba(255, 255, 255, .06); }
.p3s-offcanvas__sectionTitle { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:rgba(248, 250, 252, .55); margin-bottom:8px; }
.p3s-offcanvas__search .p3s-header-search { display:flex; gap:8px; align-items:stretch; }
.p3s-offcanvas__search .p3s-header-search input { flex:1; min-width:0; min-height:42px; padding:10px 12px; border:1px solid rgba(248, 250, 252, .18); border-radius:12px; background:rgba(9, 16, 30, .62); color:rgba(248, 250, 252, .88); }
.p3s-offcanvas__search .p3s-header-search input::placeholder { color:rgba(248, 250, 252, .58); }
.p3s-offcanvas__search .p3s-search-btn { min-height:44px; padding:10px 14px; white-space:nowrap; position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:12px; border:1px solid rgba(255, 255, 255, 0.56); color:#ffffff; line-height:1; background-color:transparent; backdrop-filter:blur(2px); box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 18px rgba(4, 9, 24, 0.22); mix-blend-mode:difference; }
.p3s-langSwitch ul { list-style:none !important; padding:0; margin:0; display:flex; gap:10px; flex-wrap:nowrap; align-items:center; }
.p3s-langSwitch li { margin:0; list-style:none !important; }
.p3s-langSwitch li::before, .p3s-langSwitch .lang-item::before { content:none !important; display:none !important; }
.p3s-langSwitch li::marker { content:''; }
.p3s-langSwitch a { display:inline-flex; padding:8px 10px; border:1px solid rgba(255, 255, 255, .14); border-radius:999px; color:rgba(248, 250, 252, .85); text-decoration:none; font-size:13px; }
.p3s-offcanvas__credits { margin-top:auto; padding-top:16px; border-top:1px solid rgba(255, 255, 255, .10); text-align:center; color:rgba(248, 250, 252, .64); font-size:12px; line-height:1.6; }
.p3s-offcanvas__credits sup { font-size:.65em; }
.p3s-langSwitch .current-lang a { border-color:rgba(0, 209, 178, .55); box-shadow:0 0 0 3px rgba(0, 209, 178, .12); }
.p3s-backdrop { position:fixed; inset:0; background:rgba(0, 0, 0, .45); opacity:0; pointer-events:none; transition:opacity .35s ease; z-index:1000; border:0; padding:0; cursor:pointer; }
.p3s-burger:focus-visible, .p3s-offcanvas__close:focus-visible, .p3s-offcanvas__nav a:focus-visible, .p3s-offcanvas__legal a:focus-visible, .p3s-langSwitch a:focus-visible, .p3s-sideNav__menu a:focus-visible, .p3s-cta__btn:focus-visible { outline:2px solid rgba(0, 209, 178, .95); outline-offset:2px; }
.p3s-burgerToggle:checked ~ .p3s-offcanvas { transform:translateX(0); }
.p3s-burgerToggle:checked ~ .p3s-backdrop { opacity:1; pointer-events:auto; }
.p3s-sideNav { position:absolute; top:0; left:4vw; height:100%; display:block; z-index:3; }
.p3s-sideNav__menu { position:absolute; top:50%; transform:translateY(-50%); margin:0; display:flex; flex-direction:column; gap:18px; }
.p3s-sideNav__menu a { text-decoration:none; color:rgba(248, 250, 252, .58); font-size:15px; position:relative; padding-left:18px; }
.p3s-sideNav__menu a::before { content:""; position:absolute; left:0; top:10px; width:6px; height:6px; border-radius:999px; background:rgba(248, 250, 252, .20); }
.p3s-sideNav__menu a.is-active { color:rgba(248, 250, 252, .92); margin-left:2vw; width:max-content; }
.p3s-sideNav__menu a.is-active::before { background:var(--mint); box-shadow:0 0 0 4px rgba(0, 209, 178, .14); }
.p3s-sideNav__menu a.is-active::after { content:""; position:absolute; left:-8vw; top:12px; width:8vw; height:2px; border-radius:999px; background:linear-gradient( 90deg, rgba(46, 91, 255, .0) 0%, rgba(46, 91, 255, .55) 35%, rgba(0, 209, 178, .75) 100% ); opacity:.95; }
.p3s-sideNav__menu small { display:block; margin-top:4px; font-size:11px; color:rgba(248, 250, 252, .35); }
.p3s-topBrand { position:absolute; top:var(--topPad); left:50%; transform:translateX(-50%); z-index:3; opacity:.95; }
.p3s-topBrand__logo img { height:clamp(78px, 10vw, 150px); width:auto; }
.p3s-art { position:absolute; left:50%; top:52%; transform:translate(-50%, -50%); z-index:2; --artW:min(420px, 46vw); --artH:var(--artW); }
.p3s-art::before { content:""; position:absolute; left:50%; transform:translateX(-50%); top:calc(-52vh); width:var(--artW); height:calc(52vh + var(--artH)); background:linear-gradient( 180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .28) 55%, rgba(0, 0, 0, 0) 100% ); pointer-events:none; z-index:-1; }
.p3s-art__frame { width:var(--artW); aspect-ratio:1 / 1; display:flex; align-items:flex-end; justify-content:center; position:relative; }
.p3s-art__frame img { width:100%; height:auto; display:block; filter:drop-shadow(0 30px 60px rgba(0, 0, 0, .35)); }
.p3s-heroContent { position:absolute; left:calc(var(--navW) + 44%); top:52%; transform:translateY(-56%); width:min(560px, 42vw); z-index:3; }
.p3s-title { margin:0; line-height:.86; letter-spacing:-.03em; }
.p3s-title__line1 { display:block; font-size:clamp(44px, 7.0vw, 100px); font-weight:700; color:rgba(248, 250, 252, .95); }
.p3s-title__line2 { display:block; font-size:clamp(38px, 6.4vw, 90px); font-weight:700; color:var(--blue); }
.p3s-sub { margin-top:clamp(14px, 2.2vw, 24px); max-width:52ch; color:var(--text2); font-size:clamp(14px, 1.15vw, 15.5px); line-height:1.85; }
.p3s-subLine { margin-top:18px; width:54px; height:3px; background:rgba(248, 250, 252, .65); border-radius:3px; opacity:.55; }
.p3s-rings { position:absolute; left:50%; top:50%; transform:translate(-50%, 22%); width:clamp(560px, 78vw, 980px); height:clamp(160px, 24vw, 290px); z-index:1; pointer-events:none; --ringStack:clamp(26px, 4.2vh, 62px); }
.p3s-rings__svg { width:100%; height:100%; display:block; overflow:visible; }
.p3s-ring { fill:none; stroke-width:3; stroke-linecap:butt; stroke-linejoin:miter; stroke-miterlimit:28.96; vector-effect:non-scaling-stroke; opacity:1; }
.p3s-ring--1 { transform:translateY(calc(var(--ringStack) * -1)); }
.p3s-ring--2 { transform:translateY(0px); }
.p3s-ring--3 { transform:translateY(var(--ringStack)); }
.p3s-ring--small { stroke-width:4; opacity:1; transform:translateY(clamp(6px, 1.2vh, 16px)); }
.p3s-cta { position:absolute; left:50%; bottom:clamp(18px, 4.5vh, 48px); transform:translateX(-50%); z-index:4; }
.p3s-cta__btn { display:inline-flex; align-items:center; justify-content:center; min-width:clamp(168px, 22vw, 190px); height:clamp(46px, 6.0vh, 52px); padding:0 22px; border-radius:999px; background:rgba(248, 250, 252, .92); color:#071C2A; text-decoration:none; font-weight:600; letter-spacing:.02em; box-shadow:0 16px 40px rgba(0, 0, 0, .25); }
.p3s-bottomLink { position:absolute; bottom:0; z-index:4; color:rgba(248, 250, 252, .86); text-decoration:none; letter-spacing:.06em; }
.p3s-bottomLink span { display:block; font-size:12px; opacity:.75; }
.p3s-bottomLink strong { display:block; font-size:14px; font-weight:700; }
.p3s-bottomLink--left { left:clamp(16px, 2.8vw, 34px); padding:0 0 40px 20px; border-left:3px solid rgb(255, 255, 255); }
.p3s-bottomLink--right { right:clamp(16px, 2.8vw, 34px); text-align:right; padding:0 20px 40px 0; border-right:3px solid rgb(255, 255, 255); }
.p3s-offcanvas__langs .p3s-langSwitch ul { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; gap:12px !important; padding:0 !important; list-style:none !important; }
.p3s-offcanvas__langs .p3s-langSwitch li { display:inline-flex !important; width:auto !important; margin:0 5px 0 0 !important; padding:0 !important; float:none !important; list-style:none !important; }
.p3s-offcanvas__langs .p3s-langSwitch li::before, .p3s-offcanvas__langs .p3s-langSwitch li::marker { content:none !important; display:none !important; }

/* Section: Animations home (streaks, effets hero) */
@keyframes p3sStreakFall { 0% { transform:translateY(-12vh); opacity:0; }10% { opacity:.85; }55% { opacity:.60; }100% { transform:translateY(125vh); opacity:0; } }
@keyframes p3sGlint { 0% { transform:translateX(-10px); opacity:0; }18% { opacity:.85; }35% { opacity:.35; }60% { transform:translateX(22px); opacity:.65; }100% { transform:translateX(38px); opacity:0; } }

/* Media queries : desktop (larges ecrans et interactions souris) */
@media (prefers-reduced-motion:reduce) { .p3s-streak { animation:none !important; opacity:.35; } }

/* Media queries : tablet (tablettes et ecrans intermediaires) */
@media (max-width:1100px) { :root { --navW:280px; }.p3s-heroContent { left:calc(var(--navW) + 38%); width:min(520px, 48vw); }.p3s-rings { width:clamp(520px, 86vw, 920px); } }
@media (max-width:900px) { :root { --navW:0px; }.p3s-hero::before { background:linear-gradient(to right, transparent 0, transparent 55%, rgba(255, 255, 255, .07) 55%, transparent calc(55% + 1px) ); opacity:.55; }.p3s-sideNav { display:none; }.p3s-topBrand { left:var(--gutter); transform:none; top:var(--topPad); }.p3s-hero { height:100dvh; min-height:100dvh; max-height:100dvh; padding-top:calc(var(--topPad) + 62px); padding-left:var(--gutter); padding-right:var(--gutter); padding-bottom:0; }.p3s-heroContent { position:relative; left:auto; top:auto; transform:none; width:100%; max-width:640px; z-index:3; margin-top:clamp(10px, 2.2vh, 18px); }.p3s-sub { max-width:60ch; }.p3s-art { position:relative; left:auto; top:auto; transform:none; width:100%; display:flex; justify-content:center; margin-top:clamp(8px, 1.8vh, 16px); z-index:2; --artW:min(360px, 72vw); --artH:var(--artW); }.p3s-art::before { left:50%; transform:translateX(-50%); top:-48vh; width:var(--artW); height:calc(48vh + var(--artH)); }.p3s-rings { position:absolute; left:50%; top:auto; bottom:14vh; transform:translateX(-50%); width:min(860px, 96vw); height:clamp(120px, 22vh, 210px); margin:0; opacity:.5; }.p3s-cta { position:absolute; left:50%; bottom:17vh; transform:translateX(-50%); display:flex; justify-content:center; margin-top:0; z-index:4; }.p3s-bottomLink { display:none; }.p3s-streaks { opacity:.55; } }

/* Media queries : mobile (petits ecrans) */
@media (max-width:520px) { .p3s-hero { padding-top:calc(var(--topPad) + 56px); }.p3s-burger { width:42px; height:34px; }.p3s-topBrand__logo img { height:64px; }.p3s-title__line1 { font-size:clamp(40px, 10vw, 54px); }.p3s-title__line2 { font-size:clamp(34px, 9vw, 48px); }.p3s-sub { font-size:14px; line-height:1.75; }.p3s-subLine { width:46px; }.p3s-art { --artW:min(300px, 70vw); }.p3s-cta__btn { min-width:160px; padding:0 18px; }.p3s-rings { bottom:16vh; height:clamp(110px, 20vh, 170px); }.p3s-cta { bottom:19vh; } }
@media (max-width:360px) { .p3s-hero { padding-left:14px; padding-right:14px; }.p3s-topBrand { left:14px; }.p3s-cta__btn { min-width:150px; } }