:root {
  --gapm-w: 1dvw;
  --gapm-h: 1dvh;
  --gaps-w: calc(var(--gapm-w) / 2);
  --gaps-h: calc(var(--gapm-h) / 2);
  --gapl-w: calc(var(--gapm-w) * 2);
  --gapl-h: calc(var(--gapm-h) * 2);
  --gapxl-w: calc(var(--gapm-w) * 4);
  --gapxl-h: calc(var(--gapm-h) * 4);
  --gapxxl-w: calc(var(--gapm-w) * 8);
  --gapxxl-h: calc(var(--gapm-h) * 8);
  --gapxxxl-w: calc(var(--gapm-w) * 16);
  --gapxxxl-h: calc(var(--gapm-h) * 16);

  --font-s: .8rem;
  --font-m: 1rem;
  --font-l: 1.2rem;

  --speed-low: 1000ms;
  --speed-medium: 500ms;
  --speed-high: 200ms;

  --black: 15, 15, 15;
  --blacker: 21, 21, 21;
  --blackest: 25, 25, 25;
  --white: 240, 240, 240;
  --whiter: 230, 230, 230;
  --whitest: 220, 220, 220;
  --primar: 68, 174, 115;
  --primar-o: rgba(var(--primar), .85);
  --second: 200, 50, 50;
  --second-o: rgba(var(--second), .85);

  --color-bg: var(--white);
  --color-bger: var(--whiter);
  --color-bgest: var(--whitest);
  --color-txt: var(--black);
  --color-txter: var(--blacker);
  --color-txtest: var(--blackest);
}

body.dark {
  --color-bg: var(--black);
  --color-bger: var(--blacker);
  --color-bgest: var(--blackest);
  --color-txt: var(--white);
  --color-txter: var(--whiter);
  --color-txtest: var(--whitest);
}

.color {
  background-color: rgb(var(--color-bg));
  color: rgb(var(--color-txt));
}

.color.invert {
  background-color: rgb(var(--color-txt));
  color: rgb(var(--color-bg));
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", serif;
  position: relative;
  color: rgb(var(--color-txt));
  z-index: -3;
  background-image: url('../img/bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100dvh;
  width: 100dvw;
}
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(var(--color-bg));
  pointer-events: none;
  opacity: .45;
  z-index: -2;
}

#container {
  height: 100%;
  width: 100%;
  display: flex;
}
@media (min-width: 800px) {
  #container {
    position: absolute;
    top: 0;
    left: 0;
  }
}

header {
  width: fit-content;
  padding: var(--gapl-h) var(--gapm-w);
  display: flex;
  height: fit-content;
  align-items: center;
  /*height: 7dvh;*/
  /*width: 100dvw;*/
  /* position: fixed; */
  /* padding: 10px; */
  /*background-color: var(--primar-o);*/
  z-index: 300;
  gap: var(--gapm-w);
}

header svg {
  height: 1.2rem;
  width: auto;
}

header>a.btn {
  padding: 5px 5px;
  border-radius: 50%;
}

button.checkbox {
  /*background: none;*/
  border-radius: 15px;
  color: inherit;
  border: none;
  font: inherit;
  outline: none;
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  vertical-align: top;
}

button.checkbox:hover {
  cursor: pointer;
}

button.checkbox>span {
  border-radius: 15px;
  position: absolute;
  display: inline-block;
  content: '';
  width: 50%;
  left: 0;
  top: 0;
  bottom: 0;
  transition: var(--speed-high);
}

button.checkbox.active>span {
  transform: translateX(100%);
}

div.brand {
  position: relative;
  /*padding-left: 10px;*/
}

div.brand>p {
  /* padding: 10px 0 0 10px; */
  font-size: 1.5rem;
  margin: 0;
  width: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 700;
}

div.brand>p>.small {
  font-size: 1rem;
  font-weight: 300;
}

div.brand a {
  text-decoration: none;
}

/* div.brand>h1>span { */
/*   position: absolute; */
/*   left: 50%; */
/*   top: 70%; */
/* } */


main {
  height: 100%;
  display: flex;
  align-items: center;
  flex-grow: 1;
  /*position: relative;*/
  /*justify-content: center;*/
}

.upper {
  text-transform: uppercase;
}

h2 {
  font-size: .9rem;
  font-weight: 500;
}

