/* ===== Le Seuil, couche comportement ===== */ :root{ --seuil-or:#C9A96E; --seuil-ease-open:cubic-bezier(.87,0,.13,1); --seuil-ease-close:cubic-bezier(.5,0,.15,1); --seuil-ease-soft:cubic-bezier(.2,.6,.2,1); } html.is-open{overflow:hidden} /* ----- la page recule ----- */ #seuil-main{transition:transform 1.2s var(--seuil-ease-open), filter 1.2s ease, opacity 1.2s ease} html.is-open #seuil-main{transform:scale(.965);filter:blur(3px);opacity:.7} html.is-closing #seuil-main{transition-duration:.8s;transition-timing-function:var(--seuil-ease-close)} /* ----- la barre : menu ouvert ----- */ .nav_bar{transition:opacity .35s ease .55s, transform .35s ease .55s} html.is-open .nav_bar{opacity:0;transform:translateY(-12px);transition:opacity .2s ease, transform .24s ease;pointer-events:none} .nav_link{transition:color .35s, letter-spacing .45s var(--seuil-ease-soft)} .nav_link:hover{color:var(--seuil-or);letter-spacing:.3em} /* ----- CTA texte bold ----- */ .nav_cta{transition:color .35s, letter-spacing .45s var(--seuil-ease-soft), transform .4s var(--seuil-ease-soft)} .nav_cta:hover{color:var(--seuil-or);letter-spacing:.27em} .nav_cta:active{transform:scale(.97)} /* ----- toggle : morphing MENU/CLOSE + burger/X ----- */ .seuil_toggle-label-open,.seuil_toggle-label-close{transition:opacity .4s, transform .5s var(--seuil-ease-open)} .seuil_toggle-label-close{opacity:0;transform:translateY(10px)} html.is-open .seuil_toggle-label-open{opacity:0;transform:translateY(-10px)} html.is-open .seuil_toggle-label-close{opacity:1;transform:none} .seuil_burger-line{transition:transform .5s var(--seuil-ease-open), top .5s var(--seuil-ease-open), opacity .3s, width .4s var(--seuil-ease-soft)} .seuil_toggle:hover .seuil_burger-line:nth-child(2){width:15px} html.is-open .seuil_burger-line{width:24px!important} html.is-open .seuil_burger-line:nth-child(1){top:6px;transform:rotate(45deg)} html.is-open .seuil_burger-line:nth-child(2){opacity:0} html.is-open .seuil_burger-line:nth-child(3){top:6px;transform:rotate(-45deg)} .seuil_toggle:focus-visible{outline:1px solid var(--seuil-or);outline-offset:-8px} /* ----- photos de l'arche ----- */ .seuil_arch-img{opacity:0;transform:scale(1.08); transition:opacity .9s ease, transform 7s var(--seuil-ease-soft); filter:saturate(.8) brightness(.45) blur(8px)} .seuil_arch-img.is-on{opacity:1;transform:scale(1)} /* ----- liens : estompe d'ensemble + focus ----- */ .seuil_link{transition:color .35s, opacity .4s;text-shadow:0 2px 30px rgba(0,0,0,.55)} .seuil_nav:hover .seuil_link{opacity:.32} .seuil_nav .seuil_link:hover{opacity:1;color:var(--seuil-or)} .seuil_link:focus-visible{outline:1px solid var(--seuil-or);outline-offset:8px;opacity:1;color:var(--seuil-or)} .seuil_nav:hover .seuil_link:not(:hover) .seuil_link-accent{color:inherit} /* ----- reduced motion ----- */ @media(prefers-reduced-motion:reduce){ #seuil-main, html.is-open #seuil-main{transition:opacity .3s;transform:none;filter:none} .seuil_arch-img{transition:opacity .3s;transform:none} } /* ----- barre : fade au scroll ----- */ .nav_bar,.seuil_toggle{transition:opacity .3s ease, transform .35s ease} html.is-nav-hidden:not(.is-open):not(.is-closing) .nav_bar, html.is-nav-hidden:not(.is-open):not(.is-closing) .seuil_toggle{ opacity:0 !important; transform:translateY(-16px) !important; pointer-events:none !important; transition:opacity .3s ease, transform .35s ease !important; }