/* ============ TOKENS ============ */
:root{
  --bg:#ffffff;
  --fg:#161616;
  --fg-dim:#6b6b6b;
  --fg-faint:#a7a7a3;
  --line:rgba(20,20,20,0.12);
  --line-strong:rgba(20,20,20,0.32);
  --nav-line:rgba(20,20,20,0.62);
  --nav-line-dark:rgba(244,242,236,0.5);

  --dark-bg:#1c1c1c;
  --dark-fg:#f4f2ec;
  --dark-fg-dim:#a8a49c;
  --dark-line:rgba(244,242,236,0.16);
  --dark-line-strong:rgba(244,242,236,0.34);

  --sans:'Poppins', sans-serif;
  --serif:'Fraunces', serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* NOTE (Lamina Wallet integration): this stylesheet was ported from the
   laminacards.com static site and is loaded ONLY on the "/" route's page
   component (never in the shared root layout), so it never reaches
   /signup, /mentions-legales, /restaurant, /admin, etc. As a second,
   belt-and-suspenders safety net, every selector that originally targeted
   bare `body`/`a`/`img`/`h1..p`/`*` (and would otherwise fight the Tailwind
   app's own global resets in globals.css if this file ever loaded
   alongside them) is scoped under the `.lf-page` wrapper that the page
   renders around this whole design. `html`-level rules (scroll-behavior,
   touch-action, overflow-anchor, the `.touch` cursor override) are left
   global on purpose -- they're harmless anywhere in the app. */
.lf-page, .lf-page *{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html, .lf-page main, .lf-page section{overflow-anchor:none;}
html{touch-action:manipulation;}

.lf-page{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

html.touch, html.touch .lf-page *{cursor:auto !important;}
html.touch #cursor-dot{display:none;}

.lf-page a{color:inherit;text-decoration:none;}
.lf-page img{max-width:100%;display:block;}
.lf-page h1,.lf-page h2,.lf-page h3,.lf-page p{margin:0;}

.lf-page::selection, .lf-page *::selection{background:var(--fg);color:var(--bg);}

/* ============ CUSTOM CURSOR ============ */
#cursor-dot{
  position:fixed;
  top:0;left:0;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--fg);
  transform:translate3d(-50%,-50%,0);
  pointer-events:none;
  z-index:9999;
  opacity:0;
  transition:width .3s var(--ease), height .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), opacity .4s var(--ease);
}
#cursor-dot.show{opacity:1;}
#cursor-dot.cursor-hover{
  width:38px;height:38px;
  background:transparent;
  border:1px solid var(--fg);
}
#cursor-dot.on-dark{background:var(--dark-fg);}
#cursor-dot.on-dark.cursor-hover{background:transparent;border-color:var(--dark-fg);}

/* ============ INTRO ============ */
#intro{
  position:fixed;inset:0;
  background:var(--bg);
  z-index:10000;
  display:flex;align-items:center;justify-content:center;
  clip-path:circle(150% at 50% 50%);
  transition:clip-path 1.05s var(--ease);
}
#intro.fade-out{clip-path:circle(0% at 50% 50%);}
#intro-logo{
  width:clamp(220px,32vw,440px);
  height:auto;
  opacity:0;
  transform:scale(1.1);
  filter:blur(18px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
}
#intro-logo.in{opacity:1;transform:scale(1);filter:blur(0);}
#intro-logo.intro-exit{opacity:0;transform:scale(.92);filter:blur(6px);transition:opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);}

/* ============ TOP BAR ============ */
#top-bar{
  position:fixed;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 5vw 22px calc(5vw + 64px);
  z-index:50;
  pointer-events:none;
}
.logo-btn{
  display:block;
  background:none;border:none;padding:0;margin:0;
  pointer-events:auto;
  cursor:none;
}
.top-logo{display:block;height:32px;width:auto;transition:filter .4s var(--ease);}
.top-left{display:flex;align-items:center;gap:20px;}
.top-contacts{display:flex;align-items:center;gap:14px;pointer-events:auto;}
.top-contact-link{
  display:block;
  width:16px;height:16px;
  color:var(--fg-dim);
  cursor:none;
  transition:color .3s var(--ease);
}
.top-contact-link svg{width:100%;height:100%;display:block;}
.top-contact-link:hover{color:var(--fg);}
.top-right{display:flex;align-items:center;gap:22px;pointer-events:none;}
.top-tag{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);transition:color .4s var(--ease);}
#top-bar.on-dark .top-logo{filter:invert(1) brightness(1.3);}
#top-bar.on-dark .top-tag{color:var(--dark-fg-dim);}
#top-bar.on-dark .top-contact-link{color:var(--dark-fg-dim);}
#top-bar.on-dark .top-contact-link:hover{color:var(--dark-fg);}