#panel-wrapper {
  /*display: flex;*/
  /*width: 50%;*/
  position: relative;
  height: 100%;
  flex-grow: 1;
  /* background: red; */
  /*justify-content: center;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  /*justify-content: center;*/
  gap: var(--gapm-h);
  /*padding: 25px;*/
  /*padding-top: 0;*/
  /*width: 400px;*/
  /*padding: 0 var(--gapm-w);*/
  padding: var(--gapl-h) var(--gapxl-w);
}

#panel-wrapper.min {
  position: absolute;
  top: 0;
  height: fit-content;
}

/*section#home #panel-wrapper.min::before,*/
/*section#home #panel-wrapper.min::after {*/
/*  content: '';*/
/*  position: absolute;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  background: linear-gradient(to top, rgba(var(--color-bg), 0), rgba(var(--color-bg), .2), rgba(var(--color-bg), 1));*/
/*}*/
/*section#home #panel-wrapper.min::before {*/
/*  bottom: -19px;*/
/*  height: 19px;*/
/*}*/
/*section#home #panel-wrapper.min::after {*/
/*  bottom: -100px;*/
/*  height: 100px;*/
/*  filter: blur(5px);
/*  pointer-events: none;*/
/*}*/

#panel-wrapper.min .text>* {
  width: 100%;
}

#panel-wrapper.min .text * {
  border-radius: 0;
}

#panel-wrapper.min {
  position: absolute;
  background-color: rgb(var(--color-bg));
  z-index: 100;
  padding-left: unset;
  padding-right: unset;
}

#panel-wrapper>svg {
  width: 18rem;
  height: auto;
}

#panel-wrapper>a#panel-toggler {
  position: absolute;
  left: 20px;
  width: fit-content;
  height: fit-content;
}

#panel-wrapper.min>a#panel-toggler {
  position: relative;
  left: unset;
}
#panel-wrapper>a#panel-toggler>svg {
  width: auto;
  height: 2rem;
}

#panel-wrapper>svg path {
  fill: rgb(var(--color-txt));
}
#panel-wrapper>svg path#anniversary {
  fill: rgb(var(--primar));
}

#panel-wrapper>img {
  width: 300px;
  height: auto;
}

#panel-wrapper>hr {
  color: rgb(var(--color-txt));
  /*margin-bottom: 48px;*/
  width: 50%;
}


#pic-carousel {
  position: relative;
  height: 70%;
  display: grid;
  align-items: center;
  margin: 0 auto;
}

@media (min-width: 800px) {
  #panel-wrapper {
    flex-grow: unset;
    max-width: 450px;
  }
}
@media (max-width: 800px) {
  #panel-wrapper {
    background-color: rgb(var(--color-bg));
    z-index: 100;
  }
  #pic-carousel {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    touch-action: none;
    -ms-touch-action: none;
    overscroll-behavior: contain;
    user-select: none;
    -webkit-user-select: none;
  }
  /**/
  /*section#home #panel-wrapper::after {*/
  /*  content: '';*/
  /*  position: absolute;*/
  /*  right: 0;*/
  /*  inset: 0;*/
  /*  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 45%, transparent 70%);*/
  /*}*/

}

main:has(#panel-wrapper.min) #pic-carousel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}


#pic-carousel .mask {
  position: absolute;
  z-index: 20;
  pointer-events: none;
}

#pic-carousel .mask.y {
  left: 0;
  right: 0;
  height: 40px;
  display: block;
}
#pic-carousel .mask.x {
  top: 0;
  bottom: 0;
  width: 40px;
  display: none;
}

#pic-carousel .mask.y.top {
  top: -40px;
}
#pic-carousel .mask.y.bottom {
  bottom: -40px;
}
#pic-carousel .mask.x.left {
  left: -40px;
}
#pic-carousel .mask.x.right {
  right: -40px;
}

#pic-carousel>button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  right: 0;
}

#pic-carousel>button#prev {
  top: 0;
}
#pic-carousel>button#next {
  bottom: 0;
}

#pic-carousel>button>svg {
  width: 3rem;
  height: fit-content;
}

#pic-carousel>button#next>svg {
  transform: rotate(180deg);
}

#pic-carousel .pic-wrapper {
  /*display: flex;*/
  /*width: 50%;*/
   /*background: purple;*/
  /*justify-content: center;*/
  grid-area: 1/1;
  flex-grow: 1;
  transform: rotate(6deg);
  pointer-events: none;
  will-change: transform, opacity;
  opacity: 0;
}

