/* ---------------- COLORS ----------------*/
  :root {
    /* Violets */
    --dark-violet: #3c2a8c;
    --violet: #5a41d4;
    --light-violet: #a89cf3;
  
    /* Bleus (cohérents avec les violets) */
    --primary-blue: #0a3db2;
    --dark-blue: #1e3a8a;
    --light-blue: #dbeafe;
  
    /* Neutres */
    --white: #ffffff;
    --light-gray: #f3f4f6;
    --medium-gray: #d1d5db;
    --dark-gray: #1f2937;
    --text-gray: #374151;
    --black: black;
  
    /* Accent - Vert */
    --light-green: #86efac;
    --green: #10b981; 
    --dark-green: #065f46; 

    /* Accent - Jaune */
    --yellow: #facc15;
    --dark-yellow: #92400e;

    /* Accent - Rouge */
    --light-red:#fca5a5 ;
    --red: #b20a0a;
    --dark-red: #7f1d1d;
  }
/* ----------------- RESET & BASE ----------------- */
*, *::after, *::before {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    font-family: normal, Arial, sans-serif;
  }
  
  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
 
  a{
    text-decoration: none;
/*     color:var(--dark-gray); */
  }
  a:visited{
    text-decoration: none;
/*     color: var(--dark-gray); */
  }

.whiteLink {
    color: var(--white);
  }
  
.whiteLink:visited {
    color: var(--white);;
  }

  h1{
    color: var(--dark-blue);
  }
  /* ----------------- FONTS ----------------- */
  @font-face {
    font-family: "star";
    src: url(/All_Star_Tower_Rater/assets/fonts/Starborn.ttf);
  }
  
  @font-face {
    font-family: "normal";
    src: url(/All_Star_Tower_Rater/assets/fonts/TT\ Lakes\ Neue\ Trial\ Medium.ttf);
  }
  
/* ----------------- HEADER & NAV ----------------- */
/* HEADER */
header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 9999;
  background-color: var(--dark-violet);
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* NAV container */
.nav {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  align-items: center;
  gap: 15px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Liens */
.nav a:not(.search-link, .clear-the-selection) {
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: background-color 0.3s;
 
}

.nav a:not(.search-link, .clear-the-selection):hover {
  background-color: var(--violet);
}

/* SEARCH */
.search-li {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
}

/* BURGER */
.burger {
  background-color: var(--dark-violet);
}

.burger summary {
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--white);
  user-select: none;
  list-style: none;
}

.burger ul {
  background-color: var(--dark-violet);
  padding: 0.5rem;
  margin-top: 0.5rem;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Responsive */
@media (max-width: 855px) {
  .tel{
    display: inline-block;
  }
  .desktop{
    display: none;
  }
}

@media (min-width: 855px) {
  .tel{
    display: none;
  }
  .desktop{
    display: inline-block;
  }
}

header .selected-page{
  border: var(--light-violet) solid 1px;
  border-radius: 2rem;
}
  /* ----------------- FOOTER ----------------- */
  footer {
    background-color: var(--dark-gray); /* bg-gray-800 */
    color: var(--white); /* text-white */
    padding-top: 2rem; /* py-8 */
    padding-bottom: 2rem;
    margin-top: 3rem; /* mt-12 */
}

footer .container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem;
    background-color: var(--dark-gray); /* bg-gray-800 */
}

footer .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem; /* gap-8 */
}

@media (min-width: 768px) {
    footer .grid {
        grid-template-columns: repeat(3, 1fr); /* md:grid-cols-3 */
    }
}

footer h3 {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    margin-bottom: 1rem; /* mb-4 */
}

footer p,
footer a {
    color: var(--medium-gray) /* text-gray-400 */
}

footer a:hover {
    color: var(--white); /* hover:text-white */
    text-decoration: underline;
    transition: color 0.2s ease, transform 0.2s ease;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer ul li {
    margin-bottom: 0.5rem; /* space-y-2 */
}

footer .flex {
    display: flex;
    gap: 1rem; /* space-x-4 */
}

footer .border-t {
    border-top: 1px solid var(--text-gray); /* border-gray-700 */
    margin-top: 2rem; /* mt-8 */
    padding-top: 1.5rem; /* pt-6 */
    text-align: center;
    color: var(--medium-gray); /* text-gray-400 */
}
footer .icon-chevron {
  margin-right: 0.5rem; /* mr-2 */
  width:16px; /* text-xl */
}
footer .icon-social {
    margin-right: 0.5rem; /* mr-2 */
    width:36px; /* text-xl */
}
  /* ----------------- SEARCH BAR ----------------- */
  .search {
    flex: 1;
    max-width: 300px;
    display: flex;
    gap: 10px;
  }
  .search img{
  width: 25px;
  }
  
  .search input[type="text"] {
    padding: 8px 12px;
    border: 1px solid var(--light-gray);
    border-radius: 5px;
    font-size: 16px;
  }
  
  .search button[type="submit"] {
    padding: 5px 10px;
    background-color: var(--light-violet);
    color: var(--white);
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .search button[type="submit"]:hover {
    background-color: var(--green);
  }
  .search-link{
    color: var(--dark-gray);
  }
  .search-link:visited{
    color: var(--dark-gray);
  }
  /* ----------------- SEARCH RESULTS ----------------- */
  .results {
    margin-top: 8px;
    background-color: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: 5px;
    max-width: 222px;
    position: absolute;
    z-index: 1000;
    transition: all 0.7s ease-in-out;
  }
  
  .results li {
    padding: 10px;
    border-bottom: 1px solid var(--light-gray);
    opacity: 0;
    animation: bloup 0.4s ease forwards;
    color: var(--dark-gray);
  }
  
  .results li:hover {
    background-color: var(--light-gray);
  }
  
  /* Animation cascade (fade in) */
  .results li:nth-child(1) { animation-delay: 0.05s; }
  .results li:nth-child(2) { animation-delay: 0.1s; }
  .results li:nth-child(3) { animation-delay: 0.15s; }
  .results li:nth-child(4) { animation-delay: 0.2s; }
  .results li:nth-child(5) { animation-delay: 0.25s; }
  .results li:nth-child(6) { 
    border-bottom: none;
    font-style: italic;
    color: var(--text-gray);
    animation-delay: 0.3s;
    /* width: 100%; Comment rendre la case cliquable ?*/
  }
  
  /* Message "aucun résultat" animé */
  .search + p {
    position: absolute;
    margin-top: 10px;
    font-style: italic;
    color: var(--text-gray);
    background-color: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: 5px;
    opacity: 0;
    animation: bloup 0.4s ease forwards;
  }
  .search-link{
    display: block;
  }
  /* ----------------- ANIMATIONS ----------------- */
  @keyframes bloup {
    from {
      opacity: 0;
      transform: translateY(5px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  /* ---- Anchors ----*/
  .anchor{
    color: var(--violet);
    background-color: var(--light-gray);
    border-radius: 4px;
  }
  .anchor:visited{
    color: var(--violet);
    background-color: var(--light-gray);
    border-radius: 4px;
  }
/** Skiplinks (source : https://chloecorfmat.fr/blog/2024/08/les-liens-dacces-rapide-ou-skiplinks-comment-aider-les-utilisateurs-a-naviguer-au-clavier-sur-votre-site/ **/
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}