
.page-lieu .bloc--sombre {
  background:
    radial-gradient(64% 90% at 100% 0%, rgba(118,109,160,.34), rgba(118,109,160,0) 70%),
    radial-gradient(56% 84% at 0% 100%, rgba(157,150,105,.22), rgba(157,150,105,0) 70%),
    var(--violet-sombre);
}

.bloc--sombre > .grain__voile {
  background-image: var(--grain-couleur);
  background-size: 240px 240px;
  opacity: .28;
  mix-blend-mode: overlay;
}

#prendre-part .appel__titre { text-wrap: balance; }


.page-lieu .puces { padding-left: 1.1rem; }


.page-lieu picture { display: contents; }


body:has(> .page-lieu) .entete[data-sur-photo="non"] {
  background: var(--blanc);
  box-shadow: 0 1px 0 rgba(56, 54, 72, .12);
}

body:has(> .page-lieu) .entete[data-sur-photo="oui"]:not(:has([aria-expanded="true"])) {
  background: transparent;
  box-shadow: none;
}

body:has(> .page-lieu) .entete .logo img { transition: filter 180ms ease; }

body:has(> .page-lieu) .entete .nav a { transition: border-color 160ms ease, color 180ms ease; }

body:has(> .page-lieu) .entete[data-sur-photo="oui"]:not(:has([aria-expanded="true"])) .logo img {
  filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(56, 54, 72, .85));
}

body:has(> .page-lieu) .entete[data-sur-photo="oui"]:not(:has([aria-expanded="true"])) .nav a {
  color: var(--blanc);
  text-shadow: 0 1px 3px rgba(56, 54, 72, .9), 0 0 14px rgba(56, 54, 72, .55);
}

body:has(> .page-lieu) .entete[data-sur-photo="oui"]:not(:has([aria-expanded="true"])) .nav .est-ici { border-bottom-color: var(--blanc); }

body:has(> .page-lieu) .entete[data-sur-photo="oui"]:not(:has([aria-expanded="true"])) .entete__cta {
  background: transparent;
  color: var(--blanc);
  box-shadow: inset 0 0 0 1.5px var(--blanc), 0 2px 12px rgba(56, 54, 72, .4);
  text-shadow: 0 1px 3px rgba(56, 54, 72, .9);
}

body:has(> .page-lieu) .entete[data-sur-photo="oui"]:not(:has([aria-expanded="true"])) .entete__cta:hover { background: rgba(56, 54, 72, .55); }

body:has(> .page-lieu) .entete[data-sur-photo="oui"]:not(:has([aria-expanded="true"])) .menu-bouton {
  color: var(--blanc);
  border-color: var(--blanc);
  box-shadow: 0 2px 12px rgba(56, 54, 72, .4);
  text-shadow: 0 1px 3px rgba(56, 54, 72, .9);
}

body:has(> .page-lieu) .entete[data-sur-photo="oui"] :focus-visible { outline-color: var(--blanc); }


.carrousel__piste {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.carrousel__piste::-webkit-scrollbar { display: none; }

.carrousel__diapo {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.carrousel__commandes {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem;
  border-radius: 999px;
}

.carrousel__commandes[hidden] { display: none; }

.carrousel__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  background: transparent;
  color: var(--blanc);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.carrousel__bouton:hover { background: rgba(255, 255, 255, .14); border-color: var(--blanc); }

.carrousel__bouton:focus-visible { outline-color: var(--jaune); }

.carrousel__bouton svg { width: 18px; height: 18px; }

.carrousel__compte {
  min-width: 4.4rem;
  text-align: center;
  font-size: var(--t-petit);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .carrousel__piste { scroll-behavior: auto; }
  .carrousel__bouton { transition: none; }
}


.lieu-tete {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 34rem;
  max-height: 60rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--violet-sombre);
  color: var(--blanc);
}

.lieu-tete .carrousel,
.lieu-tete .carrousel__piste { position: absolute; inset: 0; }

.lieu-tete .carrousel__piste:focus-visible { outline: 3px solid var(--jaune); outline-offset: -6px; }

.lieu-tete .carrousel__diapo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cadrage, 50% 50%);
}

.lieu-tete .carrousel__diapo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(56, 54, 72, .62) 0, rgba(56, 54, 72, .28) 6.5rem, rgba(56, 54, 72, 0) 11rem),
    linear-gradient(to top, rgba(56, 54, 72, .92) 0%, rgba(56, 54, 72, .8) 32%, rgba(56, 54, 72, .34) 60%, rgba(56, 54, 72, 0) 78%),
    linear-gradient(to right, rgba(56, 54, 72, .5), rgba(56, 54, 72, 0) 58%);
}

.lieu-tete > .grain__voile { z-index: 1; opacity: .14; }

.lieu-tete__texte {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding-bottom: clamp(2.4rem, 5.4vw, 4.6rem);
  pointer-events: none;
}

.lieu-tete__texte .page-tete__sur { color: var(--blanc); }