#pic-carousel .pic-wrapper.active {
  opacity: 1;
  pointer-events: auto;
}

.pic-wrapper .picture {
  transform: none;
  background-color: rgb(var(--whiter));
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: 300px;
  height: 300px;
  background-size: cover;
  background-position: center;
  border: 20px solid rgb(var(--whiter));
  /* padding-bottom: 20px; */
  line-height: 0;
  padding-bottom: 40px;
}

.pic-wrapper .picture>.resume {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0; right: 0; bottom: 0;  /* pas de -20px */
  width: 100%;
  height: 40px;
  color: rgb(var(--black));
  background-color: inherit;
}

.pic-wrapper .picture>img {
  height: 100%;
  width: auto;
  object-fit: cover;
  object-position: center;
}

.text {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: var(--gapl-h);
}

.text>* {
  margin: 0 auto;
}

#map * {
  transition: none !important;
}

#map {
  height: 250px;
  width: 400px;
  border-radius: 5px;
  overflow: hidden;
  outline: none;
  /* box-shadow: 0 10px 30px rgba(0,0,0,.35); */
  background: rgb(var(--color-bg));
}

body.dark #map .leaflet-tile {
  filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.95) saturate(0.8);
}

/* 2) Contrôles (zoom, attribution) – pas de filter !  */
#map .leaflet-bar {
  border: none;
  box-shadow: none;
}
#map .leaflet-bar a {
  background: rgb(var(--color-bgest));
  color: rgb(var(--color-txt));
  border: none;
  box-shadow: none;
}
#map .leaflet-bar a:hover {
  color: rgb(var(--primar));
}

#map .leaflet-control-attribution {
  background: rgb(var(--color-bgest));
  color: inherit;
}
#map .leaflet-control-attribution a {
  color: inherit;
  text-decoration: underline;
}
#map .leaflet-control-attribution a:hover {
  color: rgb(var(--primar));
}

#map .leaflet-popup-content-wrapper,
#map .leaflet-popup-tip {
  background: rgb(var(--color-bgest));
  color: rgb(var(--color-txt));
  box-shadow: none;
}
#map .leaflet-popup-content a {
  color: rgb(var(--color-txt));
}
#map .leaflet-popup-content a:hover {
  color: rgb(var(--primar));
}

#map-links {
  display: flex;
  justify-content: center;
  gap: var(--gaps-w);
  flex-wrap: wrap;
}

#panel-wrapper.min #map-links {
  flex-direction: column;
  gap: var(--gaps-h);
}


#map-links a:nth-child(2n+1) {
  clear: left;
}

a {
  color: rgb(var(--color-txt));
  text-decoration: underline;
}

a:hover {
  color: rgb(var(--primar));
  cursor: pointer;
}
button:hover {
  color: rgb(var(--primar));
  cursor: pointer;
}

button.water {
  --wave-speed-1: 3.5s;
  --wave-speed-2: 5.2s;

  background-color: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  overflow: hidden;
  border: solid .5px;
  border-color: rgb(var(--color-txt));
  color: rgb(var(--color-txt));
}
button.water:active { transform: translateY(1px); }

