/* ===================================================================== ALVA — Feuille de style partagée Direction artistique : crème / pastels / accents flash · Cognac 2026 ===================================================================== */ /* La palette vit dans assets/tokens.css (branché AVANT cette feuille). On n'y redéfinit AUCUNE couleur ici : tokens.css est la source unique. Les variables --ink, --cta, --pinkP, --D, --o… proviennent de tokens.css. */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--paper); color:var(--ink); font-family:var(--S); overflow-x:hidden; cursor:none; position:relative; /* ancre le Fil (.thread-rail) sur toute la hauteur de page */ } a{text-decoration:none;color:inherit} img{max-width:100%;display:block} /* Fond beige global + voiles subtils (z-index 0, tout en dessous) */ body::before{ content:''; position:fixed; inset:0; pointer-events:none; z-index:0; background: radial-gradient(circle at 8% 12%,rgba(185,122,69,.045),transparent 32%), radial-gradient(circle at 92% 8%,rgba(159,178,140,.05),transparent 36%), linear-gradient(180deg,#FBF7F0 0%,#FAF6EF 58%,#F6EFE3 100%); } /* Les sections reposent sur le fond beige et laissent voir le halo derrière. Le Hero garde son propre dégradé. */ main > section, body > section, body > footer{ position:relative; z-index:2; background:transparent; } #hero{background:linear-gradient(170deg,#FCF8F2 0%,#F4ECDD 46%,#EFE3D0 78%,#EAD9C5 100%)} /* ============================ CURSEUR ============================ */ #cur{position:fixed;width:8px;height:8px;border-radius:50%;background:var(--rose);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s var(--o),height .3s var(--o),background .3s,border .3s} #cur.on{width:64px;height:64px;background:rgba(255,46,99,.12);border:1px solid rgba(255,46,99,.45)} #curl{position:fixed;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,107,53,.25);pointer-events:none;z-index:9998;transform:translate(-50%,-50%)} /* ============================ GRAIN ============================ */ .grain{position:fixed;inset:-50%;width:200%;height:200%;opacity:.04;pointer-events:none;z-index:9990;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:gr 8s steps(10) infinite} @keyframes gr{0%{transform:translate(0,0)}10%{transform:translate(-2%,-3%)}20%{transform:translate(3%,2%)}30%{transform:translate(-1%,4%)}40%{transform:translate(2%,-2%)}50%{transform:translate(-3%,1%)}60%{transform:translate(1%,-4%)}70%{transform:translate(4%,3%)}80%{transform:translate(-2%,2%)}90%{transform:translate(2%,-1%)}100%{transform:translate(0,0)}} /* =================== HALO GLOBAL (derrière le contenu) =================== Forme ronde dégradée (flash au centre -> pastel sur les bords) qui se balade dans tout l'espace au scroll. z-index:1 = au-dessus du fond beige, en dessous des écritures et des cadres. */ #globalHalo{ --halo-x:50vw;--halo-y:42vh;--halo-o:0; position:fixed;inset:0;pointer-events:none; z-index:1; opacity:var(--halo-o); transition:opacity .25s linear; will-change:opacity; mix-blend-mode:multiply; /* les teintes pâles lisent comme de la lumière */ } /* Boucle des 4 teintes pâles : sable → rose → sauge → lilas, sur 6 s. */ .halo-blob{ position:absolute;left:0;top:0; width:62vw;height:62vw;border-radius:50%; filter:blur(120px); opacity:.55; will-change:transform; background:var(--halo-sand); transform:translate3d(calc(var(--halo-x) - 50%),calc(var(--halo-y) - 50%),0); animation:haloTint 6s ease-in-out infinite; } .halo-secondary{ width:44vw;height:44vw;opacity:.42; transform:translate3d(calc((100vw - var(--halo-x)) - 50%),calc((100vh - var(--halo-y)) - 50%),0); animation:haloTint 6s ease-in-out infinite reverse; animation-delay:-3s; } .halo-flash{display:none} /* plus de 3e blob criard */ @keyframes haloTint{ 0%,100%{background:var(--halo-sand)} 25%{background:var(--halo-rose)} 50%{background:var(--halo-sage)} 75%{background:var(--halo-lilac)} } @media(max-width:768px){ .halo-blob{width:92vw;height:92vw;filter:blur(100px)} .halo-secondary{width:70vw;height:70vw} } /* =================== LE FIL (composant signature) =================== Trait vertical qui se dessine au scroll (GSAP scrub, réversible) et relie la page de haut en bas. Injecté par alva.js sur CHAQUE page → unité de DA. z-index 1 : au-dessus du fond, SOUS le contenu (qui est en z-index ≥ 2). */ .thread-rail{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(620px,52vw);height:100%;z-index:1;pointer-events:none} .thread-rail svg{width:100%;height:100%;display:block} .thread-rail path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke} .thread-track{stroke:var(--cognac);stroke-width:1.6;opacity:.16} .thread-prog{stroke:var(--cognac);stroke-width:2.2;opacity:.5} /* la « tête » : un point lumineux qui voyage sur le fil */ .thread-head{position:absolute;left:50%;top:0;width:16px;height:16px;border-radius:50%;background:var(--cognac);transform:translate(-50%,-50%);box-shadow:0 0 0 6px rgba(185,122,69,.16),0 0 26px 7px rgba(185,122,69,.5);will-change:left,top;z-index:2} .thread-head::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(185,122,69,.55);animation:headPulse 2.4s ease-out infinite} @keyframes headPulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.4);opacity:0}} @media(prefers-reduced-motion:reduce){.thread-head::after{animation:none}} /* Le Fil reste VISIBLE sur mobile (version allégée pour garder la fluidité). */ @media(max-width:768px){ .thread-rail{width:min(420px,72vw)} .thread-track{stroke-width:1.2} .thread-prog{stroke-width:1.8} .thread-head{width:13px;height:13px;box-shadow:0 0 0 5px rgba(185,122,69,.14),0 0 20px 5px rgba(185,122,69,.45)} } /* =================== RIDEAUX ENTRE SECTIONS (style Apple) =================== Panneau couleur papier qui se lève au scroll vers le bas et redescend au scroll vers le haut (piloté par GSAP ScrollTrigger scrub). Invisible par défaut pour ne jamais masquer le contenu si JS est absent. */ /* Rideaux retirés : ils provoquaient une cassure blanche au scroll. Le fond est désormais une seule et même couleur, continue, de haut en bas. */ .curtain{display:none!important} /* ============================ NAV ============================ */ nav{position:fixed;top:0;left:0;right:0;z-index:600;padding:2rem 3.5rem;display:flex;align-items:center;justify-content:space-between;transition:transform .5s var(--o),background .35s var(--o),padding .35s var(--o),box-shadow .35s var(--o)} /* Disparaît au scroll vers le bas, réapparaît au scroll vers le haut */ nav.nav-hidden{transform:translateY(-130%)} /* Fond léger une fois qu'on a quitté le haut de page (ne pas brouiller le texte) */ nav.nav-solid{background:var(--paper-veil);backdrop-filter:blur(14px);padding-top:1.1rem;padding-bottom:1.1rem;box-shadow:0 1px 0 rgba(43,32,24,.06)} .nlogo{font-family:var(--D);font-weight:900;font-size:23px;letter-spacing:-.06em;transform:skewX(-8deg);display:inline-block;color:var(--ink)} .nlogo b{color:var(--cta)} .mbtn{display:flex;align-items:center;gap:13px;cursor:none;background:rgba(255,255,255,.28);border:1px solid rgba(43,32,24,.12);border-radius:999px;padding:10px 14px;backdrop-filter:blur(10px)} .mbtn-t{font-family:var(--S);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)} .mbtn-i{position:relative;width:30px;height:12px} .mbtn-i span{position:absolute;left:0;height:1.5px;background:var(--ink);transition:all .4s var(--o)} .mbtn-i span:nth-child(1){top:0;width:30px} .mbtn-i span:nth-child(2){bottom:0;width:20px;right:0;left:auto} .mbtn:hover .mbtn-i span:nth-child(2){width:30px} /* ============================ MENU FULLSCREEN ============================ */ #menu{position:fixed;inset:0;z-index:700;background:linear-gradient(155deg,var(--espresso) 0%,var(--espresso-2) 58%,var(--espresso-3) 100%);display:flex;flex-direction:column;justify-content:center;padding:0 3.5rem;clip-path:circle(0% at calc(100% - 70px) 55px);transition:clip-path .45s var(--o);overflow:hidden} #menu.open{clip-path:circle(160% at calc(100% - 70px) 55px)} .mmesh{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none} .mmesh-1{width:540px;height:540px;background:var(--cognac);top:-14%;right:-8%;opacity:.34} .mmesh-2{width:460px;height:460px;background:var(--ochre);bottom:-14%;left:-8%;opacity:.20} .mmesh-3{width:320px;height:320px;background:var(--rose);top:42%;left:32%;opacity:.16} .mclose{position:absolute;top:2rem;right:3.5rem;font-family:var(--S);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);cursor:none;background:none;border:none;display:flex;align-items:center;gap:10px} .mlist{list-style:none;position:relative;z-index:2} .mlist li{overflow:hidden;margin:.05em 0} .mlist a{font-family:var(--D);font-weight:700;font-size:clamp(40px,6.5vw,84px);letter-spacing:-.03em;color:var(--cream);line-height:1.12;display:inline-block;transform:translateY(110%);transition:transform .4s var(--o),color .3s,padding-left .3s var(--o)} #menu.open .mlist a{transform:translateY(0)} #menu.open .mlist li:nth-child(1) a{transition-delay:.05s} #menu.open .mlist li:nth-child(2) a{transition-delay:.09s} #menu.open .mlist li:nth-child(3) a{transition-delay:.13s} #menu.open .mlist li:nth-child(4) a{transition-delay:.17s} #menu.open .mlist li:nth-child(5) a{transition-delay:.21s} #menu.open .mlist li:nth-child(6) a{transition-delay:.25s} .mlist a:hover,.mlist a.current{color:var(--cognac-300);padding-left:1.5rem;font-style:italic} .mnum{font-family:var(--M);font-size:13px;font-weight:300;vertical-align:super;margin-right:1.2rem;color:var(--pinkP);letter-spacing:0} .mfoot{position:absolute;bottom:2.5rem;left:3.5rem;right:3.5rem;display:flex;justify-content:space-between;z-index:2;opacity:0;transition:opacity .5s .5s;flex-wrap:wrap;gap:1rem} .mfoot span,.mfoot a{font-family:var(--M);font-size:9px;letter-spacing:.14em;color:rgba(245,245,245,.45)} #menu.open .mfoot{opacity:1} /* ============================ HERO C AFFINÉ (page d'accueil) ============================ Intro = uniquement le point. Il arrive de la droite, tape le wordmark (les 4 lettres se bousculent A>L>V>A), flash + onde de choc à l'impact. En fond, 3 courbes de niveau se dessinent puis ondulent (16 s). Pur CSS. */ #hero{height:100vh;min-height:700px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0 3.5rem; background-image:radial-gradient(circle at 22px 22px,rgba(43,32,24,.035) 1px,transparent 1.4px),linear-gradient(170deg,#FCF8F2 0%,#F4ECDD 46%,#EFE3D0 78%,#EAD9C5 100%); background-size:34px 34px,100% 100%} /* glows doux, statiques, derrière le contenu */ .hero-glow{position:absolute;border-radius:50%;filter:blur(120px);mix-blend-mode:multiply;pointer-events:none;opacity:.5;z-index:0} .hero-glow.hg1{width:46vw;height:46vw;background:var(--halo-rose);top:-12%;left:-8%;animation:hgd1 28s ease-in-out infinite} .hero-glow.hg2{width:40vw;height:40vw;background:var(--halo-sand);bottom:-14%;right:-6%;animation:hgd2 34s ease-in-out infinite} .hero-glow.hg3{width:28vw;height:28vw;background:var(--halo-sage);top:24%;right:20%;opacity:.4;animation:hgd3 24s ease-in-out infinite} @keyframes hgd1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(5vw,4vh,0) scale(1.08)}} @keyframes hgd2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-4vw,-3vh,0) scale(1.06)}} @keyframes hgd3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-3vw,5vh,0) scale(.93)}} /* LE TRAIT — courbes de niveau qui se dessinent puis ondulent */ .hero-contour{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none} .hero-contour .hc-path{fill:none;stroke:var(--cognac);stroke-width:1.6;opacity:.42} .hero-contour .hc-path.c2{stroke:var(--ochre);opacity:.3} .hero-contour .hc-path.c3{stroke:var(--sage);opacity:.3} /* le tracé est piloté en JS (GSAP) ; sans JS on l'affiche complet */ html:not(.has-js) .hero-contour .hc-path{stroke-dashoffset:0} .hero-contour g{animation:hcSway 16s ease-in-out 3.5s infinite;transform-origin:center} @keyframes hcSway{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} /* centre */ .hero-c{position:relative;z-index:3;max-width:1400px;margin:0 auto;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .hc-wordmark{margin:0;font-family:var(--D);font-weight:900;font-size:clamp(110px,19vw,300px);letter-spacing:-.06em;line-height:.78;color:var(--ink);transform:skewX(-8deg);display:inline-flex;align-items:flex-start;justify-content:center;filter:drop-shadow(0 18px 40px rgba(43,32,24,.12));overflow:visible} /* Lettres + point : tout est chorégraphié en JS (GSAP), rejouable. Sans JS, on affiche directement l'état final (fallback plus bas). */ .hc-l{display:inline-block;will-change:transform} .hc-dot{color:var(--cognac);display:inline-block;will-change:transform} .hero-flash{position:absolute;inset:0;background:var(--paper);z-index:4;opacity:0;pointer-events:none} .hero-shock{position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;background:var(--cognac);transform:translate(-50%,-50%);z-index:2;opacity:0} .hero-tagline{font-family:var(--E);font-style:italic;font-weight:300;font-size:clamp(20px,2.4vw,32px);color:var(--ink-soft);margin-top:1.6rem;opacity:0} .hero-tagline em{color:var(--cognac);font-style:italic} html:not(.has-js) .hero-tagline{opacity:1} /* ============================ EN-TÊTE DE PAGE (sous-pages) ============================ */ .phead{position:relative;padding:13rem 3.5rem 4rem;max-width:calc(1400px + 7rem);margin:0 auto} .phead-kicker{font-family:var(--M);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--mocha);margin-bottom:1.4rem} .phead-title{font-family:var(--D);font-weight:900;font-size:clamp(56px,11vw,150px);letter-spacing:-.06em;line-height:.84;color:var(--ink);transform:skewX(-8deg);display:inline-block} .phead-title b{color:var(--cta)} .phead-intro{max-width:640px;margin-top:2rem;font-family:var(--E);font-style:italic;font-size:clamp(20px,2.2vw,28px);line-height:1.45;color:rgba(43,32,24,.74)} /* ============================ ÉVÉNEMENTS (refonte master-detail) ============================ */ #events{padding:7rem 3.5rem;position:relative} .ev-in{max-width:1400px;margin:0 auto} .ev-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:3rem;flex-wrap:wrap;gap:1.5rem} .ev-head h2{font-family:var(--D);font-weight:300;font-size:clamp(38px,5.5vw,72px);letter-spacing:-.03em;color:var(--ink);line-height:.95} .ev-head h2 b{font-weight:900;color:var(--cta)} .filters{display:flex;gap:6px;flex-wrap:wrap} .ftab{font-family:var(--S);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:10px 20px;border-radius:40px;border:1px solid rgba(43,32,24,.18);background:#FFFFFF;color:var(--ink);cursor:none;transition:all .25s} .ftab.on,.ftab:hover{background:var(--ink);color:#FFFFFF;border-color:var(--ink)} /* Scène en deux colonnes : cartes à gauche, détail à droite */ .ev-stage{display:grid;grid-template-columns:1fr 0fr;gap:0;align-items:start;transition:grid-template-columns .7s var(--o),gap .7s var(--o)} .ev-stage.open{grid-template-columns:minmax(250px,340px) 1fr;gap:1.6rem} .ev-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem;transition:grid-template-columns .7s var(--o)} .ev-stage.open .ev-cards{grid-template-columns:1fr} /* Carte arrondie, fond pastel propre à chacune */ .ev-card{ --pastel:var(--pinkP);--flash:var(--flash-pink); position:relative;border-radius:24px;overflow:hidden;cursor:none; padding:1.7rem 1.8rem;min-height:168px; display:flex;flex-direction:column;justify-content:space-between;gap:1.1rem; background:var(--pastel);color:var(--ink); border:1px solid rgba(43,32,24,.06); transition:transform .5s var(--o),box-shadow .5s var(--o),background .45s var(--o); } .ev-card:nth-child(6n+1){--pastel:var(--pinkP);--flash:var(--flash-pink)} .ev-card:nth-child(6n+2){--pastel:var(--greenP);--flash:var(--flash-green)} .ev-card:nth-child(6n+3){--pastel:var(--blueP);--flash:var(--flash-blue)} .ev-card:nth-child(6n+4){--pastel:var(--lilacP);--flash:var(--flash-lilac)} .ev-card:nth-child(6n+5){--pastel:var(--yellowP);--flash:var(--flash-yellow)} .ev-card:nth-child(6n+6){--pastel:var(--orangeP);--flash:var(--flash-orange)} .ev-card:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(43,32,24,.16)} .ev-card:hover,.ev-card.active{background:var(--flash)} /* écritures blanches dès que le fond devient flash */ .ev-card:hover .ev-c-date,.ev-card:hover .ev-c-title,.ev-card:hover .ev-c-meta,.ev-card:hover .ev-c-cta, .ev-card.active .ev-c-date,.ev-card.active .ev-c-title,.ev-card.active .ev-c-meta,.ev-card.active .ev-c-cta{color:#FFFFFF} .ev-card:hover .ev-badge,.ev-card.active .ev-badge{background:rgba(255,255,255,.22);color:#FFFFFF} .ev-card:hover .ev-c-cta i,.ev-card.active .ev-c-cta i{transform:translateX(5px)} .ev-c-top{display:flex;align-items:center;justify-content:space-between;gap:1rem} .ev-c-date{font-family:var(--M);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);transition:color .35s} .ev-badge{font-family:var(--M);font-size:8px;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:30px;white-space:nowrap;background:rgba(43,32,24,.12);color:var(--ink);transition:all .35s} .ev-c-title{font-family:var(--D);font-weight:800;font-size:clamp(20px,2.2vw,27px);letter-spacing:-.02em;line-height:1.04;color:var(--ink);transition:color .35s} .ev-c-meta{font-family:var(--S);font-weight:400;font-size:13px;color:rgba(43,32,24,.66);margin-top:.5rem;transition:color .35s} .ev-c-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--S);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);transition:color .35s} .ev-c-cta i{font-style:normal;transition:transform .35s var(--o)} .ev-stage.open .ev-card{min-height:0;padding:1.2rem 1.3rem} .ev-stage.open .ev-card .ev-c-meta{display:none} /* Panneau de détail (apparaît à droite) */ .ev-detail-panel{min-width:0;overflow:hidden;opacity:0;transform:translateX(24px);transition:opacity .5s .15s var(--o),transform .6s .15s var(--o)} .ev-stage.open .ev-detail-panel{opacity:1;transform:translateX(0)} .ev-detail-card{position:relative;background:#FFFFFF;border:1px solid rgba(43,32,24,.1);border-radius:24px;padding:2.6rem;box-shadow:0 30px 80px rgba(43,32,24,.1)} .ev-detail-close{position:absolute;top:1.4rem;right:1.4rem;font-family:var(--M);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mocha);background:none;border:none;cursor:none;display:flex;align-items:center;gap:7px} .ev-detail-close:hover{color:var(--cta)} .ev-d-date{font-family:var(--M);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cta);margin-bottom:.9rem} .ev-d-title{font-family:var(--D);font-weight:900;font-size:clamp(28px,3.4vw,42px);letter-spacing:-.03em;line-height:.96;color:var(--ink);margin-bottom:1.4rem;max-width:90%} .ev-desc{font-family:var(--E);font-size:clamp(19px,2vw,23px);font-style:italic;line-height:1.45;color:rgba(43,32,24,.82);max-width:660px} .ev-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.8rem} .ev-info{border:1px solid rgba(43,32,24,.14);background:var(--paper);padding:1rem 1.1rem;border-radius:12px} .ev-info span{display:block;font-family:var(--M);font-size:8px;letter-spacing:.16em;color:#796657;text-transform:uppercase;margin-bottom:.45rem} .ev-info b{font-family:var(--S);font-size:15px;font-weight:600;color:var(--ink);line-height:1.35} .ev-btn{display:inline-flex;align-items:center;justify-content:center;margin-top:1.8rem;font-family:var(--S);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:14px 26px;border-radius:40px;background:var(--cta);color:#FFFFFF;transition:all .25s;white-space:nowrap} .ev-btn:hover{background:var(--rose);transform:translateY(-2px)} /* ============================ ÉVÉNEMENTS PASSÉS (fond clair) ============================ */ #past{position:relative;padding:7rem 0;overflow:hidden} .past-in{width:100%;padding:0 3.5rem} .past-head{max-width:1400px;margin:0 auto 3rem auto;display:flex;justify-content:space-between;gap:2rem;align-items:flex-end} .past-head h2{font-family:var(--D);font-weight:300;font-size:clamp(36px,5vw,70px);line-height:.95;letter-spacing:-.03em;color:var(--ink)} .past-head h2 b{font-weight:900;color:var(--cta)} .past-hint{font-family:var(--M);font-size:9px;letter-spacing:.16em;color:rgba(43,32,24,.5);text-transform:uppercase} .past-view{width:100%;overflow-x:auto;overflow-y:hidden;padding-bottom:1.4rem;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch} .past-view::-webkit-scrollbar{height:8px} .past-view::-webkit-scrollbar-track{background:rgba(43,32,24,.08);border-radius:999px} .past-view::-webkit-scrollbar-thumb{background:rgba(43,32,24,.24);border-radius:999px} .past-track{display:flex;gap:1.4rem;width:max-content;padding-left:max(0px,calc((100vw - 1400px)/2));padding-right:3.5rem} .past-card{position:relative;width:min(440px,78vw);height:min(520px,62vh);border-radius:24px;overflow:hidden;border:1px solid rgba(43,32,24,.08);background:linear-gradient(135deg,var(--pinkP),var(--orangeP));flex:0 0 auto;display:flex;align-items:flex-end;padding:1.8rem;isolation:isolate;cursor:none;box-shadow:0 24px 60px rgba(43,32,24,.1);scroll-snap-align:start;transition:transform .5s var(--o),box-shadow .5s var(--o)} .past-card:nth-child(6n+2){background:linear-gradient(135deg,var(--greenP),var(--yellowP))} .past-card:nth-child(6n+3){background:linear-gradient(135deg,var(--blueP),var(--lilacP))} .past-card:nth-child(6n+4){background:linear-gradient(135deg,var(--lilacP),var(--pinkP))} .past-card:nth-child(6n+5){background:linear-gradient(135deg,var(--yellowP),var(--orangeP))} .past-card:nth-child(6n+6){background:linear-gradient(135deg,var(--orangeP),var(--pinkP))} .past-card::after{content:'';position:absolute;inset:1rem;border:1px solid rgba(43,32,24,.18);border-radius:18px;opacity:.5;transform:scale(.98);transition:opacity .35s,transform .35s var(--o)} .past-card:hover{transform:translateY(-5px);box-shadow:0 34px 80px rgba(43,32,24,.16)} .past-card:hover::after{opacity:.85;transform:scale(1)} .past-info{position:relative;z-index:1;transform:translateY(0);transition:transform .45s var(--o)} .past-card:hover .past-info{transform:translateY(-4px)} .past-date{font-family:var(--M);font-size:9px;letter-spacing:.16em;color:var(--cta);text-transform:uppercase;margin-bottom:.9rem} .past-title{font-family:var(--D);font-size:clamp(28px,3.5vw,46px);font-weight:900;letter-spacing:-.04em;line-height:.92;color:var(--ink)} .past-label{position:absolute;top:1.4rem;left:1.4rem;z-index:1;font-family:var(--M);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.72);padding:7px 10px;border-radius:999px} /* ============================ QUI NOUS SOMMES ============================ */ #who{position:relative;overflow:hidden;color:var(--ink);padding:8.5rem 3.5rem 9rem} .who-in{max-width:1400px;margin:0 auto;position:relative;z-index:1} .who-kicker{font-family:var(--M);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mocha);margin-bottom:1.4rem} .who-title{max-width:1120px;font-family:var(--E);font-weight:300;font-size:clamp(38px,5.6vw,82px);line-height:1.02;letter-spacing:-.02em;color:var(--ink)} .who-title strong{font-family:var(--D);font-weight:900;letter-spacing:-.055em;color:var(--cta);display:inline-block;transform:skewX(-8deg)} .who-text{max-width:720px;margin-top:2rem;font-family:var(--S);font-size:clamp(18px,1.8vw,23px);font-weight:300;line-height:1.45;color:rgba(43,32,24,.72)} .who-link{display:inline-flex;align-items:center;gap:12px;margin-top:2rem;font-family:var(--S);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);transition:gap .3s var(--o),color .3s var(--o)} .who-link:hover{gap:22px;color:var(--orange)} .who-link .ar{font-size:16px} .who-rv.who-anim .who-kicker,.who-rv.who-anim .who-title,.who-rv.who-anim .who-text,.who-rv.who-anim .who-link{opacity:0;transform:translateY(24px);transition:opacity .45s var(--o),transform .45s var(--o)} .who-rv.who-anim.vis .who-kicker,.who-rv.who-anim.vis .who-title,.who-rv.who-anim.vis .who-text,.who-rv.who-anim.vis .who-link{opacity:1;transform:translateY(0)} .who-card{display:grid;grid-template-columns:minmax(280px,420px) minmax(0,1fr);align-items:center;gap:0;margin-top:5rem;max-width:1080px;transition:opacity .9s var(--o),transform .9s var(--o)} .who-card.who-anim{opacity:0;transform:translateY(36px)} .who-card.who-anim.vis{opacity:1;transform:translateY(0)} .who-photo{position:relative;width:min(420px,100%);aspect-ratio:4/5;border-radius:34% 18% 28% 16% / 20% 30% 18% 28%;overflow:hidden;background:linear-gradient(135deg,var(--pinkP),var(--orange) 45%,var(--greenP));box-shadow:0 28px 80px rgba(43,32,24,.16);z-index:2;isolation:isolate} .who-photo::before{content:'';position:absolute;inset:1rem;border:1px solid rgba(255,255,255,.45);border-radius:inherit;z-index:1} .who-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(43,32,24,.28),rgba(43,32,24,0));z-index:2;pointer-events:none} .who-photo img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:3;filter:saturate(.98) contrast(1.02)} .who-photo.no-img img{display:none} .who-person{position:relative;margin-left:-2.6rem;padding:2.4rem 2.7rem 2.4rem 4.6rem;background:rgba(255,255,255,.78);border:1px solid rgba(43,32,24,.1);box-shadow:0 22px 55px rgba(43,32,24,.08);backdrop-filter:blur(10px);border-radius:18px} .who-name{font-family:var(--D);font-weight:900;font-size:clamp(38px,5vw,72px);letter-spacing:-.06em;line-height:.82;color:var(--ink);transform:skewX(-8deg);margin-bottom:1rem} .who-role{font-family:var(--M);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--cta);margin-bottom:1.2rem} .who-desc{max-width:560px;font-family:var(--E);font-size:clamp(20px,2.1vw,27px);font-style:italic;line-height:1.42;color:rgba(43,32,24,.78)} @media(max-width:1024px){ #who{padding-left:2rem;padding-right:2rem} .who-card{grid-template-columns:1fr;gap:0;max-width:620px} .who-person{margin-left:1.2rem;margin-top:-2rem;padding:3.5rem 2rem 2rem 2rem} } @media(max-width:768px){ #who{padding-top:6.5rem;padding-bottom:7rem} .who-card{margin-top:3.5rem} .who-photo{width:100%;max-width:360px} .who-person{margin-left:.8rem;margin-right:.4rem;padding:3rem 1.4rem 1.6rem 1.4rem} } /* ============================ MANIFESTE / À PROPOS ============================ */ #about{padding:9rem 3.5rem;position:relative;overflow:hidden;color:var(--ink)} .ab-in{max-width:1400px;margin:0 auto;position:relative;z-index:1} .ab-big{font-family:var(--E);font-weight:300;font-size:clamp(34px,5vw,72px);line-height:1.12;color:var(--text);max-width:1100px} .ab-big .it{font-style:italic;color:var(--mocha)} .ab-big .ac{color:var(--orange);font-style:italic} .ab-foot{display:grid;grid-template-columns:1fr 1fr;gap:5rem;margin-top:5rem;padding-top:3rem;border-top:1px solid rgba(43,32,24,.15);max-width:900px;margin-left:auto} .ab-q{font-family:var(--E);font-style:italic;font-size:19px;color:rgba(43,32,24,.68);line-height:1.55} .ab-sig{font-family:var(--M);font-size:9px;letter-spacing:.1em;color:var(--mocha);margin-top:1.25rem} .ab-link{display:inline-flex;align-items:center;gap:12px;margin-top:2rem;font-family:var(--S);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);transition:gap .3s,color .3s} .ab-link:hover{gap:22px;color:var(--orange)} .ab-link .ar{font-size:16px} /* ============================ ÉVÉNEMENTS PASSÉS (galerie masonry, stats, citations) ============================ */ .pp-counters{display:flex;flex-wrap:wrap;gap:2.5rem;margin-top:3rem} .pp-counter b{display:block;font-family:var(--D);font-weight:900;font-size:clamp(40px,5.5vw,72px);letter-spacing:-.05em;color:var(--cta);line-height:.9} .pp-counter span{display:block;margin-top:.5rem;font-family:var(--M);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--mocha)} .pp-gallery-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:2.6rem} .pp-years{display:flex;gap:6px;flex-wrap:wrap} .pp-year{font-family:var(--S);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:10px 20px;border-radius:40px;border:1px solid rgba(43,32,24,.18);background:#fff;color:var(--ink);cursor:none;transition:all .25s} .pp-year.on,.pp-year:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .pp-masonry{columns:3;column-gap:1.5rem} @media(max-width:900px){.pp-masonry{columns:2}} @media(max-width:560px){.pp-masonry{columns:1}} .pp-card{position:relative;break-inside:avoid;margin-bottom:1.5rem;border-radius:18px;overflow:hidden;cursor:none;background:linear-gradient(135deg,var(--pinkP),var(--orangeP));box-shadow:0 18px 50px rgba(43,32,24,.1);display:flex;align-items:flex-end} .pp-card:nth-child(6n+2){background:linear-gradient(135deg,var(--greenP),var(--yellowP))} .pp-card:nth-child(6n+3){background:linear-gradient(135deg,var(--blueP),var(--lilacP))} .pp-card:nth-child(6n+4){background:linear-gradient(135deg,var(--lilacP),var(--pinkP))} .pp-card:nth-child(6n+5){background:linear-gradient(135deg,var(--yellowP),var(--orangeP))} .pp-card:nth-child(6n+6){background:linear-gradient(135deg,var(--orangeP),var(--pinkP))} .pp-card-h1{min-height:300px}.pp-card-h2{min-height:380px}.pp-card-h3{min-height:330px} .pp-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--o)} .pp-card.no-img img{display:none} .pp-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(43,32,24,.55),rgba(43,32,24,0) 55%);z-index:1;transition:opacity .4s} .pp-card-label{position:absolute;top:1rem;left:1rem;z-index:2;font-family:var(--M);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.78);padding:6px 10px;border-radius:999px} .pp-card-info{position:relative;z-index:2;padding:1.6rem;transform:translateY(8px);opacity:.92;transition:transform .45s var(--o),opacity .45s} .pp-card:hover img{transform:scale(1.04)} .pp-card:hover .pp-card-info{transform:translateY(0);opacity:1} .pp-card-date{font-family:var(--M);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--cta);margin-bottom:.6rem} .pp-card.no-img .pp-card-date{color:var(--cta)} .pp-card-title{font-family:var(--D);font-weight:900;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.03em;line-height:.95;color:var(--ink)} .pp-card:not(.no-img) .pp-card-title,.pp-card:not(.no-img) .pp-card-date{color:#fff} .pp-card-lieu{font-family:var(--S);font-size:13px;color:rgba(43,32,24,.7);margin-top:.5rem} .pp-card:not(.no-img) .pp-card-lieu{color:rgba(255,255,255,.82)} /* Carousel citations (drag horizontal, fond teinté) */ .pp-quotes-sect{background:#F5F0EA;border-radius:32px;margin:0 3.5rem;padding-top:5rem;padding-bottom:5rem} @media(max-width:1024px){.pp-quotes-sect{margin:0 2rem}} .pp-quotes{margin-top:2.5rem;overflow-x:auto;cursor:grab;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 3.5rem} .pp-quotes::-webkit-scrollbar{display:none} .pp-quotes.dragging{cursor:grabbing;scroll-behavior:auto} .pp-quotes-track{display:flex;gap:1.5rem;width:max-content;padding-bottom:.5rem} .pp-quote{flex:0 0 auto;width:min(560px,82vw);background:#fff;border:1px solid rgba(43,32,24,.08);border-radius:20px;padding:2.8rem;box-shadow:0 18px 50px rgba(43,32,24,.06)} .pp-quote q{display:block;font-family:var(--E);font-style:italic;font-size:clamp(22px,2.8vw,32px);line-height:1.32;letter-spacing:-.01em;color:var(--ink);quotes:"«␣" "␣»"} .pp-quote q::before{content:"« "}.pp-quote q::after{content:" »"} .pp-quote cite{display:block;margin-top:1.4rem;font-family:var(--M);font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cta)} .pp-quotes-hint{margin-top:1.6rem;font-family:var(--M);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--mocha);text-align:center} /* ============================ WATERMARK (titres de section en filigrane) ============================ */ .watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--D);font-weight:900;font-size:clamp(120px,28vw,420px);letter-spacing:-.05em;color:var(--ink);opacity:.04;white-space:nowrap;pointer-events:none;z-index:0;user-select:none;text-transform:uppercase} .watermark.skew{transform:translate(-50%,-50%) skewX(-8deg)} /* ============================ GRILLE GÉNÉRIQUE (sous-pages) ============================ */ .section{padding:6rem 3.5rem;position:relative} .wrap{max-width:1400px;margin:0 auto;position:relative;z-index:1} .sec-kicker{font-family:var(--M);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--mocha);margin-bottom:1.2rem} .sec-title{font-family:var(--D);font-weight:300;font-size:clamp(34px,4.6vw,62px);letter-spacing:-.03em;line-height:1;color:var(--ink);max-width:1000px} .sec-title b{font-weight:900;color:var(--cta)} .sec-lead{max-width:760px;margin-top:1.6rem;font-family:var(--S);font-weight:300;font-size:clamp(17px,1.7vw,21px);line-height:1.5;color:rgba(43,32,24,.72)} .cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem;margin-top:3.5rem} .tile{position:relative;border-radius:24px;padding:2.2rem;background:rgba(255,255,255,.72);border:1px solid rgba(43,32,24,.08);box-shadow:0 18px 50px rgba(43,32,24,.06);overflow:hidden;transition:transform .5s var(--o),box-shadow .5s var(--o)} .tile:hover{transform:translateY(-5px);box-shadow:0 30px 70px rgba(43,32,24,.12)} .tile-num{font-family:var(--M);font-size:10px;letter-spacing:.16em;color:var(--cta);margin-bottom:1rem} .tile-icon{font-size:30px;margin-bottom:1rem} .tile h3{font-family:var(--D);font-weight:800;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;color:var(--ink);margin-bottom:.7rem;line-height:1.05} .tile p{font-family:var(--S);font-weight:300;font-size:15px;line-height:1.55;color:rgba(43,32,24,.72)} .tile.pastel{color:var(--ink);border:none} .tile.p-pink{background:linear-gradient(135deg,var(--pinkP),#fff)} .tile.p-green{background:linear-gradient(135deg,var(--greenP),#fff)} .tile.p-blue{background:linear-gradient(135deg,var(--blueP),#fff)} .tile.p-lilac{background:linear-gradient(135deg,var(--lilacP),#fff)} .tile.p-yellow{background:linear-gradient(135deg,var(--yellowP),#fff)} /* timeline / étapes */ .steps{margin-top:3.5rem;display:flex;flex-direction:column;border-top:1px solid rgba(43,32,24,.15)} .step{display:grid;grid-template-columns:90px 1fr;gap:2rem;padding:2.2rem 0;border-bottom:1px solid rgba(43,32,24,.15);align-items:start} .step-n{font-family:var(--D);font-weight:900;font-size:30px;color:var(--cta);transform:skewX(-8deg)} .step h3{font-family:var(--D);font-weight:800;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;color:var(--ink);margin-bottom:.5rem} .step p{font-family:var(--S);font-weight:300;font-size:16px;line-height:1.55;color:rgba(43,32,24,.72);max-width:760px} /* gros chiffres / stats */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2rem;margin-top:3.5rem} .stat b{display:block;font-family:var(--D);font-weight:900;font-size:clamp(48px,6vw,86px);letter-spacing:-.05em;color:var(--ink);line-height:.9} .stat span{display:block;margin-top:.7rem;font-family:var(--M);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mocha)} /* citation pleine largeur */ .pullquote{max-width:1100px;margin:0 auto;font-family:var(--E);font-style:italic;font-weight:300;font-size:clamp(28px,4vw,54px);line-height:1.18;letter-spacing:-.02em;color:var(--ink);text-align:center} .pullquote b{color:var(--cta);font-weight:600} /* bandeau CTA */ .cta-band{max-width:1400px;margin:5rem auto 0;border-radius:32px;padding:clamp(2.5rem,5vw,4.5rem);background:linear-gradient(135deg,var(--ink),var(--ink2));color:#fff;position:relative;overflow:hidden;text-align:center} .cta-band h2{font-family:var(--D);font-weight:900;font-size:clamp(32px,5vw,64px);letter-spacing:-.04em;line-height:.95} .cta-band p{max-width:560px;margin:1.4rem auto 0;font-family:var(--S);font-weight:300;font-size:17px;line-height:1.5;color:rgba(255,255,255,.78)} .cta-band .ev-btn{margin-top:2rem} /* ============================ RENDEZ-VOUS : RECHERCHE (style Airbnb) ============================ */ .rdv-search-sect{padding:0 3.5rem;position:relative;z-index:2} .rdv-search{max-width:1400px;margin:0 auto;display:flex;align-items:stretch;gap:0;background:#fff;border:1px solid rgba(43,32,24,.1);border-radius:999px;box-shadow:0 18px 50px rgba(43,32,24,.1);padding:8px 8px 8px 10px;flex-wrap:wrap} .rdv-field{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:10px 22px;flex:1 1 160px;min-width:140px;border-radius:999px;transition:background .2s} .rdv-field:hover{background:rgba(43,32,24,.04)} .rdv-field label{font-family:var(--M);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--mocha)} .rdv-field select{font-family:var(--S);font-size:15px;font-weight:500;color:var(--ink);border:none;background:transparent;outline:none;cursor:none;appearance:none;-webkit-appearance:none;padding-right:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%232B2018' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center} .rdv-sep{width:1px;background:rgba(43,32,24,.12);margin:10px 0;align-self:stretch} .rdv-search-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--S);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:0 28px;margin-left:auto;border:none;border-radius:999px;background:var(--cta);color:#fff;cursor:none;transition:background .25s,transform .2s} .rdv-search-btn:hover{background:var(--rose);transform:translateY(-1px)} @media(max-width:860px){ .rdv-search{border-radius:24px;flex-direction:column;align-items:stretch} .rdv-sep{display:none} .rdv-field{flex:1 1 auto} .rdv-search-btn{margin:8px 0 0;padding:16px;border-radius:16px;justify-content:center} } /* ============================ RENDEZ-VOUS : GRILLE ============================ */ .rdv-count{font-family:var(--M);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mocha);margin-bottom:1.6rem} .rdv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem} @media(max-width:760px){.rdv-grid{grid-template-columns:1fr}} .rdv-card{position:relative;display:flex;flex-direction:column;gap:1rem;background:#fff;border:1px solid rgba(43,32,24,.1);border-radius:16px;padding:2rem 1.9rem;overflow:hidden;transition:transform .4s var(--o),box-shadow .4s var(--o)} .rdv-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent,var(--cta))} .rdv-card:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(43,32,24,.14)} .rdv-card.full{opacity:.78} .rdv-c-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem} .rdv-c-date{font-family:var(--D);font-weight:800;font-size:clamp(17px,2vw,21px);letter-spacing:-.01em;color:var(--ink);line-height:1.1} .rdv-c-date small{display:block;font-family:var(--M);font-weight:400;font-size:10px;letter-spacing:.1em;color:var(--mocha);text-transform:uppercase;margin-top:4px} .rdv-c-tag{font-family:var(--M);font-size:8px;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:30px;white-space:nowrap;background:color-mix(in srgb,var(--accent) 16%,#fff);color:var(--accent)} .rdv-c-title{font-family:var(--D);font-weight:800;font-size:clamp(21px,2.4vw,28px);letter-spacing:-.02em;line-height:1.05;color:var(--ink)} .rdv-c-lieu{font-family:var(--S);font-size:14px;font-weight:400;color:rgba(43,32,24,.7);display:flex;align-items:center;gap:7px} .rdv-c-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.4rem;padding-top:1.1rem;border-top:1px solid rgba(43,32,24,.1)} .rdv-c-meta{display:flex;flex-direction:column;gap:3px} .rdv-c-prix{font-family:var(--D);font-weight:900;font-size:20px;color:var(--ink)} .rdv-c-places{font-family:var(--M);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--mocha)} .rdv-c-places.low{color:var(--cta)} .rdv-btn{font-family:var(--S);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:12px 22px;border-radius:999px;border:none;background:var(--ink);color:#fff;cursor:none;transition:background .25s,transform .2s} .rdv-btn:hover{background:var(--cta);transform:translateY(-1px)} .rdv-badge-full{font-family:var(--M);font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:11px 20px;border-radius:999px;background:rgba(43,32,24,.1);color:var(--mocha)} .rdv-empty{margin-top:2rem;font-family:var(--E);font-style:italic;font-size:clamp(19px,2vw,24px);color:var(--mocha);max-width:640px} /* ============================ MODULE DE RÉSERVATION (wizard) ============================ */ .resa-overlay{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:rgba(43,32,24,.55);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .35s var(--o),visibility .35s;perspective:1600px} .resa-overlay.open{opacity:1;visibility:visible} /* Le carton se déplie en 3D (rotateX) depuis le haut, comme une invitation qu'on ouvre. */ .resa-card{position:relative;width:min(560px,100%);max-height:90vh;overflow-y:auto;background:var(--paper);border-radius:18px;padding:2.6rem 2.8rem;box-shadow:0 40px 100px rgba(43,32,24,.3);transform-origin:top center;transform:rotateX(-90deg);opacity:0;transition:transform .7s var(--o),opacity .4s ease} .resa-overlay.open .resa-card{transform:rotateX(0deg);opacity:1} .carton-top{height:6px;margin:-2.6rem -2.8rem 1.7rem;background:linear-gradient(90deg,var(--cognac),var(--ochre),var(--rose));border-radius:18px 18px 0 0} .resa-invite{font-family:var(--E);font-style:italic;font-size:18px;color:var(--mocha);margin-bottom:.5rem} .resa-close{position:absolute;top:1.3rem;right:1.4rem;width:34px;height:34px;border-radius:50%;border:1px solid rgba(43,32,24,.14);background:#fff;color:var(--ink);font-size:14px;cursor:none;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;z-index:2} .resa-close:hover{background:var(--cta);color:#fff;border-color:var(--cta)} .resa-progress{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:1.8rem} .resa-dot{font-family:var(--M);font-size:8px;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:rgba(43,32,24,.07);color:var(--mocha);transition:all .3s} .resa-dot.on{background:var(--cta);color:#fff} .resa-dot.done{background:rgba(185,122,69,.16);color:var(--cta)} .resa-pane{display:none;animation:resaIn .4s var(--o)} .resa-pane.on{display:block} @keyframes resaIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}} .resa-kicker{font-family:var(--M);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--cta);margin-bottom:.7rem} .resa-title,.resa-step-title{font-family:var(--D);font-weight:900;font-size:clamp(24px,3.4vw,34px);letter-spacing:-.03em;line-height:1;color:var(--ink);margin-bottom:1.1rem} .resa-desc{font-family:var(--E);font-size:clamp(17px,2vw,20px);font-style:italic;line-height:1.5;color:rgba(43,32,24,.8);margin-bottom:1.4rem} .resa-info{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1.6rem} .resa-info .i{border:1px solid rgba(43,32,24,.12);background:var(--paper);border-radius:12px;padding:.9rem 1rem} .resa-info .i span{display:block;font-family:var(--M);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--mocha);margin-bottom:.4rem} .resa-info .i b{font-family:var(--S);font-size:14px;font-weight:600;color:var(--ink)} .resa-form .resa-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} @media(max-width:520px){.resa-info,.resa-form .resa-row{grid-template-columns:1fr}} .resa-actions{display:flex;align-items:center;gap:1rem;margin-top:1.6rem;flex-wrap:wrap} .resa-actions .ev-btn{margin-top:0} .resa-next i,.resa-actions .ev-btn i{font-style:normal;margin-left:8px} .resa-back{font-family:var(--S);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mocha);background:none;border:none;cursor:none;transition:color .2s} .resa-back:hover{color:var(--cta)} .resa-skip{display:block;margin:1.2rem auto 0;font-family:var(--S);font-size:11px;color:var(--mocha);background:none;border:none;cursor:none;text-decoration:underline;text-underline-offset:3px} .resa-skip:hover{color:var(--cta)} .resa-pay-recap{font-family:var(--S);font-size:15px;color:var(--ink);background:var(--paper);border:1px solid rgba(43,32,24,.12);border-radius:12px;padding:1.1rem 1.2rem;margin-bottom:.6rem} .resa-check{width:64px;height:64px;border-radius:50%;background:var(--flash-green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:1.4rem} /* ============================ CONTACT ============================ */ #contact{position:relative;overflow:hidden;padding:9rem 3.5rem} .ct-in{max-width:1400px;margin:0 auto;position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:7rem;align-items:start} .ct-name{font-family:var(--D);font-weight:900;font-size:clamp(80px,13vw,170px);letter-spacing:-.06em;line-height:.78;color:var(--text);transform:skewX(-8deg);display:inline-block;margin-bottom:2rem} .ct-name b{color:var(--rose)} .ct-serif{font-family:var(--E);font-style:italic;font-size:clamp(20px,2.4vw,28px);color:var(--mocha);line-height:1.5;margin-bottom:3rem} .ct-rows{display:flex;flex-direction:column} .ct-row{display:grid;grid-template-columns:90px 1fr;gap:16px;align-items:center;padding:13px 0;border-bottom:1px solid rgba(43,32,24,.12)} .ct-lbl{font-family:var(--M);font-size:8px;letter-spacing:.15em;color:var(--muted)} .ct-val{font-family:var(--S);font-size:15px;font-weight:400;color:var(--text);transition:color .2s} a.ct-val:hover{color:var(--orange)} .ct-form{background:rgba(255,255,255,.7);backdrop-filter:blur(10px);border:1px solid rgba(43,32,24,.08);border-radius:20px;padding:2.5rem;box-shadow:0 18px 55px rgba(43,32,24,.08)} .ct-ft{font-family:var(--D);font-weight:700;font-size:24px;color:var(--text);letter-spacing:-.01em;margin-bottom:.5rem} .ct-fs{font-family:var(--S);font-size:13px;font-weight:300;color:var(--muted);margin-bottom:2rem;line-height:1.7} .fg{margin-bottom:1rem} .fl{display:block;font-family:var(--M);font-size:8px;letter-spacing:.15em;color:var(--muted);margin-bottom:7px} .fi{width:100%;font-family:var(--S);font-size:14px;font-weight:300;padding:12px 14px;border-radius:8px;border:1px solid rgba(43,32,24,.14);background:rgba(255,255,255,.78);color:var(--text);outline:none;transition:border-color .2s,background .2s} .fi::placeholder{color:rgba(43,32,24,.32)} .fi:focus{border-color:var(--orange);background:#fff} textarea.fi{resize:vertical;min-height:105px} .ct-sub{width:100%;font-family:var(--S);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:14px;border-radius:8px;border:none;background:var(--cta);color:var(--white);cursor:none;transition:background .2s,transform .15s;margin-top:.5rem} .ct-sub:hover{background:var(--rose);transform:translateY(-1px)} /* CTA unique (page d'accueil) */ .ct-cta{background:rgba(255,255,255,.7);backdrop-filter:blur(10px);border:1px solid rgba(43,32,24,.08);border-radius:20px;padding:2.8rem;box-shadow:0 18px 55px rgba(43,32,24,.08);display:flex;flex-direction:column;align-items:flex-start;gap:1rem} .ct-cta .ct-ft{font-family:var(--D);font-weight:800;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;color:var(--ink)} .ct-cta .ct-fs{font-family:var(--S);font-size:15px;font-weight:300;color:var(--muted);line-height:1.6;max-width:420px} .ct-cta-btn{display:inline-flex;align-items:center;gap:12px;margin-top:.6rem;font-family:var(--S);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:16px 30px;border-radius:999px;background:var(--cta);color:#fff;transition:gap .3s var(--o),background .25s,transform .2s} .ct-cta-btn:hover{background:var(--rose);gap:22px;transform:translateY(-2px)} .ct-cta-btn .ar{font-size:17px} /* ============================ FOOTER (nav linéaire, sur chaque page) ============================ */ footer{padding:3rem 3.5rem 2.4rem;border-top:1px solid rgba(43,32,24,.1)} .foot-wrap{max-width:1400px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:1.6rem} .foot-top{display:flex;align-items:center;justify-content:space-between;gap:1.8rem;flex-wrap:wrap} .flogo{font-family:var(--D);font-weight:900;font-size:26px;letter-spacing:-.06em;color:var(--ink);transform:skewX(-8deg);display:inline-block;cursor:none} .flogo b{color:var(--cta)} .fnav{position:static;display:flex;flex-wrap:wrap;gap:.4rem 1.8rem} .fnav a{font-family:var(--S);font-size:13px;font-weight:600;letter-spacing:.02em;color:rgba(43,32,24,.66);transition:color .2s} .fnav a:hover,.fnav a.current{color:var(--cognac)} .foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid rgba(43,32,24,.1);padding-top:1.3rem} .fcopy{font-family:var(--M);font-size:9px;letter-spacing:.1em;color:rgba(43,32,24,.4)} .fsocial{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap} .fsocial a{color:rgba(43,32,24,.55);transition:color .2s,transform .2s} .fsocial a:hover{color:var(--cognac);transform:translateY(-2px)} .fsocial svg{width:19px;height:19px;display:block} /* Adresse e-mail cliquable à côté des réseaux (présente sur chaque page). */ .fsocial a.fmail{font-family:var(--M);font-size:11px;letter-spacing:.04em;color:rgba(43,32,24,.62);margin-right:.3rem;border-bottom:1px solid transparent} .fsocial a.fmail:hover{color:var(--cognac);transform:none;border-bottom-color:var(--cognac)} @media(max-width:600px){.foot-top{flex-direction:column;align-items:flex-start} .fsocial a.fmail{width:100%;margin-bottom:.4rem}} /* Confirmation / erreur des formulaires de contact (envoi AJAX). */ .form-sent{text-align:center;padding:2rem .5rem} .form-sent-ic{width:54px;height:54px;margin:0 auto 1rem;border-radius:50%;background:var(--cognac);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px} .form-sent h3{font-family:var(--D);font-size:clamp(20px,2.4vw,26px);color:var(--ink);margin:0 0 .4rem} .form-sent p{color:rgba(43,32,24,.7);font-size:15px} .form-err{margin-top:1rem;color:#a4432b;font-size:14px} /* ============================ REVEALS ============================ */ /* Repli : sans JS, le contenu reste visible. Le masquage initial n'est appliqué que si le JS a posé .has-js sur . */ .rv{opacity:1;transform:none;transition:opacity .45s var(--o),transform .45s var(--o)} .has-js .rv{opacity:0;transform:translateY(28px)} .has-js .rv.vis{opacity:1;transform:translateY(0)} .rv.d1{transition-delay:.05s}.rv.d2{transition-delay:.1s}.rv.d3{transition-delay:.15s} .lup{overflow:hidden} .lup-i{display:block;transform:none;transition:transform .45s var(--o)} .has-js .lup-i{transform:translateY(110%)} .has-js .lup.vis .lup-i{transform:translateY(0)} .lup.d1 .lup-i{transition-delay:.04s}.lup.d2 .lup-i{transition-delay:.08s}.lup.d3 .lup-i{transition-delay:.12s}.lup.d4 .lup-i{transition-delay:.16s} /* ---- Système Ribbit : chaque type d'élément a sa propre entrée ---- Sans JS (.has-js absent) tout reste visible. .vis = état final. */ .reveal-curtain,.reveal-left,.reveal-right,.reveal-scale,.reveal-open,.reveal-count{ --rd:0s;will-change:transform,opacity,clip-path; } /* Titres : rideau qui monte (clip-path) facon Keynote */ .has-js .reveal-curtain{clip-path:inset(0 0 100% 0);opacity:.001;transition:clip-path .5s var(--o) var(--rd),opacity .35s linear var(--rd)} .has-js .reveal-curtain.vis{clip-path:inset(0 0 0% 0);opacity:1} /* Paragraphes : glissent depuis la gauche */ .has-js .reveal-left{opacity:0;transform:translateX(-80px);transition:opacity .45s var(--o) var(--rd),transform .45s var(--o) var(--rd)} .has-js .reveal-left.vis{opacity:1;transform:translateX(0)} /* Cartes events : arrivent de la droite (stagger appliqué par --rd ou nth-child) */ .has-js .reveal-right{opacity:0;transform:translateX(100px);transition:opacity .45s var(--o) var(--rd),transform .45s var(--o) var(--rd)} .has-js .reveal-right.vis{opacity:1;transform:translateX(0)} /* Past cards / cartes : montée en scale */ .has-js .reveal-scale{opacity:0;transform:scale(.88);transition:opacity .45s var(--o) var(--rd),transform .45s var(--o) var(--rd)} .has-js .reveal-scale.vis{opacity:1;transform:scale(1)} /* Images / médias : s'ouvrent depuis le centre */ .has-js .reveal-open{clip-path:inset(0 50% 0 50%);transition:clip-path .5s var(--o) var(--rd)} .has-js .reveal-open.vis{clip-path:inset(0 0% 0 0%)} /* Compteurs : léger fondu en plus du décompte JS */ .has-js .reveal-count{opacity:0;transition:opacity .4s linear var(--rd)} .has-js .reveal-count.vis{opacity:1} /* Stagger automatique pour une série de cartes/paragraphes qui se suivent */ .stagger > *:nth-child(1){--rd:0s} .stagger > *:nth-child(2){--rd:.06s} .stagger > *:nth-child(3){--rd:.12s} .stagger > *:nth-child(4){--rd:.18s} .stagger > *:nth-child(5){--rd:.24s} .stagger > *:nth-child(6){--rd:.3s} .stagger > *:nth-child(7){--rd:.36s} .stagger > *:nth-child(8){--rd:.42s} .rd1{--rd:.05s}.rd2{--rd:.1s}.rd3{--rd:.15s}.rd4{--rd:.2s}.rd5{--rd:.25s} /* ============================ RESPONSIVE ============================ */ @media(max-width:1024px){ nav{padding:1.5rem 2rem} #hero,#events,#about,#contact,.section,.phead{padding-left:2rem;padding-right:2rem} .past-in{padding:0 2rem} .past-track{padding-left:0;padding-right:2rem} .ab-foot,.ct-in{grid-template-columns:1fr;gap:3rem} .ab-foot{padding-left:0;margin-left:0} .mclose{right:2rem}.mfoot{left:2rem;right:2rem} /* sur tablette/mobile, le détail passe sous les cartes */ .ev-stage.open{grid-template-columns:1fr;gap:1.4rem} .ev-stage.open .ev-cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} } @media(max-width:768px){ .phead{padding-top:10rem} .hc-wordmark{font-size:clamp(92px,30vw,150px)} .hero-tagline{margin-top:1.4rem;padding:0 1rem;font-size:clamp(18px,5vw,24px)} .ev-info-grid{grid-template-columns:1fr} .past-head{display:block} .past-hint{margin-top:1rem} .past-card{height:58vh} .step{grid-template-columns:1fr;gap:.6rem} .ab-foot{gap:2.4rem} body{cursor:auto}#cur,#curl{display:none} } @media (prefers-reduced-motion: reduce){ /* tout visible immédiatement, animations coupées */ .hc-l,.hc-dot{animation:none!important;transform:none!important} .hc-dot{transform:none!important} .hc-wordmark{transform:skewX(-8deg)!important} .hero-contour .hc-path{stroke-dashoffset:0!important;animation:none!important} .hero-contour g,.hero-glow{animation:none!important} .hero-tagline{opacity:1!important;animation:none!important} .hero-flash,.hero-shock{display:none!important} .curtain{display:none!important} .halo-blob{animation:none!important} .resa-card{transform:none!important} /* pas de dépliage 3D */ .resa-overlay.open .resa-card{transform:none!important} } /* ============================ CARTE ILLUSTRÉE DE COGNAC ============================ Carte dessinée à la main (la Charente, ses quais, le pont, la vieille ville, le Jardin public) construite par alva.js depuis data/lieux.js. Les points sont placés à leur vraie position relative, sans tirets de liaison. */ .territory{max-width:1100px;margin:0 auto;position:relative;z-index:2} .terr-head{text-align:center;margin-bottom:2.5rem} .terr-eyebrow{font-family:var(--M);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--cognac);margin-bottom:1rem} .terr-head h2{font-family:var(--D);font-weight:300;font-size:clamp(34px,5vw,60px);letter-spacing:-.02em;color:var(--ink)} .terr-head h2 b{font-weight:900;color:var(--cognac)} .map-wrap{position:relative;width:100%;aspect-ratio:1000/660;background:linear-gradient(160deg,#F4ECDE,#EFE5D3);border-radius:18px;overflow:hidden;border:.5px solid rgba(159,126,105,.3)} .map-svg{width:100%;height:100%;display:block} /* illustration */ .map-fields path{fill:rgba(159,178,140,.10);stroke:rgba(159,126,105,.10);stroke-width:1} .water{fill:rgba(155,169,187,.34)} .water-edge{fill:none;stroke:var(--dusk);stroke-width:2.5;opacity:.55} .water-line{fill:none;stroke:#fff;stroke-width:2;opacity:.45;stroke-linecap:round} .bridge line{stroke:#9c7e69;stroke-width:5;opacity:.8;stroke-linecap:round} .park{fill:rgba(159,178,140,.34);stroke:rgba(132,144,114,.4);stroke-width:1} .park-2{fill:rgba(159,178,140,.22);stroke:none} .streets path{fill:none;stroke:rgba(159,126,105,.28);stroke-width:2.2;stroke-linecap:round} .oldtown{fill:rgba(185,122,69,.08);stroke:rgba(185,122,69,.22);stroke-width:1} .map-label{font-family:var(--M);font-size:13px;letter-spacing:.18em;fill:rgba(43,32,24,.34);text-transform:uppercase} .water-label{fill:rgba(91,107,121,.7);font-style:italic;letter-spacing:.22em} .compass circle{fill:none;stroke:rgba(159,126,105,.45);stroke-width:1} .compass path{fill:var(--cognac)} .compass text{font-family:var(--M);font-size:11px;fill:var(--mocha);text-anchor:middle} /* points */ .poi{cursor:none;outline:none;transition:opacity .3s var(--o)} .poi.dim{opacity:.12;pointer-events:none} .poi .halo-ring{fill:var(--cognac);opacity:.18;transform-box:fill-box;transform-origin:center;animation:terrPing 2.6s ease-out infinite} .poi .core{fill:var(--cognac);stroke:#fff;stroke-width:2;transition:r .25s var(--o)} .poi[data-cat="cafe"] .core,.poi[data-cat="cafe"] .halo-ring{fill:var(--ochre)} .poi[data-cat="balade"] .core,.poi[data-cat="balade"] .halo-ring{fill:var(--sage)} .poi[data-cat="culture"] .core,.poi[data-cat="culture"] .halo-ring{fill:var(--rose)} .poi:hover .core,.poi.active .core,.poi:focus-visible .core{r:9.5} @media(prefers-reduced-motion:reduce){.poi .halo-ring{animation:none!important}} @keyframes terrPing{0%{transform:scale(1);opacity:.32}70%{opacity:0}100%{transform:scale(4);opacity:0}} .poi-info{position:absolute;pointer-events:none;background:var(--paper);border:.5px solid rgba(159,126,105,.4);border-radius:14px;padding:1.1rem 1.3rem;width:236px;box-shadow:0 18px 50px rgba(43,32,24,.16);opacity:0;transform:translateY(8px) scale(.97);transition:opacity .25s var(--o),transform .25s var(--o);z-index:10} .poi-info.show{opacity:1;transform:translateY(0) scale(1)} .poi-info.clickable{pointer-events:auto} .poi-info .cat{font-family:var(--M);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--cognac);margin-bottom:.35rem} .poi-info h3{font-family:var(--D);font-weight:900;font-size:18px;letter-spacing:-.02em;margin-bottom:.25rem;color:var(--ink);line-height:1.05} .poi-info .ville{font-family:var(--M);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--mocha);margin-bottom:.5rem} .poi-info p{font-family:var(--E);font-style:italic;font-size:15px;color:var(--mocha);line-height:1.4} .poi-info .fav{display:inline-block;margin-top:.7rem;font-family:var(--M);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--cognac);border:.5px solid var(--cognac);border-radius:999px;padding:3px 9px} .poi-info .poi-link{display:inline-flex;align-items:center;gap:6px;margin-top:.8rem;font-family:var(--S);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--cognac);padding:8px 14px;border-radius:999px;cursor:none;transition:background .2s,transform .2s} .poi-info .poi-link:hover{background:var(--cognac-700);transform:translateY(-1px)} .poi-info .fav + .poi-link{margin-left:.5rem} .terr-legend{display:flex;gap:.6rem;justify-content:center;margin-top:1.6rem;flex-wrap:wrap} .terr-leg{display:inline-flex;align-items:center;gap:8px;font-family:var(--S);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ink);background:#fff;border:1px solid rgba(43,32,24,.16);border-radius:999px;padding:9px 16px;cursor:none;transition:all .25s} .terr-leg:hover{border-color:var(--cognac)} .terr-leg.on{background:var(--ink);color:#fff;border-color:var(--ink)} .terr-leg i{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--cognac)} .terr-leg i.lg-cafe{background:var(--ochre)} .terr-leg i.lg-balade{background:var(--sage)} .terr-leg i.lg-culture{background:var(--rose)} .terr-leg i.lg-table{background:var(--cognac)} /* ============================ REVEAL-WORDS (accroches mot à mot) ============================ */ .reveal-words .rw-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em} .has-js .reveal-words .rw-word>span{display:inline-block;transform:translateY(110%);transition:transform .8s var(--o)} .has-js .reveal-words.vis .rw-word>span{transform:translateY(0)} /* ============================ PAGE BONS PLANS ============================ */ .bp-codes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.4rem;margin-top:3rem} .bp-code{display:flex;flex-direction:column;justify-content:space-between;gap:1.4rem;background:rgba(255,255,255,.7);border:1px solid rgba(43,32,24,.08);border-radius:20px;padding:1.8rem;box-shadow:0 18px 50px rgba(43,32,24,.05)} .bp-code-head{display:flex;gap:1rem;align-items:flex-start} .bp-logo{font-size:30px;line-height:1;flex:0 0 auto} .bp-code-id h3{font-family:var(--D);font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--ink);margin-bottom:.35rem} .bp-code-id p{font-family:var(--S);font-weight:300;font-size:14px;line-height:1.5;color:rgba(43,32,24,.68)} .bp-code-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid rgba(43,32,24,.1);padding-top:1.2rem} .bp-avantage{font-family:var(--E);font-style:italic;font-size:16px;color:var(--cognac);max-width:52%;line-height:1.35} .bp-copy{display:inline-flex;align-items:center;gap:10px;font-family:var(--M);font-size:12px;border:1px dashed var(--cognac);background:var(--cognac-100);color:var(--cognac-700);border-radius:10px;padding:9px 13px;cursor:none;transition:background .25s,transform .15s,border-color .25s} .bp-copy:hover{transform:translateY(-1px);background:#fff} .bp-code-val{font-weight:600;letter-spacing:.08em} .bp-copy-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mocha);padding-left:10px;border-left:1px solid rgba(159,126,105,.4)} .bp-copy.copied{background:var(--sage-300);border-color:var(--sage-700);color:var(--sage-700)} .bp-copy.copied .bp-copy-label{color:var(--sage-700);border-color:var(--sage-700)} .bp-agenda{display:flex;flex-direction:column;margin-top:3rem;border-top:1px solid rgba(43,32,24,.12)} .bp-agenda-row{display:grid;grid-template-columns:210px 1fr auto;gap:1.5rem;align-items:center;padding:1.6rem .4rem;border-bottom:1px solid rgba(43,32,24,.12);transition:background .25s,padding-left .25s var(--o)} .bp-agenda-row:hover{background:rgba(255,255,255,.5);padding-left:1.2rem} .bp-agenda-date{font-family:var(--M);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cognac)} .bp-agenda-main h3{font-family:var(--D);font-weight:800;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;color:var(--ink);margin-bottom:.25rem} .bp-agenda-main span{font-family:var(--S);font-size:14px;color:rgba(43,32,24,.6)} .bp-agenda-arrow{font-size:20px;color:var(--mocha);transition:transform .25s var(--o),color .25s} .bp-agenda-row:hover .bp-agenda-arrow{transform:translate(3px,-3px);color:var(--cognac)} @media(max-width:680px){.bp-agenda-row{grid-template-columns:1fr auto;gap:.4rem 1rem}.bp-agenda-date{grid-column:1/-1}} .bp-adresses{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:1.4rem;margin-top:3rem} .bp-adresse{position:relative;background:rgba(255,255,255,.7);border:1px solid rgba(43,32,24,.08);border-radius:20px;padding:1.8rem;box-shadow:0 18px 50px rgba(43,32,24,.05)} .bp-fav{position:absolute;top:1.2rem;right:1.2rem;font-family:var(--M);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--cognac);border:.5px solid var(--cognac);border-radius:999px;padding:4px 9px} .bp-adresse-cat{font-family:var(--M);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--mocha);margin-bottom:.6rem} .bp-adresse h3{font-family:var(--D);font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--ink);margin-bottom:.5rem;max-width:82%} .bp-note{font-size:13px;letter-spacing:2px;color:var(--ochre);margin-bottom:.7rem} .bp-note-empty{color:rgba(159,126,105,.32)} .bp-adresse p{font-family:var(--E);font-style:italic;font-size:15px;line-height:1.45;color:rgba(43,32,24,.72)} .bp-tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.4rem;margin-top:3rem} .bp-tip{display:flex;gap:1.1rem;align-items:flex-start;background:rgba(255,255,255,.55);border:1px solid rgba(43,32,24,.07);border-radius:18px;padding:1.6rem} .bp-tip-ico{font-size:26px;line-height:1;flex:0 0 auto} .bp-tip h3{font-family:var(--D);font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--ink);margin-bottom:.4rem} .bp-tip p{font-family:var(--S);font-weight:300;font-size:14px;line-height:1.55;color:rgba(43,32,24,.7)} /* ============================ FAQ ACCORDÉON ============================ */ .faq{margin-top:3rem;border-top:1px solid rgba(43,32,24,.12);max-width:880px} .faq-item{border-bottom:1px solid rgba(43,32,24,.12)} .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;text-align:left;background:none;border:none;cursor:none;padding:1.5rem .2rem;font-family:var(--D);font-weight:800;font-size:clamp(18px,2vw,23px);letter-spacing:-.02em;color:var(--ink);transition:color .2s} .faq-q:hover{color:var(--cognac)} .faq-ico{flex:0 0 auto;width:26px;height:26px;position:relative} .faq-ico::before,.faq-ico::after{content:'';position:absolute;background:var(--cognac);transition:transform .3s var(--o),opacity .3s} .faq-ico::before{top:12px;left:3px;right:3px;height:1.6px} .faq-ico::after{left:12px;top:3px;bottom:3px;width:1.6px} .faq-item.open .faq-ico::after{transform:scaleY(0)} .faq-a{overflow:hidden;max-height:0;transition:max-height .4s var(--o)} .faq-a-in{padding:0 .2rem 1.6rem;font-family:var(--S);font-weight:300;font-size:16px;line-height:1.6;color:rgba(43,32,24,.72);max-width:740px} /* ============================ TILT 3D (cartes vitrine) ============================ */ [data-tilt]{transition:transform .18s var(--o),box-shadow .3s var(--o);transform-style:preserve-3d;will-change:transform} @media(hover:none){[data-tilt]{transition:transform .3s var(--o)}} /* Variante citation géante en mocha (manifeste) */ .pullquote.mocha{color:var(--mocha)} .pullquote.mocha b{color:var(--cognac)} /* Formulaire « devenir partenaire » */ .partner-form{max-width:760px;margin-top:3rem;background:rgba(255,255,255,.7);backdrop-filter:blur(10px);border:1px solid rgba(43,32,24,.08);border-radius:20px;padding:2.4rem;box-shadow:0 18px 55px rgba(43,32,24,.06)} .partner-form .pf-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} @media(max-width:560px){.partner-form .pf-row{grid-template-columns:1fr}} /* ============================ BOTTOM NAV MOBILE ============================ Barre d'accès rapide (5 entrées) injectée par alva.js, mobile uniquement. */ .botnav{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:550;display:none;justify-content:space-around;align-items:center;gap:.15rem;padding:.45rem .3rem calc(.45rem + env(safe-area-inset-bottom,0px));background:rgba(250,246,239,.93);backdrop-filter:blur(16px);border-top:1px solid rgba(43,32,24,.1)} .botnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:.35rem 0;font-family:var(--M);font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mocha);transition:color .2s} .botnav a .bn-ico{width:21px;height:21px;display:block} .botnav a .bn-ico svg{width:100%;height:100%;display:block} .botnav a.current{color:var(--cognac)} @media(max-width:768px){.botnav{display:flex} body{padding-bottom:62px}} /* 7e entrée du menu plein écran (stagger) + filet anti-débordement mobile du bouton MENU */ #menu.open .mlist li:nth-child(7) a{transition-delay:.29s} @media(max-width:768px){ nav{padding:1.1rem 1.2rem} .mbtn{padding:9px 12px} .mbtn-t{font-size:10px;letter-spacing:.14em} .mbtn-i{width:24px} .mbtn-i span:nth-child(1){width:24px} } /* ============================ PASSE FINALE — reduced-motion (tout visible, rien ne bouge) ============================ */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important} .reveal-curtain,.reveal-left,.reveal-right,.reveal-scale,.reveal-open,.reveal-count, .rv,.lup-i,.who-rv .who-kicker,.who-rv .who-title,.who-rv .who-text,.who-rv .who-link,.who-card, .reveal-words .rw-word>span{transition:none!important;transform:none!important;opacity:1!important;clip-path:none!important} [data-tilt]{transform:none!important} } /* Anneau de focus clavier homogène (accessibilité) */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.poi:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--cognac);outline-offset:3px;border-radius:4px} /* ============================ MOTEUR DE RECHERCHE ÉVÉNEMENTS (style Airbnb) ============================ Composant réutilisable monté sur tout [data-event-search]. Par défaut on n'affiche aucune carte (ou quelques exemples) : les résultats arrivent à la recherche. La barre reprend l'esprit du champ de recherche Airbnb. */ .ev-intro{max-width:430px;font-family:var(--S);font-size:15px;line-height:1.6;color:rgba(43,32,24,.7)} #events .sec-kicker{margin-bottom:.8rem} .evs{max-width:1200px;margin:0 auto;position:relative;z-index:2} .evs-bar{display:flex;align-items:stretch;gap:0;background:#fff;border:1px solid rgba(43,32,24,.1);border-radius:999px;box-shadow:0 18px 50px rgba(43,32,24,.1);padding:7px 7px 7px 8px;flex-wrap:wrap} .evs-field{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:10px 20px;border-radius:999px;transition:background .2s;flex:1 1 auto;min-width:0} .evs-field.evs-grow{flex:2 1 240px} .evs-field:hover{background:rgba(43,32,24,.04)} .evs-field label{font-family:var(--M);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--mocha)} .evs-field input,.evs-field select{font-family:var(--S);font-size:15px;font-weight:500;color:var(--ink);border:none;background:transparent;outline:none;cursor:none;width:100%} .evs-field input::placeholder{color:rgba(43,32,24,.4);font-weight:400} .evs-field select{appearance:none;-webkit-appearance:none;padding-right:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%232B2018' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center} .evs-sep{width:1px;background:rgba(43,32,24,.12);margin:10px 0;align-self:stretch} .evs-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--S);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:0 26px;border:none;border-radius:999px;background:var(--cta);color:#fff;cursor:none;transition:background .25s,transform .2s;white-space:nowrap} .evs-btn svg{width:16px;height:16px} .evs-btn:hover{background:var(--cognac-700);transform:translateY(-1px)} @media(max-width:820px){ .evs-bar{border-radius:22px;flex-direction:column;align-items:stretch} .evs-sep{display:none} .evs-btn{margin-top:6px;padding:15px;border-radius:14px;justify-content:center} } .evs-results{margin-top:2.4rem} .evs-count{font-family:var(--M);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mocha);margin-bottom:1.4rem;min-height:14px} .evs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem} .evs-prompt{font-family:var(--E);font-style:italic;font-size:clamp(19px,2.1vw,25px);color:var(--mocha);max-width:640px;line-height:1.45;padding:1.5rem 0} /* carte résultat (réutilise l'esprit rdv-card, cliquable en entier) */ .evs-card{position:relative;display:flex;flex-direction:column;gap:.9rem;background:#fff;border:1px solid rgba(43,32,24,.1);border-radius:18px;padding:1.7rem 1.7rem 1.5rem;overflow:hidden;cursor:none;transition:transform .4s var(--o),box-shadow .4s var(--o)} .evs-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent,var(--cta))} .evs-card:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(43,32,24,.14)} .evs-card.full{opacity:.72} .evs-c-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem} .evs-c-date{font-family:var(--D);font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--ink);line-height:1.1} .evs-c-date small{display:block;font-family:var(--M);font-weight:400;font-size:10px;letter-spacing:.1em;color:var(--mocha);text-transform:uppercase;margin-top:4px} .evs-c-tag{font-family:var(--M);font-size:8px;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:30px;white-space:nowrap;background:color-mix(in srgb,var(--accent) 16%,#fff);color:var(--accent)} .evs-c-title{font-family:var(--D);font-weight:800;font-size:clamp(20px,2.3vw,26px);letter-spacing:-.02em;line-height:1.05;color:var(--ink)} .evs-c-lieu{font-family:var(--S);font-size:14px;color:rgba(43,32,24,.7)} .evs-c-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.3rem;padding-top:1.1rem;border-top:1px solid rgba(43,32,24,.1)} .evs-c-prix{font-family:var(--D);font-weight:900;font-size:19px;color:var(--ink)} .evs-c-places{font-family:var(--M);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--mocha)} .evs-c-places.low{color:var(--cta)} .evs-c-go{font-family:var(--S);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cta);display:inline-flex;align-items:center;gap:6px} .evs-c-go i{font-style:normal;transition:transform .3s var(--o)} .evs-card:hover .evs-c-go i{transform:translateX(4px)} .evs-badge-full{font-family:var(--M);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mocha)} /* ============================ « LIVRE » DES ÉVÉNEMENTS PASSÉS ============================ Section épinglée : au scroll, les pages se tournent une à une (max 4), chacune révélant une photo + un récit. Puis le scroll reprend normalement. Sur mobile / sans GSAP : pages empilées, révélées au scroll. */ #book{position:relative} .book-pin{height:100vh;min-height:620px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2rem;padding:5rem 3.5rem} .book-head{text-align:center;max-width:760px} .book-eyebrow{font-family:var(--M);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--cognac);margin-bottom:1rem} .book-head h2{font-family:var(--D);font-weight:300;font-size:clamp(34px,5vw,68px);letter-spacing:-.03em;color:var(--ink);line-height:.96} .book-head h2 b{font-weight:900;color:var(--cognac)} .book-head p{margin-top:1rem;font-family:var(--E);font-style:italic;font-size:clamp(16px,2vw,21px);color:var(--mocha)} .book-stage{position:relative;width:min(1040px,92vw);height:min(520px,60vh);perspective:2400px} .book-page{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;backface-visibility:hidden;border-radius:20px;overflow:hidden;display:grid;grid-template-columns:1.02fr .98fr;background:#fff;border:1px solid rgba(43,32,24,.07);box-shadow:0 40px 90px rgba(43,32,24,.18)} .book-photo{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--pinkP),var(--orangeP))} .book-page:nth-child(4n+2) .book-photo{background:linear-gradient(135deg,var(--greenP),var(--yellowP))} .book-page:nth-child(4n+3) .book-photo{background:linear-gradient(135deg,var(--blueP),var(--lilacP))} .book-page:nth-child(4n+4) .book-photo{background:linear-gradient(135deg,var(--lilacP),var(--pinkP))} .book-photo img{width:100%;height:100%;object-fit:cover} .book-photo .bp-tag{position:absolute;top:1.1rem;left:1.1rem;font-family:var(--M);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.82);padding:6px 11px;border-radius:999px} .book-text{padding:clamp(1.6rem,3.2vw,3rem);display:flex;flex-direction:column;justify-content:center;gap:1rem;position:relative} .book-date{font-family:var(--M);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cognac)} .book-title{font-family:var(--D);font-weight:900;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.03em;line-height:.98;color:var(--ink)} .book-recit{font-family:var(--E);font-style:italic;font-size:clamp(17px,2vw,22px);line-height:1.45;color:rgba(43,32,24,.78)} .book-pageno{position:absolute;bottom:1.1rem;right:1.3rem;font-family:var(--M);font-size:9px;letter-spacing:.14em;color:var(--mocha)} .bp-spine{position:absolute;left:0;top:0;bottom:0;width:18px;background:linear-gradient(90deg,rgba(43,32,24,.16),transparent);pointer-events:none} .book-hint{font-family:var(--M);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mocha)} /* Empilé (mobile / sans JS) */ .book-stage.book-static{height:auto;perspective:none;display:flex;flex-direction:column;gap:1.5rem} .book-stage.book-static .book-page{position:relative;inset:auto;transform:none!important} @media(max-width:768px){ .book-pin{height:auto;min-height:0;padding:3.5rem 1.2rem;gap:1.6rem} .book-page{grid-template-columns:1fr} .book-photo{min-height:200px} } /* ============================ BONS PLANS — AVANTAGES MILITAIRES ============================ */ .bp-attest{display:flex;gap:1.1rem;align-items:flex-start;max-width:920px;margin-top:2rem;background:linear-gradient(135deg,var(--cognac-100),#fff);border:1px solid rgba(185,122,69,.3);border-radius:18px;padding:1.4rem 1.6rem} .bp-attest .ic{font-size:24px;flex:0 0 auto;line-height:1.2} .bp-attest p{font-family:var(--S);font-size:14px;line-height:1.6;color:rgba(43,32,24,.82)} .bp-attest b{color:var(--cognac-700)} .bp-avantages{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.3rem;margin-top:2.4rem} .bp-av{position:relative;display:flex;flex-direction:column;gap:1rem;background:rgba(255,255,255,.75);border:1px solid rgba(43,32,24,.08);border-radius:20px;padding:1.7rem;box-shadow:0 18px 50px rgba(43,32,24,.05);overflow:hidden;transition:transform .4s var(--o),box-shadow .4s var(--o)} .bp-av:hover{transform:translateY(-5px);box-shadow:0 28px 64px rgba(43,32,24,.12)} .bp-av-logo{font-size:30px;line-height:1} .bp-av-body h3{font-family:var(--D);font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--ink);margin-bottom:.35rem} .bp-av-body p{font-family:var(--S);font-weight:300;font-size:14px;line-height:1.5;color:rgba(43,32,24,.68)} .bp-av-perk{margin-top:auto;display:flex;align-items:center;gap:.7rem;border-top:1px solid rgba(43,32,24,.1);padding-top:1rem;flex-wrap:wrap} .bp-av-tag{font-family:var(--M);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--cognac);border-radius:999px;padding:5px 10px} .bp-av-perk b{font-family:var(--E);font-style:italic;font-size:17px;color:var(--cognac-700)} /* ============================ BONS PLANS — AGENDA (recherche) ============================ */ .ag-grid{display:flex;flex-direction:column;margin-top:.4rem;border-top:1px solid rgba(43,32,24,.12)} .ag-card{display:grid;grid-template-columns:130px 1fr auto;gap:1.4rem;align-items:center;padding:1.4rem .4rem;border-bottom:1px solid rgba(43,32,24,.12);transition:background .25s,padding-left .25s var(--o);cursor:none} .ag-card:hover{background:rgba(255,255,255,.6);padding-left:1rem} .ag-card-cat{font-family:var(--M);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cognac)} .ag-card-main h3{font-family:var(--D);font-weight:800;font-size:clamp(19px,2.1vw,24px);letter-spacing:-.02em;color:var(--ink);margin-bottom:.2rem} .ag-card-main span{font-family:var(--S);font-size:13px;color:rgba(43,32,24,.62)} .ag-card-go{font-size:19px;color:var(--mocha);transition:transform .25s,color .25s} .ag-card:hover .ag-card-go{transform:translate(3px,-3px);color:var(--cognac)} @media(max-width:620px){.ag-card{grid-template-columns:1fr auto;gap:.3rem 1rem}.ag-card-cat{grid-column:1/-1}} /* ============================ BONS PLANS — COUPS DE CŒUR DU MOIS ============================ */ .bp-coups{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem;margin-top:2.4rem} .bp-coup{position:relative;display:flex;flex-direction:column;gap:.4rem;background:linear-gradient(160deg,#fff,var(--paper-2));border:1px solid rgba(43,32,24,.08);border-radius:22px;padding:1.9rem;box-shadow:0 18px 50px rgba(43,32,24,.06);overflow:hidden;cursor:none;transition:transform .45s var(--o),box-shadow .45s var(--o)} .bp-coup::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--cognac),var(--ochre),var(--rose))} .bp-coup:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(43,32,24,.14)} .bp-coup-emoji{font-size:34px;line-height:1.1} .bp-coup-when{font-family:var(--M);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cognac);margin-top:.5rem} .bp-coup h3{font-family:var(--D);font-weight:900;font-size:clamp(22px,2.5vw,28px);letter-spacing:-.02em;color:var(--ink)} .bp-coup-lieu{font-family:var(--S);font-size:13px;color:rgba(43,32,24,.6)} .bp-coup p{font-family:var(--E);font-style:italic;font-size:16px;line-height:1.45;color:rgba(43,32,24,.78);margin-top:.4rem} .bp-coup-go{margin-top:auto;padding-top:1rem;font-family:var(--S);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cognac);display:inline-flex;gap:7px} .bp-coup-go i{font-style:normal;transition:transform .3s var(--o)} .bp-coup:hover .bp-coup-go i{transform:translateX(4px)} /* ============================ PAGE CONCEPT — ENTRÉES LATÉRALES & MARQUEE ============================ */ .slide-in{will-change:transform,opacity} .concept-panel{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;margin:5rem auto;max-width:1200px} .concept-panel.reverse{direction:rtl}.concept-panel.reverse>*{direction:ltr} .concept-panel .cp-title{font-family:var(--D);font-weight:300;font-size:clamp(30px,4.4vw,56px);letter-spacing:-.03em;line-height:1.02;color:var(--ink)} .concept-panel .cp-title b{font-weight:900;color:var(--cognac)} .concept-panel .cp-text{font-family:var(--S);font-weight:300;font-size:clamp(17px,1.9vw,21px);line-height:1.55;color:rgba(43,32,24,.74);margin-top:1.2rem} .concept-figure{aspect-ratio:4/3;border-radius:22px;background:linear-gradient(135deg,var(--pinkP),var(--orangeP));border:1px solid rgba(43,32,24,.08);box-shadow:0 26px 70px rgba(23,59,47,.12);display:flex;align-items:center;justify-content:center;font-size:clamp(60px,9vw,120px)} .concept-figure.f2{background:linear-gradient(135deg,var(--greenP),var(--yellowP))} .concept-figure.f3{background:linear-gradient(135deg,var(--blueP),var(--lilacP))} @media(max-width:820px){.concept-panel{grid-template-columns:1fr;gap:1.6rem;margin:3.2rem auto}.concept-panel.reverse{direction:ltr}.concept-figure{aspect-ratio:16/9}} .marquee{margin-top:3rem;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .marquee-track{display:flex;gap:1.4rem;width:max-content;animation:marqueeMove 34s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} @keyframes marqueeMove{from{transform:translateX(0)}to{transform:translateX(-50%)}} .mq-step{flex:0 0 auto;width:min(360px,80vw);background:rgba(255,255,255,.78);border:1px solid rgba(43,32,24,.08);border-radius:22px;padding:2.1rem;box-shadow:0 18px 50px rgba(43,32,24,.06)} .mq-step .mq-n{font-family:var(--D);font-weight:900;font-size:36px;color:var(--cognac);transform:skewX(-8deg);display:inline-block;margin-bottom:.6rem;line-height:1} .mq-step h3{font-family:var(--D);font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--ink);margin-bottom:.55rem} .mq-step p{font-family:var(--S);font-weight:300;font-size:15px;line-height:1.55;color:rgba(43,32,24,.72)} @media(prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.marquee{-webkit-mask-image:none;mask-image:none}} /* ============================ PARTENAIRES — POURQUOI NOUS REJOINDRE ============================ */ .why{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem;margin-top:2.8rem} .why-card{position:relative;background:linear-gradient(160deg,#fff,var(--paper-2));border:1px solid rgba(43,32,24,.08);border-radius:22px;padding:2.1rem;overflow:hidden;transition:transform .45s var(--o),box-shadow .45s var(--o)} .why-card::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:var(--cognac)} .why-card:nth-child(2)::before{background:var(--ochre)} .why-card:nth-child(3)::before{background:var(--sage)} .why-card:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(43,32,24,.13)} .why-ico{font-size:32px;line-height:1} .why-card h3{font-family:var(--D);font-weight:900;font-size:clamp(21px,2.4vw,27px);letter-spacing:-.02em;color:var(--ink);margin:1rem 0 .5rem} .why-card p{font-family:var(--S);font-weight:300;font-size:15px;line-height:1.55;color:rgba(43,32,24,.74)} .why-band{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.6rem} .why-pill{flex:1 1 260px;display:flex;align-items:center;gap:.9rem;background:var(--espresso);color:#fff;border-radius:16px;padding:1.1rem 1.3rem} .why-pill .why-pill-ico{font-size:24px} .why-pill b{font-family:var(--D);font-weight:800;font-size:16px;display:block;margin-bottom:.15rem} .why-pill span{font-family:var(--S);font-weight:300;font-size:13px;color:rgba(255,255,255,.78);line-height:1.4} /* ============================ PARTENAIRES — CHIFFRES (compteurs) ============================ */ .chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2rem 1rem;margin-top:3rem} .chiffre{text-align:center} .chiffre-circle{width:clamp(124px,15vw,172px);height:clamp(124px,15vw,172px);border-radius:50%;background:linear-gradient(150deg,var(--espresso-3),var(--espresso));color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto;box-shadow:0 24px 50px rgba(42,32,23,.26)} .chiffre-circle b{font-family:var(--D);font-weight:900;font-size:clamp(27px,3.6vw,42px);letter-spacing:-.03em;line-height:1} .chiffre-label{margin-top:1rem;font-family:var(--S);font-weight:700;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);line-height:1.35;max-width:210px;margin-left:auto;margin-right:auto} .chiffre-source{margin-top:1.4rem;font-family:var(--M);font-size:10px;letter-spacing:.06em;color:var(--mocha);font-style:italic} /* mini-stats effet indirect / induit */ .chiffres-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin-top:2.4rem} .cmini{display:flex;align-items:center;gap:1.1rem;background:rgba(255,255,255,.72);border:1px solid rgba(43,32,24,.08);border-radius:18px;padding:1.3rem 1.5rem} .cmini b{font-family:var(--D);font-weight:900;font-size:clamp(30px,4vw,44px);letter-spacing:-.04em;color:var(--cognac);line-height:.9;flex:0 0 auto} .cmini span{font-family:var(--S);font-size:13px;line-height:1.45;color:rgba(43,32,24,.74)} /* ============================ PARTENAIRES — NIVEAUX DE PARTENARIAT ============================ */ .tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.4rem;margin-top:3rem} .tier{background:rgba(255,255,255,.78);border:1px solid rgba(43,32,24,.08);border-radius:22px;padding:2rem;box-shadow:0 18px 50px rgba(43,32,24,.05);display:flex;flex-direction:column;gap:.9rem;border-top:4px solid var(--cognac);transition:transform .45s var(--o),box-shadow .45s var(--o)} .tier:nth-child(2){border-top-color:var(--ochre)} .tier:nth-child(3){border-top-color:var(--sage)} .tier:nth-child(4){border-top-color:var(--rose)} .tier:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(43,32,24,.13)} .tier-kind{font-family:var(--M);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--cognac)} .tier h3{font-family:var(--D);font-weight:900;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;color:var(--ink)} .tier p{font-family:var(--S);font-weight:300;font-size:14.5px;line-height:1.55;color:rgba(43,32,24,.74)} .tier-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:.6rem} .tier-chip{font-family:var(--M);font-size:9px;letter-spacing:.08em;text-transform:uppercase;background:var(--espresso);color:#fff;border-radius:999px;padding:7px 12px} /* ============================ CONTACT — formulaire centré + réseaux ============================ */ .ct-simple{max-width:760px;margin:0 auto} .ct-simple .ct-form{margin-top:1rem} .ct-social{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.2rem} .soc-link{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid rgba(43,32,24,.1);border-radius:999px;padding:13px 22px;font-family:var(--S);font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--ink);cursor:none;transition:background .25s,color .25s,transform .2s,border-color .25s} .soc-link:hover{background:var(--espresso);color:#fff;border-color:var(--espresso);transform:translateY(-2px)} .soc-link .soc-ic{width:20px;height:20px;display:inline-flex;color:var(--cognac);transition:color .25s} .soc-link:hover .soc-ic{color:#fff} .soc-link .soc-ic svg{width:100%;height:100%} /* ============================ CARTE LEAFLET (vraie carte, rendu dessiné) ============================ */ .map-leaflet{position:absolute;inset:0;width:100%;height:100%;background:var(--paper-2);z-index:1} /* rendu « aquarelle » : on réchauffe, désature et adoucit les tuiles réelles */ .map-leaflet .leaflet-tile-pane{filter:sepia(.5) saturate(.82) brightness(1.07) contrast(.82) hue-rotate(-9deg) blur(.4px)} /* lavis papier par-dessus (grain + voile chaud) pour l'effet peint */ .map-wrap::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:5;mix-blend-mode:multiply;opacity:.42; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"),radial-gradient(circle at 50% 42%,rgba(234,217,197,0) 56%,rgba(159,126,105,.2) 100%); background-size:280px 280px,100% 100%} .map-leaflet .leaflet-control-attribution{font-family:var(--S);font-size:9px;background:rgba(250,246,239,.8);color:var(--mocha)} .map-leaflet .leaflet-control-attribution a{color:var(--cognac)} .map-leaflet .leaflet-bar a{background:#fff;color:var(--ink);border-color:rgba(43,32,24,.12)} .map-leaflet .leaflet-bar a:hover{background:var(--paper-2)} .map-reset{position:absolute;top:12px;right:12px;z-index:500;font-family:var(--S);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:#fff;color:var(--ink);border:1px solid rgba(43,32,24,.15);border-radius:999px;padding:9px 15px;cursor:none;box-shadow:0 6px 18px rgba(43,32,24,.16);transition:background .2s,color .2s} .map-reset:hover{background:var(--espresso);color:#fff} /* marqueur : point qui pulse, à la couleur de la catégorie */ .alva-pin-wrap{background:none!important;border:none!important} .alva-pin{position:relative;display:block;width:26px;height:26px} .alva-pin-dot{position:absolute;left:50%;top:50%;width:15px;height:15px;border-radius:50%;background:var(--pc);border:2.5px solid #fff;transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(43,32,24,.4)} .alva-pin-ring{position:absolute;left:50%;top:50%;width:15px;height:15px;border-radius:50%;background:var(--pc);transform:translate(-50%,-50%);opacity:.5;animation:pinPing 2.4s ease-out infinite} @keyframes pinPing{0%{transform:translate(-50%,-50%) scale(1);opacity:.5}70%{opacity:0}100%{transform:translate(-50%,-50%) scale(3.4);opacity:0}} @media(prefers-reduced-motion:reduce){.alva-pin-ring{animation:none}} /* popup ALVA */ .alva-popup .leaflet-popup-content-wrapper{background:var(--paper);border-radius:14px;box-shadow:0 18px 50px rgba(43,32,24,.22);border:.5px solid rgba(159,126,105,.4)} .alva-popup .leaflet-popup-content{margin:1rem 1.2rem;font-family:var(--S)} .alva-popup .leaflet-popup-tip{background:var(--paper)} .alva-popup .cat{font-family:var(--M);font-size:9px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.3rem} .alva-popup h3{font-family:var(--D);font-weight:900;font-size:18px;letter-spacing:-.02em;color:var(--ink);margin:0 0 .2rem;line-height:1.05} .alva-popup .ville{font-family:var(--M);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--mocha);margin-bottom:.5rem} .alva-popup p{font-family:var(--E);font-style:italic;font-size:14.5px;color:var(--mocha);line-height:1.4;margin:0 0 .4rem} .alva-popup .fav{display:inline-block;margin-top:.2rem;font-family:var(--M);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--cognac);border:.5px solid var(--cognac);border-radius:999px;padding:3px 9px} .alva-popup .poi-link{display:inline-flex;align-items:center;gap:6px;margin-top:.7rem;font-family:var(--S);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff!important;background:var(--cognac);padding:8px 13px;border-radius:999px} .alva-popup .poi-link:hover{background:var(--cognac-700)} /* ============================ ICÔNES ALVA (remplacent les emoji) ============================ */ .alva-ico{display:inline-flex;align-items:center;justify-content:center;line-height:0;color:var(--cognac)} .alva-ico svg{width:1em;height:1em;display:block} .concept-figure .alva-ico{color:var(--cognac);font-size:clamp(54px,8vw,104px)} .concept-figure .alva-ico svg{stroke-width:1.1} .tile-icon .alva-ico,.tile-icon.alva-ico{font-size:34px} .why-ico,.bp-coup-emoji,.bp-tip-ico,.bp-av-logo,.cpf-ico,.why-pill-ico,.bp-attest .ic{color:var(--cognac)} /* liste des formats dans le 4e panneau concept */ .cp-formats{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:1.1rem} .cp-formats li{display:flex;gap:1rem;align-items:flex-start;font-family:var(--S);font-weight:300;font-size:clamp(15px,1.7vw,18px);line-height:1.5;color:rgba(43,32,24,.78)} .cp-formats li b{font-weight:700;color:var(--ink)} .cpf-ico{font-size:26px;flex:0 0 auto;margin-top:2px} /* ============================ BONS PLANS — AVANTAGES PAR CATÉGORIE (interactif) ============================ */ .bp-av-wrap{margin-top:2.4rem} .bp-av-tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2rem} .bp-av-tab{font-family:var(--S);font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--ink);background:#fff;border:1px solid rgba(43,32,24,.16);border-radius:999px;padding:10px 18px;cursor:none;transition:all .25s} .bp-av-tab:hover{border-color:var(--cognac)} .bp-av-tab.on{background:var(--cognac);color:#fff;border-color:var(--cognac)} .bp-av-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.3rem} .bp-av{opacity:0;transform:translateY(18px);transition:opacity .55s var(--o),transform .55s var(--o),box-shadow .4s var(--o)} .bp-av.in{opacity:1;transform:none} .bp-av:hover{transform:translateY(-5px);box-shadow:0 28px 64px rgba(43,32,24,.12)} .bp-av-logo{font-size:30px} .bp-av-cat{display:inline-block;font-family:var(--M);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--mocha);margin-bottom:.4rem} @media(prefers-reduced-motion:reduce){.bp-av{opacity:1;transform:none}} /* footer toujours au-dessus des calques décoratifs, liens cliquables partout */ footer{position:relative;z-index:30} .foot-wrap{position:relative;z-index:31} .fnav a,.flogo,.fsocial a{position:relative;z-index:32;pointer-events:auto} /* ============================ EFFET LIQUID GLASS ============================ */ .lglass{background:linear-gradient(135deg,rgba(255,255,255,.52),rgba(255,255,255,.22));backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(255,255,255,.55);box-shadow:0 10px 34px rgba(43,32,24,.12),inset 0 1px 0 rgba(255,255,255,.7)} .lglass:hover{border-color:rgba(255,255,255,.75)} /* coups de cœur : avancée nette vers l'avant au survol */ .bp-coup{transition:transform .45s var(--o),box-shadow .45s var(--o),border-color .3s} .bp-coup:hover{transform:translateY(-10px) scale(1.035);box-shadow:0 42px 84px rgba(43,32,24,.22)} /* concept : cadres en photos (repli dégradé si l'image manque) */ .concept-figure{overflow:hidden} .concept-figure img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block} /* ============================ ÉVÉNEMENTS PASSÉS — CARROUSEL HORIZONTAL ============================ */ #book .book-pin{height:auto;min-height:0;padding:5rem 3.5rem;gap:1.8rem;align-items:stretch;justify-content:flex-start} .book-carousel{position:relative;display:flex;align-items:center;gap:.6rem;max-width:1180px;margin:0 auto;width:100%} .book-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex:1;min-width:0} .book-viewport::-webkit-scrollbar{display:none} .book-track{display:flex;gap:24px;width:max-content;padding:.6rem .4rem 1rem} .book-carousel .book-page{position:static;inset:auto;transform:none!important;flex:0 0 min(1000px,82vw);scroll-snap-align:center;height:min(500px,64vh);background:#fff;box-shadow:0 30px 80px rgba(43,32,24,.16)} .book-arrow{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1px solid rgba(43,32,24,.15);background:#fff;color:var(--ink);font-size:26px;line-height:1;cursor:none;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(43,32,24,.12);transition:background .2s,color .2s,opacity .25s} .book-arrow:hover{background:var(--espresso);color:#fff} .book-arrow:disabled{opacity:.28;pointer-events:none} @media(max-width:768px){ #book .book-pin{padding:3.5rem 1.2rem} .book-arrow{display:none} .book-carousel .book-page{flex:0 0 86vw;height:auto;grid-template-columns:1fr} .book-carousel .book-photo{min-height:180px} } /* liens légaux du footer */ .foot-bottom{flex-wrap:wrap;gap:1rem 1.6rem} .flegal{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem} .flegal a{font-family:var(--M);font-size:10px;letter-spacing:.06em;color:rgba(43,32,24,.5);transition:color .2s} .flegal a:hover{color:var(--cognac)} /* page légale */ .legal-doc{max-width:820px;margin:0 auto} .legal-doc h2{font-family:var(--D);font-weight:800;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;color:var(--ink);margin:2.6rem 0 1rem;padding-top:1rem;border-top:1px solid rgba(43,32,24,.12)} .legal-doc h2:first-of-type{border-top:none} .legal-doc p,.legal-doc li{font-family:var(--S);font-weight:300;font-size:16px;line-height:1.65;color:rgba(43,32,24,.78)} .legal-doc ul{margin:.4rem 0 .4rem 1.2rem} .legal-doc .legal-note{font-family:var(--E);font-style:italic;color:var(--mocha);font-size:14px;margin-top:.6rem} /* popup Google Maps (InfoWindow) — même look que la carte */ .alva-gpopup{font-family:var(--S);max-width:230px;padding:.2rem .3rem} .alva-gpopup .cat{font-family:var(--M);font-size:9px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.3rem} .alva-gpopup h3{font-family:var(--D);font-weight:900;font-size:18px;letter-spacing:-.02em;color:var(--ink);margin:0 0 .2rem;line-height:1.05} .alva-gpopup .ville{font-family:var(--M);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--mocha);margin-bottom:.5rem} .alva-gpopup p{font-family:var(--E);font-style:italic;font-size:14.5px;color:var(--mocha);line-height:1.4;margin:0 0 .4rem} .alva-gpopup .fav{display:inline-block;margin-top:.2rem;font-family:var(--M);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--cognac);border:.5px solid var(--cognac);border-radius:999px;padding:3px 9px} .alva-gpopup .poi-link{display:inline-flex;align-items:center;gap:6px;margin-top:.6rem;font-family:var(--S);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff!important;background:var(--cognac);padding:8px 13px;border-radius:999px;text-decoration:none} /* ===== Correctifs round 4 ===== */ /* aucun