/* ========================================================================== ICARUS - feuille unique. Principe directeur : UN SEUL CIEL. Le fond est peint une seule fois, en position fixe, au niveau de . Les sections ne peignent jamais de fond : elles sont transparentes. Les peintures sont POSEES sur ce ciel, en fondu alpha et en mode screen, et debordent de leur section pour traverser les frontieres. Consequence : il n'existe aucune arete horizontale au defilement. Palette echantillonnee sur assets/masters/ (laiton chaud, nuit tiede). ========================================================================== */ :root { /* Nuit - echantillonnee sur hero.webp et clouds.webp */ --void:#070609; --night:#0b0910; --shade:#141019; --mauve:#241f2f; --umber:#3d3238; /* Metal - echantillonne sur sun.webp et workflow.webp */ --taupe:#705b4f; --brass-deep:#866a45; --brass:#b7986a; --brass-lit:#d4b57e; --gold:#ebcf94; /* Encres */ --ivory:#f6efe0; --paper:#d3c8b8; --mist:#9b9086; --patina:#6d9083; /* Traits */ --line:rgba(183,152,106,.22); --line-lit:rgba(212,181,126,.46); --line-soft:rgba(183,152,106,.12); /* Typo */ --display:"Fraunces",Georgia,serif; --body:"Instrument Sans","Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace; /* Mesures */ --page:82rem; --gutter:clamp(1.3rem,4vw,4.5rem); --rail-space:clamp(1rem,7vw,6.5rem); --ease:cubic-bezier(.16,1,.3,1); --flight:0; } @font-face{font-family:"Fraunces";font-style:normal;font-weight:300 900;font-display:swap;src:url("../vendor/fonts/fraunces-latin.woff2") format("woff2");} @font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("../vendor/fonts/instrument-sans-latin.woff2") format("woff2");} @font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:300 600;font-display:swap;src:url("../vendor/fonts/jetbrainsmono-latin.woff2") format("woff2");} *,*::before,*::after{box-sizing:border-box;} /* -------------------------------------------------------------------------- 1. LE CIEL - peint une seule fois, fixe, sur . C'est la surface qui garantit l'absence de scission : elle ne defile pas, donc aucune section ne peut introduire de bord. -------------------------------------------------------------------------- */ html{ scroll-behavior:smooth; background-color:var(--night); background-image: radial-gradient(120% 70% at 72% 8%, rgba(183,152,106,.16), transparent 58%), radial-gradient(90% 55% at 12% 32%, rgba(36,31,47,.85), transparent 62%), radial-gradient(120% 60% at 88% 72%, rgba(109,144,131,.07), transparent 60%), radial-gradient(140% 80% at 30% 108%, rgba(134,106,69,.16), transparent 60%), linear-gradient(178deg, var(--void) 0%, var(--night) 26%, var(--shade) 58%, #0d0a11 82%, var(--void) 100%); background-attachment:fixed; background-size:cover; } body{ margin:0; overflow-x:hidden; background:transparent; color:var(--paper); font-family:var(--body); font-size:clamp(1.06rem,1rem + .24vw,1.24rem); font-weight:430; line-height:1.62; -webkit-font-smoothing:antialiased; } /* Grille de coordonnees : fixe, donc continue d'un bout a l'autre du document. */ body::before{ content:""; position:fixed; inset:0; z-index:-3; pointer-events:none; background-image: linear-gradient(rgba(183,152,106,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(183,152,106,.028) 1px, transparent 1px); background-size:78px 78px; -webkit-mask-image:radial-gradient(130% 90% at 50% 40%, #000 12%, transparent 82%); mask-image:radial-gradient(130% 90% at 50% 40%, #000 12%, transparent 82%); } /* Vignette chaude : resserre le regard et efface les bords de fenetre. */ body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(125% 105% at 50% 42%, transparent 42%, rgba(7,6,9,.62) 100%); } /* Aurore : trois halos tres larges et tres doux, qui derivent lentement. Ils traversent les frontieres de section et cousent le document. */ .sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;} .sky span{position:absolute;display:block;border-radius:50%;filter:blur(90px);mix-blend-mode:screen;} .sky span:nth-child(1){width:58vw;height:58vw;top:-14vh;right:-10vw;background:radial-gradient(circle,rgba(183,152,106,.36),transparent 66%);animation:drift-a 34s var(--ease) infinite alternate;} .sky span:nth-child(2){width:46vw;height:46vw;top:38vh;left:-14vw;background:radial-gradient(circle,rgba(109,144,131,.16),transparent 68%);animation:drift-b 46s var(--ease) infinite alternate;} .sky span:nth-child(3){width:52vw;height:52vw;bottom:-18vh;left:34vw;background:radial-gradient(circle,rgba(134,106,69,.30),transparent 68%);animation:drift-c 40s var(--ease) infinite alternate;} @keyframes drift-a{to{transform:translate3d(-5vw,7vh,0) scale(1.12);}} @keyframes drift-b{to{transform:translate3d(6vw,-6vh,0) scale(1.16);}} @keyframes drift-c{to{transform:translate3d(-7vw,-5vh,0) scale(1.1);}} img{display:block;max-width:100%;height:auto;} a{color:inherit;text-decoration-color:var(--brass);text-underline-offset:.32em;} button,input,textarea{font:inherit;} ::selection{color:var(--void);background:var(--brass-lit);} .skip-link{position:fixed;z-index:100;top:.8rem;left:.8rem;padding:.8rem 1.1rem;color:var(--void);background:var(--gold);transform:translateY(-150%);transition:transform 140ms var(--ease);} .skip-link:focus{transform:translateY(0);} :focus-visible{outline:2px solid var(--gold);outline-offset:4px;} /* -------------------------------------------------------------------------- 2. SECTIONS - transparentes par contrat. Aucune ne peint de fond. -------------------------------------------------------------------------- */ .section{ position:relative; background:none; padding:clamp(4.5rem,7.5vw,7rem) calc(var(--gutter) + var(--rail-space)) clamp(4.5rem,7.5vw,7rem) var(--gutter); /* La nav est fixe : sans cette marge, une ancre depose le titre dessous. */ scroll-margin-top:4.5rem; } .site-footer{scroll-margin-top:4.5rem;} .inner{width:min(100%,var(--page));margin:auto;} /* -------------------------------------------------------------------------- 3. LES PEINTURES - posees sur le ciel. mask alpha : elle se dissout bien avant son bord, donc jamais de rectangle. screen : ses noirs deviennent nuls, elle devient de la lumiere. Les plaques debordent de 16vh en haut et en bas pour se recouvrir d'une section a l'autre : sans ce recouvrement, deux fondus successifs laissaient une bande noire entre deux scenes. Le debordement est borne et surveille -- la derniere plaque ne deborde pas sous le pied de page, et le controle « defilement mort » de visual_check.py echoue s'il rallonge le document (body a overflow-x:hidden, ce qui calcule overflow-y a auto : tout debordement vers le bas devient du defilement dans le vide). -------------------------------------------------------------------------- */ /* Hero : la peinture est le poster. Nette a droite, elle se dissout vers le bas sur pres de la moitie de sa hauteur et atterrit exactement sur la couleur du ciel fixe. La jonction est donc invisible. */ .hero-art{ position:absolute; inset:0; z-index:-2; pointer-events:none; overflow:hidden; -webkit-mask-image:linear-gradient(to bottom,#000 0 46%,rgba(0,0,0,.72) 68%,transparent 96%); mask-image:linear-gradient(to bottom,#000 0 46%,rgba(0,0,0,.72) 68%,transparent 96%); } .hero-art img{width:100%;height:100%;object-fit:cover;object-position:68% 42%;filter:saturate(1.02) contrast(1.05);} /* Voile de lisibilite : assombrit la colonne de texte sans couper l'image. */ .hero-art::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 46%, rgba(7,6,9,.52) 76%, rgba(7,6,9,.72) 100%), linear-gradient(100deg, rgba(7,6,9,.96) 0 28%, rgba(11,9,16,.74) 47%, rgba(11,9,16,.06) 74%), radial-gradient(70% 50% at 66% 40%, rgba(235,207,148,.10), transparent 62%); } /* Toutes les plaques posees sur le ciel partagent le meme contrat de masque : une FORME (radiale, propre a chaque plaque) intersectee avec un FONDU VERTICAL. Le fondu est indispensable : la forme radiale seule laissait la plaque pleine sur le bord haut de sa section, ce qui redessinait exactement l'arete qu'on cherche a supprimer. */ .system-art,.veil{ position:absolute; inset:-16vh 0; z-index:-2; pointer-events:none; overflow:hidden; mix-blend-mode:screen; /* Le conteneur porte le fondu vertical... */ -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%); } /* ...et l'image porte la forme. Deux masques imbriques plutot que deux couches composees : mask-composite reste ecartele entre la syntaxe WebKit et la syntaxe standard, et rendait la plaque noire. */ .system-art picture,.veil picture{display:block;width:100%;height:100%;-webkit-mask-image:var(--forme);mask-image:var(--forme);} .system-art img,.veil img{width:100%;height:100%;object-fit:cover;} /* Plaque du systeme : fondu radial doux, elle flotte au lieu de paver. */ .system-art{ opacity:.9; --forme:radial-gradient(92% 78% at 66% 50%,#000 14%,rgba(0,0,0,.62) 54%,transparent 88%); } .system-art img{filter:saturate(.9) contrast(1.05);} /* Voiles de la moitie basse : sans eux, la page retombe sur un aplat noir des que les deux grandes scenes sont passees. */ .veil-clouds{ opacity:.42;filter:saturate(.62) contrast(1.06); --forme:radial-gradient(88% 62% at 32% 50%,#000 0,rgba(0,0,0,.5) 44%,transparent 82%); } .veil-feather{ opacity:.40;filter:saturate(.8); --forme:radial-gradient(64% 70% at 80% 42%,#000 0,rgba(0,0,0,.45) 42%,transparent 78%); } /* Le limbe gradue : c'est lui qui remplit le grand vide au-dessus des forfaits. */ .veil-limb{ opacity:.46;filter:saturate(.72) contrast(1.05); --forme:radial-gradient(78% 72% at 58% 34%,#000 0,rgba(0,0,0,.45) 44%,transparent 80%); } .veil-limb img{object-position:center 30%;} /* L'aile ferme la page : la matiere revient une derniere fois, en grand. */ .veil-wing{ inset:-16vh 0 0 0;opacity:.6;filter:saturate(.86); --forme:radial-gradient(76% 84% at 74% 48%,#000 0,rgba(0,0,0,.46) 42%,transparent 80%); } .veil-wing img{object-position:center 22%;} /* -------------------------------------------------------------------------- 4. TYPOGRAPHIE -------------------------------------------------------------------------- */ h1,h2,h3,p{margin-top:0;} h1,h2,h3{color:var(--ivory);font-family:var(--display);font-variation-settings:"SOFT" 60,"WONK" 1;font-weight:400;} h1{font-size:clamp(3.1rem,6.1vw,6.2rem);line-height:.94;letter-spacing:-.045em;} h2{max-width:15ch;font-size:clamp(2.5rem,4.6vw,4.4rem);line-height:.98;letter-spacing:-.04em;} h3{font-size:clamp(1.5rem,2.1vw,2rem);line-height:1.08;letter-spacing:-.025em;} .kicker{margin:0 0 1.15rem;color:var(--brass-lit);font-family:var(--mono);font-size:.8rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;} .lead{max-width:52rem;color:var(--ivory);font-size:clamp(1.18rem,1.02rem + .48vw,1.5rem);line-height:1.52;font-weight:400;} .muted{color:var(--mist);} .mono{font-family:var(--mono);} /* -------------------------------------------------------------------------- 5. NAVIGATION ET RAIL -------------------------------------------------------------------------- */ .site-nav{ position:fixed;z-index:50;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between; gap:2rem;width:100%;padding:1rem calc(var(--gutter) + var(--rail-space)) 1rem var(--gutter); background:linear-gradient(180deg,rgba(7,6,9,.92),rgba(7,6,9,.55) 62%,transparent); backdrop-filter:blur(3px); } .brand{display:flex;align-items:center;gap:.6rem;color:var(--ivory);font-family:var(--mono);font-size:.86rem;font-weight:400;letter-spacing:.28em;text-decoration:none;} .brand img{width:2.1rem;height:1.5rem;object-fit:contain;filter:drop-shadow(0 0 10px rgba(212,181,126,.4));} .nav-links{display:flex;align-items:center;gap:clamp(1rem,2vw,2.1rem);} .nav-links a{color:var(--paper);font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-decoration:none;transition:color 160ms var(--ease);} .nav-links a:hover{color:var(--gold);} .nav-links .nav-cta{padding:.7rem 1.15rem;color:var(--void);background:var(--gold);border:1px solid var(--gold);font-weight:600;transition:background-color 160ms var(--ease),box-shadow 300ms var(--ease);} .nav-links .nav-cta:hover{color:var(--void);background:var(--brass-lit);box-shadow:0 10px 30px rgba(183,152,106,.24);} .flight-rail{ position:fixed;z-index:45;right:clamp(.4rem,1.4vw,1.6rem);top:19vh;bottom:5.5rem; display:grid;grid-template-rows:1fr auto;justify-items:center;gap:.8rem; color:var(--brass);font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase; } .rail-world{writing-mode:vertical-rl;color:var(--mist);} .rail-axis{position:relative;width:1.8rem;min-height:15rem;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:.2rem 0;} .rail-axis::before{content:"";position:absolute;top:.4rem;bottom:.4rem;width:1px;background:linear-gradient(transparent,var(--brass-deep) 12%,var(--brass) 50%,var(--gold) 88%,transparent);} .rail-node{position:relative;z-index:1;width:.9rem;height:.9rem;display:grid;place-items:center;padding:0;border:0;background:none;color:inherit;cursor:pointer;} .rail-node::before{content:"";width:.4rem;height:.4rem;border:1px solid var(--line-lit);border-radius:50%;background:var(--void);transition:transform 240ms var(--ease),background-color 240ms var(--ease);} .rail-node:hover::before{transform:scale(1.5);background:var(--brass);} .rail-node.is-active::before{transform:scale(1.7);background:var(--gold);box-shadow:0 0 10px rgba(235,207,148,.7);} .rail-node.is-passed::before{background:var(--brass-deep);border-color:var(--brass);} .rail-node span,.rail-node small{position:absolute;right:1.5rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 200ms var(--ease);} .rail-node span{color:var(--gold);font-size:.62rem;} .rail-node small{display:none;} .rail-node:hover span,.rail-node:focus-visible span{opacity:1;} .rail-needle{position:absolute;z-index:2;top:calc(var(--flight) * (100% - 1.3rem));width:1.3rem;height:1.3rem;border:1px solid var(--gold);border-radius:50%;background:radial-gradient(circle,var(--gold) 0 22%,rgba(134,106,69,.5) 26% 44%,transparent 48%);box-shadow:0 0 0 .3rem rgba(235,207,148,.06),0 0 1.1rem rgba(235,207,148,.35);transition:top 180ms linear;} .rail-station{writing-mode:vertical-rl;max-height:9rem;overflow:hidden;color:var(--gold);text-overflow:ellipsis;white-space:nowrap;} .rail-distance{display:flex;align-items:center;gap:.3rem;writing-mode:vertical-rl;color:var(--mist);font-size:.55rem;} .rail-distance strong{color:var(--brass-lit);font-weight:400;} /* -------------------------------------------------------------------------- 6. HERO -------------------------------------------------------------------------- */ /* Le texte tient la gouttiere gauche et s'arrete tot : le reste de la largeur est rendu a la peinture, qui doit pouvoir etre contemplee. */ #hero{min-height:100svh;display:grid;align-content:center;padding-top:9rem;padding-bottom:7rem;} .hero-copy{width:100%;max-width:44rem;margin:0;} .wordmark{ margin:0 0 .5rem;color:var(--ivory);font-family:var(--display); font-size:clamp(4rem,9.4vw,8.4rem);font-variation-settings:"SOFT" 20,"WONK" 1,"opsz" 144; font-weight:300;line-height:.84;letter-spacing:.006em; text-shadow:0 0 70px rgba(7,6,9,.95),0 0 24px rgba(7,6,9,.8); } .wordmark span{color:var(--gold);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;text-shadow:0 0 34px rgba(235,207,148,.35);} .hero-signature{margin:0 0 1.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.85rem;color:var(--brass-lit);font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;} .hero-signature i{width:1px;height:.9rem;background:var(--line-lit);font-style:normal;} .hero-badge{ display:inline-flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-bottom:2.2rem; padding:.62rem 1.2rem;border:1px solid var(--line);border-radius:999px; background:rgba(11,9,16,.5);backdrop-filter:blur(8px); color:var(--brass-lit);font-family:var(--mono);font-size:.74rem;letter-spacing:.09em; } .hero-badge b{color:var(--ivory);font-weight:500;} .hero-badge i{width:1px;height:.95rem;background:var(--line-lit);font-style:normal;} /* Le mot-symbole porte le titre ; l'accroche devient une phrase, pas un pave. */ .hero-copy h1{max-width:20ch;margin:0 0 1.1rem;font-size:clamp(1.8rem,3vw,2.9rem);line-height:1.1;letter-spacing:-.025em;} .hero-copy h1 em{font-style:normal;color:var(--gold);font-variation-settings:"SOFT" 100,"WONK" 1;} .hero-copy .lead{max-width:40rem;font-size:clamp(1.1rem,.98rem + .35vw,1.32rem);} .hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin:2.2rem 0 0;} .status-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem;margin-top:2rem;color:var(--mist);font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;} .status-bar .available{color:var(--patina);} .status-bar .available::before{content:"";display:inline-block;width:.5rem;height:.5rem;margin-right:.5rem;border-radius:50%;background:currentColor;box-shadow:0 0 0 .24rem rgba(109,144,131,.14);} /* Boutons : plaques de commande, pas de degrade criard. */ .button{ position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:3.4rem; overflow:hidden;padding:.85rem 1.5rem;border:1px solid var(--line-lit);color:var(--ivory); background:rgba(20,16,25,.5);font-family:var(--mono);font-size:.82rem;font-weight:500;letter-spacing:.06em; text-decoration:none;backdrop-filter:blur(8px); transition:color 200ms var(--ease),background-color 200ms var(--ease),border-color 200ms var(--ease),transform 200ms var(--ease),box-shadow 320ms var(--ease); } .button:hover{transform:translateY(-2px);border-color:var(--gold);background:rgba(36,31,47,.62);box-shadow:0 12px 34px rgba(0,0,0,.4);} .button.primary{color:var(--void);background:var(--gold);border-color:var(--gold);} .button.primary:hover{background:var(--brass-lit);border-color:var(--brass-lit);box-shadow:0 14px 38px rgba(183,152,106,.26);} /* Trois engagements : filets graves, pas des cartes. */ /* La bande passe au-dessus de l'aile, la partie la plus claire de la peinture : sans ce voile, la troisieme legende tombe sous le seuil de contraste. Brume, pas carte : flou et alpha faible, aucun bord ni rayon. */ .outcome-strip{ display:grid;grid-template-columns:repeat(3,1fr); width:100%;max-width:62rem;margin-top:clamp(3rem,7vh,4.5rem); padding-bottom:1.4rem;border-top:1px solid var(--line); background:linear-gradient(180deg,rgba(7,6,9,.34),rgba(7,6,9,.66)); backdrop-filter:blur(7px); } .outcome{position:relative;padding:1.4rem 1.6rem 0 0;} .outcome+.outcome{padding-left:1.6rem;border-left:1px solid var(--line-soft);} .outcome::before{content:"";position:absolute;top:-1px;left:0;width:2.4rem;height:1px;background:var(--gold);} .outcome+.outcome::before{left:1.6rem;} .outcome strong{display:block;margin-bottom:.4rem;color:var(--ivory);font-family:var(--display);font-size:1.16rem;font-weight:500;letter-spacing:-.01em;} .outcome span{color:var(--paper);font-size:.94rem;line-height:1.45;} /* -------------------------------------------------------------------------- 7. SYSTEME -------------------------------------------------------------------------- */ #system{min-height:92svh;display:grid;align-items:center;} .system-layout{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(22rem,.95fr);gap:clamp(3rem,6vw,7rem);align-items:center;} .system-copy{position:relative;z-index:3;} .brand-tools{display:flex;flex-wrap:wrap;gap:.65rem;margin:2rem 0;} .tool-chip{display:flex;align-items:center;gap:.7rem;min-height:3.2rem;padding:.6rem 1rem;border:1px solid var(--line);color:var(--ivory);background:rgba(11,9,16,.55);font-family:var(--mono);font-size:.8rem;letter-spacing:.03em;backdrop-filter:blur(8px);transition:border-color 200ms var(--ease);} .tool-chip:hover{border-color:var(--line-lit);} .tool-chip img{width:1.6rem;height:1.6rem;object-fit:contain;} .plain-tool{display:grid;place-items:center;width:1.6rem;height:1.6rem;color:var(--gold);border:1px solid var(--brass-deep);border-radius:50%;font-size:.58rem;} .benefits{display:grid;gap:.9rem;margin:0;padding:0;list-style:none;} .benefits li{display:grid;grid-template-columns:1.3rem 1fr;gap:.75rem;color:var(--paper);font-size:1.02rem;} .benefits li::before{content:"";width:.5rem;height:.5rem;margin-top:.55rem;border:1px solid var(--patina);border-radius:50%;} /* L'astrolabe : orbites gravees, un seul foyer lumineux. */ .scene-shell{position:relative;z-index:2;aspect-ratio:1;min-height:26rem;display:grid;place-items:center;} .descent-map{position:relative;width:100%;height:100%;display:grid;place-items:center;} .descent-map span{position:absolute;border-radius:50%;} .solar-core{width:16%;aspect-ratio:1;background:radial-gradient(circle,#fff6e2 0 24%,var(--gold) 38%,rgba(183,152,106,.42) 62%,transparent 74%);box-shadow:0 0 5rem rgba(235,207,148,.34);} .orbit{border:1px solid var(--line);} .orbit-one{width:44%;aspect-ratio:1;transform:rotate(-18deg) skewX(-12deg);} .orbit-two{width:68%;aspect-ratio:1;border-color:rgba(109,144,131,.3);border-style:dashed;transform:rotate(14deg) skewY(-10deg);} .orbit-three{width:92%;aspect-ratio:1;border-color:var(--line-soft);} .fall-line{width:74%;height:1px;border-radius:0;background:linear-gradient(90deg,transparent,var(--brass-deep),var(--gold),var(--brass-deep),transparent);opacity:.5;} .earth-mark{width:.55rem;aspect-ratio:1;left:8%;background:var(--patina);box-shadow:0 0 .8rem rgba(109,144,131,.6);} .fall-capsule{width:.4rem;aspect-ratio:1;right:16%;background:var(--brass-lit);box-shadow:0 0 .7rem rgba(212,181,126,.7);} .scene-label{position:absolute;right:0;bottom:2%;max-width:19rem;margin:0;padding:.9rem 1.1rem;border-left:1px solid var(--gold);color:var(--mist);background:rgba(11,9,16,.78);font-size:.84rem;line-height:1.45;backdrop-filter:blur(10px);} .scene-label strong{display:block;margin-bottom:.25rem;color:var(--ivory);font-family:var(--display);font-size:1.1rem;font-weight:500;} /* -------------------------------------------------------------------------- 8. SERVICES -------------------------------------------------------------------------- */ .services-head{display:flex;justify-content:space-between;gap:3rem;align-items:end;margin-bottom:3.5rem;} .services-head>p{max-width:32rem;margin-bottom:.4rem;color:var(--paper);} .service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);} .service{position:relative;display:flex;flex-direction:column;padding:clamp(1.8rem,2.6vw,2.5rem);background:rgba(11,9,16,.5);backdrop-filter:blur(6px);transition:background-color 320ms var(--ease);} .service::before{content:"";position:absolute;top:0;left:0;width:0;height:1px;background:var(--gold);transition:width 480ms var(--ease);} .service:hover{background:rgba(36,31,47,.55);} .service:hover::before{width:100%;} .service .service-no{color:var(--brass);font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;} .service h3{margin:2rem 0 1rem;color:var(--ivory);} .service p{color:var(--paper);font-size:1rem;} .service .result{margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--line-soft);color:var(--brass-lit);font-size:.95rem;} .proof-line{display:grid;grid-template-columns:1.35fr repeat(3,.62fr);gap:1px;margin-top:2.5rem;background:var(--line-soft);border:1px solid var(--line-soft);} .proof-line>*{padding:1.3rem 1.4rem;background:rgba(11,9,16,.5);backdrop-filter:blur(6px);} .proof-line p{margin:0;color:var(--mist);font-size:.95rem;} .proof-line p strong{display:inline;color:var(--ivory);font-family:var(--body);font-size:inherit;} .proof-line div{display:flex;flex-direction:column;justify-content:center;} .proof-line div strong{display:block;color:var(--gold);font-family:var(--display);font-size:1.9rem;font-weight:400;line-height:1;} .proof-line span{margin-top:.4rem;color:var(--mist);font-size:.86rem;line-height:1.35;} /* -------------------------------------------------------------------------- 9. FORFAITS -------------------------------------------------------------------------- */ .pricing-intro{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:end;margin-bottom:3.5rem;} .pricing-intro>p{max-width:32rem;color:var(--paper);} .price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);} .price-card{position:relative;display:flex;flex-direction:column;padding:1.8rem 1.6rem;background:rgba(11,9,16,.5);backdrop-filter:blur(6px);transition:background-color 320ms var(--ease);} .price-card:hover{background:rgba(36,31,47,.55);} .price-card.featured{background:rgba(36,31,47,.62);} .price-card.featured::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--gold);} .price-card .pack{color:var(--brass);font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;} .price-card h3{margin:1.5rem 0 .8rem;color:var(--ivory);font-size:1.5rem;} .price{margin:0 0 1.4rem;color:var(--gold);font-family:var(--display);font-size:clamp(1.8rem,2.2vw,2.3rem);font-weight:400;line-height:1;} .price small{display:block;margin-top:.6rem;color:var(--mist);font-family:var(--body);font-size:.85rem;line-height:1.4;} .price-card ul{margin:0 0 1.6rem;padding:0;list-style:none;color:var(--paper);font-size:.94rem;} .price-card li{padding:.65rem 0;border-bottom:1px solid var(--line-soft);} .price-card .button{margin-top:auto;width:100%;} .price-note{margin-top:1.4rem;color:var(--mist);font-size:.9rem;} /* -------------------------------------------------------------------------- 10. METHODE -------------------------------------------------------------------------- */ .practice-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(3rem,7vw,8rem);align-items:start;} .practice-layout .lead{color:var(--paper);} .steps{counter-reset:step;margin:0;padding:0;list-style:none;} .steps li{counter-increment:step;display:grid;grid-template-columns:3.4rem 1fr;gap:1.2rem;padding:1.5rem 0;border-top:1px solid var(--line-soft);} .steps li:first-child{border-top-color:var(--line);} .steps li::before{content:counter(step,decimal-leading-zero);padding-top:.5rem;color:var(--brass);font-family:var(--mono);font-size:.85rem;letter-spacing:.1em;} .steps h3{margin:0 0 .5rem;font-size:1.45rem;} .steps p{margin:0;color:var(--paper);font-size:1rem;} .lab{margin-top:2.8rem;padding:1.7rem;border:1px solid var(--line);background:rgba(11,9,16,.5);backdrop-filter:blur(6px);} .lab h3{max-width:26ch;font-size:1.35rem;} .lab-links{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:1.4rem;background:var(--line-soft);} .lab-link{padding:1.1rem;color:var(--paper);background:rgba(11,9,16,.6);text-decoration:none;transition:background-color 200ms var(--ease);} .lab-link:hover{background:rgba(36,31,47,.7);} .lab-link b{display:block;margin-bottom:.3rem;color:var(--gold);font-family:var(--display);font-size:1.1rem;font-weight:500;} .lab-link span{color:var(--mist);font-size:.9rem;line-height:1.4;} /* Appel final : la seule surface qui s'autorise une lueur. */ .final-cta{ position:relative;margin-top:clamp(5rem,9vw,8rem);overflow:hidden; padding:clamp(2.4rem,5vw,4.5rem);border:1px solid var(--line); background: radial-gradient(80% 120% at 88% 42%, rgba(183,152,106,.14), transparent 62%), rgba(11,9,16,.6); backdrop-filter:blur(8px); } .final-wing{position:absolute;right:-3%;top:50%;width:min(42%,30rem);opacity:.5;filter:drop-shadow(0 0 28px rgba(212,181,126,.35));transform:translateY(-50%) rotate(3deg);mix-blend-mode:screen;} .final-cta>:not(.final-wing){position:relative;z-index:2;} .final-cta h2{max-width:14ch;} .final-cta>p{max-width:40rem;color:var(--paper);} /* -------------------------------------------------------------------------- BANDEAU DE FIN - une vraie derniere scene, pas un ourlet de liens. -------------------------------------------------------------------------- */ /* Ni overflow:hidden ni filet : le premier rognait la remontee de la plaque et recreait exactement l'arete qu'on chasse, le second la soulignait. La transition est faite par le fondu de l'aile, et par rien d'autre. */ .site-footer{ position:relative;background:none; padding:clamp(5rem,9vw,8rem) calc(var(--gutter) + var(--rail-space)) clamp(6rem,8vw,7rem) var(--gutter); } .footer-inner{width:min(100%,var(--page));margin:auto;} .footer-claim{ max-width:20ch;margin:0 0 2.8rem;color:var(--ivory);font-family:var(--display); font-size:clamp(1.9rem,3.4vw,3.2rem);font-variation-settings:"SOFT" 60,"WONK" 1; font-weight:400;line-height:1.08;letter-spacing:-.035em; } .footer-reach{display:flex;flex-wrap:wrap;gap:1.1rem 2.6rem;margin-bottom:3.6rem;} .footer-reach a{ padding-bottom:.4rem;border-bottom:1px solid var(--line);color:var(--gold); font-family:var(--mono);font-size:clamp(.86rem,1.1vw,1.02rem);letter-spacing:.05em; text-decoration:none;transition:color 200ms var(--ease),border-color 200ms var(--ease); } .footer-reach a:hover{color:var(--ivory);border-color:var(--gold);} .footer-base{ display:flex;justify-content:space-between;gap:2rem;padding-top:2rem; border-top:1px solid var(--line-soft);color:var(--mist); font-family:var(--mono);font-size:.72rem;line-height:1.9;letter-spacing:.03em; } .footer-base p{margin:0;max-width:42rem;} .footer-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.7rem 1.3rem;} .footer-links a{color:var(--paper);text-decoration:none;transition:color 160ms var(--ease);} .footer-links a:hover{color:var(--gold);} /* -------------------------------------------------------------------------- HUD DE VOL - la mesure du trajet, en bas, en continu. -------------------------------------------------------------------------- */ .flight-hud{ position:fixed;z-index:44;left:0;right:0;bottom:0;pointer-events:none; display:flex;align-items:center;gap:clamp(.9rem,2.4vw,2.4rem); padding:.72rem calc(var(--gutter) + var(--rail-space)) .72rem var(--gutter); border-top:1px solid var(--line-soft); background:linear-gradient(0deg,rgba(7,6,9,.95),rgba(7,6,9,.66)); backdrop-filter:blur(12px); color:var(--mist);font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase; } .hud-metric{margin:0;white-space:nowrap;} .hud-metric strong{color:var(--gold);font-weight:500;letter-spacing:.06em;} .hud-track{flex:1;min-width:3rem;height:1px;background:var(--line-soft);} .hud-track b{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--brass-deep),var(--gold));transition:width 180ms linear;} .hud-phrase{margin:0;overflow:hidden;color:var(--brass-lit);white-space:nowrap;text-overflow:ellipsis;} /* -------------------------------------------------------------------------- 11. REVELATION AU DEFILEMENT - sans JS, tout reste visible. -------------------------------------------------------------------------- */ .reveal{opacity:1;transform:none;transition:opacity 700ms var(--ease),transform 700ms var(--ease);} .reveal.reveal-ready{opacity:0;transform:translateY(1.4rem);} .reveal.reveal-ready.visible{opacity:1;transform:none;} /* -------------------------------------------------------------------------- 12. PAGE CONTACT -------------------------------------------------------------------------- */ .contact-page{min-height:100svh;display:grid;place-items:center;padding:8rem calc(var(--gutter) + var(--rail-space)) 5rem var(--gutter);background:none;} .contact-shell{position:relative;width:min(100%,72rem);display:grid;grid-template-columns:.9fr 1.1fr;overflow:hidden;border:1px solid var(--line);background:rgba(11,9,16,.62);box-shadow:0 40px 120px rgba(0,0,0,.5);backdrop-filter:blur(16px);} .contact-copy{position:relative;min-height:42rem;overflow:hidden;padding:clamp(2.2rem,4vw,3.6rem);} .contact-copy::before{content:"";position:absolute;inset:0;z-index:0;background:url("../img/workflow-960.webp") center/cover;opacity:.5;mix-blend-mode:screen;} .contact-copy::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(160deg,rgba(7,6,9,.5),rgba(11,9,16,.9));} .contact-copy>*{position:relative;z-index:1;} .contact-wing{width:clamp(6rem,10vw,9rem);margin:0 0 1.5rem;filter:drop-shadow(0 0 20px rgba(212,181,126,.4));} .contact-wordmark{margin:0 0 2.5rem;color:var(--ivory);font-family:var(--mono);font-size:.9rem;letter-spacing:.32em;} .contact-copy h1{max-width:11ch;font-size:clamp(2.6rem,4.4vw,4.2rem);} .contact-copy p{max-width:30rem;color:var(--paper);} .contact-form{position:relative;padding:clamp(2.4rem,4.5vw,4rem);background:rgba(20,16,25,.4);} .contact-form::before{content:"Votre trajectoire";display:block;margin-bottom:2rem;color:var(--gold);font-family:var(--display);font-size:1.8rem;} .field{display:grid;gap:.45rem;margin-bottom:1.2rem;} .field label{color:var(--brass-lit);font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;} .field input,.field textarea{width:100%;padding:.85rem .2rem;border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--ivory);background:transparent;transition:border-color 200ms var(--ease),background-color 200ms var(--ease);} .field input:focus,.field textarea:focus{border-color:var(--gold);background:rgba(36,31,47,.4);} .field textarea{min-height:8.5rem;resize:vertical;} .contact-form .button{width:100%;border:1px solid var(--gold);cursor:pointer;} .privacy-note{margin-top:1rem;color:var(--mist);font-size:.8rem;} .form-status{min-height:1.5rem;margin:.8rem 0 0;color:var(--patina);font-size:.88rem;} /* -------------------------------------------------------------------------- 13. ADAPTATIF -------------------------------------------------------------------------- */ @media (max-width:70rem){ .price-grid{grid-template-columns:1fr 1fr;} .system-layout,.practice-layout,.pricing-intro{grid-template-columns:1fr;} .scene-shell{width:min(100%,38rem);min-height:22rem;margin:auto;} .service-grid{grid-template-columns:1fr;} .proof-line{grid-template-columns:1fr 1fr;} .contact-shell{grid-template-columns:1fr;} .contact-copy{min-height:26rem;} } @media (max-width:52rem){ :root{--rail-space:2.6rem;} .site-nav{background:rgba(7,6,9,.9);backdrop-filter:blur(14px);} .nav-links a:not(.nav-cta){display:none;} .flight-rail{right:.3rem;top:16vh;bottom:8vh;font-size:.52rem;} .rail-axis{width:1.3rem;min-height:11rem;} .rail-needle{width:1rem;height:1rem;} .rail-distance{display:none;} .hero-art img{object-position:70% 40%;} .hero-art::after{background:linear-gradient(180deg,rgba(7,6,9,.5),rgba(11,9,16,.82) 52%,rgba(7,6,9,.96) 88%);} .outcome-strip,.services-head{display:block;} .outcome{padding:1.2rem 0;border-top:1px solid var(--line-soft);} .outcome+.outcome{padding-left:0;border-left:0;} .outcome::before,.outcome+.outcome::before{left:0;} .footer-base{display:block;} .footer-links{justify-content:flex-start;margin-top:1.3rem;} /* Le HUD mange trop de hauteur sur un telephone : on garde la mesure, on sacrifie la phrase et la piste. */ .hud-track,.hud-phrase{display:none;} .flight-hud{gap:1.1rem;font-size:.58rem;} .flight-rail{bottom:4rem;} } @media (max-width:34rem){ :root{--gutter:1rem;--rail-space:1.6rem;} .section{padding-top:4rem;padding-bottom:4rem;} #hero{min-height:100svh;padding-top:7.5rem;} .hero-badge{gap:.5rem;padding:.55rem .9rem;font-size:.66rem;} .hero-badge i{display:none;} .hero-copy h1{font-size:clamp(2.7rem,12vw,3.8rem);} .hero-actions .button{width:100%;} .proof-line{grid-template-columns:1fr;} .price-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;gap:1px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;} .price-card{scroll-snap-align:start;} .lab-links{grid-template-columns:1fr;} .steps li{grid-template-columns:2.6rem 1fr;} .scene-label{position:static;max-width:none;margin-top:1.2rem;} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .sky span{animation:none;} *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;} }