/* ============================================================
   SCÈNE 1 — PORTE D'ENTRÉE
   Architecture : image bitmap photoréaliste (Imagen 3, exportée
   en WebP) + overlay SVG interactif au-dessus pour les éléments
   nets ou animables (enseigne wordmark, porte cliquable, branche
   d'olivier en parallax).
   Références visuelles : Loro Piana Place Vendôme, Hermès
   Faubourg Saint-Honoré, Maison Goyard rue Saint-Honoré.
   ============================================================ */


/* ============================================================
   00 · CONTENEUR SCÈNE
   ============================================================ */

.scene--devanture {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--color-bg);
  display: grid;
  grid-template-rows: 1fr auto;
}

.scene--devanture .scene__camera {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;     /* hérite le 100vh du parent .scene — sans ça,
                              les enfants en position:absolute font collapser
                              la grid cell `1fr` à 0 → page blanche. */
  overflow: hidden;
}

.scene--devanture .scene__stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
}


/* ============================================================
   01 · COUCHE PHOTO — image bitmap pleine zone
   Cadrage desktop : 16:9 (paysage)
   Cadrage mobile  : 9:16 (portrait, plus serré sur la porte)
   ============================================================ */

.dev-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  /* Placeholder visuel pendant le développement, avant placement
     des fichiers WebP. Disparaît dès qu'une image charge. */
  background:
    radial-gradient(ellipse 70% 80% at 78% 38%,
      rgba(212, 175, 122, 0.34) 0%,
      rgba(212, 175, 122, 0.10) 45%,
      transparent 75%
    ),
    linear-gradient(180deg,
      var(--blanc) 0%,
      #F8EFD8 22%,
      #EFE5D0 55%,
      #DCCFB4 100%
    );
}

.dev-photo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cadrage desktop par défaut : centre vertical, légèrement bas
     pour que la porte tombe dans le tiers inférieur. */
  object-position: 50% 60%;
  display: block;
}

@media (max-width: 767px) {
  .dev-photo__img {
    /* Mobile : on remonte le cadrage pour que la porte reste
       au-dessus du CTA sticky-bottom. */
    object-position: 50% 50%;
  }
}


/* ============================================================
   02 · COUCHE OVERLAY — éléments interactifs au-dessus de la photo
   Reçoit la branche d'olivier (parallax) et la zone porte.
   pointer-events: none par défaut, activés sur les enfants cliquables.
   ============================================================ */

.dev-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.dev-overlay > * {
  pointer-events: auto;
}


/* ============================================================
   03 · ZONE PORTE — calage pixel-perfect sur la porte de l'image
   Les CSS variables ci-dessous définissent la boîte porte en %
   par rapport au stage. Convention : (left, top) = coin haut-gauche
   de la zone porte ; width, height = dimensions de la zone.
   Valeurs initiales basées sur l'image porte d'entrée v1, à affiner en preview.
   ============================================================ */

.dev-door-zone {
  position: absolute;

  /* DESKTOP : porte centrée H, base à 80 % du frame, hauteur 60 %,
     largeur 11 % → top à 20 %, left à 44.5 %. */
  --door-left: 44.5%;
  --door-top: 20%;
  --door-width: 11%;
  --door-height: 60%;

  left: var(--door-left);
  top: var(--door-top);
  width: var(--door-width);
  height: var(--door-height);
  z-index: 4;
}

@media (max-width: 767px) {
  .dev-door-zone {
    /* MOBILE : porte centrée H, base à 76 % du frame, hauteur 65 %,
       largeur 45 % → top à 11 %, left à 27.5 %. */
    --door-left: 27.5%;
    --door-top: 11%;
    --door-width: 45%;
    --door-height: 65%;
  }
}


/* ============================================================
   04 · PORTE — bouton cliquable, 3 panneaux moulurés, poignée laiton
   Calée sur toute la zone porte (.dev-door-zone), centrée par défaut.
   ============================================================ */

.dev-door {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  /* Drop-shadow pour décoller la porte de l'image */
  filter: drop-shadow(0 4px 8px rgba(58, 48, 36, 0.22));
  transition:
    transform var(--duration-base) var(--ease-out-soft),
    filter var(--duration-base) var(--ease-out-soft);
}

