/* ===================================================================
   LA LOCO - page Demarche environnementale (bloc laloco/environnement)
   Alternance des fonds : encre / blanc / creme / encre / blanc / creme / encre
   Rayon 5px partout. Aucune bordure coloree : la matiere signale, pas le contour.
   =================================================================== */

/* Le coeur pose margin-block-start sur chaque enfant d un conteneur de flux. */
.ll-env__hero,
.ll-env__chiffres-sec,
.ll-env__engagements,
.ll-env__acoustique,
.ll-env__capacites,
.ll-env__batiment,
.ll-env__sortie { margin-block-start: 0; margin-block-end: 0; }

.ll-env__filet {
  width: 54px; height: 3px; border-radius: 5px;
  background: var(--wp--preset--color--projecteur);
  margin: 16px 0 0;
}
.ll-env__filet--clair { background: var(--wp--preset--color--projecteur-profond); }

.ll-env__prose {
  margin: 14px 0 0;
  font-size: 1rem; line-height: 1.72;
  color: var(--wp--preset--color--encre-douce);
  max-width: 62ch;
}
.ll-sombre .ll-env__prose { color: #C9CDD5; }

/* ------------------------------------------------------------- HERO */
.ll-env__hero {
  position: relative;
  background: var(--wp--preset--color--encre);
  padding-block: clamp(72px, 9vw, 128px) 0;
}
.ll-env__hero-voile {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(122% 94% at 6% 92%, rgba(251, 211, 76, 0.14), transparent 60%),
    radial-gradient(88% 72% at 94% 2%, rgba(91, 98, 112, 0.34), transparent 62%);
}
.ll-env__hero-wrap { position: relative; z-index: 1; }
.ll-env__titre {
  margin: 12px 0 0;
  font-family: var(--wp--preset--font-family--titres);
  font-size: clamp(2.25rem, 5.4vw, 4rem);
  font-weight: 700; line-height: 1.04; letter-spacing: -0.02em;
  color: var(--wp--preset--color--blanc);
  max-width: 15ch;
}
.ll-env__accroche {
  margin: 22px 0 0; max-width: 54ch;
  font-size: 1.0625rem; line-height: 1.68; color: #C9CDD5;
}

/* La dalle de reperes chevauche la section suivante. */
.ll-env__reperes-wrap {
  position: relative; z-index: 3;
  margin-block-start: clamp(40px, 5vw, 64px);
  margin-block-end: -58px;
}
.ll-env__reperes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0; border-radius: 5px;
  background-color: rgba(11, 13, 17, 0.62);
  background-image: linear-gradient(158deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 36%, transparent 70%);
  backdrop-filter: blur(26px) saturate(166%);
  -webkit-backdrop-filter: blur(26px) saturate(166%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.17), 0 30px 70px -28px rgba(0, 0, 0, 0.78);
}
.ll-env__repere { padding: 20px 24px; }
.ll-env__repere + .ll-env__repere { border-inline-start: 1px solid rgba(255, 255, 255, 0.09); }
.ll-env__repere-lib {
  margin: 0; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: #A9B0BC;
}
.ll-env__repere-val {
  margin: 6px 0 0;
  font-family: var(--wp--preset--font-family--titres);
  font-size: 1.125rem; font-weight: 700; color: var(--wp--preset--color--blanc);
}

