/* =====================================================================
   QaLyZa, site C : accueil (index.html). Mise en page propre à la page ;
   les composants viennent de assets/site.css.
     1. Hero : la maquette, son texte, sa légende
     2. Échanges
     3. BPF et dossier de validation
     4. Référentiels
     5. Lya
   ===================================================================== */

/* ---------- 1. Hero : la maquette en plein cadre, le texte posé dessus ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  height: 100svh; min-height: 680px; max-height: 1100px;
  background:
    radial-gradient(52% 48% at 66% 60%, var(--halo), transparent 72%),
    radial-gradient(120% 60% at 50% 115%, var(--lavis), transparent 60%),
    linear-gradient(180deg, var(--ciel-1) 0%, var(--ciel-2) 48%, var(--ciel-3) 100%);
  color: var(--texte);
}
/* Sans z-index, la scène ne forme pas son propre empilement : le calque de ses bulles de survol (sans effet
   sur les clics) passe au-dessus du texte et de la légende, la toile 3D reste dessous. */
.hero-scene { position: absolute; inset: 0; }
.hero-scene .dio-etiquettes { z-index: 4; }
.hero-texte {
  position: absolute; z-index: 3; left: var(--gouttiere); top: clamp(116px, 17vh, 180px);
  width: min(560px, 40vw); pointer-events: none;
  transition: opacity .5s var(--ease), transform .6s var(--ease-sortie);
}
.hero-texte > * { pointer-events: auto; }
.hero-texte .lede { margin: 22px 0 32px; max-width: 44ch; }
/* Le slogan de la marque, en anglais dans toutes les langues du site */
.hero-slogan { margin-top: 14px; font: 600 clamp(19px, 1.7vw, 23px)/1.3 var(--font-sans); color: var(--a-texte, var(--accent)); }
.hero-texte .hero-slogan + .lede { margin-top: 14px; }
.hero-aide { margin-top: 18px; display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--texte-2); }
.hero-aide svg { width: 18px; height: 18px; flex: none; }

/* Légende : chaque bâtiment a son bouton (équivalent clavier de la maquette) */
.legende {
  position: absolute; z-index: 3; left: var(--gouttiere); bottom: clamp(20px, 3.4vh, 34px);
  max-width: min(980px, 72vw);
  transition: opacity .5s var(--ease), transform .6s var(--ease-sortie);
}
.legende-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.legende-btn {
  display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 14px 0 7px;
  border-radius: 14px; border: 1px solid var(--verre-trait); cursor: pointer;
  background: var(--verre);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  font: 600 14px/1.15 var(--font-sans); color: var(--texte); text-align: left;
  box-shadow: 0 10px 24px -18px var(--ombre);
  transition: border-color .25s, transform .3s var(--ease-sortie), box-shadow .3s;
}
.legende-btn .q-icon { width: 32px; height: 32px; color: var(--a); border-radius: 9px; }
.legende-btn small { display: block; margin-top: 1px; font-size: 12px; font-weight: 450; color: var(--texte-2); }
.legende-btn:hover, .legende-btn.est-chaud {
  border-color: color-mix(in srgb, var(--a) 65%, transparent); transform: translateY(-2px);
  box-shadow: 0 14px 28px -16px var(--ombre), 0 0 0 4px color-mix(in srgb, var(--a) 14%, transparent);
}

/* Tiroir ouvert : le texte s'efface, la maquette se recadre sur le bâtiment */
.hero.est-focus .hero-texte, .hero.est-focus .legende { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.hero.est-focus .hero-texte > * { pointer-events: none; }

@media (max-width: 1180px) {
  .hero-texte { width: min(520px, 44vw); }
  .legende { max-width: calc(100vw - 2 * var(--gouttiere)); }
  .legende-btn { padding-right: 12px; }
  .legende-btn small { display: none; }
}
@media (max-width: 1023px) {
  .hero-texte { width: min(460px, 50vw); }
}
@media (max-width: 767px) {
  .hero { height: auto; min-height: 0; max-height: none; padding: 96px 0 26px; display: flex; flex-direction: column; }
  .hero-texte { order: 1; position: relative; left: auto; top: auto; width: auto; padding: 0 var(--gouttiere); }
  .hero-texte .lede { margin: 16px 0 24px; }
  .hero-scene { order: 2; position: relative; inset: auto; height: clamp(320px, 50svh, 440px); margin-top: 4px; }
  .legende { order: 3; position: relative; left: auto; bottom: auto; max-width: none; padding: 0 var(--gouttiere); }
  .legende-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .legende-btn { width: 100%; padding-right: 8px; }
  .legende-btn small { display: none; }
}

/* ---------- 2. Échanges ---------- */
.echanges-lede { margin-top: 22px; }
.echanges-note {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--trait);
  max-width: 46ch; font-size: 15px; line-height: 1.6; color: var(--texte-2);
}
.echanges-note .lien { display: inline-block; margin-top: 8px; }

