:root {
    --bg-main: #111137;
	--bg-foot: rgba(34, 34, 34, 0.9);
	--fg-main: #fffaf1;
	--fg-foot: #fffaf1;
	--bg-logos: #ddd;
	--bg-nav: rgba(34, 34, 34, 0.9); 
	--fg-nav: #fffaf1;
    --border-radius: 8px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-main: #111137;
        --bg-foot: rgba(34, 34, 34, 0.9);
        --fg-main: #fffaf1;
        --fg-foot: #fffaf1;
        --bg-logos: #ddd;
        --bg-nav: rgba(34, 34, 34, 0.9); 
        --fg-nav: #fffaf1;
    }
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-main);
    color: var(--fg-main);
    font-family: sans-serif; 
}

/*************************************************************************** */
/** a11y                                 */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    **::after {
        animation: none !important;
        transform: none !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
    }
}

/****************************************************************
                            Header / Titre / Contenu
****************************************************************/
body > header {
    text-align: center;
    padding-top: 2em; /* Pour laisser de l'espace à la navbar fixe */
}

body > header h1 {
    font-size: 2.5em;
    margin-top: 0.5em;
    text-align: center;
 /* Ajustement de la marge */
}
main > h2 {
    font-size: 2.5em;
    margin-top: 0.5em;
    text-align: center;
 /* Ajustement de la marge */
}
a {
    color: #F29BB2; /* Applique la couleur à tous les liens (sauf si surchargé) */
    text-decoration: none;
}

a:hover {
    text-decoration: underline; /* Ajoute le soulignement au survol */
}
main {
    text-align: center;
    padding: 20px;
}

main h2 {
    font-size: 1.5em;
    margin-bottom: 20px;
}

main b {
    font-weight: bold;
}

/****************************************************************
                            Navigation
****************************************************************/
nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--bg-nav);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px); /* Effet de flou sur la transparence */
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 10px 0;
}

nav li {
    margin: 0 15px;
}

nav a {
    text-decoration: none;
    color: var(--fg-nav);
    font-weight: bold;
    padding: 5px 10px;
    border-radius: var(--border-radius);
    transition: background-color 0.3s ease;
}

nav a:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/****************************************************************
                            Cadre de contenu fixe
****************************************************************/
#page-frame {
    height: 700px;
    width: 80%;
    max-width: 900px;
    
    margin: 0 auto 20px auto;
    padding: 20px;
    box-sizing: border-box;
    
    background-color: #ffffff;   /* Fond blanc */
    color:  #111137;   /*  */
    border: 4px solid #111137;              /* Écriture ROSE */
    
    /* Apparence */
    border-radius: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    
    /* Gestion du défilement */
    overflow-y: auto;
    overflow-x: hidden;
}

#page-frame h3 {
    /* Style de la bulle */
    display: inline-block;
    padding: 10px 20px;
    margin: 10px auto 30px auto; /* Marge supérieure pour l'espacement */
    border-radius: 25px;
    text-align: center;
    
    /* Couleurs */
    background-color: #111137; /* Violet fort */
    color: white; /* Texte blanc */
    
    /* Réinitialisation ou ajustement */
    font-weight: bold;
    font-size: 1.3em;
}


/* Personnalisation de la barre de défilement */
#page-frame::-webkit-scrollbar {
    width: 10px;
}
#page-frame::-webkit-scrollbar-track {
    background: #111137; /* Violet très pâle */
    border-radius: 4px;
}
#page-frame::-webkit-scrollbar-thumb {
    background: #111137; /* Pouce de la barre en VIOLET (assorti à la bordure) */
    border-radius: 4px;
}

#title-frame {
    text-align: center;
    font-size: 2em;
    margin: 30px 0;
    font-weight: bold;
}


#page-frame h4 {
    color: #111137; /* J'ai mis les sous-titres en violet pour rappeler la bordure et varier un peu, sinon tout est rose */
}

/****************************************************************
                            Styling des Cartes de Contenu NIRD
****************************************************************/

/* ---------------------------------------------------- */
/* NOUVEAU : STYLE DES TITRES DE PAGE (h3) EN BULLE VIOLETTE */
/* ---------------------------------------------------- */

