/* =====================================================================
   QaLyZa, site C : pages d'application (applications/*.html) et Lya.
   Mise en page partagée, chargée après assets/site.css ; chaque page
   ajoute sa propre feuille (eqms.css, lims.css, mes.css, ems.css,
   ams.css, lya.css). L'accent de la page vient de <main data-app="…">.
     1. Ouverture : maquette cadrée, nom, cartouche
     2. En bref : l'application en quelques mots
     3. Bâtiments voisins : plan de situation
   ===================================================================== */

/* ---------- 1. Ouverture ---------- */
.tete-app { padding-bottom: clamp(36px, 4.5vw, 64px); }
.tete-app-grille {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "titre scene" "fiche scene";
  column-gap: clamp(24px, 4vw, 64px);
  row-gap: clamp(22px, 2.6vw, 34px);
  align-items: start;
}
.tete-app-titre { grid-area: titre; align-self: end; }
.tete-app-nom { max-width: 15ch; }
.tete-app-domaine {
  display: block; margin-top: 14px; max-width: 24ch;
  font-size: clamp(21px, 1.85vw, 28px); font-weight: 500; line-height: 1.22; letter-spacing: -0.014em;
}
.tete-app-titre .lede { margin-top: 22px; max-width: 46ch; }
.tete-app .tete-page-scene { grid-area: scene; align-self: center; }

/* Cartouche du bâtiment : le bloc-titre d'un jeu de plans */
.cartouche-app {
  grid-area: fiche; align-self: start;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  max-width: 540px;
  border: 1px solid color-mix(in srgb, var(--papier-encre) 42%, transparent);
  border-left: 3px solid var(--a);
  background: color-mix(in srgb, var(--papier) 82%, transparent);
  font-size: 14px; line-height: 1.45;
}
.cartouche-app > div { display: contents; }
.cartouche-app dt, .cartouche-app dd {
  padding: 9px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--papier-encre) 20%, transparent);
}
.cartouche-app dt { color: var(--texte-2); border-right: 1px solid color-mix(in srgb, var(--papier-encre) 20%, transparent); white-space: nowrap; }
.cartouche-app dd { font-weight: 500; }
.cartouche-app > div:last-child dt, .cartouche-app > div:last-child dd { border-bottom: 0; }

@media (max-width: 1023px) {
  .tete-app-grille { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titre" "scene" "fiche"; }
  .tete-app-nom { max-width: none; }
  .tete-app .tete-page-scene { margin-inline: calc(-1 * var(--gouttiere)); }
}
@media (max-width: 767px) {
  .cartouche-app { grid-template-columns: minmax(0, 1fr); }
  .cartouche-app dt { border-right: 0; border-bottom: 0; padding-bottom: 0; font-size: 13px; }
}

/* ---------- 2. En bref : l'application en quelques mots, sous l'ouverture ---------- */
.en-bref .lede { margin-top: 20px; }

/* ---------- 3. Bâtiments voisins : plan de situation et liste ---------- */
.situation { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.situation-plan { position: relative; }
.situation-plan .plan-site-svg .plan-bat { cursor: pointer; }
.situation-plan .plan-bat.est-estompe { opacity: .45; }
.situation .titre-2 { margin-bottom: clamp(24px, 3vw, 36px); }
.voisins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.voisin {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 14px; align-items: center;
  padding: 16px 18px; border-radius: 14px; border: 1px solid var(--trait-2);
  color: var(--texte); text-decoration: none;
  transition: border-color .25s, background-color .25s;
}
.voisin:hover { border-color: color-mix(in srgb, var(--a) 60%, transparent); background: color-mix(in srgb, var(--a) 9%, transparent); }
.voisin small { grid-column: 1 / -1; font-size: 13px; color: var(--texte-2); }
.voisin .q-icon { width: 48px; height: 48px; color: var(--a); border-radius: 12px; }
.voisin strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--texte); }
.voisin span { display: block; font-size: 13.5px; color: var(--texte-2); line-height: 1.35; }
.batiments-liste { margin-top: 22px; border-top: 1px solid var(--trait); }
.batiments-liste li { border-bottom: 1px solid var(--trait); }
.batiments-liste a, .batiments-liste .ici {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  min-height: 52px; padding: 6px 4px; color: var(--texte); text-decoration: none; font-size: 15px;
}
.batiments-liste a:hover strong { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in srgb, var(--a) 70%, transparent); }
.batiments-liste .q-icon { width: 32px; height: 32px; color: var(--a); border-radius: 8px; }
.batiments-liste strong { font-weight: 600; }
.batiments-liste em { font-style: normal; font-size: 13.5px; color: var(--texte-2); }
.batiments-liste .ici { color: var(--texte-2); }
.batiments-liste .ici em { color: var(--a-texte); font-weight: 600; }
@media (max-width: 1023px) { .situation { grid-template-columns: minmax(0, 1fr); } .situation-plan { max-width: 620px; } }
@media (max-width: 559px) {
  .batiments-liste a, .batiments-liste .ici { grid-template-columns: 32px minmax(0, 1fr); row-gap: 0; padding-block: 8px; }
  .batiments-liste em { grid-column: 2; }
}
@media (max-width: 559px) { .voisins { grid-template-columns: minmax(0, 1fr); } }


/* ---------- La maquette de « En bref » (maquette-en-bref.js) ----------
   Le bâtiment de l'application aux murs de verre ; glisser le fait pivoter.
   Sa légende reprend les couleurs de la scène (--couleur sur chaque ligne). */
.maquette-en-bref { margin-top: clamp(28px, 4vw, 48px); }
.maquette-en-bref-scene { position: relative; height: clamp(320px, 46vw, 600px); touch-action: pan-y; cursor: grab; }
.maquette-en-bref-scene.est-glisse { cursor: grabbing; }
.maquette-en-bref-toile { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.maquette-legende { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 10px; font-size: 14.5px; font-weight: 500; }
.maquette-legende li { display: inline-flex; align-items: center; gap: 9px; }
.maquette-legende li::before {
  content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--couleur); box-shadow: 0 0 0 3px color-mix(in srgb, var(--couleur) 25%, transparent);
}