/* Page EDF R&D : scène de la maison, console, figures. S'appuie sur ../../commun.css. */
.scene--maison { background-color: var(--cyano); }
.scene--maison .scene__fond {
  background-image: linear-gradient(rgba(237, 244, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(237, 244, 255, 0.045) 1px, transparent 1px);
  background-size: 40px 40px;
}
.scene--maison .vivant { background: transparent; }
.scene--maison.vivante .repli { display: none; }

.labo {
  position: relative;
  display: grid;
  gap: 24px;
  padding-block: 24px 40px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "maison" "phrases" "console";
}
.labo__intro { grid-area: intro; display: flex; flex-direction: column; gap: 20px; }
.labo__intro h1 { font-size: clamp(2.375rem, 4.7vw, 4rem); }
.labo__intro .chapeau { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }
.maison-cible { grid-area: maison; position: relative; aspect-ratio: 1 / 1.32; pointer-events: none; }
@media (min-width: 640px) { .maison-cible { aspect-ratio: 1.45 / 1; } }
.maison-cible .repli { object-fit: contain; object-position: center; }

.labo__phrases { grid-area: phrases; display: flex; flex-direction: column; gap: 12px; }
.labo__phrases-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pause { background: none; border: 0; padding: 4px 0; color: var(--sur-plan-doux); font: 500 var(--t-mono) / 1.4 var(--f-mono); text-decoration: underline; text-underline-offset: 0.22em; cursor: pointer; }
@media (hover: hover) { .pause:hover { color: var(--sur-plan); } }
.phrases { display: flex; flex-direction: column; border-top: 1px solid rgba(237, 244, 255, 0.35); }
.phrase {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(237, 244, 255, 0.35);
  color: var(--sur-plan);
  font: 400 var(--t-petit) / 1.35 var(--f-texte);
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) { .phrase:hover { background: rgba(237, 244, 255, 0.12); } }
.phrase[aria-pressed="true"] { background: var(--sur-plan); color: var(--cyano); font-weight: 500; }
/* Sur téléphone, trois phrases : la maison, les boutons et la réponse tiennent sur un écran. Les deux autres passent quand même dans le tour automatique. */
@media (max-width: 639px) { .phrase:nth-child(3), .phrase:nth-child(4) { display: none; } }
.labo__note { font-family: var(--f-mono); font-size: 0.75rem; line-height: 1.5; color: var(--sur-plan-doux); }

.console { grid-area: console; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dit { font-family: var(--f-titre); font-weight: 600; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; min-height: 2.5em; }
.repond { min-height: 3em; font-size: var(--t-petit); line-height: 1.5; color: var(--sur-plan-doux); }
.trace { display: flex; flex-direction: column; font: 500 12px / 20px var(--f-mono); color: var(--sur-plan); white-space: pre; overflow: hidden; min-height: 20px; }
.trace li:not(:last-child) { display: none; }
.courbe { width: 100%; height: 96px; max-width: none; }

.etiquettes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; display: none; }
.scene--maison.vivante .etiquettes { display: block; }
.etiquettes span {
  position: absolute; left: 0; top: 0;
  font: 500 10px / 1 var(--f-mono);
  letter-spacing: 0.04em;
  color: var(--sur-plan);
  white-space: nowrap;
  will-change: transform;
  background: rgba(14, 52, 121, 0.82);
  padding: 2px 4px;
}
.etiquettes span.fort { background: var(--sur-plan); color: var(--cyano); padding: 3px 5px; }

@media (min-width: 1000px) {
  .labo {
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    grid-template-areas: "intro maison" "phrases console";
    gap: 32px 48px;
    padding-block: 28px 44px;
  }
  .maison-cible {
    aspect-ratio: auto;
    min-height: 400px;
    margin-top: calc(-1 * var(--entete-h) - 12px);
    margin-bottom: -28px;
    margin-right: calc((min(100vw - 2 * var(--gouttiere), 1200px) - 100vw) / 2);
  }
  .console { justify-content: flex-end; }
  .dit { min-height: 1.25em; font-size: 1.375rem; }
  .repond { min-height: 1.5em; }
  .trace { min-height: 60px; color: var(--sur-plan-doux); }
  .trace li:not(:last-child) { display: list-item; list-style: none; }
  .trace li:last-child { color: var(--sur-plan); }
  .courbe { height: 104px; }
  .etiquettes span { font-size: 11px; }
}

/* ---------- Récit ---------- */
.recit h2 + p { margin-top: 0; }
.duo .planche { width: 100%; }
.duo > .texte { display: flex; flex-direction: column; gap: 20px; }

/* Le projet d'EDF R&D : la section précédente est blanche aussi, une seule marge entre les deux. */
.recit--projet { padding-top: 0; }
/* Cadres emboîtés, du plus grand au plus petit : pas de flèche, c'est une inclusion et non une suite. */
.echelle { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: clamp(12px, 1.5vw, 18px); border: 1px solid rgba(237, 244, 255, 0.45); }
.echelles > .echelle { padding: 0; border: 0; }
.echelle > .echelle { margin-top: 8px; }
.echelle__nom { font-family: var(--f-titre); font-weight: 600; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.01em; }
.echelle__dit { font-size: var(--t-petit); line-height: 1.45; color: var(--sur-plan-doux); }
.echelle__chiffres { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: var(--t-mono); line-height: 1.35; color: var(--sur-plan-doux); }
.echelle__chiffres li { flex: 0 1 auto; }
.echelle__chiffres strong { display: block; font-family: var(--f-titre); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--sur-plan); }
/* Le cadre de la maison porte un toit, comme la maison dessinée plus bas. */
.echelle--maison { position: relative; border-top: 0; }
.echelle > .echelle--maison { margin-top: 44px; }
.echelles .echelle__toit { position: absolute; left: -7px; bottom: 100%; width: calc(100% + 14px); height: 34px; fill: none; stroke: rgba(237, 244, 255, 0.45); stroke-width: 1; overflow: visible; }
.echelle--agent { background: var(--sur-plan); border-color: var(--sur-plan); color: var(--cyano); }
.echelle--agent .echelle__dit { color: var(--cyano); }
.echelles figcaption { text-wrap: balance; }