/* --------------------------------------------------------- CHIFFRES */
.ll-env__chiffres-sec {
  background: var(--wp--preset--color--blanc);
  padding-block: calc(58px + clamp(48px, 6vw, 84px)) clamp(56px, 7vw, 96px);
}
.ll-env__chiffres {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px; margin: 0; align-items: start;
}
.ll-env__chiffre { margin: 0; }
.ll-env__chiffre-n {
  margin: 0;
  font-family: var(--wp--preset--font-family--titres);
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  font-weight: 800; line-height: 1; letter-spacing: -0.03em;
  color: var(--wp--preset--color--encre);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .ll-env__chiffre-n {
    background-image: linear-gradient(148deg, #0E1014 10%, #755C09 60%, #FBD34C 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
.ll-env__chiffre-lib {
  margin: 10px 0 0; font-size: 0.9375rem; line-height: 1.6;
  color: var(--wp--preset--color--graphite);
}

/* ------------------------------------------------------ ENGAGEMENTS */
.ll-env__engagements {
  background: var(--wp--preset--color--creme);
  padding-block: clamp(64px, 8vw, 104px);
}
.ll-env__cartes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; margin: 34px 0 0;
  align-items: stretch;
  grid-auto-rows: 1fr; /* egalise aussi les RANGEES entre elles, pas seulement dans une rangee */
}
.ll-env__carte {
  padding: 26px 24px 28px;
  border-radius: 5px;
  background: var(--wp--preset--color--blanc);
  box-shadow: 0 26px 56px -34px rgba(14, 16, 20, 0.5);
}
.ll-env__carte-picto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 5px;
  background: var(--wp--preset--color--encre);
}
.ll-env__carte-picto .ll-picto { width: 23px; height: 23px; display: block; }
.ll-env__carte-titre {
  margin: 15px 0 0;
  font-family: var(--wp--preset--font-family--titres);
  font-size: 1.0625rem; font-weight: 600; line-height: 1.26;
  color: var(--wp--preset--color--encre);
}
.ll-env__carte-txt {
  margin: 9px 0 0; font-size: 0.9375rem; line-height: 1.66;
  color: var(--wp--preset--color--encre-douce);
}

/* ------------------------------------------------------- ACOUSTIQUE */
.ll-env__acoustique {
  position: relative;
  background: var(--wp--preset--color--encre);
  padding-block: clamp(64px, 8vw, 108px);
}
.ll-env__acou-grille {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.ll-env__encart {
  display: flex; align-items: center; gap: 14px;
  margin: 26px 0 0; padding: 15px 18px; border-radius: 5px;
  background-color: rgba(11, 13, 17, 0.52);
  background-image: linear-gradient(158deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 36%, transparent 72%);
  backdrop-filter: blur(22px) saturate(164%);
  -webkit-backdrop-filter: blur(22px) saturate(164%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 24px 54px -30px rgba(0, 0, 0, 0.7);
}
.ll-env__encart .ll-picto { width: 26px; height: 26px; flex: 0 0 26px; }
.ll-env__encart-txt { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--wp--preset--color--blanc); }
.ll-env__encart-txt strong { color: var(--wp--preset--color--projecteur); }

.ll-env__acou-visuel { position: relative; margin: 0; }
.ll-env__acou-img {
  display: block; width: 100%; height: auto;
  border-radius: 5px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}
/* La legende chevauche l image : la profondeur vient du decalage, pas d un contour. */
.ll-env__acou-legende {
  position: absolute; left: -26px; bottom: -22px; max-width: 62%;
  padding: 13px 17px; border-radius: 5px;
  font-size: 0.875rem; line-height: 1.5; color: var(--wp--preset--color--blanc);
  background-color: rgba(11, 13, 17, 0.62);
  background-image: linear-gradient(158deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 40%, transparent 74%);
  backdrop-filter: blur(24px) saturate(166%);
  -webkit-backdrop-filter: blur(24px) saturate(166%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 26px 60px -28px rgba(0, 0, 0, 0.85);
}

/* -------------------------------------------------------- CAPACITES */
.ll-env__capacites {
  background: var(--wp--preset--color--blanc);
  padding-block: clamp(64px, 8vw, 104px);
}
.ll-env__jauges {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px; margin: 34px 0 0; align-items: stretch;
  grid-auto-rows: 1fr;
}
.ll-env__jauge {
  padding: 22px 22px 24px; border-radius: 5px;
  background: var(--wp--preset--color--creme);
}
.ll-env__jauge-n {
  margin: 0;
  font-family: var(--wp--preset--font-family--titres);
  font-size: clamp(1.625rem, 2.6vw, 2rem);
  font-weight: 800; line-height: 1.04; letter-spacing: -0.025em;
  color: var(--wp--preset--color--encre);
}
.ll-env__jauge-lib {
  margin: 8px 0 0; font-size: 0.875rem; line-height: 1.55;
  color: var(--wp--preset--color--graphite);
}
.ll-env__liste {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 34px;
}
.ll-env__liste li {
  position: relative; padding-inline-start: 20px;
  font-size: 0.9375rem; line-height: 1.62;
  color: var(--wp--preset--color--encre-douce);
}
.ll-env__liste li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.58em;
  width: 7px; height: 7px; border-radius: 5px;
  background: var(--wp--preset--color--projecteur-profond);
}

/* --------------------------------------------------------- BATIMENT */
.ll-env__batiment {
  background: var(--wp--preset--color--creme);
  padding-block: clamp(64px, 8vw, 104px);
}
.ll-env__bat-grille {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
  margin: 34px 0 0;
}
.ll-env__bat-visuels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ll-env__bat-fig { margin: 0; }
.ll-env__bat-img {
  display: block; width: 100%; height: auto;
  border-radius: 5px;
  box-shadow: 0 30px 66px -36px rgba(14, 16, 20, 0.66);
}
.ll-env__bat-fig--decalee { margin-block-start: 34px; }

/* ----------------------------------------------------------- SORTIE */
.ll-env__sortie {
  background: var(--wp--preset--color--encre);
  padding-block: clamp(52px, 6vw, 80px);
}
.ll-env__sortie-grille {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 26px;
}
.ll-env__sortie-txt { max-width: 52ch; }
.ll-env__sortie-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------- RESPONSIVE */
@media (max-width: 1023.98px) {
  .ll-env__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ll-env__chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 26px; }
  .ll-env__jauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ll-env__acou-grille,
  .ll-env__bat-grille { grid-template-columns: minmax(0, 1fr); }
  .ll-env__acou-visuel { order: -1; }
  .ll-env__acou-legende { left: auto; right: 16px; bottom: -18px; max-width: 72%; }
  .ll-env__bat-fig--decalee { margin-block-start: 0; }
}
@media (max-width: 767.98px) {
  .ll-env__reperes { grid-template-columns: minmax(0, 1fr); }
  .ll-env__repere + .ll-env__repere {
    border-inline-start: 0;
    border-block-start: 1px solid rgba(255, 255, 255, 0.09);
  }
  .ll-env__reperes-wrap { margin-block-end: -44px; }
  .ll-env__chiffres-sec { padding-block: calc(44px + 52px) 56px; }
  .ll-env__liste { grid-template-columns: minmax(0, 1fr); }
  .ll-env__acou-legende { position: static; max-width: none; margin-block-start: 14px; }
}
@media (max-width: 559.98px) {
  .ll-env__cartes,
  .ll-env__chiffres,
  .ll-env__jauges,
  .ll-env__bat-visuels { grid-template-columns: minmax(0, 1fr); }
  .ll-env__cartes,
  .ll-env__jauges { grid-auto-rows: auto; }
  .ll-env__sortie-actions { width: 100%; }
  .ll-env__sortie-actions .ll-btn { flex: 1 1 auto; text-align: center; }
}

/* ------------------------------------------------------- ANIMATIONS
   Tout est enferme ici : hors de cette requete, aucune regle d opacite
   n existe et le contenu est visible par defaut.
   Aucune transformation de classe n est posee sur les elements animes :
   l etat de fin d une animation de defilement ecrase toujours une classe. */
@media (prefers-reduced-motion: no-preference) {
  .ll-env__carte,
  .ll-env__jauge,
  .ll-env__bat-fig,
  .ll-env__acou-img { transition: transform 340ms ease, box-shadow 340ms ease; }
  .ll-env__carte:hover,
  .ll-env__jauge:hover { transform: translateY(-6px); box-shadow: 0 34px 66px -34px rgba(14, 16, 20, 0.6); }
  .ll-env__bat-fig:hover .ll-env__bat-img { transform: translateY(-5px); }

  @supports (animation-timeline: view()) {
    .ll-env__carte,
    .ll-env__jauge,
    .ll-env__chiffre,
    .ll-env__bat-fig,
    .ll-env__acou-visuel {
      animation: llEnvMonte linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
  }
  @keyframes llEnvMonte {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
  }
}