/* ========================= */
/* PAGE ACCUEIL */
/* ========================= */

[data-page="home"] {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;

  background: #020617;
}

/* ========================= */
/* CARTE ACCUEIL */
/* ========================= */

[data-page="home"] .map-screen {
  position: absolute;
  inset: 0;

  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;
}

[data-page="home"] .map-container {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;
}

[data-page="home"] .map-image {
  position: absolute;
  inset: 0;
  z-index: 1;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: fill;
}

[data-page="home"] .svg-layer {
  position: absolute;
  inset: 0;
  z-index: 2;

  width: 100%;
  height: 100%;

  pointer-events: none;
}

[data-page="home"] .svg-layer svg {
  display: block;

  width: 100%;
  height: 100%;
}

[data-page="home"] .svg-layer [data-type],
[data-page="home"] .svg-layer .zone-svg {
  pointer-events: auto;
  cursor: pointer;
}

/* ========================= */
/* HOVER ZONES HOME DESKTOP */
/* ========================= */

@media (hover: hover) and (pointer: fine) {
  [data-page="home"] .svg-layer [data-type]:hover,
  [data-page="home"] .svg-layer .zone-svg:hover {
    fill: rgba(255, 220, 120, 0.12);

    filter: drop-shadow(0 0 4px rgba(255, 245, 210, 0.95))
      drop-shadow(0 0 10px rgba(255, 210, 90, 0.9))
      drop-shadow(0 0 18px rgba(255, 170, 40, 0.65));

    opacity: 1;
  }
}

/* ========================= */
/* FOOTER ACCUEIL */
/* ========================= */

[data-page="home"] .home-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(12px, 2vw, 28px);

  z-index: var(--z-ui);

  padding: 0 clamp(16px, 4vw, 60px);

  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  pointer-events: none;
}

/* ========================= */
/* BOUTONS GAUCHE */
/* ========================= */

[data-page="home"] .home-footer-left {
  display: flex;
  align-items: flex-end;
  gap: clamp(10px, 2vw, 24px);

  pointer-events: auto;
}

[data-page="home"] .home-footer-btn {
  display: block;

  padding: 0;
  border: none;
  background: transparent;

  cursor: pointer;
  pointer-events: auto;
}

[data-page="home"] .home-footer-btn img {
  display: block;
  width: auto;
  height: clamp(48px, 7vw, 95px);
}

[data-page="home"] .home-footer-btn:hover {
  transform: scale(1.04);
}

[data-page="home"] .home-footer-btn:active {
  transform: scale(0.96);
}

/* ========================= */
/* RÉSEAUX DROITE */
/* ========================= */

[data-page="home"] .home-footer-right {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: flex-end;

  pointer-events: auto;
}

[data-page="home"] .reseaux-wrapper {
  position: relative;
  display: block;

  width: fit-content;
  height: clamp(42px, 6vw, 80px);

  pointer-events: auto;
}

[data-page="home"] .reseaux-wrapper > img {
  display: block;
  width: auto;
  height: 100%;

  pointer-events: none;
}

[data-page="home"] .reseaux-layer {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 2;
  pointer-events: auto;
}

[data-page="home"] .reseaux-layer svg {
  display: block;

  width: 100%;
  height: 100%;

  pointer-events: auto;
}

[data-page="home"] .reseaux-layer [data-type],
[data-page="home"] .reseaux-layer .zone-svg {
  pointer-events: auto;
  cursor: pointer;
}

/* ========================= */
/* HOVER RÉSEAUX */
/* ========================= */

[data-page="home"] .reseaux-layer .zone-svg:hover,
[data-page="home"] .reseaux-layer [data-type]:hover {
  fill: rgba(255, 255, 255, 0.12);
}

/* ========================= */
/* MOBILE ACCUEIL TEMPORAIRE */
/* ========================= */

@media (max-width: 768px) {
  [data-page="home"] .home-footer {
    bottom: 10px;
    padding: 0 10px;
  }

  [data-page="home"] .home-footer-left {
    gap: 8px;
  }

  [data-page="home"] .home-footer-btn img {
    height: clamp(38px, 12vw, 62px);
  }

  [data-page="home"] .reseaux-wrapper {
    height: clamp(34px, 10vw, 56px);
  }
}

/* ========================= */
/* SÉLECTEUR DE LANGUE */
/* ========================= */