/* ---------------------------------------------------- */
/* STYLE GLOBAL DES CARTES PROBLÈME/SOLUTION */
/* ---------------------------------------------------- */
.card-problem, .card-solution {
    text-align: left;
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-problem {
    border: 1px solid #CC3D6A; /* Bordure fine rouge */
    background-color: rgba(204, 61, 106, 0.05); /* Fond très légèrement rouge */
}

.card-solution {
    border: 1px solid #64B77B; /* Bordure fine verte */
    background-color: rgba(100, 183, 123, 0.05); /* Fond très légèrement vert */
}

/* ---------------------------------------------------- */
/* NOUVEAU : STYLE DES TITRES DE CARTE (h4) EN BULLE (Rouge/Vert) */
/* ---------------------------------------------------- */
.card-problem h4, .card-solution h4 {
    /* Propriétés pour la bulle */
    display: inline-block;
    padding: 5px 15px;
    margin-top: 0;
    margin-bottom: 15px;
    border-radius: 20px;
    
    /* Texte */
    font-size: 1.1em;
    font-weight: bold;
    color: white !important; /* Force le texte en blanc sur le fond coloré */
}

/* Style spécifique pour le Problème (Rouge) */
.card-problem h4 {
    background-color: #CC3D6A; /* Rouge Alarme */
}

/* Style spécifique pour la Solution (Vert) */
.card-solution h4 {
    background-color: #64B77B; /* Vert Succès */
}

/* ---------------------------------------------------- */
/* Amélioration de la lisibilité des listes */
/* ---------------------------------------------------- */
.card-solution ul {
    list-style-type: none; /* Enlève les puces par défaut */
    padding-left: 0;
}

.card-solution li {
    padding-left: 1.5em; 
    text-indent: -1.5em; /* Permet un alignement avec l'icône de puce */
    margin-bottom: 8px;
    
    /* Puce personnalisée (cercle vert) */
    &::before {
        content: "•";
        color: #64B77B;
        font-weight: bold;
        display: inline-block; 
        width: 1.5em; 
        margin-left: -1.5em; 
    }
}

/* Conteneur des boutons de navigation */
.navigation-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espace entre les boutons et le texte */
    margin: 30px auto;
}

/* Style du texte "1 / 7" */
#page-indicator {
    font-weight: bold;
    font-size: 1.2rem;
    color: #F2C063; /* Rappel du Jaune du thème */
    background-color: rgba(34, 34, 34, 0.5); /* Petit fond sombre pour lisibilité */
    padding: 5px 15px;
    border-radius: 15px;
}


/* Style général des boutons NIRD */
#prev-btn, 
#next-btn, 
.nird-button {
    background-color: #5C42B0; /* Le violet du Quiz */
    color: white;
    font-family: sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    
    border: none;
    border-radius: 50px; /* Forme très arrondie (pill shape) */
    padding: 12px 30px;
    cursor: pointer;
    
    /* Effet 3D léger (bordure du bas simulée) */
    box-shadow: 0 5px 0 #3e2a7a; 
    transition: all 0.2s ease;
    
    /* Pour centrer le texte/icône */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Effet au survol (Hover) */
#prev-btn:hover:not(:disabled), 
#next-btn:hover:not(:disabled), 
.nird-button:hover {
    background-color: #6e52cc; /* Violet un peu plus clair */
    transform: translateY(-3px); /* Le bouton monte un peu */
    box-shadow: 0 8px 0 #3e2a7a; /* L'ombre s'agrandit */
}

/* Effet au clic (Active) */
#prev-btn:active:not(:disabled), 
#next-btn:active:not(:disabled), 
.nird-button:active {
    transform: translateY(2px); /* Le bouton s'enfonce */
    box-shadow: 0 2px 0 #3e2a7a; /* L'ombre diminue */
}

/* Style spécifique pour le bouton désactivé (ex: page 1) */
#prev-btn:disabled, 
#next-btn:disabled {
    background-color: #4a4a6a; /* Gris-violet terne */
    color: #888;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
    opacity: 0.7;
}


/* Surcharge spécifique pour le bouton du Quiz */
#nird-gotoquiz {
    background-color: #F2C063; /* Jaune Or */
    color: #111137; /* Texte foncé pour le contraste */
    box-shadow: 0 5px 0 #c49b50; /* Ombre jaune foncé */
    
    font-size: 1.3rem; /* Un peu plus gros */
    padding: 15px 40px;
    margin-top: 20px;
}

