/* =================================================================== Eric Dujols — Peintre Numérique · Refonte maquette Charte conservée : Prata + Open Sans · noir/blanc/gris · accent violet =================================================================== */ :root{ --noir:#141414; --encre:#333333; --blanc:#ffffff; --creme:#f4f2f0; --gris:#e9e7e8; --gris-fonce:#9d9a9c; --violet:#433a7a; --violet-clair:#6a5fae; --glow:rgba(67,58,122,.20); --glow-soft:rgba(67,58,122,.10); --ombre:0 24px 70px rgba(20,20,20,.14); --maxw:1280px; --ease:cubic-bezier(.22,.61,.36,1); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'Open Sans',Arial,sans-serif; color:var(--encre); background:var(--blanc); line-height:1.75; font-size:16px; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,.serif{font-family:'Prata',Georgia,serif;font-weight:400;color:var(--noir);line-height:1.18} /* ---------- utilitaires ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 7vw} .label{ font-family:'Times New Roman',Georgia,serif; text-transform:uppercase; letter-spacing:5px; font-size:12px; font-weight:700; color:var(--gris-fonce); } .label--violet{color:var(--violet-clair)} .btn{ display:inline-block; background:var(--noir); color:var(--blanc); font-weight:700; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; padding:16px 46px; border:2px solid var(--noir); transition:background .35s var(--ease),color .35s var(--ease); cursor:pointer; } .btn:hover{background:transparent;color:var(--noir)} .btn--ghost{background:transparent;color:var(--noir)} .btn--ghost:hover{background:var(--noir);color:var(--blanc)} .btn--light{background:var(--blanc);color:var(--noir);border-color:var(--blanc)} .btn--light:hover{background:transparent;color:var(--blanc)} .section{padding:120px 0} .section-head{max-width:640px;margin-bottom:64px} .section-head.center{margin-left:auto;margin-right:auto;text-align:center} .section-head h2{font-size:clamp(2.2rem,4.6vw,3.5rem);margin:14px 0 0} /* animation de révélation — activée seulement si JS dispo (.js sur ), sinon le contenu reste visible (sécurité no-JS) */ .js .reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)} .js .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .js .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} } /* =================================================================== HEADER =================================================================== */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:200; display:flex;align-items:center;justify-content:space-between; padding:18px 7vw; transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease); } .site-header.scrolled{ background:rgba(255,255,255,.95); backdrop-filter:blur(10px); box-shadow:0 1px 0 rgba(0,0,0,.07); padding:10px 7vw; } .brand{display:flex;align-items:center;gap:14px} .brand img{height:52px;width:auto;transition:height .4s var(--ease)} .site-header.scrolled .brand img{height:42px} .brand-txt{display:flex;flex-direction:column;line-height:1.1} .brand-txt strong{font-family:'Prata',serif;font-size:18px;color:var(--noir);font-weight:400;letter-spacing:.5px} .brand-txt span{font-family:'Times New Roman',serif;font-size:9px;letter-spacing:3.5px;text-transform:uppercase;color:var(--gris-fonce)} .nav{display:flex;align-items:center;gap:38px} .nav a{ font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase; color:var(--encre);position:relative;padding:4px 0; } .nav a::after{ content:"";position:absolute;left:0;bottom:0;height:2px;width:0; background:var(--violet);transition:width .35s var(--ease); } .nav a:hover::after,.nav a.active::after{width:100%} .nav a.btn{padding:12px 26px;color:var(--blanc)} .nav a.btn:hover{color:var(--noir)} .nav a.btn::after{display:none} .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px} .burger span{width:26px;height:2px;background:var(--noir);transition:.3s var(--ease)} .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* =================================================================== HERO =================================================================== */ .hero{ position:relative;min-height:100vh;display:flex;align-items:center; background:linear-gradient(108deg,var(--blanc) 0%,var(--blanc) 47%,var(--gris) 47%,var(--gris) 100%); padding:150px 0 90px;overflow:hidden; } .hero-grid{ display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center; } .hero-text .label{display:block;margin-bottom:24px} .hero-text h1{ font-size:clamp(3.4rem,9vw,7.6rem); letter-spacing:-1px;margin-bottom:10px; } .hero-text h1 .ink{display:block;color:var(--violet)} .hero-tag{ font-size:1.05rem;max-width:430px;margin:26px 0 38px;color:var(--encre); } .hero-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap} .hero-actions .link-arrow{ font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase; border-bottom:2px solid var(--noir);padding-bottom:3px; } .hero-actions .link-arrow:hover{color:var(--violet);border-color:var(--violet)} .hero-visual{position:relative} .hero-visual img{ width:100%;box-shadow:-50px 60px 90px var(--glow),0 10px 30px rgba(0,0,0,.18); } .hero-visual figcaption{ position:absolute;left:-34px;bottom:40px; background:var(--blanc);padding:16px 24px;box-shadow:var(--ombre); } .hero-visual figcaption .t{font-family:'Prata',serif;font-size:1.05rem;color:var(--noir)} .hero-visual figcaption .d{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gris-fonce)} .hero-scroll{ position:absolute;left:7vw;bottom:34px;font-size:11px;letter-spacing:3px; text-transform:uppercase;color:var(--gris-fonce);display:flex;align-items:center;gap:12px; } .hero-scroll::before{content:"";width:46px;height:1px;background:var(--gris-fonce); animation:scrollline 2.4s var(--ease) infinite} @keyframes scrollline{0%,100%{transform:scaleX(.3);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}} /* =================================================================== INTRO / A PROPOS =================================================================== */ .intro{background:var(--blanc);text-align:center} .intro .wrap{max-width:880px} .intro h2{font-size:clamp(2rem,4vw,3rem);margin:16px 0 30px} .intro p{font-size:1.12rem;margin-bottom:18px} .intro .en{color:var(--gris-fonce);font-style:italic;font-size:1rem} .intro .rule{width:60px;height:2px;background:var(--violet);margin:34px auto} /* =================================================================== LA CREATION =================================================================== */ .creation{background:var(--creme)} .creation-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:center} .creation-photos{position:relative} .creation-photos .p1{ width:78%;box-shadow:var(--ombre); } .creation-photos .p2{ width:58%;position:absolute;right:0;bottom:-58px; border:10px solid var(--blanc);box-shadow:-30px 30px 70px var(--glow); } .creation-body h2{font-size:clamp(2rem,4vw,3rem);margin:14px 0 26px} .creation-body p{margin-bottom:16px} .creation-body .en-block{ margin-top:26px;padding-top:26px;border-top:1px solid var(--gris); color:var(--gris-fonce);font-style:italic;font-size:.97rem; } .creation-meta{ display:flex;gap:14px;flex-wrap:wrap;margin:30px 0; } .chip{ display:inline-flex;align-items:center;gap:8px; background:var(--blanc);border:1px solid var(--gris); padding:9px 16px;font-size:12px;font-weight:700;letter-spacing:1px; text-transform:uppercase;color:var(--encre); } .chip::before{content:"";width:7px;height:7px;background:var(--violet);border-radius:50%} .creation-links{display:flex;gap:24px;flex-wrap:wrap;margin-top:30px} .creation-links a{ font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase; border-bottom:2px solid var(--violet);padding-bottom:3px;color:var(--noir); } .creation-links a:hover{color:var(--violet)} .signature{ font-family:'Prata',serif;font-size:1.5rem;color:var(--noir); margin-top:28px;display:block; } /* =================================================================== GALERIE (aperçu + page complète) =================================================================== */ .gallery{background:var(--blanc)} .grid{ column-count:3;column-gap:26px; } .grid .card{break-inside:avoid;margin-bottom:26px} .card{cursor:pointer;background:var(--blanc)} .card-img{position:relative;overflow:hidden;background:var(--gris)} .card-img img{ width:100%;transition:transform .9s var(--ease); } .card:hover .card-img img{transform:scale(1.06)} .card-img::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(20,20,20,0) 55%,rgba(20,20,20,.55) 100%); opacity:0;transition:opacity .4s var(--ease); } .card:hover .card-img::after{opacity:1} .card-zoom{ position:absolute;right:16px;top:16px;width:42px;height:42px; background:var(--blanc);display:flex;align-items:center;justify-content:center; opacity:0;transform:translateY(-8px);transition:.4s var(--ease); font-size:18px;color:var(--noir); } .card:hover .card-zoom{opacity:1;transform:none} .card-sold{ position:absolute;left:0;top:18px;background:var(--violet);color:#fff; font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase; padding:7px 14px; } .card-cap{padding:16px 4px 4px} .card-cap h3{font-size:1.18rem;margin-bottom:3px} .card-cap .dims{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gris-fonce)} .gallery-foot{text-align:center;margin-top:64px} /* page créations : entête */ .page-hero{ background:var(--noir);color:var(--blanc);text-align:center; padding:200px 0 110px;position:relative;overflow:hidden; } .page-hero::before{ content:"";position:absolute;width:560px;height:560px;border-radius:50%; background:radial-gradient(circle,var(--violet) 0%,transparent 70%); top:-180px;right:-120px;opacity:.5; } .page-hero .label{color:var(--violet-clair);position:relative} .page-hero h1{color:var(--blanc);font-size:clamp(2.6rem,6vw,4.6rem);margin-top:14px;position:relative} .page-hero p{color:rgba(255,255,255,.6);max-width:520px;margin:20px auto 0;position:relative} .gallery-count{ text-align:center;font-size:13px;letter-spacing:2px;text-transform:uppercase; color:var(--gris-fonce);margin-bottom:54px; } .gallery-count b{color:var(--violet);font-family:'Prata',serif;font-size:18px} /* =================================================================== LIGHTBOX =================================================================== */ .lb{ position:fixed;inset:0;z-index:500;background:rgba(15,14,20,.96); display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transition:opacity .4s var(--ease);padding:40px; } .lb.open{opacity:1;pointer-events:auto} .lb-inner{ display:grid;grid-template-columns:1.5fr .85fr;gap:46px; max-width:1180px;width:100%;align-items:center; } .lb-img{display:flex;align-items:center;justify-content:center} .lb-img img{ max-height:80vh;width:auto;box-shadow:0 30px 80px rgba(0,0,0,.6); } .lb-info{color:var(--blanc)} .lb-info .label{color:var(--violet-clair)} .lb-info h3{color:var(--blanc);font-size:2.4rem;margin:12px 0 6px} .lb-info .lb-dims{ font-size:12px;letter-spacing:2px;text-transform:uppercase; color:rgba(255,255,255,.55);margin-bottom:22px; } .lb-info .lb-fr{font-size:1.05rem;line-height:1.8;color:rgba(255,255,255,.92)} .lb-info .lb-en{ font-style:italic;color:rgba(255,255,255,.5);margin-top:12px; padding-top:16px;border-top:1px solid rgba(255,255,255,.15);font-size:.95rem; } .lb-info .lb-support{ margin-top:22px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase; color:rgba(255,255,255,.45); } .lb-info .btn{margin-top:26px} .lb-close{ position:absolute;top:26px;right:34px;background:none;border:0;cursor:pointer; color:#fff;font-size:34px;line-height:1;opacity:.7;transition:.3s } .lb-close:hover{opacity:1;transform:rotate(90deg)} .lb-nav{ position:absolute;top:50%;transform:translateY(-50%); background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25); color:#fff;width:54px;height:54px;cursor:pointer;font-size:20px; transition:.3s var(--ease); } .lb-nav:hover{background:var(--violet);border-color:var(--violet)} .lb-prev{left:30px} .lb-next{right:30px} /* =================================================================== CONTACT =================================================================== */ .contact{background:var(--noir);color:var(--blanc)} .contact h2{color:var(--blanc)} .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px} .contact-info .label{color:var(--violet-clair)} .contact-info h2{font-size:clamp(2rem,4vw,3rem);margin:14px 0 30px} .contact-info .lead{color:rgba(255,255,255,.62);margin-bottom:40px;max-width:380px} .info-row{ display:flex;gap:18px;padding:22px 0;border-top:1px solid rgba(255,255,255,.13); } .info-row:last-of-type{border-bottom:1px solid rgba(255,255,255,.13)} .info-row .ic{ flex:0 0 44px;height:44px;border:1px solid rgba(255,255,255,.25); display:flex;align-items:center;justify-content:center;color:var(--violet-clair); } .info-row .k{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.45)} .info-row .v{font-family:'Prata',serif;font-size:1.2rem;color:#fff} .info-row .v a:hover{color:var(--violet-clair)} .socials{display:flex;gap:14px;margin-top:34px} .socials a{ width:46px;height:46px;border:1px solid rgba(255,255,255,.25); display:flex;align-items:center;justify-content:center; transition:.3s var(--ease);color:#fff; } .socials a:hover{background:var(--violet);border-color:var(--violet);transform:translateY(-3px)} .socials svg{width:18px;height:18px;fill:currentColor} .form{background:var(--blanc);padding:46px;color:var(--encre)} .form h3{font-size:1.5rem;margin-bottom:8px} .form .sub{font-size:13px;color:var(--gris-fonce);margin-bottom:26px} .field{margin-bottom:20px} .field label{ display:block;font-size:11px;font-weight:700;letter-spacing:1.5px; text-transform:uppercase;color:var(--gris-fonce);margin-bottom:8px; } .field input,.field textarea,.field select{ width:100%;padding:14px 16px;border:1px solid var(--gris); font-family:inherit;font-size:15px;color:var(--encre);background:var(--creme); transition:border-color .3s var(--ease); } .field input:focus,.field textarea:focus,.field select:focus{ outline:none;border-color:var(--violet); } .field textarea{resize:vertical;min-height:120px} .form .btn{width:100%;border:0} .form-note{font-size:11px;color:var(--gris-fonce);margin-top:14px;text-align:center} /* =================================================================== FOOTER =================================================================== */ .site-footer{background:#0d0d0d;color:rgba(255,255,255,.55);padding:64px 0 30px} .footer-top{ display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap; padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1); } .footer-brand{display:flex;align-items:center;gap:14px} .footer-brand img{height:54px} .footer-brand .ft-name{font-family:'Prata',serif;font-size:1.3rem;color:#fff} .footer-brand .ft-sub{font-size:10px;letter-spacing:3px;text-transform:uppercase} .footer-nav{display:flex;gap:30px;flex-wrap:wrap} .footer-nav a{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.7)} .footer-nav a:hover{color:var(--violet-clair)} .footer-bottom{ display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap; padding-top:26px;font-size:12px;letter-spacing:.5px; } .footer-bottom a:hover{color:#fff} /* =================================================================== PAGE MENTIONS LEGALES =================================================================== */ .legal{background:var(--blanc);padding-top:60px} .legal .wrap{max-width:820px} .legal h2{font-size:1.7rem;margin:48px 0 16px;padding-top:20px;border-top:2px solid var(--violet);display:inline-block} .legal h2:first-of-type{margin-top:0} .legal p{margin-bottom:14px} .legal dl{margin:14px 0} .legal dt{font-weight:700;color:var(--noir);font-size:13px;letter-spacing:.5px;text-transform:uppercase;margin-top:12px} .legal dd{margin-left:0;color:var(--encre)} .legal .todo{color:var(--violet);font-style:italic} .legal-note{ background:var(--creme);border-left:3px solid var(--violet); padding:20px 26px;margin:30px 0;font-size:.95rem; } /* =================================================================== RESPONSIVE =================================================================== */ @media(max-width:1024px){ .hero-grid,.creation-grid,.contact-grid,.lb-inner{grid-template-columns:1fr} .grid{column-count:2} .hero{background:linear-gradient(180deg,var(--blanc) 0%,var(--blanc) 60%,var(--gris) 60%,var(--gris) 100%)} .creation-photos{max-width:480px;margin:0 auto 80px} .lb-inner{gap:24px} .lb-img img{max-height:46vh} .section{padding:90px 0} } @media(max-width:760px){ .nav{ position:fixed;inset:0 0 0 auto;width:80%;max-width:340px; background:var(--blanc);flex-direction:column;justify-content:center; gap:30px;transform:translateX(100%);transition:transform .45s var(--ease); box-shadow:-20px 0 60px rgba(0,0,0,.2); } .nav.open{transform:none} .burger{display:flex;z-index:210} .grid{column-count:1} .wrap{padding:0 6vw} .site-header,.hero-scroll{padding-left:6vw;padding-right:6vw} .hero-scroll{display:none} .hero-visual figcaption{left:0} .form{padding:30px 22px} .lb{padding:18px} .lb-nav{width:44px;height:44px} .lb-prev{left:8px}.lb-next{right:8px} .lb-info h3{font-size:1.7rem} .section{padding:74px 0} .footer-top{flex-direction:column} }