/* Jetons de la page À propos */
:root {
  --taille-propos-titre: clamp(38px, min(5vw, 9vh), 76px);
  --largeur-propos-titre: 25ch;
  --horizon-lac: 49.6%;
  --cadrage-lac: 50% 49.6%;
  --ecart-horizon: clamp(18px, 2.8vh, 28px);
  --air-chapeau: clamp(36px, 7vh, 72px);
  --opacite-reflet: .22;
  --duree-brume: 4.6s;
  --courbe-brume: cubic-bezier(.45, 0, .15, 1);
  --nuit-lac: rgba(9, 15, 24, .5);
  --nuit-lac-legere: rgba(9, 15, 24, .14);
  --nuit-lac-titre: rgba(9, 15, 24, .76);
  --forme-halo-lac: 50% 30%;
  --nuit-lac-nulle: rgba(9, 15, 24, 0);
  --brume-dense: rgba(247, 241, 232, 1);
  --brume-legere: rgba(247, 241, 232, .9);
  --taille-attaque: clamp(30px, 2.9vw, 42px);
  --taille-recit: clamp(17px, 1.35vw, 20px);
  --largeur-recit: 58ch;
  --ecart-attaque: clamp(28px, 3vw, 44px);
  --ecart-mesures: clamp(64px, 11vh, 120px);
  --sable: #efe7dc;
  --trait-propos: rgba(169, 79, 53, .05);
  --colonnes-propos: 5;
  --taille-phrase-propos: clamp(32px, min(4.4vw, 8.2vh), 68px);
  --largeur-phrase-propos: 24ch;
  --taille-chute: clamp(26px, 2.6vw, 38px);
  --largeur-confidence: 40ch;
  --taille-propos-appel: clamp(36px, min(4.6vw, 8.5vh), 68px);
  --cadrage-fond: 50% 58%;
  --nuit-fond: rgba(9, 15, 24, .7);
  --forme-halo-fond: 44% 32%;
  --nuit-fond-haut: rgba(9, 15, 24, .62);
  --hauteur-nuit-fond: 260px;
  --ecart-appel-propos: clamp(20px, 3vh, 28px);
  --hauteur-entete-compacte: 71px;
}

/* Animations de la page À propos */
@keyframes proposBrume {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-28%); }
}

@keyframes proposReflet {
  from { opacity: 0; transform: translateY(-12px); }
}

/* Lac : scène */
.elementor .propos-lac {
  height: 100svh;
}

.elementor .propos-lac::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse var(--forme-halo-lac) at 50% calc(var(--horizon-lac) - 14%), var(--nuit-lac-titre), var(--nuit-lac-nulle)),
    linear-gradient(to bottom, var(--nuit-lac-legere) 0%, var(--nuit-lac-nulle) 30%, var(--nuit-lac-nulle) 62%, var(--nuit-lac) 100%);
  mix-blend-mode: normal;
  opacity: 1;
  pointer-events: none;
}

.propos-lac > .grain,
.propos-fond-scene > .grain {
  z-index: -1;
}

/* Lac : brume */
.elementor .propos-lac::after {
  content: '';
  position: absolute;
  inset: 0 0 -40%;
  z-index: 3;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: linear-gradient(to bottom, var(--brume-legere) 0%, var(--brume-dense) 55%);
  opacity: 0;
  pointer-events: none;
  animation: proposBrume var(--duree-brume) .2s var(--courbe-brume) backwards;
}

/* Lac : titre et reflet */
.elementor .propos-surtitre {
  color: var(--blanc);
  animation: heroUp .9s 2s var(--courbe-douce) both;
}

.elementor .propos-surtitre::before,
.elementor .propos-surtitre::after {
  background: currentColor;
}

.elementor .propos-titre,
.propos-reflet {
  max-width: var(--largeur-propos-titre);
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: var(--taille-propos-titre);
  line-height: 1.06;
  letter-spacing: -.02em;
  text-align: center;
  text-wrap: balance;
}

.elementor .propos-titre {
  animation: heroUp 1.1s 2.15s var(--courbe-douce) both;
}

.propos-reflet {
  position: absolute;
  top: var(--horizon-lac);
  left: var(--gouttiere);
  right: var(--gouttiere);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 1.06em;
  margin: 0 auto;
  overflow: clip;
  color: var(--blanc);
  opacity: var(--opacite-reflet);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .35) 50%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .35) 50%, transparent 95%);
  user-select: none;
  pointer-events: none;
  animation: proposReflet 1.6s 2.45s var(--courbe-douce) backwards;
}

