.entree-page {
  --e-fond-1: #EAF1FF;
  --e-fond-2: #FDEFF6;
  --e-lueur-1: rgba(62, 123, 216, .28);
  --e-lueur-2: rgba(224, 85, 154, .26);
  --e-lueur-3: rgba(242, 153, 74, .22);
  --e-carte: var(--fond-bloc);
  --e-carte-bord: rgba(26, 29, 58, .06);
  --e-carte-ombre: 0 24px 60px rgba(46, 52, 120, .16);
  --e-texte: var(--texte);
  --e-texte-2: var(--texte-secondaire);
  --e-champ: var(--fond-champ);
  --e-bord: var(--bord-champ);
  --e-bord-actif: var(--accent);
  --e-lueur-champ: var(--halo-champ);
  --e-lien: var(--accent);
  --e-bord-actif-uni: #C2387A;
  --e-objet: .9;
  --m-colline: #EEE8FA;
  --m-arbre-loin: #DCD3F4;
  --m-peau: #8A5A3C;
  --m-sol: #E3DCF5;
  --m-sol-avant: #D6CCF0;
  --m-arbre: #C3B6EC;
  --m-tronc: #9C8BD0;
  --m-etal: #B9825A;
  --m-nappe: #F3B6CF;
  --m-poteau: #6B6F91;
  --m-parasol-2: #1A1D3A;
}

.sombre .entree-page {
  --e-fond-1: #0B0F2E;
  --e-fond-2: #2A1452;
  --e-lueur-1: rgba(90, 80, 230, .38);
  --e-lueur-2: rgba(150, 60, 200, .34);
  --e-lueur-3: rgba(232, 110, 50, .30);
  --e-carte: var(--fond-bloc);
  --e-carte-bord: rgba(255, 255, 255, .07);
  --e-carte-ombre: 0 24px 70px rgba(0, 0, 0, .45);
  --e-bord-actif-uni: #FF8FC0;
  --e-objet: .9;
  --m-colline: #241E52;
  --m-arbre-loin: #2F2766;
  --m-peau: #6B4430;
  --m-sol: #3A3468;
  --m-sol-avant: #2E295A;
  --m-arbre: #4B3F8F;
  --m-tronc: #3A3070;
  --m-etal: #8A5A3C;
  --m-nappe: #B8487F;
  --m-poteau: #C5C8E4;
  --m-parasol-2: #F3F4FB;
}





html:has(.entree-page) body {
  background: var(--e-fond-1);
}

.entree-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  padding: 20px 16px 200px;
  color: var(--e-texte);
  background:
    radial-gradient(ellipse 30% 45% at 0% 45%, var(--e-lueur-3), transparent 70%),
    radial-gradient(ellipse 30% 50% at 100% 35%, var(--e-lueur-2), transparent 70%),
    radial-gradient(ellipse 45% 40% at 80% 95%, var(--e-lueur-1), transparent 70%),
    linear-gradient(165deg, var(--e-fond-1), var(--e-fond-2));
}





.entree-decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.entree-objet {
  position: absolute;
  width: var(--t, 32px);
  height: var(--t, 32px);
  opacity: var(--e-objet);
  pointer-events: none;
  animation: flotter var(--duree-ambiance) ease-in-out infinite alternate;
}