.dev-door__panel {
  position: relative;
  width: 100%;
  height: 100%;
  /* Chêne foncé saturé. À harmoniser avec la teinte rendue dans
     l'image bitmap une fois celle-ci en place. */
  background:
    linear-gradient(180deg,
      rgba(255, 245, 220, 0.18) 0%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.20) 100%
    ),
    linear-gradient(90deg,
      #6B4F30 0%,
      #8A6A45 50%,
      #6B4F30 100%
    );
  border: 2px solid #4A3520;
  border-radius: 2px 2px 0 0;
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 235, 200, 0.15);
  transition:
    box-shadow var(--duration-base) var(--ease-out-soft);
}

/* 3 panneaux moulurés : top, middle, bottom */
.dev-door__panels {
  position: absolute;
  inset: 14% 14% 14% 14%;
  display: grid;
  grid-template-rows: 1fr 1fr 0.85fr;
  gap: 6%;
  pointer-events: none;
}

.dev-door__panel-rect {
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-top-color: rgba(0, 0, 0, 0.55);
  border-left-color: rgba(0, 0, 0, 0.55);
  border-right-color: rgba(255, 230, 200, 0.10);
  border-bottom-color: rgba(255, 230, 200, 0.08);
  border-radius: 1px;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.30),
    inset 0 -1px 0 rgba(255, 230, 200, 0.10);
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.10) 0%,
    transparent 30%,
    transparent 70%,
    rgba(0, 0, 0, 0.18) 100%
  );
}

/* Poignée laiton verticale, à hauteur de main (~45 % du haut) */
.dev-door__handle {
  position: absolute;
  right: clamp(6px, 5%, 14px);
  top: 45%;
  transform: translateY(-50%);
  width: 5px;
  height: clamp(38px, 9%, 70px);
  background: linear-gradient(180deg,
    #DCB988 0%,
    #C9A875 25%,
    #A88B5C 55%,
    #8A6E40 100%
  );
  border-radius: var(--radius-pill);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    inset 1px 0 0 rgba(255, 245, 220, 0.55),
    inset -1px 0 0 rgba(0, 0, 0, 0.20);
  pointer-events: none;
  z-index: 2;
}

/* États hover / focus / sync depuis le CTA */
.dev-door:hover .dev-door__panel,
.dev-door:focus-visible .dev-door__panel,
.dev-door--highlight .dev-door__panel {
  box-shadow:
    inset 0 0 60px rgba(255, 220, 160, 0.20),
    inset 0 0 40px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 235, 200, 0.20),
    0 0 60px rgba(212, 175, 122, 0.24);
}

.dev-door:hover,
.dev-door--highlight {
  transform: translateY(-1px);
  filter: drop-shadow(0 8px 16px rgba(58, 48, 36, 0.32));
}

.dev-door:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 6px;
}

.dev-door:active .dev-door__panel {
  transform: scale(0.997);
}


/* ============================================================
   04b · DOOR HINT — texte UX laiton "Pousser la porte →"
   Indication visuelle discrète flottant au-dessus de la zone porte
   pour signaler la cliquabilité (Cyril a constaté en test mobile
   que les visuels seuls étaient ambigus).
   - Couleur laiton (#D4AF7A) cohérent avec la plaque DUVEA
   - Ombre dark pour lisibilité sur photo
   - Fade-in unique à 1.5 s (pas de pulse, esthétique premium)
   - pointer-events: none pour ne pas bloquer le clic sur la porte
   - aria-hidden: le bouton porte déjà l'aria-label complet
   ============================================================ */

