/* Diacenter : hero, étiquette DPE interactive, ligne d'horizon et tracés animés. */

/* ---------- Tracés : dessinés une fois à l'entrée dans l'écran (js/draw.js) ---------- */
[data-draw] path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--draw-dur, 1.1s) cubic-bezier(.45, .05, .25, 1) var(--d, 0s);
}

.js [data-draw]:not(.is-drawn) path {
  stroke-dashoffset: 1;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(32px, 5vw, 72px) clamp(72px, 9vw, 128px);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.hero__title {
  max-width: 17ch;
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.hero__lead {
  max-width: 44ch;
  margin-top: 24px;
  color: var(--ink-soft);
  font-size: var(--fs-lg);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 36px;
}

.hero__call {
  color: var(--ink-soft);
  font-weight: 600;
  text-decoration: none;
}

.hero__call .link {
  color: var(--ink);
  font-weight: 800;
  background-size: 100% 2px;
  background-image: linear-gradient(var(--line), var(--line));
}

.hero__call:hover .link,
.hero__call:focus-visible .link {
  background-image: linear-gradient(var(--sea), var(--sea));
  color: var(--sea);
}

/* ---------- Photo et étiquette posée dessus comme un document ---------- */
.hero__visual {
  position: relative;
}

.hero__photo {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 18% 50%;
  border-radius: var(--r-xl);
}

/* ---------- Étiquette DPE (élément signature) ---------- */
.dpe {
  position: absolute;
  right: clamp(-32px, -2vw, -8px);
  bottom: -56px;
  width: min(430px, 82%);
  padding: 14px 16px 12px;
  border: 2px solid var(--ink);
  border-radius: var(--r-xs);
  background: var(--surface);
  animation: dpe-in 500ms var(--ease) 150ms both;
}

.dpe__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.dpe__title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.dpe__hint {
  color: var(--ink-soft);
  font-size: .8125rem;
}

.dpe__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.dpe__scale {
  display: grid;
  gap: 4px;
}

.dpe__class {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  cursor: pointer;
  text-align: left;
}

.dpe__bar {
  --arrow: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
  display: flex;
  align-items: center;
  width: var(--w);
  height: 28px;
  padding-left: 11px;
  background: var(--c);
  color: var(--dpe-ink);
  font-size: .9375rem;
  font-weight: 800;
  clip-path: var(--arrow);
  transition: width 250ms var(--ease), opacity var(--dur) var(--ease);
  animation: dpe-bar 600ms var(--ease) both;
  animation-delay: calc(450ms + var(--i) * 80ms);
}

.dpe__class--a { --i: 0; --w: 34%; --c: #009c6d; }
.dpe__class--b { --i: 1; --w: 43%; --c: #52b153; }
.dpe__class--c { --i: 2; --w: 52%; --c: #78bd76; }
.dpe__class--d { --i: 3; --w: 61%; --c: #f4e70f; }
.dpe__class--e { --i: 4; --w: 70%; --c: #f0b40f; }
.dpe__class--f { --i: 5; --w: 79%; --c: #eb8235; }
.dpe__class--g { --i: 6; --w: 88%; --c: #d7221f; }

.dpe__class--g .dpe__bar {
  color: var(--on-dark);
}

/* La barre active s'étire, les autres s'effacent légèrement. */
.dpe__scale.has-active .dpe__class:not([aria-pressed="true"]) .dpe__bar {
  opacity: .45;
}

.dpe__class:hover .dpe__bar,
.dpe__class[aria-pressed="true"] .dpe__bar {
  width: calc(var(--w) + 10%);
  opacity: 1;
}

.dpe__class:focus-visible {
  outline-offset: 2px;
}

.dpe__info {
  min-height: 100%;
  padding: 12px;
  border-radius: var(--r-sm);
  background: var(--mist);
  font-size: .875rem;
}

.dpe__empty {
  color: var(--ink-soft);
}

.dpe__letter {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  border-radius: var(--r-xs);
  background: var(--c);
  color: var(--dpe-ink);
  font-size: 1.125rem;
  font-weight: 800;
}

.dpe__letter--light {
  color: var(--on-dark);
}

.dpe__info dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.dpe__info dt {
  color: var(--ink-soft);
  font-size: .8125rem;
  font-weight: 600;
}

.dpe__info dd {
  margin: 2px 0 0;
  font-weight: 700;
  line-height: 1.35;
}

.dpe__info .is-banned {
  color: var(--danger);
}

.dpe__info.is-updating > * {
  animation: dpe-info 220ms var(--ease);
}

.dpe__note {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: .71875rem;
  line-height: 1.5;
}

@keyframes dpe-in {
  from { opacity: 0; transform: translateY(16px); }
}

@keyframes dpe-bar {
  from { clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%); }
}

@keyframes dpe-info {
  from { opacity: 0; transform: translateY(4px); }
}

@media (max-width: 899px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__photo {
    aspect-ratio: 16 / 10;
    border-radius: var(--r-lg);
  }

  .dpe {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
    max-width: 520px;
    margin: -48px 12px 0;
  }

  .hero {
    padding-bottom: var(--section-y);
  }
}

@media (max-width: 479px) {
  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .dpe__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dpe,
  .dpe__bar,
  .dpe__info.is-updating > * {
    animation: none;
  }

  .js [data-draw]:not(.is-drawn) path {
    stroke-dashoffset: 0;
  }
}