@media (max-width:640px), (min-width:641px) and (orientation:portrait) and (hover:none){
  .top-left{gap:12px;}
  .top-contacts{gap:10px;}
  .top-contact-link{width:14px;height:14px;}
}
@media (max-width:640px), (min-width:641px) and (orientation:portrait) and (hover:none){ .top-tag{display:none;} }

#lang-toggle{
  pointer-events:auto;
  cursor:none;
  display:flex;align-items:center;gap:6px;
  background:transparent;
  border:1px solid var(--line-strong);
  border-radius:20px;
  padding:6px 12px;
  font-family:var(--sans);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--fg-dim);
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.lang-opt{transition:color .3s var(--ease), font-weight .3s var(--ease);}
.lang-sep{opacity:.4;}
html[data-lang="fr"] #lang-toggle .lang-opt[data-lang="fr"],
html[data-lang="en"] #lang-toggle .lang-opt[data-lang="en"]{color:var(--fg);font-weight:700;}
#top-bar.on-dark #lang-toggle{border-color:var(--dark-line-strong);color:var(--dark-fg-dim);}
html[data-lang="fr"] #top-bar.on-dark #lang-toggle .lang-opt[data-lang="fr"],
html[data-lang="en"] #top-bar.on-dark #lang-toggle .lang-opt[data-lang="en"]{color:var(--dark-fg);}

/* ============ SIDE NAV ============ */
#side-nav{
  position:fixed;left:0;top:0;
  height:100vh;width:60px;
  z-index:60;
  display:flex;align-items:center;
  transition:width .5s var(--ease);
  overflow:hidden; /* the (opacity:0, but still laid out) title text used to
    spill way past the 60px column and silently steal clicks meant for
    whatever sits underneath it, like the logo in the top bar */
}
/* The real hit-box grows with the panel so moving the mouse onto a revealed
   title never counts as "leaving" the nav (which would schedule a close). */
#side-nav.hovering{width:min(580px, 90vw);}
#side-nav::before{
  content:'';
  position:absolute;inset:0 auto 0 0;
  width:0;
  background:linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.82) 55%, rgba(255,255,255,0) 100%);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:width .5s var(--ease);
  pointer-events:none;
  z-index:-1;
}
#side-nav.hovering::before{width:min(580px, 90vw);}

.side-nav-track{
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(13px,2.6vh,25px);
  padding-left:26px;
  height:100%;
}
.nav-item{
  display:flex;align-items:center;
  height:18px;
  padding:8px 40px 8px 0;
  margin:-8px -40px -8px 0;
}
.nav-line{
  width:22px;height:1.5px;
  background:var(--nav-line);
  transition:width .45s var(--ease), background-color .45s var(--ease);
  flex-shrink:0;
}
.nav-text{
  display:flex;align-items:baseline;gap:10px;
  margin-left:14px;
  opacity:0;
  transform:translateX(-10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  white-space:nowrap;
}
.nav-num{font-family:var(--sans);font-weight:500;font-size:.76rem;letter-spacing:.08em;color:var(--fg-faint);}
.nav-title{font-family:var(--sans);font-weight:600;font-size:.84rem;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-dim);transition:color .3s var(--ease);}

/* Opening the panel (mouse approach on desktop, edge-swipe on touch) reveals
   every title at once; each one darkens on its own hover, the current
   section's title stays dark to mark your place. */
#side-nav.hovering .nav-text{opacity:1;transform:translateX(0);}
#side-nav.hovering .nav-item:hover .nav-line{width:38px;background:var(--fg);}
#side-nav.hovering .nav-item:hover .nav-title{color:var(--fg);}

.nav-item.active .nav-line{width:38px;background:var(--fg);}
.nav-item.active .nav-title{color:var(--fg);}