button.water svg{
  position: relative;
  z-index: 3;              /* texte au-dessus de l’eau */
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

button.water::before,
button.water>span::before,
button.water>span::after{
  content:"";
  position:absolute;
  left:-6%;                /* dépasse un peu pour éviter les bords secs */
  width:200%;
  bottom:0;
  height:0%;               /* ← point de départ (vide) */
  /*opacity:.95;*/
  transition: height var(--speed-low) cubic-bezier(.22,.74,.29,.99);
}
button.water::before {
  background: rgb(var(--color-bg));
  z-index: 2;
}
/* Les 2 couches d’eau (avec sommet ondulé via un masque SVG) */
button.water>span::before,
button.water>span::after{
  /*background: linear-gradient(to top, var(--color-bgest), var(--color-bger) 100%, var(--color-bg));*/
  background: rgb(var(--color-bg));
  z-index:1;

  /* Sommet en vague : masque SVG répété horizontalement */
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'>\
    <path d='M0 12 Q30 0 60 12 T120 12 V24 H0Z' fill='black'/>\
  </svg>");
  mask-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'>\
    <path d='M0 12 Q30 0 60 12 T120 12 V24 H0Z' fill='black'/>\
  </svg>");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 120px 24px;
  mask-size: 120px 24px;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

/* 1re vague */
button.water>span::before{
  animation: wave-x var(--wave-speed-1) linear infinite;
}

/* 2e vague (plus fine + décalée pour donner du relief) */
button.water>span::after{
  opacity:.6;
  filter: blur(.3px);
  -webkit-mask-size: 60px 20px;
  mask-size: 60px 20px;
  animation: wave-x var(--wave-speed-2) linear reverse infinite;
  z-index:2;
}

button.water:hover {
  border-color: rgb(var(--primar));
  color: rgb(var(--primar));
}

/* Au survol (ou focus clavier), l’eau monte jusqu’en haut */
button.water:hover::before,
button.water:focus-visible::before {
  height: calc(110% - 24px);
}

button.water:hover>span::before,
button.water:hover>span::after,
button.water:focus-visible>span::before,
button.water:focus-visible>span::after{
  height:110%; /* un chouïa au-delà pour cacher complètement le sommet */
}

/* Animation d’ondulation horizontale des vagues (masque qui “glisse”) */
@keyframes wave-x{
  to{
    -webkit-mask-position: -240px 0;
    mask-position: -240px 0;
  }
}

/* Accessibilité mouvement réduit */
@media (prefers-reduced-motion: reduce){
  button.water::before,
  button.water>span::before,
  button.water>span::after{
    animation: none;
    transition: height .001s linear;
  }
}

a.btn {
  text-decoration: none;
}

.btn {
  background-color: rgb(var(--color-bger));
  display: flex;
  width: fit-content;
  gap: var(--gaps-w);
}

.btn>svg {
  width: 1.2rem;
  height: auto;
  fill: rgb(var(--color-txt));
}

.btn {
  border-radius: 5px;
  padding: 15px 20px;
}

.btn:hover {
  color: rgb(var(--primar));
  background-color: rgb(var(--color-bgest));
  cursor: pointer;
}

.btn:hover>svg {
  fill: rgb(var(--primar));
}


footer {
  --wave-speed-1: 3.5s;
  --wave-speed-2: 5.2s;

  position: fixed;
  padding: var(--gapl-h) 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100px;
  width: 100dvw;
  text-align: center;
  /*background-color: rgb(var(--color-bg));*/
  gap: var(--gaps-h);
  z-index: 200;
}

footer #contribution {
  font-size: .9rem;
  opacity: .8;
}

/*footer { transform: translateY(1px); }*/

footer p{
  position: relative;
  z-index: 3;
}

footer::before,
footer>span::before,
footer>span::after{
  content:"";
  position:absolute;
  left:-6%;                /* dépasse un peu pour éviter les bords secs */
  width:200%;
  bottom:0;
  transition: height var(--speed-low) cubic-bezier(.22,.74,.29,.99);
}
footer::before {
  height: calc(110% - 24px);
  background: rgb(var(--color-bg));
  z-index: 2;
}
/* Les 2 couches d’eau (avec sommet ondulé via un masque SVG) */
footer>span::before,
footer>span::after{
  height:110%; /* un chouïa au-delà pour cacher complètement le sommet */
  /*background: linear-gradient(to top, var(--color-bgest), var(--color-bger) 100%, var(--color-bg));*/
  background: rgb(var(--color-bg));
  z-index:1;

  /* Sommet en vague : masque SVG répété horizontalement */
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'>\
    <path d='M0 12 Q30 0 60 12 T120 12 V24 H0Z' fill='black'/>\
  </svg>");
  mask-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'>\
    <path d='M0 12 Q30 0 60 12 T120 12 V24 H0Z' fill='black'/>\
  </svg>");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 120px 24px;
  mask-size: 120px 24px;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

/* 1re vague */
footer>span::before{
  animation: wave-x var(--wave-speed-1) linear infinite;
}

/* 2e vague (plus fine + décalée pour donner du relief) */
footer>span::after{
  opacity:.6;
  filter: blur(.3px);
  -webkit-mask-size: 60px 20px;
  mask-size: 60px 20px;
  animation: wave-x var(--wave-speed-2) linear reverse infinite;
  z-index:2;
}

/* Animation d’ondulation horizontale des vagues (masque qui “glisse”) */
@keyframes wave-x{
  to{
    -webkit-mask-position: -240px 0;
    mask-position: -240px 0;
  }
}

/* Accessibilité mouvement réduit */
@media (prefers-reduced-motion: reduce){
  footer::before,
  footer>span::before,
  footer>span::after{
    animation: none;
    transition: height .001s linear;
  }
}