/*

ooooooooo.             o8o                         o8o                       oooo  
`888   `Y88.           `"'                         `"'                       `888  
 888   .d88' oooo d8b oooo  ooo. .oo.    .ooooo.  oooo  oo.ooooo.   .oooo.    888  
 888ooo88P'  `888""8P `888  `888P"Y88b  d88' `"Y8 `888   888' `88b `P  )88b   888  
 888          888      888   888   888  888        888   888   888  .oP"888   888  
 888          888      888   888   888  888   .o8  888   888   888 d8(  888   888  
o888o        d888b    o888o o888o o888o `Y8bod8P' o888o  888bod8P' `Y888""8o o888o 
                                                         888                       
                                                        o888o                      
*/                                                                                   
html {
    zoom: 100% !important;
    margin: 0 !important;
}

body {
  margin: 0 !important;
}
/* Utilitaire */

.Container{
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin: 0;
  transition: height 1s ease, width 1s ease;
}

.Padding{
  padding: 1vh;
  flex-direction: column;
}

#TooSmall, #Menu-Horizontal, #Menu-Vertical {
  display: none;
}

#debug {
  position: fixed;
  top: 10px;
  left: 10px;
  background: rgba(0,0,0,0.9);
  color: white;
  padding: 15px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 12px;
  z-index: 10000;
  line-height: 1.4;
}

/*---------------------*/

/* Menu */

.Menu{
  height: 100%; 
  width: 100%; 
  overflow: hidden;
}

#Menu-Vertical{
  height: 6vh; 
  width: 100%;
  max-width: 60vh; 
  padding: 1vh;
  transition: height 1s ease;
}

#Menu-Horizontal{
  height: 100%; 
  width: 40vh; 
  flex-direction: column; 
  padding: 1vh;
  transition: width 1s ease;
}

/*---------------------*/

/* Page de chargement */

#loader {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.7) 100%);
  flex-direction: column;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.8s ease;
  }

#loader.hidden {
  opacity: 0;
  pointer-events: none;
}

.progress-container {
  width: 80%;
  height: 4px;
  background-color: #333;
  border-radius: 2px;
  margin: 20px auto;
  overflow: hidden;
}
        
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #45a049);
  width: 0%;
  transition: width 0.3s ease;
  border-radius: 2px;
}

/*---------------------*/

/* Contenue */

.SpacingH{
  height: 98vh;
  flex: 1 1 50%;
  overflow: hidden;
}

.SpacingC{
  height: 148vh;
  flex: 1 1 50%;
  overflow: hidden;
}

.Box{
  height: calc(100% - 4vh);
  width: calc(100% - 10vh);
}

.Titles{
  width: 95%; 
  max-width: 50vh; 
  height: 10vh; 
  margin-top: -4vh; 
  margin-bottom: 2vh
}

.Layer1{
  padding: 1vh;
}

.Layer2{
  padding: 1vh;
  flex-direction: column;
}

.Separator{
  width: 100%;
}

.letter-bounce {
  display: inline-block;
  animation: bounceLoop 2s ease-in-out infinite;
}

@keyframes bounceLoop {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}


/*---------------------*/

/* Video */

.video-wrapper {
  overflow: hidden;
  position: relative;
}

/* La vidéo remplit le conteneur */
.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*---------------------*/




/*
ooooooooo.                                                                          o8o                        
`888   `Y88.                                                                        `"'                        
 888   .d88'  .ooooo.   .oooo.o oo.ooooo.   .ooooo.  ooo. .oo.    .oooo.o  .oooo.o oooo  oooo    ooo  .ooooo.  
 888ooo88P'  d88' `88b d88(  "8  888' `88b d88' `88b `888P"Y88b  d88(  "8 d88(  "8 `888   `88.  .8'  d88' `88b 
 888`88b.    888ooo888 `"Y88b.   888   888 888   888  888   888  `"Y88b.  `"Y88b.   888    `88..8'   888ooo888 
 888  `88b.  888    .o o.  )88b  888   888 888   888  888   888  o.  )88b o.  )88b  888     `888'    888    .o 
o888o  o888o `Y8bod8P' 8""888P'  888bod8P' `Y8bod8P' o888o o888o 8""888P' 8""888P' o888o     `8'     `Y8bod8P' 
                                 888                                                                           
                                o888o                                                                          
*/                                                                                                          



  /* Si largeur < 20vh (format très étroit) ------------------------------------------------------------------------*/
  body.vw-lt20 #TooSmall {
    display: flex;
    overflow: hidden;
  }

  body.vw-lt20 #Menu-Horizontal,
  body.vw-lt20 #Menu-Vertical,
  body.vw-lt20 #OOB,
  body.vw-lt20 #Structure {
    display: none;
  }



  /* Si largeur entre 20vh et 80vh (format étroit) ---------------------------------------------------------------*/
  body.vw-lt80 h1{
    font-size: 6vh;
    margin: 0
  }

  body.vw-lt80 #Content {
    width: 100%;
    height: 92svh;
  }

  body.vw-lt80 h2, h3, h4{
    font-size: 2.7vh;
    margin: 0
  }

  body.vw-lt80 p, span{
    font-size: 2vh;
    margin: 0
  }

  body.vw-lt80 .SmallText{
    font-size: 1.8vh;
    margin: 0
  }


  body.vw-lt80 .Fights{
    height: 8vh;
    margin-bottom: 2vh;
  }

