/* ============================================================
   SEO & Developer & Robots Notes :
   - Veillez à ce que ce fichier CSS ne soit pas bloqué par robots.txt svp,
     afin que les moteurs de recherche puissent correctement rendre ma page.
   ============================================================ */

   body {
    margin: 0;
    background: black;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
  }
  
  #canvas {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 0;
  }
  
  a {
    text-decoration: none;
  }
  
  /* Effet machine à écrire pour le titre principal */
  /* Une typographie dynamique et engageante contribue à une meilleure expérience utilisateur */
  .typewriter h1 {
    color: #fff;
    font-family: poppins, sans-serif;
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: .15em;
    text-align: center;
    width: max-content;
    margin-top: 200px;
    animation: 
      typing 3s steps(30, end),
      blink-caret .5s step-end infinite;
  }
  
  @keyframes typing {
    from { width: 0 }
    to { width: 37ch; }
  }
  
  @keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: rgb(0, 162, 255); }
  }
  
  /* Bloc centré pour la carte de contenu */
  /* Ce conteneur permet une mise en page centralisée, facilitant la lisibilité et l'accessibilité */
  .outer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 300px;
    height: 250px;
    border-radius: 10px;
    padding: 1px;
    background: radial-gradient(circle 230px at 0% 0%, #ffffff, #0c0d0d);
  }
  
  /* Dot animé pour dynamiser l'interface */
  .dot {
    width: 5px;
    aspect-ratio: 1;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 0 10px #ffffff;
    border-radius: 100px;
    z-index: 2;
    right: 10%;
    top: 10%;
    animation: moveDot 6s linear infinite;
  }
  
  @keyframes moveDot {
    0%, 100% {
      top: 10%;
      right: 10%;
    }
    25% {
      top: 10%;
      right: calc(100% - 35px);
    }
    50% {
      top: calc(100% - 30px);
      right: calc(100% - 35px);
    }
    75% {
      top: calc(100% - 30px);
      right: 10%;
    }
  }
  
  /* Style de la carte centrale avec animation de survol pour l'effet néon */
  /* L'animation améliore l'aspect visuel sans compromettre la performance */
  .card {
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 9px;
    border: solid 1px #202222;
    background: radial-gradient(circle 280px at 0% 0%, #444444, #0c0d0d);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-direction: column;
    color: #fff;
    transition: box-shadow 0.5s ease;
    box-shadow: none;
  }
  
  @keyframes neonRainbow {
    0% {
      box-shadow: 0 0 5px rgba(18, 54, 255, 0.3), 
                  0 0 8px rgba(0, 167, 245, 0.3), 
                  0 0 10px rgba(0, 110, 255, 0.3), 
                  0 0 12px rgba(1, 48, 151, 0.3);
    }
    16% {
      box-shadow: 0 0 5px rgba(18, 54, 255, 0.3), 
                  0 0 8px rgba(0, 167, 245, 0.3), 
                  0 0 10px rgba(0, 110, 255, 0.3), 
                  0 0 12px rgba(1, 48, 151, 0.3);
    }
    33% {
      box-shadow: 0 0 5px rgba(0,255,0,0.3), 
                  0 0 8px rgba(0,255,0,0.3), 
                  0 0 10px rgba(0,255,0,0.3), 
                  0 0 12px rgba(0,255,0,0.3);
    }
    50% {
      box-shadow: 0 0 5px rgba(0,255,255,0.3), 
                  0 0 8px rgba(0,255,255,0.3), 
                  0 0 10px rgba(0,255,255,0.3), 
                  0 0 12px rgba(0,255,255,0.3);
    }
    66% {
      box-shadow: 0 0 5px rgba(0,0,255,0.3), 
                  0 0 8px rgba(0,0,255,0.3), 
                  0 0 10px rgba(0,0,255,0.3), 
                  0 0 12px rgba(0,0,255,0.3);
    }
    83% {
      box-shadow: 0 0 5px rgba(255,0,255,0.3), 
                  0 0 8px rgba(255,0,255,0.3), 
                  0 0 10px rgba(255,0,255,0.3), 
                  0 0 12px rgba(255,0,255,0.3);
    }
    100% {
      box-shadow: 0 0 5px rgba(18, 54, 255, 0.3), 
                  0 0 8px rgba(0, 167, 245, 0.3), 
                  0 0 10px rgba(0, 110, 255, 0.3), 
                  0 0 12px rgba(1, 48, 151, 0.3);
    }
  }
  
  .card:hover {
    animation: neonRainbow 2s ease-in-out 0.02s infinite;
  }
  
  /* Rayon décoratif placé derrière la carte */
  .ray {
    width: 220px;
    height: 45px;
    border-radius: 100px;
    position: absolute;
    background-color: #c7c7c7;
    opacity: 0.4;
    box-shadow: 0 0 50px #fff;
    filter: blur(10px);
    transform-origin: 10%;
    top: 0;
    left: 0;
    transform: rotate(40deg);
  }
  
  /* Style du titre principal de la carte avec effet de dégradé */
  /* Utilisation de background-clip pour un rendu moderne et soigné */
  .card .text {
    font-family: "Rubik Dirt", serif;
    font-size: 44px;
    background: linear-gradient(45deg, #000 4%, #fff, #000);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
  
  /* Style du sous-titre de la carte */
  .card .text2 {
    font-family: "Iceland", serif;
    font-size: 20px;
    padding-top: 5%;
    background: linear-gradient(45deg, #727272 4%, #fff, #7e7e7e);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
  
  /* Lignes décoratives pour renforcer la structure visuelle */
  .line {
    width: 100%;
    height: 1px;
    position: absolute;
    background-color: #2c2c2c;
  }
  
  .topl {
    top: 10%;
    background: linear-gradient(90deg, #888888 30%, #1d1f1f 70%);
  }
  
  .bottoml {
    bottom: 10%;
  }
  
  .leftl {
    left: 10%;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, #747474 30%, #222424 70%);
  }
  
  .rightl {
    right: 10%;
    width: 1px;
    height: 100%;
  }
  
  /* Conteneur pour le bouton animé central */
  /* Ce conteneur garantit un positionnement optimal pour l'appel à l'action */
  .button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: calc(50vh - 35px);  margin-bottom: 20px;
    z-index: 10;
    position: relative;
  }
  
  /* Adaptation du positionnement du bouton sur écrans moyens et petits */
  @media (max-width: 768px) {
    .button-container {
      margin-top: 600px;
    }
  }
  
  @media (max-width: 480px) {
    .button-container {
      margin-top: 560px;
    }
  }
  
  @media (max-width: 380px) {
    .button-container {
      margin-top: 400px;
    }
  }
  
  /* Bouton animé avec transitions fluides */
  /* L'animation renforce l'interactivité sans impacter la performance */
  .animated-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 16px 36px;
    border: 4px solid;
    border-color: transparent;
    font-size: 16px;
    background-color: inherit;
    border-radius: 100px;
    font-weight: 600;
    color: white;
    box-shadow: 0 0 0 2px white;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .animated-button svg {
    position: absolute;
    width: 24px;
    fill: white;
    z-index: 9;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .animated-button .arr-1 {
    right: 16px;
  }
  
  .animated-button .arr-2 {
    left: -25%;
  }
  
  .animated-button .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .animated-button .text {
    position: relative;
    z-index: 1;
    transform: translateX(-12px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .animated-button:hover {
    box-shadow: 0 0 0 12px transparent;
    color: black;
    border-radius: 12px;
  }
  
  .animated-button:hover .arr-1 {
    right: -25%;
  }
  
  .animated-button:hover .arr-2 {
    left: 16px;
  }
  
  .animated-button:hover .text {
    transform: translateX(12px);
  }
  
  .animated-button:hover svg {
    fill: #212121;
  }
  
  .animated-button:active {
    scale: 0.95;
    box-shadow: 0 0 0 4px white;
  }
  
  .animated-button:hover .circle {
    width: 220px;
    height: 220px;
    opacity: 1;
  }
  
  /* Style du footer pour un affichage constant en bas de page */
  /* Un footer fixe améliore la navigation et l'accessibilité globale */
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 10px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    text-shadow: #00aeff 0 0 9px;
    color: white;
    text-decoration: none;
  }
  
  /* Media Queries pour la réactivité et une expérience optimale sur tous les écrans */
  @media (max-width: 768px) {
    .typewriter h1 {
      font-size: 1.5em;
      margin-top: 100px;
      letter-spacing: 0.1em;
    }
    .card .text {
      font-size: 28px;
    }
    .card .text2 {
      font-size: 16px;
    }
    .ray {
      width: 150px;
      height: 30px;
    }
  }
  
  @media (max-width: 480px) {
    .outer {
      width: 260px;
      height: 215px;
      padding: 10px;
    }
    .typewriter h1 {
      font-size: 1.2em;
      margin-top: 80px;
    }
    .card .text {
      font-size: 24px;
    }
    .card .text2 {
      font-size: 14px;
    }
    .ray {
      width: 120px;
      height: 25px;
    }
  }
  
	

/* Ajustements pour l'affichage mobile */
@media (max-width: 768px) {
  .button-container {
    margin-top: 590px; /* Valeur ajustée pour un écran moyen */
  }
}

@media (max-width: 480px) {
  .button-container {
    margin-top: 440px; /* Valeur ajustée pour un petit écran */
  }
}

@media (max-width: 380px) {
  .button-container {
    margin-top: 400px; /* Valeur ajustée pour un très petit écran */
  }
}