.eo1  { --t: 56px; top: 6%;  left: 4%; color: #E0559A; animation-delay: -1s; }
.eo2  { --t: 30px; top: 15%; left: 19%; color: #F2C94C; animation-delay: -4s; }
.eo3  { --t: 62px; top: 27%; left: 7%; color: #3E7BD8; animation-delay: -2s; }
.eo4  { --t: 22px; top: 40%; left: 22%; color: #F07167; animation-delay: -5s; }
.eo5  { --t: 58px; top: 51%; left: 2%; color: #7B4DE0; animation-delay: -3s; }
.eo6  { --t: 34px; top: 63%; left: 15%; color: #F2994A; animation-delay: -6s; }
.eo7  { --t: 20px; top: 3%;  left: 33%; color: #3E7BD8; animation-delay: -2.5s; }
.eo8  { --t: 54px; top: 7%;  right: 5%; color: #F2994A; animation-delay: -1.5s; }
.eo9  { --t: 34px; top: 18%; right: 20%; color: #7B4DE0; animation-delay: -3.5s; }
.eo10 { --t: 64px; top: 29%; right: 7%; color: #E0559A; animation-delay: -4.5s; }
.eo11 { --t: 24px; top: 42%; right: 23%; color: #F2C94C; animation-delay: -0.5s; }
.eo12 { --t: 52px; top: 53%; right: 3%; color: #3E7BD8; animation-delay: -5.5s; }
.eo13 { --t: 30px; top: 65%; right: 16%; color: #F07167; animation-delay: -2s; }
.eo14 { --t: 18px; top: 22%; left: 30%; color: #F2994A; animation-delay: -6.5s; }
.eo15 { --t: 40px; top: 2%;  right: 30%; color: #E0559A; animation-delay: -3s; }
.eo16 { --t: 26px; top: 70%; left: 29%; color: #7B4DE0; animation-delay: -1s; }
.eo17 { --t: 44px; top: 36%; left: 13%; color: #F2C94C; animation-delay: -2.2s; }
.eo18 { --t: 28px; top: 11%; left: 9%; color: #7B4DE0; animation-delay: -4.2s; }
.eo19 { --t: 46px; top: 44%; right: 13%; color: #F2994A; animation-delay: -1.2s; }
.eo20 { --t: 22px; top: 12%; right: 13%; color: #3E7BD8; animation-delay: -5.2s; }
.eo21 { --t: 36px; top: 58%; left: 26%; color: #E0559A; animation-delay: -3.2s; }
.eo22 { --t: 32px; top: 61%; right: 27%; color: #F2C94C; animation-delay: -6.2s; }



@keyframes flotter {
  from { transform: translateY(0) rotate(-10deg); }
  to   { transform: translateY(-14px) rotate(12deg); }
}


.entree-scene {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 190px;
}




.entree-retour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  width: min(560px, 100%);
  margin: 0 auto 8px;
  min-height: 44px;
  color: var(--e-texte);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.entree-retour svg {
  width: 20px;
  height: 20px;
}




.entree-carte {
  width: min(560px, 100%);
  padding: 32px 28px 28px;
  border: 1px solid var(--e-carte-bord);
  border-radius: 28px;
  background: var(--e-carte);
  box-shadow: var(--e-carte-ombre);
  animation: entree-monte var(--duree-mouvement) ease-out backwards;
}

@keyframes entree-monte {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.entree-marque {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.entree-logo {
  width: auto;
  height: var(--logo-entree);
}

.entree-nom {
  margin-top: 10px;
  line-height: 0;
}

.entree-nom-trace {
  height: 36px;
}

.entree-accroche {
  margin-top: 6px;
  color: var(--e-texte-2);
  font-size: 15px;
}

.entree-titre {
  margin-top: 26px;
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.2;
}

.entree-sous-titre {
  margin-top: 6px;
  color: var(--e-texte-2);
  text-align: center;
  font-size: 15px;
  line-height: 1.45;
}

.entree-erreur {
  margin-top: 18px;
}



.entree-formulaire {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}

.entree-libelle {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
}


.entree-champ {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 6px 0 20px;
  border: 1.5px solid var(--e-bord);
  border-radius: 28px;
  background: var(--e-champ);
  color: var(--e-texte-2);
}

.entree-champ > svg {
  flex: none;
  width: 21px;
  height: 21px;
}




.entree-champ::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 33px;
  box-shadow: 0 0 0 4px var(--e-lueur-champ);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duree-mouvement) ease-out;
}

.entree-champ:focus-within {
  border-color: var(--e-bord-actif);
  color: var(--e-texte);
}

.entree-champ:focus-within::after {
  opacity: 1;
}

.entree-champ[data-faute] {
  border-color: var(--alerte);
}

.entree-champ input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  color: var(--e-texte);
  font: inherit;
  
  font-size: 16px;
}

.entree-champ input:focus {
  outline: none;
}

.entree-champ input::placeholder {
  color: var(--e-texte-2);
  opacity: .75;
}


.entree-oeil {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 22px;
  background: none;
  color: var(--e-texte-2);
  cursor: pointer;
}

.entree-oeil svg {
  width: 22px;
  height: 22px;
}

.entree-aide {
  margin-top: 6px;
  padding-left: 20px;
  color: var(--e-texte-2);
  font-size: 13px;
}

.entree-aide-faute {
  color: var(--alerte);
}





.entree-bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 58px;
  margin-top: 8px;
  border: none;
  border-radius: 29px;
  background: var(--accent);
  color: var(--sur-aplat);
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--duree-mouvement) ease-out;
  -webkit-tap-highlight-color: transparent;
}

.entree-bouton:active {
  transform: scale(.97);
  transition-duration: 0s;
}

.entree-bouton svg {
  width: 22px;
  height: 22px;
}

.entree-bouton:focus-visible {
  outline: 3px solid var(--e-bord-actif);
  outline-offset: 3px;
}


.entree-bouton-danger {
  background: var(--alerte);
  color: var(--fond-bloc);
}



.suppression-effets {
  margin-top: 12px;
  padding-left: 20px;
  color: var(--e-texte-2);
  text-align: left;
  font-size: 15px;
  line-height: 1.45;
  list-style: disc;
}

.suppression-effets li + li {
  margin-top: 6px;
}

.suppression-renoncer {
  justify-content: center;
  width: 100%;
}

.suppression-accueil {
  margin-top: 18px;
  text-decoration: none;
}


.lien-supprimer-compte {
  display: block;
  color: var(--alerte);
  text-align: center;
  font-size: 15px;
  line-height: 44px;
}



.entree-liens {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 14px;
}


.entree-lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--e-lien);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.entree-lien-discret {
  color: var(--e-texte-2);
  font-weight: 500;
}

.entree-bascule {
  color: var(--e-texte-2);
  font-size: 15px;
}

.entree-bascule .entree-lien {
  margin-left: 4px;
}




.menu-marque {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--texte);
}

.menu-logo {
  width: auto;
  height: 32px;
}

.menu-nom {
  height: 20px;
}

.param-tete {
  margin-bottom: 18px;
  text-align: center;
}

.param-tete .entree-titre {
  margin-top: 0;
}

.param-marque {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}

.param-logo {
  width: 64px;
  height: 64px;
}

.param-logo-lien {
  display: block;
  flex: none;
  border-radius: var(--rayon-bloc);
}

.param-logo-lien:active {
  opacity: .8;
}

.param-salut {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.param-bonjour {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.param-liste {
  display: flex;
  flex-direction: column;
}




.param-entree {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 64px;
  padding: 10px 6px;
  border: none;
  border-radius: 14px;
  background: none;
  color: var(--e-texte);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}




.param-liste > .param-entree + .param-entree,
.param-liste + .param-liste > .param-entree:first-child {
  border-top: none;
  background: linear-gradient(var(--e-carte-bord), var(--e-carte-bord)) no-repeat 64px 0 / calc(100% - 64px) 1px;
}

.param-pastille {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 21px;
  background: var(--pc-fond);
  color: var(--pc);
}

.param-pastille svg {
  width: 22px;
  height: 22px;
}



.pc-violet { --pc: #6A4FD8; --pc-fond: rgba(106, 79, 216, .14); }
.pc-rose   { --pc: #D9488A; --pc-fond: rgba(217, 72, 138, .14); }
.pc-bleu   { --pc: #2F63B8; --pc-fond: rgba(47, 99, 184, .14); }
.pc-orange { --pc: #C86A1E; --pc-fond: rgba(242, 153, 74, .18); }

.sombre .pc-violet { --pc: #B9A8FF; --pc-fond: rgba(141, 124, 240, .22); }
.sombre .pc-rose   { --pc: #FF8FC0; --pc-fond: rgba(224, 85, 154, .22); }
.sombre .pc-bleu   { --pc: #8DB6F5; --pc-fond: rgba(62, 123, 216, .24); }
.sombre .pc-orange { --pc: #FFB36B; --pc-fond: rgba(242, 153, 74, .22); }

.param-libelle {
  flex: 1;
}

.param-chevron {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--e-texte-2);
}

.param-entree .menu-pastille {
  margin-left: 0;
}







.param-langue {
  flex-wrap: wrap;
  row-gap: 8px;
  cursor: default;
}

.langue-choix {
  display: flex;
  flex: none;
  gap: 6px;
  margin-left: auto;
}


.langue-bouton {
  min-height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--e-carte-bord);
  border-radius: 22px;
  background: none;
  color: var(--e-texte-2);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.langue-bouton[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--sur-aplat);
}

.param-interrupteur {
  position: relative;
  flex: none;
  width: 52px;
  height: 30px;
  border-radius: 15px;
  background: var(--e-carte-bord);
  box-shadow: inset 0 0 0 1.5px var(--e-texte-2);
}

.param-interrupteur::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--e-texte-2);
}

.sombre .param-interrupteur {
  background: var(--accent);
  box-shadow: none;
}

.sombre .param-interrupteur::after {
  background: var(--sur-aplat);
  transform: translateX(22px);
}

.param-sortie {
  color: var(--e-bord-actif-uni);
}




.param-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-height: 100dvh;
  padding: 16px 16px 40px;
  background: var(--fond-page);
  color: var(--texte);
  --e-carte-bord: var(--bordure);
  --e-carte-ombre: var(--ombre-bloc);
  --e-texte: var(--texte);
  --e-texte-2: var(--texte-secondaire);
  --e-champ: var(--fond-champ);
  --e-bord: var(--bord-champ);
  --e-bord-actif: var(--accent);
  --e-lueur-champ: var(--halo-champ);
  --e-lien: var(--accent);
  --e-carte: var(--fond-bloc);
}

.param-page > .entree-retour {
  margin-bottom: 0;
}



.compte-profil {
  display: flex;
  align-items: center;
  gap: 16px;
}

.compte-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 32px;
  background: var(--pc-fond);
  color: var(--pc);
}

.compte-avatar svg {
  width: 32px;
  height: 32px;
}

.compte-prenom {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.compte-profil .param-mention {
  margin-top: 2px;
}


.param-info {
  cursor: default;
}

.param-texte {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.param-sous {
  color: var(--texte-secondaire);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}

.param-valeur {
  overflow-wrap: anywhere;
}

.param-vide {
  color: var(--texte-discret);
}

.param-bouton svg {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

.param-statut {
  margin-top: 10px;
  color: var(--texte-secondaire);
  font-size: 14px;
}



.param-section + .param-section,
.param-rangees + .param-section {
  margin-top: 18px;
}

.param-section-tete {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.param-section-tete h2 {
  font-size: 18px;
  font-weight: 700;
}

.param-mention {
  color: var(--e-texte-2);
  font-size: 14px;
  line-height: 1.45;
}

.param-mention + .param-mention {
  margin-top: 4px;
}

.param-section .entree-formulaire {
  margin-top: 16px;
}



.param-bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin-top: 14px;
  padding: 0 20px;
  border: 1.5px solid var(--e-lien);
  border-radius: 26px;
  background: none;
  color: var(--e-lien);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duree-mouvement) ease-out;
  -webkit-tap-highlight-color: transparent;
}

.param-bouton:active {
  transform: scale(.97);
  transition-duration: 0s;
}

.param-section .entree-formulaire .param-bouton {
  margin-top: 0;
}

.param-bandeau {
  margin-bottom: 16px;
}

@media (min-width: 600px) {
  .entree-page {
    padding-top: 40px;
  }

  .entree-carte {
    padding: 40px 44px 32px;
  }

  .entree-nom-trace {
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .entree-objet {
    animation: none;
  }

  .entree-carte {
    animation: none;
  }

  .entree-champ::after {
    transition: none;
  }

  .entree-bouton {
    transition: none;
  }

  .entree-bouton:active {
    transform: none;
  }

  .param-bouton {
    transition: none;
  }

  .param-bouton:active {
    transform: none;
  }
}


.param-formulaire {
  margin-top: 0;
}


.param-page .vendeur-tete {
  padding-bottom: 0;
  border-bottom: none;
}




.param-haut {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: min(560px, 100%);
  margin: 0 auto 8px;
}

.param-haut .entree-retour {
  min-width: 0;
  width: auto;
  margin: 0;
}

.param-haut .entree-retour span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}