body.vw-lt80 .Orientation{
    flex-direction: column;
  }

  body.vw-lt80 #TooSmall {
    display: none;
  }

  body.vw-lt80 #Structure {
    flex-direction: column;
    overflow: hidden;
    justify-content: flex-start;
  }

  body.vw-lt80 #Content-container {
    width: calc(100% - 2vh);
    height: calc(100% - 1vh);
    margin-bottom: 1vh;
    overflow: hidden;
  }

  body.vw-lt80 .Section-Content {
    width: 100%; 
    height: 100%;
    flex-direction: column;
  }

  body.vw-lt80 #Menu-Horizontal {
    display: none;
  }

  body.vw-lt80 #Menu-Vertical {
    display: flex;
  }

  body.vw-lt80 .SpacingH {
    min-width: 40vh;
    height: 93svh;
  }

    body.vw-lt80 .SpacingC {
    min-width: 40vh;
    height: fit-content;
    padding: 4vh 0;
  }

    body.vw-lt80 .Box{
  height: calc(100% - 4vh);
  width: calc(100% - 4vh);
}

  body.vw-lt80 #OOB{
    display: none;
  }



  /* Si largeur > 80vh (format large) --------------------------------------------------------------------------*/
  body.vw-gt80 h1{
    font-size: 13vh;
    margin: 0
  }

  body.vw-gt80 #Content {
    width: 100%;
    height: 100svh;
  }

  body.vw-gt80 h2, h3, h4{
    font-size: 6vh;
    margin: 0
  }

  body.vw-gt80 p, span{
    font-size: 2vh;
    margin: 0
  }

  body.vw-gt80 .Orientation{
    flex-direction: row;
  }

  body.vw-gt80 .SmallText{
    font-size: 2.1vh;
    margin: 0
  }

  body.vw-gt80 .Fights{
    height: 11vh;
    margin-bottom: 0;
  }

  body.vw-gt80 #TooSmall {
    display: none;
  }

  body.vw-gt80 #Structure {
    flex-direction: row;
    overflow: hidden;
    justify-content: flex-start;
  }

  body.vw-gt80 #Content-container {
    width: calc(100% - 1vh);
    height: calc(100% - 2vh);
    margin-right: 1vh;
    overflow: hidden;
  }

  body.vw-gt80 .Section-Content {
    width: 95%; 
    max-width: 100vh;
    height: 100%;
    flex-direction: column;
  }

  body.vw-gt80 #Menu-Horizontal {
    display: flex;
  }

  body.vw-gt80 #Menu-Vertical {
    display: none;
  }

  body.vw-gt80 .SpacingH {
    min-width: 50vh;
    height: 98vh;
  }

body.vw-gt80 .SpacingC {
    min-width: 50vh;
    height: fit-content;
    padding: 4vh 0;
  }

  body.vw-gt80 .Box{
  height: calc(100% - 4vh);
  width: calc(100% - 10vh);
}

  body.vw-gt80 #OOB{
    display: flex;
    position: absolute; 
    z-index: 999; 
    pointer-events: none;
    width: 100vw;
    overflow: hidden;
  }