.lieu-tete__titre {
  margin: 0;
  max-width: 18ch;
  color: var(--blanc);
  font-size: clamp(2.3rem, 4vw, 3.6rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.018em;
}

.lieu-tete__chapo {
  margin-top: clamp(.9rem, 1.6vw, 1.4rem);
  max-width: 42ch;
  color: var(--blanc);
  font-size: var(--t-lead);
  line-height: 1.45;
}

.lieu-tete .carrousel__legende,
.lieu-tete .carrousel__commandes {
  position: absolute;
  right: max(var(--marge), calc((100% - 1240px) / 2 + var(--marge)));
  border-radius: 999px;
  background: rgba(56, 54, 72, .8);
  color: var(--blanc);
}

.lieu-tete .carrousel__legende {
  z-index: 2;
  bottom: calc(clamp(2.4rem, 5.4vw, 4.6rem) + 3.9rem);
  padding: .3rem .75rem;
  font-size: .74rem;
  letter-spacing: .03em;
}

.lieu-tete .carrousel__commandes {
  z-index: 3;
  bottom: clamp(2.4rem, 5.4vw, 4.6rem);
}


.porte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.porte__table {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 34rem;
  aspect-ratio: 1 / 1;
}

.porte__table img {
  position: absolute;
  width: 58%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 10px solid var(--blanc);
  border-radius: 3px;
  box-shadow: 0 18px 40px rgba(56, 54, 72, .18);
}

.porte__table img:nth-child(1) { top: 0; left: 0; z-index: 1; transform: rotate(-3deg); }

.porte__table img:nth-child(2) { top: 28%; right: 0; z-index: 3; transform: rotate(2.4deg); }

.porte__table img:nth-child(3) { bottom: 0; left: 1%; z-index: 2; transform: rotate(-1.2deg); }

@media (max-width: 900px) {
  .porte { grid-template-columns: minmax(0, 1fr); }

  .porte__table { justify-self: center; max-width: 26rem; }
}


.lieu-objectif {
  display: flex;
  align-items: center;
  min-height: 100svh;
}

.lieu-objectif > .contenu { width: 100%; }

.objectif__grille {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.2rem, 5vw, 4.6rem);
  align-items: center;
}

.lieu-objectif .bloc__titre {
  max-width: 18ch;
  margin-bottom: 0;
  font-size: clamp(1.75rem, 2.95vw, 2.6rem);
}

.objectif__chute {
  margin-top: clamp(.9rem, 1.4vw, 1.25rem);
  max-width: 31ch;
  color: var(--blanc);
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  font-weight: 500;
  line-height: 1.36;
  font-style: italic;
}

.objectif__texte {
  display: flex;
  flex-direction: column;
  gap: clamp(.9rem, 1.8vh, 1.2rem);
  max-width: 52ch;
  margin-top: clamp(1.6rem, 3.4vh, 2.4rem);
  font-size: clamp(1.0625rem, 1.14vw, 1.18rem);
  line-height: 1.62;
}

.objectif__texte p { margin: 0; }

.carrousel--plans { min-width: 0; }

.plans__pile {
  position: relative;
  isolation: isolate;
}

.plans__pile::before,
.plans__pile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 3px;
  background: var(--blanc);
}

.plans__pile::before { opacity: .38; transform: rotate(-2.6deg) translate(-.45rem, .5rem); }

.plans__pile::after { opacity: .62; transform: rotate(1.7deg) translate(.4rem, .3rem); }

.carrousel--plans .carrousel__piste {
  border-radius: 3px;
  background: var(--blanc);
  box-shadow: 0 20px 46px rgba(31, 29, 45, .38);
}

.carrousel--plans .carrousel__piste:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }

.plans__image,
.plans__feuille {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 780;
  background: var(--blanc);
}

.plans__image { object-fit: contain; }

.plans__feuille {
  display: flex;
  align-items: center;
  container-type: inline-size;
}

.plans__feuille .coupe__cadre { width: 100%; }

.plans__feuille .coupe__etiquette {
  display: block;
  padding: .22rem .5rem;
  font-size: clamp(.54rem, 1.9cqi, 1rem);
}

.coupe__etiquette--penchee { transform: translate(-50%, -50%) rotate(-8deg); }

.carrousel--plans .coupe__etiquette { transition: opacity 300ms ease; }

.carrousel--plans .carrousel__diapo[aria-hidden="true"] .coupe__etiquette { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .carrousel--plans .coupe__etiquette { transition: none; }
}

.plans__nom {
  position: absolute;
  top: .7rem;
  left: .7rem;
  z-index: 1;
  margin: 0;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: rgba(56, 54, 72, .88);
  color: var(--blanc);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
}

@media (max-width: 700px) {
  .plans__feuille .coupe__etiquette {
    padding: .1rem .28rem;
    line-height: 1.1;
  }

  .plans__feuille .coupe__etiquette:first-of-type { transform: translate(-38%, -50%); }
}

.plans__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem 1.2rem;
  margin-top: .45rem;
}

.plans__pied .carrousel__commandes { padding: 0; }

