/* la variable, avec ses trois axes : une seule requete pour toutes les graisses */ /* polices de secours aux metriques calees. Les pourcentages sont mesures, pas estimes : ils viennent d'un canvas qui compare la largeur de la meme phrase. */ @font-face{font-family:'Bricolage secours'; src:local('Arial'),local('Helvetica'),local('Liberation Sans'); size-adjust:90.90%} @font-face{font-family:'Satoshi secours'; src:local('Arial'),local('Helvetica'),local('Liberation Sans'); size-adjust:96.12%} @font-face{ font-family:'Bricolage Grotesque'; src:url('/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2-variations'); font-weight:200 800; font-stretch:75% 100%; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ============ TOKENS (DESIGN.md v3 — CLAIR façon Morpheon) ============ */ :root{ /* Base — blanc chaud dominant + sombre ponctuel */ --bg:#FCFCFA; --bg-alt:#F3F2EE; --dark:#0C0B0A; --surface:#FFFFFF; --surface-2:#F5F4F0; /* Encre quasi-noire */ --ink:#14130F; --ink-soft:#5E5A52; /* Or — signature, version FONCÉE lisible sur blanc */ --gold:#8A6043; --gold-deep:#6E4B33; --grad:linear-gradient(160deg,#A57450,#6E4B33); /* Lignes noires discrètes + overlay photos */ --line:rgba(20,19,15,.11); --line-2:rgba(20,19,15,.20); --overlay:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.5)); /* Système */ --accent:var(--gold); /* Police = Apple SF Pro (systeme) + Inter fallback. Une seule famille. */ --font-display:'Bricolage Grotesque','Bricolage secours',Arial,sans-serif; --font-text:'Satoshi','Satoshi secours',Arial,sans-serif; --maxw:1200px; --r:18px; --pill:980px; --ease:cubic-bezier(.16,1,.3,1); --ease-out:cubic-bezier(.32,.72,0,1); /* courbes nommees : une pour ce qui arrive, une pour ce qui se deplace */ --ease-out-quint:cubic-bezier(.23,1,.32,1); --ease-in-out-cubic:cubic-bezier(.645,.045,.355,1); } *{box-sizing:border-box;margin:0;padding:0} html{overflow-x:clip} body{ font-family:var(--font-text); background:var(--bg);color:var(--ink);line-height:1.5; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } a{color:inherit;text-decoration:none} ::selection{background:rgba(138,96,67,.22)} .mono{font-family:'Geist Mono',ui-monospace,monospace} .gold{color:var(--gold)} /* v3 : kickers/eyebrows supprimés partout (demande Ali) + effets sombres retirés (blanc propre Morpheon) */ .eyebrow{display:none!important} .aura,.bgorbs,.grain,.bgfx{display:none!important} /* Focus clavier visible (a11y) */ a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px} /* ========================================================================== LA SCENE : vingt corvees, un O qui les aspire. Les jetons sont en HTML et pas en SVG : chacun fait la largeur de son texte et la mise en page se debrouille seule. En SVG il aurait fallu deviner chaque largeur au nombre de lettres, et ca casse au premier mot long. ========================================================================== */ .sys-scene{margin-top:clamp(46px,6vh,78px)} .sc-zone{margin-top:20px;display:grid; grid-template-columns:minmax(0,1fr) clamp(190px,20vw,272px); gap:clamp(22px,4vw,58px);align-items:center;min-height:clamp(280px,34vh,360px)} .sc-chips{display:flex;flex-wrap:wrap;gap:9px;align-content:center} .sc-ch{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:12px; border:1px solid rgba(244,241,236,.13);background:rgba(244,241,236,.042); font-size:clamp(12.5px,.98vw,14.5px);font-weight:500;color:rgba(244,241,236,.87); white-space:nowrap;will-change:transform} .sc-ch i{width:5px;height:5px;border-radius:50%;background:var(--bronze);flex:none} .sc-o{position:relative;display:grid;place-items:center;justify-self:center} .sc-svg{width:100%;height:auto;display:block;overflow:visible} .sc-mark{transform-box:fill-box;transform-origin:center} .sc-fait{position:absolute;bottom:-4px;font-size:11.5px;letter-spacing:3.2px; text-transform:uppercase;color:#E3BE99;opacity:0;white-space:nowrap} .sc-num{margin-top:20px;font-size:12.5px;letter-spacing:3px;text-transform:uppercase; color:#E3BE99} @media(max-width:760px){ /* sur telephone on ne joue pas l'aspiration : les jetons restent affiches, ils remplacent le bandeau qui existait avant et disent la meme chose. */ .sys-scene{display:block!important} .sc-zone{grid-template-columns:1fr;min-height:0} .sc-o,.sc-num{display:none} .sc-ch{font-size:12.5px;padding:9px 14px} } @media(prefers-reduced-motion:reduce){ .sc-o{display:none} } .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} .skip{position:fixed;top:-60px;left:16px;z-index:200;background:var(--surface);color:var(--ink); padding:10px 16px;border-radius:10px;border:1px solid var(--line-2);transition:top .25s var(--ease)} .skip:focus{top:16px} /* Container */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;width:100%} /* Section standard (rythme §3 : ≥128px d'air) */ .sec{padding:128px 0;position:relative} .sec .head{margin-bottom:52px} .sec .head .eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px} .sec .head .eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.7} @media(max-width:760px){.sec{padding:84px 0}.sec .head{margin-bottom:38px}} /* ============ TYPO (échelle §3) ============ */ h1,h2,h3{font-family:var(--font-display)} h1{font-size:clamp(38px,4.8vw,64px);font-weight:700;letter-spacing:-.03em;line-height:1.04} h2{font-size:clamp(28px,3.2vw,44px);font-weight:700;letter-spacing:-.02em;line-height:1.08} h3{font-size:clamp(19px,1.6vw,23px);font-weight:600;letter-spacing:-.01em} .eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);font-weight:500} .lead{font-size:clamp(17px,1.4vw,20px);color:var(--ink-soft);max-width:52ch;line-height:1.55} /* ============ TRAITS DORÉS (déco animée gardée — discrète, §9 exception Ali) ============ */ .aura{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .aura .ring{position:absolute;border-radius:50%;border:1px solid var(--gold);opacity:.11; left:50%;top:38%;transform:translate(-50%,-50%)} .aura .r1{width:520px;height:520px} .aura .r2{width:840px;height:840px;opacity:.08} .aura .r3{width:1200px;height:1200px;opacity:.055} .aura .beam{position:absolute;left:50%;top:38%;width:1px;height:680px; background:linear-gradient(180deg,transparent,rgba(210,162,117,.28),transparent); transform-origin:top center} .aura .b1{transform:translate(-50%,-50%) rotate(24deg)} .aura .b2{transform:translate(-50%,-50%) rotate(-38deg);opacity:.6} .anim-ready .aura .ring{animation:breathe 14s var(--ease) infinite alternate} .anim-ready .aura .r2{animation-duration:19s} .anim-ready .aura .r3{animation-duration:24s} @keyframes breathe{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.06)}} /* Halo doux de fond (radial, statique — pas un glow de card) */ .bgfx{position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(82% 58% at 50% 0%,rgba(210,162,117,.11),transparent 62%), radial-gradient(64% 52% at 50% 100%,rgba(210,162,117,.06),transparent 56%), var(--bg)} /* Effets en fond (demande Ali — accentués) — halos or qui dérivent lentement */ .bgorbs{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden} .bgorbs span{position:absolute;width:66vw;height:66vw;border-radius:50%;filter:blur(30px);will-change:transform} .bgorbs .o1{top:-16vw;left:-12vw;background:radial-gradient(circle,rgba(210,162,117,.16),transparent 64%)} .bgorbs .o2{bottom:-20vw;right:-14vw;background:radial-gradient(circle,rgba(210,162,117,.11),transparent 64%)} .bgorbs .o3{top:34%;left:44%;width:44vw;height:44vw;background:radial-gradient(circle,rgba(210,162,117,.08),transparent 66%)} .anim-ready .bgorbs .o1{animation:drift1 42s ease-in-out infinite alternate} .anim-ready .bgorbs .o2{animation:drift2 54s ease-in-out infinite alternate} .anim-ready .bgorbs .o3{animation:drift3 66s ease-in-out infinite alternate} @keyframes drift1{to{transform:translate(16vw,11vw)}} @keyframes drift2{to{transform:translate(-14vw,-9vw)}} @keyframes drift3{to{transform:translate(-12vw,10vw) scale(1.15)}} /* Grain premium — texture fixe, casse le côté "flat digital" */ .grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.08; 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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* ============ NAV frosted 48px (hairline au scroll) ============ */ header{position:fixed;top:16px;left:0;right:0;z-index:100;display:flex;justify-content:center; padding:0 16px;pointer-events:none;transition:opacity .45s var(--ease),transform .5s var(--ease-out)} .nav-open header{opacity:0;transform:translateY(-10px);pointer-events:none} .nav{pointer-events:auto;display:flex;align-items:center;gap:26px;height:48px;padding:0 8px 0 18px; background:rgba(255,255,255,.74);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4); border:1px solid var(--line);border-radius:var(--pill); box-shadow:0 8px 30px -14px rgba(20,19,15,.18);transition:border-color .4s var(--ease),background .4s var(--ease)} .scrolled .nav{border-color:var(--line-2);background:rgba(255,255,255,.92)} .brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;font-size:18px;color:var(--gold-deep)} .brand svg{width:22px;height:22px} .nav-links{display:flex;gap:24px} .nav-links a{font-size:14px;color:var(--ink-soft);transition:color .3s var(--ease)} .nav-links a:hover{color:var(--ink)} .nav-cta{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 6px 0 16px;border-radius:var(--pill); background:var(--ink);color:var(--bg);font-weight:600;font-size:13.5px; transition:transform .35s var(--ease-out),background .35s var(--ease)} .nav-cta:hover{background:var(--gold)} .nav-cta:hover{transform:translateY(-1px)} .nav-cta:active{transform:scale(.98)} .nav-cta .ic{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(26,20,7,.16)} .nav-cta .ic svg{width:13px;height:13px} /* Burger → morph X */ .nav-burg{position:relative;display:grid;place-items:center;width:40px;height:36px;flex:none; border:0;border-radius:var(--pill);background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent; transition:background .3s var(--ease)} .nav-burg:hover{background:rgba(20,19,15,.06)} .nav-burg span{position:absolute;left:11px;width:18px;height:2px;border-radius:2px;background:var(--ink); transition:transform .5s var(--ease-out),opacity .3s var(--ease)} .nav-burg span:nth-child(1){transform:translateY(-4px)} .nav-burg span:nth-child(2){transform:translateY(4px)} .nav-open .nav-burg span:nth-child(1){transform:translateY(0) rotate(45deg)} .nav-open .nav-burg span:nth-child(2){transform:translateY(0) rotate(-45deg)} /* ============ TIROIR de navigation (drawer haut de gamme) ============ */ .drawer-back{position:fixed;inset:0;z-index:90;background:rgba(10,9,7,.42); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); opacity:0;visibility:hidden;transition:opacity .55s var(--ease),visibility .55s var(--ease)} .nav-open .drawer-back{opacity:1;visibility:visible} /* Liquid glass — panneau sobre, translucide, bords lumineux */ .drawer{position:fixed;top:50%;right:16px;z-index:95;width:min(376px,90vw);max-height:calc(100dvh - 32px); display:flex;flex-direction:column;padding:16px 26px 18px;color:var(--ink);border-radius:26px; background:linear-gradient(155deg,rgba(252,252,250,.62),rgba(245,244,240,.44)); backdrop-filter:blur(38px) saturate(1.9);-webkit-backdrop-filter:blur(38px) saturate(1.9); border:1px solid rgba(255,255,255,.5); box-shadow:0 44px 110px -44px rgba(20,19,15,.5),inset 1.5px 1.5px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.1); transform:translate(calc(100% + 26px),-50%);transition:transform .64s var(--ease-out);will-change:transform;overflow-y:auto} @media(max-width:520px){.drawer{right:10px;border-radius:22px;padding:14px 22px 16px}} .nav-open .drawer{transform:translate(0,-50%)} .drawer-top{display:flex;align-items:center;justify-content:space-between;padding:2px 0 0} .drawer-brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;font-size:17px;color:var(--gold-deep)} .drawer-brand svg{width:22px;height:22px} .drawer-x{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(20,19,15,.16);border-radius:50%; background:rgba(255,255,255,.34);color:var(--ink);cursor:pointer; transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease-out)} .drawer-x:hover{border-color:var(--gold);background:rgba(210,162,117,.16);color:var(--gold-deep)} .drawer-x:active{transform:scale(.94)} .drawer-x svg{width:16px;height:16px} .drawer-nav{display:flex;flex-direction:column;gap:2px;margin:10px 0 0} .dlink{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;margin:0 -13px;border-radius:16px; color:var(--ink);opacity:0;transform:translateY(15px); transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),background .3s var(--ease)} .dlink .dl-main{display:flex;flex-direction:column;gap:3px;min-width:0} .dlink .dl-title{font-family:var(--font-display);font-size:clamp(20px,3.3vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.04;transition:color .3s var(--ease)} .dlink .dl-sub{font-size:12.5px;font-weight:500;color:var(--ink-soft);letter-spacing:-.005em} .dlink .darr{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(210,162,117,.16);color:var(--gold-deep); opacity:0;transform:translateX(-8px) scale(.85);transition:opacity .35s var(--ease),transform .45s var(--ease-out)} .dlink .darr svg{width:17px;height:17px} .dlink:hover{background:rgba(210,162,117,.13)} .dlink:hover .dl-title{color:var(--gold-deep)} .dlink:hover .darr{opacity:1;transform:translateX(0) scale(1)} .nav-open .dlink{opacity:1;transform:translateY(0)} .nav-open .dlink:nth-child(1){transition-delay:.1s} .nav-open .dlink:nth-child(2){transition-delay:.15s} .nav-open .dlink:nth-child(3){transition-delay:.2s} .nav-open .dlink:nth-child(4){transition-delay:.25s} .nav-open .dlink:nth-child(5){transition-delay:.3s} .nav-open .dlink:nth-child(6){transition-delay:.35s} .nav-open .dlink:nth-child(7){transition-delay:.4s} .dlink:hover{transition-delay:0s} @media(max-width:760px){.nav-cta{display:none}} @media(prefers-reduced-motion:reduce){ .drawer{transition:transform .01s} .dlink{transition:none;opacity:1;transform:none} .nav-burg span{transition:none} } /* ============ HERO — SOMBRE façon Morpheon + fond « or liquide » (flow field) ============ */ .hero{position:relative;min-height:100dvh;display:flex;align-items:center;padding:120px 0 80px;overflow:hidden; background:var(--dark);color:#F6F4EF} .hero-inner{position:relative;z-index:2} .hero-kick{display:inline-block;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:#D2A275;font-weight:600;margin-bottom:28px} /* 23ch et pas 19 : l'accroche est passee de 51 a 59 signes et tombait sur trois lignes. Un titre de hero sur trois lignes est une erreur de corps, jamais une erreur de texte. */ .hero-h1{max-width:27ch;font-size:clamp(40px,5.4vw,76px);font-weight:700;letter-spacing:-.03em;line-height:1.03;color:#F8F6F1} .hero-h1 .gold{color:#D2A275} .hero-cta{display:inline-flex;align-items:center;gap:9px;vertical-align:middle;margin:6px 0 0 20px; font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--dark);background:#D2A275; padding:10px 8px 10px 20px;border-radius:var(--pill);transition:transform .35s var(--ease-out),background .35s var(--ease);white-space:nowrap} .hero-cta:hover{transform:translateY(-2px);background:#E4C4A0} .hero-cta .ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(12,11,10,.16)} .hero-cta .ic svg{width:15px;height:15px} /* la maxime porte le poids : c'est elle qu'on retient et qu'on repete */ .hero-sub{margin-top:26px;max-width:44ch;font-size:clamp(18px,1.85vw,25px);line-height:1.4; font-weight:500;color:var(--ink)} /* la presentation de l'activite vient apres, en retrait : on la lit une fois qu'on a deja accroche, jamais avant */ .hero-qui{margin-top:16px;max-width:56ch;font-size:clamp(14px,1.25vw,16px);line-height:1.55; color:rgba(246,244,239,.62)} .hero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:34px} /* le CTA etait inline DANS le h1, d'ou son decalage a gauche : il devient inutile ici */ .hero-acts .hero-cta{margin:0} /* ============ LES BOUTONS, REPRIS ============ Trois defauts sur l'ancienne version : les deux boutons du hero n'avaient pas la meme hauteur, l'or etait un aplat mort, et la pastille de l'eleche n'avait aucun relief. Ici les deux font 56px, l'or a un degrade et un liseré clair en haut qui simule la lumiere qui frappe une surface bombee, et la fleche vit dans son propre rond. Meme famille pour celui de la barre du haut, en plus petit. */ .hero-acts{gap:16px} .hero-cta,.hero-book{height:56px;box-sizing:border-box} .hero-cta{gap:12px;padding:0 8px 0 26px;font-size:15.5px;font-weight:600;letter-spacing:-.005em; color:#0B0B0C;border-radius:var(--pill);white-space:nowrap; background:linear-gradient(178deg,#EACBA6 0%,#D2A275 44%,#B08356 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(120,90,20,.22), 0 12px 30px -14px rgba(210,162,117,.6); transition:transform .2s var(--ease-out-quint),box-shadow .2s var(--ease-out-quint), filter .2s var(--ease-out-quint)} .hero-cta:hover{transform:translateY(-2px);filter:brightness(1.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(120,90,20,.22), 0 18px 40px -16px rgba(210,162,117,.75)} .hero-cta:active{transform:translateY(0) scale(.985)} /* la fleche dans son propre rond : c'est ce petit emboitement qui separe un bouton dessine d'un bouton par defaut */ .hero-cta .ic{width:38px;height:38px;background:rgba(11,11,12,.14); transition:transform .2s var(--ease-out-quint),background .2s var(--ease-out-quint)} .hero-cta:hover .ic{transform:translateX(3px);background:rgba(11,11,12,.2)} .hero-cta .ic svg{width:16px;height:16px} .hero-book{gap:14px;padding:0 24px 0 9px; box-shadow:inset 0 1px 0 rgba(243,240,233,.06); transition:transform .2s var(--ease-out-quint),border-color .2s var(--ease-out-quint), background .2s var(--ease-out-quint)} .hero-book:hover{transform:translateY(-2px)} .hb-av{width:40px;height:40px;background:rgba(210,162,117,.13); box-shadow:inset 0 0 0 1px rgba(210,162,117,.22); transition:transform .3s var(--ease-out-quint)} .hero-book:hover .hb-av{transform:rotate(-14deg)} .hb-av svg{width:22px;height:22px} .hb-txt b{font-size:15px} .nav-cta{height:38px;padding:0 6px 0 18px;gap:10px;font-size:14px;font-weight:600; color:#0B0B0C;border-radius:var(--pill); background:linear-gradient(178deg,#EACBA6,#D2A275 46%,#B08356); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 20px -12px rgba(210,162,117,.7); transition:transform .2s var(--ease-out-quint),filter .2s var(--ease-out-quint)} .nav-cta:hover{background:linear-gradient(178deg,#EACBA6,#D2A275 46%,#B08356); filter:brightness(1.07);transform:translateY(-1px)} .nav-cta:active{transform:scale(.98)} .nav-cta .ic{width:26px;height:26px;background:rgba(11,11,12,.14); transition:transform .2s var(--ease-out-quint)} .nav-cta:hover .ic{transform:translateX(2px)} .clair .hero-book{border-color:rgba(20,19,15,.16);background:rgba(20,19,15,.03)} @media(max-width:560px){ .hero-cta,.hero-book{height:54px;width:100%} .hero-cta{padding:0 8px 0 22px;font-size:15px} } /* ============ MARQUE — le vrai mark (deux anneaux) + lockup Jost ============ L'ancien logo du header etait deux cercles concentriques generiques, sans rapport avec la marque validee. Ici c'est le mark reel : deux anneaux elliptiques, le second tourne de -5deg, en fill-rule evenodd (un ne peut pas percer un trou). */ /* Le lockup est EMPILE, comme l'identite validee : OLYMPUS, et AGENCY dessous. En ligne, les trois elements se lisaient comme trois objets poses cote a cote, jamais comme un bloc. Empile, le mark a enfin une masse a laquelle s'aligner. */ .brand{display:flex;align-items:center;gap:11px;font-family:'Jost',var(--font-display);color:var(--ink)} /* 31px et pas 25 : les anneaux ont une epaisseur variable, tres fine en haut et en bas (14,8 unites sur 512). Sous 30px ce filet passe sous le pixel, s'antialiase en gris et les deux anneaux fusionnent en gribouillis. C'est le diagnostic trait-vs-masse. */ .brand svg{width:31px;height:31px;color:var(--gold);flex:none;shape-rendering:geometricPrecision} .brand .bw{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px} .brand .bo,.drawer-brand .bo{text-transform:uppercase} /* meme compensation sur OLYMPUS : lui aussi traine une gouttiere apres son S. Sans elle, ses lettres tombent un poil a gauche de l'axe et AGENCY paraissait pousse a droite alors que les deux boites etaient pourtant centrees au pixel. */ .brand .bo{font-size:15px;font-weight:500;letter-spacing:.17em;line-height:1;padding-left:.17em} /* AGENCY centre sous OLYMPUS. L'interlettrage large laisse une gouttiere fantome APRES la derniere lettre : un centrage brut la compte et decale donc les lettres visibles vers la gauche, de la moitie du tracking. Le padding-left la compense, et les deux mots tombent optiquement sur le meme axe. */ .brand .ba{font-size:8.5px;font-weight:400;letter-spacing:.42em;line-height:1;color:var(--gold); text-transform:uppercase;padding-left:.42em} .drawer-brand{display:flex;align-items:center;gap:11px;font-family:'Jost',var(--font-display);color:var(--ink)} .drawer-brand svg{width:30px;height:30px;color:var(--gold);flex:none;shape-rendering:geometricPrecision} .drawer-brand .bo{font-size:15px;font-weight:500;letter-spacing:.17em;line-height:1} /* ============ SYSTEMES INSTALLES — double bezel ============ */ #systemes .head .lede{margin-top:20px;max-width:62ch;font-size:clamp(16px,1.5vw,18.5px);line-height:1.62;color:var(--ink-soft)} /* bento asymetrique : quatre items, quatre cellules, aucune vide. Quatre cartes identiques en 2x2, c'est la meme fadeur que trois colonnes egales. */ .sys-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,1.6vw,22px)} .sys-shell:nth-child(1),.sys-shell:nth-child(4){grid-column:span 4} .sys-shell:nth-child(2),.sys-shell:nth-child(3){grid-column:span 2} /* coque exterieure : le plateau. Coeur interieur : la plaque posee dedans. Rayons concentriques : 18 (le token --r) + 7 de padding = 25 dehors. */ .sys-shell{background:rgba(20,19,15,.035);border:1px solid var(--line);border-radius:25px;padding:7px; transition:transform .6s var(--ease-out),border-color .5s var(--ease),background .5s var(--ease)} .sys-shell:hover{transform:translateY(-4px);border-color:var(--line-2);background:rgba(138,96,67,.07)} .sys-core{height:100%;background:var(--surface);border-radius:var(--r);padding:clamp(26px,2.8vw,38px); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 34px -22px rgba(70,54,18,.5)} /* la cellule phare porte un fond teinte : une grille de cartes blanches sur blanc n'a aucun relief, quelle que soit la qualite du reste */ .sys-shell.is-lead .sys-core{background:linear-gradient(152deg,rgba(138,96,67,.12),rgba(138,96,67,.03) 62%,var(--surface))} .sys-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:13px; background:rgba(138,96,67,.12);color:var(--gold);margin-bottom:22px} .sys-ico svg{width:22px;height:22px} .sys-core h3{font-size:clamp(19px,1.8vw,23px);font-weight:600;letter-spacing:-.02em;line-height:1.2} .sys-core p{margin-top:12px;max-width:46ch;font-size:15.5px;line-height:1.6;color:var(--ink-soft)} @media(max-width:820px){ .sys-grid{grid-template-columns:1fr} .sys-shell:nth-child(n){grid-column:auto} } /* Fond hero « or liquide » — flow field canvas plein écran + double nappe d'aurore */ .hero-fx{position:absolute;inset:0;z-index:0;pointer-events:none;width:100%;height:100%;display:block} .hero-aura{position:absolute;inset:0;z-index:1;pointer-events:none; background: radial-gradient(38% 46% at 72% 40%,rgba(210,162,117,.22),rgba(210,162,117,.05) 52%,transparent 74%), radial-gradient(34% 40% at 24% 82%,rgba(138,96,67,.12),transparent 70%); mix-blend-mode:screen} .anim-ready .hero-aura{animation:heroAura 8.5s ease-in-out infinite alternate} @keyframes heroAura{from{opacity:.6;transform:scale(1) translate3d(0,0,0)}to{opacity:1;transform:scale(1.08) translate3d(-1.6%,-1%,0)}} /* voile gauche (lisibilité du texte) + vignette */ .hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(90deg,var(--dark) 2%,rgba(12,11,10,.52) 30%,transparent 58%), radial-gradient(120% 120% at 50% 50%,transparent 58%,rgba(6,5,4,.55))} @media(max-width:820px){ .hero-aura{background:radial-gradient(52% 34% at 60% 26%,rgba(210,162,117,.2),transparent 72%)} .hero::before{background:linear-gradient(180deg,rgba(12,11,10,.35),transparent 40%,var(--dark) 92%)} } @media(prefers-reduced-motion:reduce){.anim-ready .hero-aura{animation:none}} /* ============ SOL NOIR PROFOND ============ Ali veut du noir quasi absolu avec des effets. Le piege connu, c'est que noir plus particules dorees qui derivent est LA signature d'un site genere. Donc on garde le noir et on change la nature des effets : chacun a une raison d'etre la. - le filigrane est la geometrie de SA marque, pas une texture generique ; - la grille technique dit "infrastructure", ce qu'il vend, et se dissout en s'eloignant ; - le faisceau vient d'UNE source fixe, comme un projecteur de studio. Une lueur qui pulse toute seule est un effet ; une source fixe est un eclairage. #050506 et pas #000 : le noir pur ecrase le grain et le degrade, tout devient plat. */ /* z-index 61 : le grain global de la page est un calque FIXE a z-60 pose par-dessus tout, gris moyen a 8%. Sur les sections claires c'est invisible, sur un noir profond il ajoute ~15 de luminance et #030304 remonte a #181614. Le hero passe au-dessus de ce calque et porte son propre grain. La nav (z-100) et le tiroir restent devant. */ .hero{background:#030304;z-index:61} .hero-fx{display:none} .hero-aura{background:none} .hero-geo{position:absolute;z-index:0;pointer-events:none; top:50%;left:74%;width:min(128vh,1180px);height:min(128vh,1180px);translate:-50% -50%; opacity:.30;overflow:visible} .anim-ready .hero-geo{animation:geoTourne 78s linear infinite} @keyframes geoTourne{to{rotate:360deg}} .hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(rgba(210,162,117,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(210,162,117,.06) 1px,transparent 1px); background-size:92px 92px; /* la grille se dissout en s'eloignant de la source : sinon c'est un quadrillage pose dessus */ -webkit-mask-image:radial-gradient(74% 64% at 70% 34%,#000 0%,rgba(0,0,0,.35) 46%,transparent 78%); mask-image:radial-gradient(74% 64% at 70% 34%,#000 0%,rgba(0,0,0,.35) 46%,transparent 78%)} /* ===== LES AGENTS ===== Chaque O tourne a sa propre vitesse et respire a son propre rythme : c'est le desynchronisation qui fait "ils travaillent". Si tout bat ensemble, ca devient un motif qui clignote. Uniquement rotate / scale / opacity, donc zero recalcul de mise en page pendant le scroll. */ .agents{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .ag{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s); translate:-50% -50%;color:#B08356;opacity:var(--o);overflow:visible} .anim-ready .ag{ animation:agTourne var(--r) linear infinite, agRespire var(--b) ease-in-out infinite alternate; animation-delay:0s,var(--d)} @keyframes agTourne{to{rotate:360deg}} /* plancher a 62% et pas 40% : en dessous, les plus petits disparaissent completement pendant la moitie de leur cycle et le fond a l'air de clignoter au lieu de respirer */ @keyframes agRespire{from{opacity:calc(var(--o) * .62);scale:.90}to{opacity:var(--o);scale:1.06}} /* la tache qui part : le petit point qui s'echappe sur le cote toutes les quelques secondes. C'est ce detail qui fait lire "il vient de faire quelque chose". */ .ag::after{content:"";position:absolute;top:50%;right:-4px;width:4px;height:4px; border-radius:50%;background:#D2A275;opacity:0} .anim-ready .ag.actif::after{animation:agTache 6.4s ease-out infinite var(--d)} @keyframes agTache{ 0%,68%{opacity:0;translate:0 -50%} 74%{opacity:.85;translate:2px -50%} 100%{opacity:0;translate:26px -50%}} @media(max-width:820px){ .ag{opacity:calc(var(--o) * .7)} } @media(prefers-reduced-motion:reduce){ .anim-ready .ag,.anim-ready .ag.actif::after{animation:none} } /* faisceau : pas de filter blur, ca repeint en continu pendant le scroll. Des paliers de gradient rapproches donnent le meme fondu pour zero cout GPU. */ .hero-beam{position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(38% 30% at 82% 4%,rgba(210,162,117,.20),rgba(210,162,117,.07) 42%,transparent 72%), linear-gradient(198deg,rgba(210,162,117,.09) 0%,rgba(210,162,117,.035) 22%,transparent 48%)} /* voile de lisibilite retinte pour le noir, plus grain, plus vignette : le grain est ce qui donne de la matiere au noir. Sans lui, un aplat noir reste un aplat. */ .hero::before{background: linear-gradient(90deg,#030304 1%,rgba(3,3,4,.66) 34%,transparent 62%), radial-gradient(118% 112% at 62% 32%,transparent 34%,rgba(0,0,0,.86))} /* soft-light, ni normal ni overlay. Le bruit de feTurbulence sort en RGBA avec un alpha lui aussi aleatoire : pose en normal il eclaircit, pose en overlay il MULTIPLIE la base (overlay sur base sombre = 2 x base x calque), et #030304 partait a #181614. Soft-light module sans lever le noir. */ .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; opacity:.62;mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")} @media(max-width:820px){ .hero-geo{left:64%;opacity:.22} .hero-grid{background-size:66px 66px} .hero::before{background:linear-gradient(180deg,rgba(5,5,6,.55),transparent 38%,#050506 95%)} } @media(prefers-reduced-motion:reduce){.anim-ready .hero-geo{animation:none}} /* ============ CIEL ÉTOILÉ + BASCULE SOMBRE ============ Un ciel etoile suppose une nuit. Des O dores sur les sections blanches ne font pas des etoiles, ils font de la salissure. Donc toute la page bascule en sombre, ce qui regle au passage l'incoherence qu'on trainait : un hero noir greffe sur un corps clair, le visiteur avait l'impression de changer de site en scrollant. La bascule passe par les TOKENS, pas par les sections : la page entiere lit deja var(--bg), var(--ink), var(--surface), var(--line). On retourne les valeurs, tout suit. Reecrire 8 sections a la main aurait laisse des oublis partout. */ :root{ --bg:#050506; --bg-alt:#08080B; --dark:#030304; --surface:#0E0E12; --surface-2:#131318; --ink:#F3F0E9; --ink-soft:rgba(243,240,233,.60); --gold:#D2A275; --gold-deep:#B08356; --line:rgba(210,162,117,.15); --line-2:rgba(210,162,117,.30); --grad:linear-gradient(160deg,#D2A275,#B08356); } body{background:#030304;color:var(--ink)} /* les sections deviennent transparentes pour que le ciel les traverse. Sans ca, chaque section repeint un aplat par-dessus et le ciel s'arrete au hero. */ /* :not(.clair) est indispensable. Sans lui, cette regle et celle de .clair portent toutes deux !important, et celle-ci gagne parce qu'un selecteur d'attribut pese plus lourd qu'une classe : les sections claires restaient noires avec du texte sombre dessus, donc illisibles. */ .sec[style*="--bg"]:not(.clair){background:transparent!important} .sec{position:relative;z-index:1} /* ============ RYTHME NOIR / BLANC ============ Trois blocs noirs qui marquent les trois moments : on ouvre, on convertit, on ferme. Entre les deux, du blanc. C'est le contraste qui donne le rythme au scroll ; une page d'un seul ton, aussi belle soit-elle, defile a plat. La bascule passe par les TOKENS, poses sur la section elle-meme. Les variables CSS s'heritent, donc tout ce qui est dedans suit sans qu'on ait a le nommer. Reecrire chaque composant en double aurait garanti des oublis. Le ciel etoile est un calque FIXE en z-0 : une section claire opaque en z-1 le masque toute seule. Les etoiles ne vivent donc que dans les blocs noirs, ce qui tombe bien, elles n'ont de sens que la. */ .clair{ --bg:#FCFCFA; --bg-alt:#F3F2EE; --surface:#FFFFFF; --surface-2:#F5F4F0; --ink:#14130F; --ink-soft:#5E5A52; --gold:#8A6043; --gold-deep:#6E4B33; --line:rgba(20,19,15,.11); --line-2:rgba(20,19,15,.20); /* --grad manquait : les sections claires heritaient du degrade champagne du theme sombre, soit environ 1,6:1 sur blanc. Le prix de l'offre phare et les gros numeros de la methode etaient illisibles. */ --grad:linear-gradient(160deg,#A57450,#6E4B33); background:#FCFCFA!important;color:var(--ink);position:relative;z-index:1} /* deux sections claires qui se suivent : un demi-ton d'ecart suffit a marquer la couture, un trait ferait barriere */ .clair + .clair{background:#F6F5F1!important} .clair + .clair + .clair{background:#FCFCFA!important} /* les composants dont j'avais code les couleurs en dur doivent suivre la bascule */ .clair .sys-shell{background:rgba(20,19,15,.035)} .clair .sys-shell:hover{background:rgba(138,96,67,.07)} .clair .sys-core{background:var(--surface); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 34px -22px rgba(70,54,18,.5)} .clair .sys-shell.is-lead .sys-core{ background:linear-gradient(152deg,rgba(138,96,67,.12),rgba(138,96,67,.03) 62%,var(--surface))} .clair .sys-ico{background:rgba(138,96,67,.10)} .clair .wk,.clair .brc{background:rgba(20,19,15,.04);border-color:rgba(20,19,15,.09)} .clair .wk i{background:rgba(20,19,15,.07)} .clair .wk i.b{background:rgba(138,96,67,.24)} .clair .brc .lbl{fill:rgba(20,19,15,.55)} .clair .brc .fils{stroke:rgba(138,96,67,.30)} .clair .etapes li{border-top-color:var(--line)} .ciel{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .et{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s); translate:-50% -50%;color:#B08356;opacity:var(--o);overflow:visible} .anim-ready .et{ animation:agTourne var(--r) linear infinite, agRespire var(--b) ease-in-out infinite alternate; animation-delay:0s,var(--d)} .et::after{content:"";position:absolute;top:50%;right:-4px;width:4px;height:4px; border-radius:50%;background:#D2A275;opacity:0} .anim-ready .et.actif::after{animation:agTache 6.4s ease-out infinite var(--d)} /* le ciel est FIXE : il ne defile pas avec la page, comme un vrai ciel au-dessus du paysage. S'il defilait, 78 elements animes traverseraient le viewport en permanence et le scroll ramerait sur telephone. */ /* ---- fluidite ---- Le ciel est un calque isole et promu : le navigateur le rasterise une fois et se contente ensuite de composer. `contain` lui interdit d'influencer la mise en page du reste, donc aucune animation d'etoile ne peut declencher un recalcul de page. */ .ciel{contain:strict;transform:translateZ(0)} /* Pendant l'ouverture du tiroir, on met le ciel EN PAUSE. 78 elements animes qui tournent pendant que le menu glisse, c'est ce qui faisait saccader au clic : les deux se disputent la meme image. En pause, le tiroir a le fil pour lui tout seul. */ .nav-open .ciel .et,.nav-open .ciel .et::after{animation-play-state:paused} @media(max-width:820px){ .et{opacity:calc(var(--o) * .72)} /* une etoile sur deux sur telephone : 39 au lieu de 78, deux fois moins de travail la ou la puissance manque, et l'oeil ne compte pas les etoiles */ .et:nth-child(2n){display:none} /* la tache emise coute une animation de plus par etoile active : on la garde uniquement au-dessus de 820px */ .et.actif::after{display:none} } @media(prefers-reduced-motion:reduce){ .anim-ready .et,.anim-ready .et.actif::after{animation:none} } /* le grain global remonte le noir : sur la page entiere sombre il faut le calmer */ .grain{opacity:.05} /* la pastille de nav etait blanche translucide : sur une page noire elle hurle */ .nav{background:rgba(14,14,18,.72);border-color:rgba(210,162,117,.18)} .scrolled .nav{background:rgba(14,14,18,.92);border-color:rgba(210,162,117,.28)} .brand{color:var(--ink)} .nav-links a{color:rgba(243,240,233,.66)} .nav-links a:hover{color:var(--ink)} .nav-cta{background:var(--gold);color:#0B0B0C} .nav-cta:hover{background:#E4C4A0} .nav-cta .ic{background:rgba(11,11,12,.22)} .nav-burg span{background:var(--ink)} /* ---- TIROIR : c'est lui qui saccadait au clic ---- Trois causes, toutes corrigees ici : 1. Le panneau portait backdrop-filter:blur(38px) saturate(1.9) ET le voile derriere portait blur(6px). Un flou de fond est recalcule a chaque image en fonction de ce qu'il y a DESSOUS ; sur un panneau qui translate, le dessous change a chaque image. Deux flous plein ecran pendant une translation, c'est injouable sur un telephone d'entree de gamme. Le panneau est desormais opaque, donc le flou ne servait plus a rien de toute facon : on ne voit pas au travers. 2. Les durees : 640 ms pour le panneau, 550 ms pour le voile, 600 ms pour les liens. Plus c'est long, plus il y a d'images a tenir, et plus ca se voit quand une saute. Ramene dans la fourchette 200-300 ms. La sortie est plus rapide que l'entree, parce qu'on veut voir arriver un panneau mais pas le regarder partir. 3. La sortie a son propre reglage : sans ca, l'aller et le retour ont la meme courbe et la fermeture parait mollassonne. */ .drawer{background:#0A0A0D;border-color:rgba(210,162,117,.20); backdrop-filter:none;-webkit-backdrop-filter:none; box-shadow:0 40px 90px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(210,162,117,.10); transition:transform .22s var(--ease-in-out-cubic)} .nav-open .drawer{transition:transform .3s var(--ease-out-quint)} .drawer-back{backdrop-filter:none;-webkit-backdrop-filter:none; background:rgba(3,3,4,.72); transition:opacity .2s linear,visibility .2s linear} .nav-open .drawer-back{transition:opacity .26s linear,visibility .26s linear} .dlink{transition:opacity .3s var(--ease-out-quint),transform .3s var(--ease-out-quint),background .18s ease} .drawer-x{border-color:rgba(243,240,233,.18);background:rgba(243,240,233,.06);color:var(--ink)} .drawer-x:hover{border-color:var(--gold);background:rgba(210,162,117,.16);color:var(--gold)} .dlink .dl-sub{color:var(--ink-soft)} .dlink:hover{background:rgba(210,162,117,.08)} .dlink:hover .dl-title{color:var(--gold)} .dlink .darr{background:rgba(210,162,117,.16);color:var(--gold)} .drawer-brand{color:var(--ink)} /* les cartes du bento : plaque sombre dans un plateau sombre, liseres dores */ .sys-shell{background:rgba(210,162,117,.05);border-color:var(--line)} .sys-shell:hover{background:rgba(210,162,117,.09);border-color:var(--line-2)} .sys-core{background:var(--surface); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 44px -26px rgba(0,0,0,.9)} .sys-shell.is-lead .sys-core{background:linear-gradient(152deg,rgba(210,162,117,.14),rgba(210,162,117,.03) 60%,var(--surface))} .sys-ico{background:rgba(210,162,117,.14);color:var(--gold)} /* les fins de phrase dorees en italique. Bricolage Grotesque n'a pas d'italique dessine, le navigateur en synthetise un en penchant les lettres. Sur une graisse display ca tient, a condition de laisser respirer : l'inclinaison pousse les jambages hors de leur boite et un p ou un g se fait couper par la ligne suivante si l'interligne est serre. D'ou l'interligne relache et la reserve en bas. */ .hero-h1 .gold{font-style:italic;padding-bottom:.06em} .rota .rl{line-height:1.1} /* ============ TITRE TOURNANT : LES QUATRE SERVICES ============ Les quatre phrases sont empilees dans LA MEME cellule de grille. C'est ce qui donne au titre la hauteur de la plus longue et fige la mise en page : avec des phrases de longueurs differentes, tout ce qui est en dessous sauterait a chaque changement. Un hero qui tressaute toutes les trois secondes est insupportable. Le passage se fait en volet, pas en fondu : la phrase qui part glisse vers le haut et se coupe, celle qui arrive monte depuis le bas. Un fondu croise donnerait deux textes superposes illisibles pendant un tiers de seconde. */ /* le groupe est promu UNE fois en couche : le navigateur rasterise, puis se contente de composer les changements. Poser la promotion sur chaque phrase creerait quatre couches au lieu d'une, ce qui coute plus cher que ca ne rapporte. */ .rota{display:grid;transform:translateZ(0);backface-visibility:hidden} /* la rotation est passee A L INTERIEUR du h1 : seule la fin de phrase tourne, donc le bloc doit se comporter comme une ligne de titre, pas comme un bloc */ .rota-h1{font:inherit;letter-spacing:inherit;text-align:inherit} /* sous 700px on ne fait plus glisser que de 22% : un grand deplacement sur un texte de cette taille sature le remplissage d'un telephone modeste, et c'est ce qui donnait l'impression que ca sautait */ @media(max-width:700px){ .rota .rl{transform:translateY(22%)} .rota .rl.sort{transform:translateY(-20%)} } .rota .rl{grid-area:1/1;align-self:center;opacity:0;transform:translateY(48%); pointer-events:none} /* l'entree attend 0,16 s : sans ce decalage, la phrase qui part et celle qui arrive sont visibles en meme temps pendant un tiers de seconde et ca fait deux textes superposes illisibles. La sortie doit etre finie avant que l'entree commence. */ .rota .rl.on{opacity:1;transform:translateY(0); transition:opacity .3s var(--ease-out-quint) .16s,transform .42s var(--ease-out-quint) .16s} /* la sortie est plus courte que l'entree : on veut voir arriver, pas voir partir */ .rota .rl.sort{opacity:0;transform:translateY(-42%); transition:opacity .22s ease-in,transform .28s ease-in} @media(prefers-reduced-motion:reduce){ .rota .rl{transition:none!important} .rota .rl:not(.on){display:none} } /* ============ HERO CENTRÉ (composition demandée par Ali) ============ Le hero passe de aligne-a-gauche a centre. Ce n'est pas qu'un text-align : un texte centre sur un fond dont la gauche est assombrie et la droite eclairee est bancal. Donc le voile de lisibilite devient vertical et symetrique, et le filigrane de la marque se recentre derriere le texte au lieu de rester a droite. */ .hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center} .hero-h1{max-width:min(12.8em,100%);margin-inline:auto;text-wrap:balance} /* sous 700px la police est bloquee a 40px par le clamp : la variante la plus courte tiendrait sur une ligne quand les cinq autres en prennent deux, et la rotation reservant la hauteur de la plus haute, ca laisse un trou un tour sur six. 8em force les six a deux lignes. */ @media(max-width:700px){ .hero-h1{max-width:min(8em,100%)} } .hero-sub{margin-inline:auto;max-width:60ch} .hero-acts{justify-content:center} .hero-geo{left:50%} .hero-inner::after{display:none} .hero::before{background: linear-gradient(180deg,rgba(3,3,4,.72) 0%,rgba(3,3,4,.30) 26%,rgba(3,3,4,.30) 68%,rgba(3,3,4,.86) 100%), radial-gradient(96% 78% at 50% 46%,transparent 30%,rgba(0,0,0,.80))} @media(max-width:820px){ .hero::before{background:linear-gradient(180deg,rgba(3,3,4,.62) 0%,rgba(3,3,4,.28) 30%,rgba(3,3,4,.90) 100%)} } /* Le second bouton : pastille sombre, avec le mark en vignette. Il ne doit PAS rivaliser avec le bouton dore, d'ou l'absence de fond plein. */ .hero-book{display:inline-flex;align-items:center;gap:13px;padding:9px 22px 9px 9px; border-radius:999px;border:1px solid rgba(243,240,233,.14);background:rgba(243,240,233,.04); transition:border-color .2s var(--ease-out-quint),background .2s var(--ease-out-quint),transform .2s var(--ease-out-quint)} .hero-book:hover{border-color:rgba(210,162,117,.42);background:rgba(210,162,117,.09);transform:translateY(-2px)} .hero-book:active{transform:scale(.985)} .hb-av{display:grid;place-items:center;width:38px;height:38px;border-radius:50%; background:rgba(210,162,117,.12);color:var(--gold);flex:none} .hb-av svg{width:21px;height:21px} .hb-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;text-align:left} .hb-txt b{font-size:14.5px;font-weight:600;color:var(--ink)} .hb-txt span{font-size:12.5px;color:var(--ink-soft)} @media(max-width:560px){ .hero-acts{flex-direction:column;align-items:stretch;width:100%} .hero-acts .hero-cta{justify-content:center} .hero-book{justify-content:center} } /* ============ MINI-MOCKUPS ANIMÉS DES SYSTÈMES ============ Chaque carte montre son mecanisme au lieu de l'illustrer. Une icone symbolise (un telephone = "telephone"), un mockup DEMONTRE (l'appel arrive, le SMS part). Regles tirees du skill animate : - uniquement transform et opacity, jamais de height ni de top ; - ce qui entre : ease-out, 200-300 ms ; ce qui sort : plus court ; - en pause tant que la carte n'est pas a l'ecran, la boucle ne tourne pas pour rien ; - un decalage different par carte, sinon les quatre battent ensemble et ca clignote. */ .mock{position:relative;height:92px;margin-bottom:20px;border-radius:14px;padding:12px 14px; background:rgba(3,3,4,.5);border:1px solid rgba(243,240,233,.07);overflow:hidden; font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.02em} .mock > *{opacity:0} .sys-shell.on .mock > *{animation-duration:7s;animation-iteration-count:infinite; animation-timing-function:cubic-bezier(.23,1,.32,1)} .sys-shell:nth-child(2) .mock > *{animation-delay:calc(var(--t,0s) + .8s)} .sys-shell:nth-child(3) .mock > *{animation-delay:calc(var(--t,0s) + 1.6s)} .sys-shell:nth-child(4) .mock > *{animation-delay:calc(var(--t,0s) + 2.4s)} /* apparait, tient, disparait. Le meme geste sert a tout, seul --t change. */ @keyframes mkPop{ 0%,8%{opacity:0;transform:translateY(7px)} 16%,84%{opacity:1;transform:translateY(0)} 92%,100%{opacity:0;transform:translateY(0)}} .sys-shell.on .mock .mk{animation-name:mkPop} .mk{display:flex;align-items:center;gap:8px;color:rgba(243,240,233,.66);line-height:1.5} .mk + .mk{margin-top:7px} .mk.gold{color:var(--gold)} .mk .pt{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none} .mk .pt.mut{background:rgba(243,240,233,.3)} /* 1. Réception : l'appel manque, le SMS part */ .mock-recep .mk-sms{display:inline-block;max-width:100%;padding:7px 11px;border-radius:11px 11px 11px 3px; background:rgba(210,162,117,.14);border:1px solid rgba(210,162,117,.3);color:#EFDCC6; line-height:1.45;margin-top:9px} /* 3. Rendez-vous : la semaine, un creneau se prend */ .mk-week{display:flex;gap:5px} .mk-week i{width:16px;height:22px;border-radius:4px;background:rgba(243,240,233,.09)} .mk-week i.pick{background:var(--gold)} /* 4. Avis : les etoiles se remplissent l'une apres l'autre */ .mk-stars{display:flex;gap:5px} .mk-stars i{width:13px;height:13px;background:rgba(243,240,233,.16); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)} .sys-shell.on .mk-stars i{animation:mkEtoile 7s infinite cubic-bezier(.23,1,.32,1)} .mk-stars i:nth-child(1){animation-delay:.2s} .mk-stars i:nth-child(2){animation-delay:.35s} .mk-stars i:nth-child(3){animation-delay:.5s} .mk-stars i:nth-child(4){animation-delay:.65s} .mk-stars i:nth-child(5){animation-delay:.8s} @keyframes mkEtoile{ 0%,10%{background:rgba(243,240,233,.16);transform:scale(1)} 18%{background:var(--gold);transform:scale(1.22)} 24%,86%{background:var(--gold);transform:scale(1)} 94%,100%{background:rgba(243,240,233,.16);transform:scale(1)}} @media(prefers-reduced-motion:reduce){ .mock > *{opacity:1!important;animation:none!important} .mk-stars i{background:var(--gold)!important} } /* ============ SECTION AGENCE ============ */ #agence{padding:clamp(76px,8vw,116px) 0} .agence-h2{font-size:clamp(30px,4.4vw,58px);font-weight:700;letter-spacing:-.03em;line-height:1.06} /* la rotation vit dans le h2 : elle doit se comporter comme une ligne de titre */ .rota-h2{font:inherit;letter-spacing:inherit} #agence .lede{margin-top:26px;max-width:62ch;font-size:clamp(16px,1.5vw,18.5px); line-height:1.62;color:var(--ink-soft)} /* ============ SECTION CONCRÈTEMENT : LE SCHÉMA ============ */ #concret .head .lede{margin-top:20px;max-width:64ch;font-size:clamp(16px,1.5vw,18.5px); line-height:1.62;color:var(--ink-soft)} /* ============ LE TÉLÉPHONE : LA VRAIE CONVERSATION ============ Premiere version : des lignes de log en police machine ("Relance J+3"). C'est un ecran de developpeur. La cible est un artisan qui ne lit pas de logs, et a qui on montrait la tuyauterie au lieu de sa journee. Ici c'est l'ecran qu'il a dans la poche, avec une conversation qu'il pourrait avoir eue. Rien a expliquer. */ .demo{display:flex;flex-direction:column;align-items:center;gap:22px; margin:clamp(44px,5vw,64px) 0 clamp(52px,5vw,70px)} .tel{width:min(340px,90vw);border-radius:34px;padding:9px; background:linear-gradient(160deg,rgba(210,162,117,.24),rgba(243,240,233,.05) 40%,rgba(243,240,233,.02)); box-shadow:0 44px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(243,240,233,.06)} .tel-haut{display:flex;justify-content:space-between;align-items:baseline; padding:12px 16px 14px;border-radius:27px 27px 0 0;background:#0B0B0E} .tel-num{font-size:14px;font-weight:600;color:var(--ink)} .tel-etat{font-size:11px;color:var(--ink-soft)} .fil{display:flex;flex-direction:column;gap:9px;padding:16px 14px 20px; background:#0B0B0E;border-radius:0 0 27px 27px} .bul{position:relative;max-width:86%;padding:10px 13px;border-radius:16px; font-size:13.5px;line-height:1.42} .bul b{display:block;font-size:10px;font-weight:500;opacity:.5;margin-bottom:3px} /* entrant a gauche, sortant a droite : la grammaire de toutes les messageries. C'est ce qui rend l'echange lisible sans legende. */ .bul.in{align-self:flex-start;border-bottom-left-radius:5px; background:rgba(243,240,233,.08);color:rgba(243,240,233,.86)} .bul.out{align-self:flex-end;border-bottom-right-radius:5px;text-align:left; background:rgba(210,162,117,.17);border:1px solid rgba(210,162,117,.26);color:#F3E8CD} /* chaque bulle arrive a son tour, comme une vraie conversation qui se deroule */ .anim-ready .demo .bul{opacity:0;transform:translateY(9px)} .anim-ready .demo.in-vue .bul{animation:bulArrive .34s cubic-bezier(.23,1,.32,1) forwards} .anim-ready .demo.in-vue .bul:nth-child(1){animation-delay:.15s} .anim-ready .demo.in-vue .bul:nth-child(2){animation-delay:.75s} .anim-ready .demo.in-vue .bul:nth-child(3){animation-delay:1.5s} .anim-ready .demo.in-vue .bul:nth-child(4){animation-delay:2.1s} @keyframes bulArrive{to{opacity:1;transform:translateY(0)}} .demo-note{max-width:44ch;text-align:center;font-size:clamp(15.5px,1.5vw,18px); line-height:1.5;color:var(--ink)} /* ============ AVANT / APRÈS LA MÊME JOURNÉE ============ */ .jour{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px); margin-bottom:clamp(52px,5vw,72px)} .jr{padding:clamp(22px,2.4vw,30px);border-radius:20px;border:1px solid var(--line)} .jr-avant{background:rgba(243,240,233,.03)} .jr-apres{background:linear-gradient(152deg,rgba(210,162,117,.11),rgba(210,162,117,.02) 66%,transparent)} .jr-tag{display:block;font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px; letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:20px} .jr-apres .jr-tag{color:var(--gold)} .jr ul{list-style:none;margin:0;padding:0} .jr li{display:flex;gap:14px;padding:11px 0;font-size:15px;line-height:1.5} .jr li + li{border-top:1px solid rgba(243,240,233,.07)} /* l'heure en colonne fixe : les deux journees s'alignent ligne par ligne, c'est ce qui permet de comparer le meme moment des deux cotes */ .jr li b{flex:none;width:52px;font-family:'Geist Mono',ui-monospace,monospace;font-size:11.5px; font-weight:500;color:var(--ink-soft);padding-top:2px} .jr-avant li span{color:rgba(243,240,233,.62)} .jr-apres li span{color:var(--ink)} @media(max-width:820px){ .jour{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ .anim-ready .demo .bul{opacity:1;transform:none} } .mach{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,3vw,48px); align-items:center;margin:clamp(48px,5vw,68px) 0 clamp(56px,6vw,80px)} .mach-col{display:flex;flex-direction:column;gap:11px} .mach-lab{font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px} .mach-out{align-items:flex-end;text-align:right} .chip{display:inline-block;padding:13px 18px;border-radius:14px;font-size:14.5px;line-height:1.35; background:rgba(243,240,233,.045);border:1px solid rgba(243,240,233,.10);color:rgba(243,240,233,.74)} /* les sorties portent la couleur de marque : c'est le seul signal qui distingue "ce que vous subissez" de "ce que l'agent a fait" */ .chip.ok{background:rgba(210,162,117,.09);border-color:rgba(210,162,117,.26);color:#EFDCC6} /* Le convoyeur : chaque puce glisse vers le centre a son tour. Le decalage vient de --i, donc la cascade se lit de haut en bas comme une file qui avance. PAUSE PAR DEFAUT : l'animation ne demarre que quand la section entre a l'ecran (classe .on posee par IntersectionObserver). Une animation qui tourne en boucle hors champ, c'est du calcul paye pour rien sur un telephone modeste. */ .anim-ready .mach .chip{animation:chipEntre 5.6s ease-in-out infinite; animation-delay:calc(var(--i) * .42s);animation-play-state:paused} .anim-ready .mach.on .chip{animation-play-state:running} @keyframes chipEntre{ 0%,58%{transform:translateX(0);opacity:.72} 68%{transform:translateX(10px);opacity:1} 100%{transform:translateX(0);opacity:.72}} .mach-out .chip{animation-name:chipSort} @keyframes chipSort{ 0%,58%{transform:translateX(0);opacity:.72} 68%{transform:translateX(-10px);opacity:1} 100%{transform:translateX(0);opacity:.72}} .mach-core{position:relative;display:grid;place-items:center;gap:14px;padding:0 clamp(4px,1.5vw,18px)} .mach-halo{position:absolute;width:250px;height:250px;border-radius:50%; background:radial-gradient(closest-side,rgba(210,162,117,.16),transparent 70%)} .anim-ready .mach.on .mach-halo{animation:machSouffle 4.4s ease-in-out infinite alternate} @keyframes machSouffle{from{opacity:.5;scale:.9}to{opacity:1;scale:1.08}} .mach-o{position:relative;width:clamp(92px,11vw,132px);height:clamp(92px,11vw,132px);color:var(--gold)} .anim-ready .mach.on .mach-o{animation:agTourne 26s linear infinite} .mach-name{position:relative;font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px; letter-spacing:.16em;text-transform:uppercase;color:var(--gold);white-space:nowrap} /* Les trois etapes : pas de cartes. Un filet en haut suffit a les separer, et ca evite la rangee de trois cartes identiques qui fait template. */ .etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px)} .etapes li{padding-top:22px;border-top:1px solid var(--line)} @media(min-width:861px){ .etapes li:nth-child(2){margin-top:34px} .etapes li:nth-child(3){margin-top:68px} } /* ============ LES TROIS TEMPS DU WORKFLOW ============ 01 et 03 partagent LA MEME grille de semaine. C'est volontaire : on ne compare que ce qui est comparable, et voir le meme objet se remplir puis se vider dit la transformation mieux que n'importe quelle phrase. 02 montre le branchement. Tout est en pause tant que l'etape n'est pas a l'ecran. */ /* ============ TROIS COMPOSANTS REPRIS DE BIBLIOTHÈQUES LIBRES ============ Adaptes, pas copies : on reprend la MECANIQUE, on remet la charte et les mots d'Ali par-dessus. Les trois sont sans React ni dependance, ce qui est la seule contrainte qui compte ici puisque la page est un fichier HTML unique. A. radar de balayage technique Uiverse (conic-gradient + anneaux), CSS pur B. orbite technique Orbiting Circles de Magic UI, 0 dependance C. cases qui se barrent technique Uiverse (trace en deux temps + rature) */ /* PASSE TASTE. Trois defauts diagnostiques, tous corriges ici : 1. Chaque visuel etait enferme dans sa boite : meme fond, meme bord, meme hauteur. Trois boites identiques cote a cote, c'est exactement la rangee de trois cartes egales qui fait template. Et la boite ne portait aucune hierarchie : elle ne faisait que clore un dessin. Les boites sautent, les dessins se posent directement sur le sol de la section, separes par le filet qui existe deja au-dessus de chaque etape. 2. Aucune famille visuelle : un radar rond, une orbite ronde, une liste carree. Deux cercles qui tournent, c'est deux fois le meme geste. Les traits sont desormais tous a la meme epaisseur, l'or a la meme valeur, et chaque dessin occupe la meme bande d'air. 3. Les trouvailles du radar etaient des pastilles a fond teinte et bord dore. Une etiquette decorative sur un visuel, c'est un tell. Ce sont maintenant des mots poses, qui passent simplement de gris a or quand le balayage les croise. */ .rad,.orb,.coch{position:relative;height:150px;margin-bottom:22px} .rad,.orb{overflow:hidden} /* ---- A. LE RADAR ---- */ /* plus de quadrillage : il faisait fond d'ecran. Seuls restent les anneaux, en filet, qui suffisent a poser l'idee du balayage. */ .rad-grille{position:absolute;left:50%;top:50%;width:260px;height:260px;translate:-50% -50%; background-image:repeating-radial-gradient(circle at 50% 50%,transparent 0 25px,rgba(210,162,117,.16) 25px 26px)} .clair .rad-grille{background-image:repeating-radial-gradient(circle at 50% 50%,transparent 0 25px,rgba(138,96,67,.20) 25px 26px)} /* le faisceau : un secteur de cone qui tourne. C'est LE geste du scan. */ .rad-faisceau{position:absolute;left:50%;top:50%;width:260px;height:260px;translate:-50% -50%; border-radius:50%; background:conic-gradient(from 0deg,rgba(210,162,117,.22) 0deg,rgba(210,162,117,.05) 24deg,transparent 46deg)} .etapes li.on .rad-faisceau{animation:radTourne 4s linear infinite} @keyframes radTourne{to{rotate:360deg}} .rad-coeur{position:absolute;left:50%;top:50%;width:7px;height:7px;translate:-50% -50%; border-radius:50%;background:var(--gold)} .etapes li.on .rad-coeur{animation:radPouls 2s ease-out infinite} @keyframes radPouls{0%{box-shadow:0 0 0 0 rgba(210,162,117,.5)}70%,100%{box-shadow:0 0 0 22px rgba(210,162,117,0)}} /* les trouvailles apparaissent au fil du balayage */ .rad-t{position:absolute;left:2px;font-family:'Geist Mono',ui-monospace,monospace; font-size:10px;letter-spacing:.05em;color:var(--gold);opacity:0;white-space:nowrap} .rad-t:nth-of-type(4){top:10px;left:0} .rad-t:nth-of-type(5){top:68px;left:auto;right:0} .rad-t:nth-of-type(6){bottom:10px;left:0} .etapes li.on .rad-t{animation:radTrouve 4s ease-out infinite;animation-delay:var(--d)} @keyframes radTrouve{0%{opacity:0;transform:scale(.92)}10%,72%{opacity:1;transform:scale(1)}88%,100%{opacity:0;transform:scale(1)}} /* ---- B. L'ORBITE ---- */ .orb-o{position:absolute!important;left:50%;top:50%;width:52px!important;height:52px!important; translate:-50% -50%;color:var(--gold)} .orb-piste{position:absolute;left:50%;top:50%;width:126px;height:126px;translate:-50% -50%; border-radius:50%;border:1px solid rgba(210,162,117,.18)} .clair .orb-piste{border-color:rgba(138,96,67,.22)} .clair .orb-piste{border-color:rgba(138,96,67,.26)} .orb-anneau{position:absolute;inset:0} .etapes li.on .orb-anneau{animation:orbTourne 20s linear infinite} @keyframes orbTourne{to{rotate:360deg}} /* rotate puis translate puis contre-rotate : la pastille suit le cercle sans basculer sur elle-meme. C'est la formule d'Orbiting Circles. */ .orb-i{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px; border-radius:50%;background:var(--gold); transform:rotate(var(--a)) translateY(-63px) rotate(calc(var(--a) * -1))} .orb-i:nth-child(2),.orb-i:nth-child(4){opacity:.5;width:5px;height:5px;margin:-2.5px 0 0 -2.5px} /* ---- C. LES CASES QUI SE BARRENT ---- */ .coch{display:flex;flex-direction:column;justify-content:center;gap:15px;padding:0 2px} .coch-l{display:flex;align-items:center;gap:10px;position:relative} .coch-b{position:relative;width:16px;height:16px;border-radius:5px;flex:none; border:1px solid rgba(243,240,233,.26)} .clair .coch-b{border-color:rgba(20,19,15,.28)} .coch-b svg{position:absolute;inset:-1px;width:15px;height:15px;fill:none; stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:26;stroke-dashoffset:26} .coch-l em{position:relative;font-style:normal;font-family:'Geist Mono',ui-monospace,monospace; font-size:10.5px;letter-spacing:.04em;color:rgba(243,240,233,.62)} .clair .coch-l em{color:rgba(20,19,15,.6)} /* la rature part de la gauche et file : c'est elle qui donne le sentiment de regle */ .coch-l em::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:1.4px; background:var(--gold);transform:scaleX(0);transform-origin:left} .etapes li.on .coch-b svg{animation:cochTrace 6s ease-out infinite;animation-delay:calc(var(--n) * .5s)} @keyframes cochTrace{0%,4%{stroke-dashoffset:26}14%,84%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:26}} .etapes li.on .coch-b{animation:cochCadre 6s ease-out infinite;animation-delay:calc(var(--n) * .5s)} @keyframes cochCadre{0%,4%{border-color:currentColor}14%,84%{border-color:var(--gold)}92%,100%{border-color:currentColor}} .etapes li.on .coch-l em::after{animation:cochRature 6s ease-out infinite;animation-delay:calc(var(--n) * .5s + .12s)} @keyframes cochRature{0%,6%{transform:scaleX(0)}18%,84%{transform:scaleX(1)}92%,100%{transform:scaleX(0)}} .etapes li.on .coch-l em{animation:cochPali 6s ease-out infinite;animation-delay:calc(var(--n) * .5s + .12s)} @keyframes cochPali{0%,6%{opacity:1}22%,84%{opacity:.42}92%,100%{opacity:1}} @media(prefers-reduced-motion:reduce){ .etapes li.on .rad-faisceau,.etapes li.on .rad-coeur,.etapes li.on .orb-anneau, .etapes li.on .coch-b,.etapes li.on .coch-b svg, .etapes li.on .coch-l em,.etapes li.on .coch-l em::after{animation:none} .rad-t{opacity:1;animation:none} .coch-b svg{stroke-dashoffset:0} .coch-l em::after{transform:scaleX(1)} } /* ============ L'AUDIT : UNE REVUE, PAS UN PLANNING ============ Version precedente : une grille de semaine dont des cases s'allumaient. Ca lisait "agenda charge", pas "audit". Un audit, ce n'est pas un emploi du temps : c'est quelqu'un qui passe une liste en revue et qui epingle ce qui coince. Donc un balayage qui descend, et chaque ligne qui se marque a son passage. Aucun chiffre : les heures, c'est l'audit reel qui les donnera, on ne va pas les inventer sur une page de vente. */ .aud{position:relative;height:92px;margin-bottom:20px;padding:11px 14px;border-radius:14px; background:rgba(3,3,4,.5);border:1px solid rgba(243,240,233,.07);overflow:hidden; display:flex;flex-direction:column;justify-content:space-between} .aud-l{display:flex;align-items:center;gap:9px;font-family:'Geist Mono',ui-monospace,monospace; font-size:10.5px;letter-spacing:.02em;color:rgba(243,240,233,.42); transition:color .3s var(--ease-out-quint)} .aud-l i{width:5px;height:5px;border-radius:50%;background:rgba(243,240,233,.22);flex:none} /* le trait de balayage, avec sa lueur : c'est lui qui donne le sens de lecture */ .aud-scan{position:absolute;left:0;right:0;height:1px;background:var(--gold);opacity:0; box-shadow:0 0 14px 3px rgba(210,162,117,.4)} .etapes li.on .aud .aud-scan{animation:audScan 4.8s cubic-bezier(.5,0,.5,1) infinite} @keyframes audScan{ 0%{top:2%;opacity:0} 8%{opacity:.9} 72%{top:96%;opacity:.9} 82%,100%{top:96%;opacity:0}} /* 01 : la ligne s'allume quand le trait la croise */ .etapes li.on .aud-trouve .aud-l{animation:audTrouve 4.8s ease-out infinite; animation-delay:calc(.35s + var(--n) * .52s)} @keyframes audTrouve{ 0%{color:rgba(243,240,233,.42)} 6%,84%{color:var(--gold)} 94%,100%{color:rgba(243,240,233,.42)}} .etapes li.on .aud-trouve .aud-l i{animation:audPuce 4.8s ease-out infinite; animation-delay:calc(.35s + var(--n) * .52s)} @keyframes audPuce{ 0%{background:rgba(243,240,233,.22);transform:scale(1)} 5%{background:var(--gold);transform:scale(1.5)} 12%,84%{background:var(--gold);transform:scale(1)} 94%,100%{background:rgba(243,240,233,.22);transform:scale(1)}} /* 03 : la meme liste, mais chaque ligne se fait barrer. Le trait de balayage devient celui qui regle, pas celui qui trouve. */ .aud-regle .aud-l{position:relative;color:var(--gold)} .aud-regle .aud-l i{background:var(--gold)} .aud-regle .aud-l::after{content:"";position:absolute;left:14px;right:0;top:50%;height:1px; background:currentColor;transform:scaleX(0);transform-origin:left;opacity:.7} .etapes li.on .aud-regle .aud-l::after{animation:audBarre 4.8s ease-out infinite; animation-delay:calc(.35s + var(--n) * .52s)} @keyframes audBarre{ 0%{transform:scaleX(0)} 10%,84%{transform:scaleX(1)} 94%,100%{transform:scaleX(0)}} .etapes li.on .aud-regle .aud-l{animation:audEteint 4.8s ease-out infinite; animation-delay:calc(.35s + var(--n) * .52s)} @keyframes audEteint{ 0%{color:var(--gold)} 14%,84%{color:rgba(243,240,233,.30)} 94%,100%{color:var(--gold)}} .clair .aud{background:rgba(20,19,15,.04);border-color:rgba(20,19,15,.09)} .clair .aud-l{color:rgba(20,19,15,.42)} .clair .aud-l i{background:rgba(20,19,15,.20)} .clair .aud-regle .aud-l{color:var(--gold)} /* la ligne barree s'eteint vers un gris CLAIR : sur fond blanc elle disparaissait completement, on ne voyait plus que le trait de rature flotter dans le vide */ .clair .etapes li.on .aud-regle .aud-l{animation-name:audEteintClair} @keyframes audEteintClair{ 0%{color:var(--gold)} 14%,84%{color:rgba(20,19,15,.34)} 94%,100%{color:var(--gold)}} .clair .etapes li.on .aud-trouve .aud-l{animation-name:audTrouveClair} @keyframes audTrouveClair{ 0%{color:rgba(20,19,15,.42)} 6%,84%{color:var(--gold)} 94%,100%{color:rgba(20,19,15,.42)}} .clair .etapes li.on .aud-trouve .aud-l i{animation-name:audPuceClair} @keyframes audPuceClair{ 0%{background:rgba(20,19,15,.20);transform:scale(1)} 5%{background:var(--gold);transform:scale(1.5)} 12%,84%{background:var(--gold);transform:scale(1)} 94%,100%{background:rgba(20,19,15,.20);transform:scale(1)}} @media(prefers-reduced-motion:reduce){ .etapes li.on .aud *{animation:none!important} .aud-trouve .aud-l{color:var(--gold)} .aud-regle .aud-l::after{transform:scaleX(1)} } .wk{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;height:92px;margin-bottom:20px; padding:12px;border-radius:14px;background:rgba(3,3,4,.5);border:1px solid rgba(243,240,233,.07)} .wk i{border-radius:3px;background:rgba(243,240,233,.07)} .wk i.b{background:rgba(210,162,117,.2)} /* 01 : les cases occupees s'allument l'une apres l'autre. C'est l'audit qui passe sur la semaine et qui met le doigt sur ce qui revient tous les jours. */ .etapes li.on .wk-scan i.b{animation:wkAllume 5.4s ease-out infinite; animation-delay:calc(var(--n) * .13s)} @keyframes wkAllume{ 0%,6%{background:rgba(243,240,233,.07);transform:scale(1)} 14%{background:var(--gold);transform:scale(1.16)} 22%,88%{background:var(--gold);transform:scale(1)} 96%,100%{background:rgba(243,240,233,.07);transform:scale(1)}} /* 03 : la meme grille, mais les cases s'eteignent une par une. La semaine se vide, et le vide qui reste EST le resultat. Rien a ecrire dessus. */ .etapes li.on .wk-vide i.b{animation:wkEteint 5.4s ease-out infinite; animation-delay:calc(var(--n) * .13s)} @keyframes wkEteint{ 0%,10%{background:var(--gold);opacity:1;transform:scale(1)} 24%{background:var(--gold);opacity:.35;transform:scale(.72)} 34%,90%{background:rgba(243,240,233,.05);opacity:1;transform:scale(1)} 98%,100%{background:var(--gold);opacity:1;transform:scale(1)}} /* 02 : le branchement. Les fils sont traces en creux, et une impulsion doree les parcourt du O vers chaque outil. Le pointille anime est la seule facon de faire circuler quelque chose le long d'une courbe sans JavaScript. */ .brc{position:relative;height:92px;margin-bottom:20px;border-radius:14px; background:rgba(3,3,4,.5);border:1px solid rgba(243,240,233,.07);overflow:hidden} .brc svg{width:100%;height:100%;display:block} .brc .lbl{font-family:'Geist Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.06em; fill:rgba(243,240,233,.58)} .brc .flux path{stroke-dasharray:26 240;stroke-dashoffset:266;opacity:0} .etapes li.on .brc .flux path{animation:brcFlux 2.6s linear infinite;animation-delay:var(--f)} @keyframes brcFlux{ 0%{stroke-dashoffset:266;opacity:0} 12%{opacity:1} 78%{opacity:1} 100%{stroke-dashoffset:0;opacity:0}} .brc .bout{fill:rgba(210,162,117,.3)} .etapes li.on .brc .bout{animation:brcBout 2.6s ease-out infinite;animation-delay:var(--f)} @keyframes brcBout{0%,62%{fill:rgba(210,162,117,.3);r:4.5} 72%{fill:#D2A275;r:6} 86%,100%{fill:rgba(210,162,117,.3);r:4.5}} /* le O est pose PAR-DESSUS le svg, pas dedans : il garde ainsi sa taille reelle quel que soit l'etirement du viewBox */ .brc-o{position:absolute!important;left:14px;top:50%;translate:0 -50%; width:44px!important;height:44px!important;color:var(--gold)} .etapes li.on .brc-o{animation:agTourne 30s linear infinite} @media(prefers-reduced-motion:reduce){ .etapes li.on .wk-scan i.b,.etapes li.on .wk-vide i.b, .etapes li.on .brc .flux path,.etapes li.on .brc .bout,.etapes li.on .brc-o{animation:none} .brc .flux path{opacity:1;stroke-dashoffset:0;stroke-dasharray:none} } .et-num{display:block;font-family:'Geist Mono',ui-monospace,monospace;font-size:11px; letter-spacing:.18em;color:var(--gold);margin-bottom:14px} .etapes h3{font-size:clamp(18px,1.7vw,21px);font-weight:600;letter-spacing:-.02em;line-height:1.25} .etapes p{margin-top:10px;font-size:15px;line-height:1.62;color:var(--ink-soft)} @media(max-width:900px){ .mach{grid-template-columns:1fr;gap:30px} .mach-out{align-items:flex-start;text-align:left} .mach-core{padding:8px 0} .mach-halo{width:190px;height:190px} .etapes{grid-template-columns:1fr;gap:26px} } @media(prefers-reduced-motion:reduce){ .anim-ready .mach .chip,.anim-ready .mach.on .mach-o,.anim-ready .mach.on .mach-halo{animation:none} } .cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .btn-gold{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 8px 0 24px;border-radius:var(--pill); background:var(--ink);color:var(--bg);font-weight:600;font-size:15px;white-space:nowrap; transition:transform .4s var(--ease-out),background .4s var(--ease)} .btn-gold:hover{background:var(--gold)} .btn-gold .ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16); transition:transform .4s var(--ease-out)} .btn-gold .ic svg{width:17px;height:17px} .btn-gold:hover{transform:translateY(-2px)} .btn-gold:hover .ic{transform:translate(2px,-1px) scale(1.05)} .btn-gold:active{transform:scale(.985)} .btn-ghost{display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 24px;border-radius:var(--pill); border:1px solid var(--line-2);color:var(--ink);font-weight:500;font-size:15px; transition:border-color .35s var(--ease),background .35s var(--ease)} .btn-ghost:hover{border-color:var(--ink);background:rgba(20,19,15,.03)} .btn-ghost .dot{width:8px;height:8px;border-radius:50%;background:var(--grad)} /* Strip de preuve — honnête (engagements réels, PAS de fausse note Google) */ .proof{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:40px;align-items:center} .proof .pi{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-soft)} .proof .pi svg{width:15px;height:15px;color:var(--gold);flex:none} .proof .sep{width:1px;height:14px;background:var(--line-2)} /* ============ REVEAL (réutilisable, une fois) ============ */ .anim-ready .reveal{opacity:0;transform:translateY(20px);filter:blur(6px)} /* Hero signature blur → net (init via .anim-ready, animée par GSAP) */ .anim-ready .hero .sig{opacity:0;filter:blur(12px);transform:translateY(14px)} /* ============ MOSAÏQUE réalisations (§5 — cœur du site) ============ */ .realis{padding:120px 0} .realis .head{margin-bottom:52px} .realis .eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px} .realis .eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.7} .realis h2{max-width:16ch} .mgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px} .tile{--th:340px;position:relative;grid-column:span 4;height:var(--th);border-radius:var(--r); overflow:hidden;border:1px solid var(--line);background:var(--surface);display:block;isolation:isolate} .tile.s7{grid-column:span 7}.tile.s6{grid-column:span 6}.tile.s5{grid-column:span 5}.tile.s4{grid-column:span 4} .tile .shot{position:absolute;inset:0;overflow:hidden;transition:transform .6s var(--ease)} .tile .shot img{width:100%;height:auto;display:block} .anim-ready .tile.playing .shot img{animation:scrolly 26s linear infinite alternate} .tile .shot img{content-visibility:auto} @keyframes scrolly{0%{transform:translateY(0)}100%{transform:translateY(calc(-100% + var(--th)))}} .tile .tover{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end; padding:20px;background:var(--overlay);pointer-events:none} .tile .tag{position:absolute;top:14px;left:14px;z-index:3;font-size:10.5px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:rgba(4,4,6,.5); border:1px solid var(--line-2);border-radius:var(--pill);padding:5px 11px;backdrop-filter:blur(6px)} .tile .tname{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.02em; transform:translateY(10px);opacity:0;transition:transform .45s var(--ease),opacity .45s var(--ease)} .tile .tmet{font-size:13.5px;color:var(--ink-soft);transform:translateY(10px);opacity:0; transition:transform .45s var(--ease) .05s,opacity .45s var(--ease) .05s} .tile:hover .shot{transform:scale(1.04)} .tile:hover .shot img{animation-play-state:paused} .tile:hover .tname,.tile:hover .tmet,.tile:focus-visible .tname,.tile:focus-visible .tmet{transform:none;opacity:1} .anim-ready .realis .tile{opacity:0} /* ============ FOOTER stub (socle) ============ */ .foot{border-top:1px solid var(--line);padding:56px 0 40px;margin-top:40px} .foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap} .foot .fb{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;letter-spacing:-.02em} .foot .fb svg{width:22px;height:22px} .foot small{color:var(--ink-soft);font-size:13px} .foot .fline{color:var(--ink-soft);font-size:14px;max-width:34ch;line-height:1.5} /* Note socle (repère visuel — retiré en Phase 3) */ .socle-note{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:120; font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft); background:rgba(12,12,15,.7);border:1px solid var(--line);border-radius:var(--pill); padding:7px 16px;backdrop-filter:blur(10px)} /* ============ RESPONSIVE ============ */ @media(max-width:980px){ .mgrid{gap:16px} .tile,.tile.s7,.tile.s6,.tile.s5,.tile.s4{grid-column:span 6} .tile{--th:300px} } @media(max-width:760px){ .wrap{padding:0 20px} .nav-links{display:none} .hero{padding:118px 0 72px} .hero h1{max-width:100%} .hero-cta{margin:22px 0 0 0} .btn-gold,.btn-ghost{height:52px} .cta-row{gap:12px} .btn-gold,.btn-ghost{width:100%;justify-content:center} .realis{padding:84px 0} .mgrid{gap:14px} .tile,.tile.s7,.tile.s6,.tile.s5,.tile.s4{grid-column:span 12} .tile{--th:264px} .tile .tname,.tile .tmet{transform:none;opacity:1} } /* ============ REDUCED MOTION (complet) ============ */ /* ===== Polish : sliders calculateur en or (l'agent n'avait pas stylé le range → violet natif) ===== */ #cout input[type=range]{-webkit-appearance:none;appearance:none;accent-color:var(--gold);width:100%;height:4px;border-radius:var(--pill);background:var(--line-2);outline:none;cursor:pointer;margin:10px 0} #cout input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--grad);border:2px solid var(--bg);box-shadow:0 0 0 1px var(--gold-deep);cursor:pointer;transition:transform .2s var(--ease)} #cout input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)} #cout input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--gold);border:2px solid var(--bg);cursor:pointer} #cout input[type=range]::-moz-range-track{height:4px;border-radius:var(--pill);background:var(--line-2)} #cout input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--gold);outline-offset:3px} @media(prefers-reduced-motion:reduce){ .anim-ready .reveal,.anim-ready .hero .sig{opacity:1!important;transform:none!important;filter:none!important} .aura .ring,.aura .r2,.aura .r3{animation:none!important} .tile .shot img{animation:none!important} .anim-ready .realis .tile{opacity:1!important;transform:none!important} .tile .tname,.tile .tmet{transform:none;opacity:1} .bgorbs .o1,.bgorbs .o2,.bgorbs .o3{animation:none!important} *{scroll-behavior:auto!important} } /* ===== section: services ===== */ #services{overflow:clip} #services .svc-head{max-width:760px;margin:0 0 clamp(48px,6vw,88px)} #services .svc-head h2{font-family:var(--font-display);font-size:clamp(30px,4.4vw,50px);line-height:1.05;letter-spacing:-.02em;font-weight:600;text-wrap:balance} #services .svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} #services .svc-row{position:relative;border-bottom:1px solid var(--line)} #services .svc-link{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"idx title arrow" "idx desc arrow";align-items:baseline;column-gap:clamp(18px,3vw,40px);row-gap:10px;padding:clamp(30px,3.8vw,44px) 0;color:var(--ink);text-decoration:none;transition:transform .55s var(--ease),padding-left .55s var(--ease)} #services .svc-idx{grid-area:idx;align-self:start;font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.18em;color:var(--ink-soft);padding-top:.55em;transition:color .45s var(--ease)} #services .svc-title{grid-area:title;font-family:var(--font-display);font-size:clamp(30px,5vw,62px);line-height:1.02;letter-spacing:-.03em;font-weight:600;transition:color .45s var(--ease)} #services .svc-desc{grid-area:desc;max-width:56ch;font-family:var(--font-text);font-size:clamp(14px,1.4vw,16px);line-height:1.55;color:var(--ink-soft);margin:0} #services .svc-arrow{grid-area:arrow;align-self:center;justify-self:end;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--gold);flex:none;opacity:0;transform:translateX(-10px);transition:opacity .45s var(--ease),transform .55s var(--ease),background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease)} #services .svc-arrow svg{width:18px;height:18px} #services .svc-media{position:absolute;top:50%;right:78px;width:240px;height:160px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gold);pointer-events:none;opacity:0;transform:translateY(-50%) translateX(18px) scale(.96);transition:opacity .5s var(--ease),transform .6s var(--ease);z-index:2} #services .svc-media svg{width:52px;height:52px} @media(hover:hover){ #services .svc-row:hover .svc-link{transform:translateX(8px)} #services .svc-row:hover .svc-idx{color:var(--gold)} #services .svc-row:hover .svc-arrow{opacity:1;transform:translateX(0);background:var(--grad);border-color:transparent;color:#0A0A0D} #services .svc-row:hover .svc-media{opacity:1;transform:translateY(-50%) translateX(0) scale(1)} #services .svc-list:hover .svc-row:not(:hover) .svc-title{color:var(--ink-soft)} } #services .svc-foot{display:flex;flex-wrap:wrap;gap:16px;margin-top:clamp(48px,6vw,80px)} @media(max-width:900px){ #services .svc-media{display:none} #services .svc-link{grid-template-columns:auto 1fr auto} #services .svc-arrow{opacity:1;transform:none;width:40px;height:40px} #services .svc-arrow svg{width:16px;height:16px} } @media(max-width:560px){ #services .svc-link{grid-template-columns:1fr auto;grid-template-areas:"idx arrow" "title arrow" "desc arrow";row-gap:12px} #services .svc-idx{padding-top:0} #services .svc-desc{max-width:none} } /* ===== section: automatiser ===== */ #automatiser .at-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center} #automatiser .at-left .eyebrow{margin-bottom:22px} #automatiser .at-left h2{font-family:var(--font-display);font-size:clamp(30px,4.4vw,52px);line-height:1.04;letter-spacing:-.02em;color:var(--ink);font-weight:700} #automatiser .at-left p.at-lead{margin-top:22px;max-width:38ch;font-size:17px;line-height:1.6;color:var(--ink-soft)} #automatiser .at-points{list-style:none;margin:34px 0 0;padding:0} #automatiser .at-points li{display:flex;align-items:flex-start;gap:14px;padding:16px 0;font-size:15.5px;line-height:1.45;color:var(--ink);border-top:1px solid var(--line)} #automatiser .at-points li:last-child{border-bottom:1px solid var(--line)} #automatiser .at-points li svg{width:18px;height:18px;flex:0 0 auto;margin-top:1px;color:var(--gold)} #automatiser .at-price{margin-top:34px} #automatiser .at-price-main{display:block;font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-.01em;color:var(--ink)} #automatiser .at-price-main b{color:var(--gold);font-weight:700} #automatiser .at-price-main em{font-style:normal;font-size:15px;font-weight:500;color:var(--ink-soft)} #automatiser .at-price-sub{display:block;margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--ink-soft);max-width:44ch} #automatiser .at-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:34px 32px} #automatiser .at-panel-head{display:block;font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:26px} #automatiser .at-form label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:11px} #automatiser .at-form textarea,#automatiser .at-form input{width:100%;background:var(--surface-2);border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;color:var(--ink);font:inherit;font-size:16px;transition:border-color .25s var(--ease),background .25s var(--ease)} #automatiser .at-form textarea{resize:none;line-height:1.55;min-height:118px} #automatiser .at-form textarea:focus,#automatiser .at-form input:focus{outline:none;border-color:var(--gold);background:#101014} #automatiser .at-form ::placeholder{color:rgba(243,240,233,.42)} #automatiser .at-help{font-size:12.5px;color:var(--ink-soft);margin-top:9px;line-height:1.45} #automatiser .at-field{margin-bottom:20px} #automatiser .at-field:last-of-type{margin-bottom:0} #automatiser .at-step .btn-gold{margin-top:24px;width:100%;justify-content:center;padding:0 24px} #automatiser .at-hidden{display:none} #automatiser .at-recap{background:rgba(210,162,117,.05);border:1px solid rgba(210,162,117,.2);border-radius:12px;padding:14px 16px;margin-bottom:24px;font-size:14px;color:var(--ink-soft);line-height:1.5} #automatiser .at-recap b{display:block;font-family:'Geist Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);margin-bottom:7px;font-weight:400} #automatiser .at-back{margin-top:18px;text-align:center} #automatiser .at-back button{background:none;border:none;color:var(--ink-soft);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:color .2s var(--ease)} #automatiser .at-back button:hover{color:var(--ink)} #automatiser .at-status{margin-top:18px;font-size:13.5px;text-align:center;min-height:1px;line-height:1.4} #automatiser .at-status.err{color:#e5695f} #automatiser .at-status.ok{color:var(--gold)} #automatiser .at-done{text-align:center;padding:20px 6px} #automatiser .at-done-ic{width:56px;height:56px;margin:0 auto;border-radius:50%;background:rgba(210,162,117,.09);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--gold)} #automatiser .at-done-ic svg{width:26px} #automatiser .at-done h3{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-.02em;margin-top:20px;color:var(--ink)} #automatiser .at-done p{margin-top:12px;color:var(--ink-soft);font-size:15px;line-height:1.55;max-width:38ch;margin-left:auto;margin-right:auto} @media(max-width:900px){#automatiser .at-grid{grid-template-columns:1fr;gap:44px}} @media(max-width:760px){#automatiser .at-panel{padding:28px 22px}} /* ===== section: process ===== */ #process .wrap{position:relative} #process .p-head{max-width:720px;margin:0 0 72px} #process .p-head h2{font-family:var(--font-display);font-size:clamp(32px,5vw,58px);line-height:1.02;letter-spacing:-.03em} #process .p-head p{margin-top:20px;font-family:var(--font-text);font-size:clamp(16px,1.5vw,18px);line-height:1.55;color:var(--ink-soft);max-width:52ch} #process .p-eyebrow{display:block;margin-bottom:22px} #process .p-list{border-top:1px solid var(--line)} #process .p-step{display:grid;grid-template-columns:auto 88px 1fr auto;align-items:start;column-gap:32px;padding:40px 4px;border-bottom:1px solid var(--line);position:relative} #process .p-step::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--grad);transition:width .9s var(--ease)} #process .p-step:hover::after{width:100%} #process .p-num{font-family:'Geist Mono',ui-monospace,monospace;font-size:clamp(30px,3.4vw,44px);line-height:1;font-weight:500;letter-spacing:-.02em;color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text;font-variant-numeric:tabular-nums;padding-top:2px} #process .p-icon{width:52px;height:52px;border-radius:14px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gold);transition:border-color .5s var(--ease),background .5s var(--ease)} #process .p-icon svg{width:24px;height:24px;display:block} #process .p-step:hover .p-icon{border-color:var(--line-2);background:var(--surface-2)} #process .p-body{min-width:0;padding-top:2px} #process .p-label{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)} #process .p-body h3{font-family:var(--font-display);font-size:clamp(21px,2.2vw,27px);line-height:1.1;letter-spacing:-.02em;margin-top:12px} #process .p-body p{font-family:var(--font-text);font-size:15.5px;line-height:1.6;color:var(--ink-soft);margin-top:12px;max-width:56ch} #process .p-meta{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;padding-top:6px;text-align:right} #process .p-meta em{font-style:normal;color:var(--gold)} @media(max-width:820px){ #process .p-head{margin-bottom:52px} #process .p-step{grid-template-columns:auto 1fr;column-gap:22px;row-gap:16px;padding:34px 2px} #process .p-icon{grid-row:1;grid-column:1;width:46px;height:46px;border-radius:12px} #process .p-icon svg{width:21px;height:21px} #process .p-num{grid-row:1;grid-column:2;align-self:center;font-size:26px} #process .p-body{grid-row:2;grid-column:1 / -1} #process .p-meta{grid-row:3;grid-column:1 / -1;text-align:left;padding-top:0} } @media(max-width:480px){ #process .p-body p{font-size:14.5px} } /* ===== section: chiffres ===== */ #chiffres .ch-head{max-width:720px;margin:0 0 64px} #chiffres .ch-head .eyebrow{display:block;margin-bottom:20px} #chiffres .ch-head h2{font-family:var(--font-display);font-size:clamp(28px,4vw,44px);line-height:1.05;letter-spacing:-.02em} #chiffres .ch-band{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} #chiffres .ch-item{padding:44px 36px 40px;border-left:1px solid var(--line)} #chiffres .ch-item:first-child{border-left:none;padding-left:0} #chiffres .ch-num{display:flex;align-items:baseline;gap:8px;font-family:var(--font-display);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text} #chiffres .ch-num .count{font-size:clamp(52px,6.5vw,84px);letter-spacing:-.03em} #chiffres .ch-num .ch-pre{font-size:clamp(15px,1.6vw,19px);font-weight:500;letter-spacing:-.01em;align-self:center;opacity:.9} #chiffres .ch-num .ch-unit{font-size:clamp(24px,3vw,38px);letter-spacing:-.02em} #chiffres .ch-label{margin-top:22px;font-family:var(--font-text);font-size:15px;line-height:1.5;color:var(--ink-soft);max-width:15em} @media(max-width:820px){ #chiffres .ch-band{grid-template-columns:1fr 1fr} #chiffres .ch-item{padding:36px 30px 34px;border-left:1px solid var(--line);border-top:1px solid var(--line)} #chiffres .ch-item:nth-child(1),#chiffres .ch-item:nth-child(2){border-top:none} #chiffres .ch-item:nth-child(odd){border-left:none;padding-left:0} } @media(max-width:520px){ #chiffres .ch-head{margin-bottom:44px} #chiffres .ch-band{grid-template-columns:1fr} #chiffres .ch-item{padding:30px 0;border-left:none;border-top:1px solid var(--line)} #chiffres .ch-item:nth-child(1){border-top:none} #chiffres .ch-label{max-width:none} } /* chiffres = section sombre ponctuelle (rythme DESIGN.md) : encre claire + or lumineux */ #chiffres .ch-head h2{color:#F6F4EF} #chiffres .ch-head h2 .gold{color:#D2A275} #chiffres .ch-band{border-color:rgba(246,244,239,.16)} #chiffres .ch-item{border-color:rgba(246,244,239,.14)} #chiffres .ch-num{background:linear-gradient(160deg,#D2A275,#B08356);-webkit-background-clip:text;background-clip:text} #chiffres .ch-label{color:rgba(246,244,239,.6)} /* ===== section: cout ===== */ /* ===== section: comparatif ===== */ #comparatif .wrap{position:relative} #comparatif .cmp-head{max-width:760px} #comparatif h2{margin:14px 0 0} #comparatif .cmp-sub{margin-top:16px;color:var(--ink-soft);font-size:clamp(1rem,1.4vw,1.125rem);line-height:1.5} #comparatif .cmp-grid{margin-top:72px;display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} #comparatif .col{padding:44px 0} #comparatif .col-old{padding-right:48px;border-right:1px solid var(--line)} #comparatif .col-new{position:relative;padding-left:48px} #comparatif .col-new::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--grad)} #comparatif .col-tag{display:flex;align-items:center;gap:10px;font-family:'Geist Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)} #comparatif .col-new .col-tag{color:var(--gold)} #comparatif .col-h{margin-top:14px;font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.05;letter-spacing:-.01em;color:var(--ink);display:flex;align-items:center;gap:12px} #comparatif .col-old .col-h{color:var(--ink-soft)} #comparatif .col-h svg{flex:none} #comparatif ul{list-style:none;margin:34px 0 0;padding:0} #comparatif li{display:flex;align-items:flex-start;gap:14px;padding:18px 0;border-top:1px solid var(--line);font-size:clamp(.95rem,1.25vw,1.0625rem);line-height:1.45;color:var(--ink)} #comparatif .col-old li{color:var(--ink-soft)} #comparatif li:first-of-type{border-top:0} #comparatif li .ic{flex:none;width:22px;height:22px;margin-top:1px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-2)} #comparatif li .ic svg{width:13px;height:13px} #comparatif .col-old li .ic{color:var(--ink-soft)} #comparatif .col-new li .ic{color:var(--gold);border-color:rgba(210,162,117,.32)} @media(max-width:760px){ #comparatif .cmp-grid{margin-top:52px;grid-template-columns:1fr;border-bottom:0} #comparatif .col{padding:36px 0} #comparatif .col-old{padding-right:0;border-right:0;border-bottom:1px solid var(--line)} #comparatif .col-new{padding-left:20px} #comparatif .col-new::before{width:2px} } /* ===== section: offres ===== */ #offres .of-intro{max-width:56ch;margin-top:18px;color:var(--ink-soft);font-size:clamp(15px,1.15vw,18px);line-height:1.55} #offres .of-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch} #offres .of-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px 28px;transition:border-color .5s var(--ease),transform .5s var(--ease)} #offres .of-card:hover{border-color:var(--line-2);transform:translateY(-3px)} #offres .of-feat{background:var(--surface-2);border-color:transparent} #offres .of-feat::before{content:"";position:absolute;inset:0;border-radius:var(--r);padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} #offres .of-feat:hover{transform:translateY(-3px)} #offres .of-badge{position:absolute;top:-11px;left:26px;display:inline-flex;align-items:center;height:22px;padding:0 12px;border-radius:var(--pill);background:var(--grad);color:#1A1407;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase} #offres .of-top{min-height:186px} #offres .of-name{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)} #offres .of-feat .of-name{color:var(--gold)} #offres .of-title{font-family:var(--font-display);font-size:22px;line-height:1.12;letter-spacing:-.02em;font-weight:800;margin:14px 0 0;color:var(--ink)} #offres .of-desc{margin-top:12px;color:var(--ink-soft);font-size:13.5px;line-height:1.5} #offres .of-price{padding:22px 0;border-top:1px solid var(--line);min-height:196px} #offres .of-from{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:14px} #offres .of-amt{display:flex;align-items:baseline;gap:4px;margin-top:8px} #offres .of-num{font-family:var(--font-display);font-size:46px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)} #offres .of-feat .of-num{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} #offres .of-cur{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--ink-soft);letter-spacing:-.01em} #offres .of-unit{display:block;margin-top:10px;font-size:12px;line-height:1.45;color:var(--ink-soft)} #offres .of-anchor{display:block;margin-top:8px;font-size:11.5px;line-height:1.4;color:rgba(20,19,15,.55)} #offres .of-launch{color:var(--gold);opacity:1} #offres .of-total{display:block;margin-top:8px;font-size:11.5px;line-height:1.4;color:rgba(20,19,15,.55)} #offres .of-list{list-style:none;margin:0;padding:22px 0 0;border-top:1px solid var(--line);flex:1 1 auto;display:flex;flex-direction:column;gap:11px} #offres .of-list li{display:flex;align-items:flex-start;gap:11px;font-size:13px;line-height:1.4;color:var(--ink)} #offres .of-list li svg{flex:0 0 auto;width:16px;height:16px;margin-top:1px;color:var(--gold)} #offres .of-card .of-cta{margin-top:24px;width:100%;justify-content:center;height:50px} #offres .of-note{margin-top:34px;text-align:center;font-size:14px;color:var(--ink-soft)} #offres .of-lux{margin:18px auto 0;max-width:760px;text-align:center;font-size:14px;color:var(--ink-soft);line-height:1.55;background:rgba(210,162,117,.05);border:1px solid rgba(210,162,117,.22);border-radius:var(--r);padding:16px 22px} #offres .of-lux b{color:var(--ink)} #offres .of-lux-tag{display:inline-block;margin-right:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#0d0c0b;background:var(--grad);border-radius:999px;padding:3px 10px;vertical-align:middle} #offres .of-note a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(210,162,117,.35);transition:border-color .4s var(--ease)} #offres .of-note a:hover{border-color:var(--gold)} #offres .of-guarantees{margin-top:30px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px;padding-top:30px;border-top:1px solid var(--line)} #offres .of-gb{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-soft)} #offres .of-gb svg{width:16px;height:16px;color:var(--gold)} @media(max-width:1080px){ #offres .of-grid{grid-template-columns:repeat(2,1fr);gap:16px} #offres .of-top{min-height:0} #offres .of-price{min-height:0} #offres .of-feat{order:-1} } @media(max-width:600px){ #offres .of-grid{grid-template-columns:1fr} #offres .of-num{font-size:42px} #offres .of-guarantees{gap:12px 20px} } /* ===== section: marquee ===== */ #marquee .mq-head{max-width:640px} #marquee .mq-head h2{margin-top:18px} #marquee .mq-head .lead{margin-top:16px} #marquee .mq-rail{margin-top:56px;position:relative;overflow:hidden; border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:34px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} #marquee .mq-track{display:flex;align-items:center;width:max-content; animation:mqScroll 72s linear infinite;will-change:transform} #marquee .mq-rail:hover .mq-track{animation-play-state:paused} #marquee .mq-item{display:inline-flex;align-items:center;gap:44px;padding:0 22px;flex:none} #marquee .mq-name{font-family:'Geist Mono',ui-monospace,monospace; font-size:clamp(16px,1.5vw,22px);letter-spacing:.02em;color:var(--ink-soft); white-space:nowrap;transition:color .4s var(--ease)} #marquee .mq-item:hover .mq-name{color:var(--ink)} #marquee .mq-dot{width:4px;height:4px;border-radius:50%;background:var(--line-2);flex:none} #marquee .mq-note{margin-top:24px;font-family:'Geist Mono',ui-monospace,monospace; font-size:12px;letter-spacing:.06em;color:var(--ink-soft);opacity:.7} /* logo wall (vrais logos) */ #marquee .lgw{margin-top:52px;display:flex;flex-wrap:wrap;align-items:stretch; border-top:1px solid var(--line);border-bottom:1px solid var(--line)} #marquee .lg{flex:1 1 0;min-width:110px;display:flex;align-items:center;justify-content:center; padding:36px 14px;position:relative} #marquee .lg + .lg::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:1px;height:32px;background:var(--line)} #marquee .lg svg{height:27px;width:auto;fill:var(--ink);opacity:.32; transition:opacity .45s var(--ease),fill .45s var(--ease),transform .45s var(--ease)} #marquee .lg:hover svg{opacity:1;transform:translateY(-2px)} #marquee .lg[data-b="go"]:hover svg{fill:#4285F4} #marquee .lg[data-b="ig"]:hover svg{fill:#E1306C} #marquee .lg[data-b="wa"]:hover svg{fill:#25D366} #marquee .lg[data-b="ms"]:hover svg{fill:#0084FF} #marquee .lg[data-b="gm"]:hover svg{fill:#EA4335} #marquee .lg[data-b="st"]:hover svg{fill:#635BFF} @keyframes mqScroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} @media(max-width:640px){ #marquee .mq-rail{margin-top:40px;padding:26px 0} #marquee .mq-item{gap:32px;padding:0 16px} #marquee .lgw{margin-top:40px} #marquee .lg{flex:1 1 33.33%;min-width:0;padding:26px 8px} #marquee .lg:nth-child(3n+1)::before{display:none} } @media(prefers-reduced-motion:reduce){ #marquee .mq-rail{-webkit-mask-image:none;mask-image:none;padding:30px 0} #marquee .mq-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:14px 0} #marquee .mq-track>.mq-item:nth-child(2){display:none} #marquee .mq-item{padding:6px 16px} } /* ===== section: faq ===== */ #faq .faq-head{max-width:760px;margin:0 0 64px} #faq h2{margin-top:18px} #faq .faq-list{border-top:1px solid var(--line)} #faq details{border-bottom:1px solid var(--line)} #faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:32px;padding:30px 4px;font-family:var(--font-display);font-weight:600;font-size:clamp(19px,2.4vw,23px);line-height:1.28;color:var(--ink);transition:color .35s var(--ease)} #faq summary::-webkit-details-marker{display:none} #faq summary:hover{color:var(--gold)} #faq .sign{position:relative;flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);margin-top:2px;transition:border-color .4s var(--ease),background .4s var(--ease)} #faq .sign::before,#faq .sign::after{content:"";position:absolute;top:50%;left:50%;width:13px;height:1.5px;background:var(--gold);transform:translate(-50%,-50%);transition:transform .4s var(--ease),opacity .4s var(--ease)} #faq .sign::after{transform:translate(-50%,-50%) rotate(90deg)} #faq details[open] .sign{border-color:rgba(210,162,117,.4);background:rgba(210,162,117,.08)} #faq details[open] .sign::after{transform:translate(-50%,-50%) rotate(0deg);opacity:0} #faq .answer{overflow:hidden;display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)} #faq details[open] .answer{grid-template-rows:1fr} #faq .answer-in{min-height:0} #faq .answer p{max-width:640px;padding:0 60px 32px 4px;color:var(--ink-soft);font-family:var(--font-text);font-size:16px;line-height:1.72} #faq .answer strong{color:var(--ink);font-weight:600} #faq .faq-foot{margin-top:56px;display:flex;flex-wrap:wrap;align-items:center;gap:22px} #faq .faq-foot span{font-family:var(--font-text);font-size:15.5px;color:var(--ink-soft)} @media(max-width:640px){ #faq summary{gap:20px;padding:26px 2px;font-size:18px} #faq .answer p{padding-right:0} #faq .faq-head{margin-bottom:44px} } /* ===== section: contact ===== */ /* ============ CONTACT (#contact) ============ */ #contact .ct-shell{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:start; border-top:1px solid var(--line);padding-top:64px} #contact .ct-left{max-width:44ch} #contact .ct-left .eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px} #contact .ct-left .eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.7} #contact .ct-left h2{margin-bottom:22px} #contact .ct-left .lead{margin-bottom:34px} #contact .ct-assur{list-style:none;display:flex;flex-direction:column;gap:0;margin:0 0 34px} #contact .ct-assur li{display:flex;align-items:center;gap:12px;padding:15px 0; border-top:1px solid var(--line);font-size:15px;color:var(--ink)} #contact .ct-assur li svg{width:18px;height:18px;color:var(--gold);flex:none} #contact .ct-mail{display:inline-flex;align-items:center;gap:11px;font-size:15px;color:var(--ink-soft); transition:color .3s var(--ease)} #contact .ct-mail svg{width:19px;height:19px;color:var(--gold);flex:none} #contact .ct-mail:hover{color:var(--ink)} /* ---- Formulaire : panneau surface + hairline (pas de glass, pas d'ombre) ---- */ #contact .ct-right{position:relative} #contact .ct-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:34px 34px 30px;min-height:392px;display:flex;flex-direction:column} #contact .ct-progress{display:flex;align-items:center;gap:16px;margin-bottom:28px} #contact .ct-progress .mono{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap} #contact .ct-progress .mono b{color:var(--gold);font-weight:500} #contact .ct-bar{flex:1;height:2px;border-radius:2px;background:var(--line-2);overflow:hidden} #contact .ct-bar i{display:block;height:100%;width:50%;background:var(--grad); transition:width .5s var(--ease)} #contact .ct-step{display:flex;flex-direction:column;gap:20px} #contact .ct-hidden{display:none} /* Chips besoin */ #contact .ct-needs{border:0;padding:0;margin:0;min-width:0} #contact .ct-needs legend{font-size:13px;font-weight:500;color:var(--ink-soft);margin-bottom:13px;padding:0} #contact .ct-chips{display:flex;flex-wrap:wrap;gap:9px} #contact .ct-chip{position:relative;cursor:pointer} #contact .ct-chip input{position:absolute;opacity:0;width:0;height:0} #contact .ct-chip span{display:inline-flex;align-items:center;gap:9px;padding:10px 15px; border:1px solid var(--line-2);border-radius:var(--pill);font-size:14px;font-weight:500;color:var(--ink); background:transparent;transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)} #contact .ct-chip span::before{content:"";width:14px;height:14px;border-radius:50%; border:1.5px solid var(--ink-soft);flex:none;transition:border-color .2s,background .2s,box-shadow .2s} #contact .ct-chip input:checked + span{border-color:var(--gold);background:rgba(210,162,117,.10);color:var(--gold)} #contact .ct-chip input:checked + span::before{background:var(--grad);border-color:transparent;box-shadow:inset 0 0 0 2.5px var(--surface)} #contact .ct-chip input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px} /* Champs */ #contact .ct-field{display:flex;flex-direction:column;gap:8px;min-width:0} #contact .ct-lbl{font-size:13px;font-weight:500;color:var(--ink-soft)} #contact .ct-lbl em{font-style:normal;opacity:.7;font-size:12px} #contact .ct-form input,#contact .ct-form textarea{width:100%;background:var(--bg-alt); border:1px solid var(--line-2);border-radius:14px;padding:14px 15px;color:var(--ink); font-family:var(--font-text);font-size:16px;line-height:1.5; transition:border-color .25s var(--ease),background .25s var(--ease)} #contact .ct-form input::placeholder,#contact .ct-form textarea::placeholder{color:var(--ink-soft)} #contact .ct-form input:focus,#contact .ct-form textarea:focus{outline:none;border-color:var(--gold);background:var(--surface-2)} #contact .ct-form input.ct-invalid,#contact .ct-form textarea.ct-invalid{border-color:#E08A6A} #contact .ct-form textarea{resize:vertical;min-height:82px} #contact .ct-row{display:flex;gap:16px} #contact .ct-row .ct-field{flex:1} /* Boutons du formulaire */ #contact .ct-form .btn-gold{justify-content:center;width:100%;margin-top:4px;border:0; font-family:var(--font-text);cursor:pointer;padding:0 8px 0 24px} #contact .ct-actions{display:flex;gap:12px;align-items:center;margin-top:4px} #contact .ct-form .btn-ghost{cursor:pointer;font-family:var(--font-text);flex:none;padding:0 20px;height:54px} #contact .ct-form .btn-gold.ct-send{flex:1} #contact .ct-recap{font-size:13.5px;color:var(--ink-soft);line-height:1.5} #contact .ct-recap b{color:var(--gold);font-weight:500} /* Succès */ #contact #ctSuccess{align-items:center;text-align:center;gap:16px;padding:24px 0 8px} #contact .ct-ok{display:grid;place-items:center;width:56px;height:56px;border-radius:50%; border:1px solid var(--line-2);color:var(--gold)} #contact .ct-ok svg{width:26px;height:26px} #contact .ct-ok-title{font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:-.02em} #contact .ct-ok-txt{font-size:15px;color:var(--ink-soft);line-height:1.55;max-width:34ch} #contact .ct-error{margin-top:14px;font-size:13.5px;color:#E9A78F;min-height:0;display:none} #contact .ct-error.show{display:block} @media(max-width:920px){ #contact .ct-shell{grid-template-columns:1fr;gap:44px;padding-top:52px} #contact .ct-left{max-width:none} } @media(max-width:560px){ #contact .ct-form{padding:26px 22px 24px} #contact .ct-row{flex-direction:column;gap:20px} #contact .ct-actions{flex-direction:column-reverse} #contact .ct-form .btn-ghost,#contact .ct-form .btn-gold.ct-send{width:100%;justify-content:center} } /* ============ FOOTER (.sitefoot) ============ */ .sitefoot{border-top:1px solid var(--line);background:var(--bg);padding:80px 0 46px;position:relative} .sitefoot .ft-top{display:flex;justify-content:space-between;gap:56px;flex-wrap:wrap;padding-bottom:52px} .sitefoot .ft-brand{max-width:340px} .sitefoot .ft-logo{display:inline-flex;align-items:center;gap:11px} .sitefoot .ft-logo svg{width:30px;height:30px} .sitefoot .ft-logo b{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--gold-deep)} .sitefoot .ft-tag{margin-top:16px;font-size:14px;color:var(--ink-soft);line-height:1.6} .sitefoot .ft-nav{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:flex-start;padding-top:4px} .sitefoot .ft-nav a{font-size:14.5px;color:var(--ink-soft);transition:color .25s var(--ease)} .sitefoot .ft-nav a:hover{color:var(--gold)} .sitefoot .ft-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap; padding-top:26px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-soft)} .sitefoot .ft-legal{display:inline-flex;align-items:center;gap:10px} .sitefoot .ft-legal a{color:var(--ink-soft);transition:color .25s var(--ease)} .sitefoot .ft-legal a:hover{color:var(--gold)} .sitefoot .ft-legal span{opacity:.5} .sitefoot .ft-note{margin-top:40px;padding-top:26px;border-top:1px solid var(--line); font-size:15px;color:var(--ink-soft);line-height:1.6;max-width:62ch} .sitefoot .ft-note a{color:var(--ink);font-weight:500;position:relative;white-space:nowrap; transition:color .25s var(--ease)} .sitefoot .ft-note a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px; background:var(--grad);transform:scaleX(1);transform-origin:left;transition:transform .35s var(--ease)} .sitefoot .ft-note a:hover{color:var(--gold)} .sitefoot .ft-note a:hover::after{transform:scaleX(0);transform-origin:right} @media(max-width:640px){ .sitefoot{padding:60px 0 40px} .sitefoot .ft-top{gap:36px;padding-bottom:40px} .sitefoot .ft-bottom{flex-direction:column;align-items:flex-start;gap:12px} .sitefoot .ft-note{margin-top:32px} } /* direction typo validee : Bricolage Grotesque en titrage, Satoshi en texte */ h1,h2,h3,.hero-h1,.svc-title,.sys-core h3{letter-spacing:-.032em;font-weight:700} .hero-h1{font-weight:800;letter-spacing:-.038em;font-variation-settings:'opsz' 96,'wdth' 100} /* ========================================================================== HERO EDITORIAL — fond clair + objet plein-bord ========================================================================== */ .hero{ /* jetons clairs poses sur la section : tout ce qui est dedans en herite, plutot que de redeclarer chaque couleur composant par composant */ --enc:#141310; --enc-doux:#605B51; --papier:#F3F2ED; --bronze:#8A6043; position:relative; z-index:61; isolation:isolate; display:grid; grid-template-columns:minmax(0,46fr) minmax(0,54fr); grid-template-rows:minmax(100dvh,auto); /* le hero noir posait place-items:center. Centrer, c'est dire aux cellules de se dimensionner sur leur contenu : le panneau, dont le seul enfant est en position absolue, tombait donc a zero de haut. */ align-items:stretch; justify-items:stretch; min-height:100dvh; padding:0; background:var(--papier); } /* le voile de lisibilite et le grain etaient calcules pour un fond noir : poses sur du papier, ils lavent toute la page en gris. */ .hero::before,.hero::after{content:none!important;display:none!important} /* le hero ancien empilait un canvas, une aura, un filigrane, une grille, un faisceau et quatorze petits O. Tout ca vivait pour un fond noir. */ .hero .hero-fx,.hero .hero-aura,.hero .hero-geo,.hero .hero-grid, .hero .hero-beam,.hero .agents{display:none!important} .hx-col{ grid-column:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; position:relative; z-index:2; padding:clamp(92px,10vh,124px) clamp(28px,3.4vw,56px) clamp(60px,7vh,80px) clamp(28px,5.4vw,88px); } /* le micro-titre : c'est lui qui dit les trois metiers, pour que le H1 n'ait pas a les porter et puisse rester une seule idee */ .hx-kick{ font-family:'Geist Mono',ui-monospace,monospace; font-size:10.5px; font-weight:400; letter-spacing:.24em; text-transform:uppercase; color:var(--enc-doux); display:flex; align-items:center; gap:.85em; margin-bottom:clamp(20px,2.6vh,30px); } .hx-pt{width:3px;height:3px;border-radius:50%;background:var(--bronze);opacity:.85;flex:none} /* retour a la grotesque de la marque. Le titre doit donc RETRECIR : une grotesque grasse occupe bien plus de largeur qu'une serif au meme corps, et la colonne gauche ne fait plus toute la page mais 46 % de l'ecran. */ .hx-h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(36px,3.8vw,58px); line-height:1.045; letter-spacing:-.032em; color:var(--enc); /* largeur en em, pas en ch ni en px : le point de retour a la ligne suit alors la taille de police, donc les cinq variantes gardent le meme nombre de lignes a toutes les largeurs d'ecran. C'est ca qui empeche le trou sous le titre. */ max-width:min(8.6em,100%); } .hx-h1 em{font-style:italic; font-weight:700; color:var(--bronze); /* Bricolage n'a pas de vrai italique : le navigateur incline les lettres, ce qui fait deborder le jambage des g/y/p sur la ligne suivante sans cette reserve */ padding-bottom:.06em} .hx-h1 .rota{font:inherit;letter-spacing:inherit} .hx-sub{margin-top:clamp(22px,3vh,34px); max-width:41ch; font-size:clamp(15.5px,1.15vw,17.5px); line-height:1.62; color:var(--enc-doux)} .hx-qui{margin-top:9px; font-size:clamp(13px,.95vw,14.5px); line-height:1.6; color:var(--enc-doux); opacity:.72} /* ── les deux pilules ── */ .hx-acts{display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,3.2vh,36px)} .hx-b1,.hx-b2{ display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 26px; border-radius:var(--pill); font-size:14.5px; font-weight:500; letter-spacing:-.005em; transition:transform .32s var(--ease-out), background .32s var(--ease-out), border-color .32s var(--ease-out), box-shadow .32s var(--ease-out); } .hx-b1{background:#141310; color:#F7F5F0; box-shadow:0 1px 2px rgba(20,19,16,.16),0 10px 26px -12px rgba(20,19,16,.5)} .hx-b1 svg{width:15px;height:15px;flex:none;transition:transform .32s var(--ease-out)} .hx-b1:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(20,19,16,.18),0 18px 38px -14px rgba(20,19,16,.58)} .hx-b1:hover svg{transform:translate(2px,-2px)} .hx-b1:active{transform:translateY(0) scale(.985)} .hx-b2{background:#FBFAF7; color:var(--enc); border:1px solid rgba(20,19,16,.16)} .hx-b2:hover{transform:translateY(-2px); border-color:rgba(20,19,16,.34); background:#fff} .hx-b2:active{transform:translateY(0) scale(.985)} /* ── le rappel de defilement ── */ .hx-scroll{display:inline-flex; align-items:center; gap:14px; margin-top:clamp(30px,4.4vh,52px); color:var(--enc-doux)} .hs-rond{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none; border:1px solid rgba(20,19,16,.18); transition:border-color .32s var(--ease-out), background .32s var(--ease-out)} .hs-rond svg{width:15px;height:15px; animation:hsGlisse 2.6s var(--ease-in-out-cubic) infinite} .hs-txt{font-family:'Geist Mono',ui-monospace,monospace; font-size:9.5px; letter-spacing:.26em; text-transform:uppercase} .hx-scroll:hover .hs-rond{border-color:rgba(20,19,16,.42); background:rgba(20,19,16,.04)} @keyframes hsGlisse{0%,72%,100%{transform:translateY(0);opacity:.75} 34%{transform:translateY(3.5px);opacity:1}} /* ── l'objet ── */ .hx-obj{ grid-column:2; position:relative; overflow:hidden; min-height:100dvh; align-self:stretch; /* le grand rayon en haut a gauche : c'est ce detail qui empeche le panneau de ressembler a une simple image collee dans une colonne */ border-radius:clamp(28px,4vw,64px) 0 0 0; box-shadow:-28px 0 70px -40px rgba(20,19,16,.4); } .hx-obj img{position:absolute;inset:0;width:100%;height:100%;display:block; object-fit:cover; object-position:52% 48%} /* ── la nav bascule en clair : la page s'ouvre desormais sur du papier ── */ .nav{background:rgba(252,252,250,.82)!important; border-color:rgba(20,19,16,.10)!important; backdrop-filter:saturate(150%) blur(16px); -webkit-backdrop-filter:saturate(150%) blur(16px); box-shadow:0 1px 2px rgba(20,19,16,.05),0 12px 34px -20px rgba(20,19,16,.3)!important} .nav .brand,.nav .nav-links a{color:#141310!important} .nav .brand .ba{color:#8A6043!important} .nav .brand svg{color:#A57450!important} .nav .nav-links a:hover{color:#8A6043!important} .nav-cta{background:#141310!important; color:#F7F5F0!important; border-color:transparent!important} .nav-cta .ic{background:rgba(255,255,255,.16)!important; color:#F7F5F0!important} .nav-burg span{background:#141310!important} /* ── mobile : l'objet passe sous le texte, en bandeau ── */ @media(max-width:900px){ .hero{grid-template-columns:1fr; grid-template-rows:auto minmax(300px,44vh); min-height:auto} .hx-col{min-height:0} .hx-col{grid-column:1; padding:clamp(122px,17vh,168px) 22px 46px} .hx-h1{max-width:none} .hx-obj img{object-position:52% 42%} .hx-obj{grid-column:1; min-height:0; border-radius:clamp(24px,7vw,44px) clamp(24px,7vw,44px) 0 0; box-shadow:0 -22px 56px -40px rgba(20,19,16,.4)} .hx-scroll{display:none} } @media(prefers-reduced-motion:reduce){ .hs-rond svg{animation:none} } /* ========================================================================== ACCORD ENTRE LE RENDU ET LE TEXTE Les couleurs ci-dessous ne sont pas choisies, elles sont MESUREES dans l'image : on echantillonne le rendu, on en sort l'or median, l'or profond et le ton du fond clair, et on peint la page avec. C'est ce qui fait qu'une photo et du texte ont l'air d'appartenir a la meme scene plutot que d'etre colles cote a cote. or median du rendu #BC9572 or profond du rendu #8A6043 <- l'accent du texte fond clair du rendu #EEE6E0 <- le papier de la colonne L'ancien or du site (#8A6043) etait un or JAUNE. Celui de l'objet tire sur le rose. Cote a cote, deux ors differents se voient immediatement. ========================================================================== */ .hero{--papier:#EFE8E2; --bronze:#8A6043; --enc:#171310; --enc-doux:#5F574F} /* la lumiere du rendu vient d'en haut a droite. La colonne de texte recoit donc une lueur tres faible venant du meme cote : deux moities eclairees par la meme source se lisent comme une seule image. */ .hx-col::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1; background:radial-gradient(120% 90% at 108% 12%,rgba(188,149,114,.20),transparent 62%)} /* l'ombre portee sur la couture assombrissait le raccord, exactement ce qu'on cherche a effacer. Elle devient chaude et presque nulle. */ .hx-obj{box-shadow:-24px 0 60px -46px rgba(138,96,67,.45)} /* ── le titre, en grand ── */ /* la colonne passe devant l'image : c'est la largeur qui donne la taille */ @media(min-width:901px){ .hero{grid-template-columns:minmax(0,58fr) minmax(0,42fr)} } .hx-h1{ font-size:clamp(33px,5.75vw,86px); line-height:1.015; letter-spacing:-.038em; max-width:none; } .hx-h1 em{ font-family:'Playfair Display','Playfair secours',Georgia,serif; font-style:italic; font-weight:400; color:var(--bronze); /* une serif a la meme taille parait plus petite : sa hauteur d'x est plus basse que celle d'une grotesque. On compense, sinon l'accroche a l'air d'un aparte. */ font-size:1.07em; /* et elle refuse le crenage serre de la grotesque : les empattements ont besoin d'air la ou une grotesque supporte d'etre comprimee */ letter-spacing:-.008em; /* l'italique descend plus bas que le romain : sans reserve, le jambage du g de « longueur » se fait couper par le bas de la boite */ padding-bottom:.05em; } /* meme technique que pour les deux autres polices : une secours aux metriques calees, pour que l'arrivee de la serif ne deplace pas la ligne */ @font-face{font-family:'Playfair secours'; src:local('Georgia'),local('Times New Roman'); size-adjust:103%} /* ── la preuve qui defile ── */ .hx-sub{margin-top:clamp(18px,2.4vh,28px);max-width:none; font-size:clamp(15px,1.15vw,17.5px);line-height:1.5;color:var(--enc-doux)} .hx-sub b{font-weight:600;font-style:normal;color:var(--bronze)} /* la rotation est en ligne dans un paragraphe : sans bloc, les variantes empilees feraient sauter la hauteur du paragraphe a chaque tour */ .hx-sub .rota{display:inline-grid;vertical-align:bottom;text-align:left} .hx-sub .rota > .rl{grid-area:1/1} .lede-fort{display:block;margin-bottom:14px;font-weight:600;color:var(--ink); font-size:1.08em;line-height:1.4} /* ========================================================================== MOBILE ========================================================================== */ @media(max-width:900px){ /* le hero tenait sur un ecran avec un titre court. Avec celui-ci il faut resserrer, sinon le bouton passe sous la ligne de flottaison et personne ne le voit sans scroller. */ .hx-col{padding:clamp(108px,15vh,150px) 22px 34px} .hx-kick{margin-bottom:20px;font-size:9.5px;letter-spacing:.2em} .hx-h1{max-width:none;line-height:1.08} .hx-sub{margin-top:16px} .hx-acts{margin-top:26px;gap:10px} .hx-b1,.hx-b2{height:50px;padding:0 22px;font-size:14px} /* le panneau perd un peu de hauteur : sur un telephone, ce qui compte au-dessus de la ligne de flottaison c'est le bouton, pas l'image */ /* une seule colonne, et on la redit ici pour ne dependre d'aucun ordre */ .hero{grid-template-columns:1fr; grid-template-rows:auto minmax(260px,38vh)} .hx-col{grid-column:1} .hx-obj{grid-column:1} /* le titre prend toute la largeur : c'est la seule facon d'etre gros sur 390 px */ .hx-h1{font-size:clamp(30px,8.2vw,42px);letter-spacing:-.034em} .hx-kick{white-space:nowrap} } /* ========================================================================== HERO EN CALQUES (superposition facon Aurora) ========================================================================== */ @media(min-width:901px){ .hero{display:block; position:relative; min-height:100dvh} /* calque 1 : l'image, en fond, sur les deux tiers droits */ .hx-obj{position:absolute; top:0; right:0; bottom:0; left:34%; width:auto; min-height:0; border-radius:clamp(28px,4vw,64px) 0 0 0; box-shadow:none; z-index:0} /* calque 2 : le voile. Opaque a gauche, nul a droite. C'est lui qui garantit la lisibilite ET qui efface la couture entre la page et l'image. */ .hx-voile{position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(97deg, var(--papier) 0%, var(--papier) 52%, rgba(239,232,226,.97) 58%, rgba(239,232,226,.72) 63%, rgba(239,232,226,.30) 67%, rgba(239,232,226,0) 70%)} /* calque 3 : le texte, par-dessus les deux */ .hx-col{position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-height:100dvh; max-width:60%; padding:clamp(92px,10vh,124px) 0 clamp(60px,7vh,80px) clamp(28px,5.4vw,88px)} /* le titre peut maintenant deborder sur l'image : il prend toute la largeur du calque, la ou il etait borne par une cellule de grille */ .hx-h1{font-size:clamp(33px,6.15vw,94px); line-height:1.005; letter-spacing:-.042em} } /* sur telephone on ne superpose pas : a 390 px de large, du texte sur une photo se lit mal quelle que soit la finesse du voile. On garde l'empilement. */ @media(max-width:900px){ .hx-voile{display:none} } /* les coupures ecrites ne valent que sur grand ecran */ .cd{display:none} @media(min-width:901px){ .cd{display:inline} .hx-h1{font-size:clamp(33px,6.35vw,97px); line-height:.97; letter-spacing:-.044em} /* l'interligne passe sous 1 : il faut rendre l'air perdu en haut, sinon les accents de la premiere ligne montent sous le micro-titre */ .hx-h1{padding-top:.06em} } /* ========================================================================== SECTION INFRASTRUCTURE IA Sombre, juste apres un hero clair : c'est la rupture de valeur qui donne le rythme au defilement. Une page d'un seul ton defile a plat. ========================================================================== */ .sys{ --enc:#F4F1EC; --enc-doux:rgba(244,241,236,.58); --bronze:#D2A275; background:#0B0A0C; color:var(--enc); padding:clamp(88px,11vh,150px) 0 clamp(80px,10vh,132px); position:relative; overflow:hidden; } /* la lumiere vient d'en haut a droite, comme dans le rendu du hero : deux sections eclairees par la meme source appartiennent au meme lieu */ .sys::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(78% 62% at 88% 0%,rgba(210,162,117,.13),transparent 62%)} .sys .wrap{position:relative;z-index:1} /* ── l'entete, en asymetrie : le titre prend les deux tiers, le chapo decroche plus bas a droite. Un bloc centre aurait dit « paragraphe » ; celui-ci dit « on affirme quelque chose ». ── */ .sys-head{display:grid;grid-template-columns:minmax(0,1fr);gap:0} @media(min-width:961px){ .sys-head{grid-template-columns:minmax(0,1.44fr) minmax(0,.56fr); column-gap:clamp(40px,5vw,88px);align-items:end} .sys-kick{grid-column:1/-1} .sys-lede{margin-top:0;padding-bottom:.5em} } .sys-kick{display:flex;align-items:center;gap:.7em;margin-bottom:clamp(22px,3vh,34px); font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.24em; text-transform:uppercase;color:var(--enc-doux)} .sys-dot{width:6px;height:6px;border-radius:50%;background:var(--bronze);flex:none} .sys-h2{font-size:clamp(31px,4.5vw,68px);line-height:1.02;letter-spacing:-.038em; font-weight:700;color:var(--enc);max-width:15ch} /* meme role, meme traitement que l'accroche du hero : la serif italique fine ne sert qu'a la chute d'un titre, jamais a autre chose */ .sys-h2 em{font-family:'Playfair Display','Playfair secours',Georgia,serif; font-style:italic;font-weight:400;font-size:1.07em;letter-spacing:-.008em; color:var(--bronze);padding-bottom:.05em} .sys-lede{margin-top:26px;max-width:44ch;font-size:clamp(15px,1.15vw,17px); line-height:1.62;color:var(--enc-doux)} /* ── la journee ── */ .sys-jour{margin-top:clamp(56px,7vh,92px);position:relative} .sys-legende{font-family:'Geist Mono',ui-monospace,monospace;font-size:10px; letter-spacing:.24em;text-transform:uppercase;color:rgba(244,241,236,.34); margin-bottom:22px} .sys-liste{list-style:none;margin:0;padding:0;position:relative} /* le rail : un filet vertical, et une bille qui descend de moment en moment */ .sys-rail{position:absolute;left:0;top:6px;bottom:6px;width:1px; background:linear-gradient(180deg,transparent,rgba(210,162,117,.34) 12%,rgba(210,162,117,.34) 88%,transparent)} .sys-bille{position:absolute;left:-3.5px;top:0;width:8px;height:8px;border-radius:50%; background:var(--bronze);box-shadow:0 0 0 4px rgba(210,162,117,.14)} .sys-liste li{ position:relative;padding:clamp(22px,2.8vh,32px) 0 clamp(22px,2.8vh,32px) clamp(22px,2.6vw,44px); border-top:1px solid rgba(244,241,236,.10); display:grid;grid-template-columns:minmax(0,1fr);gap:8px; transition:opacity .5s var(--ease), color .5s var(--ease); } .sys-liste li:last-child{border-bottom:1px solid rgba(244,241,236,.10)} @media(min-width:861px){ .sys-liste li{grid-template-columns:78px minmax(0,1.05fr) minmax(0,.95fr); column-gap:clamp(20px,2.6vw,44px);align-items:baseline;row-gap:10px} .sys-h{grid-row:1/3} .sys-t{grid-column:2} .sys-a{grid-column:2} .sys-r{grid-column:3;grid-row:1/3;align-self:center} } .sys-h{font-size:12px;letter-spacing:.06em;color:#E3BE99} /* la corvee : c'est elle qu'on doit lire en premier, c'est elle qui va etre rayee */ .sys-t{font-size:clamp(17px,1.65vw,24px);line-height:1.32; letter-spacing:-.02em;font-weight:600;color:rgba(244,241,236,.88)} /* c'est LUI qui porte le trait : un element en ligne, donc un fragment par ligne */ .sys-bar{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone; background-image:linear-gradient(var(--bronze),var(--bronze)); background-repeat:no-repeat;background-position:0 .58em;background-size:0% 2px} /* le trait se trace, tient le temps qu'on lise ce qui se passe a la place, puis s'efface pour le tour suivant */ .sys-jour.vu .sys-bar{animation:sysBarre 14.4s var(--ease-in-out-cubic) infinite; animation-delay:calc(var(--i) * 3.6s)} @keyframes sysBarre{ 0%,6%{background-size:0% 2px} 15%,24%{background-size:100% 2px} 28%{background-size:100% 2px} 29%,100%{background-size:0% 2px}} /* ce qui se passe a la place : plus discret que la corvee, c'est la reponse */ .sys-a{font-size:clamp(13.5px,1vw,15px);line-height:1.55;color:rgba(244,241,236,.74)} .sys-r{font-size:clamp(14px,1.05vw,15.5px);line-height:1.55;color:#E3BE99} @media(min-width:861px){ .sys-r{text-align:right} } /* ── le pied ── */ .sys-pied{margin-top:clamp(44px,5.6vh,72px);display:flex;flex-wrap:wrap; align-items:center;gap:clamp(18px,3vw,44px);justify-content:space-between} .sys-pied p{max-width:46ch;font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.6; color:var(--enc-doux)} .sys-cta{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px; border-radius:var(--pill);background:#F6F3EE;color:#141310;font-size:14.5px; font-weight:600;letter-spacing:-.005em;flex:none; transition:transform .32s var(--ease-out), box-shadow .32s var(--ease-out)} .sys-cta svg{width:15px;height:15px;transition:transform .32s var(--ease-out)} .sys-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.6)} .sys-cta:hover svg{transform:translate(2px,-2px)} .sys-cta:active{transform:translateY(0) scale(.985)} /* ========================================================================== LA BOUCLE. Un moment s'allume, les autres reculent, la bille se pose en face. Tout est en opacity et en transform : aucune propriete qui declenche un calcul de mise en page, donc 60 images par seconde meme sur un telephone modeste. Et elle est mise en pause par defaut : elle ne tourne que quand la section est a l'ecran (classe .vu posee par IntersectionObserver). Une animation qui tourne hors champ, c'est de la batterie payee pour rien. ========================================================================== */ .sys-liste li{opacity:.72} .sys-liste li .sys-t{color:rgba(244,241,236,.88)} .sys-jour.vu .sys-liste li{ animation:sysMoment 14.4s var(--ease-in-out-cubic) infinite; animation-delay:calc(var(--i) * 3.6s)} .sys-jour.vu .sys-bille{animation:sysBille 14.4s var(--ease-in-out-cubic) infinite} @keyframes sysMoment{ 0%,3%{opacity:.72} 6%,22%{opacity:1} 27%,100%{opacity:.72}} /* quatre paliers : la bille se cale sur le centre de chaque ligne */ @keyframes sysBille{ 0%,20%{transform:translateY(var(--p1,12%))} 25%,45%{transform:translateY(var(--p2,37%))} 50%,70%{transform:translateY(var(--p3,62%))} 75%,95%{transform:translateY(var(--p4,87%))} 100%{transform:translateY(var(--p1,12%))}} .sys-dot{animation:sysPouls 3.4s ease-in-out infinite} @keyframes sysPouls{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}} @media(prefers-reduced-motion:reduce){ .sys-liste li{opacity:1;animation:none!important} .sys-liste li .sys-t{color:var(--enc)} .sys-bar{animation:none!important;background-size:100% 2px} .sys-bille,.sys-dot{animation:none!important} } /* ========================================================================== FOND LIGHTFALL + SCENE ANIMEE ========================================================================== */ .sys-lf{position:absolute;inset:0;width:100%;height:100%;display:block; pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease);z-index:0} .sys-lf.on{opacity:.36} /* la lueur radiale d'origine faisait double emploi avec le fond anime : elle s'attenue pour ne pas laver les stries */ .sys::after{background:radial-gradient(78% 62% at 88% 0%,rgba(210,162,117,.07),transparent 62%)} .sys-scene{margin-top:clamp(48px,6vh,80px)} .sc{width:100%;height:auto;display:block;max-height:min(46vh,420px);margin-top:18px} .sc-c{opacity:0} .sc-mark{transform-box:fill-box;transform-origin:center} @media(prefers-reduced-motion:reduce){ .sc-c{opacity:1} .sys-lf{display:none} } @media(max-width:700px){ /* sur telephone la scene devient illisible en 1160 de large : on la coupe. La liste juste dessous dit exactement la meme chose, en mots. */ .sys-scene{display:none} } /* ========================================================================== BANDEAU DES CORVEES Deux pistes qui glissent en sens contraire. Le sens contraire n'est pas un caprice : deux bandes qui vont dans le meme sens se lisent comme une seule grosse barre, alors que deux sens opposes donnent du mouvement sans donner l'impression que la page defile toute seule. ========================================================================== */ .sys-bandeau{margin-top:clamp(52px,6.5vh,86px)} .bd{margin-top:20px;display:grid;gap:14px; /* le fondu sur les bords : sans lui, les mots sont coupes net au bord de l'ecran et ca ressemble a un bug d'affichage */ -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)} .bd-rail{overflow:hidden} .bd-piste{display:flex;width:max-content;will-change:transform} .bd-i{display:inline-flex;align-items:center;gap:11px;flex:none; margin-right:14px;padding:13px 22px 13px 18px;border-radius:var(--pill); border:1px solid rgba(244,241,236,.13);background:rgba(244,241,236,.035); font-size:clamp(14px,1.15vw,16.5px);font-weight:500;color:rgba(244,241,236,.9); white-space:nowrap} .bd-p{width:6px;height:6px;border-radius:50%;background:var(--bronze);flex:none} /* la piste fait exactement deux fois la serie : la ramener de moitie la remet donc pile sur elle-meme, et la boucle ne se voit pas */ .sys-bandeau.vu .bd-a .bd-piste{animation:bdG 46s linear infinite} .sys-bandeau.vu .bd-b .bd-piste{animation:bdD 52s linear infinite} @keyframes bdG{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes bdD{from{transform:translateX(-50%)}to{transform:translateX(0)}} .bd-rail:hover .bd-piste{animation-play-state:paused} .bd-branche{margin-top:clamp(26px,3.4vh,40px);max-width:64ch; font-size:clamp(15px,1.2vw,17.5px);line-height:1.6;color:rgba(244,241,236,.74)} .bd-branche b{font-weight:600;color:var(--enc)} .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} @media(prefers-reduced-motion:reduce){ .bd-piste{animation:none!important;flex-wrap:wrap;width:auto} .bd{-webkit-mask-image:none;mask-image:none} } /* ========================================================================== BOUTON « REALISM » — structure d'origine, couleurs Olympus Ses lueurs sont cyan et bleu electrique dans la version d'origine. Elles sont ici dans le bronze de la marque : c'est la seule chose que j'ai changee, parce qu'un bleu serait la seule couleur froide du site, et pile sur l'element le plus regarde de la page. ========================================================================== */ .nav-cta,.hx-b1,.btn-gold,.sys-cta{ display:inline-block!important; position:relative; isolation:isolate; padding:2px!important; border:none!important; height:auto!important; border-radius:16px!important; cursor:pointer; overflow:visible; /* le lisere : la lumiere entre par en haut a droite */ background:radial-gradient(circle 80px at 80% -10%, #D2A275, #181614)!important; box-shadow:none!important; transition:transform .3s var(--ease-out); } /* le halo derriere, en haut a droite */ .nav-cta::after,.hx-b1::after,.btn-gold::after,.sys-cta::after{ content:""; position:absolute; width:65%; height:60%; border-radius:120px; top:0; right:0; z-index:-1; box-shadow:0 0 20px rgba(176,131,86,.30); transition:box-shadow .3s var(--ease-out); } /* la lueur qui monte du coin bas gauche */ .blob1{position:absolute; width:70px; height:100%; border-radius:16px; bottom:0; left:0; pointer-events:none; background:radial-gradient(circle 60px at 0% 100%, #EBC79C, rgba(138,96,67,.5), transparent); box-shadow:-10px 10px 30px rgba(138,96,67,.18)} .blob2{position:absolute; width:70px; height:100%; border-radius:16px; bottom:0; right:0; pointer-events:none; opacity:.5; background:radial-gradient(circle 60px at 100% 0%, rgba(234,203,166,.5), transparent 70%)} /* la surface interieure : rayon 14 dans un exterieur a 16, d'ou l'arete concentrique */ .nav-cta .inner,.hx-b1 .inner,.btn-gold .inner,.sys-cta .inner{ position:relative; z-index:3; display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 25px; border-radius:14px; color:#F8F5EF; white-space:nowrap; background:radial-gradient(circle 80px at 80% -50%, #7C736B, #0F1111); font:inherit; letter-spacing:inherit; } .nav-cta .inner::before,.hx-b1 .inner::before,.btn-gold .inner::before,.sys-cta .inner::before{ content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none; background:radial-gradient(circle 60px at 0% 100%, rgba(235,199,156,.16), rgba(138,96,67,.08), transparent); } .nav-cta:hover,.hx-b1:hover,.btn-gold:hover,.sys-cta:hover{ transform:translateY(-2px)} .nav-cta:hover::after,.hx-b1:hover::after,.btn-gold:hover::after,.sys-cta:hover::after{ box-shadow:0 0 30px rgba(176,131,86,.46)} .nav-cta:active,.hx-b1:active,.btn-gold:active,.sys-cta:active{ transform:translateY(0) scale(.985)} /* la pastille de la fleche, sur la surface sombre */ .nav-cta .ic,.btn-gold .ic{background:rgba(248,245,239,.16)!important;color:#F8F5EF!important; border:none!important} .hx-b1 svg,.sys-cta svg,.btn-gold svg,.nav-cta svg{color:#F8F5EF} .btn-gold .inner > svg,.sys-cta .inner > svg,.hx-b1 .inner > svg{width:15px;height:15px;flex:none} /* le secondaire garde sa forme, mais adopte le meme rayon pour rester cohérent */ .hx-b2{border-radius:16px!important} @media(max-width:520px){ .hx-b1 .inner,.btn-gold .inner,.sys-cta .inner{padding:13px 20px} } /* la barre du haut n'a la place que du logo et du menu : le bouton vit dans le tiroir, ou il est deja. On rend son display:none a la regle d'origine. */ @media(max-width:760px){ .nav-cta{display:none!important} } /* ========================================================================== LES OUTILS SUR LESQUELS CA SE BRANCHE ========================================================================== */ .sys-outils{margin-top:clamp(58px,7vh,96px);text-align:center} #outils{padding:clamp(72px,8vh,116px) 0} .ol-h{font-size:clamp(24px,2.7vw,40px);line-height:1.18;letter-spacing:-.028em; font-weight:700;color:var(--enc);max-width:24ch;margin:0 auto} .ol-h em{font-family:'Playfair Display','Playfair secours',Georgia,serif; font-style:italic;font-weight:400;font-size:1.07em;letter-spacing:-.008em; color:var(--bronze);padding-bottom:.05em} .ol{margin-top:clamp(26px,3.4vh,42px);display:grid;gap:12px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 17%,#000 83%,transparent); mask-image:linear-gradient(90deg,transparent,#000 17%,#000 83%,transparent)} .ol-rail{overflow:hidden} .ol-piste{display:flex;width:max-content;will-change:transform} .ol-i{display:inline-flex;align-items:center;gap:10px;flex:none;margin-right:12px; padding:11px 20px;border-radius:14px; border:1px solid rgba(20,19,16,.10);background:#fff; box-shadow:0 1px 2px rgba(20,19,16,.04),0 10px 22px -16px rgba(20,19,16,.28); font-size:14px;font-weight:500;color:#26231E;white-space:nowrap} .ol-i svg{width:19px;height:19px;flex:none;fill:var(--c,#E3BE99)} .sys-outils.vu .ol-a .ol-piste{animation:olD 38s linear infinite} .sys-outils.vu .ol-b .ol-piste{animation:olD 52s linear infinite} @keyframes olD{from{transform:translateX(-50%)}to{transform:translateX(0)}} .ol-rail:hover .ol-piste{animation-play-state:paused} @media(prefers-reduced-motion:reduce){ .ol-piste{animation:none!important;flex-wrap:wrap;width:auto;justify-content:center} .ol{-webkit-mask-image:none;mask-image:none} } /* ========================================================================== MODALE « DECRIRE MA TACHE » ========================================================================== */ .md{position:fixed;inset:0;z-index:120;display:grid;place-items:center; padding:clamp(14px,3vh,40px) clamp(12px,3vw,28px)} .md[hidden]{display:none} .md-fond{position:absolute;inset:0;background:rgba(6,5,8,.72); backdrop-filter:blur(9px) saturate(120%);-webkit-backdrop-filter:blur(9px) saturate(120%); opacity:0;transition:opacity .34s var(--ease-out)} .md.on .md-fond{opacity:1} .md-panneau{position:relative;width:min(660px,100%);max-height:calc(100dvh - clamp(28px,6vh,80px)); overflow-y:auto;overscroll-behavior:contain; padding:clamp(26px,4vw,44px);border-radius:22px; background:linear-gradient(168deg,#17161B,#0C0B0E); /* le liseré intérieur : c'est lui qui donne l'arête de verre */ border:1px solid rgba(244,241,236,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 40px 80px -30px rgba(0,0,0,.85); color:#F4F1EC; opacity:0;transform:translateY(14px) scale(.985); transition:opacity .34s var(--ease-out), transform .42s var(--ease-out)} .md.on .md-panneau{opacity:1;transform:none} .md-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%; display:grid;place-items:center;border:1px solid rgba(244,241,236,.14); background:rgba(244,241,236,.04);color:#F4F1EC;cursor:pointer; transition:background .25s var(--ease), transform .25s var(--ease)} .md-x svg{width:16px;height:16px} .md-x:hover{background:rgba(244,241,236,.1)} .md-x:active{transform:scale(.94)} .md-kick{display:flex;align-items:center;gap:.6em;font-size:10px;letter-spacing:.22em; text-transform:uppercase;color:rgba(244,241,236,.6)} .md-pt{width:5px;height:5px;border-radius:50%;background:#D2A275;flex:none} .md-h{margin-top:14px;font-size:clamp(23px,3vw,34px);line-height:1.12;letter-spacing:-.03em; font-weight:700;max-width:19ch} .md-h em{font-family:'Playfair Display','Playfair secours',Georgia,serif;font-style:italic; font-weight:400;font-size:1.07em;letter-spacing:-.008em;color:#D2A275;padding-bottom:.05em} .md-lede{margin-top:12px;font-size:14.5px;line-height:1.6;color:rgba(244,241,236,.7);max-width:46ch} .md-form{margin-top:clamp(24px,3.4vh,34px);display:grid;gap:clamp(16px,2.2vh,22px)} .md-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,18px)} .md-champ{display:grid;gap:8px} .md-champ label,.md-lab{font-size:13px;font-weight:600;letter-spacing:-.005em;color:#F4F1EC} .md-opt{font-weight:400;color:rgba(244,241,236,.5)} .md-champ input,.md-champ textarea{ width:100%;padding:13px 15px;border-radius:12px; border:1px solid rgba(244,241,236,.14);background:rgba(244,241,236,.045); color:#F4F1EC;font:inherit;font-size:15px;line-height:1.5; /* 16 px minimum sur mobile : en dessous, iOS zoome sur le champ et ne dezoome jamais. On l'impose plus bas dans la media query. */ transition:border-color .25s var(--ease), background .25s var(--ease)} .md-champ textarea{resize:vertical;min-height:104px} .md-champ input::placeholder,.md-champ textarea::placeholder{color:rgba(244,241,236,.34)} .md-champ input:focus,.md-champ textarea:focus{outline:none; border-color:rgba(210,162,117,.62);background:rgba(244,241,236,.07)} .md-champ.err input,.md-champ.err textarea{border-color:#E08A6A} .md-aide{font-size:12.5px;line-height:1.5;color:rgba(244,241,236,.5)} .md-err{font-size:12.5px;line-height:1.45;color:#E9A78F;display:none} .md-champ.err .md-err{display:block} .md-chips{display:flex;flex-wrap:wrap;gap:8px} .md-chip{padding:10px 15px;border-radius:11px;cursor:pointer;font:inherit;font-size:13.5px; font-weight:500;color:rgba(244,241,236,.8); border:1px solid rgba(244,241,236,.14);background:rgba(244,241,236,.035); transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease)} .md-chip:hover{border-color:rgba(244,241,236,.3)} .md-chip:active{transform:scale(.97)} .md-chip[aria-checked="true"]{background:rgba(210,162,117,.16); border-color:rgba(210,162,117,.62);color:#F4E7D6} .md-pied{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:4px} .md-note{font-size:12.5px;line-height:1.5;color:rgba(244,241,236,.5);max-width:30ch} .md-envoi[disabled]{opacity:.62;pointer-events:none} .md-global{font-size:13.5px;line-height:1.5;color:#E9A78F;display:none} .md-global.on{display:block} .md-ok{text-align:center;padding:clamp(12px,3vh,26px) 0} .md-ok-rond{width:56px;height:56px;border-radius:50%;display:grid;place-items:center; margin:0 auto 20px;color:#0C0B0E;background:linear-gradient(160deg,#F0DCC0,#C08A4E)} .md-ok-rond svg{width:24px;height:24px} .md-ok h3{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.03em;font-weight:700} .md-ok p{margin-top:12px;font-size:14.5px;line-height:1.62;color:rgba(244,241,236,.72); max-width:42ch;margin-inline:auto} .md-ok-x{margin-top:24px;padding:12px 24px;border-radius:12px;cursor:pointer;font:inherit; font-size:14px;font-weight:600;color:#F4F1EC; border:1px solid rgba(244,241,236,.18);background:rgba(244,241,236,.05)} .md-ok-x:hover{background:rgba(244,241,236,.1)} .md-ok-x:active{transform:scale(.985)} @media(max-width:640px){ .md-duo{grid-template-columns:1fr} /* iOS zoome sur tout champ sous 16 px et ne revient jamais en arriere */ .md-champ input,.md-champ textarea{font-size:16px} .md-panneau{padding:24px 18px;border-radius:18px} .md-pied{gap:12px} } @media(prefers-reduced-motion:reduce){ .md-fond,.md-panneau{transition:none} } /* la page ne defile plus derriere la modale */ html.md-open,html.md-open body{overflow:hidden} /* ========================================================================== SECTION AUDIT : entete centree, trois etapes, trois schemas animes ========================================================================== */ .au{padding:clamp(84px,10vh,140px) 0} .au-head{text-align:center;max-width:62ch;margin-inline:auto} .au-kick{display:inline-flex;align-items:center;gap:.65em;margin-bottom:20px; font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)} .au-pt{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none} .au-head h2{font-size:clamp(28px,3.7vw,52px);line-height:1.08;letter-spacing:-.032em} .au-head h2 em{font-family:'Playfair Display','Playfair secours',Georgia,serif; font-style:italic;font-weight:400;font-size:1.07em;letter-spacing:-.008em; color:var(--gold);padding-bottom:.05em} .au-head .lede{margin:22px auto 0;max-width:56ch;font-size:clamp(15px,1.2vw,17.5px); line-height:1.62;color:var(--ink-soft)} .au-cta{margin-top:clamp(26px,3.4vh,38px)} .au-head .lede b{font-weight:600;color:var(--ink)} .au-etapes{list-style:none;margin:clamp(56px,7vh,92px) 0 0;padding:0;position:relative; display:grid;grid-template-columns:1fr;gap:clamp(40px,5vh,56px)} .au-etapes li{position:relative} .au-num{display:block;font-size:11px;letter-spacing:.2em;color:var(--gold);margin-bottom:16px} .au-etapes h3{margin-top:20px;font-size:clamp(19px,1.8vw,25px);letter-spacing:-.024em; line-height:1.2;font-weight:700} .au-etapes p{margin-top:10px;font-size:clamp(14px,1.05vw,15.5px);line-height:1.62; color:var(--ink-soft);max-width:38ch} /* le fil qui relie les trois etapes : il dit que c'est une sequence */ .au-fil{display:none} @media(min-width:901px){ .au-etapes{grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,52px)} .au-fil{display:block;position:absolute;left:6%;right:6%;top:-26px;height:1px; background:linear-gradient(90deg,transparent,var(--line-2),var(--line-2),transparent)} /* le fil se trace au defilement : c'est le lecteur qui l'avance, pas une boucle. Origine a gauche, donc il pousse depuis la premiere etape. */ .au-fil{transform:scaleX(0);transform-origin:left center} .au-fil-p{position:absolute;top:-3px;right:-3px;width:7px;height:7px;border-radius:50%; background:var(--gold);box-shadow:0 0 0 4px rgba(138,96,67,.12)} } /* ── les schemas ── */ /* etat de depart des trois etapes : le flou en plus du deplacement donne une arrivee « nette » plutot qu'un simple fondu */ .au-r{opacity:0;transform:translateY(26px);filter:blur(7px)} .au-sch{border-radius:16px;border:1px solid var(--line);background:var(--surface); box-shadow:0 1px 2px rgba(20,19,16,.03),0 18px 34px -26px rgba(20,19,16,.22); padding:14px 12px} .au-sch svg{width:100%;height:auto;display:block} /* 01 : la voix, et ce qu'on note en face */ .sc1-onde rect{fill:var(--gold);opacity:.34;transform-box:fill-box;transform-origin:center} .au.vu .sc1-onde rect{animation:sc1B 1.5s var(--ease-in-out-cubic) infinite; animation-delay:var(--d)} @keyframes sc1B{0%,100%{transform:scaleY(.34);opacity:.3}50%{transform:scaleY(1.5);opacity:.85}} .sc1-notes circle{fill:var(--gold)} .sc1-notes rect{fill:var(--ink);opacity:.16} .sc1-notes g{opacity:0;transform-box:fill-box;transform-origin:left center} .au.vu .sc1-notes g{animation:sc1N 5.4s var(--ease-out) infinite;animation-delay:var(--d)} @keyframes sc1N{0%{opacity:0;transform:translateX(-8px)} 10%,72%{opacity:1;transform:translateX(0)}86%,100%{opacity:0;transform:translateX(0)}} /* 02 : un editeur de flux. Les blocs s'emboitent, les liaisons se tracent, puis une donnee circule dedans. */ .sc2-blocs rect{fill:none;stroke:var(--ink);stroke-width:1.4;opacity:.26} .sc2-blocs .sc2-b{fill:var(--gold);stroke:none;opacity:1} .sc2-blocs .sc2-l{fill:var(--ink);stroke:none;opacity:.2} .sc2-blocs g{opacity:0;transform-box:fill-box;transform-origin:center} .au.vu .sc2-blocs g{animation:sc2B 6s var(--ease-out) infinite;animation-delay:var(--d)} @keyframes sc2B{0%{opacity:0;transform:scale(.9)}9%,80%{opacity:1;transform:scale(1)} 92%,100%{opacity:0;transform:scale(.94)}} .sc2-fils path{fill:none;stroke:var(--gold);stroke-width:1.5;opacity:.6; stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:110;stroke-dashoffset:110} .au.vu .sc2-fils path{animation:sc2F 6s var(--ease-in-out-cubic) infinite;animation-delay:var(--d)} @keyframes sc2F{0%{stroke-dashoffset:110}18%,82%{stroke-dashoffset:0}100%{stroke-dashoffset:110}} .sc2-coeur rect{fill:none;stroke:var(--gold);stroke-width:1.8} .sc2-pt{fill:var(--gold)} .sc2-halo{fill:none;stroke:var(--gold);stroke-width:1.4;transform-box:fill-box; transform-origin:center;opacity:0} .au.vu .sc2-halo{animation:sc2H 6s var(--ease-out) infinite;animation-delay:1.2s} @keyframes sc2H{0%,12%{transform:scale(1);opacity:.65}42%{transform:scale(1.9);opacity:0}100%{opacity:0}} /* la donnee qui circule : elle suit exactement le trace de la liaison */ .sc2-flux{fill:var(--gold);opacity:0; offset-path:path("M74 34 L104 34 L104 66 L110 66");offset-rotate:0deg} .au.vu .sc2-flux{animation:sc2X 6s var(--ease-in-out-cubic) infinite;animation-delay:.9s} @keyframes sc2X{0%{offset-distance:0%;opacity:0}6%{opacity:1} 28%{offset-distance:100%;opacity:1}34%{opacity:0}100%{offset-distance:100%;opacity:0}} /* 03 : une mise en relation. Les outils s'allument, les liaisons s'etablissent, puis chacun se coche. Ce n'est pas un branchement, c'est un raccordement. */ .sc3-outils rect{fill:none;stroke:var(--ink);stroke-width:1.4;opacity:.28} .sc3-outils g{opacity:0;transform-box:fill-box;transform-origin:center} .au.vu .sc3-outils g{animation:sc3O 6s var(--ease-out) infinite;animation-delay:var(--d)} @keyframes sc3O{0%{opacity:0;transform:scale(.86)}8%,84%{opacity:1;transform:scale(1)} 94%,100%{opacity:0}} .sc3-ok{fill:var(--gold);opacity:0;transform-box:fill-box;transform-origin:center} .au.vu .sc3-ok{animation:sc3K 6s var(--ease-out) infinite;animation-delay:var(--d)} @keyframes sc3K{0%,20%{opacity:0;transform:scale(.4)}30%,84%{opacity:1;transform:scale(1)} 94%,100%{opacity:0}} .sc3-fils path{fill:none;stroke:var(--gold);stroke-width:1.5;opacity:.55; stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100} .au.vu .sc3-fils path{animation:sc3W 6s var(--ease-in-out-cubic) infinite;animation-delay:var(--d)} @keyframes sc3W{0%{stroke-dashoffset:100}20%,84%{stroke-dashoffset:0}100%{stroke-dashoffset:100}} .sc3-anneau{fill:none;stroke:var(--gold);stroke-width:1.6;opacity:.85} .sc3-pulse{fill:none;stroke:var(--gold);stroke-width:1.4;opacity:0; transform-box:fill-box;transform-origin:center} .au.vu .sc3-pulse{animation:sc3P 6s var(--ease-out) infinite;animation-delay:1.5s} @keyframes sc3P{0%,8%{transform:scale(1);opacity:.6}45%{transform:scale(1.75);opacity:0}100%{opacity:0}} .sc3-o{fill:var(--gold)} @media(prefers-reduced-motion:reduce){ .au-sch *{animation:none!important} .sc1-notes g,.sc2-blocs g,.sc3-outils g,.sc3-ok{opacity:1} .sc2-fils path,.sc3-fils path{stroke-dashoffset:0} .sc2-flux{display:none} } /* ========================================================================== NOS AUTRES SERVICES — un rail horizontal de grosses cartes Le rail deborde du conteneur a droite : une carte coupee au bord dit « il y en a d'autres » mieux qu'une fleche ou un texte « faites defiler ». ========================================================================== */ .svx{--enc:#F4F1EC; --enc-doux:rgba(244,241,236,.6); --bronze:#D2A275; background:#0B0A0C; color:var(--enc); padding:clamp(84px,10vh,140px) 0; position:relative; overflow:hidden} .svx::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(72% 58% at 84% 0%,rgba(210,162,117,.09),transparent 60%)} .svx .wrap{position:relative;z-index:1} .svx-head{text-align:center;max-width:58ch;margin-inline:auto;position:relative} .svx-head::before{content:"";position:absolute;inset:-40px -80px;z-index:-1;pointer-events:none; background:radial-gradient(60% 60% at 50% 50%,rgba(11,10,12,.88),rgba(11,10,12,.5) 55%,transparent 78%)} .svx-kick{display:inline-flex;align-items:center;gap:.65em;margin-bottom:20px; font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--enc-doux)} .svx-pt{width:5px;height:5px;border-radius:50%;background:var(--bronze);flex:none} .svx-head h2{font-size:clamp(28px,3.7vw,52px);line-height:1.08;letter-spacing:-.032em; font-weight:700;color:var(--enc)} .svx-head h2 em{font-family:'Playfair Display','Playfair secours',Georgia,serif; font-style:italic;font-weight:400;font-size:1.07em;letter-spacing:-.008em; color:var(--bronze);padding-bottom:.05em} .svx-head .lede{margin:20px auto 0;max-width:50ch;font-size:clamp(15px,1.2vw,17px); line-height:1.62;color:var(--enc-doux)} /* ── le carrousel ──────────────────────────────────────────────────────── */ .cv{position:relative;z-index:1;margin-top:clamp(44px,6vh,78px); overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory; scrollbar-width:none;-ms-overflow-style:none;padding:10px 0 30px} .cv::-webkit-scrollbar{display:none} .cv:focus-visible{outline:2px solid var(--bronze);outline-offset:6px;border-radius:24px} /* le remplissage lateral vaut la moitie de la place restante : une carte seule se retrouve donc pile au centre, et la premiere d'une serie aussi */ .cv-piste{display:flex;gap:clamp(18px,2.4vw,40px);width:max-content; padding-inline:max(22px, calc(50vw - min(33vw, 310px)))} .cv-c{flex:none;width:min(66vw,620px);scroll-snap-align:center; /* l'echelle est posee par le script, image par image */ transform:scale(var(--k,1));transform-origin:center; opacity:var(--o,1);will-change:transform,opacity} .cv-vue{position:relative;border-radius:22px;overflow:hidden; aspect-ratio:16/10; border:1px solid rgba(244,241,236,.13);background:#131217; box-shadow:0 40px 90px -45px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05)} /* ── la grille inclinee : quatre rangees, une sur deux a contresens ── */ .gm{position:absolute;top:50%;left:50%; /* elle deborde largement : une fois inclinee de 15 degres, une grille a la taille de la carte laisserait des coins vides */ width:190%;height:200%; display:grid;grid-template-rows:repeat(4,1fr);gap:clamp(6px,.9vw,12px); transform:translate(-50%,-50%) rotate(-15deg);transform-origin:center} .gm-r{display:grid;width:200%;grid-template-columns:repeat(10,1fr); gap:clamp(6px,.9vw,12px);will-change:transform} .gm-i{display:block;overflow:hidden;border-radius:8px;background:#141318; border:1px solid rgba(244,241,236,.08); box-shadow:0 8px 20px -12px rgba(0,0,0,.85)} .gm-i img{width:100%;height:100%;object-fit:cover;display:block} /* chaque rangee fait deux fois sa serie : la ramener de moitie la remet pile sur elle-meme, donc on ne voit jamais la couture */ .svx.vu .gm-r0{animation:gmG 42s linear infinite} .svx.vu .gm-r1{animation:gmD 54s linear infinite} .svx.vu .gm-r2{animation:gmG 48s linear infinite} .svx.vu .gm-r3{animation:gmD 38s linear infinite} @keyframes gmG{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes gmD{from{transform:translateX(-50%)}to{transform:translateX(0)}} .cv-c:hover .gm-r{animation-play-state:paused} /* le voile de bord : sans lui les tuiles sont tranchees net au bord de la carte */ .mo-voile{position:absolute;inset:0;pointer-events:none; background:radial-gradient(125% 110% at 50% 50%,transparent 48%,rgba(14,13,17,.34) 80%,rgba(14,13,17,.72) 100%)} /* la legende est SOUS la carte, pas dedans : elle appartient a la page */ .cv-legende{margin:clamp(26px,3.4vh,44px) auto 0;text-align:center; font-size:clamp(26px,3.6vw,54px);line-height:1.06;letter-spacing:-.034em; font-weight:700;color:var(--enc);max-width:20ch} .cv-legende em{font-family:'Playfair Display','Playfair secours',Georgia,serif; font-style:italic;font-weight:400;font-size:1.07em;letter-spacing:-.008em; color:var(--bronze);padding-bottom:.05em} @media(max-width:760px){ .cv-piste{padding-inline:16px} .cv-c{width:min(88vw,420px)} .cv-vue{aspect-ratio:4/3} .cv-chrome{height:28px} .cv-ecran{top:28px} } @media(prefers-reduced-motion:reduce){ .cv-site.on img{animation:none!important} .cv-c{transform:none!important;opacity:1!important} } @media(prefers-reduced-motion:reduce){ .svx-vue *{animation:none!important} .ads-res g,.pub-plans rect,.gbp-et path{opacity:1} .svx-defile{animation:none!important} } /* le tunnel : un fond, donc il reste derriere et discret */ .svx-tn{position:absolute;inset:0;width:100%;height:100%;display:block; pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease);z-index:0} .svx-tn.on{opacity:.32} /* la lueur radiale faisait double emploi avec le tunnel */ .svx::after{background:radial-gradient(70% 56% at 84% 0%,rgba(210,162,117,.05),transparent 58%)} /* la carte vide : juste le cadre, pour eprouver le carrousel */ .cv-vide .cv-vue{background:linear-gradient(168deg,#151419,#0D0C10); border-style:dashed;border-color:rgba(244,241,236,.09)} /* la legende se rapproche de la carte et perd du corps : collee a l'image elle en devient la legende, posee loin dessous elle redevenait un titre de section */ .cv-bas{margin-top:clamp(14px,1.8vh,22px);text-align:center;display:flex; flex-direction:column;align-items:center;gap:clamp(16px,2.2vh,26px)} .cv-legende{margin:0;max-width:22ch; font-size:clamp(22px,2.7vw,40px);line-height:1.08;letter-spacing:-.032em} /* ── la carte publicite : avant / apres ── */ .cv-pub{position:relative;background:#0B0A0E} .pb{position:absolute;inset:0;overflow:hidden} .pb-p,.pb-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* la photo est AU-DESSUS de la video et se retire : c'est elle qu'on decouvre en premier, et le volet la balaie pour reveler ce qu'il y a dessous */ .pb-p{z-index:2} .svx.vu .pb-p{animation:pbP 11s var(--ease-in-out-cubic) infinite} @keyframes pbP{0%,26%{clip-path:inset(0 0 0 0)}42%,88%{clip-path:inset(0 0 0 100%)} 100%{clip-path:inset(0 0 0 0)}} /* le volet : un trait de lumiere qui accompagne la coupe */ .pb-volet{position:absolute;top:0;bottom:0;width:2px;left:0;z-index:3;opacity:0; background:linear-gradient(180deg,transparent,#F0DCC0,transparent); box-shadow:0 0 18px 3px rgba(240,220,192,.5)} .svx.vu .pb-volet{animation:pbV 11s var(--ease-in-out-cubic) infinite} @keyframes pbV{0%,26%{left:0;opacity:0}30%{opacity:1}42%{left:100%;opacity:1} 46%,100%{left:100%;opacity:0}} .pb-tag{position:absolute;top:12px;left:12px;z-index:4; padding:6px 12px;border-radius:20px;font-size:9.5px;letter-spacing:.2em; text-transform:uppercase;border:1px solid rgba(244,241,236,.16); background:rgba(12,11,14,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .pb-a{color:rgba(244,241,236,.78)} .pb-b{color:#E3BE99;opacity:0} .svx.vu .pb-a{animation:pbTA 11s steps(1,end) infinite} .svx.vu .pb-b{animation:pbTB 11s steps(1,end) infinite} @keyframes pbTA{0%,36%{opacity:1}37%,100%{opacity:0}} @keyframes pbTB{0%,36%{opacity:0}37%,92%{opacity:1}93%,100%{opacity:0}} .pb-nom{position:absolute;top:14px;right:14px;left:auto;z-index:4;text-align:right; font-size:9.5px;letter-spacing:.2em;text-transform:uppercase; color:rgba(244,241,236,.4)} @media(prefers-reduced-motion:reduce){ .pb-p,.pb-volet,.pb-a,.pb-b{animation:none!important} .pb-p{clip-path:inset(0 0 0 0)} .pb-b{opacity:0} } /* ── le carrousel, version pilotable ── */ .cv-cadre{position:relative} .cv{cursor:grab;scroll-behavior:smooth} .cv.tire{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;user-select:none} /* les cartes se chevauchent : celle qu'on passe glisse DERRIERE la suivante */ .cv-piste{gap:0} .cv-c{margin-right:clamp(-90px,-6vw,-40px); transform:perspective(1700px) rotateY(var(--ry,0deg)) scale(var(--k,1)); z-index:var(--z,1); transition:none} .cv-c:last-child{margin-right:0} .cv.tire .cv-c,.cv.tire img,.cv.tire video{pointer-events:none} /* les fleches : sans elles, personne ne devine qu'il y a une suite */ .cv-fl{position:absolute;top:50%;transform:translateY(-50%);z-index:6; width:52px;height:52px;border-radius:50%;display:grid;place-items:center;cursor:pointer; border:1px solid rgba(244,241,236,.16);color:#F4F1EC; background:rgba(12,11,14,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); transition:background .28s var(--ease), transform .28s var(--ease-out), opacity .28s var(--ease)} .cv-fl svg{width:19px;height:19px} .cv-fl-g{left:clamp(10px,3vw,44px)} .cv-fl-d{right:clamp(10px,3vw,44px)} .cv-fl:hover{background:rgba(12,11,14,.8);border-color:rgba(244,241,236,.34)} .cv-fl:active{transform:translateY(-50%) scale(.93)} .cv-fl[disabled]{opacity:.24;pointer-events:none} @media(max-width:760px){ .cv-fl{display:none} } /* ── avant / apres : pose au centre, sans boite ── */ .pb-tag{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%); z-index:4;text-align:center;padding:0;border:none;background:none;backdrop-filter:none; -webkit-backdrop-filter:none;border-radius:0; font-family:'Playfair Display','Playfair secours',Georgia,serif;font-style:italic; font-weight:400;font-size:clamp(30px,3.6vw,52px);letter-spacing:-.01em; /* l'ombre n'est pas une coquetterie : sans elle le mot disparait des qu'une zone claire passe dessous */ text-shadow:0 2px 26px rgba(8,7,10,.85), 0 1px 3px rgba(8,7,10,.6)} .pb-a{color:#F4F1EC} .pb-b{color:#F0DCC0} /* ── la carte Google Ads : la page de resultats, plein cadre ── */ .cv-ads{position:relative;background:#fff;overflow:hidden} .sp{position:absolute;inset:0;display:flex;flex-direction:column; padding:clamp(14px,2vw,26px) clamp(16px,2.6vw,34px); font-family:Arial,Helvetica,sans-serif;color:#202124; /* on ne descend jamais sous 11 px : en dessous ca ne se lit plus, et une maquette qu'on ne lit pas ne demontre rien */ font-size:clamp(11px,1vw,13.5px)} .sp-haut{flex:none;border-bottom:1px solid #dfe1e5;padding-bottom:8px} .sp-barre{display:flex;align-items:center;gap:10px; padding:8px 16px;border:1px solid #dfe1e5;border-radius:24px; box-shadow:0 1px 6px rgba(32,33,36,.14)} .sp-q{position:relative;display:flex;align-items:center;flex:1;min-width:0;height:1.5em} .sp-r{position:absolute;left:0;top:0;white-space:nowrap;overflow:hidden;width:0;opacity:0; color:#202124;line-height:1.5em} .sp-r.on{opacity:1} .svx.vu .sp-r.on{animation:spTape 2.8s steps(24,end) forwards} @keyframes spTape{from{width:0}to{width:100%}} .sp-cur{position:absolute;left:0;top:.1em;width:1.5px;height:1.3em;background:#4285F4; opacity:0} .sp-loupe{width:15px;height:15px;flex:none;color:#4285F4} .sp-tabs{display:flex;gap:clamp(12px,1.8vw,26px);margin-top:10px; font-size:.92em;color:#5f6368} .sp-tab.on{color:#1a73e8;position:relative} .sp-tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:3px; background:#1a73e8;border-radius:2px} .sp-res{flex:1;min-height:0;display:flex;flex-direction:column; gap:clamp(9px,1.4vh,16px);padding-top:clamp(10px,1.6vh,18px)} .sp-l{opacity:0;transform:translateY(5px)} .svx.vu .sp-l{animation:spEntre 13s var(--ease-out) infinite} .svx.vu .sp-pub{animation-delay:1.4s} .svx.vu .sp-nat{animation-delay:calc(1.65s + var(--i) * .18s)} @keyframes spEntre{0%{opacity:0;transform:translateY(5px)} 4%,88%{opacity:1;transform:translateY(0)}95%,100%{opacity:0}} .sp-url{color:#4d5156;font-size:.92em;line-height:1.4} .sp-url b{color:#202124;font-weight:700} .sp-titre{margin-top:2px;color:#1a0dab;font-size:1.32em;line-height:1.3;font-weight:400} .sp-desc{margin-top:2px;color:#4d5156;line-height:1.45;max-width:62ch} /* l'annonce : le seul bloc qu'on met en avant, puisque c'est celui qui s'achete */ .sp-pub{padding:clamp(9px,1.2vw,14px);border-radius:10px; background:rgba(210,162,117,.13);border:1px solid rgba(210,162,117,.5)} .sp-pub .sp-titre{color:#0b57d0} .sp-nat{opacity:.94} @media(max-width:760px){ .sp{padding:12px 14px;font-size:10.5px} .sp-tabs{gap:12px} .sp-desc{display:none} } @media(prefers-reduced-motion:reduce){ .sp-r.on,.sp-l{animation:none!important} .sp-l{opacity:1;transform:none} .sp-r.on{width:auto} } /* ========================================================================== PARLONS DE VOTRE PROJET ========================================================================== */ .pj{padding:clamp(84px,10vh,140px) 0} .pj-head{text-align:center;max-width:60ch;margin-inline:auto} /* une pastille lisible plutot qu'une ligne de capitales de 10 px : meme place, meme role, mais on la lit sans effort */ .pj-kick{display:inline-flex;align-items:center;gap:10px;margin-bottom:24px; padding:9px 18px 9px 15px;border-radius:var(--pill); border:1px solid var(--line-2);background:var(--surface); font-family:var(--font-text);font-size:15.5px;font-weight:600; letter-spacing:-.005em;color:var(--ink)} .pj-pt{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none} .pj-head h2{font-size:clamp(28px,3.7vw,52px);line-height:1.08;letter-spacing:-.032em} .pj-head h2 em{font-family:'Playfair Display','Playfair secours',Georgia,serif; font-style:italic;font-weight:400;font-size:1.07em;letter-spacing:-.008em; color:var(--gold);padding-bottom:.05em} .pj-head .lede{margin:20px auto 0;max-width:52ch;font-size:clamp(15px,1.2vw,17px); line-height:1.62;color:var(--ink-soft)} .pj-form{max-width:720px;margin:clamp(40px,5vh,68px) auto 0; display:grid;gap:clamp(20px,2.8vh,30px)} .pj-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,18px)} .pj-champ{display:grid;gap:9px} .pj-champ label,.pj-lab{font-size:16.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)} .pj-opt{font-weight:400;font-size:15px;color:var(--ink-soft)} .pj-champ input,.pj-champ textarea{ width:100%;padding:14px 16px;border-radius:12px; border:1px solid var(--line-2);background:var(--surface); color:var(--ink);font:inherit;font-size:16.5px;line-height:1.5; transition:border-color .25s var(--ease), box-shadow .25s var(--ease)} .pj-champ textarea{resize:vertical;min-height:84px} .pj-champ input::placeholder,.pj-champ textarea::placeholder{color:rgba(20,19,15,.36)} .pj-champ input:focus,.pj-champ textarea:focus{outline:none;border-color:var(--gold); box-shadow:0 0 0 3px rgba(138,96,67,.13)} .pj-champ.err input,.pj-champ.err textarea{border-color:#C2553A} .pj-aide{font-size:15px;line-height:1.55;color:var(--ink-soft)} .pj-err{font-size:15px;line-height:1.45;color:#B4442B;display:none} .pj-champ.err .pj-err{display:block} .pj-chips{display:flex;flex-wrap:wrap;gap:9px} .pj-chip{padding:13px 19px;border-radius:12px;cursor:pointer;font:inherit;font-size:16px; font-weight:500;color:var(--ink);text-align:left; border:1px solid var(--line-2);background:var(--surface); transition:border-color .24s var(--ease), background .24s var(--ease), color .24s var(--ease), transform .24s var(--ease)} .pj-chip:hover{border-color:var(--ink-soft)} .pj-chip:active{transform:scale(.975)} .pj-chip[aria-pressed="true"]{background:rgba(138,96,67,.1);border-color:var(--gold); color:var(--gold-deep);font-weight:600} .pj-mono .pj-chip{font-size:15.5px;padding:12px 17px} /* les questions conditionnelles : elles ne sont la que si elles servent */ .pj-cond[hidden]{display:none} .pj-cond{animation:pjOuvre .42s var(--ease-out)} @keyframes pjOuvre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .pj-pied{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:4px} .pj-note{font-size:15px;line-height:1.55;color:var(--ink-soft);max-width:34ch} .pj-envoi[disabled]{opacity:.6;pointer-events:none} .pj-global{font-size:15.5px;line-height:1.5;color:#B4442B;display:none} .pj-global.on{display:block} .pj-ok{max-width:640px;margin:clamp(40px,5vh,68px) auto 0;text-align:center} .pj-ok-rond{width:60px;height:60px;border-radius:50%;display:grid;place-items:center; margin:0 auto 22px;color:#fff;background:var(--grad)} .pj-ok-rond svg{width:26px;height:26px} .pj-ok h3{font-size:clamp(24px,2.8vw,34px);letter-spacing:-.03em;font-weight:700} .pj-ok p{margin-top:14px;font-size:15.5px;line-height:1.62;color:var(--ink-soft); max-width:46ch;margin-inline:auto} @media(max-width:640px){ .pj-duo{grid-template-columns:1fr} /* iOS zoome sur tout champ sous 16 px et ne dezoome jamais */ .pj-champ input,.pj-champ textarea{font-size:16px} .pj-chip{width:100%} } @media(prefers-reduced-motion:reduce){ .pj-cond{animation:none} } .pj-sous{font-family:var(--font-text);font-size:16px;font-weight:700; letter-spacing:-.01em;color:var(--gold-deep); margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)} .pj-cond{display:grid;gap:clamp(18px,2.4vh,26px)} .pj-cond[hidden]{display:none} /* ========================================================================== SECTION PROJET : le papier du hero Les jetons clairs sont poses sur la section : tout ce qui est dedans en herite, donc le formulaire suit sans qu'on reecrive une seule de ses regles. C'est exactement ce que faisait la surcharge sombre, dans l'autre sens. ========================================================================== */ .pj{ --bg:#EFE8E2; --bg-alt:#E7DFD8; --surface:#FBF8F5; --surface-2:#F3EDE7; --ink:#14130F; --ink-soft:#5E5A52; --gold:#8A6043; --gold-deep:#6E4B33; --line:rgba(20,19,15,.12); --line-2:rgba(20,19,15,.20); --grad:linear-gradient(160deg,#A57450,#6E4B33); background:#EFE8E2; color:var(--ink); position:relative; } .pj .wrap{position:relative; z-index:1} /* ========================================================================== TELEPHONE : le hero fusionne, et la scene compactee ========================================================================== */ @media(max-width:760px){ /* ── le hero : une seule couche ── */ .hero{display:block!important;position:relative;min-height:100dvh} .hx-obj{position:absolute!important;inset:0!important;z-index:0; border-radius:0!important;box-shadow:none!important;min-height:0!important} .hx-obj img{object-position:52% 46%} /* le voile va du haut vers le bas : le texte est en haut, l'objet reste visible en bas. Un voile lateral n'aurait aucun sens sur 390 px de large. */ .hx-voile{display:block!important;position:absolute;inset:0;z-index:1; pointer-events:none; background:linear-gradient(180deg, var(--papier) 0%, var(--papier) 34%, rgba(239,232,226,.93) 46%, rgba(239,232,226,.62) 58%, rgba(239,232,226,.2) 68%, rgba(239,232,226,0) 76%)} .hx-col{position:relative;z-index:2;min-height:100dvh; display:flex;flex-direction:column;justify-content:flex-start; align-items:center;text-align:center; padding:clamp(104px,14vh,140px) 20px clamp(40px,6vh,60px)} .hx-kick{justify-content:center} .hx-h1{max-width:none;margin-inline:auto} .hx-sub,.hx-qui{margin-inline:auto;max-width:34ch} .hx-acts{justify-content:center;width:100%} .hx-b1,.hx-b2{flex:1 1 auto;min-width:0} .hx-b1 .inner,.hx-b2{justify-content:center} } /* ── le formulaire par etapes (telephone) ── */ @media(max-width:760px){ .pj-etape{display:none} .pj-etape.on{display:grid;gap:clamp(18px,2.6vh,26px); animation:pjEt .4s var(--ease-out)} @keyframes pjEt{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}} .pj-jauge{display:flex;align-items:center;gap:10px;margin-bottom:6px} .pj-jauge-b{flex:1;height:3px;border-radius:2px;background:var(--line-2);overflow:hidden} .pj-jauge-b i{display:block;height:100%;border-radius:2px;background:var(--gold); width:25%;transition:width .42s var(--ease-out)} .pj-jauge-t{font-family:var(--font-text);font-size:14px;font-weight:600; letter-spacing:0;color:var(--ink-soft);flex:none} .pj-nav{display:flex;gap:10px;align-items:center;margin-top:4px} .pj-suiv{flex:1} .pj-retour{flex:none;padding:14px 18px;border-radius:12px;cursor:pointer;font:inherit; font-size:15.5px;font-weight:600;color:var(--ink); border:1px solid var(--line-2);background:transparent} .pj-retour:active{transform:scale(.97)} .pj-suiv-b{width:100%;padding:15px 22px;border-radius:12px;cursor:pointer;font:inherit; font-size:16px;font-weight:600;color:#FCFCFA;border:none;background:var(--grad)} .pj-suiv-b:active{transform:scale(.985)} /* le bouton d'envoi ne sert qu'a la derniere etape */ .pj-pied{flex-direction:column;align-items:stretch} .pj-note{max-width:none;text-align:center} } /* ========================================================================== TELEPHONE : les corvees eparpillees autour du O ========================================================================== */ @media(max-width:760px){ .sys-scene{display:block!important} .sc-zone{position:relative;display:block;height:min(66vh,430px); grid-template-columns:none;min-height:0;margin-top:14px} .sc-chips{position:absolute;inset:0;display:block;gap:0} /* chaque jeton est pose a sa coordonnee, incline, et a sa propre taille */ .sc-ch{position:absolute;left:var(--px);top:var(--py); transform:translate(-50%,-50%) rotate(var(--rot)) scale(var(--ech)); transform-origin:center; padding:5px 9px;border-radius:8px;font-size:9px;gap:5px;font-weight:500; white-space:nowrap;max-width:none; /* fond opaque : sans ca, deux jetons superposes deviennent illisibles */ background:rgba(18,17,22,.86);border-color:rgba(244,241,236,.16); backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} .sc-ch i{width:3.5px;height:3.5px} /* le O reste, et il est AU-DESSUS : c'est lui qui avale */ .sc-o{display:grid!important;position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);width:min(46vw,190px);z-index:3; justify-self:auto} .sc-num{display:block!important;margin-top:10px;text-align:center;font-size:11px} .sc-fait{bottom:-2px;font-size:10px;letter-spacing:2.6px} } @media(max-width:760px) and (prefers-reduced-motion:reduce){ .sc-o{display:none!important} .sc-ch{opacity:1!important} } /* ── la modale par etapes (telephone) ── */ @media(max-width:760px){ .md-etape{display:none} .md-etape.on{display:grid;gap:16px;animation:mdEt .38s var(--ease-out)} @keyframes mdEt{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}} /* le chapo mange un tiers de l'ecran pour ne rien dire d'indispensable */ .md-lede{display:none} .md-h{font-size:clamp(21px,6vw,26px);max-width:none} .md-tete{margin-bottom:2px} .md-jauge{display:flex;align-items:center;gap:10px;margin:14px 0 4px} .md-jauge-b{flex:1;height:3px;border-radius:2px;background:rgba(244,241,236,.14);overflow:hidden} .md-jauge-b i{display:block;height:100%;border-radius:2px;background:var(--bronze); width:33%;transition:width .4s var(--ease-out)} .md-jauge-t{font-family:'Geist Mono',ui-monospace,monospace;font-size:10px; letter-spacing:.16em;color:rgba(244,241,236,.55);flex:none} .md-nav{display:flex;gap:10px;align-items:center;margin-top:6px} .md-retour{flex:none;padding:13px 16px;border-radius:11px;cursor:pointer;font:inherit; font-size:14px;font-weight:600;color:#F4F1EC; border:1px solid rgba(244,241,236,.18);background:transparent} .md-suiv{flex:1} .md-suiv-b{width:100%;padding:14px 20px;border-radius:11px;cursor:pointer;font:inherit; font-size:15px;font-weight:600;color:#0B0A0E;border:none; background:linear-gradient(160deg,#EACBA6,#B08356)} .md-suiv-b:active,.md-retour:active{transform:scale(.98)} .md-pied{flex-direction:column;align-items:stretch;gap:12px} .md-note{max-width:none;text-align:center} } /* ── la barre d'etapes reste toujours visible (telephone) ── */ @media(max-width:760px){ /* fixe, pas colle : un element fixe ignore le overflow des ancetres */ .pj-nav{position:fixed;left:0;right:0;bottom:0;z-index:90; opacity:0;transform:translateY(100%);pointer-events:none; transition:opacity .3s var(--ease), transform .34s var(--ease-out); margin:0;padding:14px 20px calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(239,232,226,0),rgba(239,232,226,.94) 24%,#EFE8E2 50%); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-top:1px solid rgba(20,19,15,.1)} .pj-nav.vue{opacity:1;transform:none;pointer-events:auto} /* de la place sous la derniere question pour que la barre ne la recouvre pas */ .pj-etape.on{padding-bottom:86px} .md-nav{position:sticky;bottom:0;z-index:5; margin:0 -18px -24px;padding:14px 18px calc(16px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(15,14,19,0),rgba(15,14,19,.94) 26%,#0F0E13 52%); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} /* le panneau doit pouvoir defiler SOUS la barre, pas derriere un bord fige */ .md-panneau{padding-bottom:8px} /* quand le clavier reduit l'ecran, on rend au contenu la place prise par les marges du panneau */ @media(max-height:520px){ .md{padding:8px} .md-panneau{max-height:calc(100dvh - 16px);padding:16px 14px} .md-tete{margin-bottom:0} .md-h{font-size:19px} .md-kick{display:none} .md-jauge{margin:10px 0 2px} } } @media(max-width:760px){ /* un filter ou un transform sur un ancetre annule position:sticky */ .pj-form{filter:none!important;transform:none!important;opacity:1!important} } /* les garanties, juste avant le bouton d'envoi : elles rassurent au moment ou on hesite a cliquer, pas trois ecrans plus haut */ .pj-assur{list-style:none;margin:0;padding:0;display:grid;gap:0} .pj-assur li{display:flex;align-items:center;gap:12px;padding:14px 0; border-top:1px solid var(--line);font-size:16px;line-height:1.4;color:var(--ink)} .pj-assur li:last-child{border-bottom:1px solid var(--line)} .pj-assur svg{width:17px;height:17px;color:var(--gold);flex:none} /* un champ qui n'existe que si on a coche le jeton au-dessus : il se deplie a sa hauteur reelle, sans a-coup */ .pj-suite{animation:pjSuite .32s var(--ease-out)} @keyframes pjSuite{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.pj-suite{animation:none}} /* la barre « Continuer » est fixee en bas et doit couvrir ce qui suit. Son z-index ne vaut que dans le contexte de sa section : c'est donc la section qu'on eleve, au-dessus de la FAQ et du pied de page. */ @media(max-width:760px){ #projet{z-index:4} } /* la pastille du menu flotte de 16 a 64 px : le formulaire s'arrete en dessous pour que la jauge et le titre de l'etape restent lisibles a chaque passage */ @media(max-width:760px){ #pjForm{scroll-margin-top:78px} } /* ========================================================================== FAQ : la soie La section perd sa classe « clair » et retrouve les jetons sombres de la racine : tout son contenu suit. La toile est en dessous du contenu, et son bas s'efface pour qu'elle ne coupe pas net au-dessus du pied de page. ========================================================================== */ #faq{background:#050506; position:relative; isolation:isolate; overflow:hidden} #faq .wrap{position:relative; z-index:1} .faq-silk{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; z-index:0; opacity:0; transition:opacity 1.4s var(--ease); -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 56%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 56%,transparent 100%)} .faq-silk.on{opacity:.44} /* ========================================================================== L'ECLAT AU CLIC (Gooey Nav, React Bits) Les images par image sont reprises telles quelles. Le conteneur est en position fixe et de taille nulle, pose au centre du bouton : il ne peut donc ni deborder d'un parent, ni etre coupe par un overflow, ni deplacer quoi que ce soit sur la page. ========================================================================== */ .goo-eclat{position:absolute; width:0; height:0; z-index:2; pointer-events:none; filter:url(#goo)} .goo-part{position:absolute; top:-6px; left:-6px; display:block; width:12px; height:12px; border-radius:50%; opacity:0; transform-origin:center; animation:gooPart var(--time) ease 1 -350ms} .goo-pt{display:block; width:12px; height:12px; border-radius:50%; background:var(--c); opacity:1; transform-origin:center; animation:gooPt var(--time) ease 1 -350ms} @keyframes gooPart{ 0%{transform:rotate(0deg) translate(var(--start-x),var(--start-y));opacity:1; animation-timing-function:cubic-bezier(.55,0,1,.45)} 70%{transform:rotate(calc(var(--rotate) * .5)) translate(calc(var(--end-x) * 1.2),calc(var(--end-y) * 1.2)); opacity:1;animation-timing-function:ease} 85%{transform:rotate(calc(var(--rotate) * .66)) translate(var(--end-x),var(--end-y));opacity:1} 100%{transform:rotate(calc(var(--rotate) * 1.2)) translate(calc(var(--end-x) * .5),calc(var(--end-y) * .5));opacity:1} } @keyframes gooPt{ 0%{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(.55,0,1,.45)} 25%{transform:scale(calc(var(--scale) * .25))} 38%{opacity:1} 65%{transform:scale(var(--scale));opacity:1;animation-timing-function:ease} 85%{transform:scale(var(--scale));opacity:1} 100%{transform:scale(0);opacity:0} } /* ── FAQ : le titre au centre, et l'italique serif comme ailleurs ── */ #faq .faq-head{max-width:720px;margin:0 auto 62px;text-align:center} #faq h2 em{font-family:'Playfair Display','Playfair secours',Georgia,serif; font-style:italic;font-weight:400;font-size:1.07em;letter-spacing:-.008em; color:var(--gold);padding-bottom:.05em} #faq .faq-lede{margin-top:18px;font-size:clamp(15px,1.2vw,17px);line-height:1.62; color:var(--ink-soft)} #faq .faq-foot{justify-content:center} /* ── PIED DE PAGE : la marque, et le nom en fond ── */ /* le nom deborde volontairement en bas : coupe, il se lit comme une signature imprimee et pas comme un mot pose la */ .sitefoot{overflow:hidden} .sitefoot .wrap{position:relative;z-index:1} .sitefoot .ft-geant{position:absolute;left:50%;bottom:-.17em;transform:translateX(-50%); z-index:0;pointer-events:none;user-select:none;white-space:nowrap; font-family:'Jost',var(--font-display);font-weight:500;text-transform:uppercase; letter-spacing:.11em;line-height:.8;font-size:clamp(84px,18.5vw,290px); background:linear-gradient(180deg,rgba(210,162,117,.30),rgba(210,162,117,.05) 66%,rgba(210,162,117,0)); -webkit-background-clip:text;background-clip:text;color:transparent} .sitefoot .ft-marque{display:inline-flex;align-items:center;gap:12px; font-family:'Jost',var(--font-display);color:var(--ink)} .sitefoot .ft-marque svg{width:34px;height:34px;color:var(--gold);flex:none; shape-rendering:geometricPrecision} .sitefoot .ft-marque .bw{display:flex;flex-direction:column;align-items:center; justify-content:center;gap:3px} .sitefoot .ft-marque .bo{text-transform:uppercase;font-size:16px;font-weight:500; letter-spacing:.17em;line-height:1;padding-left:.17em} .sitefoot .ft-marque .ba{text-transform:uppercase;font-size:9px;font-weight:400; letter-spacing:.42em;line-height:1;color:var(--gold);padding-left:.42em} .sitefoot .ft-tag{margin-top:18px;font-size:15.5px;line-height:1.6;color:var(--ink-soft)} .sitefoot .ft-ou{margin-top:10px;font-size:14px;letter-spacing:.02em;color:var(--gold)} .sitefoot .ft-brand{max-width:360px} .sitefoot .ft-bottom,.sitefoot .ft-nav a{font-size:14.5px} @media(max-width:640px){ .sitefoot .ft-geant{font-size:clamp(64px,23vw,150px);bottom:-.14em} #faq .faq-head{margin-bottom:44px} } section[id]{scroll-margin-top:80px}