/* ---------- 3. BPF et dossier de validation ---------- */
.validation {
  margin-top: clamp(64px, 8vw, 112px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
.validation-texte .texte { margin-top: 14px; }
@media (max-width: 1023px) {
  .validation { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 4. Référentiels ---------- */
.referentiels-avertissement { margin-top: clamp(48px, 6vw, 80px); }
/* Le pied du cycle en V est opaque : le tracé passe dessous (comme sur la page Conformité) */
#planche-gamp5 .d-accent { fill: color-mix(in srgb, var(--accent) 16%, var(--papier)); }

/* ---------- 5. Lya : le local serveur, au pied du bureau qualité ---------- */
.section-lya {
  background:
    radial-gradient(50% 60% at 86% 34%, rgba(124, 58, 237, .16), transparent 70%),
    radial-gradient(40% 50% at 66% 92%, rgba(47, 108, 237, .11), transparent 70%),
    var(--fond);
}
.lya-grille {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 104px); align-items: center;
}
.lya-texte .lede { margin-top: 20px; }
.lya-figure { width: min(320px, 78%); margin-bottom: 28px; }
.lya-local { display: block; width: 100%; height: auto; overflow: visible; }
.lya-local polygon { stroke: var(--plan-trait); stroke-width: 1; stroke-linejoin: round; }
.lya-local .f-h { fill: var(--plan-h); }
.lya-local .f-g { fill: var(--plan-g); }
.lya-local .f-d { fill: var(--plan-d); }
.lya-local .f-verre.f-g { fill: color-mix(in srgb, var(--plan-g) 70%, #8eaea3); }
.lya-local .f-verre.f-d { fill: color-mix(in srgb, var(--plan-d) 70%, #6f9488); }
.lya-local .f-ligne { fill: none; stroke: var(--plan-trait); stroke-width: .8; }
.lya-local .f-accent { fill: var(--a); stroke: none; }
.lya-q { fill: none; stroke: var(--q-green); stroke-width: 4; stroke-linecap: round; }
.lya-mat { fill: none; stroke: var(--plan-trait); stroke-width: 1.4; }
.lya-local .f-lya { stroke: rgba(255, 255, 255, .25); }
.lya-local .f-lya.f-h { fill: #8b7cf6; }
.lya-local .f-lya.f-g { fill: #6a4fe6; }
.lya-local .f-lya.f-d { fill: #3f5fd9; }
.lya-halo { fill: rgba(124, 58, 237, .2); }
.lya-enceinte { fill: none; stroke: #8b6cf0; stroke-width: 1.2; stroke-dasharray: 5 5; }
.lya-cable { fill: none; stroke: #8b6cf0; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lya-coupure { fill: none; stroke: var(--texte-2); stroke-width: 1.1; stroke-linejoin: round; }
.lya-repere { fill: none; stroke: var(--texte-2); stroke-width: 1; }
.lya-etq { font: 600 13px var(--font-sans); fill: var(--texte); }
.lya-etq-fine { font-size: 12px; font-weight: 500; fill: var(--texte-2); }
.lya-points { margin-top: 28px; }
.lya-ecran { width: 100%; max-width: 520px; justify-self: end; }
@media (max-width: 1023px) {
  .lya-grille { grid-template-columns: minmax(0, 1fr); }
  .lya-ecran { justify-self: start; }
}