/* ========================================================================== LOUIS LANCELIN — FEUILLE DE STYLE UNIQUE -------------------------------------------------------------------------- Sommaire 00. Design tokens 09. Le chantier (signature) 01. Base & accessibilité 10. Projets 02. Typographie 11. Chiffres 03. Boutons 12. Méthode 04. En-tête & navigation 13. Avis & notation 05. (libre) 14. FAQ (accordéon) 06. Héros 15. Bande d'appel & contact 07. Bandeau défilant 16. Pied de page 08. Têtes de section 17. Pages utilitaires (404, merci, légal) 18. Révélations · 19. Adaptatif · 20. Mouvement réduit ========================================================================== */ /* ========================================================================== 00. DESIGN TOKENS — toute décision graphique du site descend d'ici ========================================================================== */ :root{ /* Palette principale */ --void:#050507; --carbon:#0B0C10; --anthracite:#14161D; --graphite:#1E212A; /* Accent */ --red:#FF2A3C; --red-neon:#FF5A66; --red-deep:#8E0F1B; /* Contrastes ponctuels */ --cyan:#37E6FF; --violet:#8B5CFF; /* Texte */ --bone:#F2EFE9; --bone-soft:#C9C6C0; --muted:#7E8494; --line:rgba(242,239,233,.10); --line-strong:rgba(242,239,233,.20); /* États */ --focus:#37E6FF; --ok:#4ADE80; --warn:#FBBF24; /* Dégradés & lumière */ --grad-red:linear-gradient(135deg,var(--red) 0%,var(--red-deep) 100%); --grad-text:linear-gradient(180deg,var(--bone) 0%,rgba(242,239,233,.45) 100%); --grad-surface:linear-gradient(180deg,rgba(242,239,233,.035),transparent 62%); --glow-red:0 0 0 1px rgba(255,42,60,.35),0 12px 40px -12px rgba(255,42,60,.55); --glow-soft:0 30px 90px -40px rgba(0,0,0,.9); /* Typographie */ --font-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif; --font-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --t-hero:clamp(2.7rem,7.6vw,6.6rem); --t-h2:clamp(1.9rem,4.4vw,3.6rem); --t-h3:clamp(1.2rem,2.1vw,1.7rem); --t-body:clamp(1rem,1.1vw,1.1rem); --t-small:.875rem; --t-micro:.72rem; /* Rythme */ --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2.5rem; --sp-5:4rem; --sp-6:6.5rem; --sp-7:9rem; --rad-s:6px; --rad-m:14px; --rad-l:24px; --rad-xl:34px; --shell:min(1240px,100% - 2.5rem); --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1); } /* ========================================================================== 01. BASE & ACCESSIBILITÉ ========================================================================== */ *,*::before,*::after{box-sizing:border-box} /* clip sur et non hidden sur : hidden ferait du body un conteneur de défilement et casserait position:sticky sur plusieurs mobiles. */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:5.5rem} body{margin:0;background:var(--void);color:var(--bone-soft);font-family:var(--font-body); font-size:var(--t-body);line-height:1.65;-webkit-font-smoothing:antialiased} body.is-locked{overflow:hidden} h1,h2,h3,h4{font-family:var(--font-display);color:var(--bone);line-height:1.04;margin:0; font-weight:700;letter-spacing:-.025em;text-wrap:balance} p{margin:0} a{color:inherit;text-decoration:none} img,svg,video{display:block;max-width:100%} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ::selection{background:var(--red);color:#fff} :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px} .shell{width:var(--shell);margin-inline:auto} .section{padding-block:var(--sp-7);position:relative} .section--tight{padding-block:var(--sp-6)} .section--carbon{background:var(--carbon)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;left:var(--sp-2);top:-4rem;z-index:1000;background:var(--red);color:#fff; padding:.7rem 1.2rem;border-radius:var(--rad-s);transition:top .2s var(--ease)} .skip:focus{top:var(--sp-2)} /* Bruit de surface : une seule couche SVG, aucune requête réseau */ .grain{position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.28;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")} /* ========================================================================== 02. TYPOGRAPHIE UTILITAIRE ========================================================================== */ .eyebrow{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.22em; text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.7rem} .eyebrow::before{content:"";width:26px;height:1px;background:var(--red);flex:none} .eyebrow--center{justify-content:center} .lead{font-size:clamp(1.02rem,1.4vw,1.25rem);color:var(--bone-soft);max-width:58ch} .dim{color:var(--muted)} .hl{color:var(--bone)} .label{display:block} .prose{max-width:72ch;display:grid;gap:var(--sp-3)} .prose h2{font-size:clamp(1.4rem,2.6vw,2rem);margin-top:var(--sp-3)} .prose h3{font-size:1.1rem} .prose ul{margin:0;padding-left:1.2rem;display:grid;gap:.5rem} .prose a{color:var(--bone);border-bottom:1px solid var(--red)} /* ========================================================================== 03. BOUTONS ========================================================================== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;padding:1rem 1.6rem; border-radius:100px;font-family:var(--font-mono);font-size:.8rem;letter-spacing:.12em; text-transform:uppercase;position:relative;overflow:hidden; transition:transform .35s var(--ease),box-shadow .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)} .btn__label{position:relative;z-index:2} .btn__dot{width:6px;height:6px;border-radius:50%;background:currentColor;position:relative;z-index:2;flex:none} .btn--primary{background:var(--red);color:#fff;box-shadow:var(--glow-red)} .btn--primary::after{content:"";position:absolute;inset:0;background:var(--red-neon); transform:translateY(101%);transition:transform .45s var(--ease)} .btn--primary:hover{transform:translateY(-2px); box-shadow:0 0 0 1px rgba(255,90,102,.5),0 18px 50px -14px rgba(255,42,60,.75)} .btn--primary:hover::after{transform:translateY(0)} .btn--ghost{border:1px solid var(--line-strong);color:var(--bone)} .btn--ghost:hover{border-color:var(--red);transform:translateY(-2px)} .btn--wide{width:100%} /* ========================================================================== 04. EN-TÊTE & NAVIGATION ========================================================================== */ .progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:600;transform-origin:0 50%; transform:scaleX(0);background:linear-gradient(90deg,var(--red-deep),var(--red),var(--red-neon))} .nav{position:fixed;top:0;left:0;right:0;z-index:500;padding-block:1.05rem;border-bottom:1px solid transparent; transition:background .4s var(--ease),backdrop-filter .4s var(--ease),padding .4s var(--ease),border-color .4s var(--ease)} .nav.is-stuck{background:rgba(5,5,7,.72);-webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line);padding-block:.65rem} .nav__in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)} .mark{display:flex;align-items:center;gap:.65rem;font-family:var(--font-mono);font-size:.78rem; letter-spacing:.14em;color:var(--bone)} .mark__sig{width:30px;height:30px;flex:none} .mark__sig path{stroke:var(--red);stroke-width:3;fill:none} .nav__links{display:flex;align-items:center;gap:1.6rem} .nav__link{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);position:relative;padding-block:.3rem;transition:color .3s var(--ease)} .nav__link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--red); transform:scaleX(0);transform-origin:100% 50%;transition:transform .4s var(--ease)} .nav__link:hover{color:var(--bone)} .nav__link:hover::after{transform:scaleX(1);transform-origin:0 50%} .nav__link[aria-current="page"]{color:var(--bone)} .nav__link[aria-current="page"]::after{transform:scaleX(1)} .nav__cta{padding:.62rem 1.1rem;font-size:.72rem} .burger{display:none;width:40px;height:40px;border:1px solid var(--line-strong);border-radius:50%; align-items:center;justify-content:center} .burger span{display:block;width:15px;height:1px;background:var(--bone);position:relative} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:15px;height:1px; background:var(--bone);transition:transform .3s var(--ease)} .burger span::before{top:-5px}.burger span::after{top:5px} .nav.is-open .burger span{background:transparent} .nav.is-open .burger span::before{transform:translateY(5px) rotate(45deg)} .nav.is-open .burger span::after{transform:translateY(-5px) rotate(-45deg)} /* Retour en haut */ .totop{position:fixed;right:1.2rem;bottom:1.2rem;z-index:480;width:44px;height:44px;border-radius:50%; display:grid;place-items:center;background:rgba(5,5,7,.7);border:1px solid var(--line-strong); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--bone); opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s,border-color .3s var(--ease)} .totop.is-on{opacity:1;visibility:visible;transform:none} .totop:hover{border-color:var(--red)} /* ========================================================================== 06. HÉROS ========================================================================== */ .hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center; padding-top:7rem;padding-bottom:6rem;overflow:hidden} .hero--page{min-height:0;padding-top:11rem;padding-bottom:var(--sp-5)} .hero__bg{position:absolute;inset:0;pointer-events:none} .hero__grid{position:absolute;inset:-10%;opacity:.5; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:78px 78px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 62% 42%,#000 0%,transparent 72%); mask-image:radial-gradient(ellipse 70% 60% at 62% 42%,#000 0%,transparent 72%)} .hero__halo{position:absolute;width:min(880px,110vw);aspect-ratio:1;right:-14%;top:-22%;border-radius:50%; background:radial-gradient(circle,rgba(255,42,60,.30) 0%,rgba(142,15,27,.13) 34%,transparent 66%);filter:blur(24px)} .hero__halo--2{left:-24%;top:auto;bottom:-42%;right:auto;width:min(620px,90vw); background:radial-gradient(circle,rgba(139,92,255,.16) 0%,transparent 64%)} .dust{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--red-neon); animation:float linear infinite;will-change:transform} @keyframes float{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:.6} 100%{transform:translate3d(22px,-190px,0);opacity:0}} .hero__in{position:relative;z-index:2;width:var(--shell);margin-inline:auto} .hero__eyebrow{margin-bottom:var(--sp-3)} .hero h1{font-size:var(--t-hero);font-weight:800;max-width:16ch;letter-spacing:-.04em} .hero--page h1{font-size:clamp(2.2rem,5.4vw,4.2rem);max-width:20ch} .hero h1 .ln{display:block;overflow:hidden} .hero h1 .ln>span{display:block;transform:translateY(105%);transition:transform 1s var(--ease)} .hero.is-in h1 .ln>span{transform:translateY(0)} .hero h1 .ln:nth-child(2)>span{transition-delay:.09s} .hero h1 .ln:nth-child(3)>span{transition-delay:.18s} .hero__strike{position:relative;display:inline-block;color:var(--muted);font-style:normal} .hero__strike::after{content:"";position:absolute;left:-2%;top:52%;width:104%;height:3px;background:var(--red); transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease) 1s} .hero.is-in .hero__strike::after{transform:scaleX(1)} .hero__sub{margin-top:var(--sp-3);max-width:54ch;opacity:0;transform:translateY(18px); transition:opacity .8s var(--ease) .45s,transform .8s var(--ease) .45s} .hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4);opacity:0; transform:translateY(18px);transition:opacity .8s var(--ease) .6s,transform .8s var(--ease) .6s} .hero.is-in .hero__sub,.hero.is-in .hero__actions{opacity:1;transform:none} .hero--page .hero__sub,.hero--page .hero__actions{opacity:1;transform:none;transition:none} .hero__foot{position:absolute;left:0;right:0;bottom:1.6rem;z-index:2} .hero__foot-in{width:var(--shell);margin-inline:auto;display:flex;justify-content:space-between; align-items:flex-end;gap:var(--sp-3);font-family:var(--font-mono);font-size:var(--t-micro); letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .scroll-hint{display:flex;align-items:center;gap:.6rem} .scroll-hint i{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--red),transparent); animation:drop 2.2s var(--ease-io) infinite} @keyframes drop{0%{transform:scaleY(0);transform-origin:0 0}50%{transform:scaleY(1);transform-origin:0 0} 51%{transform:scaleY(1);transform-origin:0 100%}100%{transform:scaleY(0);transform-origin:0 100%}} /* Fil d'Ariane */ /* Le fil d'Ariane porte lui-même le dégagement sous l'en-tête fixe ; le héros de la page ne le rajoute donc pas une seconde fois (classe .has-crumb). */ .crumb-wrap{padding-top:7.5rem} .crumb{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-family:var(--font-mono); font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .has-crumb .hero--page{padding-top:var(--sp-3)} .has-crumb .contact{padding-top:var(--sp-4)} .crumb a:hover{color:var(--bone)} .crumb span[aria-current]{color:var(--red)} /* ========================================================================== 07. BANDEAU DÉFILANT ========================================================================== */ .ticker{border-block:1px solid var(--line);background:var(--carbon);overflow:hidden;padding-block:1.05rem} .ticker__track{display:flex;width:max-content;animation:slide 36s linear infinite} .ticker:hover .ticker__track{animation-play-state:paused} .ticker__item{display:flex;align-items:center;gap:3rem;padding-right:3rem;font-family:var(--font-mono); font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap} .ticker__item b{color:var(--bone);font-weight:500} .ticker__sep{color:var(--red)} @keyframes slide{to{transform:translateX(-50%)}} /* ========================================================================== 08. TÊTES DE SECTION & GRILLE DE PÔLES ========================================================================== */ .head{display:grid;gap:var(--sp-3);margin-bottom:var(--sp-5);max-width:62ch} .head h2{font-size:var(--t-h2)} .head__num{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--red);letter-spacing:.2em} .bento{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--rad-l);overflow:hidden} .pole{background:var(--void);padding:var(--sp-4) var(--sp-3);position:relative;display:grid; align-content:start;gap:var(--sp-2);transition:background .5s var(--ease)} .pole:hover{background:var(--anthracite)} .pole__ico{width:40px;height:40px} .pole__ico path,.pole__ico circle,.pole__ico rect,.pole__ico line{stroke:var(--red);stroke-width:1.4; fill:none;stroke-linecap:round;stroke-linejoin:round} .pole h3{font-size:var(--t-h3)} .pole p{font-size:.95rem;color:var(--muted)} .pole__more{margin-top:.4rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;color:var(--bone);display:inline-flex;gap:.5rem;transition:gap .3s var(--ease)} .pole__more:hover{gap:1rem;color:var(--red)} .pole:hover .pole__more{gap:1rem;color:var(--red)} .pole__no{position:absolute;top:var(--sp-3);right:var(--sp-3);font-family:var(--font-mono); font-size:var(--t-micro);color:var(--line-strong)} /* ========================================================================== 09. LE CHANTIER — élément signature ========================================================================== */ .forge{position:relative;background:var(--carbon);border-block:1px solid var(--line)} .forge__rail{height:640vh} .forge__stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden} .forge__glow{position:absolute;width:60vw;aspect-ratio:1;border-radius:50%;filter:blur(60px);opacity:.5; right:-10%;top:10%;background:radial-gradient(circle,rgba(255,42,60,.22),transparent 62%); transition:transform 1.2s var(--ease),background 1.2s var(--ease);pointer-events:none} .forge__in{position:relative;z-index:2;width:var(--shell);margin-inline:auto;display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--sp-5);align-items:center} .chapters{position:relative} .chapters__idx{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.2em;color:var(--muted); display:flex;gap:.4rem;align-items:baseline;margin-bottom:var(--sp-3)} .chapters__idx b{color:var(--red);font-size:1rem;font-weight:500} /* Chapitres superposés dans une pile de hauteur réservée : la mise en page ne bouge pas d'une étape à l'autre, quelle que soit la longueur du texte. */ .chapters__stack{position:relative;min-height:275px} .chapter{position:absolute;inset:0;opacity:0;transform:translateY(26px);pointer-events:none; transition:opacity .5s var(--ease),transform .6s var(--ease)} .chapter.is-on{opacity:1;transform:none;pointer-events:auto} .chapter h3{font-size:clamp(1.7rem,3.2vw,2.7rem);margin-bottom:var(--sp-2)} .chapter p{max-width:44ch} .chapter__tag{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.2em; text-transform:uppercase;color:var(--red);margin-bottom:.9rem;display:block} .steps{display:flex;gap:.4rem;margin-top:var(--sp-4)} .steps button{height:3px;flex:1;background:var(--line-strong);border-radius:2px;position:relative;overflow:hidden} .steps button::after{content:"";position:absolute;inset:0;background:var(--red);transform:scaleX(0); transform-origin:0 50%;transition:transform .5s var(--ease)} .steps button.is-done::after{transform:scaleX(1)} /* Maquette : container-type pour que ses textes suivent SA largeur, pas l'écran */ .mock{position:relative;container-type:inline-size;aspect-ratio:16/11;display:flex;flex-direction:column; border-radius:var(--rad-l);overflow:hidden;background:#0F1116;border:1px solid var(--line-strong); box-shadow:var(--glow-soft);transform:perspective(1400px) rotateY(-6deg) rotateX(2deg); transition:transform 1s var(--ease)} .forge__stage:hover .mock{transform:perspective(1400px) rotateY(-3deg) rotateX(1deg)} .mock__bar{flex:none;height:clamp(22px,6cqw,34px);display:flex;align-items:center;gap:clamp(.25rem,1.2cqw,.5rem); padding-inline:clamp(.5rem,2.4cqw,.9rem);background:#0A0B0F;border-bottom:1px solid var(--line)} .mock__dot{width:clamp(5px,1.7cqw,8px);aspect-ratio:1;border-radius:50%;background:var(--graphite);flex:none} .mock__url{margin-left:clamp(.3rem,1.6cqw,.6rem);font-family:var(--font-mono); font-size:clamp(.4rem,1.7cqw,.62rem);color:var(--muted);letter-spacing:.06em;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;background:#101218;padding:.2em .9em;border-radius:100px; border:1px solid var(--line)} .mock__view{position:relative;flex:1;overflow:hidden} .layer{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease),transform .8s var(--ease); will-change:opacity,transform} .layer.is-on{opacity:1} /* --- Socle commun des couches ------------------------------------------- Chaque couche partage la même ossature (en-tête / corps / pied) et les mêmes marges, exprimées en unités de conteneur : quelle que soit la largeur de la maquette, tout reste aligné sur la même grille. */ .layer{padding:0} .wire__head,.strat__head,.code__head,.perf__head,.proof__head{ position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between; gap:1cqw;padding:3.4cqw 5cqw 0;font-family:var(--font-mono);letter-spacing:.1em} .wire__title{font-size:clamp(.38rem,1.7cqw,.62rem);color:var(--bone);text-transform:lowercase} .wire__note{font-size:clamp(.34rem,1.5cqw,.56rem);color:var(--muted);text-transform:uppercase; letter-spacing:.14em;white-space:nowrap} /* 1 — la note manuscrite */ .l-note{display:grid;place-items:center;background:#0F1116;transform:scale(1.04)} .l-note.is-on{transform:none} .l-note figure{margin:0;width:78%;border-left:2px solid var(--red);padding-left:clamp(.6rem,3cqw,1.2rem)} .l-note blockquote{font-family:var(--font-display);font-size:clamp(.66rem,3.9cqw,1.55rem);color:var(--bone); line-height:1.24;margin:0;text-wrap:balance} .l-note figcaption{font-family:var(--font-mono);font-size:clamp(.4rem,1.6cqw,.62rem);letter-spacing:.16em; text-transform:uppercase;color:var(--muted);margin-top:.9em} /* 2 — le plan du site en fil de fer */ .l-wire{padding:11cqw 5cqw 5cqw;transform:translateY(14px)} .l-wire.is-on{transform:none} .wire__grid{display:grid;grid-template-rows:auto 1fr auto auto;gap:2cqw;height:100%} .wire__row{display:grid;grid-template-columns:1.5fr 1fr;gap:2cqw;min-height:0} .wire__row--4{grid-template-columns:repeat(4,1fr)} .wire{border:1px dashed var(--line-strong);border-radius:4px;background:rgba(242,239,233,.03); display:grid;place-items:center;text-align:center;padding:1.4cqw;min-height:0} .wire span{font-family:var(--font-mono);font-size:clamp(.32rem,1.45cqw,.54rem);color:var(--muted); line-height:1.5;letter-spacing:.04em} .wire--bar{min-height:7cqw} .wire--big span{color:var(--bone-soft);font-size:clamp(.36rem,1.7cqw,.62rem)} .wire--photo{border-style:solid;border-color:var(--line); background-image:repeating-linear-gradient(45deg,rgba(242,239,233,.04) 0 6px,transparent 6px 12px)} .wire--cta{min-height:7cqw;border-style:solid;border-color:rgba(255,42,60,.45); background:rgba(255,42,60,.07)} .wire--cta span{color:var(--red-neon)} /* 3 — les mots-clés et leur volume */ .l-strat{padding:11cqw 5cqw 4cqw;display:flex;flex-direction:column;justify-content:center;gap:2.4cqw} .strat__list{list-style:none;margin:0;padding:0;display:grid;gap:2.2cqw} .strat__list li{display:grid;grid-template-columns:minmax(0,1fr) 34% auto;gap:2.4cqw;align-items:center} .strat__mot{font-family:var(--font-mono);font-size:clamp(.34rem,1.55cqw,.58rem);color:var(--bone-soft); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .strat__bar{height:clamp(3px,1.1cqw,6px);border-radius:3px;background:rgba(242,239,233,.08); position:relative;overflow:hidden} .strat__bar::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:3px; background:linear-gradient(90deg,var(--red-deep),var(--red));transform:scaleX(0);transform-origin:0 50%; transition:transform .9s var(--ease) .25s} .l-strat.is-on .strat__bar::after{transform:scaleX(1)} .strat__list b{font-family:var(--font-mono);font-size:clamp(.34rem,1.5cqw,.58rem);color:var(--bone); font-weight:500;text-align:right;min-width:4ch} .strat__pied{font-family:var(--font-mono);font-size:clamp(.32rem,1.45cqw,.54rem);color:var(--red); letter-spacing:.1em;margin-top:1cqw} /* 5 — le code */ .l-code{background:rgba(5,5,7,.90);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); padding:11cqw 5cqw 4cqw;display:flex;flex-direction:column;justify-content:center;gap:2.4cqw;overflow:hidden} .code__body{font-family:var(--font-mono);font-size:clamp(.32rem,1.6cqw,.68rem);line-height:1.9} .l-code .cl{opacity:0;transform:translateX(-14px);white-space:pre; transition:opacity .4s var(--ease),transform .4s var(--ease)} .l-code.is-on .cl{opacity:1;transform:none} .l-code.is-on .cl:nth-child(1){transition-delay:.05s} .l-code.is-on .cl:nth-child(2){transition-delay:.12s} .l-code.is-on .cl:nth-child(3){transition-delay:.19s} .l-code.is-on .cl:nth-child(4){transition-delay:.26s} .l-code.is-on .cl:nth-child(5){transition-delay:.33s} .l-code.is-on .cl:nth-child(6){transition-delay:.40s} .code__pied{display:flex;flex-wrap:wrap;gap:1.6cqw;padding-top:2.4cqw;border-top:1px solid var(--line)} .code__pied span{font-family:var(--font-mono);font-size:clamp(.3rem,1.4cqw,.52rem);color:var(--muted); letter-spacing:.1em;text-transform:uppercase} .tk-c{color:#4B5162}.tk-t{color:var(--red-neon)}.tk-a{color:var(--cyan)}.tk-v{color:var(--bone)}.tk-k{color:var(--violet)} /* 6 — les jauges de mesure */ .l-perf{background:rgba(5,5,7,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); padding:11cqw 5cqw 4cqw;display:flex;flex-direction:column;justify-content:center;gap:3cqw} .perf__jauges{display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw;align-items:start} .gauge{text-align:center;min-width:0} .gauge__ring{position:relative;width:min(100%,74px);margin-inline:auto} .gauge svg{width:100%;transform:rotate(-90deg)} .gauge circle{fill:none;stroke-width:5;stroke-linecap:round} .gauge .bg{stroke:rgba(242,239,233,.10)} .gauge .fg{stroke:var(--ok);stroke-dasharray:157;stroke-dashoffset:157; transition:stroke-dashoffset 1.4s var(--ease) .2s} .l-perf.is-on .gauge .fg{stroke-dashoffset:var(--off)} .gauge b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display); font-size:clamp(.55rem,3cqw,1.25rem);color:var(--bone)} .gauge span{display:block;font-family:var(--font-mono);font-size:clamp(.3rem,1.35cqw,.5rem); letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:1.2em;line-height:1.4} .perf__pied{font-family:var(--font-mono);font-size:clamp(.3rem,1.4cqw,.52rem);color:var(--muted); letter-spacing:.1em;text-align:center} /* 7 — ce qui se passe après la mise en ligne */ .l-proof{padding:11cqw 5cqw 4cqw;display:flex;flex-direction:column;justify-content:center;gap:3cqw; background:rgba(5,5,7,.84);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .proof__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw} .proof__list li{display:grid;gap:.4cqw;padding-left:3.4cqw;position:relative;min-width:0} .proof__list li::before{content:"";position:absolute;left:0;top:.45em;width:1.6cqw;height:1.6cqw; min-width:5px;min-height:5px;border-radius:50%;background:var(--ok); box-shadow:0 0 0 .8cqw rgba(74,222,128,.16)} .proof__list b{font-family:var(--font-display);font-size:clamp(.42rem,2.1cqw,.85rem);color:var(--bone); font-weight:700;letter-spacing:-.01em} .proof__list span{font-family:var(--font-mono);font-size:clamp(.3rem,1.35cqw,.52rem);color:var(--muted); letter-spacing:.08em;line-height:1.5} .proof__pied{font-family:var(--font-mono);font-size:clamp(.3rem,1.4cqw,.52rem);color:var(--red); letter-spacing:.1em;text-align:center} /* Maquette de site client générique (charte volontairement neutre) */ .l-site{background:#F5F7FA;transform:translateY(10px)} .l-site.is-on{transform:none} .cts{height:100%;display:flex;flex-direction:column;font-family:var(--font-body)} .cts__nav{height:13%;background:#16233A;display:flex;align-items:center;justify-content:space-between;padding-inline:5%} .cts__logo{color:#fff;font-family:var(--font-display);font-weight:700; font-size:clamp(.42rem,2.3cqw,.85rem);letter-spacing:-.01em;white-space:nowrap} .cts__menu{display:flex;gap:5%;align-items:center} .cts__menu i{display:block;width:clamp(10px,3.6cqw,34px);height:clamp(2px,.85cqw,4px);border-radius:2px; background:rgba(255,255,255,.55)} .cts__hero{flex:1;background:linear-gradient(115deg,#16233A 0%,#2D4A7A 58%,#5B87C4 100%); padding:5% 5% 4%;display:flex;flex-direction:column;justify-content:center;gap:5%;position:relative;overflow:hidden} .cts__hero::after{content:"";position:absolute;right:-8%;bottom:-40%;width:46%;aspect-ratio:1; border-radius:50%;background:rgba(109,179,63,.26)} .cts__t{color:#fff;font-family:var(--font-display);font-weight:700;font-size:clamp(.6rem,4cqw,1.5rem); line-height:1.05;max-width:74%} .cts__p{width:52%;height:clamp(2px,1.1cqw,5px);border-radius:3px;background:rgba(255,255,255,.42)} .cts__btn{background:#6DB33F;color:#fff;font-family:var(--font-mono);font-size:clamp(.34rem,1.5cqw,.6rem); padding:.5em 1.1em;border-radius:100px;align-self:flex-start;letter-spacing:.08em;position:relative;z-index:2} .cts__cards{height:30%;display:grid;grid-template-columns:repeat(4,1fr);gap:3%;padding:3% 5%} .cts__card{background:#fff;border-radius:6px;box-shadow:0 6px 18px -10px rgba(22,35,58,.5); display:flex;flex-direction:column;justify-content:center;gap:14%;padding:6%} .cts__card i{display:block;width:34%;aspect-ratio:1;border-radius:4px;background:#6DB33F} .cts__card u{display:block;height:clamp(2px,.85cqw,4px);border-radius:2px;background:#D6DEE9;text-decoration:none} .l-code{background:rgba(5,5,7,.90);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); padding:6% 7%;font-family:var(--font-mono);font-size:clamp(.34rem,1.75cqw,.72rem);line-height:2;overflow:hidden} .l-code .cl{opacity:0;transform:translateX(-14px);white-space:pre; transition:opacity .4s var(--ease),transform .4s var(--ease)} .l-code.is-on .cl{opacity:1;transform:none} .l-code.is-on .cl:nth-child(1){transition-delay:.05s} .l-code.is-on .cl:nth-child(2){transition-delay:.12s} .l-code.is-on .cl:nth-child(3){transition-delay:.19s} .l-code.is-on .cl:nth-child(4){transition-delay:.26s} .l-code.is-on .cl:nth-child(5){transition-delay:.33s} .l-code.is-on .cl:nth-child(6){transition-delay:.40s} .l-code.is-on .cl:nth-child(7){transition-delay:.47s} .l-code.is-on .cl:nth-child(8){transition-delay:.54s} .tk-c{color:#4B5162}.tk-t{color:var(--red-neon)}.tk-a{color:var(--cyan)}.tk-v{color:var(--bone)}.tk-k{color:var(--violet)} .l-perf{background:rgba(5,5,7,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); display:grid;grid-template-columns:repeat(4,1fr);align-content:center;gap:4% 3%;padding:0 6%} .gauge{text-align:center;min-width:0} .gauge__ring{position:relative;width:min(100%,88px);margin-inline:auto} .gauge svg{width:100%;transform:rotate(-90deg)} .gauge circle{fill:none;stroke-width:5;stroke-linecap:round} .gauge .bg{stroke:rgba(242,239,233,.10)} .gauge .fg{stroke:var(--ok);stroke-dasharray:157;stroke-dashoffset:157; transition:stroke-dashoffset 1.4s var(--ease) .2s} .l-perf.is-on .gauge .fg{stroke-dashoffset:var(--off)} .gauge b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display); font-size:clamp(.6rem,3.2cqw,1.4rem);color:var(--bone)} .gauge span{display:block;font-family:var(--font-mono);font-size:clamp(.34rem,1.5cqw,.55rem); letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.9em} .l-proof{display:grid;place-items:center} .proofs{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;width:82%} .proof{font-family:var(--font-mono);font-size:clamp(.36rem,1.7cqw,.7rem);letter-spacing:.08em; background:rgba(5,5,7,.72);border:1px solid rgba(255,42,60,.45);color:var(--bone);padding:.6em 1.2em; border-radius:100px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); opacity:0;transform:translateY(12px) scale(.96); transition:opacity .5s var(--ease),transform .5s var(--ease)} .l-proof.is-on .proof{opacity:1;transform:none} .l-proof.is-on .proof:nth-child(2){transition-delay:.1s} .l-proof.is-on .proof:nth-child(3){transition-delay:.2s} .l-proof.is-on .proof:nth-child(4){transition-delay:.3s} /* ========================================================================== 10. PROJETS ========================================================================== */ .filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--sp-4)} .filter{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase; color:var(--muted);border:1px solid var(--line-strong);padding:.55rem 1.1rem;border-radius:100px; transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)} .filter:hover{color:var(--bone);border-color:var(--muted)} .filter[aria-pressed="true"]{color:#fff;background:var(--red);border-color:var(--red)} /* Mention secondaire dans un filtre : indique que ces projets ne sont pas une prestation vendue, sans alourdir le libellé principal. */ .filter__k{opacity:.6;font-size:.9em;margin-left:.45em;text-transform:none;letter-spacing:.06em} .filter__k::before{content:"· "} .grid-projets{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--sp-3)} .projet{position:relative;display:flex;flex-direction:column;border:1px solid var(--line); border-radius:var(--rad-l);overflow:hidden;background:var(--grad-surface); transition:border-color .5s var(--ease),transform .6s var(--ease),opacity .4s var(--ease)} .projet:hover{border-color:rgba(255,42,60,.4);transform:translateY(-4px)} .projet.is-hidden{display:none} .projet__spot{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s var(--ease); background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(255,42,60,.13),transparent 70%)} .projet:hover .projet__spot{opacity:1} .projet__cover{aspect-ratio:16/10;position:relative;overflow:hidden;border-bottom:1px solid var(--line); display:grid;place-items:center} .projet__cover svg{width:100%;height:100%} .projet__body{padding:var(--sp-3);display:grid;gap:.8rem;align-content:start;flex:1} .projet__meta{display:flex;flex-wrap:wrap;gap:.4rem} .tag{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase; color:var(--muted);border:1px solid var(--line-strong);padding:.28rem .65rem;border-radius:100px} .tag--live{color:var(--ok);border-color:rgba(74,222,128,.4)} .tag--wip{color:var(--warn);border-color:rgba(251,191,36,.4)} .projet h3{font-size:1.35rem} .projet p{font-size:.94rem;color:var(--muted)} .projet__link{margin-top:auto;padding:0 var(--sp-3) var(--sp-3);display:inline-flex;align-items:center; gap:.6rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase; color:var(--bone);transition:gap .3s var(--ease)} .projet__link span{border-bottom:1px solid var(--red);padding-bottom:.3rem} .projet__link span[aria-hidden]{border:0;padding:0} .projet:hover .projet__link{gap:1.1rem} .grid-empty{border:1px dashed var(--line-strong);border-radius:var(--rad-l);padding:var(--sp-5); text-align:center;display:none;gap:var(--sp-2);place-items:center;margin-top:var(--sp-3)} .grid-empty.is-on{display:grid} .slot{display:grid;place-items:center;text-align:center;gap:var(--sp-2);padding:var(--sp-6) var(--sp-3); border:1px dashed var(--line-strong);border-radius:var(--rad-xl);margin-top:var(--sp-4); transition:border-color .4s var(--ease),background .4s var(--ease)} .slot:hover{border-color:var(--red);background:rgba(255,42,60,.04)} .slot h3{font-size:clamp(1.3rem,2.4vw,2rem)} /* ========================================================================== 11. CHIFFRES ========================================================================== */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-4); padding-block:var(--sp-5);border-block:1px solid var(--line)} .stat b{display:block;font-family:var(--font-display);font-size:clamp(2.4rem,5.6vw,4.2rem); color:var(--bone);line-height:1;letter-spacing:-.04em;background:var(--grad-text); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .stat span{display:block;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.16em; text-transform:uppercase;color:var(--muted);margin-top:.8rem} /* ========================================================================== 12. MÉTHODE ========================================================================== */ .flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--sp-3);counter-reset:f} .flow__step{padding-top:var(--sp-3);border-top:1px solid var(--line-strong);position:relative} .flow__step::before{counter-increment:f;content:"0" counter(f);position:absolute;top:-.85rem;left:0; background:var(--void);padding-right:.7rem;font-family:var(--font-mono);font-size:var(--t-micro); color:var(--red);letter-spacing:.2em} .section--carbon .flow__step::before{background:var(--carbon)} .flow__step h3{font-size:1.12rem;margin-bottom:.5rem} .flow__step p{font-size:.92rem;color:var(--muted)} /* ========================================================================== 13. AVIS & NOTATION ========================================================================== */ .avis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-3)} .avis{border:1px solid var(--line);border-radius:var(--rad-l);padding:var(--sp-3);background:var(--grad-surface); display:grid;gap:var(--sp-2);align-content:start} .avis blockquote{margin:0;color:var(--bone-soft)} .avis figcaption{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.14em; text-transform:uppercase;color:var(--muted)} .stars{display:flex;gap:.2rem;color:var(--red)} .stars svg{width:16px;height:16px;fill:currentColor} .rate{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap} .rate button{width:38px;height:38px;display:grid;place-items:center;border-radius:50%; border:1px solid var(--line-strong);color:var(--muted); transition:color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease),background .25s var(--ease)} .rate button svg{width:18px;height:18px;fill:currentColor} .rate button:hover{transform:translateY(-2px)} .rate button.is-on{color:var(--red);border-color:rgba(255,42,60,.5);background:rgba(255,42,60,.08)} .rate__out{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.14em;color:var(--muted); margin-left:.6rem} /* ========================================================================== 14. FAQ (accordéon) ========================================================================== */ .faq{display:grid;gap:0;border-top:1px solid var(--line)} .faq__item{border-bottom:1px solid var(--line)} .faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3); padding:1.4rem 0;text-align:left;font-family:var(--font-display);font-size:clamp(1rem,1.7vw,1.25rem); color:var(--bone);letter-spacing:-.02em;transition:color .3s var(--ease)} .faq__q:hover{color:var(--red)} .faq__ico{width:20px;height:20px;flex:none;position:relative} .faq__ico::before,.faq__ico::after{content:"";position:absolute;background:var(--red); transition:transform .35s var(--ease)} .faq__ico::before{left:0;top:9px;width:20px;height:2px} .faq__ico::after{left:9px;top:0;width:2px;height:20px} .faq__q[aria-expanded="true"] .faq__ico::after{transform:scaleY(0)} .faq__a{overflow:hidden;height:0;transition:height .45s var(--ease)} .faq__a>div{padding-bottom:1.5rem;max-width:70ch;color:var(--muted)} .faq__a a{color:var(--bone);border-bottom:1px solid var(--red)} /* ========================================================================== 15. BANDE D'APPEL & CONTACT ========================================================================== */ .cta-band{position:relative;overflow:hidden;text-align:center;padding-block:var(--sp-6)} .cta-band__halo{position:absolute;left:50%;top:-60%;translate:-50% 0;width:min(1000px,120vw);aspect-ratio:1; border-radius:50%;background:radial-gradient(circle,rgba(255,42,60,.18),transparent 62%); filter:blur(40px);pointer-events:none} .cta-band__in{position:relative;z-index:2;display:grid;gap:var(--sp-3);justify-items:center} .cta-band h2{font-size:clamp(2rem,5vw,4rem)} .contact{position:relative;overflow:hidden} .contact__in{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);align-items:start; position:relative;z-index:2} .contact h1,.contact h2{font-size:clamp(2.2rem,5vw,4rem);letter-spacing:-.04em} .contact__ways{margin-top:var(--sp-4);display:grid;gap:var(--sp-2)} .way{display:flex;align-items:center;gap:1rem;padding-block:.9rem;border-bottom:1px solid var(--line); transition:padding-left .35s var(--ease),border-color .35s var(--ease)} .way:hover{padding-left:.6rem;border-color:var(--red)} .way__k{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase; color:var(--muted);width:5.5rem;flex:none} .way__v{color:var(--bone)} .form{display:grid;gap:var(--sp-2);background:var(--anthracite);border:1px solid var(--line); border-radius:var(--rad-l);padding:var(--sp-4)} .form__body{display:grid;gap:var(--sp-2)} .field{display:grid;gap:.5rem} .field label,.field .label{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.16em; text-transform:uppercase;color:var(--muted)} .field input,.field textarea,.field select{background:var(--void);border:1px solid var(--line-strong); color:var(--bone);border-radius:var(--rad-s);padding:.85rem 1rem;font-family:var(--font-body); font-size:.95rem;width:100%;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)} .field textarea{resize:vertical;min-height:120px} .field select{-webkit-appearance:none;appearance:none;padding-right:2.6rem;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23FF2A3C' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 1rem center;background-size:12px} .field select option{background:var(--anthracite);color:var(--bone)} .field input:hover,.field textarea:hover,.field select:hover{border-color:var(--muted)} .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--red); box-shadow:0 0 0 3px rgba(255,42,60,.16)} .field .err{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--red-neon);min-height:1rem} .field.is-bad input,.field.is-bad textarea{border-color:var(--red)} .form__note{font-size:.8rem;color:var(--muted)} .form__note a{color:var(--bone-soft);border-bottom:1px solid var(--line-strong)} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ========================================================================== 16. PIED DE PAGE ========================================================================== */ .footer{padding-block:var(--sp-5) var(--sp-3);border-top:1px solid var(--line);background:var(--carbon)} .footer__word{font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,14vw,12rem); line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px var(--line-strong); text-align:center;margin-bottom:var(--sp-5);user-select:none; transition:-webkit-text-stroke-color .6s var(--ease)} .footer__word:hover{-webkit-text-stroke-color:var(--red)} .footer__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-4); padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)} .footer__h{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.18em; text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:var(--sp-2)} .footer__col ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem} .footer__col a{font-size:.92rem;color:var(--bone-soft); transition:color .3s var(--ease),padding-left .3s var(--ease)} .footer__col a:hover{color:var(--red);padding-left:.3rem} .footer__pitch{font-size:.92rem;color:var(--muted);max-width:34ch;margin-top:var(--sp-2)} .footer__pitch a{color:var(--bone-soft);border-bottom:1px solid var(--line-strong)} .footer__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-2); padding-top:var(--sp-3);font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.14em; text-transform:uppercase;color:var(--muted)} .footer__row a:hover{color:var(--bone)} /* ========================================================================== 17. PAGES UTILITAIRES ========================================================================== */ .util{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:8rem 0 var(--sp-6); position:relative;overflow:hidden;text-align:center} .util__in{position:relative;z-index:2;display:grid;gap:var(--sp-3);justify-items:center; width:var(--shell);max-width:62ch} .util__code{font-family:var(--font-display);font-weight:800;font-size:clamp(5rem,22vw,14rem);line-height:.82; letter-spacing:-.06em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;margin:0} .util h1{font-size:clamp(1.8rem,4vw,3rem)} .util__links{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center;margin-top:var(--sp-2)} .check{width:74px;height:74px;border-radius:50%;border:1px solid rgba(74,222,128,.45);display:grid; place-items:center;color:var(--ok);background:rgba(74,222,128,.07)} .check svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round; stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .8s var(--ease) .2s forwards} @keyframes draw{to{stroke-dashoffset:0}} /* ========================================================================== 18. RÉVÉLATIONS AU DÉFILEMENT ========================================================================== */ .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .rv.is-in{opacity:1;transform:none} .rv[data-d="1"]{transition-delay:.08s} .rv[data-d="2"]{transition-delay:.16s} .rv[data-d="3"]{transition-delay:.24s} /* ========================================================================== 19. ADAPTATIF ========================================================================== */ @media (max-width:1080px){ .forge__in{grid-template-columns:1fr;gap:var(--sp-3)} .forge__rail{height:520vh} .chapters__idx{margin-bottom:var(--sp-2)} .chapters__stack{min-height:235px} .chapter h3{font-size:clamp(1.4rem,5vw,2rem)} .chapter p{font-size:.92rem} .steps{margin-top:var(--sp-3)} .mock{transform:none} .forge__stage:hover .mock{transform:none} .bento{grid-template-columns:1fr} .contact__in{grid-template-columns:1fr} .footer__cols{grid-template-columns:1fr 1fr} } @media (max-width:760px){ :root{--sp-6:4.5rem;--sp-7:5.5rem;--shell:min(1240px,100% - 2rem)} .nav__links{position:fixed;inset:0 0 auto 0;padding:6rem var(--sp-3) var(--sp-4); background:rgba(5,5,7,.96);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); flex-direction:column;align-items:flex-start;gap:1.3rem;transform:translateY(-102%);visibility:hidden; transition:transform .55s var(--ease),visibility .55s;border-bottom:1px solid var(--line)} .nav.is-open .nav__links{transform:none;visibility:visible} .nav__link{font-size:1rem;letter-spacing:.06em} .burger{display:flex} .hero{padding-top:6rem;padding-bottom:6.5rem} .hero--page{padding-top:8.5rem;padding-bottom:var(--sp-4)} .hero h1{max-width:100%} .hero__foot-in{flex-direction:column;align-items:flex-start;gap:.5rem} .chapters__stack{min-height:250px} .grid-projets{grid-template-columns:1fr} .footer__cols{grid-template-columns:1fr} .footer__row{flex-direction:column} .btn{width:100%} .hero__actions .btn,.util__links .btn,.cta-band .btn{width:auto;flex:1 1 auto;min-width:14rem} } /* Écrans courts (téléphone en paysage) : la scène doit tenir en entier */ /* Maquette très étroite : les grilles à quatre colonnes deviennent illisibles. */ @container (max-width:420px){ .perf__jauges{grid-template-columns:repeat(2,1fr);gap:4cqw 2cqw} .wire__row--4{grid-template-columns:repeat(2,1fr)} .strat__list li{grid-template-columns:minmax(0,1fr) 26% auto} } @media (max-width:1080px) and (max-height:620px){ .chapters__stack{min-height:200px} .chapter h3{font-size:1.25rem} .chapter p{font-size:.85rem;line-height:1.5} .forge__in{gap:var(--sp-2)} .mock{width:min(100%,calc(40svh * 16 / 11));margin-inline:auto} } @media (max-width:1080px) and (max-height:560px){ .chapters__stack{min-height:150px} .chapter p{display:none} .mock{width:min(100%,calc(36svh * 16 / 11))} } /* ========================================================================== 20. MOUVEMENT RÉDUIT ========================================================================== */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important} .rv{opacity:1;transform:none} .hero h1 .ln>span{transform:none} .hero__sub,.hero__actions{opacity:1;transform:none} .dust{display:none} } /* ========================================================================== 21. IMPRESSION ========================================================================== */ @media print{ .nav,.progress,.grain,.totop,.ticker,.forge,.hero__bg{display:none!important} body{background:#fff;color:#000} h1,h2,h3{color:#000} } /* ========================================================================== 22. TARIFS -------------------------------------------------------------------------- Cartes de prix alignées en grille. La carte mise en avant se distingue par sa bordure et son halo, jamais par sa taille : les lignes restent alignées d'une carte à l'autre, ce qui rend la comparaison immédiate. ========================================================================== */ .tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp-3); align-items:stretch} .tarif{position:relative;display:flex;flex-direction:column;gap:.9rem;padding:var(--sp-4) var(--sp-3); border:1px solid var(--line);border-radius:var(--rad-l);background:var(--grad-surface); transition:border-color .5s var(--ease),transform .6s var(--ease)} .tarif:hover{border-color:rgba(255,42,60,.4);transform:translateY(-4px)} .tarif--vedette{border-color:rgba(255,42,60,.45);box-shadow:0 0 0 1px rgba(255,42,60,.12), 0 40px 90px -50px rgba(255,42,60,.6)} .tarif__badge{position:absolute;top:-.75rem;left:var(--sp-3);background:var(--red);color:#fff; font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase; padding:.35rem .8rem;border-radius:100px;box-shadow:var(--glow-red)} .tarif h3{font-size:1.3rem} .tarif__pitch{font-size:.93rem;color:var(--muted)} .tarif__prix{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap; padding-top:.6rem;border-top:1px solid var(--line)} .tarif__prix b{font-family:var(--font-display);font-size:clamp(2rem,3.4vw,2.6rem);color:var(--bone); line-height:1;letter-spacing:-.03em;font-weight:800} .tarif__from{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.14em; text-transform:uppercase;color:var(--red);width:100%} .tarif__delai{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.14em; text-transform:uppercase;color:var(--muted)} .tarif__liste{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.9rem; color:var(--bone-soft);margin-bottom:var(--sp-2)} .tarif__liste li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start} .tarif__liste li::before{content:"";width:14px;height:14px;margin-top:.32em;border-radius:50%; background:rgba(255,42,60,.14); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3L10.5 4.8' stroke='%23FF2A3C' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:center} .tarif .btn{margin-top:auto} /* Frais qui reviennent à des tiers */ .frais{display:grid;gap:0;border-top:1px solid var(--line)} .frais__ligne{display:grid;grid-template-columns:1fr auto 2fr;gap:var(--sp-3);align-items:baseline; padding-block:1.1rem;border-bottom:1px solid var(--line); transition:padding-left .35s var(--ease),border-color .35s var(--ease)} .frais__ligne:hover{padding-left:.6rem;border-color:var(--red)} .frais__nom{color:var(--bone);font-family:var(--font-display);font-size:1.05rem;letter-spacing:-.02em} .frais__prix{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.1em;color:var(--red); white-space:nowrap} .frais__note{font-size:.9rem;color:var(--muted)} @media (max-width:760px){ .frais__ligne{grid-template-columns:1fr auto;gap:.4rem var(--sp-2)} .frais__note{grid-column:1 / -1} } /* ========================================================================== 23. PAGE « QUI JE SUIS » ========================================================================== */ .portrait{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);gap:var(--sp-5); align-items:start} .portrait__texte{min-width:0} .portrait__carte{position:sticky;top:6.5rem;border:1px solid var(--line);border-radius:var(--rad-l); padding:var(--sp-3);background:var(--grad-surface);display:grid;gap:var(--sp-3)} .portrait__k{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.18em; text-transform:uppercase;color:var(--muted)} .fiche{list-style:none;margin:0;padding:0;display:grid;gap:0} .fiche li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2); padding-block:.7rem;border-bottom:1px solid var(--line)} .fiche li:last-child{border-bottom:0} .fiche span{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.12em; text-transform:uppercase;color:var(--muted);flex:none} .fiche b{color:var(--bone);font-weight:500;text-align:right;font-size:.95rem} @media (max-width:1080px){ .portrait{grid-template-columns:1fr;gap:var(--sp-4)} .portrait__carte{position:static} } /* ========================================================================== 24. MENTION DISCRÈTE (boutique, hors catalogue) ========================================================================== */ .aparte{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-3);align-items:start; border:1px solid var(--line);border-left:2px solid var(--red);border-radius:var(--rad-m); padding:var(--sp-3);background:rgba(242,239,233,.02);max-width:78ch} .aparte__ico{width:26px;height:26px;flex:none;margin-top:.2rem} .aparte__ico path,.aparte__ico rect,.aparte__ico circle{stroke:var(--red);stroke-width:1.4;fill:none; stroke-linecap:round;stroke-linejoin:round} .aparte p{font-size:.95rem;color:var(--muted)} .aparte b{color:var(--bone);font-weight:500} .aparte a{color:var(--bone);border-bottom:1px solid var(--red)} @media (max-width:560px){.aparte{grid-template-columns:1fr}} /* ========================================================================== 25. TOUCHES DE VIE -------------------------------------------------------------------------- Micro-détails qui rendent la lecture moins statique. Tout passe par des transformations et des opacités : aucun coût mesurable au chargement. ========================================================================== */ /* Les titres de section se soulignent progressivement quand ils arrivent */ .head h2{position:relative;display:inline-block} .head h2::after{content:"";position:absolute;left:0;bottom:-.35rem;height:2px;width:100%; background:linear-gradient(90deg,var(--red),transparent);transform:scaleX(0);transform-origin:0 50%; transition:transform 1.1s var(--ease) .25s} .rv.is-in h2::after,.is-in .head h2::after{transform:scaleX(1)} /* Les cartes s'inclinent très légèrement vers le pointeur */ .pole,.tarif,.projet{will-change:transform} /* Un point qui bat doucement à côté des mentions « en ligne » */ .tag--live{position:relative} .tag--live::after{content:"";position:absolute;left:.5rem;top:50%;translate:0 -50%; width:5px;height:5px;border-radius:50%;background:var(--ok);opacity:0; animation:pulse 2.6s var(--ease-io) infinite} @keyframes pulse{0%,100%{opacity:0;transform:scale(.6)}45%{opacity:.55;transform:scale(2.6)}} /* Le chiffre des étapes du chantier change avec un léger fondu */ .chapters__idx b{display:inline-block;transition:transform .4s var(--ease),color .4s var(--ease)} /* Les liens « en savoir plus » gagnent une flèche qui avance */ .pole__more span[aria-hidden]{transition:transform .35s var(--ease)} .pole__more:hover span[aria-hidden]{transform:translateX(4px)} /* Le fond du héros bouge imperceptiblement, comme une respiration */ /* Le halo est déplacé par la parallaxe (transform en ligne, posé par le JS) : la respiration passe donc par l'opacité et le flou, jamais par transform, sinon les deux se contrediraient. */ @media (prefers-reduced-motion:no-preference){ .hero__halo{animation:respire 14s var(--ease-io) infinite} .hero__halo--2{animation-duration:19s;animation-direction:reverse} } @keyframes respire{0%,100%{opacity:1;filter:blur(24px)}50%{opacity:.78;filter:blur(34px)}} /* La signature du logo se trace au survol */ .mark__sig path{stroke-dasharray:60;stroke-dashoffset:0;transition:stroke-dashoffset .8s var(--ease)} .mark:hover .mark__sig path{stroke-dashoffset:60}