.plans__agrandir { margin-left: .45rem; }

.plans__agrandir[hidden] { display: none; }

.plans__credit {
  margin: 0;
  color: var(--blanc);
  font-size: .8rem;
}

@media (max-width: 900px) {
  .lieu-objectif { min-height: 0; display: block; }

  .lieu-objectif::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(56, 54, 72, .18);
    pointer-events: none;
  }

  .objectif__grille { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }

  .lieu-objectif .bloc__titre { max-width: 100%; }

  .objectif__chute { max-width: 100%; }
}


.dessin-cadre {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  padding: clamp(.8rem, 1.4vw, 1.1rem);
  background: var(--blanc);
  border-radius: 3px;
  box-shadow: 0 18px 50px rgba(31, 29, 45, .30);
}

.dessin-cadre img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 2px;
}

.dessin-cadre figcaption {
  margin-top: .85rem;
  font-size: .74rem;
  line-height: 1.55;
  color: rgba(86, 84, 107, .9);
}


#renover .bloc__titre {
  max-width: none;
  margin-bottom: clamp(2.6rem, 6.6vh, 4.4rem);
}

.renover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4.4vw, 4.4rem);
  align-items: start;
}

.renover__visuel { margin: 0; }

.renover__visuel img {
  max-height: none;
  aspect-ratio: 16 / 9;
  object-position: 50% 50%;
}

.bloc--vert .figure figcaption { color: var(--blanc); }

@media (max-width: 900px) {
  .renover { grid-template-columns: minmax(0, 1fr); gap: 1.15em; }
}


.ensemble {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.ensemble__photo {
  justify-self: center;
  width: min(100%, 19rem);
  margin: 0;
}

.ensemble__photo img {
  max-height: none;
  aspect-ratio: 5 / 7;
  object-position: 50% 50%;
  transform: rotate(-2.2deg);
}

.sans-coupure { white-space: nowrap; }

@media (max-width: 900px) {
  .ensemble { grid-template-columns: minmax(0, 1fr); }
}


.visionneuse-prete [data-agrandir] { cursor: zoom-in; }

.visionneuse {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 4.4rem var(--marge) clamp(1rem, 2.6vh, 1.8rem);
  border: 0;
  background: transparent;
  color: var(--blanc);
}

.visionneuse[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.visionneuse::backdrop { background: rgba(56, 54, 72, .96); }

html:has(.visionneuse[open]) { overflow: hidden; }

.visionneuse :focus-visible { outline-color: var(--jaune); }

.visionneuse__fermer {
  position: absolute;
  top: .9rem;
  right: var(--marge);
}

.visionneuse__vue { display: flex; }

.visionneuse__image {
  flex: none;
  max-width: none;
  border-radius: 3px;
  background: var(--blanc);
  box-shadow: 0 24px 60px rgba(31, 29, 45, .5);
}

.visionneuse__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1.6rem;
}

.visionneuse__pied[hidden] { display: none; }

.visionneuse__legende {
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
  text-align: center;
}

.visionneuse__legende:empty { display: none; }

.visionneuse__commandes { padding: 0; }

@media (prefers-reduced-motion: no-preference) {
  .visionneuse[open],
  .visionneuse[open]::backdrop { animation: visionneuse-fondu 200ms ease-out; }
}

@keyframes visionneuse-fondu { from { opacity: 0; } }

@media (max-width: 700px) {
  .visionneuse { padding-inline: .5rem; }
}


@media (max-width: 1000px) {
  .lieu-tete .carrousel__commandes { top: calc(var(--h-entete) + .8rem); bottom: auto; }

  .lieu-tete .carrousel__legende { top: calc(var(--h-entete) + 1.15rem); bottom: auto; left: var(--marge); right: auto; }
}

@media (max-width: 900px) {
  .duo .mesure { max-width: none; }

  .dessin-cadre { max-width: 22rem; }
}

@media (max-width: 879px) {
  .lieu-tete {
    height: calc(100vh - 4rem);
    height: calc(100svh - 4rem);
    min-height: 30rem;
  }
}

@media (max-width: 767px) {
  .lieu-tete .carrousel__diapo::after {
    background:
      linear-gradient(to bottom, rgba(56, 54, 72, .62) 0, rgba(56, 54, 72, .28) 5rem, rgba(56, 54, 72, 0) 9rem),
      linear-gradient(to top, rgba(56, 54, 72, .94) 0%, rgba(56, 54, 72, .84) 44%, rgba(56, 54, 72, .36) 72%, rgba(56, 54, 72, 0) 88%);
  }

  .renover__visuel img,
  .porte__table img { border-width: 8px; }
}

@media (max-width: 879px) {
  .lieu-tete .carrousel__legende,
  .dessin-cadre figcaption { font-size: .78rem; }
}

@media (max-width: 600px) {
  .lieu-tete .carrousel__legende {
    top: calc(var(--h-entete) + .8rem + 53px + .5rem);
    left: auto;
    right: var(--marge);
    max-width: calc(100% - 2 * var(--marge));
  }
}