.dev-door-plaque {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Décalage horizontal pour poser la plaque sur l'axe réel de la
     porte du bitmap desktop (.dev-door-zone est centrée à 50 % du
     stage, la porte est plus à droite). Une seule valeur suffit pour
     la vue large ET la vue zoomée : le zoom est un scale(4) uniforme
     sur .scene__camera qui contient photo + plaque.
     Valeur calée empiriquement par le DG (Vague 2.0.1). */
  margin-left: 7vh;
  /* Largeur calée sur le texte gravé : "DÉCOUVRIR LA BOUTIQUE →"
     mesure ~163 px (Manrope 600, 11 px) ; 196 px laisse une marge
     interne symétrique qui dégage les 4 vis d'angle. */
  width: 196px;
  height: 48px;
  border-radius: 3px;
  z-index: 5;
  pointer-events: none;

  /* Laiton brossé : stries verticales + gradient lumiere/ombre +
     gradient diagonal. Recycle directement le langage visuel de
     .dev-plaque (Duvea Made in France) en format horizontal. */
  background:
    repeating-linear-gradient(180deg,
      rgba(255, 245, 215, 0.06) 0,
      rgba(255, 245, 215, 0.06) 1px,
      transparent 1px,
      transparent 2px
    ),
    linear-gradient(180deg,
      rgba(255, 250, 230, 0.22) 0%,
      transparent 30%,
      transparent 70%,
      rgba(0, 0, 0, 0.10) 100%
    ),
    linear-gradient(135deg,
      #B8945F 0%,
      #D4AF7A 50%,
      #B8945F 100%
    );

  border-top:    0.5px solid rgba(255, 250, 230, 0.55);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.28);
  border-left:   0.5px solid rgba(255, 250, 230, 0.30);
  border-right:  0.5px solid rgba(0, 0, 0, 0.18);

  box-shadow:
    inset  1px  1px 0 rgba(255, 250, 230, 0.45),
    inset -1px -1px 0 rgba(0, 0, 0, 0.18),
    0 4px 12px rgba(58, 48, 36, 0.22),
    0 1px 3px rgba(58, 48, 36, 0.16);

  display: flex;
  align-items: center;
  justify-content: center;

  /* Visible des le chargement — c'est une plaque physique gravee
     dans le metal, pas une notification qui apparait. Seule la
     pulsation discrete signale qu'elle est cliquable. */
  opacity: 1;
  animation: dev-door-plaque-pulse 2.4s ease-in-out 800ms infinite;

  transition: transform 220ms var(--ease-out-soft),
              box-shadow 220ms var(--ease-out-soft);
}

/* Vis aux 4 coins — radial gradient brun, identique a .dev-plaque */
.dev-door-plaque__screw {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    #8B6F47 0%,
    #6B5234 60%,
    #3A2E1A 100%
  );
  box-shadow:
    inset  1px  1px 1px rgba(255, 245, 215, 0.30),
    inset -1px -1px 1px rgba(0, 0, 0, 0.40),
    0 0.5px 0.5px rgba(0, 0, 0, 0.35);
}
.dev-door-plaque__screw--tl { top: 6px;    left: 8px; }
.dev-door-plaque__screw--tr { top: 6px;    right: 8px; }
.dev-door-plaque__screw--bl { bottom: 6px; left: 8px; }
.dev-door-plaque__screw--br { bottom: 6px; right: 8px; }

/* Texte grave : Manrope 600 capitales, brun fonce pour contraster
   avec le fond laiton clair, double text-shadow pour effet "grave
   dans le metal" coherent avec la plaque Duvea. */
.dev-door-plaque__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3A2E1A;
  text-shadow:
    0 1px 0 rgba(255, 250, 230, 0.45),
    0 -1px 0 rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}

.dev-door-plaque__arrow {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  transform: translateY(-1px);
  transition: transform 220ms var(--ease-out-soft);
}

/* Hover via le parent cliquable (.dev-door-zone englobe la porte
   et la plaque). Leger lift + ombre plus marquee + fleche qui
   avance d'un cheveu. */
.dev-door-zone:hover .dev-door-plaque,
.dev-door-zone:focus-within .dev-door-plaque {
  transform: translate(-50%, calc(-50% - 2px));
  box-shadow:
    inset  1px  1px 0 rgba(255, 250, 230, 0.55),
    inset -1px -1px 0 rgba(0, 0, 0, 0.22),
    0 8px 20px rgba(58, 48, 36, 0.28),
    0 2px 4px rgba(58, 48, 36, 0.20);
}
.dev-door-zone:hover .dev-door-plaque__arrow,
.dev-door-zone:focus-within .dev-door-plaque__arrow {
  transform: translate(3px, -1px);
}

/* Pulsation tres discrete — halo laiton qui s'expand puis disparait,
   en complement de l'ombre portee de base (inset + drop shadow). */
@keyframes dev-door-plaque-pulse {
  0%, 100% {
    box-shadow:
      inset  1px  1px 0 rgba(255, 250, 230, 0.45),
      inset -1px -1px 0 rgba(0, 0, 0, 0.18),
      0 4px 12px rgba(58, 48, 36, 0.22),
      0 1px 3px rgba(58, 48, 36, 0.16),
      0 0 0 0 rgba(212, 175, 122, 0.45);
  }
  50% {
    box-shadow:
      inset  1px  1px 0 rgba(255, 250, 230, 0.45),
      inset -1px -1px 0 rgba(0, 0, 0, 0.18),
      0 4px 12px rgba(58, 48, 36, 0.22),
      0 1px 3px rgba(58, 48, 36, 0.16),
      0 0 0 14px rgba(212, 175, 122, 0);
  }
}