#nird-gotoquiz:hover {
    background-color: #ffd685; /* Jaune plus clair */
    box-shadow: 0 8px 0 #c49b50;
}

#nird-gotoquiz:active {
    box-shadow: 0 2px 0 #c49b50;
}

/* Conteneur pour centrer le bouton quiz */
#nird-buttons {
    text-align: center;
    margin-bottom: 40px;
}

#nird-gotoquiz {
    display: none; /* Caché par défaut */
}
/****************************************************************
                            Pied de page
****************************************************************/
footer {
    position: relative;
    bottom: auto;
    left: 0; 

    width: 100%; 
    box-sizing: border-box; 
    margin: 0;
    padding: 2vh 4%;

    color: var(--fg-foot);
    background-color: var(--bg-foot);
    backdrop-filter: blur(5px); 
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); 
}

#nos-sponsors {
    text-align: center;
}

#nos-sponsors ul {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 1em;

    padding: 0;

    list-style: none;
}

#nos-sponsors li {
    aspect-ratio: 3 / 1;
    min-height: 3em;
    background-color: var(--bg-logos);
    border-radius: var(--border-radius); 
    padding: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); 
}

@media screen and (max-width: 500px) {
    #nos-sponsors li {
        min-width: 40%;
    }
}

#nos-sponsors a {
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 100%;
    height: 100%;

    text-align: center;
    transition: all ease-in 0.2s;
    transform-origin: center;
}

#nos-sponsors a span {
    opacity: 0;
}

#nos-sponsors a:hover {
    transform: scale(1.05);
}

#connexion {
    min-height: 50vh;
    padding-top: 100px;
    text-align: center;
}



/*
	Quiz
*/
.quiz-container{
	width: 100%;
	margin-bottom: 10px;
}

.quiz-question-container{
	background-color: #5C42B0;
	border-radius: 20px;
}

.quiz-question, .quiz-score{
	display: block;
	width: 100%;
	text-align: center;
	font-size: 1.5rem;
	margin-bottom: 20px;
	color: white;
}

