/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@font-face {
  font-family: 'NintendoDS';
  src: url('/fonts/Nintendo-DS-BIOS.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


      body {
        background-image: url('/img/background04.png');
        background-position: center; /* L'image est centrée */
        background-attachment: fixed; /* L'image reste fixe lors du défilement */
        color: yellow;
        text-shadow: 1px 1px red;   
        font-family: 'NintendoDS';
        font-size: 16px;
        margin: auto;
        padding: 25px;
        display: flex;
        flex-direction: row;  /* ← TOUT s'empile verticalement */
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
        cursor: url(https://www.rw-designer.com/cursor-view/7120.png),auto;
        animation: scrollBackground 90s linear infinite;
      }
      
      @keyframes scrollBackground {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 1000px 1000px; /* Décale de 1000px vers la gauche */
    }
}
      
      up {
        
        max-width: 100%;
      }
      
      header {  
        width: 100%;
        display: flex;
        flex-direction: row; 
      }
      
      nav,aside,main,friends {  
        border-width: 2px;
        border-style: solid;
        border-color: orange;
        background-image: url('/img/tapis01.png');
        background-color: #04041ec9;
        margin:5px;
        
      }
      
      nav {
        flex : 1;
        padding: 10px;
        
      }
      
      friends {
        flex : 1;
        
      }
      
      main {
        flex: 3;
        display: flex;
        flex-direction: column;
        align-items: center; /* Centre horizontalement l'écran TV */
        padding: 15px;
        height:100%;
      }
      
      part {
        display : flex;
        flex-direction : row;
      }
      
      .TV-activity {
        display: flex; 
        flex-direction: row; 
        padding: 0 50px;
      }
      
      .TV-accessories {
        position: relative;
        width: 22%;  
        margin: 0 30px 0 0;   
      }
      
            /* Conteneur principal de la télécommande */
      .remote-container {
        position: relative;
        width: 89%;         /* Ajuste selon la largeur souhaitée pour ta télécommande */
        margin: 0 10px;      
        rotate: -5deg
      }
      
      /* Image de la télécommande */
      .remote-img {
        width: 100%;
        height: auto;
        display: block;
      }
      
      /* Style de base des boutons virtuels sur la télécommande */
      .remote-btn {
        position: absolute;
        transform: translate(-50%, -50%); /* Ajuste le point d'ancrage au centre du bouton */
        font-family: 'NintendoDS', sans-serif;
        font-size: 16px;
        color: #000;
        opacity: 0;
        border-radius: 7px;
        cursor: pointer;
        width: 21%;           /* Largeur relative au corps de la télécommande */
        height: 3%;           /* Hauteur relative au corps de la télécommande */
      }
      
      .remote-btn:hover {
        background-color: black;
        opacity: 10%;
      }
      
      .remote-btn:active {
        background-color: black;
        opacity: 20%;
      }
      
      /* Positions relatives (en %) sur l'image de test */
      .btn-1 {
          top: 62%;
          left: 24%;
      }
      
      .btn-2 {
          top: 62%;
          left: 49%;
      }
      
      .btn-3 {
          top: 62%;
          left: 74%;
      }
      .btn-4 {
          top: 66.5%;
          left: 24%;
      }
      
      .btn-5 {
          top: 66.5%;
          left: 49%;
      }
      
      .btn-6 {
          top: 66.5%;
          left: 74%;
      }
      .btn-7 {
          top: 70.9%;
          left: 24%;
      }
      
      .btn-8 {
          top: 70.9%;
          left: 49%;
      }
      
      .btn-9 {
          top: 70.9%;
          left: 74%;
      }
      
      .bol-chips {
        
        display: flex;
        flex-direction: column;
        align-items: center; /* Centre horizontalement l'écran TV */
      }
      
      .bol-chips img {
        width: 140%;
        padding-top: 10%;
        object-fit: contain;
        display: block;
        border-radius: 8px;
        transition: transform 0.1s ease-in-out;
      }
        
      .bol-chips img:hover {
          transform: scale(1.1); /* Grossit l'image de 10% */
          cursor: pointer; /* Change le curseur en petite main */
      }
      /* Petit bonus : l'image se rétrécit très légèrement quand on clique ! */
      .bol-chips img:active {
        transform: scale(0.95);
      }
      
            /* Conteneur global de la télé */
      .tv-wrapper {
        position: relative;
        width: 119%;            /* Largeur globale de la TV dans main */
        margin: 0 10px;
      }
      
      /* Image du cadre dessinée par tes soins */
      .tv-frame {
        width: 100%;
        height: auto;
        display: block;
        position: relative;
        z-index: 2;            /* Place le cadre DEVANT l'écran */
        pointer-events: none;  /* Permet de cliquer à travers le cadre transparent */
      }
      
      /* Écran TV placé derrière la découpe du dessin */
      .tv-screen {
        position: absolute;
        z-index: 1;
        top: 9%;
        left: 9%;
        width: 83%;
        height: 72%;
        margin: 0;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #000;
}
      
      .tv-screen img {
        height: auto;
      }

      /* Masquer les chaînes inactives */
      .chaine {
        display: none;
        width: 100%;
        position: relative;
        overflow: hidden;
      }
      
      /* Afficher uniquement la chaîne active */
      .chaine.active {
        display: block;
      }
      
      .neige-tv {
        position: relative;
        top: 0;
        left: 0;
        width: 130%;
        z-index: 2; /* S'affiche par-dessus l'iframe quand il est visible */
        display: block;
      }
      
      .video-tele {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
      }
      
      .video-tele {
        width: 140%;
        height: 100%;
        position: absolute;
        top: 1%;
        left: -18%;
      }
      
      under {
        width: 100%;
        margin : 20px;
      }
      
      presentation {
        display: flex;
        flex-direction: row;
        flex:1;
      }
      
      box {
        border-style:double;
        border-color:orange;
        border-width:4px;
        display:flex;
        flex-direction:column;
      }
      
      me {
        padding-left: 20%;
        text-align:left;
      }
      
      footer {
          width: 100%;
      }
      
      h2 {
        letter-spacing: 2px;
        color: yellow;
        text-shadow: 2px 2px orange, 4px 4px red, 6px 6px #000116, 7px 7px #000116;   
        font-size:21px;
        width: 100%;
      }
      
      h3 {
        	letter-spacing: 4px;
        	color: yellow;
        	text-shadow: 2px 2px orange, 4px 4px red, 6px 6px #000116, 7px 7px #000116;
        	font-size: 19px;
        	width: 100%;
        	margin:0;
        }
      
      pre {
        position: relative;  
        font-size: 34%;
        color : orange;
        text-shadow: 2px 2px #ff4800, 4px 4px red, 6px 6px #000116;   
      }
        
      p {
        margin: 0px 0;;  
        padding: 0.4rem 1rem;
      }
      }