/* Art de Maison — v12 « Tuiles de verre ».
   Chargée en dernier. Trois mouvements, tous liés au défilement ou à l'ouverture d'une fenêtre :
   1. Tuiles : chaque panneau translucide arrive givré (flou + léger recul), se pose, puis un reflet le traverse.
   2. Fenêtres : les grands blocs sombres s'ouvrent comme une fenêtre (coins arrondis et bords qui s'écartent)
      au rythme du défilement ; les boîtes de dialogue (visite photo, fiche produit) entrent par le verre.
   3. En-tête : verre plus dense dès que la page défile.
   « Réduire les animations » et le réglage système désactivent tout : les panneaux sont simplement visibles. */

/* ---------- 1. Tuiles ---------- */
.js-scroll [data-reveal=tile]{position:relative}
.js-scroll [data-reveal=tile]:not(.is-in){opacity:0;transform:translate3d(0,34px,0) scale(.965);filter:blur(14px)}
.js-scroll [data-reveal=tile].is-in:not(.is-done){will-change:transform,opacity,filter;
  transition:opacity .7s var(--ease) var(--reveal-delay),transform 1.05s var(--ease) var(--reveal-delay),filter .85s var(--ease) var(--reveal-delay)}
/* Reflet : un dégradé qui glisse de gauche à droite dans les limites arrondies de la tuile. */
.js-scroll [data-reveal=tile]::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.62) 50%,transparent 58%) no-repeat;background-size:280% 100%;background-position:120% 0}
.js-scroll [data-reveal=tile].is-in:not(.is-done)::after{animation:adm-sheen 1.1s cubic-bezier(.4,0,.2,1) calc(var(--reveal-delay) + 200ms) both}
.js-scroll [data-reveal=tile].is-done::after{display:none}
@keyframes adm-sheen{0%{opacity:0;background-position:120% 0}18%{opacity:1}100%{opacity:0;background-position:-20% 0}}
/* Tuiles sur fond sombre : reflet caramel plus discret. */
.visit-section [data-reveal=tile]::after{background-image:linear-gradient(105deg,transparent 42%,rgba(217,174,122,.45) 50%,transparent 58%)}
/* Petites pastilles : sans flou ni reflet, juste la montée. */
.js-scroll .material-pills span[data-reveal=tile]:not(.is-in){filter:none;transform:translate3d(0,16px,0)}
.js-scroll .material-pills span[data-reveal=tile]::after{display:none}

/* ---------- 2. Fenêtres ---------- */
/* Blocs sombres pleine largeur : s'ouvrent au défilement (navigateurs avec animation-timeline ; les autres gardent la révélation simple). */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .js-scroll .visit-section{animation:adm-window linear both;animation-timeline:view();animation-range:entry 0 entry 70vh;--window-end:inset(-30% 0 round 0)}
    .js-scroll .editorial{animation:adm-window linear both;animation-timeline:view();animation-range:entry 0 entry 60vh;--window-end:inset(0 round 32px)}
    .js-scroll .showroom .adm-walk-intro+.adm-walk .adm-walk-sticky{animation:adm-window-soft linear both;animation-timeline:view();animation-range:entry 0 entry 50vh}
  }
}
/* Fin de course : la pièce retrouve ses bords (les blocs pleine largeur laissent dépasser verticalement). */
@keyframes adm-window{from{clip-path:inset(0 7% round 56px)}to{clip-path:var(--window-end,inset(0))}}
@keyframes adm-window-soft{from{clip-path:inset(0 4% round 56px)}to{clip-path:inset(0 0 round 28px)}}
@media(max-width:720px){
  @keyframes adm-window{from{clip-path:inset(0 5% round 32px)}to{clip-path:var(--window-end,inset(0))}}
  @keyframes adm-window-soft{from{clip-path:inset(0 3% round 32px)}to{clip-path:inset(0 0 round 18px)}}
}

/* Boîtes de dialogue : entrée par le verre, fond qui se trouble en fondu. */
#immersion[open]{animation:adm-window-in .75s var(--ease)}
#immersion[open]::backdrop,.produit-dialog[open]::backdrop{animation:adm-backdrop-in .55s ease}
@keyframes adm-window-in{from{opacity:0;transform:scale(1.035);filter:blur(16px)}}
@keyframes adm-backdrop-in{from{opacity:0}}

/* ---------- 3. En-tête ---------- */
header{transition:background var(--t) ease,box-shadow var(--t) ease,border-color var(--t) ease}
header.is-scrolled{background:var(--glass-strong);border-color:rgba(255,255,255,.75);box-shadow:0 1px 0 rgba(255,255,255,.75) inset,0 18px 44px -22px rgba(42,27,16,.55)}