.quiz-answer-container{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.quiz-answer{
	font-size: 1.2rem;

    color: #5C42B0;
	
	margin: 2.5%;
	padding: 10px 0;
	background-color: white;
	width: calc(45% - 10px);
	
	border-radius: 30px;
	padding-left: 10px;
	
	transition: background-color 0.25s;
	
	display: flex;
    align-items: center;
	
}

.quiz-answer-selected{
	background-color: #F2C063;
}

.quiz-state-question .quiz-answer:hover:not(.quiz-answer-selected){
	background-color: #f0ce90;
	
	transition: background-color 0.25s;
}


.quiz-answer-letter{
	background-color: #5C42B0;
	color: white;
	
	text-align: center;
	
	width: 29px;
	height: 29px;
	
	min-width: 29px;
    display: flex;             
    align-items: center;       
    justify-content: center; 
	
	border-radius: 30px;
}

.quiz-answer-text{
	margin-left: 10px;
    font-size: 0.9em;
    padding: 5px;
}

.quiz-answer-good{
	background-color: #64B77B;
}

.quiz-answer-good .quiz-answer-letter{
	background-color: white;
	font-size: 0;
	background-image: url("../images/check.png");
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: 4.5px;
}

.quiz-answer-bad{
	background-color: #CC3D6A;
}

.quiz-answer-bad .quiz-answer-letter{
	background-color: white;
	font-size: 0;
	background-image: url("../images/cross.png");
	background-size: 29px;
	background-repeat: no-repeat;
}

.quiz-save-button {
    color: white;
    font-size: 1.5rem;
    display: block;
    margin: 20px 10%;
    padding: 20px 0;
    width: 80%;
    text-align: center;
    background-color: #5C42B0;
    border-radius: 30px;
    border: solid 5px #5937ca;

    transition: all 0.25s;
}

.quiz-save-button:hover {
    width: 85%;
   
	margin: 20px 7.5%;
	transition: all 0.25s;
    cursor: pointer;
}

/* Texte du bouton */
.quiz-save-button::before {
    content: "Enregistrer votre score";
}


.quiz-button{
	color: white;
	font-size: 1.5rem;
	
	display: block;
	margin: 20px 10%;
	padding: 20px 0;
	width: 80%;
	text-align: center;
	background-color: #5C42B0;
	
	border: solid 5px #5937ca;
	
	border-radius: 30px;
	
	transition: all 0.25s;
}

.quiz-button:hover{
	width: 85%;
	
	margin: 20px 7.5%;
	transition: all 0.25s;
}

.quiz-state-question .quiz-button::before{
	content: "Valider";
}

.quiz-state-answer .quiz-button::before{
	content: "Question Suivante";
}

.quiz-last-question .quiz-button::before{
	content: "Voir les Résultats";
}

.quiz-state-score .quiz-button::before{
	content: "Recommencer";
}

.quiz-question-counter{
	position: relative;
	top:15px;
	left: 50%;
	transform: translate(-50%);
	
	display: block;
	width: 200px;
	
	padding: 5px 0;
	z-index:1;
	
	color: white;
	background-color: #F2C063;
	font-size: 1.1rem;
	
	text-align: center;
	border-radius: 30px;
}

.quiz-state-question .quiz-answer:hover, .quiz-button:hover{
	cursor: pointer;
}

.quiz-explication
{
	color: white;
	background-color: #815df6;
	
	border-radius: 20px;
}

.quiz-explication-title
{
	display: block;
	text-align: center;
	font-weight: bold;
	font-size: 1.1rem;
	
	margin-bottom: 5px;
}

.quiz-explication-text
{
	display: block;
	text-align: center;
	font-style: italic;
}

.quiz-state-score .quiz-question-container *:not(.quiz-score, .quiz-score-value, .quiz-score-total){
	display: none;
}

.quiz-state-question .quiz-explication, .quiz-state-score .quiz-explication{
	display: none;
}

.quiz-state-question .quiz-score, .quiz-state-answer .quiz-score{
	display: none;
}

@media (min-width: 1042px){
	.quiz-explication{
		padding: 10px 125px;
	}
	
	.quiz-answer-text{
		margin-right: 10px;
	}
	
	.quiz-question-container{
		padding: 30px;
	}
}

@media (max-width: 1042px){
	.quiz-explication{
		padding: 5px 15px;
	}
	
	.quiz-answer-text{
		margin-right: 5px;
	}
	
	.quiz-question-container{
		padding: 30px 10px;
	}
}


:root {
    --accent: #F2C063;
    --border: #5C42B0;
    --bg-dark: #0c0c0f;
}


.clock-container {
    background: linear-gradient(135deg, #5C42B0, #111137);
    border: 4px solid #F2C063;
    border-radius: 30px;
    padding: 40px;
    margin-bottom: 50px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.7);

    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
    flex-wrap: wrap;
}

.btn {
    width: 80px;
    height: 60px;
    font-size: 32px;
    font-weight: bold;
    color: #111137;
    background: #F2C063;

    border: none;
    border-radius: 20px;
    cursor: pointer;

    box-shadow: 0 6px 0 #c49b50;
    transition: all 0.15s ease;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 0 #c49b50;
}

.btn:active {
    transform: translateY(2px);
    box-shadow: 0 3px 0 #c49b50;
}


#valMechanical,
#valSolar {
    color:#FFD23F;
    font-size:18px;
    margin-top:8px;
}

/* Horloge numérique */
.digital-box {
    padding: 25px 35px;
    background: #0e0e12;
    border: 4px solid var(--border);
    border-radius: 18px;
    display: inline-block;
    box-shadow: 0 0 20px #6A0DFF66;
}

.digital-clock {
    display: flex;
    align-items: center;
    gap: 25px;
}

.separator {
    font-size: 42px;
    color: var(--accent);
    text-shadow: 0 0 10px var(--accent);
}

.digit-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.digit-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.btn-row {
    display: flex;
    gap: 12px;
}

.btn {
    width: 55px;
    height: 38px;
    font-size: 24px;
    font-weight: bold;
    color: var(--accent);
    background: var(--bg-dark);
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}

.btn:hover {
    background: var(--border);
    color: var(--bg-dark);
    box-shadow: 0 0 10px var(--border);
}