#side-nav.on-dark::before{background:linear-gradient(90deg, rgba(28,28,28,.96) 0%, rgba(28,28,28,.82) 55%, rgba(28,28,28,0) 100%);}
#side-nav.on-dark .nav-line{background:var(--nav-line-dark);}
#side-nav.on-dark .nav-item.active .nav-line,
#side-nav.on-dark.hovering .nav-item:hover .nav-line{background:var(--dark-fg);}
#side-nav.on-dark .nav-num{color:var(--dark-fg-dim);}
#side-nav.on-dark .nav-title{color:var(--dark-fg-dim);}
#side-nav.on-dark .nav-item.active .nav-title,
#side-nav.on-dark.hovering .nav-item:hover .nav-title{color:var(--dark-fg);}

/* Any touch device — phone or tablet, whatever the orientation — gets the
   same side nav: condensed resting ticks, opened by a tap (see script.js),
   showing every title just like desktop. Long French titles don't fit on one
   line at any reasonable width, so once open, titles wrap instead of being
   cut off. The resting (closed) ticks stay single-line/fixed-height — the
   wrap only kicks in while open, otherwise the invisible (opacity:0) wrapped
   title text inflates each tick's box and blows the gap between ticks way
   out. touch-action:none hands the whole gesture to script.js, which drags
   the page's scroll position directly off the touch point (see the "touch:
   drag the closed nav to scrub" block there) instead of the browser's own
   panning. */
html.touch #side-nav{width:30px; touch-action:none;}
html.touch #side-nav.hovering{width:min(340px, 92vw);}
html.touch .side-nav-track{padding-left:12px;gap:32px;}
html.touch .nav-line{width:12px;}
html.touch .nav-item{padding:8px 18px 8px 0;margin:-8px -18px -8px 0;}
html.touch .nav-item.active .nav-line{width:24px;}
html.touch .nav-num{font-size:.72rem;}
html.touch .nav-title{font-size:.78rem;}
html.touch .nav-text{align-items:baseline;}
html.touch #side-nav.hovering .nav-item{
  height:auto;
  align-items:flex-start;
  padding:10px 18px 10px 0;margin:-10px -18px -10px 0;
}
html.touch #side-nav.hovering .nav-line{margin-top:7px; align-self:flex-start;}
html.touch #side-nav.hovering .nav-text{white-space:normal;}
html.touch #side-nav.hovering .nav-title{white-space:normal;}
html.touch #side-nav.hovering::before{width:min(340px, 92vw);}
/* Open panel packs the titles closer together than the wide resting-tick
   gap above (that width is there for a comfortable drag range, not for
   reading a list of titles). */
html.touch #side-nav.hovering .side-nav-track{gap:16px;}

/* Tablets (touch, wider than a phone) get extra breathing room between ticks. */
@media (min-width:641px){
  html.touch .side-nav-track{gap:46px;}
  html.touch #side-nav.hovering{width:min(420px, 70vw);}
  html.touch #side-nav.hovering::before{width:min(420px, 70vw);}
  html.touch #side-nav.hovering .side-nav-track{gap:20px;}
}

/* ============ MOBILE NAV — menu hamburger flottant (téléphone uniquement) ====
   Sur téléphone (<=640px + tactile) : la slide bar verticale de gauche est
   masquée, un bouton hamburger doré flottant (bas-droite) déploie un panneau
   plein largeur qui descend depuis le haut. Tablette et desktop gardent
   #side-nav intact. La logique JS (titres, section active, scroll fluide) est
   partagée avec la slide bar — voir script.js. */
#mobile-nav{display:none;}
#mobile-nav-toggle{display:none;}