.home-language-selector {
  position: absolute;
  top: clamp(12px, 2vw, 28px);
  right: clamp(12px, 2vw, 28px);
  z-index: calc(var(--z-ui) + 1);

  pointer-events: auto;
}

.home-language-dropdown {
  position: relative;
}

.home-language-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 12px;

  border: 1px solid rgba(255, 245, 220, 0.55);
  border-radius: 999px;

  background: rgba(15, 23, 42, 0.72);
  color: #fff8ee;

  font-size: 0.95rem;
  font-weight: 700;

  cursor: pointer;

  backdrop-filter: blur(6px);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.home-language-toggle:hover {
  background: rgba(30, 41, 59, 0.82);
}

.home-language-icon {
  font-size: 1rem;
}

.home-language-arrow {
  font-size: 0.7rem;
  opacity: 0.85;
}

.home-language-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;

  min-width: 170px;
  max-height: 320px;

  overflow-y: auto;

  padding: 8px;

  border: 1px solid rgba(255, 245, 220, 0.45);
  border-radius: 14px;

  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(8px);

  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.home-language-menu[hidden] {
  display: none;
}

.home-language-option {
  display: block;

  width: 100%;

  padding: 8px 10px;

  border: none;
  border-radius: 10px;

  background: transparent;
  color: #fff8ee;

  font-size: 0.95rem;
  text-align: left;

  cursor: pointer;
}

.home-language-option:hover {
  background: rgba(255, 255, 255, 0.12);
}

.home-language-option.is-active {
  background: rgba(255, 220, 120, 0.22);
  font-weight: 800;
}

/* ========================= */
/* LANGUE ARABE */
/* ========================= */

.home-language-option[data-language="ar"] {
  font-size: 1.08rem;
}

.home-language-toggle:has(.home-language-current) {
  min-height: 38px;
}

/* ========================= */
/* FULLSCREEN ACCUEIL */
/* ========================= */

.home-fullscreen {
  position: absolute;

  top: 2%;
  right: 2%;

  bottom: auto;
  left: auto;

  z-index: var(--z-ui);
}

/* ========================= */
/* HOME SEO SECTION */
/* ========================= */

.home-seo-section {
  max-width: 900px;
  margin: 48px auto 24px;
  padding: 24px;

  font-family: system-ui, sans-serif;
  line-height: 1.6;

  color: #f7f1dc;
  background: rgba(20, 18, 12, 0.72);
  border-radius: 18px;
}

.home-seo-section h1 {
  margin-bottom: 16px;
  font-size: 2rem;
}

.home-seo-section p {
  margin-bottom: 14px;
}

.home-seo-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  margin-top: 18px;
}

.home-seo-links a,
.legal-footer a {
  color: #f5d36b;
  text-decoration: none;
  font-weight: 700;
}

.home-seo-links a:hover,
.legal-footer a:hover {
  text-decoration: underline;
}

/* ========================= */
/* LEGAL FOOTER HOME */
/* ========================= */

.legal-footer {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: calc(var(--z-ui) + 1);

  transform: translateX(-50%);

  max-width: 720px;
  padding: 6px 14px;

  font-family: system-ui, sans-serif;
  font-size: clamp(0.65rem, 0.8vw, 0.78rem);
  line-height: 1.35;

  color: rgba(255, 248, 230, 0.9);
  text-align: center;

  background: rgba(15, 23, 42, 0.45);
  border-radius: 999px;

  pointer-events: auto;
}

.legal-footer p {
  margin: 0;
}

.legal-footer a {
  color: #f5d36b;
  font-weight: 700;
  text-decoration: none;
}

.legal-footer a:hover {
  text-decoration: underline;
}

/* ========================= */
/* VIDÉO PRÉSENTATION HOME */
/* ========================= */

[data-page="home"] .home-video-presentation {
  position: absolute;

  top: 58%;
  right: clamp(18px, 3.2vw, 62px);

  z-index: calc(var(--z-ui) + 1);

  width: clamp(220px, 19vw, 340px);

  transform: translateY(-50%);

  pointer-events: auto;
}

/* ========================= */
/* CARTE VIDÉO */
/* ========================= */