/* ---------- Mode calme ---------- */
@media(prefers-reduced-motion:reduce){
  .js-scroll [data-reveal=tile]{filter:none!important}
  .js-scroll [data-reveal=tile]::after{display:none}
  #immersion[open],#immersion[open]::backdrop,.produit-dialog[open]::backdrop{animation:none}
}
.reduce-motion [data-reveal=tile]{filter:none!important}
.reduce-motion [data-reveal=tile]::after{display:none}
.reduce-motion .visit-section,.reduce-motion .editorial,.reduce-motion .adm-walk-sticky{animation:none;clip-path:none}

/* ---------- Fiche produit : fermeture en miroir de l'ouverture, et carte compacte sur petit écran ---------- */
.produit-dialog.is-closing{animation:produit-out .38s var(--ease) forwards;pointer-events:none}
.produit-dialog.is-closing::backdrop{animation:adm-backdrop-out .38s ease forwards}
@keyframes produit-out{to{opacity:0;transform:translateY(24px) scale(.98);filter:blur(10px)}}
@keyframes adm-backdrop-out{to{opacity:0}}
@media(max-width:860px){
  /* Carte centrée comme sur bureau, contenu compacté pour tenir dans l'écran sans défiler. */
  .produit-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px);border-radius:24px;background:rgba(252,247,236,.94)}
  .produit-dialog[open]{animation:produit-in .45s var(--ease)}
  .produit-dialog.is-closing{animation:produit-out .38s var(--ease) forwards}
  .produit-layout{grid-template-columns:minmax(0,1fr)}
  .produit-galerie{padding:12px 14px 8px;gap:6px}
  .produit-scene{min-height:0}
  #produit-image{max-height:min(24dvh,220px)}
  #produit-vue{font-size:10px;padding:4px 10px}
  .produit-thumbs button{width:48px;height:38px}
  .produit-dialog>.produit-fermer{position:sticky;top:10px;left:calc(100% - 50px);margin:0 0 -40px;width:40px;height:40px;font-size:20px}
  .produit-infos{padding:12px 16px 10px}
  .produit-infos .eyebrow{font-size:9px;margin-bottom:4px}
  .produit-infos h2{font-size:30px;margin-bottom:8px}
  #produit-description{font-size:13px;line-height:1.5;margin-bottom:8px}
  #produit-atouts{gap:3px;margin-bottom:12px}#produit-atouts li{font-size:13px;line-height:1.45}#produit-atouts li:before{margin-top:7px;width:6px;height:6px}
  .produit-dims{padding:10px 14px;margin-bottom:10px}.produit-dims h3{font-size:10px;margin-bottom:4px}#produit-dimensions ul{font-size:13px;margin-bottom:2px}#produit-dimensions p{font-size:11px}
  .produit-mention{font-size:10.5px;line-height:1.45;margin-top:6px;padding-bottom:0}
  .produit-dialog>.produit-actions{position:static;display:flex;flex-wrap:wrap;gap:8px;padding:8px 14px 12px;background:none;border-top:1px solid var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}
  .produit-dialog>.produit-actions .button{flex:1 1 auto;width:auto;min-height:38px;padding:8px 12px;font-size:11px;line-height:1.3;justify-content:center;text-align:center}
}
/* Tablette : deux colonnes comme sur bureau, image un peu plus grande. */
@media(min-width:600px) and (max-width:860px){
  .produit-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .produit-galerie{padding:20px 18px 16px}
  #produit-image{max-height:min(42dvh,380px)}
  .produit-infos{padding:22px 24px 16px}
  .produit-infos h2{font-size:36px}
}
@media(prefers-reduced-motion:reduce){.produit-dialog.is-closing,.produit-dialog.is-closing::backdrop{animation:none}}

/* Tablette en paysage et portables peu hauts (large comme un bureau, moins de 840 px de haut) :
   deux colonnes conservées, image et textes resserrés, actions sous le contenu — la fiche tient sans défiler. */
@media(min-width:861px) and (max-height:840px){
  .produit-dialog{max-height:calc(100dvh - 24px)}
  .produit-galerie{padding:18px 20px 14px;gap:10px}
  .produit-scene{min-height:0}
  #produit-image{max-height:min(46dvh,380px)}
  .produit-thumbs button{width:60px;height:46px}
  .produit-infos{padding:26px 26px 12px}
  .produit-infos .eyebrow{margin-bottom:6px;font-size:10px}
  .produit-infos h2{font-size:clamp(32px,5vh,44px);margin-bottom:8px}
  #produit-description{font-size:14px;line-height:1.5;margin-bottom:10px}
  #produit-atouts{gap:4px;margin-bottom:12px}#produit-atouts li{font-size:14px;line-height:1.45}
  .produit-dims{padding:10px 14px;margin-bottom:10px}.produit-dims h3{font-size:10px;margin-bottom:4px}#produit-dimensions ul{font-size:13px;margin-bottom:2px}#produit-dimensions p{font-size:11px}
  .produit-mention{font-size:11px;line-height:1.45;margin-top:6px;padding-bottom:0}
  .produit-dialog>.produit-actions{position:static;padding:10px 20px 14px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-top:1px solid var(--line)}
  .produit-dialog>.produit-actions .button{min-height:40px;padding:9px 16px;font-size:11px}
}