/* * Roulenord — feuille de style du site vitrine * Les polices (Big Shoulders Display, IBM Plex Sans, IBM Plex Mono) sont * chargées via dans (avec preconnect), pas via @import ici : * @import retarde le chargement en le chaînant après ce fichier CSS. */ :root{ color-scheme:light; --ink:#12181f; --ink-soft:#4a5561; --paper:#f4f4f1; --paper-deep:#e7e7e2; --paper-deeper:#dadad4; --line:rgba(18,24,31,0.14); --accent:#c8f13c; --accent-ink:#1c2b06; --rust:#c96a2e; --card:#ffffff; --shadow:0 1px 2px rgba(18,24,31,0.05), 0 14px 34px -18px rgba(18,24,31,0.28); --radius:14px; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ink:#f0f1ec; --ink-soft:#a9b0ab; --paper:#12151a; --paper-deep:#191d23; --paper-deeper:#222730; --line:rgba(240,241,236,0.13); --card:#171b21; --shadow:0 1px 2px rgba(0,0,0,0.5), 0 14px 34px -18px rgba(0,0,0,0.7); } } :root[data-theme="dark"]{ --ink:#f0f1ec; --ink-soft:#a9b0ab; --paper:#12151a; --paper-deep:#191d23; --paper-deeper:#222730; --line:rgba(240,241,236,0.13); --card:#171b21; --shadow:0 1px 2px rgba(0,0,0,0.5), 0 14px 34px -18px rgba(0,0,0,0.7); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; font-size:14px; } img{max-width:100%;} h1,h2,h3{ font-family:'Big Shoulders Display',system-ui,sans-serif; text-transform:uppercase; letter-spacing:0.005em; text-wrap:balance; margin:0; color:var(--ink); line-height:0.98; } p{line-height:1.6; color:var(--ink-soft); margin:0;} a{color:inherit; text-decoration:none;} .mono{font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums;} .wrap{max-width:1180px; margin:0 auto; padding:0 32px;} .eyebrow{ font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--rust); font-weight:600; display:flex; align-items:center; gap:9px; margin-bottom:14px; } .eyebrow::before{content:""; width:20px; height:2px; background:var(--rust); display:inline-block;} @media (max-width:680px){ .wrap{padding:0 20px;} } ::selection{background:var(--accent); color:var(--accent-ink);} :focus-visible{outline:2px solid var(--accent); outline-offset:2px;} /* accessibilité : lien d'évitement, masqué sauf au focus clavier */ .skip-link{ position:absolute; left:12px; top:-48px; z-index:100; background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:8px; font-size:13px; font-weight:600; transition:top .15s ease; } .skip-link:focus{top:12px;} /* ---------------- header ---------------- */ header{ position:sticky; top:0; z-index:30; background:rgba(244,244,241,0.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) header{background:rgba(18,21,26,0.86);} } :root[data-theme="dark"] header{background:rgba(18,21,26,0.86);} .header-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 0;} .brand{display:flex; align-items:center; gap:10px;} .brand .mark{width:34px; height:30px; flex:none;} .brand .word{font-family:'Big Shoulders Display'; font-weight:800; font-size:20px; letter-spacing:0.03em; text-transform:uppercase;} nav.primary{display:flex; align-items:center; gap:30px;} nav.primary a{font-size:13.5px; font-weight:600; color:var(--ink-soft);} nav.primary a:hover{color:var(--ink);} .header-right{display:flex; align-items:center; gap:18px;} .phone-link{display:flex; align-items:center; gap:7px; font-family:'IBM Plex Mono'; font-size:13.5px; font-weight:600;} .phone-link svg{width:15px;height:15px;} .btn{ display:inline-flex; align-items:center; gap:7px; padding:10px 18px; border-radius:8px; font-size:13.5px; font-weight:700; cursor:pointer; border:1.5px solid var(--ink); background:transparent; color:var(--ink); white-space:nowrap; } .btn:hover{background:var(--ink); color:var(--paper);} .btn-accent{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);} .btn-accent:hover{background:var(--ink); color:var(--accent); border-color:var(--ink);} .btn-login{padding:10px 16px; border-color:var(--line); color:var(--ink-soft); background:var(--card);} .btn-login svg{width:15px; height:15px;} .btn-login:hover{background:var(--ink); color:var(--paper); border-color:var(--ink);} @media (max-width:900px){ nav.primary{display:none;} .phone-link{display:none;} } @media (max-width:520px){ .btn-login{padding:10px;} .btn-login .label{display:none;} } @media (max-width:440px){ .header-right{gap:10px;} .brand .word{display:none;} .btn-accent{padding:10px 14px;} } /* ---------------- hero ---------------- */ .hero{position:relative; padding:76px 0 84px; overflow:hidden; border-bottom:1px solid var(--line);} .hero-stripes{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.5;} .hero-inner{position:relative; z-index:1; display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:end;} .hero h1{font-size:clamp(42px,6.4vw,92px); font-weight:800;} .hero h1 em{font-style:normal; color:var(--rust);} .hero-lede{font-size:16.5px; max-width:46ch; margin-top:20px;} .hero-cta-row{display:flex; gap:12px; margin-top:32px; flex-wrap:wrap;} .hero-zone{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 24px; } .hero-zone .eyebrow{margin-bottom:10px;} .hero-zone-cities{display:flex; flex-wrap:wrap; gap:6px 8px; margin-top:14px;} .hero-zone-cities span{ font-family:'IBM Plex Mono'; font-size:11.5px; padding:4px 9px; border-radius:999px; background:var(--paper-deep); color:var(--ink-soft); } .hero-stats{display:flex; gap:22px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line);} .hero-stat b{display:block; font-family:'Big Shoulders Display'; font-size:26px; font-weight:700;} .hero-stat span{font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em;} @media (max-width:900px){ .hero-inner{grid-template-columns:1fr;} } /* ---------------- marquee ---------------- */ .marquee{background:var(--ink); color:var(--paper); overflow:hidden; white-space:nowrap; border-bottom:1px solid var(--line);} .marquee-track{display:inline-flex; align-items:center; gap:36px; padding:11px 0; animation:scroll 32s linear infinite;} .marquee-track span{font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; display:inline-flex; align-items:center; gap:36px; color:rgba(240,241,236,0.75);} .marquee-track span b{color:var(--accent); font-weight:600;} @keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} @media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} } /* ---------------- sections ---------------- */ section{padding:88px 0;} .section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:44px; flex-wrap:wrap;} .section-head h2{font-size:clamp(30px,4vw,46px);} .section-head p{max-width:38ch; font-size:14.5px;} /* activities */ #activites{background:var(--paper-deep); border-bottom:1px solid var(--line);} .activity-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;} .activity-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:16px; transition:transform .18s ease; } .activity-card:hover{transform:translateY(-3px);} .activity-icon{width:52px; height:52px; border-radius:11px; background:var(--paper-deep); display:flex; align-items:center; justify-content:center; flex:none;} .activity-icon svg{width:30px; height:30px; stroke:var(--ink);} .activity-card h3{font-size:19px; font-weight:700; letter-spacing:0.01em;} .activity-card p{font-size:13.5px;} .activity-tag{font-family:'IBM Plex Mono'; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--rust); font-weight:600;} @media (max-width:920px){ .activity-grid{grid-template-columns:1fr 1fr;} } @media (max-width:560px){ .activity-grid{grid-template-columns:1fr;} } /* pourquoi */ .why-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;} .why-card{display:flex; gap:16px; padding:24px 4px; border-top:1px solid var(--line);} .why-card:nth-child(-n+2){border-top:1px solid var(--line);} .why-icon{width:42px; height:42px; flex:none; border-radius:9px; background:var(--accent); display:flex; align-items:center; justify-content:center;} .why-icon svg{width:22px; height:22px; stroke:var(--accent-ink);} .why-card h3{font-size:16.5px; text-transform:none; font-family:'IBM Plex Sans'; font-weight:700; letter-spacing:0; margin-bottom:5px;} .why-card p{font-size:13.5px;} @media (max-width:760px){ .why-grid{grid-template-columns:1fr;} } /* fleet strip */ #materiel{background:var(--ink); color:var(--paper); border-bottom:1px solid var(--line);} #materiel .section-head h2{color:var(--paper);} #materiel .section-head p{color:rgba(240,241,236,0.6);} .fleet-row{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;} .fleet-item{ border:1px solid rgba(240,241,236,0.16); border-radius:var(--radius); padding:20px 16px; background:rgba(240,241,236,0.04); } .fleet-item .n{font-family:'IBM Plex Mono'; color:var(--accent); font-size:12px; font-weight:600;} .fleet-item h3{font-size:16px; text-transform:none; font-family:'IBM Plex Sans'; font-weight:700; margin-top:6px; color:var(--paper);} .fleet-item p{font-size:12px; margin-top:5px; color:rgba(240,241,236,0.55);} @media (max-width:920px){ .fleet-row{grid-template-columns:1fr 1fr;} } @media (max-width:560px){ .fleet-row{grid-template-columns:1fr;} } /* faq */ #faq{background:var(--paper-deep); border-bottom:1px solid var(--line);} .faq-list{display:flex; flex-direction:column; gap:10px; max-width:820px;} .faq-item{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:4px 22px; } .faq-item summary{ padding:18px 0; font-family:'IBM Plex Sans'; font-weight:700; font-size:15px; color:var(--ink); cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; } .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary::after{ content:"+"; font-family:'Big Shoulders Display'; font-size:22px; color:var(--rust); flex:none; line-height:1; } .faq-item[open] summary::after{content:"–";} .faq-item p{padding-bottom:18px; font-size:13.5px; max-width:68ch;} /* contact */ .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;} .contact-form{display:flex; flex-direction:column; gap:14px;} .form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;} .field label{display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); margin-bottom:7px;} .field input, .field textarea{ width:100%; padding:12px 13px; border-radius:8px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); font-size:14.5px; font-family:inherit; resize:vertical; } .field input:focus, .field textarea:focus{border-color:var(--ink); outline:none;} .form-submit{margin-top:6px;} .form-note{font-size:12px; color:var(--ink-soft); margin-top:2px;} .form-success{ display:none; margin-top:12px; padding:12px 14px; border-radius:8px; background:var(--paper-deep); font-size:13px; font-weight:600; color:var(--ink); } .form-success.show{display:block;} .coord-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 26px 8px;} .coord-row{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line);} .coord-row:last-child{border-bottom:none;} .coord-row svg{width:19px; height:19px; flex:none; margin-top:2px; stroke:var(--rust);} .coord-row b{display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-soft); font-weight:700; margin-bottom:3px;} .coord-row span, .coord-row a{font-size:14.5px; font-weight:500;} .coord-row a:hover{text-decoration:underline;} .zone-map{margin-top:20px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px;} .zone-map svg{width:100%; height:auto; display:block;} /* footer */ footer{background:var(--paper-deeper); border-top:1px solid var(--line); padding:52px 0 26px;} .footer-top{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid var(--line);} .footer-brand .brand{margin-bottom:12px;} .footer-brand p{font-size:13px; max-width:34ch;} .footer-col h4{font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); font-weight:600; margin-bottom:14px;} .footer-col a, .footer-col button.linklike{ display:block; font-size:13.5px; color:var(--ink); margin-bottom:10px; font-weight:500; background:none; border:none; padding:0; text-align:left; cursor:pointer; font-family:inherit; } .footer-col a:hover, .footer-col button.linklike:hover{color:var(--rust);} .footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:22px; gap:16px; flex-wrap:wrap;} .footer-bottom span{font-size:12px; color:var(--ink-soft); font-family:'IBM Plex Mono';} .social-row{display:flex; gap:10px;} .social-row a{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; } .social-row a:hover{background:var(--ink); border-color:var(--ink);} .social-row a:hover svg{stroke:var(--paper);} .social-row svg{width:15px; height:15px; stroke:var(--ink-soft);} @media (max-width:820px){ .footer-top{grid-template-columns:1fr; gap:26px;} } /* legal modal */ #legal-overlay{position:fixed; inset:0; background:rgba(12,16,20,0.5); display:none; align-items:center; justify-content:center; z-index:60; padding:24px;} #legal-overlay.show{display:flex;} #legal-modal{background:var(--card); border-radius:var(--radius); max-width:560px; width:100%; max-height:80vh; overflow-y:auto; padding:32px; box-shadow:var(--shadow);} #legal-modal h2{font-size:24px; margin-bottom:16px;} #legal-modal p{font-size:13.5px; margin-bottom:12px;} #legal-modal .close-btn{float:right; border:none; background:var(--paper-deep); width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:16px; color:var(--ink-soft);} @media (max-width:760px){ .contact-grid{grid-template-columns:1fr; gap:36px;} .form-row{grid-template-columns:1fr;} }