.monde-vert {
  
  --air-voute: 12px;
  
  --voute: clamp(36px, calc(5.72vw + 13.7px), 96px);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--h-entete, var(--h-entete-repli)) - var(--air-voute));
  min-height: calc(100svh - var(--h-entete, var(--h-entete-repli)) - var(--air-voute));
  background: linear-gradient(160deg, #0C2C23 0%, #06140F 100%);
  color: #F3EDE0;
  border-radius: 50% 50% 0 0 / var(--voute) var(--voute) 0 0;
  
  overflow: hidden;
  overflow: clip;
  
  scroll-margin-top: var(--air-voute);
}

.monde-vert::before,
.monde-vert::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.monde-vert::before { right: -90px; top: 40px; width: 260px; height: 260px; background: rgba(243, 237, 224, .045); }
.monde-vert::after { left: -70px; bottom: 120px; width: 180px; height: 180px; background: rgba(243, 237, 224, .03); }

.monde-vert__fin { display: block; height: 0; scroll-snap-align: end; }

.monde-vert :focus-visible { outline-color: var(--menthe); }

.contact {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  
  padding: calc(var(--voute) + 28px) var(--bord) 30px;
  
  scroll-margin-top: var(--air-voute);
}

.contact__texte { display: contents; }
.contact__titre { order: 1; font-size: clamp(40px, 5vw, 72px); }
.contact__portes { order: 2; display: flex; justify-content: space-between; gap: 8px; }
.contact__boutons { order: 3; display: flex; flex-direction: column; gap: 18px; }
.contact__boutons .bouton { width: 100%; white-space: normal; text-align: center; padding: 8px 16px; }
.contact__note { order: 4; font-size: 13px; color: rgba(243, 237, 224, .7); text-align: center; }

.contact__porte {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #EFE7D3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: flotter 5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.8s);
}
.contact__porte svg { width: 63%; height: 63%; }
.contact__porte--large { display: none; }

.pied {
  margin: 0 var(--bord);
  border-top: 1px solid rgba(243, 237, 224, .14);
  
  padding: 30px 0 110px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.pied__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
.pied__marque { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; }
.pied__marque p { font-size: 14px; line-height: 1.5; color: rgba(243, 237, 224, .72); }

.pied__logo { display: inline-flex; align-items: center; gap: 10px; }
.pied__tuile {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #06140F;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pied__tuile svg { width: 10px; height: 20px; }
.pied__mot {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #F3EDE0;
  white-space: nowrap;
}
.pied__mot span { color: #D8B45E; }

.pied nav { display: flex; flex-direction: column; gap: 10px; min-width: 0; font-size: 15px; line-height: 1.35; }
.pied nav a { color: rgba(243, 237, 224, .84); text-decoration: none; }
.pied__titre { font-size: 12.5px; font-weight: 800; letter-spacing: .1em; color: var(--menthe); }

.pied nav.pied__activites { gap: 8px; }
.pied__activites .pied__titre { margin-bottom: 2px; }
.pied__porte { display: flex; align-items: center; gap: 10px; }
.pied__rond {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #EFE7D3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pied__droits { font-size: 13px; color: rgba(243, 237, 224, .62); }

@media (hover: hover) {
  .pied nav a:hover { color: #F3EDE0; text-decoration: underline; opacity: 1; }
  .bouton--contour:hover { border-color: rgba(243, 237, 224, .6); }
}

@media (min-width: 900px) {
  .monde-vert { --air-voute: 24px; }
  .monde-vert::before { right: -140px; top: 60px; width: 520px; height: 520px; }
  .monde-vert::after { left: -120px; bottom: 40px; width: 320px; height: 320px; }

.contact {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 40px;
    align-items: center;
    align-content: center;
    padding-top: calc(var(--voute) + clamp(0px, 2.2vh - 9.8px, 34px));
    padding-bottom: clamp(24px, 4.9vh, 64px);
  }
  .contact__texte { display: flex; flex-direction: column; gap: clamp(16px, 2.44vh, 26px); }
  
  .contact__titre { font-size: clamp(40px, min(5vw, 8vh), 72px); }
  .contact__boutons { flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .contact__boutons .bouton { width: auto; white-space: nowrap; padding: 0 28px; }
  .contact__note { text-align: left; font-size: 14.5px; }
  .contact__portes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; justify-items: center; }
  .contact__porte, .contact__porte--large { display: flex; width: clamp(72px, 6.7vw, 96px); height: clamp(72px, 6.7vw, 96px); }
  .contact__porte svg { width: 60%; height: 60%; }

.pied {
    padding: clamp(24px, 4.9vh, 52px) 0 clamp(44px, 4.67vh, 48px);
    gap: clamp(16px, 4vh, 40px);
  }
  .pied__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .pied__marque { grid-column: auto; gap: 14px; }
  .pied__marque p { font-size: 15px; }
  .pied__logo { gap: 11px; }
  .pied__tuile { width: 34px; height: 34px; border-radius: 9px; }
  .pied__tuile svg { width: 12px; height: 23px; }
  .pied__mot { font-size: 24px; }
}