/* Polices chargées via dans le de chaque page : un @import ici sérialiserait le téléchargement (HTML → styles.css → CSS Google → .woff2). */ /* ============================== TOKENS ============================== */ :root{ /* Thème sombre « charbon » : plus doux que le quasi-noir d'origine, surfaces mieux détachées et texte secondaire plus lisible. */ --noir:#181C1B; /* fond de page (charbon chaud) */ --noir-2:#232827; /* cartes / panneaux */ --navy:#27333A; /* teinte froide des dégradés */ --or:#D4BC7C; /* or du logo, un cran plus lumineux */ --or-bright:#EBD79A; --sage:#8CC0A8; /* vert sauge du logo, plus lumineux */ --sage-dim:#5F8C7B; --creme:#F5F3EB; --creme-dim:#AEB3AB; /* texte secondaire nettement plus lisible */ --line:rgba(245,243,235,.16); --line-2:rgba(245,243,235,.09); --maxw:1280px; /* Typo : Space Grotesk (titres) · Inter (texte) · Space Mono (libellés atelier) */ --ff-display:"Space Grotesk",-apple-system,"Segoe UI",Roboto,sans-serif; --ff-mono:"Space Mono",ui-monospace,monospace; --ff-body:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ /* halo doré très léger en haut de page : réchauffe l'ensemble */ background: radial-gradient(125% 80% at 50% -12%,rgba(212,188,124,.10),transparent 58%), var(--noir); color:var(--creme); font-family:var(--ff-body); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; } ::selection{background:var(--or);color:var(--noir)} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,64px)} /* fond épuré façon Apple : plus de quadrillage ni de grain */ body::before{display:none} body::after{display:none} /* utility labels */ .tag{font-family:var(--ff-mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--or)} .tag-dim{color:var(--creme-dim)} /* ============================== NAV ============================== */ .nav{ position:fixed;top:0;left:0;right:0;z-index:50; display:flex;align-items:center;justify-content:space-between; padding:16px clamp(20px,5vw,64px); transition:background .35s ease,border-color .35s ease,backdrop-filter .35s; border-bottom:1px solid transparent; } .nav.scrolled{background:rgba(24,28,27,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .nav__brand{display:flex;align-items:center;gap:12px} .nav__badge{width:40px;height:40px;border-radius:50%;flex:none} .nav__name{font-family:var(--ff-display);font-size:18px;letter-spacing:.04em;line-height:1;text-transform:uppercase} .nav__name span{color:var(--or)} .nav__links{display:flex;gap:30px;align-items:center} .nav__links a{font-family:var(--ff-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--creme-dim);transition:color .2s;position:relative} .nav__links a:hover{color:var(--creme)} .nav__cta{padding:9px 18px;border:1px solid var(--or);color:var(--or);border-radius:2px;transition:.25s} .nav__cta:hover{background:var(--or);color:var(--noir)!important} .nav__burger{display:none;background:none;border:0;color:var(--creme);font-size:24px;cursor:pointer} @media(max-width:860px){ .nav__links{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);background:var(--noir-2);flex-direction:column;justify-content:center;align-items:flex-start;padding:0 40px;gap:26px;transform:translateX(100%);transition:transform .4s cubic-bezier(.7,0,.2,1);border-left:1px solid var(--line)} .nav__links.open{transform:translateX(0)} .nav__links a{font-size:15px} .nav__burger{display:block;z-index:51} } /* ============================== HERO ============================== */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;z-index:1;padding:120px 0 60px} #ball-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1} .hero__fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:1} .hero__fallback img{width:min(60vw,460px);animation:float 7s ease-in-out infinite} @keyframes float{50%{transform:translateY(-22px) rotate(3deg)}} .hero__grad{position:absolute;inset:0;z-index:2;pointer-events:none; background:radial-gradient(120% 90% at 78% 40%,transparent 34%,rgba(24,28,27,.45) 74%,var(--noir) 100%), linear-gradient(180deg,transparent 64%,var(--noir) 100%)} .hero__inner{position:relative;z-index:3;width:100%} .hero__eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:26px;opacity:0;animation:rise .8s .2s forwards} .hero__eyebrow .dash{width:42px;height:1px;background:var(--or)} .hero__title{font-family:var(--ff-display);text-transform:uppercase;line-height:.86;letter-spacing:.01em; font-size:clamp(58px,13vw,184px);margin-left:-.06em} .hero__title .ln{display:block;overflow:hidden} .hero__title .ln b{display:block;font-weight:400;transform:translateY(108%);animation:reveal .9s cubic-bezier(.7,0,.2,1) forwards} .hero__title .ln:nth-child(1) b{animation-delay:.35s} .hero__title .ln:nth-child(2) b{animation-delay:.5s;color:var(--or);-webkit-text-stroke:0} .hero__sub{max-width:430px;margin-top:30px;font-size:clamp(15px,1.7vw,18px);color:var(--creme-dim);opacity:0;animation:rise .8s .9s forwards} .hero__sub strong{color:var(--creme);font-weight:600} .hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;opacity:0;animation:rise .8s 1.05s forwards} .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--ff-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:15px 26px;border-radius:2px;transition:.28s cubic-bezier(.4,0,.2,1);background:transparent;border:1px solid transparent;color:var(--creme);cursor:pointer;-webkit-appearance:none;appearance:none} .btn--solid{background:var(--or);color:var(--noir);font-weight:700} .btn--solid:hover{background:var(--or-bright);transform:translateY(-3px)} .btn--ghost{border:1px solid var(--creme-dim);color:var(--creme)} .btn--ghost:hover{border-color:var(--creme);transform:translateY(-3px)} .btn .arr{transition:transform .28s} .btn:hover .arr{transform:translate(4px,-4px)} /* blueprint annotations around ball */ .annot{position:absolute;z-index:3;font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;color:var(--sage);display:flex;align-items:center;gap:9px;opacity:0;animation:rise 1s 1.3s forwards} .annot .ln{width:34px;height:1px;background:var(--sage-dim)} .annot.a1{top:24%;right:9%} .annot.a2{top:62%;right:15%} .annot.a3{bottom:20%;left:50%} @media(max-width:980px){.annot{display:none}} @keyframes reveal{to{transform:translateY(0)}} @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}} /* scroll cue */ .scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;font-family:var(--ff-mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--creme-dim);display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;animation:rise 1s 1.5s forwards} .scrollcue .bar{width:1px;height:40px;background:linear-gradient(var(--or),transparent);animation:cue 1.8s ease-in-out infinite} @keyframes cue{50%{transform:scaleY(.4);transform-origin:top}} /* ============================== SECTIONS shell ============================== */ .section{position:relative;z-index:1;padding:clamp(90px,13vw,150px) 0} .sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:54px;flex-wrap:wrap} .sec-head .num{font-family:var(--ff-mono);font-size:13px;color:var(--or)} .sec-head h2{font-family:var(--ff-display);text-transform:uppercase;font-size:clamp(34px,6vw,76px);line-height:.92;letter-spacing:.01em} .sec-head h2 em{font-style:normal;color:var(--sage)} /* reveal on scroll */ .reveal{opacity:0;transform:translateY(40px);transition:opacity .8s,transform .8s} .reveal.in{opacity:1;transform:none} /* ============================== CONCEPT ============================== */ .concept{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,90px);align-items:center} .concept__text p{font-size:clamp(17px,2.1vw,23px);line-height:1.5;color:var(--creme)} .concept__text p+p{margin-top:22px;font-size:clamp(15px,1.7vw,17px);color:var(--creme-dim);line-height:1.65} .concept__text .pull{color:var(--or)} .concept__panel{position:relative;aspect-ratio:1/1;transform:perspective(1100px) rotateY(-14deg) rotateX(6deg);transform-style:preserve-3d} .concept__panel .card{position:absolute;inset:0;border:1px solid var(--line);background:linear-gradient(150deg,var(--noir-2),var(--navy));border-radius:6px;display:flex;align-items:center;justify-content:center} .concept__panel .card img{width:74%;filter:drop-shadow(0 30px 60px rgba(0,0,0,.5))} .concept__panel .ghost{inset:auto;width:60%;height:60%} .concept__panel .g1{top:-9%;left:-12%;transform:translateZ(-60px);border-style:dashed;opacity:.5} .concept__panel .g2{bottom:-11%;right:-10%;transform:translateZ(-110px);border-style:dashed;opacity:.32} .concept__panel .ghost::before{content:attr(data-l);position:absolute;top:10px;left:12px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em;color:var(--creme-dim)} @media(max-width:860px){.concept{grid-template-columns:1fr}.concept__panel{max-width:340px;margin:10px auto 0;transform:none}.concept__panel .ghost{display:none}} /* ============================== METIER (services) ============================== */ .metier__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .mcard{position:relative;border:1px solid var(--line);background:var(--noir-2);border-radius:6px;padding:30px 24px 26px;min-height:240px;display:flex;flex-direction:column;justify-content:space-between;transition:.4s cubic-bezier(.3,0,.2,1);overflow:hidden} .mcard:nth-child(odd){transform:translateY(16px)} .mcard:hover{transform:translateY(-8px);border-color:var(--or);background:var(--navy)} .mcard__no{font-family:var(--ff-mono);font-size:12px;color:var(--or)} .mcard__t{font-family:var(--ff-display);text-transform:uppercase;font-size:24px;line-height:1;margin:18px 0 12px} .mcard__d{font-size:14px;color:var(--creme-dim);line-height:1.55} .mcard__glow{position:absolute;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,var(--or),transparent 70%);opacity:0;filter:blur(20px);bottom:-60px;right:-40px;transition:opacity .4s} .mcard:hover .mcard__glow{opacity:.22} @media(max-width:980px){.metier__grid{grid-template-columns:repeat(2,1fr)}.mcard:nth-child(odd){transform:none}} @media(max-width:520px){.metier__grid{grid-template-columns:1fr}} /* ============================== SELECTION (vitrine) ============================== */ .selec__toolbar{margin-bottom:28px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center} .selec__count{font-family:var(--ff-mono);font-size:12px;color:var(--or);letter-spacing:.08em} .selec__filters{display:flex;flex-wrap:wrap;gap:10px;flex:1;justify-content:flex-end} .selec__filters input,.selec__filters select{background:var(--noir);border:1px solid var(--line);color:var(--creme);padding:12px 14px;border-radius:3px;font-family:var(--ff-body);font-size:14px;min-width:min(220px,100%)} .selec__filters input:focus,.selec__filters select:focus{outline:none;border-color:var(--or)} .selec__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .jcard{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:linear-gradient(160deg,var(--noir-2),var(--noir));aspect-ratio:1/1;cursor:pointer;transition:.45s cubic-bezier(.3,0,.2,1)} .jcard:nth-child(3n-1){transform:translateY(28px)} .jcard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.3,0,.2,1)} .jcard__shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(14,16,15,.92) 100%);pointer-events:none} .jcard:hover{border-color:var(--or)} .jcard:hover .jcard__img{transform:scale(1.06)} .jcard__meta{position:absolute;left:18px;bottom:16px;right:18px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:10px} .jcard__meta .n{font-family:var(--ff-mono);font-size:10px;color:var(--creme-dim);letter-spacing:.1em;flex-shrink:0} .jcard__meta .t{font-family:var(--ff-display);text-transform:uppercase;font-size:15px;line-height:1.05;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .jcard__tag{position:absolute;top:14px;right:14px;z-index:2;font-family:var(--ff-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--noir);background:var(--or);padding:4px 8px;border-radius:2px} .jcard__tag.soon{background:var(--sage)} .jcard__photos{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--ff-mono);font-size:9px;letter-spacing:.12em;color:var(--creme);background:rgba(14,16,15,.72);padding:4px 8px;border-radius:2px;border:1px solid var(--line)} .selec__more{margin-top:32px;text-align:center} .selec__empty{grid-column:1/-1;text-align:center;padding:48px 20px;color:var(--creme-dim);font-family:var(--ff-mono);font-size:13px} @media(max-width:860px){.selec__grid{grid-template-columns:repeat(2,1fr)}.jcard:nth-child(3n-1){transform:none}} @media(max-width:500px){.selec__grid{grid-template-columns:1fr}} .selec__note{margin-top:22px;font-family:var(--ff-mono);font-size:12px;color:var(--creme-dim);letter-spacing:.06em} .lightbox{position:fixed;inset:0;z-index:100;background:rgba(14,16,15,.94);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:20px} .lightbox[hidden]{display:none} .lightbox__panel{position:relative;width:min(1100px,100%);max-height:92vh;background:var(--noir-2);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:grid;grid-template-columns:1.2fr .8fr} .lightbox__close{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:rgba(14,16,15,.8);color:var(--creme);cursor:pointer;font-size:20px;line-height:1} .lightbox__main{position:relative;background:var(--noir);min-height:320px;display:flex;align-items:center;justify-content:center} .lightbox__main img{max-width:100%;max-height:72vh;object-fit:contain} .lightbox__nav{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none;padding:0 8px} .lightbox__nav button{pointer-events:auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(14,16,15,.75);color:var(--creme);cursor:pointer} .lightbox__side{padding:28px;overflow:auto;max-height:92vh} .lightbox__side h3{font-family:var(--ff-display);text-transform:uppercase;font-size:clamp(22px,3vw,34px);line-height:1;margin-bottom:10px} .lightbox__side p{font-size:14px;color:var(--creme-dim);line-height:1.55;margin-bottom:18px} .lightbox__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .lightbox__thumbs button{border:1px solid var(--line);padding:0;background:var(--noir);border-radius:4px;overflow:hidden;cursor:pointer;aspect-ratio:1} .lightbox__thumbs button.active{border-color:var(--or)} .lightbox__thumbs img{width:100%;height:100%;object-fit:cover;display:block} .lightbox__ext{display:inline-flex;margin-top:18px;font-family:var(--ff-mono);font-size:12px;color:var(--or);letter-spacing:.06em} @media(max-width:860px){.lightbox__panel{grid-template-columns:1fr;max-height:96vh;overflow:auto}} /* ============================== REJOINDRE (cta) ============================== */ .join{position:relative;z-index:1;padding:clamp(80px,12vw,140px) 0} .join__box{position:relative;border:1px solid var(--line);border-radius:14px;background: radial-gradient(120% 140% at 0% 0%,rgba(126,178,155,.10),transparent 50%), radial-gradient(120% 140% at 100% 100%,rgba(203,179,113,.12),transparent 50%), var(--noir-2); padding:clamp(36px,6vw,72px);overflow:hidden} .join__box::before{display:none} .join__inner{position:relative;max-width:560px} .join h2{font-family:var(--ff-display);text-transform:uppercase;font-size:clamp(32px,6vw,66px);line-height:.9;margin:16px 0 14px} .join h2 em{font-style:normal;color:var(--or)} .join p{color:var(--creme-dim);font-size:16px;margin-bottom:30px;max-width:440px} .join__form{display:flex;gap:12px;flex-wrap:wrap} .join__form input{flex:1;min-width:200px;background:var(--noir);border:1px solid var(--line);color:var(--creme);padding:15px 18px;border-radius:3px;font-family:var(--ff-body);font-size:15px;transition:.25s} .join__form input:focus{outline:none;border-color:var(--or)} .join__form button{cursor:pointer;border:0} .join__ok{margin-top:16px;font-family:var(--ff-mono);font-size:13px;color:var(--sage);opacity:0;transition:opacity .3s} .join__ok.show{opacity:1} .join__alt{margin-top:24px;display:flex;align-items:center;gap:14px;font-family:var(--ff-mono);font-size:12px;color:var(--creme-dim);letter-spacing:.05em} .join__alt a{color:var(--creme);border-bottom:1px solid var(--or);padding-bottom:1px} /* ============================== FOOTER ============================== */ .footer{position:relative;z-index:1;border-top:1px solid var(--line);padding:60px 0 36px} .footer__top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap} .footer__brand{display:flex;align-items:center;gap:16px} .footer__brand img{width:64px;height:64px;border-radius:50%} .footer__brand .n{font-family:var(--ff-display);text-transform:uppercase;font-size:26px;line-height:1} .footer__brand .n span{color:var(--or)} .footer__brand .loc{font-family:var(--ff-mono);font-size:11px;letter-spacing:.2em;color:var(--creme-dim);text-transform:uppercase;margin-top:4px} .footer__cols{display:flex;gap:60px;flex-wrap:wrap} .footer__col h4{font-family:var(--ff-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--creme-dim);margin-bottom:14px} .footer__col a{display:block;font-size:14px;color:var(--creme);margin-bottom:9px;transition:color .2s} .footer__col a:hover{color:var(--or)} .footer__bottom{margin-top:50px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;color:var(--creme-dim)} @media (prefers-reduced-motion:reduce){ *{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.1s!important;scroll-behavior:auto} .hero__title .ln b{transform:none} .hero__eyebrow,.hero__sub,.hero__actions,.annot,.scrollcue{opacity:1!important} } /* ============================== FOCUS CLAVIER ============================== Les champs neutralisent l'outil natif (outline:none) au profit d'une bordure dorée ; liens et boutons n'avaient eux aucun repère : on rétablit un anneau visible, uniquement au clavier (:focus-visible) pour ne pas gêner la souris. */ a:focus-visible,button:focus-visible,select:focus-visible, input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--or); outline-offset:3px; border-radius:2px; } /* Passage direct au contenu : premier arrêt de tabulation, masqué sinon. On glisse en `transform` plutôt qu'en `top` : l'animation reste sur le compositeur au lieu de relancer un calcul de mise en page à chaque image. */ .skip{position:absolute;left:14px;top:14px;z-index:200;background:var(--or);color:var(--noir); font-family:var(--ff-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase; padding:12px 18px;border-radius:2px; transform:translateY(-200%);transition:transform .2s} .skip:focus{transform:translateY(0)} /* ============================== TITRES — Space Grotesk ============================== On garde la casse d'origine (MAJUSCULES) mais dans une grotesque moderne et athlétique ; on rétablit le gras (Space Grotesk n'a pas le poids « noir » d'Anton). */ .hero__title,.sec-head h2,.page-head h1,.join h2,.nav__name,.footer__brand .n, .mcard__t,.citem__t,.pinfo h1,.acct__name,.acct__avatar,.summary h3,.co-card h3, .admin__panel h3,.cart__empty .big,.co-success .big,.news__item h3,.chat-head .t, .jcard__meta .t,.lb-price,.pinfo__price,.summary .row.total b,.lightbox__side h3{ font-weight:600; } .hero__title{font-weight:700;letter-spacing:-.02em;line-height:.92} .page-head h1,.join h2,.sec-head h2,.pinfo h1{font-weight:700}