/* --- VUE 360° PLEIN ÉCRAN --- */

.cadre-panoramique-total {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  
  /* Permet aux angles de la carte de ne pas déborder des coins arrondis de la tablette */
  
  /* Réactive la souris pour manipuler la vue interactive */
  pointer-events: auto; 
  
  /* Se place juste au-dessus du fond, mais sous la barre de boutons */
  z-index: 2; 
}

.cadre-panoramique-total iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* On s'assure que tes boutons restent visibles et cliquables par-dessus la carte */
.boutons {
  z-index: 10; 
}

/* --- PAGE : GALERIE VIDÉOS (6 BLOCS) --- */

/* Positionnement de la zone globale sur la tablette */
.zone-centrale-video {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  pointer-events: auto; /* Permet de cliquer sur les lecteurs vidéos */
}

/* Configuration de la grille à 6 rectangles */
.grille-videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes de largeur égale */
  gap: 20px; /* Espace entre les rectangles */ /* Active le scroll vertical interne si besoin */
  padding-right: 10px;
}

/* Style de chaque rectangle de vidéo */
/*
.carte-vide {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 10px;
  display: block;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, border-color 0.3s ease;
} */

.carte-video:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 184, 255, 0.4); /* Éclairage bleu au survol */
}

/* On force l'iframe à garder un ratio rectangulaire propre (16/9) */
.carte-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9; 
  border: none;
  border-radius: 8px;
  background-color: #000;
}

/* Style du titre sous chaque vidéo */
.titre-video {
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  margin: 0;
  padding-bottom: 5px;
}

/* 1. On s'assure que la carte vidéo est le repère pour le calque */
.carte-video {
    display: block;
    position: relative; /* Indispensable */
    text-decoration: none;
}

/* 2. On crée le calque invisible qui se superpose à l'iframe pour capter le clic */
.declencheur-lien {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* On l'ajuste pour qu'il couvre l'iframe mais laisse le titre <p> accessible au besoin */
    height: calc(100% - 40px); 
    z-index: 10; /* Passe devant l'iframe */
    cursor: pointer;
}



/* --- PAGE : PRÉSENTATION VIDÉO --- */

.cadre-video-total {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Masque les angles droits du lecteur vidéo pour épouser les bords de ta tablette */

  
  /* Réactive la souris pour pouvoir cliquer sur Play/Pause/Volume */
  pointer-events: auto; 
  
  /* S'aligne avec le même niveau que la page 360° */
  z-index: 2; 
  background-color: #000000; /* Fond noir pour l'effet cinéma derrière la vidéo */
}

.cadre-video-total iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* PHOTOS

/* Le conteneur prend 100% de la surface disponible */
.galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes de largeur égale */
    grid-template-rows: repeat(2, 1fr);    /* 2 lignes de hauteur égale */
    width: 100%;
    height: 670px;
    gap: 0; /* Pas d'espace entre les cadres pour fusionner l'effet de brume */
}

/* Le cadre qui va générer l'effet de brume par-dessus l'image */
.cadre-photo {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Application de l'effet de brume (ombre interne) */
.cadre-photo::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Ajuste le dernier chiffre (0.8) pour une brume plus ou moins opaque */
    box-shadow: inset 0 0 30px 15px rgba(255, 255, 255, 0.8); 
    pointer-events: none; /* Permet de pouvoir cliquer à travers si besoin */
    z-index: 2;
}

/* Ajustement de l'image pour qu'elle remplisse son cadre sans se déformer */
.cadre-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recadre proprement l'image automatiquement */
    display: block;
    z-index: 1;
}

.photo img {
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.art img{
  object-fit: contain;
}

/* --- PAGE : ARTICLES (3 IMAGES UNIQUEMENT) --- */

/* Positionnement de la zone sur l'écran de la tablette */
.zone-centrale-articles {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  width: 80%; /* Un peu plus serré pour que les bannières restent élégantes */
  height: 72%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  pointer-events: auto; /* Permet le défilement au survol */
}

/* Flux vertical scrollable pour les images */
.flux-images-articles {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 25px; /* Espace entre les 3 images */ /* Active le scroll vertical si les images dépassent la hauteur */
}

/* Comportement au survol de l'image */
.bloc-image-article:hover {
  transform: scale(1.02); /* Léger effet de zoom du bloc au survol */
  border-color: rgba(0, 184, 255, 0.5); /* Illumination bleue */
}

/* L'image elle-même */
.bloc-image-article img {
  width: 100%;
  height: auto; /* Conserve le ratio d'origine de l'image sans l'écraser */
  display: block;
}

.t1-img {
  width: 300px;
}

.t2-img {
  width: 500px;
}

.t3-img {
  width: 500px;
}

/* --- RESPONSIVE --- */
@media (max-width: 1000px) {
  .galerie {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 3 colonnes de largeur égale */
    grid-template-rows: repeat(1, 1fr);    /* 2 lignes de hauteur égale */
    width: 100%;
  }
  
  .cadre-photo {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .btn-s {
    
    bottom: -35px; /* Évite qu'ils ne sortent de l'écran */
  }
  
  .boutons a, 
  .boutons img {
    
    width: 24px !important;                                                                                              
    height: 22px !important;
 
  }
  
  /* Ajustement de l'image pour qu'elle remplisse son cadre sans se déformer */
  .cadre-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
  }
  
  .carte-video iframe {
    position: relative;
    left: 10%;
    width: 80%;
  }
  
  .titre-video {
    font-size: 2rem;
    font-weight: 200;
    padding-bottom: 10px;
  }
    
  .grille-videos {
    grid-template-columns: repeat(1, 1fr); 
  }
  
  .flux-images-articles {
    flex-direction: column;
    gap: 10em; 
  }
  .art-s img {
    object-fit: contain;
  }
  
  .s-photo img {
    object-fit: contain;
  }
  
}


@media (min-height: 800px) {
   .galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes de largeur égale */
    grid-template-rows: repeat(2, 1fr);    /* 2 lignes de hauteur égale */
    width: 100%;
    height: 890px;
    gap: 0; /* Pas d'espace entre les cadres pour fusionner l'effet de brume */
   }
}

@media (min-width: 1500px) {
    .zone-centrale-articles {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    width: 100%; /* Un peu plus serré pour que les bannières restent élégantes */
    height: 50%;
    gap: 20px;
    pointer-events: auto; /* Permet le défilement au survol */
  }
}

@media (max-width: 900px) {
  .grille-videos {
    grid-template-columns: repeat(2, 1fr); /* Passe à 2 colonnes sur tablette verticale */
  }
}

@media (max-width: 600px) {
  .grille-videos {
    grid-template-columns: 1fr; /* 1 seule colonne sur smartphone */
  }
  .zone-centrale-video {
    height: 78%;
  }
}