.digit-display {
    display: flex;
    gap: 6px;
    padding: 14px 16px;
    background: var(--bg-dark);
    border-radius: 12px;
    border: 3px solid var(--border);
    box-shadow: 0 0 10px var(--border);
}

.digit {
    width: 36px;
    height: 66px;
    position: relative;
}

.digit::before {
    content: attr(data-val);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px;
    font-weight: 900;
    color: var(--accent);
    text-shadow: 0 0 12px var(--accent);
}

.piano {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 20px;
  background: #333;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.key {
  width: 50px;
  height: 180px;
  margin: 2px;
  background: linear-gradient(to bottom, #fff, #eee);
  border: 1px solid #aaa;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  cursor: pointer;
  user-select: none;
  transition: all 0.1s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.key.black {
  width: 30px;
  height: 120px;
  background: linear-gradient(to bottom, #222, #000);
  margin-left: -15px;
  margin-right: -15px;
  z-index: 2;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

.key:active {
  transform: translateY(3px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.key {
  width: 50px; height: 150px;
  margin: 3px;
  background: #ffe4e1;
  border-radius: 10px;
  border: 2px solid #ffb6c1;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: all 0.2s ease;
}

.key:active {
  transform: scale(0.95) translateY(4px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Corps de la page account */
#account-body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-dark);
    color: var(--accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

/* Titre */
#account-title {
    margin-bottom: 30px;
    text-align: center;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent);
}

/* Conteneur principal */
#account-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 900px;
}

/* Carte info utilisateur */
.account-card {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    flex: 1 1 280px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 0 15px rgba(92,66,176,0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.account-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 25px rgba(92,66,176,0.6);
}

/* Lignes info */
.account-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.account-info-row span, 
.account-info-row input {
    flex: 1;
}

.account-info-row input {
    padding: 6px 10px;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: var(--bg-dark);
    color: var(--accent);
}

/* Boutons */
.account-btn {
    padding: 6px 12px;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: var(--bg-dark);
    color: var(--accent);
    cursor: pointer;
    transition: 0.2s;
}

.account-btn:hover {
    background: var(--border);
    color: var(--bg-dark);
    box-shadow: 0 0 10px var(--border);
}

/* Mot de passe */
#account-passwordDisplay {
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
}

/* Score */
#account-quizScore {
    font-size: 26px;
    font-weight: bold;
    color: var(--accent);
    text-align: center;
    padding: 15px 0;
    border-top: 2px solid var(--border);
    border-bottom: 2px solid var(--border);
}

/* Déconnexion */
#account-logoutBtn {
    width: 100%;
    margin-top: 10px;
    background: #ff6666;
    border-color: #ff4444;
    font-weight: bold;
}

#account-logoutBtn:hover {
    background: #ff4444;
    box-shadow: 0 0 10px #ff8888;
}

/* Easter egg */
#account-easterEgg {
    text-align: center;
    margin-top: 15px;
    font-size: 18px;
}

/* Responsive */
@media (max-width: 600px) {
    #account-container {
        flex-direction: column;
        gap: 15px;
    }
}


/* icones dans protect*/
.containing-protect {
    display: flex;
    justify-content: center;  
    padding: 20px;
    flex-direction: column;
    align-items: center;
}

.protect-card {
    flex: 1;                             
    max-width: 30%;                     
    background: #ffffff15;               
    backdrop-filter: blur(6px);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: white;
    box-shadow: 0 4px 15px rgb(0 0 0 / 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}

.protect-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgb(0 0 0 / 0.3);
}

.protect-card img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    margin-bottom: 10px;
}

.protect-title {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 5px;
}

/* ===================== */
/* === FRANCK GPT UI === */
/* ===================== */

.franckgpt-body {
    background: var(--bg-main);
    color: var(--fg-main);
    margin: 0;
    font-family: sans-serif;
}

/* HEADER */
.franckgpt-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #5C42B0, #111137);
    padding: 12px;
    z-index: 10;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}

.franckgpt-header-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.franckgpt-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid #F2C063;
    background: white;
}

.franckgpt-header h1 {
    margin: 0;
    font-size: 1.4rem;
    color: #F2C063;
}

.franckgpt-header h2 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: normal;
    opacity: 0.8;
}

