/*==========GLOBAL==============*/

:root {
    --bg: #25212A;
    --text: #F8F5F0;
    --red: #E45B0A;  
    --blue:#1D38B9;
    --font-body: "Helvetica", "Arial", sans-serif;
    --font-size-body: 18px;
    --line-height-body: 1.6;
  }
  
@font-face {
    font-family: "NewYork";
    src: url("assets/typefaces/new-york.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
  }
  
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
  }

  /* Espacement des paragraphes */  
  p {
    margin-bottom: 20px;
  }

/* Était z-index: -1 ; height: 100% */
canvas {
  position: fixed;
  inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -1;
  pointer-events: none;  /* les clics passent toujours à la page */
}

/* En-tête */
.site-header {
    position: relative;         
    z-index: 10;            
    background: var(--bg);
    padding: 20px 24px;
    font-family: "NewYork", serif; 
}

  .site-header .inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .site-header .logo img {
    height: 32px; width: auto; display: block;
    transition: opacity 0.2s ease;
  }

  .site-header .logo:hover img {
    content: url("assets/images/logo-red.png"); /* logo rouge au survol */
  }

  .site-header nav ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: clamp(20px, 6vw, 56px);
  }
  .site-header nav a {
    color: var(--text);
    text-decoration: none;
    font-size: 24px;
    position: relative;
    padding-bottom: 4px;
    transition: color .2s ease;
  }
  .site-header nav a::after {
    content: ""; position: absolute; left:0; right:0; bottom:0;
    height: 2px; background: currentColor;
    transform: scaleX(0); transform-origin: left;
    transition: transform .22s ease;
  }
  .site-header nav a:hover { color: var(--red); }
  .site-header nav a:hover::after { transform: scaleX(1); }
  .site-header nav a[aria-current="page"] { color: var(--red); }
  .site-header nav a[aria-current="page"]::after { transform: scaleX(1); }
  
/* Pied de page */
.site-footer {
    position: relative;
    z-index: 20;
    background: var(--bg);
    padding: 40px 24px;
    margin-top: 56px;
    font-family: "NewYork", serif;
}

.site-footer .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* nav | logo | slogan */
  align-items: center;
  gap: 24px;
  z-index: 21;
}

.site-footer .footer-nav {
  justify-self: start;
}

.site-footer .footer-logo {
  justify-self: center; /* force le logo au centre */
}

.site-footer .footer-tagline {
  justify-self: end;
  text-align: right;
}

  .site-footer .footer-nav ul{
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 12px;
  }
  .site-footer .footer-nav a{
    color: var(--text); text-decoration: none; font-size: 16px;
    transition: color .2s ease;
  }
  .site-footer .footer-nav a:hover{ color: var(--red); }
  .site-footer .footer-logo img{ height: 40px; width:auto; display:block; }
  .site-footer .footer-tagline{ font-size:14px; max-width:260px; text-align:right; }

/* Échange du logo dans le pied de page */
.site-footer .footer-logo img {
    content: url("assets/images/logo.png");   /* par défaut */
    transition: opacity 0.2s ease;
  }
  .site-footer .footer-logo:hover img {
    content: url("assets/images/logo-red.png"); /* logo rouge au survol */
  }

  #animated-text-2 {
    font-family: "NewYork", serif;
    font-size: 16px;
    color: white;
    max-width: 260px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    border-right: 2px solid rgba(248,245,240,.7);
    animation: blinkCursor .7s infinite;
  }
  @keyframes blinkCursor { 50% { border-color: transparent; } }
  
  
/* ======== ACCUEIL =========*/

  .bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;   /* s’assure que la vidéo couvre l’écran */
    z-index: -2;         /* placé derrière tout */
  }

/* Premier bloc de texte (aligné à droite) */
.instrucciones-container {
    margin: 80px 40px 80px auto;
    font-size: 18px;
    line-height: 1.6;
    max-width: 600px;
    text-align: left;
  }
  
/* Deuxième bloc de texte (aligné à gauche) */
/* Conteneur : texte à gauche + bouton à droite */
.instrucciones-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin: 80px 40px;
  }
  
/* Colonne de gauche (texte) */
  .instrucciones-container-dos {
    flex: 1;
    max-width: 600px;
    font-size: 18px;
    line-height: 1.6;
    text-align: left;
  }
  
  .instrucciones-container-dos p {
    margin-bottom: 20px;
  }
  
/* Bouton à droite */
  .btn-map {
    display: inline-block;
    background: var(--red);
    color: var(--text);
    font-family: "NewYork", serif;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    padding: 10px 150px;
    border-radius: 30px;
    transition: background 0.3s ease, transform 0.2s ease;
    text-align: center;
    white-space: nowrap;
    height: fit-content;
    margin-top: 20px;
  }
  