[data-page="home"] .home-video-card {
  position: relative;

  display: block;

  width: 100%;
  aspect-ratio: 16 / 9;

  padding: 0;

  overflow: hidden;

  border: 3px solid rgba(245, 211, 107, 0.9);
  border-radius: clamp(12px, 1.4vw, 22px);

  background: #020617;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(57, 189, 248, 0.18);

  cursor: pointer;

  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

[data-page="home"] .home-video-card:hover {
  transform: scale(1.035);

  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.58),
    0 0 28px rgba(245, 211, 107, 0.32);
}

[data-page="home"] .home-video-card:active {
  transform: scale(0.98);
}

[data-page="home"] .home-video-card:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 5px;
}

/* ========================= */
/* MINIATURE */
/* ========================= */

[data-page="home"] .home-video-thumbnail {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

[data-page="home"] .home-video-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to top,
    rgba(2, 6, 23, 0.92) 0%,
    rgba(2, 6, 23, 0.2) 58%,
    rgba(2, 6, 23, 0.05) 100%
  );
}

/* ========================= */
/* BOUTON PLAY */
/* ========================= */

[data-page="home"] .home-video-play {
  position: absolute;

  top: 45%;
  left: 50%;

  display: grid;
  place-items: center;

  width: clamp(46px, 4vw, 68px);
  height: clamp(46px, 4vw, 68px);

  padding-left: 4px;

  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;

  color: #ffffff;
  background: rgba(2, 6, 23, 0.72);

  font-size: clamp(1.1rem, 1.7vw, 1.8rem);
  line-height: 1;

  transform: translate(-50%, -50%);

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

/* ========================= */
/* LIBELLÉ */
/* ========================= */

[data-page="home"] .home-video-label {
  position: absolute;

  left: 12px;
  right: 12px;
  bottom: 10px;

  color: #fff8e6;

  font-family: system-ui, sans-serif;
  font-size: clamp(0.78rem, 1vw, 1rem);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;

  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.95);
}

/* ========================= */
/* MODALE VIDÉO */
/* ========================= */

.home-video-modal {
  position: fixed;
  inset: 0;

  z-index: 10000;

  display: grid;
  place-items: center;

  padding: clamp(16px, 4vw, 52px);
}

.home-video-modal[hidden] {
  display: none;
}

.home-video-backdrop {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  padding: 0;
  border: none;

  background: rgba(2, 6, 23, 0.9);

  cursor: default;
}

.home-video-dialog {
  position: relative;
  z-index: 1;

  width: min(1100px, 94vw);

  overflow: hidden;

  border: 2px solid rgba(245, 211, 107, 0.8);
  border-radius: 18px;

  background: #020617;

  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.75),
    0 0 35px rgba(57, 189, 248, 0.2);
}

/* ========================= */
/* EN-TÊTE MODALE */
/* ========================= */

.home-video-header {
  min-height: 54px;

  padding: 10px 12px 10px 20px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;

  color: #fff8e6;
  background: rgba(15, 23, 42, 0.98);
}

.home-video-header h2 {
  margin: 0;

  font-family: system-ui, sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
}

.home-video-close {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;

  flex: 0 0 auto;

  padding: 0;
  border: 1px solid rgba(255, 248, 230, 0.45);
  border-radius: 50%;

  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);

  font-size: 1.8rem;
  line-height: 1;

  cursor: pointer;
}

.home-video-close:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ========================= */
/* LECTEUR YOUTUBE */
/* ========================= */

.home-video-player {
  width: 100%;
  aspect-ratio: 16 / 9;

  background: #000000;
}

.home-video-player iframe {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;
}

/* ========================= */
/* PAGE BLOQUÉE MODALE OUVERTE */
/* ========================= */

body.is-home-video-open {
  overflow: hidden;
}

/* ========================= */
/* RESPONSIVE VIDÉO HOME */
/* ========================= */

@media (max-width: 1100px) {
  [data-page="home"] .home-video-presentation {
    right: clamp(12px, 2vw, 20px);
    width: clamp(180px, 22vw, 300px);
  }
}

/*
 * La version mobile actuelle reste volontairement
 * inchangée pour éviter de surcharger l’accueil.
 */
@media (max-width: 900px) {
  [data-page="home"] .home-video-presentation {
    display: none;
  }
}

@media (max-width: 600px) {
  .home-video-modal {
    padding: 10px;
  }

  .home-video-dialog {
    width: 100%;
    border-radius: 12px;
  }

  .home-video-header {
    min-height: 48px;
    padding-left: 14px;
  }
}