/* ================================
   VARIABLES & GÉNÉRAL
   ================================ */
:root {
  --color-bg: #10161A;
  --color-accent: #00ffe3;
  --color-white: #fff;
  --color-txt: #e9f1fa;
}
body {
  background: var(--color-bg);
  color: var(--color-txt);
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  margin: 0; padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
}


#qrResult {
  text-align: center;
  padding-top: 50px;
}

#qrResult a{
  text-decoration: none;
  color: #fff;
}

/* ================================
   HEADER & LANG SELECTOR
   ================================ */
.selector-lang {
  background: var(--color-bg);
  text-align: right;
  padding: 20px 30px;
  position: fixed;
  right: 0; top: 0;
  z-index: 10;
  width: 100%;
}
.selector-lang img {
  width: 32px; height: 22px;
  margin-left: 10px;
  cursor: pointer;
  filter: grayscale(30%) drop-shadow(0 0 4px #00ffe3aa);
  border-radius: 4px;
  transition: filter .2s, box-shadow .2s;
  box-shadow: 0 1px 6px #00ffe377;
}
.selector-lang img:hover, .selector-lang img.on {
  filter: grayscale(0%) drop-shadow(0 0 10px #00ffe3);
  box-shadow: 0 2px 12px #00ffe399;
}
header {
  display: flex;
  align-items: center;
  padding: 24px 32px 12px 32px;
  font-size: 2rem;
  background: transparent;
  position: fixed;
  top: 0; z-index: 11;
}
.logo {
  height: 56px; width: 56px;
  margin-right: -5px;
  vertical-align: middle;
}
.freelight-txt {
  font-weight: bold;
  color: var(--color-white);
  letter-spacing: 1.5px;
  font-size: 2.1rem;
  font-family: 'Orbitron', 'Inter', Arial, sans-serif;
}

/* ================================
   HERO SLOGAN
   ================================ */
.hero-slogan {
  text-align: center;
  font-size: 2.6rem;
  color: var(--color-accent);
  margin-top: 160px;
  letter-spacing: 0.8px;
  font-family: 'Ubuntu', 'Inter', Arial, sans-serif;
  font-weight: 700;
}

/* ================================
   ÉQUIPE (MEMBRES)
   ================================ */
.equipo-section {
  margin: 40px 0 0 0;
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 42px;
}
.membre-card {
  width: 180px;
  text-align: center;
  perspective: 800px;
  background: none;
  border-radius: 16px;
  box-shadow: 0 2px 18px rgba(0,0,0,0.10);
}
.flip-box {
  width: 100%; height: 220px;
  perspective: 800px;
  position: relative;
  margin-bottom: 12px;
}
.flip-inner {
  position: relative;
  width: 100%; height: 100%;
  transition: transform 0.6s cubic-bezier(.6,1.7,.6,.96);
  transform-style: preserve-3d;
  border-radius: 18px;
}
.flip-box:hover .flip-inner,
.flip-box.flipped .flip-inner {
  transform: rotateY(180deg);
}
.flip-front, .flip-back {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  backface-visibility: hidden;
  border-radius: 18px;
  overflow: hidden;
  background: #181c24;
  display: flex; align-items: center; justify-content: center;
}
.flip-front img, .flip-back img {
  width: 130px; height: 130px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 2px 10px #00ffe363;
  background: #0e1830;
  margin-top: 28px;
}
.flip-back { transform: rotateY(180deg); }
.membre-nom {
  margin: 14px 0 4px 0;
  color: var(--color-white);
  font-size: 1.2rem;
  font-weight: bold;
}
.membre-role {
  color: var(--color-white);
  font-size: 1.05rem;
  margin-bottom: 10px;
  letter-spacing: .5px;
  font-family: 'Space Mono', monospace;
}
/* Positionnement images portrait individuelles */
.equipo-section .membre-card:nth-child(1) .flip-back img { object-position: center 1%; }
.equipo-section .membre-card:nth-child(2) .flip-back img { object-position: center 8%; }
.equipo-section .membre-card:nth-child(3) .flip-back img { object-position: center 22%; }
.equipo-section .membre-card:nth-child(4) .flip-back img { object-position: center 8%; }
.equipo-section .membre-card:nth-child(5) .flip-back img { object-position: center 7%; }

/* ================================
   SLOGAN 2
   ================================ */
.slogan2 {
  text-align: center;
  color: #77ffef;
  font-size: 1.4rem;
  margin: 88px auto 0 auto;
  max-width: 650px;
  letter-spacing: 1px;
  font-weight: 500;
}

/* ================================
   SERVICES
   ================================ */
.services-section {
  margin: 56px auto 0 auto;
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 38px;
  max-width: 1100px;
}
.service-card {
  background: #18212b;
  border-radius: 18px;
  width: 220px; min-height: 180px;
  text-align: center;
  color: #def;
  margin-bottom: 32px;
  padding: 32px 20px 22px 20px;
  box-shadow: 0 1px 12px #00ffe322;
  transition: transform .18s cubic-bezier(.7,.1,.2,1);
}
.service-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 4px 22px #00ffe34a;
}
.service-icon {
  width: 52px; height: 52px; margin-bottom: 12px; margin-top: 0;
  filter: drop-shadow(0 0 8px #00ffe37a);
}
.service-title {
  color: var(--color-accent);
  font-size: 1.15rem;
  font-weight: bold;
  margin: 4px 0 6px 0;
  letter-spacing: 0.5px;
}
.service-desc {
  font-size: 1.02rem;
  color: #d3f6ff;
  line-height: 1.45;
  min-height: 36px;
}

/* ================================
   PHOTOS DE GROUPE
   ================================ */
.team-photo-section,
.photos-groupe {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 70px 0 0 0;
  padding: 0;
}
.team-photo-section img,
.photos-groupe img {
  max-width: 990px;
  width: 95vw;
  border-radius: 18px;
  box-shadow: 0 6px 30px #00ffe334;
  background: #181c24;
  margin: 0 auto;
  display: block;
}

/* ================================
   FOOTER
   ================================ */
footer {
  text-align: center;
  color: #667;
  font-size: 1.01rem;
  padding: 18px 0 12px 0;
  letter-spacing: 0.5px;
}

/* ================================
   FORMULAIRE DE CONTACT
   ================================ */
.contact-team-section, .contact-form-section {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 48px;
  margin: 70px auto 40px auto;
  max-width: 950px;
  background: #131a22;
  border-radius: 18px;
  box-shadow: 0 4px 26px #00ffe322;
  padding: 36px 26px;
}
.contact-form {
  flex: 1;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #e9f1fa;
  padding: 0 0 0 0;
}
.contact-form h2 {
  margin-top: 0;
  color: #00ffe3;
  font-family: 'Ubuntu', Arial, sans-serif;
  font-size: 1.7rem;
  margin-bottom: 14px;
}
.contact-form label {
  font-size: 1rem;
  color: #aafff7;
  margin-bottom: 3px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  border: none;
  border-radius: 7px;
  padding: 10px;
  font-size: 1.06rem;
  margin-bottom: 9px;
  background: #191f26;
  color: #fff;
  box-shadow: 0 1px 5px #00ffe321;
  outline: none;
  transition: box-shadow .2s;
}
.contact-form textarea {
  resize: none;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  box-shadow: 0 0 12px #00ffe39c;
}
.contact-form button {
  margin-top: 7px;
  background: linear-gradient(90deg, #00ffe3 40%, #0094b4 100%);
  color: #121619;
  font-weight: bold;
  font-size: 1.1rem;
  border: none;
  border-radius: 8px;
  padding: 11px 0;
  cursor: pointer;
  transition: background .22s;
  box-shadow: 0 3px 20px #00ffe322;
}
.contact-form button:hover {
  background: linear-gradient(90deg, #0094b4 10%, #00ffe3 90%);
}
.error-msg {
  background: #8e0000;
  font-size: 0.98em;
  padding: 5px;
  margin: 3px 0 9px 2px;
  display: block;
  min-height: 16px;
  transition: opacity 0.2s;
}

/* ================================
   RESPONSIVE ADAPTATIONS
   ================================ */
@media (max-width: 900px) {
  .equipo-section, .services-section {
    gap: 18px;
  }
  .membre-card { width: 140px; }
  .service-card { width: 94vw; max-width: 330px; }
  .team-photo-section img {
    max-width: 98vw;
    border-radius: 12px;
  }
  .contact-form-section {
    padding: 20px 0;
    margin: 24px 0 45px 0;
  }
  .contact-form-section form {
    padding: 18px 6vw;
    max-width: 99vw;
  }
}
@media (max-width: 600px) {
  header {
    margin-top: 50px;
    width: 231px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    top: auto;
    z-index: 1;
  }
  .hero-slogan {
    margin-top: 50px;
    font-size: 1.35rem;
  }
  .equipo-section { flex-direction: column; gap: 6vw; }
  .membre-card {
    width: 90vw;
    max-width: 99vw;
    margin: 0 auto;
  }
  .membre-role { margin-bottom: 40px; }
  .flip-box {
    height: 80vw;
    min-height: 180px;
    max-height: 350px;
    width: 80vw;
    margin: 0 auto;
  }
  .flip-front img, .flip-back img {
    width: 80vw;
    height: 80vw;
    max-width: 350px;
    max-height: 350px;
    min-width: 120px;
    min-height: 120px;
  }
  .services-section { flex-direction: column; gap: 12px; }
  .service-card {
    width: 95vw;
    max-width: calc(100% - 105px);
    margin-left: 10%;
  }
  .service-icon {
    width: 100px;
    height: 100px;
  }
  .photos-groupe img, .team-photo-section img { max-width: 99vw; }
  .contact-form-section,
  .contact-team-section {
    padding: 10px 0 !important;
    margin: 0 0 40px 0 !important;
  }
  .contact-form {
    width: 90vw !important;
    max-width: 95vw !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 18px 5vw 18px 5vw !important;
    box-sizing: border-box !important;
  }
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    font-size: 1rem !important;
    padding: 10px !important;
    margin-bottom: 8px !important;
  }
  .contact-form button {
    width: 100% !important;
    min-width: 120px !important;
    max-width: 250px !important;
    font-size: 1.05rem !important;
    padding: 10px 0 !important;
    margin: 12px auto 0 auto !important;

    border-radius: 8px !important;
  }
}

/* Modal feedback */
#modal-feedback-bg {
  position: fixed;
  z-index: 3000;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(25,35,40,0.47);
  backdrop-filter: blur(5px);
  transition: opacity .22s;
}
#modal-feedback {
  position: fixed;
  z-index: 4000;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 260px;
  max-width: 95vw;
  background: #121e26dd;
  box-shadow: 0 6px 40px #00ffe378, 0 1px 24px #222a;
  border-radius: 20px;
  padding: 40px 24px 28px 24px;
  text-align: center;
  color: #fff;
  font-family: Ubuntu, Arial, sans-serif;
  font-size: 1.25em;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  transition: opacity .18s, transform .3s;
  opacity: 1;
}
#modal-feedback-content {
  width: 100%;
  font-size: 1.21em;
  color: #00ffe3;
  line-height: 1.6;
  padding: 0 0 0 0;
}
#modal-feedback.success #modal-feedback-content {
  color: #31ffb9;
}
#modal-feedback.error #modal-feedback-content {
  color: #ff9494;
}