/* ============================================================ D'LYR — Design system Reconstruit fidèlement depuis la maquette Figma ============================================================ */ /* ---------- Fonts ---------- */ /* Fonts : chargées via dans le de chaque page (perf) */ /* ============================================================ TOKENS ============================================================ */ :root{ /* Couleurs */ --ink: #1c3024; /* anthracite principal rgb(28,48,36) */ --ink-2: #101f15; /* noir profond rgb(16,31,21) */ --ink-3: #14271b; --paper: #e8eedd; /* clair lisible (texte) rgb(232,238,221)*/ --sapin: #8da983; /* vert sauge (fonds) rgb(141,169,131) */ --paper-2: #d5e0c4; /* gris clair rgb(213,224,196)*/ --gray: #d2dac5; /* placeholder rgb(210,218,197)*/ --gray-2: #b7c3a8; --muted: #4d5c49; /* texte secondaire */ --lime: #d4bc72; /* accent vert citron rgb(212,188,114) */ --lime-2: #c8ae61; --blue: #43744c; /* bleu tag rgb(67,116,76) */ --blue-2: #6f9a72; /* bleu clair rgb(111,154,114) */ --purple: #55703a; /* violet rgb(85,112,58) */ --star: #ffc72c; /* étoiles avis rgb(255,199,44) */ /* Typo — Barlow partout (charte D'LYR) */ --f-display: 'Barlow', sans-serif; /* titres */ --f-body: 'Barlow', sans-serif; /* corps */ --f-btn: 'Barlow', sans-serif; /* boutons / labels */ --f-word: 'Barlow', sans-serif; /* wordmark */ --f-accent: 'Barlow', sans-serif; /* "Expériences VR" */ --f-ui: 'Barlow', sans-serif; /* micro-copie */ /* Rayons / ombres */ --r-sm: 16px; --r-lg: 32px; --r-pill: 999px; --shadow: 4px 4px 16px rgba(0,0,0,.25); /* Layout */ --wrap: 1432px; /* largeur de contenu interne (Figma: 240 → 1680 sur 1920) */ --gutter: clamp(20px, 5vw, 120px); /* Échelle fluide des titres */ --h-hero: clamp(56px, 11vw, 164px); --h-1: clamp(40px, 6.4vw, 96px); --h-2: clamp(32px, 4vw, 64px); --h-3: clamp(26px, 3.1vw, 48px); } /* ============================================================ RESET ============================================================ */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ font-family:var(--f-body); background:var(--ink); color:var(--paper); line-height:1.15; overflow-x:hidden; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; text-rendering:optimizeLegibility; } img,svg{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; } ul{ list-style:none; } :focus-visible{ outline:3px solid var(--lime); outline-offset:3px; } /* Lien d'évitement (RGAA) */ .skip-link{ position:fixed; top:8px; left:8px; z-index:200; background:var(--lime); color:var(--ink); font-family:var(--f-btn); font-weight:700; font-size:16px; padding:12px 18px; border-radius:12px; transform:translateY(-160%); transition:transform .2s ease; } .skip-link:focus{ transform:translateY(0); outline:3px solid var(--ink); outline-offset:2px; } [tabindex="-1"]:focus{ outline:none; } /* ============================================================ UTILITAIRES ============================================================ */ .wrap{ width:min(80%, 1760px); margin-inline:auto; } @media (max-width:900px){ /* Mobile : on récupère la largeur perdue (80% → marges fixes) */ .wrap{ width:calc(100% - 2*var(--gutter)); } } .section{ padding-block:clamp(64px,8vw,140px); position:relative; } .bg-ink{ background:var(--ink); color:var(--paper); } .bg-paper{ background:var(--sapin); color:var(--ink); } /* Texture anneaux de bois (véritables rondelles) sur fonds sauge */ .tex{ position:relative; } .tex::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background: url("../uploads/bois-rond-1.png") var(--b1x,-4%) var(--b1y,-6%) / var(--b1s,340px) no-repeat, url("../uploads/bois-rond-2.png") var(--b2x,104%) var(--b2y,108%) / var(--b2s,480px) no-repeat, url("../uploads/bois-rond-2.png") var(--b3x,55%) var(--b3y,-12%) / var(--b3s,220px) no-repeat, url("../uploads/bois-rond-1.png") var(--b4x,15%) var(--b4y,112%) / var(--b4s,260px) no-repeat; opacity:.14; } .tex > *{ position:relative; z-index:1; } .bg-paper .eyebrow-bar::before{ background:var(--ink); } .bg-paper .btn--ink-o{ --fg:var(--ink); --bd:var(--ink); } .bg-paper .btn--ink-o:hover{ --bg:var(--ink); --fg:var(--paper); } .bg-paper .btn--light{ --bd:var(--paper); } .eyebrow-bar{ display:flex; align-items:center; gap:18px; } .eyebrow-bar::before{ content:""; width:8px; height:clamp(40px,5vw,103px); background:var(--lime); flex:none; border-radius:2px; } /* ---------- Titres ---------- */ .h-hero{ font-family:var(--f-display); font-weight:800; font-size:var(--h-hero); line-height:.95; } .h1{ font-family:var(--f-display); font-weight:700; font-size:var(--h-1); line-height:1; text-wrap:balance; } .h2{ font-family:var(--f-display); font-weight:700; font-size:var(--h-2); line-height:1; } .h3{ font-family:var(--f-display); font-weight:700; font-size:var(--h-3); line-height:1; } .lead{ font-family:var(--f-body); font-size:clamp(16px,1.25vw,24px); line-height:1.45; max-width:46ch; } .tag-genre{ display:inline-flex; align-items:center; gap:6px; font-family:var(--f-btn); font-weight:700; font-size:18px; background:var(--blue); color:var(--paper); padding:4px 16px; border-radius:var(--r-pill); } /* ============================================================ BOUTONS (Style universel identique aux boutons Réserver & Offrir HP) ============================================================ */ .btn, .btn--lime, .btn--lime-o, .btn--light, .btn--ink-o, .btn--paper-o, .btn--cta{ --bg:#243b2d; --fg:#ffffff; --bd:rgba(212,188,114,.45); --fx:var(--lime,#d4bc72); position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--f-btn); font-weight:700; font-size:clamp(17px,1.2vw,22px); line-height:1; letter-spacing:.02em; padding:14px 28px; border-radius:12px; background:transparent; color:#ffffff !important; border:2px solid var(--bd); transition:transform .22s ease, color .25s ease, border-color .25s ease, box-shadow .2s ease; white-space:nowrap; text-decoration:none; } /* Fond de base vert sombre */ .btn::after, .btn--lime::after, .btn--lime-o::after, .btn--light::after, .btn--ink-o::after, .btn--paper-o::after, .btn--cta::after{ content:""; position:absolute; inset:0; z-index:-2; background:var(--bg); transition:background .25s ease; } /* Overlay de survol jaune/doré montant depuis le bas */ .btn::before, .btn--lime::before, .btn--lime-o::before, .btn--light::before, .btn--ink-o::before, .btn--paper-o::before, .btn--cta::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--fx); transform:translateY(101%); transition:transform .38s cubic-bezier(.55,0,.2,1); pointer-events:none; } .btn:hover::before, .btn:focus-visible::before, .btn--lime:hover::before, .btn--lime-o:hover::before, .btn--light:hover::before, .btn--ink-o:hover::before, .btn--paper-o:hover::before, .btn--cta:hover::before{ transform:translateY(0) !important; } .btn:hover, .btn:focus-visible, .btn--lime:hover, .btn--lime-o:hover, .btn--light:hover, .btn--ink-o:hover, .btn--paper-o:hover, .btn--cta:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.3); color:var(--ink,#1c3024) !important; border-color:var(--lime,#d4bc72) !important; } .btn:active{ transform:translateY(0); } @media (prefers-reduced-motion: reduce){ .btn::before{ transition:none; } } .btn--sm{ padding:10px 22px; font-size:clamp(15px,1vw,18px); } /* Bouton flèche carré (lime) */ .btn-arrow{ width:clamp(56px,5vw,82px); aspect-ratio:1; border-radius:var(--r-sm); background:var(--ink); color:var(--lime); display:grid; place-items:center; flex:none; transition:transform .2s ease, background .2s ease; } .btn-arrow svg{ width:46%; height:46%; } .btn-arrow:hover{ transform:rotate(-8deg) scale(1.05); } .btn-arrow--lime{ background:var(--lime); color:var(--ink); } /* ============================================================ PLACEHOLDER MEDIA ============================================================ */ .ph{ position:relative; overflow:hidden; border-radius:var(--r-sm); background: repeating-linear-gradient(135deg, rgba(0,0,0,.06) 0 2px, transparent 2px 14px), var(--gray); display:grid; place-items:center; isolation:isolate; } .ph--dark{ background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px), #34373b; color:#aeb2b8; } .ph__label{ font-family:'Space Grotesk', monospace; font-weight:500; font-size:clamp(12px,1vw,14px); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:6px 10px; text-align:center; border:1px dashed currentColor; border-radius:6px; opacity:.8; } .ph--dark .ph__label{ color:#aeb2b8; } .ph__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); } a:hover .ph__img, a:focus-visible .ph__img{ transform:scale(1.05); } .ph__vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* ============================================================ LIGHTBOX IMAGES ============================================================ */ .is-zoomable{ cursor:zoom-in; } .lightbox{ position:fixed; inset:0; z-index:2000; background:rgba(15,15,15,.93); display:grid; place-items:center; padding:4vh 4vw; opacity:0; pointer-events:none; transition:opacity .25s; } .lightbox.on{ opacity:1; pointer-events:auto; } .lightbox__img{ max-width:100%; max-height:92vh; width:auto; height:auto; object-fit:contain; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.55); } .lightbox__close{ position:absolute; top:14px; right:20px; font-size:44px; line-height:1; color:#c2d0b3; background:none; border:none; cursor:pointer; z-index:1; } /* ============================================================ NAVIGATION ============================================================ */ .nav{ position:fixed; top:18px; left:0; right:0; z-index:60; display:flex; justify-content:center; pointer-events:none; } .nav__inner{ pointer-events:auto; width:min(80%, calc(100% - 36px)); height:74px; display:flex; align-items:center; gap:24px; padding:0 14px 0 22px; border-radius:var(--r-sm); background:rgba(16,31,21,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(232,238,221,.18); transition:background .3s ease, border-color .3s ease; } .nav--solid .nav__inner{ background:rgba(16,31,21,.88); border-color:rgba(232,238,221,.12); } /* pages à fond sapin : même traitement */ .nav--on-paper .nav__inner{ background:rgba(16,31,21,.72); border-color:rgba(232,238,221,.18); } .nav--on-paper.nav--solid .nav__inner{ background:rgba(16,31,21,.88); border-color:rgba(232,238,221,.12); } .brand{ display:inline-flex; align-items:center; justify-content:center; flex:none; height:64px; margin-block:auto; } .brand img{ height:64px; width:auto; display:block; object-fit:contain; } @media (max-width:640px){ .brand, .brand img{ height:46px; } } .nav__links{ display:flex; align-items:center; gap:clamp(10px,1.6vw,30px); margin-inline:auto; font-family:var(--f-btn); font-weight:700; font-size:20px; } .nav__links a{ position:relative; padding:6px 2px; color:var(--paper); opacity:.92; transition:opacity .2s; } .nav__links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:3px; background:var(--lime); transition:right .25s ease; } .nav__links a:hover{ opacity:1; } .nav__links a:hover::after, .nav__links a[aria-current="page"]::after{ right:0; } .nav__cta{ display:flex; align-items:center; gap:10px; flex:none; } .nav__burger{ display:none; width:48px; height:48px; border-radius:12px; } .nav__burger span{ display:block; width:26px; height:3px; background:currentColor; margin:5px auto; border-radius:2px; transition:.3s; } .nav__burger{ color:var(--paper); } /* Drawer mobile */ .drawer{ position:fixed; inset:0; z-index:80; background:rgba(20,20,20,.97); backdrop-filter:blur(6px); display:flex; flex-direction:column; align-items:center; justify-content:center; justify-content:safe center; gap:8px; overflow-y:auto; padding:max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); transform:translateY(-100%); transition:transform .4s cubic-bezier(.7,0,.2,1); visibility:hidden; } .drawer.open{ transform:translateY(0); visibility:visible; } .drawer a{ font-family:var(--f-display); font-weight:700; font-size:34px; color:var(--paper); padding:10px; } .drawer a:hover{ color:var(--lime); } .drawer__close{ position:absolute; top:24px; right:26px; width:52px; height:52px; color:var(--paper); font-size:40px; line-height:1; } .drawer__cta{ margin-top:24px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; } /* ============================================================ MARQUEE ============================================================ */ .marquee{ overflow:hidden; width:100%; display:flex; } .marquee__track{ display:flex; flex:none; align-items:center; gap:var(--mg,40px); padding-right:var(--mg,40px); animation:marquee var(--mspeed,28s) linear infinite; will-change:transform; } .marquee--rev .marquee__track{ animation-direction:reverse; } @keyframes marquee{ to{ transform:translateX(-50%); } } .marquee--lime{ background:var(--lime); color:var(--ink); padding-block:14px; transform:rotate(-1deg); } .marquee__item{ font-family:var(--f-display); font-weight:800; font-size:clamp(26px,3vw,40px); text-transform:uppercase; letter-spacing:.01em; white-space:nowrap; display:flex; align-items:center; gap:var(--mg,40px); } .marquee__dot{ width:14px; height:14px; border-radius:50%; background:currentColor; flex:none; } /* ============================================================ FOOTER ============================================================ */ .footer{ background:var(--sapin); color:var(--ink); position:relative; overflow:hidden; } .footer__top{ padding:clamp(48px,6vw,80px) 0 clamp(40px,5vw,72px); } .footer__grid{ display:grid; gap:48px 40px; grid-template-columns:1.4fr repeat(3, 1fr); } .footer h4{ font-family:var(--f-display); font-weight:700; font-size:24px; margin-bottom:22px; } .footer__contact p{ display:flex; gap:12px; align-items:flex-start; font-size:16px; margin-bottom:16px; line-height:1.4; max-width:30ch; } .footer__contact p svg{ width:22px; height:22px; flex:none; margin-top:1px; color:var(--ink); } .footer__col li{ margin-bottom:12px; } .footer__col a{ font-size:16px; opacity:.85; transition:opacity .2s, color .2s; } .footer__col a:hover{ opacity:1; color:var(--lime); } .footer__social{ display:flex; gap:14px; margin-top:10px; } .footer__social a{ width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:var(--ink); color:var(--paper); transition:transform .2s, background .2s; } .footer__social a:hover{ transform:translateY(-3px); background:var(--blue); } .footer__followlabel{ font-family:var(--f-ui); font-weight:700; font-size:18px; letter-spacing:2px; margin-bottom:14px; } .footer__word{ text-align:center; padding:clamp(20px,3vw,40px) var(--gutter) clamp(28px,3vw,48px); user-select:none; pointer-events:none; } .footer__word img{ width:min(460px,58%); height:auto; display:block; margin-inline:auto; } .footer__bar{ background:var(--ink); color:#fff; text-align:center; font-family:var(--f-ui); font-weight:700; font-size:clamp(13px,1.2vw,20px); letter-spacing:2px; padding:18px 20px; } /* ============================================================ SCROLL REVEAL ============================================================ */ .reveal{ opacity:1; transform:none; } .js-anim .reveal{ opacity:0; } .js-anim .reveal.in{ animation:reveal-in .7s cubic-bezier(.2,.7,.2,1) both; } @keyframes reveal-in{ from{ opacity:0; transform:translateY(36px); } to{ opacity:1; transform:none; } } .js-anim .reveal[data-d="1"].in{ animation-delay:.08s; } .js-anim .reveal[data-d="2"].in{ animation-delay:.16s; } .js-anim .reveal[data-d="3"].in{ animation-delay:.24s; } .js-anim .reveal[data-d="4"].in{ animation-delay:.32s; } /* Failsafe : si la timeline d'animation ne progresse pas, on force l'affichage */ .force-show .reveal{ animation:none !important; opacity:1 !important; transform:none !important; } /* ============================================================ MICRO-ANIMATIONS (CSS only, transform/opacity) ============================================================ */ a[class*="card"]{ transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; will-change:transform; } a[class*="card"]:hover{ transform:translateY(-6px); box-shadow:0 18px 44px rgba(16,31,21,.22); } .btn:hover{ transform:translateY(-2px); } .btn:active{ transform:translateY(0) scale(.98); } .btn:hover .btn-arrow{ transform:translateX(4px); } .hero__photo{ animation:hero-kb 26s ease-in-out infinite alternate; } @keyframes hero-kb{ from{ transform:scale(1); } to{ transform:scale(1.07); } } .hero__scroll span{ animation:scroll-cue 1.8s ease-in-out infinite; } @keyframes scroll-cue{ 0%,100%{ transform:translateY(0); opacity:.7; } 50%{ transform:translateY(8px); opacity:1; } } img[loading="lazy"]{ transition:opacity .45s ease; } .eyebrow-bar::before{ transform-origin:left; animation:none; } .js-anim .reveal.in .eyebrow-bar::before, .js-anim .eyebrow-bar.reveal.in::before{ animation:bar-grow .8s cubic-bezier(.2,.7,.2,1) both; } @keyframes bar-grow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } } @media (prefers-reduced-motion: reduce){ .hero__photo, .hero__scroll span{ animation:none; } a[class*="card"], .ph__img, .btn{ transition:none; } a[class*="card"]:hover{ transform:none; } } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } .marquee__track{ animation:none; } *{ scroll-behavior:auto !important; } } /* ============================================================ CARTE GOOGLE MAPS ============================================================ */ .map-embed{ position:relative; } .map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } /* ============================================================ COOKIE BAR (RGPD) ============================================================ */ .cookiebar{ position:fixed; left:50%; bottom:20px; transform:translate(-50%,140%); z-index:300; width:min(940px, calc(100vw - 32px)); background:var(--ink); color:var(--paper); border:1px solid rgba(194,208,179,.16); border-radius:16px; padding:18px 22px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; box-shadow:0 18px 50px rgba(0,0,0,.45); transition:transform .45s cubic-bezier(.6,0,.2,1); } .cookiebar--in{ transform:translate(-50%,0); } .cookiebar__txt{ flex:1 1 380px; font-size:14px; line-height:1.5; opacity:.95; } .cookiebar__txt strong{ display:block; font-family:var(--f-btn); font-weight:700; font-size:16px; margin-bottom:4px; } .cookiebar__txt a{ color:var(--lime); text-decoration:underline; text-underline-offset:2px; } .cookiebar__btns{ display:flex; gap:10px; flex-wrap:wrap; } @media (max-width:640px){ .cookiebar{ bottom:12px; padding:16px 18px; } .cookiebar__btns{ width:100%; } .cookiebar__btns .btn{ flex:1; text-align:center; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1100px){ .nav__links{ display:none; } .nav__cta{ display:none; } .nav__burger{ display:block; margin-left:auto; } .footer__grid{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ :root{ --gutter:20px; } .footer__grid{ grid-template-columns:1fr; gap:36px; } .nav__inner{ height:64px; width:calc(100% - 36px); } .brand{ font-size:28px; } .btn{ padding:14px 22px; white-space:normal; text-align:center; } } /* ---------- Bouton langue (drapeau) ---------- */ .lang-btn{background:none;border:0;padding:4px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;transition:transform .15s ease} .lang-btn svg{width:29px;height:20px;border-radius:4px;display:block;box-shadow:0 0 0 2px rgba(255,255,255,.85)} .lang-btn:hover{transform:scale(1.12)} .lang-btn:focus-visible{outline:2px solid #d4bc72;outline-offset:2px} .drawer .lang-btn{align-self:center;margin-top:4px}