/*
ooo        ooooo                 .o8              oooo                     
`88.       .888'                "888              `888                     
 888b     d'888   .ooooo.   .oooo888  oooo  oooo   888   .ooooo.   .oooo.o 
 8 Y88. .P  888  d88' `88b d88' `888  `888  `888   888  d88' `88b d88(  "8 
 8  `888'   888  888   888 888   888   888   888   888  888ooo888 `"Y88b.  
 8    Y     888  888   888 888   888   888   888   888  888    .o o.  )88b 
o8o        o888o `Y8bod8P' `Y8bod88P"  `V88V"V8P' o888o `Y8bod8P' 8""888P' 
*/ 



/* Roue de compétance */

#Weel-container {
  position: relative;
  width: 110vw;
  max-width: 50vh;
  aspect-ratio: 1 / 1;
}

svg {
  margin: -5vh;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.3));
}

.slice {
  cursor: pointer;
  transition: opacity 0.3s;
}

.slice:hover .slice-fill {
  filter: brightness(1.1);
}

.slice-fill {
  /* Pas d'animation pour l'instant */
}

.slice-border {
  fill: none;
  stroke: white;
  stroke-width: 2;
}

.slice-text {
  background-color: rgba(255,255,255,0.5);
  fill: black;
  font-weight: 600;
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: middle;
}

.center-circle {
  fill: #2d3748;
  stroke: white;
  stroke-width: 3;
}

.center-text {
  fill: white;
  font-weight: bold;
  text-anchor: middle;
  dominant-baseline: middle;
}

/*---------------------*/











.polka {
  background-image: 
    radial-gradient(rgb(85, 0, 255) 10%, transparent 12.8%),
    radial-gradient(rgb(85, 0, 255) 10%, transparent 12.8%);
  background-position: center;
  background-size: 0.7vh 0.7vh;
  background-color: rgb(245, 240, 255);
}






















.message {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #667eea;
    transition: all 0.2s;
}

.message:hover {
    background: #f0f1f3;
    transform: translateX(2px);
}

.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
}

.message-content {
    flex: 1;
    min-width: 0;
}

.message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.message-author {
    font-weight: bold;
    font-size: 14px;
}

.mod-badge {
    background: #e74c3c;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
}

.message-time {
    color: #999;
    font-size: 12px;
}

.message-edited {
    color: #999;
    font-size: 11px;
    font-style: italic;
}

.message-text {
    margin: 8px 0;
    line-height: 1.5;
    word-wrap: break-word;
}