/* ZONE CHAT */
.franckgpt-main {
    position: fixed;
    top: 110px;
    bottom: 80px;
    left: 0;
    right: 0;
    padding: 15px;
    overflow-y: auto;
}

/* FOOTER */
.franckgpt-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-foot);
    padding: 10px;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.4);
}

.franckgpt-input-zone {
    display: flex;
    gap: 10px;
}

.franckgpt-input-zone input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 20px;
    border: none;
    outline: none;
    background: #1c1c3a;
    color: white;
}

.franckgpt-input-zone button {
    background: #F2C063;
    color: #111137;
    border: none;
    border-radius: 20px;
    padding: 10px 18px;
    font-weight: bold;
    cursor: pointer;
}

.franckgpt-input-zone button:hover {
    background: #ffd685;
}

/* Bulle FranckGPT */
#franck-bubble {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 65px;
    height: 65px;
    background: #F2C063;
    color: #111137;
    font-size: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    z-index: 2000;
    transition: transform 0.2s;

    background-image: url("../images/franckgpt.png");
    background-size: 64px;
}

#franck-bubble:hover {
    transform: scale(1.1);
}

/* Fenêtre popup */
#franck-popup {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 380px;
    height: 520px;
    background: #111137;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    overflow: hidden;
    z-index: 2000;

    transform: scale(0);
    transform-origin: bottom right;
    transition: transform 0.25s ease;
}

/* Quand ouvert */
#franck-popup.open {
    transform: scale(1);
}

/* Header */
#franck-header {
    height: 50px;
    background: #5C42B0;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    font-weight: bold;
}

/* Bouton fermer */
#franck-close {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
}

/* Iframe */
#franck-popup iframe {
    width: 100%;
    height: calc(100% - 50px);
    border: none;
    background: white;
}

/* ============================== */
/* === PAGE SNAKE - INTÉGRATION === */
/* ============================== */

body > header {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 20px 10px;
}

body > header h2 {
    color: #F2C063;
    text-shadow: 0 0 10px rgba(242, 192, 99, 0.4);
}

body > header p {
    opacity: 0.9;
    line-height: 1.6;
}

/* Zone de jeu */
#snake {
    margin-top: 30px;
    border-radius: 20px;
    border: 4px solid #5C42B0;
    background: #0c0c1f;
    box-shadow:
        0 0 0 4px rgba(92, 66, 176, 0.4),
        0 15px 40px rgba(0,0,0,0.6);
    transition: transform 0.2s;
}

#snake:hover {
    transform: scale(1.01);
}

/* Conteneur bouton score */
#divSnake {
    margin-top: 25px;
}

/* Bouton poster score */
#bouttonSnake {
    background-color: #F2C063;
    color: #111137;
    font-family: sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 12px 30px;
    border-radius: 50px;
    border: none;
    cursor: pointer;

    box-shadow: 0 5px 0 #c49b50;
    transition: all 0.2s ease;
}

#bouttonSnake:hover {
    background-color: #ffd685;
    transform: translateY(-3px);
    box-shadow: 0 8px 0 #c49b50;
}

#bouttonSnake:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #c49b50;
}

/* =============================== */
/* === PAGE LOGIN HORLOGES UI === */
/* =============================== */

.login-page {
    min-height: 100vh;
    background: radial-gradient(circle at top, #1c1c4a, #080816);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
}

.login-page h1 {
    color: #F2C063;
    margin-bottom: 40px;
    text-align: center;
    text-shadow: 0 0 15px rgba(242, 192, 99, 0.5);
}

.clock-container {
    background: linear-gradient(135deg, #5C42B0, #111137);
    border: 4px solid #F2C063;
    border-radius: 30px;
    padding: 40px;
    margin-bottom: 50px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.7);

    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    align-items: start;                   
    gap: 40px;
}




/* TEXTE DES VALEURS */
#valMechanical,
#valSolar {
    margin-top: 15px;
    font-weight: bold;
    color: #F2C063;
}

/* HORLOGE NUMÉRIQUE */
.digital-clock {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 2rem;
}

.separator {
    color: #F2C063;
    font-weight: bold;
}

.digit-display {
    display: flex;
    gap: 6px;
}

.digit {
    width: 40px;
    height: 60px;
    background: #0d0d24;
    border-radius: 10px;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.8);
    position: relative;
}

