/* Loaded last. Logo in the gold of the headings, and the scene wheel on the left of the home page. */

/* Logo: the PNG becomes a mask filled with the same gold as "matière" in the titles. */
.brand-symbol,.brand-wordmark{background-image:none;background-color:var(--gold);-webkit-mask-image:url('assets/logo-maqexe-trim.png');mask-image:url('assets/logo-maqexe-trim.png');-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.brand-symbol{-webkit-mask-size:76px auto;mask-size:76px auto;-webkit-mask-position:0 0;mask-position:0 0}
.brand-wordmark{-webkit-mask-size:115px auto;mask-size:115px auto;-webkit-mask-position:0 -96px;mask-position:0 -96px}
@media(max-width:700px){
  .brand-symbol{-webkit-mask-size:65px auto;mask-size:65px auto}
  .brand-wordmark{-webkit-mask-size:102px auto;mask-size:102px auto;-webkit-mask-position:0 -85px;mask-position:0 -85px}
}

/* Scene wheel: the current scene stays fixed in the centre, the other titles turn around it
   like a drum, growing as they reach the centre and shrinking as they move away.
   scenes.js sets --o (offset from the current scene) and --a (its absolute value) on each button. */
html.scenes-on .scene-dots.scene-wheel{position:fixed;z-index:15;left:26px;right:auto;top:50%;width:170px;height:230px;display:block;gap:0;transform:translateY(-50%);perspective:520px;perspective-origin:0 50%}
.scene-wheel:before{content:'';position:absolute;left:-14px;top:50%;width:7px;height:1px;background:var(--gold)}
.scene-wheel-track{position:absolute;inset:0;transform-style:preserve-3d}
.scene-wheel button{position:absolute;left:0;top:50%;width:100%;height:46px;min-height:0;margin-top:-23px;padding:0;display:flex;align-items:center;justify-content:flex-start;gap:0;background:none;box-shadow:none;transform-origin:0 50%;
  transform:translateY(calc(var(--o,0) * 64px)) rotateX(calc(var(--o,0) * -42deg)) scale(calc(1 - var(--a,0) * .34));
  opacity:calc(1 - var(--a,0) * .45);transition:transform .95s cubic-bezier(.2,.75,.25,1),opacity .95s ease}
.scene-wheel button:before,.scene-wheel button:after{display:none}
.scene-wheel .dot-label{position:static;order:0;opacity:1;transform:none;padding:0;background:none;-webkit-text-stroke:0;font:400 27px/1 var(--serif);letter-spacing:-.01em;text-transform:none;white-space:nowrap;color:#9a9083;transition:color .6s}
.scene-wheel button[aria-current] .dot-label{color:var(--ink)}
.scene-wheel button:not([aria-current]):hover .dot-label,.scene-wheel button:focus-visible .dot-label{color:#e6dccd}
.scene-wheel button:focus-visible{outline-offset:6px}
/* keep the scenes clear of the wheel */
/* (la molette de gauche a été retirée : plus de marge réservée à gauche) */
@media(max-width:1200px){html.scenes-on .scene-dots.scene-wheel{left:14px;width:130px}.scene-wheel .dot-label{font-size:22px}}
@media(prefers-reduced-motion:reduce){.scene-wheel button{transition:none}}

/* Presentation below the scenes (phones, tablets, and the mobile version Google indexes). */
.scenes-on .home-about{display:none}
.home-about{max-width:1100px;margin:0 auto;padding:30px 6% 60px;color:#c9c0b4}
.home-about h2{font:400 clamp(32px,6vw,46px)/1.06 var(--serif);color:var(--ink);margin:0 0 18px;letter-spacing:-.02em}
.home-about h3{font:400 24px/1.15 var(--serif);color:var(--ink);margin:0 0 8px}
.home-about h3 a{border-bottom:1px solid #5e4c37}
.home-about p{font-size:15px;line-height:1.85;margin:0 0 14px}
.home-about p a{color:#e3ceb3;border-bottom:1px solid #6f5b42}
.home-about>div,.home-about-skills{padding:38px 0;border-top:1px solid var(--line)}
.home-about-skills{list-style:none;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px 34px}
.home-about-method ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px;counter-reset:step}
.home-about-method li{counter-increment:step;padding-top:14px;border-top:1px solid #44392e}
.home-about-method li:before{content:'0' counter(step);display:block;font-size:11px;letter-spacing:.12em;color:var(--gold);margin-bottom:8px}

/* Main menu, identical on every page: Savoir-faire and Matières open a list of their pages
   on hover or keyboard focus (desktop); on phones the lists are shown under each entry. */
.site-header nav a[aria-current],.nav-item:has([aria-current])>a{color:#fff;box-shadow:inset 0 -1px 0 var(--gold)}
.nav-item{position:relative;display:flex;align-items:center}
.nav-item>a:after{content:'';display:inline-block;width:5px;height:5px;margin:0 0 3px 8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);opacity:.6}
.nav-sub{position:absolute;z-index:30;top:100%;left:-18px;min-width:230px;padding:10px 0;margin-top:10px;display:grid;background:#100f0ef5;border:1px solid #2f2a25;border-radius:8px;box-shadow:0 18px 40px #0009;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s}
.nav-sub:before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-item:hover .nav-sub,.nav-item:focus-within .nav-sub{opacity:1;visibility:visible;transform:none}
.site-header .nav-sub a{padding:7px 18px;font-size:13px;white-space:nowrap;box-shadow:none}
.site-header .nav-sub a:hover,.site-header .nav-sub a:focus-visible{color:#fff;background:#ffffff0d}
.site-header .nav-sub a[aria-current]{color:var(--gold);box-shadow:none}
.nav-sub-label{margin:8px 18px 4px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8f867a}
.nav-sub-label:first-child{margin-top:2px}
@media(max-width:700px){
  .nav-item{display:block;width:100%}
  .nav-item>a:after{display:none}
  .nav-sub{position:static;opacity:1;visibility:visible;transform:none;display:flex;flex-wrap:wrap;gap:2px 16px;min-width:0;margin:2px 0 10px;padding:0 0 0 14px;background:none;border:0;border-left:1px solid #3a332c;border-radius:0;box-shadow:none}
  .nav-sub:before{display:none}
  .site-header .nav-sub a{padding:4px 0;font-size:13px;color:#a59d92}
  .nav-sub-label{flex-basis:100%;margin:6px 0 0}
}
@media(prefers-reduced-motion:reduce){.nav-sub{transition:none}}
.nav-sub-sep{display:block;height:1px;margin:8px 18px;background:#2f2a25}
@media(max-width:700px){.nav-sub-sep{flex-basis:100%;margin:4px 0;background:none}}

/* Menu du haut : capitales Montserrat espacées (choix du propriétaire parmi 10 polices).
   Listes déroulantes en Cormorant. */
.site-header nav{font-family:Montserrat,Manrope,sans-serif}
.site-header nav>a,.site-header nav>.nav-item>a{font:500 11.5px/1.4 Montserrat,Manrope,sans-serif;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.site-header .nav-sub a{font-family:var(--serif);font-size:17px;letter-spacing:.005em;text-transform:none}
@media(min-width:701px) and (max-width:1000px){.site-header nav{gap:18px}.site-header nav>a,.site-header nav>.nav-item>a{font-size:10.5px;letter-spacing:.12em}.nav-item>a:after{margin-left:5px}.contact-nav{margin-left:4px}}
@media(max-width:700px){.site-header nav>a,.site-header nav>.nav-item>a{font-size:13.5px;letter-spacing:.16em;padding:9px 0}.site-header .nav-sub a{font-size:16px}}
/* Sans la molette, le contenu des trois écrans s'aligne sur le logo (même marge que l'en-tête). */
html.scenes-on .scene-inner{padding-left:var(--pad);padding-right:var(--pad)}
html.scenes-on .intro-copy{padding-left:var(--pad);max-width:calc(780px - 165px + var(--pad))}
html.scenes-on .scene-skills .scene-inner{padding-left:calc(var(--pad) + 2.5vw);padding-right:calc(var(--pad) + 2.5vw)}

/* Choix de la langue : cercle avec le drapeau de la langue affichée ; au clic, les deux drapeaux. */
.lang-menu{position:relative;margin-left:6px}
.lang-menu summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;padding:2px;border:1px solid #8a7356;background:#0d0b09;transition:border-color .3s,box-shadow .3s}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary:hover,.lang-menu summary:focus-visible,.lang-menu[open] summary{border-color:var(--gold,#c9a46a);box-shadow:0 0 0 3px #c9a46a26}
.lang-menu .flag{display:block;width:24px;height:24px;border-radius:50%;overflow:hidden;flex:none;box-shadow:inset 0 0 0 1px #0003}
.lang-menu .flag svg{display:block;width:100%;height:100%;transform:scale(1.5);transform-origin:center}
.lang-menu .lang-list{position:absolute;right:0;top:calc(100% + 12px);z-index:50;display:grid;gap:2px;min-width:150px;padding:8px;border:1px solid #3a332c;border-radius:14px;background:#0d0b09f2;backdrop-filter:blur(8px);box-shadow:0 18px 40px #000a;animation:langIn .25s ease}
.lang-menu .lang-list a{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:9px;font:500 12px/1 Manrope,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#d9ccba;white-space:nowrap}
.lang-menu .lang-list a:after{display:none}
.lang-menu .lang-list a:hover,.lang-menu .lang-list a:focus-visible{background:#1d1915;color:#fff}
.site-header nav .lang-menu .lang-list a[aria-current]{color:var(--gold,#c9a46a);box-shadow:none}
.lang-menu .lang-list .flag{width:22px;height:22px}
@keyframes langIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(max-width:700px){.lang-menu{margin:6px 0 0}.lang-menu .lang-list{right:auto;left:0}}