@media (max-width:640px){
  html.touch #side-nav{display:none;}

  /* ---- bouton hamburger flottant, doré, traits blancs ---- */
  html.touch #mobile-nav-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    position:fixed;
    right:16px;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 16px);
    z-index:56;               /* au-dessus du panneau (45) et de #top-bar (50) */
    width:48px;height:48px;
    margin:0;padding:0;
    -webkit-appearance:none;appearance:none;
    border:0;border-radius:50%;
    background:var(--gold);
    box-shadow:0 6px 20px rgba(20,20,20,.28);
    pointer-events:auto;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background-color .3s var(--ease), transform .2s var(--ease);
  }
  html.touch #mobile-nav-toggle:active{transform:scale(.93);}
  html.touch #mobile-nav-toggle.open{background:var(--gold-dark);}
  .burger-box{position:relative;display:block;width:20px;height:14px;}
  .burger-line{
    position:absolute;left:0;right:0;
    height:2px;border-radius:2px;
    background:#fff;
    transition:transform .3s var(--ease), opacity .2s var(--ease);
  }
  .burger-line:nth-child(1){top:0;}
  .burger-line:nth-child(2){top:50%;transform:translateY(-50%);}
  .burger-line:nth-child(3){bottom:0;}
  #mobile-nav-toggle.open .burger-line:nth-child(1){transform:translateY(6px) rotate(45deg);}
  #mobile-nav-toggle.open .burger-line:nth-child(2){opacity:0;}
  #mobile-nav-toggle.open .burger-line:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

  /* ---- overlay plein écran (fond + panneau) ---- */
  html.touch #mobile-nav{
    display:block;
    position:fixed;
    inset:0;
    z-index:45;               /* sous le bouton flottant (56) et #top-bar (50) */
    visibility:hidden;
    pointer-events:none;
  }
  html.touch #mobile-nav.open{visibility:visible;pointer-events:auto;}

  #mobile-nav-backdrop{
    position:absolute;inset:0;
    width:100%;
    margin:0;padding:0;border:0;
    background:rgba(20,20,20,.38);
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
    opacity:0;
    transition:opacity .25s var(--ease);
    cursor:pointer;
    /* le drag sur le fond ne fait pas défiler la page derrière */
    touch-action:none;
  }
  #mobile-nav.open #mobile-nav-backdrop{opacity:1;}

  #mobile-nav-panel{
    position:absolute;
    top:0;left:0;right:0;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    box-shadow:0 16px 44px rgba(20,20,20,.16);
    padding:calc(env(safe-area-inset-top, 0px) + 74px) 26px 28px;
    max-height:88vh;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    transform:translateY(-100%);
    transition:transform .32s var(--ease);
  }
  #mobile-nav.open #mobile-nav-panel{transform:translateY(0);}

  #mobile-nav-list{
    list-style:none;margin:0;padding:0;
    display:flex;flex-direction:column;
  }
  #mobile-nav-list li{border-top:1px solid var(--line);}
  #mobile-nav-list li:first-child{border-top:0;}
  .mobile-nav-item{
    -webkit-appearance:none;appearance:none;
    display:flex;align-items:baseline;gap:12px;width:100%;
    margin:0;padding:15px 4px;
    background:transparent;border:0;
    text-align:left;
    font-family:var(--sans);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-nav-item .mnav-num{
    font-weight:500;font-size:.72rem;letter-spacing:.08em;
    color:var(--fg-faint);flex-shrink:0;min-width:1.5em;
  }
  .mobile-nav-item .mnav-title{
    font-weight:600;font-size:.92rem;letter-spacing:.03em;
    text-transform:uppercase;color:var(--fg-dim);
    transition:color .2s var(--ease);
  }
  .mobile-nav-item:hover .mnav-title,
  .mobile-nav-item:focus-visible .mnav-title,
  .mobile-nav-item.active .mnav-title{color:var(--fg);}
  .mobile-nav-item.active .mnav-num{color:var(--gold);}

  /* Le bouton flottant (bas-droite) ne doit jamais masquer le pied de page :
     on réserve sa hauteur en bas de la section Contact. */
  html.touch #contact{padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 96px);}
}

@media (max-width:640px) and (prefers-reduced-motion:reduce){
  #mobile-nav-panel,
  #mobile-nav-backdrop,
  .burger-line{transition:none;}
}

/* ============ LAYOUT ============ */
main{position:relative;z-index:2;}

section{
  position:relative;
  padding-left:64px;
}
/* From ~1000px up there's room to spare: mirror the 64px side-nav gutter on
   the right so every section's content sits at the true optical centre
   instead of ~25px right of it. Below 1000px the space is tighter and the
   floating mobile nav replaces the rail, so this is desktop-only. */
@media (min-width:1000px){
  section{padding-right:64px;}
}