.digit::after {
    content: attr(data-val);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F2C063;
    font-weight: bold;
}

/* BOUTONS + / - */
.btn-row {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

.btn {
    width: 45%;
    background: #DA5DD2;
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 0 #9e3d9a;
    transition: 0.2s;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #9e3d9a;
}

/* ✅ BOUTON SUIVANT */
#nextBtn {
    margin-top: 20px;
    background: #F2C063;
    color: #111137;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 14px 40px;
    border-radius: 50px;
    border: none;
    cursor: pointer;

    box-shadow: 0 6px 0 #c49b50;
    transition: all 0.2s ease;
}

#nextBtn:hover {
    background: #ffd685;
    transform: translateY(-3px);
    box-shadow: 0 9px 0 #c49b50;
}

#nextBtn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #c49b50;
}


/* =============================== */
/* === PAGE MOT DE PASSE PIANO === */
/* =============================== */

.piano-page {
    min-height: 100vh;
    background: radial-gradient(circle at top, #1c1c4a, #080816);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
}

.piano-page h1 {
    color: #F2C063;
    margin-bottom: 10px;
    text-shadow: 0 0 15px rgba(242, 192, 99, 0.5);
}

#modeText {
    margin-bottom: 15px;
    font-weight: bold;
    color: #DA5DD2;
}

/* BOUTON TOGGLE MODE */
#toggleModeBtn {
    margin-bottom: 30px;
    background: #5C42B0;
    color: white;
    border: none;
    border-radius: 30px;
    padding: 10px 25px;
    cursor: pointer;
    font-weight: bold;

    box-shadow: 0 5px 0 #3a2a7a;
    transition: 0.2s;
}

#toggleModeBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 #3a2a7a;
}

/* ================= */
/* === PIANO UI === */
/* ================= */

.piano {
    position: relative;
    display: flex;
    margin: 30px 0 40px;
    height: 200px;
    user-select: none;
}

/* TOUCHES BLANCHES */
.key {
    width: 60px;
    height: 200px;
    background: linear-gradient(to bottom, #ffffff, #dcdcdc);
    border: 1px solid #999;
    border-radius: 0 0 10px 10px;
    box-shadow: inset 0 -5px 10px rgba(0,0,0,0.2);
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.key:active {
    background: #eee;
}

/* TOUCHES NOIRES */
.key.black {
    position: absolute;
    width: 40px;
    height: 120px;
    background: linear-gradient(to bottom, #222, #000);
    z-index: 2;
    border-radius: 0 0 8px 8px;
    top: 0;
    box-shadow: inset 0 -6px 8px rgba(255,255,255,0.1),
                0 4px 10px rgba(0,0,0,0.8);
}

.key.black:active {
    background: #333;
}

/* ========================== */
/* === BOUTONS D'ACTIONS === */
/* ========================== */

.piano-actions {
    display: flex;
    gap: 25px;
    margin-bottom: 25px;
}

#resetBtn {
    background: #DA5DD2;
    color: white;
    border: none;
    border-radius: 30px;
    padding: 12px 30px;
    font-weight: bold;
    cursor: pointer;

    box-shadow: 0 5px 0 #9e3d9a;
    transition: 0.2s;
}

#resetBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 #9e3d9a;
}

/* ✅ BOUTON CONTINUER */
#continueBtn {
    background: #F2C063;
    color: #111137;
    border: none;
    border-radius: 30px;
    padding: 12px 35px;
    font-weight: bold;
    cursor: pointer;

    box-shadow: 0 6px 0 #c49b50;
    transition: 0.2s;
}

#continueBtn:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 0 #c49b50;
}

/* ===================== */
/* === SÉQUENCE TEXTE === */
/* ===================== */

#sequence {
    margin-top: 10px;
    font-weight: bold;
    color: #F2C063;
    letter-spacing: 1px;
}


.bd-container {
     max-width: 70%;
    margin-top: 30px;
    text-align: center;
}

.bd-image {
    max-width: 90%;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

.remerciements {
    margin-top: 20px;
    font-size: 1.1rem;
    font-style: italic;
    color: #F2C063;
    text-align: center;
    line-height: 1.6;
}


.playbutton {
    border-radius: 50%;
    object-fit: cover;   /* évite les déformations */
}