@media (max-width: 767px) {
  .dev-door-plaque {
    /* Mobile : pas de decalage signale (cadrage bitmap mobile centre).
       On annule le shift desktop pour revenir a un centrage parfait. */
    margin-left: 0;
    width: 212px;
    height: 42px;
    top: 50%;
  }
  .dev-door-plaque__label {
    font-size: 11px;
    letter-spacing: 0.10em;
    gap: 6px;
  }
  .dev-door-plaque__arrow { font-size: 13px; }
  .dev-door-plaque__screw { width: 5px; height: 5px; }
  .dev-door-plaque__screw--tl { top: 5px;    left: 6px; }
  .dev-door-plaque__screw--tr { top: 5px;    right: 6px; }
  .dev-door-plaque__screw--bl { bottom: 5px; left: 6px; }
  .dev-door-plaque__screw--br { bottom: 5px; right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .dev-door-plaque {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: none;
  }
  .dev-door-zone:hover .dev-door-plaque,
  .dev-door-zone:focus-within .dev-door-plaque {
    transform: translate(-50%, -50%);
  }
}


/* ============================================================
   05 · PLAQUE LAITON — style cabinet d'avocat parisien Place Vendôme
   Petite plaque rectangulaire fixée sur la pierre à droite de la porte,
   à hauteur de la poignée laiton. Laiton brossé + 4 micro-vis aux coins
   + ombre portée + wordmark Duvéa coloré (Fraunces 700 bleu marine) +
   drapeau ondulé tricolore + Made in France.
   Position calable via CSS variables --plaque-right/top/width.
   Ratio plaque ~80×110 (vertical, format authentique).
   ============================================================ */

.dev-plaque {
  /* DESKTOP : plaque sur la pierre nue du mur droit, dégagée de
     l'encadrement de porte (~160 px de respiration sur frame 1920 px).
     - right 30 % : plaque entre 65.5 % et 70 % du frame depuis la gauche,
                    l'encadrement de porte allant jusqu'à ~57 % → ~8.5 %
                    du frame d'air entre la plaque et l'encadrement
     - top 39 %   : centre vertical sur la pierre du mur, légèrement
                    au-dessus du centre poignée (lecture confortable) */
  --plaque-right: 30%;
  --plaque-top: 39%;
  --plaque-width: 4.5%;

  position: absolute;
  right: var(--plaque-right);
  top: var(--plaque-top);
  width: var(--plaque-width);
  aspect-ratio: 80 / 110;
  z-index: 4;
  pointer-events: none;
  border-radius: 1.5px;

  /* Laiton brossé : stries verticales très subtiles + bandes
     horizontales lumière/ombre + gradient principal #B8945F → #D4AF7A */
  background:
    repeating-linear-gradient(180deg,
      rgba(255, 245, 215, 0.06) 0,
      rgba(255, 245, 215, 0.06) 1px,
      transparent 1px,
      transparent 2px
    ),
    linear-gradient(180deg,
      rgba(255, 250, 230, 0.22) 0%,
      transparent 30%,
      transparent 70%,
      rgba(0, 0, 0, 0.10) 100%
    ),
    linear-gradient(135deg,
      #B8945F 0%,
      #D4AF7A 50%,
      #B8945F 100%
    );

  /* Bord biseauté : haut clair (lumière du dessus), bas plus sombre */
  border-top:    0.5px solid rgba(255, 250, 230, 0.55);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.28);
  border-left:   0.5px solid rgba(255, 250, 230, 0.30);
  border-right:  0.5px solid rgba(0, 0, 0, 0.18);

  /* Reliefs intérieurs + ombre portée sur la pierre */
  box-shadow:
    inset  1px  1px 0 rgba(255, 250, 230, 0.45),
    inset -1px -1px 0 rgba(0, 0, 0, 0.18),
    0 2px 4px rgba(58, 48, 36, 0.32),
    0 1px 2px rgba(58, 48, 36, 0.20);
}

@media (max-width: 767px) {
  .dev-plaque {
    /* MOBILE : cadrage serré (porte 45 % du frame, encadrement à ~75 %).
       - right 8 %  : plaque entre 78 % et 92 % du frame depuis la gauche
                      → ~42 px d'air entre l'encadrement et la plaque
                      sur frame 768 px (le mur droit dispo est étroit)
       - top 27 %   : remontée pour centrer sur la pierre du mur */
    --plaque-right: 8%;
    --plaque-top: 27%;
    --plaque-width: 14%;
  }
}