/* ============ HERO ============ */
#hero{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:120px 6vw 60px calc(6vw + 64px);
  overflow:hidden;
  background:var(--bg);
}
/* Same soft gradient wash on every device — desktop used to get an animated
   cloud-photo backdrop here, but it's gone in favor of the calmer look
   phones and portrait tablets already had (see the old max-width:820px
   override this replaced). */
.hero-mist{
  position:absolute;
  inset:-8% -8%;
  background-image:
    radial-gradient(ellipse 62% 30% at 28% 18%, rgba(90,90,90,.4), transparent 62%),
    radial-gradient(ellipse 55% 32% at 78% 46%, rgba(120,120,120,.32), transparent 64%),
    radial-gradient(ellipse 75% 38% at 45% 92%, rgba(80,80,80,.3), transparent 68%);
  background-size:auto;
  opacity:1;
  animation:mistDrift 16s ease-in-out infinite;
  will-change:transform;
  pointer-events:none;
  z-index:0;
}
@keyframes mistDrift{
  0%{transform:scale(1.1) translate(0%,0%) rotate(0deg);}
  33%{transform:scale(1.22) translate(-3.5%,2.4%) rotate(.6deg);}
  66%{transform:scale(1.16) translate(3%,-2.6%) rotate(-.5deg);}
  100%{transform:scale(1.1) translate(0%,0%) rotate(0deg);}
}
.hero-inner{position:relative;z-index:1;max-width:760px;}
.hero-bottom{z-index:1;}
.hero-logo-img{
  width:clamp(280px,42vw,560px);
  height:auto;
  margin:0 auto;
}
.hero-sub{
  margin:26px auto 0;
  max-width:600px;
  font-weight:400;
  font-size:clamp(1rem,1.6vw,1.2rem);
  line-height:1.55;
  color:var(--fg);
}
.hero-desc{
  margin:22px auto 0;
  max-width:600px;
  /* Scales up on wider screens to match the hero paragraph on
     laminacards.com (~19px at desktop) instead of staying at ~15px. */
  font-size:clamp(.95rem,1.5vw,1.2rem);
  line-height:1.65;
  color:var(--fg-dim);
}
.hero-desc{
  cursor:none;
  transform:scale(1);
  transition:color .3s var(--ease), -webkit-text-stroke-width .3s var(--ease), transform .35s var(--ease);
  -webkit-text-stroke:0px currentColor;
}
.hero-desc.in-view:hover{
  color:var(--fg);
  -webkit-text-stroke:.4px currentColor;
  transform:scale(1.035);
}

.hero-sub .hover-word{
  cursor:none;
  transition:color .22s var(--ease), -webkit-text-stroke-width .22s var(--ease);
  -webkit-text-stroke:0px currentColor;
}
.hero-sub .hover-word:hover{
  color:var(--fg);
  -webkit-text-stroke:.5px currentColor;
}
.hero-bottom{
  position:relative;
  margin-top:70px;
  display:flex;flex-direction:column;align-items:center;gap:22px;
}
.hero-counter{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.2em;
  color:var(--fg-faint);
}
.hero-quote{
  font-family:var(--sans);
  font-weight:600;
  font-size:clamp(.78rem,1.3vw,.92rem);
  letter-spacing:.04em;
  line-height:1.7;
  color:var(--fg);
  max-width:520px;
  text-transform:uppercase;
}
.scroll-cue{
  font-size:.65rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--fg-faint);
  position:relative;
  padding-top:22px;
}
.scroll-cue::before{
  content:'';
  position:absolute;top:0;left:50%;
  width:1px;height:16px;
  background:var(--line-strong);
  transform:translateX(-50%);
  animation:scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{transform:translateX(-50%) scaleY(0);transform-origin:top;opacity:0;}
  40%{transform:translateX(-50%) scaleY(1);transform-origin:top;opacity:1;}
  60%{transform:translateX(-50%) scaleY(1);transform-origin:bottom;opacity:1;}
  100%{transform:translateX(-50%) scaleY(0);transform-origin:bottom;opacity:0;}
}

