/* ==========================================================================
   Section « demonstration » : votre entreprise change, votre site suit
   Aperçu du site fictif à gauche (cadre à filet fin, défilement interne),
   aide guidée de BIVO à droite (photo, message, trois demandes). Palette :
   noir, blanc, un seul brun (--accent) pour le repère de sélection et la
   mise en évidence brève. Tout est scopé sous #demonstration.
   ========================================================================== */

#demonstration .demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 36%, 420px);
  align-items: stretch;
}

/* --------------------------------------------------------------------------
   Aperçu (gauche)
   -------------------------------------------------------------------------- */
#demonstration .demo-apercu {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-right: clamp(20px, 2.4vw, 36px);
}

/* Même hauteur que la tête de l'aide guidée : un seul filet traverse la scène */
#demonstration .demo-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px 16px;
  flex: 0 0 auto;
  min-height: 72px;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
#demonstration .demo-tete-note { line-height: 1.5; text-wrap: balance; }
#demonstration .demo-compteur {
  margin-left: auto;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#demonstration .demo-cadre {
  position: relative;
  height: min(760px, calc(100dvh - var(--bar-h) - 160px));
  min-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  background: var(--bg);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
#demonstration .demo-cadre::-webkit-scrollbar { width: 8px; }
#demonstration .demo-cadre::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 999px; }
#demonstration .demo-cadre:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
/* Cale de défilement : espace réservé au bas de la maquette, seulement quand
   le cadre dépasse sous le pli et que la zone modifiée ne pourrait pas
   remonter dans sa partie visible (valeur posée par le script, 0 sinon).
   Aucune transition : en mouvement réduit, base.css donne 0,01 ms à toute
   transition, ce qui retarderait la cale d'une image et bornerait le
   défilement instantané à l'ancien maximum. */
#demonstration .demo-cadre .bsite-frame {
  padding-bottom: var(--demo-cale, 0px);
  transition: none;
}

/* --------------------------------------------------------------------------
   Changements dans la maquette (appliqués en place)
   -------------------------------------------------------------------------- */
/* 1. Photo du héros : recouvre le plan d'architecte, fondu d'entrée et de sortie */
#demonstration .bs-hero-media .demo-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  opacity: 1;
  transition: opacity 320ms var(--ease-out);
}
#demonstration .bs-hero-media .demo-photo.demo-entre,
#demonstration .bs-hero-media .demo-photo.demo-sort { opacity: 0; }

/* 2. Nouveau service : apparition discrète. Avec quatre services, la grille
   passe à quatre colonnes quand la maquette est assez large (600 px de
   conteneur et plus) : les trois services existants ne bougent pas, Terrasse
   s'ajoute à leur droite. En dessous, deux par deux ; sous 520 px, une colonne
   (comme le reste de la maquette). */
#demonstration .bsite .bs-service {
  transition:
    border-color 320ms var(--ease-out),
    opacity 320ms var(--ease-out),
    transform 320ms var(--ease-out);
}
#demonstration .bsite .bs-service.demo-entre { opacity: 0; transform: translateY(10px); }
#demonstration .bsite .bs-services.demo-services--quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container (max-width: 599px) {
  #demonstration .bsite .bs-services.demo-services--quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 520px) {
  #demonstration .bsite .bs-services.demo-services--quatre { grid-template-columns: 1fr; }
}

/* Mise en évidence de la zone modifiée : contour 1 px brun et léger voile,
   qui s'estompent en 1 200 ms (classe retirée à la fin). */
#demonstration .demo-flash {
  position: relative;
  outline: 1px solid var(--accent);
  outline-offset: -1px;
  animation: demo-flash-contour 1200ms var(--ease-out) both;
}
#demonstration .demo-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  animation: demo-flash-voile 1200ms var(--ease-out) both;
}
/* Nouveau service : le bloc n'a pas de marge interne, le contour prend un peu d'air */
#demonstration .bs-service.demo-flash { outline-offset: 6px; }
#demonstration .bs-service.demo-flash::after { inset: -6px; }
/* Mouvement réduit : contour fixe, aucune animation, retiré après 1 200 ms */
#demonstration .demo-flash--fixe,
#demonstration .demo-flash--fixe::after { animation: none; }
#demonstration .demo-flash--fixe { outline-color: var(--accent); }
#demonstration .demo-flash--fixe::after { opacity: 0.1; }
@keyframes demo-flash-contour {
  0%, 55% { outline-color: var(--accent); }
  100% { outline-color: transparent; }
}
@keyframes demo-flash-voile {
  0% { opacity: 0.16; }
  100% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Aide guidée (droite)
   -------------------------------------------------------------------------- */
#demonstration .demo-aide {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--line);
  padding-left: clamp(20px, 2.4vw, 32px);
  container: demo-aide / inline-size;
}
#demonstration .demo-aide-tete {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex: 0 0 auto;
  min-height: 72px;
  border-bottom: 1px solid var(--line);
}
/* BIVO : photo détourée, sans cadre, ancrée au bas de sa zone (la coupe du
   buste repose sur le filet). */
#demonstration .demo-bivo {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 72px;
  overflow: hidden;
}
#demonstration .demo-bivo img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: auto;
  max-width: none;
  -webkit-user-drag: none;
  user-select: none;
}
#demonstration .demo-aide-texte { padding-bottom: 14px; min-width: 0; }
#demonstration .demo-nom {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.1em;
  line-height: 1;
  margin-bottom: 7px;
}

