/* ========================================================= VIDe GRAPH — style.css Interface strictement noir & blanc. Les photos et réalisations gardent leurs couleurs naturelles : seule la structure (fond, boutons, textes) reste en N&B. ========================================================= */ /* ---- Police de marque "Widescreen" (Dalton Maag) ---- C'est une police payante (Adobe Fonts / Creative Cloud), je n'ai donc pas le fichier. Deux façons de l'activer : 1) Si tu as Creative Cloud : active "Widescreen" sur fonts.adobe.com puis colle le lien de ton kit web dans le de index.html (juste au-dessus de ce fichier CSS). 2) Sinon : dépose Widescreen-Regular.woff2 / .woff dans /fonts et la règle ci-dessous prend le relais. En attendant l'un ou l'autre, Poppins (Google Fonts) sert de remplacement visuellement proche. */ @font-face{ font-family:'Widescreen'; src:url('../fonts/Widescreen-Regular.woff2') format('woff2'), url('../fonts/Widescreen-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; } :root{ --black:#000000; --white:#ffffff; --nav-h:76px; --font-nav:'Widescreen','Poppins',Arial,sans-serif; --font-heading:'Widescreen','Poppins',Arial,sans-serif; --font-body:'Poppins',Arial,sans-serif; --max-w:1280px; --gap:clamp(24px,4vw,64px); } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; font-family:var(--font-body); color:var(--black); background:var(--white); line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ul{list-style:none;margin:0;padding:0;} h1,h2,h3{font-family:var(--font-heading);margin:0;} section[id]{scroll-margin-top:var(--nav-h);} .section{padding:clamp(60px,10vw,120px) 5vw;} .section-inner{max-width:var(--max-w);margin:0 auto;} .section-title{ display:inline-block; font-weight:700; text-transform:uppercase; letter-spacing:.5px; font-size:clamp(28px,3.6vw,42px); margin:0 0 16px; } .section-title::after{ content:''; display:block; width:64px;height:3px; background:currentColor; margin-top:18px; } /* ---------- HEADER / NAV ---------- Fond noir par défaut (valable sur toutes les pages). Sur la page d'accueil (body.has-hero) uniquement, le menu démarre transparent au-dessus de l'image, puis repasse au noir dès qu'on quitte le héros (voir main.js). */ .site-header{ position:fixed;top:0;left:0;right:0; height:var(--nav-h); background:var(--black); z-index:1000; transition:background-color .3s ease; } body.has-hero .site-header{background:transparent;} body.has-hero .site-header.is-solid{background:var(--black);} .nav-inner{ max-width:var(--max-w); margin:0 auto; height:100%; display:flex; align-items:center; justify-content:flex-end; padding:0 5vw; } .nav-list{display:flex;align-items:center;gap:4px;} .nav-link{ display:inline-flex; font-family:var(--font-nav); font-weight:400; color:var(--white); text-transform:uppercase; font-size:14px; letter-spacing:.6px; padding:10px 18px; transition:background-color .2s ease,color .2s ease; } .nav-link:hover,.nav-link:focus-visible{ background:var(--white); color:var(--black); } .nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:32px;height:32px; background:none;border:none;cursor:pointer; padding:0; } .nav-toggle span{display:block;height:2px;background:var(--white);} @media (max-width:860px){ .nav-inner{justify-content:space-between;} .nav-toggle{display:flex;} .nav-list{ position:fixed; top:var(--nav-h);left:0;right:0; flex-direction:column; align-items:stretch; background:var(--black); max-height:0; overflow:hidden; transition:max-height .3s ease; } .nav-list.open{max-height:400px;} .nav-link{width:100%;padding:16px 5vw;} } /* ---------- HERO ---------- */ .hero{position:relative;width:100%;height:125vh;min-height:560px;} .hero-bg{width:100%;height:100%;object-fit:cover;} .hero::after{ content:''; position:absolute;top:0;left:0;right:0;height:240px; background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0)); pointer-events:none; } /* Logo superposé à l'image d'accueil : un peu à gauche du centre sur ordinateur, centré horizontalement et proche du haut sur mobile */ .hero-logo{ position:absolute; top:30%; left:27%; transform:translate(-50%,-50%); width:clamp(280px,36vw,680px); z-index:2; } @media (max-width:860px){ .hero-logo{ top:calc(var(--nav-h) + 130px); left:50%; transform:translateX(-50%); width:clamp(220px,60vw,320px); } } /* Clin d'oeil à la texture pointillée du portfolio, en transition entre le héros et le reste du site */ .noise-divider{ height:140px; background-image:url('../images/texture-noise.png'); background-repeat:repeat; background-size:56px 56px; -webkit-mask-image:linear-gradient(to bottom, black 0%, transparent 100%); mask-image:linear-gradient(to bottom, black 0%, transparent 100%); } /* ---------- SERVICES ---------- */ .services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); margin-top:56px; } .service-card img{width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:22px;} .service-card h3{font-size:17px;text-transform:uppercase;letter-spacing:.4px;margin-bottom:12px;font-weight:700;} .service-card p{font-size:14.5px;line-height:1.7;} @media (max-width:900px){.services-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:520px){.services-grid{grid-template-columns:1fr;}} .services-cta{text-align:center;margin-top:56px;} /* ---------- A PROPOS ---------- */ .apropos{background:var(--black);color:var(--white);} .apropos-inner{ display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--gap); align-items:center; } .apropos-media img{width:100%;aspect-ratio:4/5;object-fit:cover;} .apropos-text p{font-size:15.5px;margin:0 0 22px;} @media (max-width:820px){ .apropos-inner{grid-template-columns:1fr;} .apropos-media{max-width:360px;margin:0 auto 32px;} } /* ---------- BOUTONS ---------- */ .btn{ display:inline-flex; align-items:center; gap:10px; border:2px solid currentColor; padding:14px 30px; text-transform:uppercase; font-weight:700; font-size:13px; letter-spacing:.6px; margin-top:8px; transition:background-color .2s ease,color .2s ease; } .apropos .btn:hover{background:var(--white);color:var(--black);} .realisations .btn:hover,.contact .btn:hover,.services .btn:hover{background:var(--black);color:var(--white);} button.btn{background:transparent;color:inherit;font-family:inherit;cursor:pointer;} .btn:disabled{opacity:.5;cursor:wait;} /* ---------- REALISATIONS ---------- */ .realisations{text-align:center;} .realisations .section-title::after{margin-left:auto;margin-right:auto;} .realisations .lead{max-width:520px;margin:0 auto 52px;font-size:15.5px;} .realisations-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:52px; } .realisations-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;} @media (max-width:900px){.realisations-grid{grid-template-columns:repeat(2,1fr);}} /* ---------- CONTACT ---------- */ .contact{text-align:center;} .contact .section-title::after{margin-left:auto;margin-right:auto;} .contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); justify-items:center; gap:clamp(24px,4vw,60px); max-width:680px; margin:52px auto 0; } @media (max-width:640px){ .contact-grid{grid-template-columns:1fr;gap:36px;} } .contact-method{display:inline-flex;flex-direction:column;align-items:center;gap:16px;} .contact-method img{width:52px;height:52px;} .contact-method span{ font-weight:700; font-size:15.5px; position:relative; padding-bottom:4px; } .contact-method span::after{ content:''; position:absolute;left:0;right:0;bottom:0; height:2px;background:var(--black); transform:scaleX(0); transition:transform .25s ease; } .contact-method:hover span::after{transform:scaleX(1);} /* ---------- FOOTER ---------- */ .site-footer{ background:var(--black); color:var(--white); text-align:center; padding:20px 16px; font-size:12.5px; } .site-footer a{text-decoration:underline;} .site-footer a:hover{opacity:.65;} /* ---------- UTILITAIRE (texte réservé aux lecteurs d'écran) ---------- */ .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; } /* ---------- EN-TÊTE DE PAGE (pages sans héros plein écran) ---------- */ .page-hero{ background:var(--black); color:var(--white); padding:calc(var(--nav-h) + clamp(48px,8vw,88px)) 5vw clamp(48px,8vw,88px); } .page-hero p{margin-top:16px;font-size:15.5px;max-width:560px;} /* ---------- PAGE CONTACT ---------- */ .contact-page-inner{ max-width:var(--max-w); margin:0 auto; display:grid; grid-template-columns:1.15fr .85fr; gap:var(--gap); align-items:start; } @media (max-width:860px){ .contact-page-inner{grid-template-columns:1fr;} } .contact-form .field{margin-bottom:26px;} .contact-form label{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.6px; font-weight:700; margin-bottom:8px; } .contact-form input, .contact-form textarea{ width:100%; border:none; border-bottom:2px solid var(--black); background:transparent; padding:10px 2px; font-family:var(--font-body); font-size:15px; color:var(--black); } .contact-form input:focus, .contact-form textarea:focus{outline:none;border-bottom-width:3px;} .contact-form textarea{resize:vertical;min-height:130px;} .contact-form .required-note{font-size:12.5px;opacity:.65;margin:-6px 0 26px;} .contact-form .honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} .contact-page .btn:hover{background:var(--black);color:var(--white);} .form-status{ margin-top:24px; border:2px solid var(--black); padding:18px 20px; font-size:14.5px; line-height:1.6; } .form-status.is-error{border-style:dashed;} .contact-info{display:flex;flex-direction:column;gap:40px;padding-top:6px;} .contact-info-item{display:flex;flex-direction:column;gap:10px;} .contact-info-item .label{ font-size:12px; text-transform:uppercase; letter-spacing:.6px; font-weight:700; opacity:.55; } .contact-info-item a{ display:inline-flex; align-items:center; gap:14px; font-size:19px; font-weight:700; width:fit-content; } .contact-info-item img{width:38px;height:38px;flex-shrink:0;} .contact-info-item a:hover{text-decoration:underline;} /* ---------- BANDEAU BROUILLON ---------- */ .draft-notice{ display:inline-block; background:var(--white); color:var(--black); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.4px; padding:9px 16px; margin-bottom:20px; } /* ---------- CONTENU LÉGAL (mentions légales / politique de confidentialité) ---------- */ .legal-content{max-width:760px;margin:0 auto;} .legal-content h2{ font-size:19px; text-transform:uppercase; letter-spacing:.4px; font-weight:700; margin:48px 0 16px; } .legal-content h2:first-child{margin-top:0;} .legal-content p{font-size:15.5px;margin:0 0 16px;} .legal-content a{text-decoration:underline;} .legal-content a:hover{opacity:.65;} .legal-list{list-style:none;margin:0 0 16px;padding:0;} .legal-list li{font-size:15.5px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.12);} .legal-list li:last-child{border-bottom:none;} .legal-list strong{font-weight:700;} .legal-updated{margin-top:56px;font-size:13px;opacity:.6;} /* ---------- ACCESSIBILITÉ ---------- */ a:focus-visible, button:focus-visible{ outline:2px solid currentColor; outline-offset:3px; } .nav-link:focus-visible{outline:none;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;} }