/* ============ PAGE SECTIONS ============ */
.page{
  min-height:100vh;
  display:flex;align-items:center;
  padding-top:140px;padding-bottom:140px;
  border-top:1px solid var(--line);
}
.page-inner{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 340px;
  gap:20px 70px;
  align-items:center;
}
.page-num{
  grid-column:1;
  font-family:var(--sans);
  font-weight:500;
  font-size:.85rem;
  letter-spacing:.1em;
  color:var(--fg-faint);
  display:block;
  margin-bottom:14px;
}
.page-title{
  grid-column:1;
  font-family:var(--sans);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.6rem,3.4vw,2.5rem);
  letter-spacing:.01em;
  line-height:1.18;
  margin-bottom:22px;
  /* Titles wrap on their own now that the hard <br> tags are gone from the
     markup -- balance keeps the last line from being a lone short word. */
  text-wrap:balance;
}
.page-kicker{
  grid-column:1;
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fg-dim);
  max-width:440px;
  margin-bottom:30px;
}
.page-body{
  grid-column:1;
  max-width:480px;
}
.page-body p{
  color:var(--fg-dim);
  line-height:1.8;
  font-size:.96rem;
  margin-bottom:18px;
}
.page-body h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fg);
  margin-bottom:10px;
}
.page-body.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
  max-width:640px;
}
@media (max-width:900px){
  .page-body.two-col{grid-template-columns:1fr;}
}

.card-shot{
  grid-column:2;grid-row:1 / span 5;
  justify-self:center;
  width:100%;
  max-width:340px;
  filter:drop-shadow(0 20px 40px rgba(20,20,20,.22));
  transition:transform .5s var(--ease);
  will-change:transform;
}
.card-shot img{width:100%;height:auto;display:block;}

/* logo-only visual (VIP section) */
.logo-shot{
  grid-column:2;grid-row:1 / span 5;
  justify-self:center;
  width:100%;
  max-width:180px;
  filter:drop-shadow(0 14px 30px rgba(20,20,20,.14));
}
.logo-shot img{width:100%;height:auto;}

/* photo visual (Seminaire section) */
.photo-shot{
  grid-column:2;grid-row:1 / span 5;
  justify-self:center;
  width:100%;
  max-width:340px;
  border-radius:2px;
  overflow:hidden;
  filter:drop-shadow(0 24px 46px rgba(20,20,20,.22));
}
.photo-shot img{width:100%;height:auto;display:block;}

@media (max-width:820px){
  .page-inner{grid-template-columns:1fr;}
  .page-num,.page-title,.page-kicker,.page-body{grid-column:1;}
  .card-shot,.logo-shot,.photo-shot{grid-column:1;grid-row:auto;margin-top:36px;max-width:300px;}
}

/* ticket special line */
.ticket-line{
  font-family:var(--sans);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:.98rem;
  color:var(--fg);
  line-height:1.6;
  margin:26px 0 30px !important;
}

/* ============ FAQ ============ */
.faq-list{grid-column:1;max-width:700px;margin-top:10px;}
.faq-item{
  border-bottom:1px solid var(--line);
  padding:22px 0;
}
.faq-item summary{
  cursor:none;
  list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:var(--sans);
  font-weight:500;
  font-size:1rem;
  color:var(--fg);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'+';
  font-family:var(--sans);
  font-weight:300;
  font-size:1.4rem;
  color:var(--fg-dim);
  transition:transform .4s var(--ease);
  flex-shrink:0;
}
.faq-item[open] summary::after{transform:rotate(135deg);}
.faq-item p{
  margin-top:14px;
  color:var(--fg-dim);
  line-height:1.75;
  font-size:.92rem;
  max-width:580px;
}

/* ============ CONTACT (dark section) ============ */
#contact{
  padding-top:140px;padding-bottom:60px;
  background:var(--dark-bg);
  color:var(--dark-fg);
}
.contact-inner{max-width:800px;margin:0 auto;}
#contact .page-num{color:var(--dark-fg-dim);}
.contact-title-word{
  font-family:var(--sans);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.6rem,3.4vw,2.5rem);
  color:var(--dark-fg);
  margin-bottom:10px;
}
.contact-wordmark{
  width:clamp(200px,26vw,320px);
  height:auto;
  margin-bottom:26px;
}
.contact-desc{
  color:var(--dark-fg-dim);
  line-height:1.8;
  font-size:.98rem;
  max-width:520px;
  margin-bottom:50px;
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 40px;
  margin-bottom:100px;
}
.contact-link, .contact-plain{
  display:flex;align-items:center;gap:10px;
  font-family:var(--sans);
  font-weight:500;
  font-size:1.15rem;
  color:var(--dark-fg);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), opacity .3s var(--ease);
  width:fit-content;
}
.contact-link:hover{border-color:var(--dark-line-strong);opacity:.8;}
.ig-icon{width:18px;height:18px;flex-shrink:0;}
@media (max-width:560px){ .contact-grid{grid-template-columns:1fr;} }