.pourquoi { display: flex; flex-direction: column; gap: 40px; }
.pourquoi .grand { max-width: 18em; }
.pourquoi__texte { display: grid; gap: 20px var(--colonne); }
.pourquoi__texte p { max-width: 58ch; }
@media (min-width: 900px) { .pourquoi__texte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 64px; } }

.fig-courbe { color: var(--sur-plan); }
.fig-courbe svg { width: 100%; height: auto; }
.fig-courbe figcaption { margin-top: 12px; font-family: var(--f-mono); font-size: var(--t-mono); line-height: 1.5; color: var(--sur-plan-doux); }
.fig-courbe .etroite { display: block; }
.fig-courbe .large { display: none; }
@media (min-width: 760px) {
  .fig-courbe .etroite { display: none; }
  .fig-courbe .large { display: block; }
}

svg text { font-family: var(--f-mono); }
svg .gros, svg .gros text { font-family: var(--f-titre); font-weight: 600; }
.t-plein { fill: currentColor; stroke: none; }
.tr { fill: none; stroke: currentColor; stroke-width: 1.5; }
.tr-fin { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.6; }
.tr-gros { fill: none; stroke: currentColor; stroke-width: 2.5; }
.tiret { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-dasharray: 3 4; }

@media (prefers-reduced-motion: no-preference) {
  .boucle { stroke-dasharray: 10 14; animation: boucle 3.2s linear infinite; }
  @keyframes boucle { to { stroke-dashoffset: -96; } }
  .chaleur { animation: chaleur 3s ease-in-out infinite alternate; }
  @keyframes chaleur { from { opacity: 0.35; } to { opacity: 1; } }
}

/* ---------- Le quartier ---------- */
.scene--quartier { display: flex; align-items: flex-end; min-height: 860px; }
.scene--quartier .scene__fond::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--cyano) 0%, var(--cyano) 52%, rgba(18, 63, 145, 0) 70%);
}
.scene--quartier .scene__texte { padding-top: 0; padding-bottom: 440px; align-self: flex-start; padding-block-start: 40px; }
.scene--quartier .scene__texte p { max-width: 58ch; }
@media (min-width: 900px) {
  .scene--quartier { min-height: 660px; align-items: center; }
  .scene--quartier .scene__fond::after { background: linear-gradient(90deg, var(--cyano) 0%, var(--cyano) 44%, rgba(18, 63, 145, 0) 66%); }
  .scene--quartier .scene__texte { padding-block: 72px; align-self: center; }
  .scene--quartier .scene__texte > *, .scene--quartier .scene__texte p { max-width: 28rem; }
}