/* ═══════════════════════════════════════════════════════════ BE-BUILDER · base.css Fondation commune : tokens (charte Lucile Collignon), reset, typographies, header/footer jour-nuit, boutons, FABs, utils. Mis en cache une seule fois pour toutes les pages. ═══════════════════════════════════════════════════════════ */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ /* ── Palette officielle de la marque (ne pas modifier) ── */ --bg:#f4efe6; /* crème (jour) */ --bg2:#eae2d4; /* crème + foncé */ --dark:#1c1a17; /* moka très foncé (nuit) */ --ink:#272421; /* moka (texte jour) */ --ink2:#4a453f; /* moka clair */ --cream:#e8e6e2; /* gris clair charte */ --cream-txt:#ece7de; /* texte crème sur fond sombre */ --gold:#661014; /* BORDEAUX · couleur principale */ --gold2:#9c2f38; /* bordeaux clair (accents) */ --moutarde:#e2a037; /* MOUTARDE · accent chaleur */ --white:#ffffff; --stone:#6f665f; /* gris chaud (texte secondaire) · assombri pour contraste AA */ --border:rgba(39,36,33,.1); --line:rgba(39,36,33,.14); /* filets (cartes, champs) */ --serif:'Caudex',Georgia,serif; --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif; --e-out:cubic-bezier(.16,1,.3,1); /* ── Ambiance (surchargée par event.css) ── */ --surface:var(--bg); --on-surface:var(--ink); --on-surface-soft:var(--stone); --hdr-bg:rgba(244,239,230,.9); --hdr-border:var(--border); --maxw:1240px; } /* ── Bascule NUIT (pages événementiel : ) ── */ body.night{ --surface:var(--dark); --on-surface:var(--cream-txt); --on-surface-soft:rgba(236,231,222,.62); --ink:var(--cream-txt); --stone:rgba(236,231,222,.6); --bg2:#232019; --hdr-bg:rgba(28,26,23,.86); --hdr-border:rgba(236,231,222,.12); --border:rgba(236,231,222,.1); --line:rgba(236,231,222,.16); } html{ background:var(--surface); color:var(--on-surface); font-family:var(--sans); font-weight:300; font-size:clamp(16px, 0.6vw + 11.5px, 24px); /* responsive : grandit sur grand écran */ overflow-x:clip; scroll-behavior:smooth; } body{overflow-x:clip;min-height:100vh;background:var(--surface);color:var(--on-surface)} a{color:inherit;text-decoration:none} img,video{display:block;max-width:100%} [hidden]{display:none!important} /* prime sur display:grid/flex des conteneurs */ /* Bandeau d'ouverture (partagé accueil / cowork / event) */ .openband{background:var(--gold);color:#fff;text-align:center;padding:1rem 1.4rem;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase} .openband b{color:var(--moutarde)} /* Lien d'évitement (accessibilité clavier) */ .skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#fff;padding:.7rem 1.2rem;border-radius:0 0 3px 0;z-index:10000;font-size:.8rem;letter-spacing:.04em} .skip:focus{left:0;top:0} em{font-style:italic} h1 em,h2 em,h3 em{font-family:var(--serif);color:var(--gold)} button{font-family:inherit;cursor:pointer} ::selection{background:var(--gold);color:#fff} /* ── Grain (texture subtile) ── */ #grain{position:fixed;inset:0;z-index:9500;pointer-events:none;opacity:.02;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px} body.night #grain{mix-blend-mode:screen;opacity:.03} /* ── Barre de progression scroll ── */ #prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:9600;background:linear-gradient(90deg,var(--gold),var(--gold2));pointer-events:none} /* ── Loader ── */ #loader{position:fixed;inset:0;z-index:9999;background:var(--dark);display:flex;align-items:center;justify-content:center; transition:opacity .7s ease,visibility .7s} #loader.gone{opacity:0;visibility:hidden;pointer-events:none} #loader img{width:100px;height:auto;opacity:0;transform:translateY(10px);animation:ldr .9s .1s var(--e-out) forwards} @keyframes ldr{to{opacity:1;transform:none}} /* ═══ HEADER (jour/nuit) ═══ */ .hdr{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between; padding:1.5rem clamp(1.4rem,4vw,3.4rem);transition:padding .5s var(--e-out),background .5s,border-color .5s;border-bottom:1px solid transparent} .hdr.scrolled{padding:.85rem clamp(1.4rem,4vw,3.4rem);background:var(--hdr-bg); backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);border-color:var(--hdr-border)} .hdr-logo{display:block;line-height:0} .hdr-logo img{height:54px;width:auto;transition:height .5s var(--e-out)} .hdr.scrolled .hdr-logo img{height:46px} /* bascule logo blanc / bordeaux selon fond */ .hdr-logo .lg-c{display:none} .hdr.scrolled .hdr-logo .lg-w{display:none} .hdr.scrolled .hdr-logo .lg-c{display:block} body.night .hdr.scrolled .hdr-logo .lg-w{display:block} body.night .hdr.scrolled .hdr-logo .lg-c{display:none} .hdr-nav{display:flex;align-items:center;gap:clamp(1.4rem,2.4vw,2.3rem)} .hdr-nav a{font-size:.62rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82);position:relative;transition:color .3s} .hdr.scrolled .hdr-nav a{color:var(--stone)} body.night .hdr.scrolled .hdr-nav a{color:rgba(236,231,222,.7)} .hdr-nav a:not(.hdr-cta)::after{content:'';position:absolute;left:0;bottom:-5px;width:0;height:1px;background:currentColor;transition:width .4s var(--e-out)} .hdr-nav a:not(.hdr-cta):hover::after,.hdr-nav a.active::after,.hdr-nav a[aria-current="page"]::after{width:100%} .hdr-nav a.active,.hdr-nav a[aria-current="page"],.hdr-nav a:hover{color:#fff} .hdr.scrolled .hdr-nav a.active,.hdr.scrolled .hdr-nav a[aria-current="page"],.hdr.scrolled .hdr-nav a:hover{color:var(--gold)} body.night .hdr.scrolled .hdr-nav a.active,body.night .hdr.scrolled .hdr-nav a[aria-current="page"],body.night .hdr.scrolled .hdr-nav a:hover{color:var(--moutarde)} .hdr-cta{padding:.62rem 1.5rem;border:1px solid rgba(255,255,255,.4);border-radius:100px;color:#fff!important;transition:background .3s,border-color .3s,color .3s} .hdr-cta::after{display:none!important} .hdr.scrolled .hdr-cta{border-color:rgba(102,16,20,.35);color:var(--gold)!important} body.night .hdr.scrolled .hdr-cta{border-color:rgba(236,231,222,.4);color:var(--cream-txt)!important} .hdr-cta:hover{background:var(--gold);border-color:var(--gold);color:#fff!important} /* Header toujours "clair" (pages sans hero sombre : Journal, articles, légales) */ body.hdr-solid .hdr{background:var(--hdr-bg);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);border-color:var(--hdr-border);padding:.85rem clamp(1.4rem,4vw,3.4rem)} body.hdr-solid .hdr-logo img{height:46px} body.hdr-solid .hdr-logo .lg-w{display:none} body.hdr-solid .hdr-logo .lg-c{display:block} body.hdr-solid .hdr-nav a{color:var(--stone)} body.hdr-solid .hdr-nav a.active,body.hdr-solid .hdr-nav a[aria-current="page"],body.hdr-solid .hdr-nav a:hover{color:var(--gold)} body.hdr-solid .hdr-cta{border-color:rgba(102,16,20,.35);color:var(--gold)!important} body.hdr-solid .hdr-cta:hover{background:var(--gold);border-color:var(--gold);color:#fff!important} body.hdr-solid .burger span{background:var(--ink)} /* Burger */ .burger{display:none;width:44px;height:44px;position:relative;background:none;border:0} .burger span{position:absolute;left:7px;width:30px;height:1.5px;background:#fff;transition:transform .4s var(--e-out),opacity .25s,background .3s} .hdr.scrolled .burger span{background:var(--ink)} body.night .hdr.scrolled .burger span{background:var(--cream-txt)} .burger span:nth-child(1){top:14.5px}.burger span:nth-child(2){top:50%;transform:translateY(-50%)}.burger span:nth-child(3){bottom:14.5px} .burger.open span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)} /* Menu mobile */ .mobile-menu{position:fixed;inset:0;z-index:150;background:var(--dark);display:flex;flex-direction:column;justify-content:center;padding:2rem clamp(1.4rem,6vw,3rem);gap:.2rem;opacity:0;visibility:hidden;transition:opacity .5s var(--e-out),visibility .5s} .mobile-menu.open{opacity:1;visibility:visible} .mobile-menu a{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,8vw,2.6rem);color:var(--cream-txt);padding:.35rem 0} .mobile-menu a.active,.mobile-menu a em{color:var(--moutarde);font-style:normal} body.menu-open{overflow:hidden} /* Menu ouvert : header transparent au-dessus du menu sombre, logo + croix en blanc */ body.menu-open .hdr{background:transparent;border-color:transparent} body.menu-open .burger span,body.menu-open .hdr.scrolled .burger span{background:#fff} body.menu-open .hdr-logo .lg-w{display:block} body.menu-open .hdr-logo .lg-c{display:none} /* ═══ BOUTONS ═══ */ .btn{display:inline-flex;align-items:center;gap:.9rem;padding:1.1rem 2.4rem;background:var(--gold);color:#fff; font-size:.7rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;border-radius:2px;position:relative;overflow:hidden;border:0;transition:transform .35s} .btn::before{content:'';position:absolute;inset:0;background:var(--ink);transform:translateX(-101%);transition:transform .5s var(--e-out)} .btn:hover::before{transform:none} .btn>*{position:relative;z-index:1} .btn:hover{transform:translateY(-2px)} .btn .ar,.btn-outline .ar{transition:transform .4s var(--e-out)} .btn:hover .ar,.btn-outline:hover .ar{transform:translateX(5px)} .btn-outline{display:inline-flex;align-items:center;gap:.7rem;padding:1.05rem 2.2rem;border:1px solid var(--gold);border-radius:2px;color:var(--gold); font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;transition:background .3s,color .3s,transform .35s} .btn-outline:hover{background:var(--gold);color:#fff;transform:translateY(-2px)} body.night .btn-outline{border-color:rgba(236,231,222,.5);color:var(--cream-txt)} body.night .btn-outline:hover{background:var(--moutarde);border-color:var(--moutarde);color:var(--ink)} /* ═══ FABs (WhatsApp + haut de page) ═══ */ .fabs{position:fixed;right:clamp(1rem,2.3vw,2rem);bottom:clamp(1rem,2.3vw,2rem);z-index:8000;display:flex;flex-direction:column;gap:.7rem;align-items:center} .fab{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(28,24,20,.28); transition:transform .35s var(--e-out),opacity .35s,visibility .35s,background .3s,color .3s;border:0;background:#fff;color:var(--gold)} .fab svg{width:23px;height:23px;display:block} .fab-wa{background:var(--gold);color:#fff} .fab-wa:hover{transform:translateY(-3px) scale(1.05);background:var(--gold2)} .fab-top{border:1px solid var(--border);opacity:0;visibility:hidden;transform:translateY(12px)} .fab-top.show{opacity:1;visibility:visible;transform:none} .fab-top:hover{transform:translateY(-3px)} @media(max-width:600px){.fab{width:48px;height:48px}.fab svg{width:21px;height:21px}} /* ═══ FOOTER ═══ */ .foot{background:var(--dark);color:var(--cream-txt);padding:clamp(3.5rem,7vw,5rem) clamp(1.4rem,5vw,4rem) 2.5rem} .foot-top{display:flex;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.1)} .foot-logo img{height:54px;width:auto} .foot-right{display:flex;flex-direction:column;gap:1.2rem;align-items:flex-end;text-align:right} .foot-nav{display:flex;gap:1.6rem;flex-wrap:wrap;justify-content:flex-end} .foot-nav a{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(236,231,222,.68);transition:color .3s} .foot-nav a:hover{color:var(--moutarde)} .foot-addr{font-size:.72rem;line-height:1.8;color:rgba(236,231,222,.6)} .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:1.6rem} .foot-tag{font-family:var(--serif);font-style:italic;font-size:1rem;color:rgba(236,231,222,.55)} .foot-copy{font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(236,231,222,.5)} .foot-copy a{color:inherit;border-bottom:1px solid rgba(236,231,222,.3);transition:color .3s,border-color .3s} .foot-copy a:hover{color:var(--moutarde);border-color:var(--moutarde)} /* ═══ UTILITAIRES ═══ */ .container{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:clamp(1.4rem,5vw,3rem)} .section{padding-block:clamp(4.5rem,10vw,8rem)} .sec-eye{font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:1.4rem;display:block} body.night .sec-eye{color:var(--moutarde)} h1,h2,h3{font-weight:300;line-height:1.02} .h-xl{font-size:clamp(2.6rem,6vw,5rem)} .h-lg{font-size:clamp(2.1rem,4.4vw,3.6rem)} .h-md{font-size:clamp(1.6rem,3vw,2.4rem)} .lead{font-size:1.05rem;line-height:1.9;color:var(--on-surface-soft);max-width:52ch} /* Révélation au scroll (IntersectionObserver, sans GSAP) */ .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--e-out),transform .9s var(--e-out)} .rv.in{opacity:1;transform:none} .rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s} @media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}*{animation-duration:.01ms!important}} /* ═══ RESPONSIVE ═══ */ @media(max-width:820px){ .hdr-nav{display:none} .burger{display:block} .foot-top{flex-direction:column} .foot-right{align-items:flex-start;text-align:left} .foot-nav{justify-content:flex-start} .foot-bottom{flex-direction:column;align-items:flex-start} }