/* Survol : couleur rouge claire */
  .btn-map:hover {
    background: #E08D5D;  /* rouge au survol */
  }
  
/* Flèche */

  .scroll-arrow {
    text-align: center;
    margin: 20px 0;
  }
  
  .scroll-arrow img {
    width: 40px;
    height: auto;
    cursor: pointer;
    animation: bounce 2s infinite;
  }
  
/* Animation simple de rebond */
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(8px);
    }
    60% {
      transform: translateY(4px);
    }
  }
  
  html {
    scroll-behavior: smooth;
  }  


/* ======== QUE FAIRE ? =========*/

  .whattodo {
    max-width: 95%;
    margin: 60px auto;
    padding: 0 40px;
  }  

  .whattodo h2 {
    font-family: "NewYork", serif;
    font-size: 32px;  
    font-weight: normal;
    text-align: center;
    margin: 40px auto 50px;  
    line-height: 1.4;
    color: var(--text);
  }
  
.whattodo .steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* ligne 1 : 3 colonnes */
  gap: 50px 40px;
  align-items: start;
  margin: 32px 0;
  padding: 32px 0;
}

.whattodo .steps-row:nth-of-type(2),
.whattodo .steps-row:nth-of-type(3) {
  grid-template-columns: repeat(2, 350px);
  justify-content: center;
  gap: 50px;
}

/* Chaque étape : placer l’icône au-dessus du texte */
.whattodo .step {
  display: grid !important; 
  grid-template-rows: auto 1fr;
  gap: 15px;
  text-align: left;
}

/* Icône : grande et centrée */
.whattodo .step img {
  width: 60px;                           
  height: auto;
  margin: 0 auto;                       
  display: block;
  margin-bottom: 20px;
}

/* Titres + listes */
.whattodo .step h3 {
  font-family: "NewYork", serif;
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--red);
}
.whattodo .step ul {
  list-style: disc;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

/* Responsive */
@media (max-width: 1100px) {
  .whattodo .steps-row { grid-template-columns: 1fr 1fr; }
  .whattodo .steps-row:nth-of-type(2),
  .whattodo .steps-row:nth-of-type(3) { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .whattodo .steps-row { grid-template-columns: 1fr; }
  .whattodo .step img { width: 64px; }
  .whattodo h2 { font-size: 20px; }
}

.map-button {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}


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

#animated-text {
  position: fixed;
  top: 20%;
  left: 90%;
  transform: translate(-50%, -50%);
  font-family: "NewYork", serif;
  color: var(--text);
  font-size: 20px;
  text-transform: uppercase;
 /* Évite que le texte se divise en plusieurs lignes */
  overflow: hidden;
  border-right: 3px solid, --text;
  padding-right: 5px;
  animation: blinkCursor 0.7s infinite;
}

/* Clignotement du curseur */
@keyframes blinkCursor {
  50% {
      border-color: transparent;
  }
}

.container{
  display:grid;
  grid-template-columns: minmax(640px,1fr) 360px;  /* carte | barre latérale */
  gap:24px;
  padding: 24px 40px 40px;
  align-items:start;
  z-index: 4; 
}


/* Réinitialisation des styles */
* {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}


@media (max-width: 800px) {
  .sidebar {
      position: static;
      width: 100%;
      margin-top: 20px;
  }
}

#map {
  
  flex: none;/* Réinitialisation des styles */
  width: 90%; 
  height: 80vh; /* Ne prend pas toute la hauteur */
  background-color: var(--bg);
  border-radius: 8px; 
 }

.rightside{
  position: sticky;
  max-width:100%;

}

 .sidebar{
  top: 96px;
  align-self:start;
  border:4px solid, var(--text);
  border-radius:12px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Barre de recherche */
#searchBox{
  width:100%;
  padding:12px 14px;
  font-size:16px;
  border:1px solid, var(--text);
  border-radius:50px;
}

/* Bouton de recherche */
#searchBtn {
  width: 100%;
  padding: 10px;
  font-size: 18px;
  background: var(--red);
  color: var(--text);
  border-radius: 50px;
  cursor: pointer;
  border: none;
  font-family: "NewYork", serif;
  transition: 0.3s ease;
}

#searchBtn:hover,
#searchBtn:active {
  background: #E08D5D;  /* rouge au survol */
}

/* Street View */
#street-view {
  width: 100%;
  height: 200px;
  background:var(--text);
  border-radius: 50px;
}

/* Bouton "Ajouter une localisation" */
#addLocationBtn {
  width: 100%;
  padding: 10px;
  font-size: 18px;
  background: var(--red);
  color: var(--text);
  border-radius: 50px;
  cursor: pointer;
  border: none;
  font-family: "NewYork", serif;
  transition: 0.3s ease;
}