.message-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.vote-btn, .reply-btn, .edit-btn, .delete-btn {
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.vote-btn:hover, .reply-btn:hover, .edit-btn:hover {
    background: #f0f1f3;
    transform: translateY(-1px);
}

.delete-btn:hover {
    background: #fee;
    border-color: #e74c3c;
    color: #e74c3c;
}

.vote-btn.active {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.vote-btn.upvote.active {
    background: #2ecc71;
    border-color: #2ecc71;
}

.vote-btn.downvote.active {
    background: #e74c3c;
    border-color: #e74c3c;
}

.reply-to {
    background: #e8eaf6;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #555;
}

.ping {
    background: #667eea;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}

.char-counter {
    text-align: right;
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}

.char-counter.warning {
    color: #f39c12;
}

.char-counter.error {
    color: #e74c3c;
    font-weight: bold;
}

.filter-warning {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 5px;
    padding: 8px;
    background: #fee;
    border-radius: 4px;
}

.send-btn:hover {
    background: #5568d3 !important;
    transform: scale(1.05);
}

.send-btn:disabled {
    background: #ccc !important;
    cursor: not-allowed;
    transform: none;
}






/* Scrollbar */

/* Personnalisation de la scrollbar */
::-webkit-scrollbar {
  width: 1.5vh; /* scrollbar verticale */
}

::-webkit-scrollbar-thumb {
  background-color: #250070; /* couleur de la poignée */
  border-radius: 0.5vh; /* coins arrondis */
  cursor: pointer;
}

::-webkit-scrollbar-track {
  background: rgb(16,0,48,0.5); /* couleur de fond de la track */
  border-radius: 1vh;
}

/* Au survol */
::-webkit-scrollbar-thumb:hover {
  background-color: #5500ff; /* couleur plus foncée de la poignée */
}

scrollbar-width: thin; /* Contrôle la largeur de la scrollbar */
scrollbar-color: #5500ff #5500ff; /* Couleur de la poignée et de la track */

/*---------------------*/



















        .container {
            background: rgba(255, 255, 255, 0.95);
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 450px;
            backdrop-filter: blur(10px);
        }
        
        .form-toggle {
            display: flex;
            margin-bottom: 30px;
            background: #f1f1f1;
            border-radius: 25px;
            padding: 5px;
        }
        
        .toggle-btn {
            flex: 1;
            padding: 12px;
            border: none;
            background: transparent;
            border-radius: 20px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .toggle-btn.active {
            background: #667eea;
            color: white;
            box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
        }
        
        .form-section {
            display: none;
        }
        
        .form-section.active {
            display: block;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
        }
        
        input, select {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e1e1e1;
            border-radius: 10px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }
        
        input:focus, select:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        .file-input-wrapper {
            position: relative;
            overflow: hidden;
            display: inline-block;
            width: 100%;
        }
        
        .file-input-wrapper input[type=file] {
            position: absolute;
            left: -9999px;
        }
        
        .file-input-label {
            display: block;
            padding: 12px 15px;
            background: #f8f9fa;
            border: 2px dashed #e1e1e1;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .file-input-label:hover {
            background: #e9ecef;
            border-color: #667eea;
        }
        
        .color-input {
            height: 50px !important;
            padding: 5px !important;
            cursor: pointer;
        }
        
        .submit-btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        
        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        
        .error-message, .success-message {
            padding: 10px;
            border-radius: 8px;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .error-message {
            background: #fee;
            color: #c33;
            border: 1px solid #fcc;
        }
        
        .error-message a {
            color: #667eea;
            text-decoration: underline;
            font-weight: bold;
        }
        
        .error-message a:hover {
            color: #5a67d8;
        }
        
        .success-message {
            background: #efe;
            color: #363;
            border: 1px solid #cfc;
        }
        
        .password-strength {
            margin-top: 5px;
            font-size: 12px;
        }
        
        .strength-weak { color: #ff4444; }
        .strength-medium { color: #ffaa00; }
        .strength-strong { color: #44ff44; }
        
        .preview-image {
            max-width: 100px;
            max-height: 100px;
            border-radius: 50%;
            margin-top: 10px;
            display: none;
        }








  .container {
            max-width: 1000px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #f1f1f1;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .profile-photo {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid;
        }
        
        .profile-photo-placeholder {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 32px;
            font-weight: bold;
            border: 4px solid #ddd;
        }
        
        .user-details h2 {
            margin: 0;
            color: #333;
        }
        
        .status {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .status.online {
            background: #d4edda;
            color: #155724;
        }
        
        .logout-btn {
            background: #dc3545;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
        }
        
        .logout-btn:hover {
            background: #c82333;
            transform: translateY(-2px);
        }
        
        .message {
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            text-align: center;
            font-weight: 500;
        }
        
        .success-message {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .error-message {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .section {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 15px;
            margin-bottom: 20px;
        }
        
        .section h3 {
            margin: 0 0 20px 0;
            color: #333;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
        }
        
        .form-group input[type="text"],
        .form-group input[type="email"],
        .form-group input[type="password"],
        .form-group input[type="file"] {
            width: 100%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s;
        }
        
        .form-group input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
            font-size: 14px;
        }
        
        .btn-primary {
            background: #667eea;
            color: white;
        }
        
        .btn-primary:hover {
            background: #5568d3;
            transform: translateY(-2px);
        }
        
        .btn-danger {
            background: #dc3545;
            color: white;
        }
        
        .btn-danger:hover {
            background: #c82333;
        }
        
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        
        .btn-secondary:hover {
            background: #5a6268;
        }
        
        .color-preview {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            display: inline-block;
            margin-left: 10px;
            border: 2px solid #ddd;
            vertical-align: middle;
        }
        
        .photo-preview-container {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 15px;
        }
        
        .info-box {
            background: white;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            border-left: 4px solid #667eea;
        }
        
        .info-box strong {
            color: #667eea;
        }
        
        .grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        @media (max-width: 768px) {
            .grid-2 {
                grid-template-columns: 1fr;
            }
            
            .header {
                flex-direction: column;
                gap: 15px;
            }
        }
        
        .help-text {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
        
        .verified-badge {
            background: #28a745;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            margin-left: 10px;
        }
        
        .not-verified-badge {
            background: #ffc107;
            color: #212529;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            margin-left: 10px;
        }























/* État normal */
.interactive-card {
    position: relative;
    width: 32vh;
    height: 45vh;
    transform-origin: center;
    transition: transform 0.4s ease, width 0.4s ease, height 0.4s ease;
    margin: 1.5vh; 
    flex-direction: column; 
    cursor: pointer; 
    border-radius: 2vh; 
    box-shadow: 0 0.3vh 0 0 black
}

/* Quand la carte est ouverte */
.interactive-card.open {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9;
    transform: translate(-50%, -50%) rotateY(180deg);
    border-radius: 2vh;
}


/* On masque les autres contenus lors du flip */
.interactive-card .Front-Content {
    transition: opacity 0.3s ease;
}
.interactive-card.open .Front-Content {
    opacity: 0;
    pointer-events: none;
}

.CardFront {
  background-color: #414141; 
  background-size: cover; 
  height: 100%; 
  width: 100%; 
  border-radius: 2vh;
}

.CardFront-Content {
  width: 100%; 
  height: 100%; 
  backdrop-filter: blur(10vh) saturate(2) brightness(2); 
  flex-direction: column; 
  border-radius: 2vh; 
}

.CardFront-Image {
  width: calc(100% - 2vh); 
  aspect-ratio: 1/1; 
  background-color: grey; 
  background-size: cover; 
  border-radius: 1vh 1vh 0 0;
  overflow: hidden;
}

.CardFront-Info {
  width: calc(100% - 2vh); 
  height: 29%; 
  background-color: transparent; 
  background-image: url(../Medias/Images/Noise.png); 
  background-size: cover; 
  border-radius: 0 0 1vh 1vh
}

.CardFront-Logiciels{
  height: 30%;
  width: 100%;
  margin: 0.5vh 0;
}

.CardFront-LogicielsImages{
  height: 3vh; 
  margin: 0.5vh
}



/* Le contenu interne apparaît avec un fade + flip */
.CardBack {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(1vh);
    display: none;
    z-index: 9;
    transition: opacity 0.3s ease;
    background-color: #F5F0FF; 
    flex-direction: column;
    box-shadow: 0px 0px 4vh 0vh black;
}

.interactive-card.open .CardBack {
    display: flex !important;
    opacity: 1;
}

.CardBack-Color{
  background-color: rgba(255, 255, 255, 0.2);
}

.close-card{
  height: 5vh; 
  width: 100%; 
  max-width: 40vh; 
  background-color: rgba(255, 0, 0, 0.2); 
  border-radius: 2vh; 
  cursor: pointer; 
  z-index: 8;
  transform: scaleX(-1);
  backdrop-filter: blur(1vh);
}

.CardBack-Content{
  height: 100svh; 
  margin-top: -8vh; 
  width: 100%; 
  max-width: 100vw; 
  flex-direction: column; 
  overflow-y: scroll; 
  overflow-x: hidden; 
  justify-content: flex-start; 
  transform: scaleX(-1);
}

.CardBack-Notes{
  width: calc(100% - 2vh);  
  height: 6vh; 
  border-radius: 0 0 3vh 3vh;
}

.CardBack-Description{
  padding: 1vh;
  border-radius: 3vh;
  width: calc(100% - 4vh); 
  max-width: 120vh;
  min-height: 10vh;
  margin-top: 2vh;
  margin-bottom: 8vh;
}

.CardBack-Videos{
  width: calc(100% - 2vh);  
  max-height: 84vh; 
  object-fit: contain;
}

.CardBack-Images{
  width: calc(100% - 2vh); 
  max-height: 84vh; 
  object-fit: contain;
  cursor: pointer;
  align-items: center;
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  border: none;
}

.CardBack-Musiques{
 display: flex; 
 align-items: center; 
  width: calc(100% - 2vh); 
}


/* Fond sombre quand une carte est ouverte */
#card-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(0.5vh);
    z-index: 9;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
#card-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* Placeholder qui évite que le layout bouge */
.card-placeholder {
    visibility: hidden;
}


.AudioVisualizer {
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    gap: 0.2vh;
    margin: 0 0.5vh;
}

.Music-PlayPause{
    height: 5vh;
    width: 24vh;
    margin-top: 0.5vh;
    border-radius: 1vh;
    border: none;
    cursor: pointer;
    justify-content: flex-start;
}

.Music-PlayBack{
    height: 5vh;
    width: 5vh;
    margin: 0.5vh 0.5vh 0 0.5vh;
    border-radius: 1vh;
    border: none;
    cursor: pointer;
}

.AudioVisualizer-bar {
    background: lime;
    width: 1.5vh;
    min-width: 1vh;
    max-width: 2vh;
    height: 1vh;
    opacity: 0.5;
    min-height: 1vh;
    transition: height 0.05s linear, background 0.05s;
    border-radius: 3px 3px 0 0;
}














.demos {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 100%
}



.Notes{
  height: 4vh; 
  width: 100%;
}

.NoteGray {
  filter: saturate(50%) brightness(700%);
  opacity: 0.3;
  cursor: pointer;
}

.NoteColor {
  filter: none;
  opacity: 1;
  cursor: pointer;
}



.G-6 {
  border: ;
  background: linear-gradient(90deg, #FF8080, #FFEB8A, #87FFC3, #8FCEFF, #C191FF, #FF8080);
  background-size: 200% auto;
  color: #000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 2s linear infinite;
}

.G-5 {
  background: linear-gradient(45deg, #FFBB00, #FFC300, #FFD700, #FFD700, #FFF9D1, #FFD700, #FFC300, #FFBB00);
  background-size: 200% auto;
  color: #000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 2s linear infinite;
}

.G-4 {
  background: linear-gradient(45deg, #CCF5FF, #CCF5FF, #EBFFFE, #CCF5FF, #CCF5FF);
  background-size: 200% auto;
  color: #000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 2s linear infinite;
}

.G-3 {
  background: linear-gradient(45deg, #E8CCCC, #E8CCCC, #E8D9D1, #E8CCCC, #E8CCCC);
  background-size: 200% auto;
  color: #000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 2s linear infinite;
}

.G-2 {
  background: linear-gradient(90deg, #DCD8E8, #E8E8E8, #DCD8E8);
  background-size: 200% auto;
  color: #000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.G-1 {
  background: #D6D6D6;
  background-size: 200% auto;
  color: #000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes shine {
  to {
    background-position: -200% center;
  }
}












@font-face {
  font-family: 'Rubik';
  src: url('Fonts/Rubik-VariableFont_wght.ttf') format('truetype');
}

@font-face {
  font-family: 'Halant';
  src: url('Fonts/Halant-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Tenor';
  src: url('Fonts/TenorSans-Regular.ttf') format('truetype');
}


.CV-Feuille{
  width: calc(95vh / 1.4142); 
  height: 95vh; 
  background-color: white; 
  display: flex; 
  border: 0.2vh solid #514378; 
  overflow: hidden; 
  margin: 1.5vh 0
}

.CV-Gauche{
  height: 100vh; 
  width: 66.66%; 
  flex-direction: column; 
  margin-top: -0.5vh;
}

.CV-BG-Horizontal{
  background: #CDC1FF;
  background: -moz-linear-gradient(-45deg, #CDC1FF 0%, #ACCAFF 100%);
  background: -webkit-linear-gradient(-45deg, #CDC1FF 0%, #ACCAFF 100%);
  background: linear-gradient(135deg, #CDC1FF 0%, #ACCAFF 100%);
  border: solid 0.1vh rgba(0, 0, 0, 0.2);
  width: calc(100% - 1vh); 
  margin-left: 3vh;
  height: 12%;
  -webkit-box-shadow: -1px 2px 3px 0px rgba(0,0,0,0.3); 
  box-shadow: -1px 2px 3px 0px rgba(0,0,0,0.3);
  margin-top: 2vh;
  flex-direction: column; 
  border-bottom: solid 0.1vh rgba(0, 0, 0, 0.4); 
  border-radius: 3vh 0 0 3vh;
}

.CV-BG-Experiences{
  width: 102%; 
  height: 82%; 
  margin-left: 3vh;
  flex-direction: column;
}


.CV-Experiences{
  height: 5.5vh; 
  width: 100%; 
  margin-top: -1vh; 
  border-bottom: solid 0.1vh rgba(0, 0, 0, 0.4); 
  box-shadow: 0 0.2vh 0.2vh 0vh rgba(0, 0, 0, 0.1);     
  margin-left: -1.7vh;
}








.CV-LI{
  display: flex;
  justify-content: space-between; /* Aligne le texte à gauche et le bouton à droite */
  align-items: center; /* Aligne verticalement le texte et le bouton */
  margin-bottom: 10px; /* Espacement entre les éléments de la liste */
}

.CV-BTN {
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 2vh;
}