/* Navigation — verre, lumière et continuité sur tous les écrans. */
.header {
  position:fixed; inset:max(12px, env(safe-area-inset-top)) 3% auto;
  width:auto; max-width:1440px; margin:0 auto; height:92px; padding:0 26px;
  z-index:100; gap:24px; overflow:hidden; isolation:isolate;
  border-radius:999px; border:1px solid #ead5aa40;
  background:radial-gradient(ellipse at 5% 0%,#62aeba24,transparent 50%),radial-gradient(ellipse at 95% 100%,#d4ae691c,transparent 50%),#071725e8;
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 14px 38px #07172524,inset 0 1px #fff1;
  transition:transform .45s cubic-bezier(.22,1,.36,1),height .35s,border-color .35s,box-shadow .35s;
}
.prototype {margin-top:118px}
.header.is-scrolled {height:74px;border-color:#d4ae6970;box-shadow:0 16px 44px #07172535,0 0 0 1px #d4ae6915,inset 0 1px #fff2}
.header.is-hidden:not(:focus-within) {transform:translateY(calc(-100% - 30px))}
.header::before {content:'';position:absolute;inset:0 12% auto;height:1px;background:linear-gradient(90deg,transparent,#f9e4b9aa,transparent);pointer-events:none}
.header::after {content:'';position:absolute;bottom:0;left:-45%;width:80%;height:2px;background:linear-gradient(90deg,transparent,#83c7cfaa,#f0cb83,transparent);animation:rail-scan 8.5s ease-in-out infinite;pointer-events:none}
.header .brand img,.mobile-rail .brand img {width:56px;height:56px;filter:drop-shadow(0 0 13px #d4ae6940);transition:transform .35s,filter .35s}
.header.is-scrolled .brand img {transform:scale(.91)}
.header .brand:hover img {filter:drop-shadow(0 0 20px #d4ae6990);transform:translateY(-2px)}
.header .brand-name {font-size:17px}
.header nav {position:static;display:flex;gap:clamp(14px,1.5vw,24px);padding:0;margin-left:auto;background:none;border:0;box-shadow:none}
.header nav a {font-size:12px;padding:15px 0;white-space:nowrap;color:#f1ede1cc;min-height:44px}
.header nav a::after {bottom:7px;background:linear-gradient(90deg,transparent,#e0ba77,transparent);transform-origin:center}
.header nav a::before {content:'';position:absolute;bottom:5px;left:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:#f0d39b;box-shadow:0 0 10px #e0ba77;opacity:0;transform:scale(0);transition:opacity .25s,transform .25s}
.header nav a:is(:hover,:focus-visible,[aria-current]) {color:#f0d39b;text-shadow:0 0 16px #d4ae692b}
.header nav a:is(:hover,:focus-visible,[aria-current])::after {transform:scaleX(1)}
.header nav a:is(:hover,:focus-visible,[aria-current])::before {opacity:1;transform:scale(1)}
.header .nav-contact {display:block;font-size:12px;font-weight:600;padding:14px 20px;min-height:46px;white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;color:#132638;background:linear-gradient(160deg,#ffebba 0%,#e4c080 55%,#cda05e 100%);border:1px solid #f5dca5;box-shadow:inset 0 1px 0 #fff9,inset 0 -2px 0 #95692f66,0 4px 0 #76572e,0 8px 18px #0005;animation:none;transition:box-shadow .25s,filter .25s,transform .25s}
.nav-contact::before {content:'';position:absolute;inset:-10% auto -10% -80%;width:55%;background:linear-gradient(100deg,transparent,#fff5,transparent);transform:skewX(-24deg);animation:rail-reflection 6s ease-in-out infinite;pointer-events:none}
.header .nav-contact:hover,.header .nav-contact:focus-visible {background:linear-gradient(160deg,#fff1cc,#edca8e 55%,#dcb272);filter:brightness(1.04);transform:translateY(-1px);box-shadow:inset 0 1px 0 #fffc,inset 0 -2px 0 #95692f55,0 5px 0 #76572e,0 10px 24px #0005,0 0 18px #d4ae6933;border-color:#fff0cc}
.header .nav-contact:focus-visible {outline:2px solid #fff0cc;outline-offset:4px}
.header .nav-contact:active {transform:translateY(2px);box-shadow:inset 0 1px 3px #76572e44,0 1px 0 #76572e,0 3px 8px #0004}
.header .menu {display:none}
.mobile-navigation {max-width:none;max-height:none;width:100%;height:100dvh;inset:0;margin:0;padding:0;border:0;border-radius:0;color:#f5eddf;background:radial-gradient(ellipse at 0% 0%,#37738735,transparent 60%),radial-gradient(ellipse at 100% 100%,#b18b4028,transparent 55%),#071725f5;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);overflow-y:auto;overscroll-behavior:contain}
.mobile-navigation[open] {display:flex;flex-direction:column;animation:menu-unfold .65s cubic-bezier(.22,1,.36,1) both}
.mobile-navigation::backdrop {background:#071725aa}
.mobile-rail {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;height:76px;margin:max(10px,env(safe-area-inset-top)) 3% 0;padding:0 18px;border:1px solid #d4ae6960;border-radius:999px;background:#0c2131;box-shadow:inset 0 1px #fff1}
.mobile-rail .brand-name {font-size:15px}.mobile-rail .brand-name small {font-size:8px}
.mobile-close,.header .menu {display:inline-flex;width:46px;height:46px;border-radius:50%;border:1px solid #d4ae6970;color:#f3dfb7;background:#d4ae690a;flex-shrink:0;position:relative;align-items:center;justify-content:center;padding:0}
.header .menu i,.mobile-close i {position:absolute;width:18px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s}
.header .menu i:nth-child(1) {transform:translateY(-5px)}.header .menu i:nth-child(3) {transform:translateY(5px)}
.mobile-close i {left:50%;top:50%}
.mobile-close i:first-child {transform:translate(-50%,-50%) rotate(45deg)}.mobile-close i:last-child {transform:translate(-50%,-50%) rotate(-45deg)}
.mobile-navigation nav {display:flex;flex-direction:column;padding:28px 7% 20px;margin:0}
.mobile-navigation nav a {color:#f4ede2;font-family:var(--serif);font-size:clamp(27px,6vw,42px);padding:14px 0;border-bottom:1px solid #d4ae6928;transition:color .25s,padding-left .25s;animation:menu-link .6s .16s cubic-bezier(.22,1,.36,1) both}
.mobile-navigation nav a:nth-child(2){animation-delay:.21s}.mobile-navigation nav a:nth-child(3){animation-delay:.26s}.mobile-navigation nav a:nth-child(4){animation-delay:.31s}.mobile-navigation nav a:nth-child(5){animation-delay:.36s}
.mobile-navigation nav a:is(:hover,:focus-visible,[aria-current]) {color:#e7c486;padding-left:8px}
.mobile-menu-footer {margin:18px 7% max(32px,env(safe-area-inset-bottom));padding-bottom:12px}
.mobile-menu-footer .button {width:100%;justify-content:center}.mobile-menu-footer p{font-size:12px;color:#c9c6bd;margin-top:14px;text-align:center}
.project-open {width:auto;min-width:76px;padding:0 16px;font-size:12px;border-radius:30px;overflow:hidden;isolation:isolate;border:1px solid #d5b16f66;transition:background .3s,border-color .3s,box-shadow .3s}
.project:hover .project-open,.project:focus-visible .project-open {transform:none;background:#efd29b;border-color:#fff0cb;box-shadow:0 0 0 3px #d5b16f22,0 5px 20px #07172722}
.project-open::after {content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 20%,#fff9 50%,transparent 80%);transform:translateX(-130%)}
.project:hover .project-open::after,.project:focus-visible .project-open::after {animation:project-reflection .85s ease-out both}
@keyframes project-reflection {to{transform:translateX(130%)}}
@media(prefers-reduced-motion:reduce){.project-open{transition:none}.project:hover .project-open::after,.project:focus-visible .project-open::after{animation:none}}
.motion-paused .project-open::after{animation:none!important}
@keyframes rail-scan {0%,100%{transform:translateX(0);opacity:0}20%{opacity:.8}70%{transform:translateX(170%);opacity:.5}90%{transform:translateX(190%);opacity:0}}
@keyframes rail-reflection {0%,45%,100%{translate:0;opacity:0}52%{opacity:.9}75%{translate:340%;opacity:0}}
@keyframes rail-breathe {0%,100%{box-shadow:0 0 0 0 #d4ae6900}50%{box-shadow:0 0 0 4px #d4ae6912,0 0 22px #d4ae6917}}
@keyframes menu-unfold {
 from{opacity:0;transform:translateY(-20px);clip-path:inset(0 0 85% 0 round 0 0 40px 40px)}
 to{opacity:1;transform:none;clip-path:inset(0 round 0)}
}
@keyframes menu-fold {
 from{opacity:1;transform:none;clip-path:inset(0 round 0)}
 to{opacity:0;transform:translateY(-18px);clip-path:inset(0 0 85% 0 round 0 0 40px 40px)}
}
.mobile-navigation[open].is-closing {animation:menu-fold .42s cubic-bezier(.4,0,.2,1) both;pointer-events:none}
.mobile-navigation.is-closing nav a {animation:none}
.mobile-navigation[open] .mobile-menu-footer {animation:menu-link .6s .4s cubic-bezier(.22,1,.36,1) both}
.mobile-navigation.is-closing .mobile-menu-footer {animation:none}
.brand .brand-name {text-transform:none;letter-spacing:.025em}
.brand .brand-name small {text-transform:none;letter-spacing:.16em;color:#d9b97c}
@keyframes menu-link {from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:1100px) {
 .header {height:80px;gap:16px;padding:0 20px}.header.is-scrolled{height:72px}
 .header nav,.header .nav-contact {display:none}.header .menu{display:inline-flex;margin-left:auto}
 .header .brand-name{font-size:17px}.header .brand img{width:52px;height:52px}
 .prototype{margin-top:104px}
}
@media(max-width:760px) {
 .header{inset:max(8px,env(safe-area-inset-top)) 3% auto;margin:0;height:76px;padding:0 18px}
 .header.is-scrolled{height:68px}.header .brand-name{font-size:15px}.header .brand img{width:48px;height:48px}
 .prototype{margin-top:98px}.mobile-rail .brand img{width:48px;height:48px}
}
.motion-paused .header,.motion-paused .header *,.motion-paused .mobile-navigation,.motion-paused .mobile-navigation * {transition:none!important;animation:none!important}
.motion-paused .header::after,.motion-paused .nav-contact::before {animation:none!important;opacity:0}
@media(prefers-reduced-motion:reduce) {
 .header,.header *,.mobile-navigation,.mobile-navigation *{transition:none!important;animation:none!important}
 .header::after,.nav-contact::before{animation:none!important;opacity:0}
}

.skip:focus{z-index:101}

/* Marque lisible et signature du portrait. */
.brand .brand-name small {font-size:12px;font-weight:600;line-height:1.2;letter-spacing:.075em;color:#efce8f;margin-top:4px}
.portrait-corner {width:80px;height:80px;right:24px;bottom:28px;line-height:0;pointer-events:none}
.portrait-corner img {display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 10px #06142150)}
.founder-portrait figcaption small {display:block;max-width:calc(100% - 80px)}
@media(max-width:400px) {
 .portrait-corner {width:58px;height:58px;right:18px;bottom:26px}
 .founder-portrait figcaption strong {font-size:30px}
 .founder-portrait figcaption small {max-width:calc(100% - 58px)}
}
@media(min-width:1101px){.header .menu{display:none}}

/* Mot-symbole historique : pyramide du â et pharaon-sceptre du t. */
.brand-lockup {display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;line-height:1}
.brand img.brand-wordmark {display:block;width:132px;height:auto;object-fit:contain;filter:drop-shadow(0 0 10px #f5e8bc18);transform:none}
.brand-lockup>small {align-self:flex-start;margin-left:2px;color:#efce8f;font-family:'DM Sans',Arial,sans-serif;font-size:15px;font-weight:600;font-style:normal;letter-spacing:.2em;line-height:1.2;text-transform:uppercase;text-shadow:0 0 12px #d4ae6928}
.header.is-scrolled .brand img.brand-wordmark,.header .brand:hover img.brand-wordmark {transform:none;filter:drop-shadow(0 0 11px #f5e8bc28)}
footer .brand img.brand-wordmark {width:136px;height:auto}
@media(max-width:1100px) {
 .brand img.brand-wordmark {width:118px;height:auto}
 .mobile-rail .brand img.brand-wordmark {width:118px;height:auto}
}
@media(max-width:760px) {
 .brand img.brand-wordmark,.header .brand img.brand-wordmark,.mobile-rail .brand img.brand-wordmark {width:101px;height:auto}
 .brand-lockup>small {font-size:12px;letter-spacing:.2em}
 footer .brand img.brand-wordmark {width:114px;height:auto}
}