/* ===== Mode « application » sur téléphone (≤ 700 px) — ne change rien sur ordinateur =====
   1. Accueil en écrans plein écran qu'on fait glisser (défilement aimanté).
   2. Barre de navigation fixe en bas, en-tête fixe en haut (logo + langue).
   3. Galeries photo des pages : on les fait défiler de côté avec le doigt.
   4. Transitions douces entre les pages (navigateurs récents ; sinon changement normal).
   (5. installation sur l'écran d'accueil : manifest + icônes, voir l'en-tête des pages.) */
.app-bar,.app-dots,.app-swipe{display:none}
@media(max-width:700px){
  :root{--app-hdr:64px;--app-bar:62px}
  body{padding-bottom:calc(var(--app-bar) + env(safe-area-inset-bottom))}

  /* En-tête fixe : logo à gauche, drapeau de langue à droite ; le bouton « Menu » est remplacé par la barre du bas. */
  .site-header,.page .site-header,.scenes-off .site-header{position:sticky!important;top:0;z-index:60;height:calc(var(--app-hdr) + env(safe-area-inset-top))!important;min-height:0!important;padding:env(safe-area-inset-top) 5% 0!important;box-sizing:border-box;flex-wrap:nowrap;gap:12px;background:#090909f0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #ffffff12}
  .site-header .brand-caption,.site-header .menu-toggle{display:none}
  .site-header nav,.site-header nav.open{display:flex;flex-direction:row;flex-basis:auto;margin:0 0 0 auto;padding:0;border:0;gap:0;align-items:center}
  .site-header nav>*:not(.lang-menu){display:none}
  .site-header .lang-menu{margin:0}
  .site-header .brand-logo{height:44px}
  .site-header .brand-logo img{height:44px;width:auto}
  .site-header .lang-menu .lang-list{left:auto;right:0}

  /* Barre de navigation du bas */
  .app-bar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:70;height:var(--app-bar);padding-bottom:env(safe-area-inset-bottom);background:#0b0a09f2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid #ffffff1a}
  .app-bar a{white-space:nowrap;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#a59d92;font:500 9.5px/1 Montserrat,Manrope,sans-serif;letter-spacing:.06em;text-transform:uppercase;-webkit-tap-highlight-color:transparent}
  .app-bar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
  .app-bar a[aria-current]{color:var(--gold,#c9a46a)}
  .app-bar a:active{color:#fff}
  .lightbox{z-index:80}

  /* Accueil : écrans plein écran aimantés */
  html:has(.scene-stage){scroll-snap-type:y mandatory;scroll-padding-top:calc(var(--app-hdr) + env(safe-area-inset-top))}
  .scene-stage>.scene,.home-about{scroll-snap-align:start;scroll-snap-stop:always}
  .scene-stage>.scene{box-sizing:border-box;min-height:calc(100svh - var(--app-hdr) - var(--app-bar) - env(safe-area-inset-top) - env(safe-area-inset-bottom));margin:0;display:flex;flex-direction:column}
  .scene-intro{min-height:calc(100svh - var(--app-hdr) - var(--app-bar) - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important}
  .scene-skills .scene-inner,.scene-materials .scene-inner{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:14px;padding-bottom:14px}
  .scene-skills .hero-heading{padding-top:0;padding-bottom:10px}
  .scene-skills .hero-heading :is(h1,h2){font-size:30px}
  .hero-grid-8 .project-tile{height:calc((100svh - var(--app-hdr) - var(--app-bar) - 225px) / 4)!important;min-height:64px}
  .hero-grid-8 .tile-open{display:none}
  .scene-stage>.scene:not(.scene-intro){padding-top:0!important;padding-bottom:0!important}
  .scene-skills .hero-foot{padding:10px 0 0!important;margin:0}
  .scene-skills .scene-page-links{flex-direction:row!important;justify-content:center;gap:22px!important;margin:0}
  .scene-skills .scene-page-links a{font-size:10px;padding:4px 0;white-space:nowrap;flex:none;width:auto!important;min-width:0!important;max-width:none!important}
  .scene-materials .section-heading{margin-bottom:12px}
  .scene-materials .section-heading h2{font-size:26px}
  .scene-materials .brands-band{padding:10px 0 6px;margin-top:8px}
  .scene-materials .materials-foot{margin-top:4px}
  .material-strips .material-tile{height:clamp(38px,calc((100svh - var(--app-hdr) - var(--app-bar) - 385px) / 6),74px)!important}
  .scene-materials .home-footer{display:none}
  .home-about{min-height:auto;padding-top:24px;padding-bottom:24px}

  /* 3. Galeries photo des pages : bande horizontale qu'on fait glisser (la page Réalisations garde sa grille filtrable) */
  .page-gallery:not(.catalogue) .gallery-grid{display:flex;columns:auto;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;--g:calc(50vw - 50%);width:100vw;box-sizing:border-box;margin-left:calc(-1 * var(--g));padding:0 var(--g) 4px;scroll-padding-inline:var(--pad,24px)}
  .page-gallery:not(.catalogue) .gallery-grid::-webkit-scrollbar{display:none}
  .page-gallery:not(.catalogue) .gallery-grid>li{flex:0 0 80%;margin:0;scroll-snap-align:start}
  .page-gallery:not(.catalogue) .gallery-grid>li .gallery-open{aspect-ratio:4/5!important}
  .page-gallery:not(.catalogue) .gallery-grid>li:last-child{scroll-snap-align:end}
  .app-swipe{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;color:#a59d92;font:500 10px/1 Montserrat,Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase}
  .app-swipe-bar{flex:1;height:1px;background:#ffffff24;position:relative;overflow:hidden}
  .app-swipe-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--gold,#c9a46a);transition:width .25s,left .25s}
  .app-swipe b{color:#efe6d8;font-weight:500}

  /* 4. Transitions entre les pages : la page glisse et s'estompe, l'en-tête et la barre du bas restent en place */
  @view-transition{navigation:auto}
  .site-header{view-transition-name:app-hdr}
  .app-bar{view-transition-name:app-bar}
  ::view-transition-old(root){animation:app-out .28s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:app-in .38s cubic-bezier(0,0,.2,1) both}
  ::view-transition-group(app-hdr),::view-transition-group(app-bar){animation:none}
  @keyframes app-out{to{opacity:0;transform:translateX(-6%)}}
  @keyframes app-in{from{opacity:0;transform:translateX(8%)}}
  @media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

  /* Points de position sur le côté (accueil) */
  @media(max-width:380px){.app-bar a{font-size:8.5px;letter-spacing:.03em}.scene-skills .scene-page-links{gap:14px!important}.scene-skills .scene-page-links a{font-size:9px;letter-spacing:.1em}}
  .app-dots{display:flex;flex-direction:column;gap:8px;position:fixed;right:3px;top:50%;transform:translateY(-50%);z-index:55}
  .app-dots a{width:6px;height:6px;border-radius:50%;background:#ffffff4d;transition:height .3s,background .3s}
  .app-dots a[aria-current]{height:18px;border-radius:3px;background:var(--gold,#c9a46a)}

  /* Petits écrans (iPhone SE, Android compacts) : on resserre titres et marges pour tenir dans un écran. */
  @media(max-height:800px){
    .scene-skills .hero-heading p,.scene-materials .section-heading .eyebrow{display:none}
    .scene-skills .hero-heading :is(h1,h2),.scene-materials .section-heading h2{font-size:24px}
    .scene-skills .scene-inner,.scene-materials .scene-inner{padding-top:8px;padding-bottom:8px}
    .hero-grid-8 .project-tile{height:calc((100svh - var(--app-hdr) - var(--app-bar) - 150px) / 4)!important;min-height:0}
    .hero-grid-8 .cover-sub{display:none}
    .material-strips .material-tile{height:calc((100svh - var(--app-hdr) - var(--app-bar) - 300px) / 6)!important;min-height:0}
    .scene-materials .materials-foot{display:none}
    .material-strips .cover-word{font-size:21px!important}
    .material-strips .cover-sub{font-size:7.5px!important;margin-top:2px}
  }
}