#addLocationBtn:hover {
  background: #E08D5D;  /* rouge au survol */
}

/* Bouton "Supprimer la dernière localisation" */
#removeLastMarkerBtn {
  width: 100%;
  padding: 10px;
  font-size: 18px;
  background: var(--red);
  color: var(--text);
  border-radius: 50px;
  cursor: pointer;
  border: none;
  font-family: "NewYork", serif;
  transition: 0.3s ease;
}

#removeLastMarkerBtn:hover,
#removeLastMarkerBtn:active {
  background: #E08D5D;  /* rouge au survol */

}

.btn-whattodo {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 18px;
  font-family: "NewYork", serif;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  background: var(--blue);        
  border-radius: 50px;
}

.btn-whattodo:hover {
  background: #6980ED;
}


/* Styles pour la fenêtre modale */

.house-confetti {
  position: fixed;
  font-size: 30px;
  animation: fall 1.5s linear forwards;
  pointer-events: none;
  z-index: 9999;
}

.modal{
  display:none;         /* cachée par défaut ; JS la met en flex lorsqu’ouverte */
  position:fixed;
  inset:0;
  z-index:2000;
  background: rgba(0,0,0,.50);   /* assombrit la page derrière */
  align-items:center;
  justify-content:center;
  padding:24px;
}


/* Contenu de la fenêtre */
.modal-content{
  position:relative;
  width:min(560px, 92vw);
  background:var(--bg);
  color:var(--text);
  border:3px solid, var(--text);
  border-radius:40px;
  padding:30px;
  text-align:center;
  
}

/* Titre */
.modal-content h2{
  margin:0 0 14px;
  font-family: "NewYork", serif;
  font-size:22px;
  font-weight:normal;
  text-align:center;
}

/* Bouton fermer “×” */
.close-btn{
  position:absolute;
  top:10px;
  right:14px;
  font-size:40px;
  line-height:1;
  cursor:pointer;
  color:var(--text);
  transition:opacity .2s ease;
}
.close-btn:hover{ opacity:.65; }


/* Champ de saisie */
#noteInput{
  width:100%;
  background:var(--text);
  color:var(--bg);
  font:16px/1.2 var(--font-body);
  border:0;
  border-radius:22px;
  padding:14px 16px;
  margin:6px 0 14px;
}

/* Bouton Enregistrer */
#saveNoteBtn{
  display:block;
  width:100%;
  border:0;
  border-radius:22px;
  padding:12px 16px;
  font:18px "NewYork", serif;
  letter-spacing:.2px;
  color:var(--text);
  background:var(--red);
  cursor:pointer;
  transition:background .2s ease, transform .05s ease, opacity .2s ease;
}
#saveNoteBtn:hover{ background:#E08D5D; }
#saveNoteBtn:active{ transform:translateY(1px); }

/* Variante de la boîte de dialogue d’alerte */
.modal-content.alert{
  background:var(--bg);
  color:var(--text);
  border:3px solid, var(--text);
  border-radius:24px;
  width:min(520px, 92vw);
  padding:22px 24px 20px;
  text-align:center;
}
.modal-content.alert h2{
  font-family:"NewYork", serif;
  margin:0 0 8px;
  font-size:22px;
  font-weight:normal;
  letter-spacing:.5px;
}
.modal-content.alert p{
  margin:0 0 14px;
  opacity:.9;
  font-family: var(--font-body);
  font-size:14px;
}
.modal-content.alert #alertOkBtn{
  display:block;
  width:80%;
  margin:0 auto;
  border:0;
  border-radius:22px;
  padding:12px 16px;
  font:18px "NewYork", serif;
  color:var(--text);
  background:var(--red);
  cursor:pointer;
  transition:background .2s ease, transform .05s ease;
}
.modal-content.alert #alertOkBtn:hover{ background:#E08D5D; }
.modal-content.alert #alertOkBtn:active{ transform:translateY(1px); }

/* Menu déroulant Google Places Autocomplete */
.pac-container {
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid var(--text);
  background: var(--text);
  color: var(--bg);
  z-index: 99999;
  font-family: var(--font-body);
}

.pac-item {
  padding: 10px 14px;
  cursor: pointer;
}

.pac-item:hover {
  background: var(--text);
}

.pac-item .pac-icon {
  display: none;
}

/* Texte correspondant */
.pac-item-query {
  font-weight: 700;
}

/* Garder l’apparence arrondie de l’input cohérente avec le design */
#searchBox {
  background: var(--text);
  color: var(--bg);
  outline: none;
}

/* Curseur basé en CSS pour la page carte afin d’éviter les ralentissements JS */
body.map-page, body.map-page * {
  cursor: url("assets/images/cursor.svg") 16 16, auto !important;
}