.site-footer{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--dark-line);
  padding:26px 0;
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dark-fg-dim);
}
/* monogramme "LC" (carré) — un poil plus haut que l'ancien wordmark "Lamina"
   pour rester lisible à cette taille */
.site-footer .footer-word{height:24px;width:auto;}

/* ============ SCROLL REVEAL ============ */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in-view{opacity:1;transform:translateY(0);}

.page-body .reveal:nth-child(2){transition-delay:.08s;}
.page-body .reveal:nth-child(3){transition-delay:.16s;}
.contact-grid.reveal .contact-link:nth-child(2),
.contact-grid.reveal .contact-link:nth-child(3){transition-delay:.05s;}

@media (max-width:820px){
  .page{padding-top:100px;padding-bottom:100px;}
  #contact{padding-top:100px;}
}

@media (max-width:640px), (min-width:641px) and (orientation:portrait) and (hover:none){
  section{padding-left:32px;padding-right:24px;}
  #hero{padding-left:32px;padding-right:24px;}
  #top-bar{padding-left:32px;padding-right:32px;}

  .hero-logo-img{width:min(260px, 72vw);}
  #intro-logo{width:min(200px, 64vw);}

  .card-shot{max-width:min(300px, 82vw);}
  .logo-shot{max-width:min(150px, 45vw);}
  .photo-shot{max-width:min(300px, 82vw);}

  .page{padding-top:80px;padding-bottom:80px;}
  #contact{padding-top:80px;}

  .site-footer{flex-direction:column;align-items:flex-start;gap:14px;}
}

/* Tablet held upright specifically: the top gradient wash sat right under
   the header and read as an odd smudge on the taller canvas — drop it and
   pull the sections closer together (they had a lot more empty air than on
   a phone at this width). */
@media (min-width:641px) and (orientation:portrait) and (hover:none){
  .hero-mist{
    background-image:
      radial-gradient(ellipse 55% 32% at 78% 46%, rgba(120,120,120,.32), transparent 64%),
      radial-gradient(ellipse 75% 38% at 45% 92%, rgba(80,80,80,.3), transparent 68%);
  }
  .page{padding-top:56px;padding-bottom:56px;}
  #contact{padding-top:56px;}
}

/* ============ CROSS-OFFER LINK (top bar, Lamina Cards <-> Lamina Fidelity) ============ */
.offer-link{
  pointer-events:auto;
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fg-dim);
  border:1px solid var(--line-strong);
  border-radius:20px;
  padding:6px 14px;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.offer-link:hover{color:var(--fg);border-color:var(--fg);}
#top-bar.on-dark .offer-link{color:var(--dark-fg-dim);border-color:var(--dark-line-strong);}
#top-bar.on-dark .offer-link:hover{color:var(--dark-fg);border-color:var(--dark-fg);}
@media (max-width:640px), (min-width:641px) and (orientation:portrait) and (hover:none){
  .offer-link{padding:5px 11px;font-size:.6rem;}
}

/* ============ KEYBOARD FOCUS ============
   The custom cursor never conveyed focus; keyboard users had nothing to go
   on (list-style:none also strips the <summary> marker). One visible ring
   for every interactive element, light-on-dark inside #contact. */
.lf-page a:focus-visible,
.lf-page button:focus-visible,
.lf-page summary:focus-visible,
.lf-page input:focus-visible,
.lf-page .nav-item:focus-visible,
.lf-page .mobile-nav-item:focus-visible{
  outline:2px solid var(--fg);
  outline-offset:3px;
  border-radius:2px;
}
.faq-item summary:focus-visible{outline-offset:4px;}
#contact a:focus-visible,
#contact button:focus-visible,
#top-bar.on-dark a:focus-visible,
#top-bar.on-dark button:focus-visible{outline-color:var(--dark-fg);}

@media (prefers-reduced-motion:reduce){
  .reveal{transition:none;}
  .hero-mist{animation:none;}
  #intro-logo{transition:opacity .3s;}
}