/* La navigation parle comme Guillaume : quatre destinations lisibles et
   une invitation distincte. Le menu et son contact sont partagés sur chaque page. */
.site-header {gap:24px}
.header-contact {display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px;padding:12px 18px;border:1px solid var(--orange);border-radius:999px;background:var(--orange);color:var(--ink);font-size:15px;font-weight:600;white-space:nowrap;transition:box-shadow .25s,background .25s,color .25s}
.header-contact>span {font-size:22px;line-height:1;transition:transform .35s var(--ease-out)}
.header-contact:is(:hover,:focus-visible) {box-shadow:3px 3px 0 currentColor}
.header-contact:is(:hover,:focus-visible)>span {transform:rotate(45deg)}
html[data-header-theme=orange] .header-contact {background:var(--ink);color:var(--paper);border-color:var(--ink)}
.header-contact:focus-visible {outline:3px solid currentColor;outline-offset:5px}

/* Le menu est une petite affiche : numéro orange, grand intitulé, flèche.
   Toute la ligne est cliquable; aucun sens ne dépend du survol. */
.menu-brand svg {display:block;width:210px;height:auto;overflow:visible}
.menu-dialog .dialog-close {flex:none;min-height:48px;padding:10px 16px;border:1px solid var(--orange);border-radius:999px;background:var(--ink);color:var(--orange);font-size:14px;gap:12px;transition:background .25s,color .25s}
.menu-dialog .dialog-close>span {font-size:24px;line-height:1}
.menu-dialog .dialog-close:is(:hover,:focus-visible) {background:var(--orange);color:var(--ink)}
.menu-dialog .dialog-close:focus-visible {outline:3px solid var(--paper);outline-offset:4px}
.menu-dialog nav {gap:0}
.menu-dialog nav>a {position:relative;display:flex;align-items:center;gap:24px;min-height:94px;padding:14px 0;border-bottom:1px solid #393834;font-size:clamp(38px,7.5vw,100px);letter-spacing:-.055em;transition:color .25s}
.menu-dialog nav>a>span:nth-child(2) {min-width:0;overflow-wrap:anywhere;transition:transform .4s var(--ease-out)}
/* « Derrière » et la vraie signature forment un seul intitulé. Le SVG reprend
   les tracés communs et la couleur du lien; sur petit écran, il revient à la ligne. */
.menu-story-label {display:flex;align-items:center;flex-wrap:wrap;gap:.18em .25em;min-width:0}
.menu-story-logo {display:block;flex:none;width:3.8em;max-width:100%;height:auto;overflow:visible}
.menu-index {align-self:center;flex:none;font:400 14px/1 var(--body);letter-spacing:0;color:var(--orange)}
.menu-arrow {margin-left:auto;flex:none;color:var(--orange);font-size:.7em;transition:transform .4s var(--ease-out)}
.menu-dialog nav>a:is(:hover,:focus-visible)>span:nth-child(2) {transform:translateX(12px)}
.menu-dialog nav>a:is(:hover,:focus-visible) .menu-arrow {transform:rotate(45deg)}
.menu-dialog nav>a:focus-visible {outline:2px solid var(--orange);outline-offset:6px}
.menu-invitation {display:flex;align-items:center;gap:24px}
.menu-invitation>p {font:italic 400 clamp(24px,3vw,42px)/1.1 var(--serif);color:var(--paper);text-align:left}
.menu-invitation .button {min-width:220px}
.contact-heading-copy h2 {max-width:13ch}

.site-rail {display:none}
.menu-dialog {isolation:isolate}
.menu-dialog .dialog-header,.menu-dialog nav,.menu-bottom {position:relative;z-index:1}
.menu-art.lottie-mark {position:absolute;right:8vw;top:20%;width:260px;height:260px;color:var(--paper);opacity:.6;pointer-events:none;z-index:0}

/* La barre gauche réserve sa place dans la page. Les scènes épinglées gardent
   donc leur vraie largeur : aucun contenu n’est recouvert par le menu. */
@media(min-width:761px) {
  body {padding-left:72px}
  .site-header {left:auto;right:var(--gutter);top:24px;padding:0;height:auto!important;background:transparent!important;box-shadow:none!important;transform:none!important}
  .site-header .brand {display:none}
  .site-header .menu-button {display:none}
  .site-header .header-contact {margin-left:auto}
  .site-rail {position:fixed;inset:0 auto 0 0;z-index:80;display:flex;flex-direction:column;align-items:center;width:72px;background:var(--ink);color:var(--paper);border-right:1px solid var(--orange)}
  .rail-home {display:grid;place-items:center;width:71px;height:104px;flex:none}
  .rail-brand {display:block;width:56px;height:auto;overflow:visible}
  .rail-menu {position:absolute;top:42%;display:flex;align-items:center;flex-direction:column;gap:22px;width:58px;min-height:126px;padding:18px 10px;border:1px solid #5d5a52;border-radius:40px;color:var(--orange);transition:background .25s,color .25s,box-shadow .25s}
  .rail-menu>span:last-child {font-size:17px;font-weight:600;writing-mode:vertical-rl}
  .rail-menu-icon {display:flex;flex-direction:column;align-items:center;gap:5px;width:28px}
  .rail-menu-icon i {display:block;width:28px;height:2px;background:currentColor;transition:width .35s var(--ease-out),transform .35s var(--ease-out)}
  .rail-menu-icon i:nth-child(2) {width:20px}
  .rail-menu-icon i:nth-child(3) {width:12px}
  .rail-menu:is(:hover,:focus-visible) {background:var(--orange);color:var(--ink);border-color:var(--orange);box-shadow:4px 4px 0 var(--paper)}
  .rail-menu:is(:hover,:focus-visible) .rail-menu-icon i {width:28px}
  .rail-menu:is(:hover,:focus-visible) .rail-menu-icon i:nth-child(2) {transform:translateX(4px)}
  .rail-socials {position:absolute;bottom:24px;display:flex;flex-direction:column;gap:10px;color:var(--orange)}
  .rail-socials>span {display:grid;place-items:center;width:48px;height:48px;cursor:default}
  .rail-socials svg {width:24px;height:24px}
  .rail-menu:focus-visible,.rail-home:focus-visible {outline:3px solid var(--paper);outline-offset:4px}
  .rail-line {position:absolute;left:35px;top:116px;height:calc(42% - 140px);width:1px;background:#514034;pointer-events:none}
  html[data-entry=pending] .site-rail {visibility:hidden;pointer-events:none}
}
@media(min-width:1101px) {
  body {padding-left:88px}
  .site-rail {width:88px}
  .rail-home {width:87px}
  .rail-brand {width:64px}
  .rail-menu {width:70px}
  .rail-line {left:43px}
}
@media(min-width:761px) and (max-height:650px) {
  .rail-home {height:84px}
  .rail-menu {top:38%;min-height:110px;gap:14px;padding-block:14px}
  .rail-socials {bottom:18px;gap:4px}
  .rail-line {top:96px;height:calc(38% - 116px)}
}

@media(max-width:1100px) {
  .menu-button {display:flex}
  .header-contact {margin-left:auto}
  .site-header {gap:18px}
  .menu-art.lottie-mark {width:150px;height:150px;top:108px}
}
@media(max-width:760px) {
  .site-header {gap:8px}
  .site-header .brand {width:120px;flex:none}
  .site-header .brand-logo {width:100%}
  .header-contact {min-height:44px;padding:10px 13px;gap:12px;font-size:14px}
  .header-contact>span {font-size:20px}
  .menu-button {justify-content:center;width:44px;height:44px;padding:0;border:1px solid currentColor;border-radius:50%;flex:none}
  .menu-button>span:first-child {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .menu-brand svg {width:175px}
  .menu-dialog nav>a {gap:14px;min-height:74px;font-size:clamp(30px,8.5vw,48px);padding:16px 0}
  .menu-dialog nav>a:is(:hover,:focus-visible),.menu-dialog nav>a:is(:hover,:focus-visible)>span:nth-child(2) {transform:none}
  .menu-index {font-size:11px}
  .menu-arrow {font-size:25px}
  .menu-invitation {align-items:stretch;flex-direction:column;gap:16px}
  .menu-invitation>p {font-size:29px}
  .menu-invitation .button {min-width:0;width:100%;min-height:58px}
  .menu-bottom {gap:20px}
  .menu-art.lottie-mark {width:94px;height:94px;top:104px;right:var(--gutter);opacity:1}
}
@media(max-width:360px) {
  .site-header {gap:6px}
  .site-header .brand {width:100px}
  .header-contact {padding-inline:8px;gap:6px;font-size:12px}
  .header-contact>span {font-size:18px}
  .menu-button {width:44px;min-width:44px;flex:none}
  .menu-dialog nav>a {gap:10px;font-size:29px}
  .menu-brand svg {width:140px}
}
/* Sur un téléphone court, l’orbite garde son mouvement dans un espace
   réservé entre l’en-tête et les liens, plutôt que devant le premier titre. */
@media(max-width:760px) and (max-height:740px) {
  .menu-art.lottie-mark {width:48px;height:48px;top:106px}
  .menu-dialog nav {justify-content:flex-start;padding-top:104px}
}
/* En paysage, le menu et les liens sociaux se rangent sans se recouvrir. */
@media(min-width:761px) and (max-height:450px) {
  .rail-home {height:68px}
  .rail-menu {top:calc(50% - 47px);min-height:94px;gap:10px;padding-block:12px}
  .rail-line {display:none}
  .rail-socials {bottom:10px;gap:0}
  .rail-socials>span {width:36px;height:36px}
}
@media(prefers-reduced-motion:reduce) {
  .header-contact,.header-contact>span,.menu-dialog nav>a,.menu-dialog nav>a>span,.menu-arrow,.rail-menu,.rail-menu-icon i {transition:none}
  .header-contact>span,.menu-dialog nav>a>span,.rail-menu-icon i {transform:none!important}
}
html[data-motion=reduce] :is(.header-contact,.header-contact>span,.menu-dialog nav>a,.menu-dialog nav>a>span,.menu-arrow,.rail-menu,.rail-menu-icon i) {transition:none;transform:none!important}