/* Vis aux 4 coins — petit dégradé radial pour effet "tête de vis fendue"
   très simplifié (pas de fente visible à cette taille, juste un point
   métallique foncé). */
.dev-plaque__screw {
  position: absolute;
  width: 9%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    #8B6F47 0%,
    #6B5234 60%,
    #3A2E1A 100%
  );
  box-shadow:
    inset  1px  1px 1px rgba(255, 245, 215, 0.30),
    inset -1px -1px 1px rgba(0, 0, 0, 0.40),
    0 0.5px 0.5px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.dev-plaque__screw--tl { top: 6%;    left: 7%; }
.dev-plaque__screw--tr { top: 6%;    right: 7%; }
.dev-plaque__screw--bl { bottom: 6%; left: 7%; }
.dev-plaque__screw--br { bottom: 6%; right: 7%; }

/* Modifier .logo--plaque — override du composant .logo (components.css)
   pour ce contexte : disposition verticale (wordmark / drapeau / MIF),
   tailles minuscules adaptées à la plaque. Le bleu marine, la Fraunces 700
   et la Manrope 600 viennent du composant de base. */
.logo--plaque {
  position: absolute;
  inset: 14% 6% 14% 6%;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 4%;
  filter: none;          /* neutralise un éventuel drop-shadow hérité */
}

.logo--plaque .logo-n {
  font-size: clamp(10px, 1.1vw, 18px);
  /* Léger relief "imprimé sur laiton" : highlight crème en dessous */
  text-shadow: 0 1px 0 rgba(255, 250, 230, 0.40);
}

.logo--plaque .logo-flag-wrap {
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, 0.3vw, 4px);
  margin-left: 0;
}

.logo--plaque .logo-flag svg {
  /* Drapeau ~25-30 % de la largeur du wordmark Duvéa */
  width: clamp(14px, 1.4vw, 22px);
  height: auto;
  display: block;
  filter: var(--shadow-flag-duvea);
}

.logo--plaque .logo-mif {
  font-size: clamp(5px, 0.45vw, 8px);
  letter-spacing: var(--tracking-mif);
  opacity: 0.85;
}

@media (max-width: 767px) {
  .logo--plaque .logo-n {
    font-size: clamp(13px, 3vw, 22px);
  }
  .logo--plaque .logo-flag svg {
    width: clamp(18px, 4vw, 28px);
  }
  .logo--plaque .logo-mif {
    font-size: clamp(6px, 1.2vw, 9px);
  }
}


/* ============================================================
   06 · ANIMATION ZOOM CAMÉRA (J5) — CSS pur, pas de GSAP
   Principe : la porte reste fermée et nette pendant toute l'animation.
   La caméra (.scene__camera) zoome très fort (scale 4×) sur la porte,
   en parallèle un voile doré full-screen recouvre l'écran. Navigation
   vers maison.html déclenchée à 2.7 s pour éviter tout flash.
   ============================================================ */

/* État zoom : déclenché par scene-devanture.js qui ajoute la classe
   .is-zooming sur .scene--devanture (root). Le scale s'applique au
   conteneur caméra, donc l'image bitmap + tous les overlays SVG (porte,
   plaque) zooment ensemble — la porte reste donc nette tout du long. */
.scene--devanture .scene__camera {
  /* Origine du zoom : centre horizontal, 60 % de la hauteur (= centre
     vertical de la porte de l'image bitmap, qui tombe dans le tiers
     inférieur à cause de object-position: 50% 60%). */
  transform-origin: 50% 60%;
  transition: transform 3000ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* will-change ne sera ajouté en JS que pendant l'animation puis retiré,
   pour éviter de créer un compositing layer permanent qui peut causer
   des artefacts de rendu (l'image bitmap était cachée avec
   will-change: transform actif au repos sur certaines configs). */

.scene--devanture.is-zooming .scene__camera {
  transform: scale(4);
}

@media (max-width: 767px) {
  .scene--devanture.is-zooming .scene__camera {
    /* Mobile : scale 3× (4× est trop fort sur petit viewport et coûteux
       côté GPU sur appareil bas-de-gamme). */
    transform: scale(3);
  }
}

/* Voile doré full-screen — recouvre toute la fenêtre en fin d'animation.
   opacity 0 au repos, 1 quand la classe .is-zooming est active.
   La transition démarre avec un délai pour overlap les 1.5 dernières
   secondes du zoom (transition-delay 1.5s + duration 1.5s = fini à 3 s). */
.dev-fade-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    rgba(200, 153, 104, 1.00) 0%,    /* var(--ocre) */
    rgba(170, 130, 85, 0.98) 50%,
    rgba(130, 95, 55, 0.95) 100%
  );
  transition: opacity 1500ms cubic-bezier(0.4, 0, 0.2, 1) 1500ms;
}