#demonstration .demo-message {
  flex: 0 0 auto;
  min-height: 48px;
  margin: 20px 0 22px;
  color: var(--fg);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}
#demonstration .demo-message.is-nouveau { animation: demo-message 260ms var(--ease-out) both; }
@keyframes demo-message {
  0% { opacity: 0.25; transform: translateY(3px); }
  100% { opacity: 1; transform: none; }
}

/* Trois demandes : boutons empilés pleine largeur, séparés par des filets */
#demonstration .demo-demandes {
  display: grid;
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
}
#demonstration .demo-demande {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 14px 12px 14px 18px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
/* Repère de sélection : filet brun à gauche */
#demonstration .demo-demande::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: 50% 50%;
  transition: transform var(--dur-fast) var(--ease-out);
}
#demonstration .demo-demande[aria-pressed="true"]::before { transform: scaleY(1); }
#demonstration .demo-demande:hover { border-bottom-color: var(--line-strong); }
#demonstration .demo-demande:hover .demo-libelle {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
}
#demonstration .demo-demande:focus-visible {
  z-index: 1;
  outline: 2px solid var(--fg);
  outline-offset: 2px;
  border-radius: 2px;
}
#demonstration .demo-num {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
#demonstration .demo-libelle { font-weight: 500; }
#demonstration .demo-etiquette {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--fg);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
#demonstration .demo-demande[aria-pressed="true"] .demo-etiquette { opacity: 1; }

/* Colonne d'aide étroite (portable 900 à 1100 px, petits téléphones) : le
   libellé garde sa ligne entière et l'étiquette « Appliquée » prend place
   dessous, sur une seconde rangée réservée (aucun déplacement à l'appui). */
@container demo-aide (max-width: 350px) {
  #demonstration .demo-demande {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 2px;
    align-items: start;
  }
  #demonstration .demo-num { grid-row: 1 / span 2; align-self: start; padding-top: 3px; }
  #demonstration .demo-libelle { grid-column: 2; grid-row: 1; }
  #demonstration .demo-etiquette { grid-column: 2; grid-row: 2; justify-self: start; }
}

/* Commande « Réinitialiser » : focus blanc, cible de 44 px au toucher */
#demonstration [data-controls="demonstration"] .lab-btn:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}
@media (pointer: coarse) {
  #demonstration [data-controls="demonstration"] .lab-btn { height: 44px; padding: 0 18px; }
}

/* --------------------------------------------------------------------------
   Portable et tablette en paysage (900 à 1100 px) : colonnes rapprochées
   -------------------------------------------------------------------------- */
@media (max-width: 1099px) {
  #demonstration .demo-apercu { padding-right: 20px; }
  #demonstration .demo-aide { padding-left: 20px; }
}

/* --------------------------------------------------------------------------
   Mobile : aperçu en haut (environ 48 vh, défilement interne), aide guidée
   en dessous, les trois demandes entièrement visibles
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  #demonstration .demo { grid-template-columns: minmax(0, 1fr); }
  #demonstration .demo-apercu { padding-right: 0; }
  #demonstration .demo-tete { min-height: 56px; padding-bottom: 12px; margin-bottom: 14px; }
  #demonstration .demo-cadre {
    height: 48vh;
    height: 48dvh;
    min-height: 280px;
    max-height: 520px;
  }
  #demonstration .demo-aide {
    margin-top: 28px;
    border-left: 0;
    padding-left: 0;
  }
  #demonstration .demo-aide-tete { min-height: 64px; gap: 12px; }
  #demonstration .demo-bivo { width: 56px; height: 64px; }
  #demonstration .demo-bivo img { width: 56px; }
  #demonstration .demo-aide-texte { padding-bottom: 12px; }
  #demonstration .demo-nom { font-size: 14px; margin-bottom: 6px; }
  #demonstration .demo-message { margin: 16px 0 18px; font-size: 15px; min-height: 0; }
  #demonstration .demo-demande { min-height: 52px; padding: 12px 10px 12px 16px; font-size: 15px; }
  #demonstration [data-controls="demonstration"] .lab-btn { height: 44px; padding: 0 18px; }
}

/* --------------------------------------------------------------------------
   Mouvement réduit : aucune animation continue, transitions quasi instantanées
   (base.css ramène déjà toutes les durées à 0,01 ms)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #demonstration .demo-message.is-nouveau { animation: none; }
}

/* ---- Coût selon le barème, à confirmer (démonstration) ---- */
#demonstration .demo-cout { display: grid; gap: 8px; margin-top: 16px; padding: 16px 18px; border: 1px solid var(--accent); border-radius: 10px; outline: none; }
#demonstration .demo-cout[hidden] { display: none; }
#demonstration .demo-cout-libelle { color: var(--fg); font-size: 14px; line-height: 1.5; }
#demonstration .demo-cout-montant { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; }
#demonstration .demo-cout-note { color: var(--muted); font-size: 13px; line-height: 1.5; }
#demonstration .demo-cout-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
#demonstration .demo-cout-actions .btn { min-height: 44px; }
#demonstration .demo-annuler { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
#demonstration .demo-demande[aria-expanded="true"] { border-color: var(--accent); }