.propos-reflet.est-ondule {
  filter: url(#propos-ondulation);
}

.propos-filtres {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.elementor .propos-chapeau {
  animation: heroUp 1s 2.75s var(--courbe-douce) both;
}

/* Fonds à colonnes */
.elementor .propos-recit::before,
.elementor .propos-confidence::before {
  content: '';
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: linear-gradient(to right, transparent calc(100% - 1px), var(--trait-propos) calc(100% - 1px)) 0 0 / calc(100% / var(--colonnes-propos)) 100% repeat-x;
  -webkit-mask-image: linear-gradient(to bottom, transparent 60px, #000 140px);
  mask-image: linear-gradient(to bottom, transparent 60px, #000 140px);
  mix-blend-mode: normal;
  opacity: 1;
  pointer-events: none;
}

/* Confidence collante */
.elementor .propos-confidence {
  position: sticky;
  top: min(0px, calc(100svh - var(--hauteur-confidence, 100svh)));
}

.elementor .propos-confidence-chute {
  --delai-revele: .25s;
}

/* Fond du lac */
.elementor .propos-fond-scene {
  height: 100svh;
}

.elementor .propos-fond-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse var(--forme-halo-fond) at 50% 50%, var(--nuit-fond), var(--nuit-lac-nulle)),
    linear-gradient(to bottom, var(--nuit-fond-haut) 0, var(--nuit-lac-nulle) var(--hauteur-nuit-fond));
  mix-blend-mode: normal;
  opacity: 1;
  pointer-events: none;
}

.elementor .propos-appel-texte {
  --delai-revele: .15s;
}

.elementor .propos-appel-bouton {
  --delai-revele: .3s;
}

/* Pied posé sur le lac */
.elementor-location-footer {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--hauteur-pied, 0px) * -1);
}

.elementor-location-footer.pied-en-attente {
  overflow: clip;
  opacity: 0;
}

.elementor-location-footer.pied-en-attente .pied-interieur {
  transform: translateY(18px);
}

.elementor-location-footer.pied-en-attente.est-pose,
.elementor-location-footer.pied-en-attente:focus-within {
  opacity: 1;
  transition: opacity 1s var(--courbe-douce);
}

.elementor-location-footer.pied-en-attente.est-pose .pied-interieur,
.elementor-location-footer.pied-en-attente:focus-within .pied-interieur {
  transform: none;
  transition: transform 1.1s var(--courbe-douce);
}

/* En-tête sur le lac */
.elementor .entete-sur-lac .logo-l,
.elementor .entete-sur-lac .logo-p {
  transition: fill .5s ease;
}

.elementor .entete-sur-lac .burger::before,
.elementor .entete-sur-lac .burger::after {
  transition: background .5s ease, transform .4s var(--courbe-menu);
}

body:not(.menu-ouvert) .elementor .entete.entete-sur-lac::before {
  opacity: 0;
}

.elementor .entete.est-defile.entete-sur-lac .entete-interieur {
  padding-block: 22px;
}

.elementor .entete.est-defile.entete-sur-lac .logo-svg {
  width: 62px;
}

.elementor .entete.est-defile.entete-sur-lac .bouton-principal {
  min-height: var(--hauteur-bouton);
  padding: 0 20px;
  font-size: var(--taille-bouton);
}

.elementor .entete.est-defile.entete-sur-lac .burger {
  width: 52px;
}

body:not(.menu-ouvert) .elementor .entete-sur-lac .logo-l,
body:not(.menu-ouvert) .elementor .entete-sur-lac .logo-p {
  fill: var(--blanc);
}

body:not(.menu-ouvert) .elementor .entete-sur-lac .logo-survol {
  fill: var(--brique);
}

body:not(.menu-ouvert) .elementor .entete-sur-lac .burger::before,
body:not(.menu-ouvert) .elementor .entete-sur-lac .burger::after {
  background: var(--blanc);
}

/* Tablette */
@media (max-width: 1024px) {
  :root {
    --taille-propos-titre: clamp(36px, 6.4vw, 60px);
    --cadrage-lac: 42% 49.6%;
    --taille-phrase-propos: clamp(32px, 5.6vw, 52px);
    --hauteur-entete-compacte: 60px;
  }

  .elementor .entete.est-defile.entete-sur-lac .logo-svg {
    width: 46px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --taille-propos-titre: clamp(32px, 8.6vw, 40px);
    --largeur-propos-titre: 15ch;
    --cadrage-lac: 64% 49.6%;
    --nuit-lac-titre: rgba(9, 15, 24, .82);
    --forme-halo-lac: 60% 30%;
    --colonnes-propos: 4;
    --forme-halo-fond: 75% 30%;
  }
}

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .elementor .propos-lac::after {
    animation: none;
  }
}