.scene--devanture.is-zooming .dev-fade-overlay {
  opacity: 1;
}

/* prefers-reduced-motion : pas de zoom cinématique. Le JS gère le fade
   body 250 ms à la place. On désactive la transition zoom pour éviter
   tout artefact. */
@media (prefers-reduced-motion: reduce) {
  .scene--devanture .scene__camera,
  .dev-fade-overlay {
    transition: none;
  }
  .scene--devanture.is-zooming .scene__camera {
    transform: none;
  }
}


/* ============================================================
   07 · CTA — bouton "Entrer dans la boutique"
   ============================================================ */

.dev-cta-wrap {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: clamp(28px, 4vh, 48px) var(--space-5);
}

.dev-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.dev-cta__arrow {
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-out-soft);
}

.dev-cta:hover .dev-cta__arrow {
  transform: translateX(4px);
}

/* ----------------------------------------------------------------
   Bouton SECONDAIRE — "Voir le site duvea.fr"
   Variante outline laiton sur fond crème translucide (effet verre
   dépoli pour rester lisible sur le fond clair de la devanture).
   Hiérarchie inférieure au CTA primaire ("Entrer dans la boutique").
   ---------------------------------------------------------------- */

.dev-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: var(--tracking-wide);
  color: var(--bleu);
  background: rgba(246, 240, 231, 0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 2px solid var(--ocre);
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--duration-fast) var(--ease-out-soft),
    color var(--duration-fast) var(--ease-out-soft),
    border-color var(--duration-fast) var(--ease-out-soft);
}

.dev-cta-secondary:hover,
.dev-cta-secondary:focus-visible {
  background: rgba(200, 153, 104, 0.20);
  color: var(--bleu);
  border-color: var(--ocre);
  outline: none;
}

.dev-cta-secondary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .dev-cta-secondary { transition: none; }
}

/* Pulse synchro hover porte ⇄ CTA */
.dev-cta--synced {
  animation: cta-pulse var(--duration-medium) var(--ease-out-soft) infinite alternate;
}

@keyframes cta-pulse {
  from {
    box-shadow: 0 0 0 0 rgba(11, 37, 69, 0);
    transform: translateY(0);
  }
  to {
    box-shadow: 0 0 0 6px rgba(11, 37, 69, 0.10);
    transform: translateY(-1px);
  }
}

/* Mobile : sticky-bottom + safe-area-inset */
@media (max-width: 767px) {
  .dev-cta-wrap {
    position: sticky;
    bottom: 0;
    padding: var(--space-4) var(--space-5)
             calc(var(--space-4) + env(safe-area-inset-bottom));
    background: linear-gradient(180deg,
      rgba(255, 252, 247, 0) 0%,
      rgba(255, 252, 247, 0.85) 30%,
      rgba(255, 252, 247, 0.97) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}


/* ============================================================
   08 · APPARITION INITIALE — fade CSS pur
   La classe .is-loading (présente dans le HTML au load) maintient
   opacity:0 sur photo/overlay/CTA. scene-devanture.js la retire dès
   le boot, ce qui déclenche la transition opacity en 800 ms.
   NB : on n'utilise plus GSAP ici — tl.from() figeait les éléments à
   opacity:0 sans progresser la timeline (cause à investiguer).
   ============================================================ */

.dev-photo,
.dev-overlay,
.dev-cta-wrap {
  transition: opacity 800ms var(--ease-out-soft);
}

.scene--devanture.is-loading .dev-photo,
.scene--devanture.is-loading .dev-overlay,
.scene--devanture.is-loading .dev-cta-wrap {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .dev-photo,
  .dev-overlay,
  .dev-cta-wrap {
    transition: none;
  }
  .scene--devanture.is-loading .dev-photo,
  .scene--devanture.is-loading .dev-overlay,
  .scene--devanture.is-loading .dev-cta-wrap {
    opacity: 1 !important;
  }

  .dev-cta--synced {
    animation: none !important;
  }
}


/* ============================================================
   09 · SKIP LINK
   ============================================================ */

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  z-index: var(--z-toast);
  transition: top var(--duration-fast) var(--ease-out-soft);
}

.skip-link:focus {
  top: var(--space-4);
}