/* ==========================================
   1. BASE & LAYOUT GÉNÉRAL
   ========================================== */


a {
    text-decoration: none;
    color: inherit;
}



.trait {
    border-bottom: 1px solid #333333;
}

.titre h1 {
    width: 100%;
    text-align: center;
    color: #dfc493;
    margin: 30px 0;
}

/* ==========================================
   3. CONTENEUR PRINCIPAL (PAGE BLANCHE)
   ========================================== */

.container {
    width: 90%;
    max-width: 1100px;
    height: auto; /* CORRECTION MAJEURE : s'adapte automatiquement à la hauteur ! */
    min-height: 800px;
    border-radius: 24px;
    background-color: #FFFFFF;
    margin: 20px auto; /* Centre automatiquement le bloc */
    padding: 40px 20px;
    box-sizing: border-box;
}

/* ==========================================
   4. PORTÉE INTERACTIVE (INTERACTIONS NOTES)
   ========================================== */
.portee {
    text-align: center;
    margin-bottom: 40px;
}

.portee p, .portee h1 {
    color: #000;
    text-align: center;
}

/* Conteneur de l'image de la portée */
.portee-container {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    max-width: 100%;
}

.portee-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Styles des points (Notes interactives) */
.dot {
    position: absolute;
    width: 18px;
    height: 18px;
    background-color: #777;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.2s ease;
    cursor: pointer;
    transform-style: preserve-3d;
    z-index: 10;
    border: 1px solid #000;
}

.dot:hover {
    background-color: #ff3366;
    box-shadow: 0 0 12px #ff3366, 0 0 24px #ff3366;
    transform: translate(-50%, -50%) scale(1.2);
}

.dot:hover::after {
    content: attr(data-note);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #222;
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    font-family: sans-serif;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    pointer-events: none;
    z-index: 10;
}

/* Moustaches (Lignes supplémentaires pour le Do) */
.do3::before, .do2::before {
    content: "";
    position: absolute;
    border: 1px solid #000;
    width: 31px;
    height: 4px;
    background-color: #777;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(-1px);
    z-index: -1;
}

/* Positions relatives des notes (Clé de Sol & Fa) */
.do3  { top: 50%; left: 40%; }
.re3  { top: 47%; left: 45%; }
.mi3  { top: 43%; left: 50%; }
.fa3  { top: 39%; left: 55%; }
.sol3 { top: 35%; left: 60%; }
.la3  { top: 31%; left: 65%; }
.si3  { top: 27%; left: 70%; }
.do4  { top: 23%; left: 75%; }

.do1  { top: 87%; left: 40%; }
.re1  { top: 83%; left: 45%; }
.mi1  { top: 79%; left: 50%; }
.fa1  { top: 75%; left: 55%; }
.sol1 { top: 71%; left: 60%; }
.la1  { top: 67%; left: 65%; }
.si1  { top: 63%; left: 70%; }
.do2  { top: 59%; left: 75%; }

.separateur-section {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, #dfc493, transparent);
    margin: 4rem auto;
    width: 80%;
}

/* ==========================================
   5. EXERCICE DE LECTURE (QUIZ)
   ========================================== */
.exercice-lecture {
    max-width: 900px;
    margin: 3rem auto;
    padding: 1.5rem;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}
.image_lecturesol p, .image_lecturesol h2{
    color: #1a1a1a !important; /* Force le texte sombre sur la carte blanche */
    text-align: center;
}
.exercice-lecture p, .exercice-lecture h2 {
    color: #1a1a1a !important; /* Force le texte sombre sur la carte blanche */
    text-align: center;
}

.img-portee {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

/* Grille des 10 réponses */
.inputs-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 8px;
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .inputs-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.note-input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.note-input-group label {
    font-size: 0.85rem;
    font-weight: bold;
    color: #8a5020;
    margin-bottom: 4px;
}

.note-input-group input {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 8px 2px;
    border: 2px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    color: #1a1a1a !important;
    background-color: #ffffff;
}

/* Réponses Justes / Fausses */
.note-input-group.correct input {
    border-color: #2e7d32;
    background-color: #e8f5e9;
    color: #1b5e20 !important;
}

.note-input-group.incorrect input {
    border-color: #c62828;
    background-color: #ffebee;
    color: #b71c1c !important;
    text-decoration: line-through;
}

.status-icon {
    font-size: 0.9rem;
    margin-top: 4px;
    font-weight: bold;
}

.note-input-group.correct .status-icon::after {
    content: "✅";
}

.note-input-group.incorrect .status-icon::after {
    content: "❌";
}

/* Bouton et Carte Résultat */
.btn-valider {
    display: block;
    margin: 0 auto;
    padding: 12px 28px;
    background: #8a5020;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-valider:hover {
    background: #6e3f18;
}

.resultat-card {
    margin-top: 1.5rem;
    padding: 1rem;
    text-align: center;
    border-radius: 8px;
    background: #f8f6f0;
    border: 1px solid #f4a507;
}

.resultat-card h3, .resultat-card p {
    color: #2c2c2c !important;
}

.resultat-card.hidden {
    display: none;
}

/* ==========================================
   6. BOUTON RESET / RECOMMENCER
   ========================================== */
.btn-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 15px;
  padding: 10px 22px;
  background-color: #2b2b2b;
  color: #f0f0f0;
  border: 1px solid #444444;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}

.btn-reset:hover {
  background-color: #dfc493; /* Accent doré */
  color: #121212;
  border-color: #dfc493;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(223, 196, 147, 0.25);
}

.btn-reset:active {
  transform: translateY(0);
}

/*===========================================
    7. Section rythme -
    ========================================= */
    .rythme-section p, .rythme-section h2 {
    color: #1a1a1a !important; /* Force le texte sombre sur la carte blanche */
    text-align: center;
}

/* ==========================================
   6. PIED DE PAGE (FOOTER)
   ========================================== */

.footer {
    width: 100%;
    background-color: #0d0d0d;
    border-top: 1px solid #2d2d2d;
    padding: 40px 20px;
    margin-top: auto; /* Pousse le footer tout en bas de la page */
    text-align: center;
    box-sizing: border-box;
}

.footer p {
    color: #cccccc;
    font-size: 0.95rem;
    font-style: italic;
    letter-spacing: 0.5px;
}

/* ================================================================
   8. SECTION RYTHME (Métronome + Découpage du temps)
   Styles fusionnés depuis piano.css — tous scopés sous .page
   pour ne jamais interférer avec la section Lecture ci-dessus.
   ================================================================ */
.page{
    margin: 100px auto 0;
    width: 90%;
    max-width: 1100px;
    height: auto;
    background-color: #f5ebd0;
    border-radius: 24px;
    box-sizing: border-box;
    flex: 1;
}
/* --- LE CHÂSSIS NOIR DE L'INSTRUMENT --- */
/* ==========================================================================
   1. VARIABLES & FOND GLOBAL
   ========================================================================== */
:root {
    --w-width: calc(100% / 52); /* Largeur dynamique d'une touche blanche */
    --b-width: calc(var(--w-width) * 0.65); /* Largeur d'une touche noire */
}
.clavier{
    width: 1200px;
    height: 100px;
    padding: 50px;

}
/* ==========================================================================
   2. LECTEUR MIDI
   ========================================================================== */
/* --- BARRE DE CONTRÔLE MIDI --- */
.midi-controls {
    width: 450px;
    height: 100px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 350px;
    margin-bottom: 5px;
    padding: 8px 12px;
    background: #535050; /* <-- Mêle fond sombre et élégant que le meuble piano (fini le bleu/vert !) */
    border-radius: 6px;
    box-shadow: 0 4px 12px #5a5959;
}

#midi-file-input {
    display: none;
}

.midi-btn {
    width: 300px;
    background: #18181c;
    color: #ffb700;
    border: 1px solid #33333e;
    border-radius: 4px;
    padding: 6px 12px;
    font-family: monospace;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.midi-btn:hover:not(:disabled) {
    background: #22222a;
    border-color: #ffb700;
    box-shadow: 0 0 10px rgba(255, 183, 0, 0.3);
}

.midi-btn:disabled {

    cursor: not-allowed;
    border-color: #222;
}

.midi-btn.reset:hover:not(:disabled) {
    color: #ff3366;
    border-color: #ff3366;
    box-shadow: 0 0 10px rgba(255, 51, 102, 0.3);
}
.btn-pause{
    width: 250px;
}

/* ==========================================================================
   2. LE CHÂSSIS NOIR (PIANO FRAME)
   ========================================================================== */
.piano-frame {
    position: relative;
    background: #111115; /* Noir châssis */
    padding: 12px 10px 6px 10px;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
    width: 100%;
    height: 150px;
    
}

/* Bande de feutre rouge au-dessus des touches */
.red-felt {
    width: 100%;
    height: 6px;
    background: linear-gradient(to bottom, #800000, #cc0000);
    border-radius: 2px 2px 0 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Signature "L'Atelier des Notes" sur le châssis */
.badge {
    position: absolute;
    top: 1px;
    right: 15px;
    font-family: monospace;
    font-size: 10px;
    color: rgba(251, 163, 0, 0.7); /* Effet gravure dorée */
    letter-spacing: 2px;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 10;
}

/* ==========================================================================
   3. LE CLAVIER ET LES TOUCHES
   ========================================================================== */
.piano-keyboard {
    position: relative;
    display: flex;
    width: 100%;
    height: 120px;
    background: rgb(105, 115, 150); /* Ton fond bleu/gris sombre */
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    user-select: none;
}

/* Touches Blanches */
.key.white {
    flex: 1;
    height: 120px;
    background: #fdfdfd;
    border: 1px solid #ccc;
    border-radius: 0 0 4px 4px;
    z-index: 1;
    box-sizing: border-box;
    transition: background 0.1s ease, box-shadow 0.1s ease;
}

/* Touches Noires */
.key.black {
    position: absolute;
    width: var(--b-width);
    height: 72px; /* 60% de 120px */
    background: #222;
    border-radius: 0 0 4px 4px;
    z-index: 2;
    box-sizing: border-box;
    transition: background 0.1s ease, box-shadow 0.1s ease;
}

/* ==========================================================================
   4. ÉCLAIRAGE DES TOUCHES (SÉPARATING MAINS)
   ========================================================================== */
/* --- MAIN GAUCHE : DÉGRADÉ DE BLEU SELON LA VÉLOCITÉ --- */
.key.active-left {
    /* Variables de tes deux bleus */
    --bleu-doux: #bcf6fa;   /* Bleu ciel / Cyan brillant */
    --bleu-fort: #0011ff;   /* Bleu nuit / Électrique intense */
    
    /* Mélange dynamique des deux couleurs */
    background: color-mix(
        in srgb, 
        var(--bleu-fort) calc(var(--v-ratio, 1) * 100%), 
        var(--bleu-doux)
    ) !important;

    /* Le halo s'élargit et prend la nuance du mélange */
    box-shadow: 
        0 0 15px color-mix(in srgb, var(--bleu-fort) calc(var(--v-ratio, 1) * 100%), var(--bleu-doux)),
        0 0 calc(20px + (20px * var(--v-ratio, 1))) color-mix(in srgb, var(--bleu-fort) calc(var(--v-ratio, 1) * 100%), var(--bleu-doux)) !important;
}

/* --- MAIN DROITE : DÉGRADÉ DE BLEU SELON LA VÉLOCITÉ --- */
.key.active-right {
    /* Variables de tes deux bleus */
    --orange-leger: #f5d0d0;   /* ORANGE/  brillant */
    --rouge-fort: #ff0000;   /* rOUGE INTENSE / Électrique intense */
    
    /* Mélange dynamique des deux couleurs */
    background: color-mix(
        in srgb, 
        var(--rouge-fort) calc(var(--v-ratio, 1) * 100%), 
        var(--orange-leger)
    ) !important;

    /* Le halo s'élargit et prend la nuance du mélange */
    box-shadow: 
        0 0 15px color-mix(in srgb, var(--rouge-fort) calc(var(--v-ratio, 1) * 100%), var(--orange-leger),
        0 0 calc(20px + (20px * var(--v-ratio, 1))) color-mix(in srgb, var(--rouge-fort) calc(var(--v-ratio, 1) * 100%), var(--orange-leger))) !important;
}

/* ==========================================================================
   5. LE PÉDALIER (OR & VIOLET)
   ========================================================================== */
/* --- RE-CALIBRAGE DU PÉDALIER --- */
.pedalboard {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    width: 120px;
    height: 40px;          /* Hauteur réglée */
    margin: 0 auto 0 auto; /* Centré exactement sous le châssis */
    background: #111115;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
}

.pedal {
    width: 14px;
    height: 30px;
    background: linear-gradient(135deg, #ffd700, #b8860b, #ffd700);
    border-radius: 0 0 5px 5px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
    transition: all 0.1s ease;
}

.pedal.sustain.active {
    background: linear-gradient(135deg, #b026ff, #7000ff) !important;
    box-shadow: 0 0 15px #b026ff, 0 0 25px #7000ff !important;
    transform: translateY(3px) scaleY(0.95);
}
/* ==========================================================================
   3. Métronome
   ========================================================================== */

/* --- CONTENEUR GLOBAL (Côte à côte) --- */
.page-container {
    display: flex;
    align-items: flex-start; /* Aligne les deux éléments par le haut */
    justify-content: center; /* Centre le tout horizontalement dans la page */
    gap: 40px;               /* Espace entre le métronome et le texte */
    margin-top: 60px;        /* <-- DÉTACHE DU HAUT DE LA PAGE ICI */
    padding: 20px;
}

/* --- LE MÉTRONOME (Colonne Gauche) --- */
/* --- LE MÉTRONOME (Centrage forcé du contenu) --- */
.metro {
   position: relative;
    width: 340px;
    height: 600px;
    
    /* EFFET BOIS ACAJOU / NOYER */
    background: linear-gradient(135deg, #4a2511 0%, #2b1307 50%, #1a0a03 100%);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8), 0 10px 25px rgba(0, 0, 0, 0.5);
    border-top: 2px solid #7c4220; /* Reflet sur l'arête haute */

    clip-path: polygon(22% 0%, 78% 0%, 100% 100%, 0% 100%);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    
    padding: 3rem 2rem 2rem 2rem;
    box-sizing: border-box;
}

/* --- LES BLOCS DE CONTRÔLE (Forcer le centrage interne) --- */
.control {
    width: 100%;
    max-width: 200px;           /* Réduit un peu pour ne pas frôler les bords du trapèze */
    margin-bottom: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;        /* Centre les boutons et sélecteurs dans leur bloc */
    text-align: center;
}

/* Centre le texte des labels et des titres (scopé à .page pour ne pas affecter le reste du site) */
.page h1, .page label {
    text-align: center;
    width: 100%;
}

/* S'assure que les boutons et select restent centrés avec une belle taille */
.page select, .page button {
    width: 100%;
    max-width: 200px;
    padding: 0.7rem 1rem;
    border: 0;
    border-radius: 8px;
    font-size: 0.95rem;
    box-sizing: border-box;
    text-align: center;         /* Centre le texte à l'intérieur des boutons/sélecteurs */
}

/* --- LE TEXTE D'EXPLICATION (Colonne Droite) --- */
.explication-rythme {
    max-width: 450px; /* Largeur confortable pour la lecture */
    color: #fff;
    font-family: sans-serif;
    line-height: 1.6;
    margin-top: 20px; /* Petit ajustement visuel par rapport au haut du métronome */
}

.explication-rythme h2, .explication-rythme h3, .explication-rythme p, .explication-rythme ul {
    color: #030303; /* Rappel du vert de ton bouton start */
    margin-top: 0;
}
.explication-rythme ul {
    color: #030303; /* Rappel du vert de ton bouton start */
    margin-top: 0;
    list-style-type: none; /* Retire les points */
}

/* On force tous les contrôles à ne pas dépasser la largeur utile (scopé à .page) */
.page .control, .page .tempo-wrap, .page .beat, .page h1 {
    width: 100%;
    max-width: 220px; /* Conserve les éléments au centre du trapèze */
    box-sizing: border-box;
}

.page h1 {
  margin: 0 0 0.8rem;
  text-align: center;
  color: #fff;
  font-size: 1.4rem;
}

.page label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
  color: #ccc;
  text-align: center;
}

.page input[type="range"] {
  width: 100%;
}

.page select {
  background: #1f0e06;
  color: #e0d0c0;
  border: 1px solid #5a331c;
}

/* Bouton Start version Laiton / Doré */
.page button {
  cursor: pointer;
  background: linear-gradient(180deg, #d4af37 0%, #aa820a 100%);
  color: #1a0a03;
  font-weight: bold;
  border: 1px solid #ffe58f;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.page button.stop {
  background: linear-gradient(180deg, #d93838 0%, #8b0000 100%);
  color: #fff;
  border: 1px solid #ff9999;
}

/* --- VOYANTS DES TEMPS (BEATS) --- */
.beat {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 0.5rem;
}

.beat span {
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 50%;
  background: #2a2a2a;
  color: #fff;
  font-size: 0.85rem;
  font-weight: bold;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.beat span.red { background: #fe0000; }
.beat span.green { background: #21ef2b; }
.beat span.active {
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
}

/* --- SLIDER TEMPO VERTICAL --- */
/* --- LE SLIDER VERTICAL --- */
/* --- SLIDER VERTICAL CENTRÉ & STYLE LAITON --- */
/* --- CONTENEUR DU SLIDER DE TEMPO --- */
.tempo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 210px; /* Espace vertical réservé à la tige */
  margin: 0.5rem 0;
  box-sizing: border-box;
}

/* --- LE SLIDER VERTICAL CENTRÉ --- */
#bpm {
  width: 180px; /* Longueur de la tige */
  transform: rotate(90deg);
  transform-origin: center center; /* S'assure que la rotation pivote exactement au centre */
  
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  
  margin: 0 auto;
  padding: 0;
  display: block;
}

/* Alignement des étiquettes (labels) si tu les places autour */
.tempo-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 180px;
  font-size: 0.8rem;
  font-weight: bold;
  color: #ccc;
}

/* Suppression des effets de focus par défaut du navigateur */
#bpm:focus {
  outline: none;
}

/* La tige métallique */
#bpm::-webkit-slider-runnable-track {
  height: 6px;
  background: linear-gradient(90deg, #222, #bbb, #fff, #bbb, #222);
  border-radius: 999px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
  border: none;
  margin-top: -25px;
}

/* Le curseur (Contre-masse en laiton) */
#bpm::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  
  /* Dimensions ajustées pour la rotation -90deg */
  width: 16px;  /* Épaisseur le long de la tige */
  height: 26px; /* Largeur perpendiculaire */
  
  border-radius: 3px;
  
  /* Dégradé Laiton / Bronze */
  background: linear-gradient(90deg, #ffe082 0%, #c5a059 50%, #7a5e20 100%);
  border: 1px solid #fff5c0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
  
  /* CENTRAGE PARFAIT : (Hauteur piste 6px - Hauteur thumb 26px) / 2 = -10px */
  margin-top: -10px; 
  cursor: grab;
}

/* Au clic (Prise en main) : pas de vert/orange, juste un effet laiton éclairé */
#bpm::-webkit-slider-thumb:active {
  cursor: grabbing;
  background: linear-gradient(90deg, #ffffff 0%, #d5b069 50%, #8a6e30 100%);
  box-shadow: 0 0 8px rgba(255, 224, 130, 0.6);
}

/* Support Firefox */
#bpm::-moz-range-track {
  height: 6px;
  background: linear-gradient(90deg, #222, #bbb, #fff, #bbb, #222);
  border-radius: 999px;
}

#bpm::-moz-range-thumb {
  width: 16px;
  height: 26px;
  border-radius: 3px;
  background: linear-gradient(90deg, #ffe082 0%, #c5a059 50%, #7a5e20 100%);
  border: 1px solid #fff5c0;
  cursor: pointer;
}
.bpm-display{
    color: #FFF;
}
/* Container général style atelier de musique */
.rythme-container {
  max-width: 600px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: linear-gradient(135deg, #2b1307 0%, #1a0a03 100%);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  border: 1px solid #5a331c;
  color: #f0e6d2;
  font-family: system-ui, -apple-system, sans-serif;
}
/* ==========================================================================
   4. Les notes en rythme bloc découpage de notes
   ========================================================================== */

.rythme-container h2 {
  text-align: center;
  font-size: 1.2rem;
  color: #ffe082;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.figure-group {
  margin-bottom: 1.2rem;
}

.figure-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  margin-bottom: 6px;
  color: #d0c0b0;
}

.note-icon {
  font-size: 1.2rem;
  color: #ffe082;
  width: 20px;
  text-align: center;
}

/* La barre représentant la durée totale de 1 TEMPS */
.temps-bar {
  display: flex;
  width: 100%;
  height: 48px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  padding: 3px;
  box-sizing: border-box;
  gap: 4px; /* Espace visuel entre les subdivisions */
  border: 1px solid #4a2511;
}

/* Style de base des blocs/pavés */
.bloc {
  flex: 1; /* S'étire automatiquement pour occuper la durée exacte ! */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  transition: transform 0.1s ease, filter 0.1s ease;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4);
}

.bloc:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

/* Effet d'illumination au passage du son */
.bloc.active {
  filter: brightness(1.8) contrast(1.2);
  box-shadow: 0 0 15px #ffe082, inset 0 0 8px #ffffff;
  transform: scale(1.03);
  transition: none; /* Allumage instantané sur le son */
}

/* Extinction douce après le bip */
.bloc {
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* COULEURS DES SUBDIVISIONS (Thème Chaleureux/Laiton) */

/* Noire : Grand bloc chaleureux */
.bloc.noire {
  background: linear-gradient(180deg, #d47a2a 0%, #aa530a 100%);
  color: #fff;
}

/* Croches : Teinte ambrée */
.bloc.croche {
  background: linear-gradient(180deg, #d4af37 0%, #a07d10 100%);
  color: #1a0a03;
}

/* Triolet : Teinte cuivre/or chaud */
.bloc.triolet {
  background: linear-gradient(180deg, #c58c59 0%, #8a5020 100%);
  color: #fff;
}

/* Doubles-croches : Petits carrés en laiton clair */
.bloc.double {
  background: linear-gradient(180deg, #ffe082 0%, #c5a059 100%);
  color: #1a0a03;
  font-size: 0.75rem;
}
/* Layout général à 2 colonnes */
.page-rythme-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* Colonne de gauche (Texte en noir / sombre) */
.col-texte {
  flex: 1;
  color: #2c2c2c; /* Texte sombre très lisible */
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
}

.col-texte h1 {
  font-size: 1.8rem;
  color: #1a1a1a;
  margin-bottom: 1rem;
}

.col-texte .chapeau {
  font-size: 1.1rem;
  color: #4a4a4a;
  margin-bottom: 1.5rem;
}

.explication-card {
  background: #f9f6f0;
  border-left: 4px solid #d47a2a;
  padding: 1.2rem;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.explication-card h3 {
  margin-top: 0;
  color: #8a5020;
}

/* Colonne de droite (Module interactif) */
.col-module {
  flex: 1;
  width: 100%;
}

/* ADAPTATION MOBILE (Responsive) : Repasse l'un sous l'autre sur écran étroit */
@media (max-width: 850px) {
  .page-rythme-layout {
    flex-direction: column;
  }
}
.pyramide-section {
  text-align: center;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background: #f9f6f0;
  border-radius: 10px;
  border: 1px solid #e0d8c8;
}

.img-pyramide {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}


/* ==========================================================================
   FUSION : contenu venant de style.css (styles globaux du site)
   ========================================================================== */

/* ==========================================
   1. RÉINITIALISATION & VARIABLES GLOBALES
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    scroll-behavior: smooth;
    
}

:root {
    --bg-color: #0c0c0e;
    --bg-card: #16161a;
    --primary-color: #00e6ff; /* Bleu électrique / néon initial */
    --text-color: #ffffff;
    --text-muted: #a0a0a5;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

/* ==========================================
   2. BARRE DE NAVIGATION (NAVBAR)
   ========================================== */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 8%; 
    background-color: rgba(12, 12, 14, 0.95);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid #222;
}

/* --- LOGO 3D ISOMÉTRIQUE AJUSTÉ --- */
.logo-3d-container {
    text-decoration: none;
    display: inline-block;
    perspective: 1000px;
    cursor: pointer;
}

.text-3d {
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column; 
    align-items: center; 
    transform: skew(60deg, 330deg) rotateX(45deg); 
}

.row-3d {
    display: flex;
    transform-style: preserve-3d;
}

.row-3d:last-child {
    margin-top: -10px; 
}

.letter {
    width: fit-content;
    height: fit-content;
    transform-style: preserve-3d;
    padding: 0 3px; 
    color: #8a8a93; 
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.letter span {
    display: block;
    font-family: 'Poppins', 'Franklin Gothic Medium', sans-serif;
    font-size: 32px; 
    font-weight: 200; 
    text-transform: uppercase;
    text-shadow: 
        -1px 1px 0px #020302, -2px 2px 0px #020302, -3px 3px 0px #020302, 
        -4px 4px 0px #020302, -5px 5px 0px #020302, -6px 6px 0px #020302, 
        -7px 7px 0px #020302, -8px 8px 1px #020302;
    transition: text-shadow 0.3s ease;
}

/* Survol harmonisé en rouge */
.letter:hover {
    color: #ff2a2a; 
}

.letter:hover span {
    text-shadow: 
        -1px 1px 0px #800000, 
        -2px 2px 0px #800000, 
        -3px 3px 0px #800000, 
        -4px 4px 0px #800000, 
        -5px 5px 0px #660000, 
        -6px 6px 0px #660000, 
        -7px 7px 0px #4d0000, 
        -8px 8px 10px rgba(255, 42, 42, 0.3);
}

/* --- LIENS DU MENU --- */
nav a {
    color: var(--text-color);
    text-decoration: none;
    margin-left: 20px;
    transition: color 0.3s;
}

nav a:hover {
    color: var(--primary-color);
}

.btn-nav {
    background: var(--primary-color);
    color: #000;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
}

nav a.active {
    color: var(--primary-color);
    font-weight: bold;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 5px;
}

/* ==========================================
   3. PAGES ACCUEIL & EN-TÊTES (HERO)
   ========================================== */
   section p, section h1{
    letter-spacing: 2px !important; /* <--- Applique vos 1.5px d'espacement pour que tout respire */
    line-height: 1; /* Donne un peu d'air entre les lignes si le texte passe sur 2 lignes */
    margin: 10px;
   }
.hero {
    height: 80vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background-image: url('../Images/tuto.jpg'); 
    background-size: cover;
    background-position: center;
    padding: 0 20px;
    overflow: hidden;
    
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.6) 100%),
                linear-gradient(to top, var(--bg-color) 5%, transparent 40%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    font-weight: bold;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.hero h1 span {
    color: var(--primary-color);
}

.hero p {
    font-size: 1.25rem;
    color: #f0f0f5;
    max-width: 650px;
    margin: 0 auto 35px auto;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.9);
}

.btn-primary {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: var(--primary-color);
    color: #000;
    box-shadow: 0 0 15px rgba(0, 230, 255, 0.4);
}

.tutos-hero {
    background: linear-gradient(rgba(12, 12, 14, 0.8), #0c0c0e), 
                radial-gradient(circle at bottom, rgba(0, 230, 255, 0.1), transparent);
    padding: 60px 8% 20px 8%;
    text-align: center;
    border-bottom: 1px solid #16161a;
}

.tutos-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: #fff;
}

.tutos-hero p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

/* ==========================================
   4. BARRE DE RECHERCHE & FILTRES HORIZONTALE
   ========================================== */
.search-filter-container {
    background-color: var(--bg-card);
    border: 1px solid #222;
    border-radius: 12px;
    padding: 20px 30px;
    margin: 40px 8% 20px 8%;
}

.filter-form {
    display: flex;
    flex-wrap: wrap; 
    gap: 20px;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 180px;
}

.filter-group.search-box {
    flex: 2; 
    min-width: 250px;
    position: relative;
}

.filter-group label {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
}

.input-field, .select-field {
    background-color: var(--bg-color);
    border: 1px solid #333;
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
    width: 100%;
}

.input-field:focus, .select-field:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(0, 230, 255, 0.2);
}

.btn-search {
    position: absolute;
    right: 5px;
    bottom: 4px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 8px 12px;
    transition: color 0.3s;
}

.btn-search:hover {
    color: var(--primary-color);
}

.btn-filter-submit {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 11px 25px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    height: 47px; 
}

.btn-filter-submit:hover {
    background-color: var(--primary-color);
    color: #000;
    box-shadow: 0 0 15px rgba(0, 230, 255, 0.3);
}

/* ==========================================
   5. SECTIONS DE CONTENU, GRILLES & CARTES
   ========================================== */
.section-container {
    padding: 60px 8% 80px 8%;
}

.section-container h2 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 40px;
}
/* Alignement propre du texte dans les cartes de tuto */
.tuto-card-content p {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-muted);
    margin-bottom: 15px;
    text-align: left; /* Annule le text-align: center hérité de .section-container p */
    flex-grow: 1;
}

.bg-dark-alt {
    background-color: #121214;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}
/* --- Cartes Boutique --- */
/* --- Cartes Générales --- */
.card {
    background-color: var(--bg-card);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.05) 100%);
    border: 1px solid #222; /* Bordure sombre discrète pour être identique aux cartes du haut */
    padding: 30px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    
    /* Disposition Flexbox centrée */
    display: flex;
    flex-direction: column;
    align-items: center;    /* Centre le contenu horizontalement */
    text-align: center;     /* Centre le texte */
    
    /* Ajout d'ombres internes (inset) pour marquer les plis */
    box-shadow: 
        inset 2px 2px 8px rgba(255, 255, 255, 0.07),
        inset -3px -3px 10px rgba(0, 0, 0, 0.4),
        0 10px 25px -5px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                border-color 0.3s ease, 
                box-shadow 0.3s ease;
    width: 100%; /* S'adapte parfaitement à la grille responsive sans dépasser */
}

/* 2. Permettre au texte de prendre tout l'espace disponible */
.card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px; /* Marge de sécurité sous le paragraphe */
    flex-grow: 1;        /* Pousse le bouton vers le bas */
}

/* 3. Ajuster le bouton pour qu'il reste calé en bas */
.card .btn, 
.card button, 
.card a.btn {
    margin-top: auto;   /* Sécurité supplémentaire d'ancrage en bas */
}
/* Survol de la carte : élévation + lueur */
.card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-color);
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.5), 
                0 0 15px rgba(212, 175, 55, 0.25); /* Lueur dorée/lumineuse */
}

/* Animation et style de l'icône */
.card-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
}

.card:hover .card-icon {
    transform: scale(1.1) translateY(-3px); /* L'icône grossit et remonte légèrement */
    color: var(--primary-color);
}

/* Titre */
.card h3 {
    margin-bottom: 12px;
    font-size: 1.35rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.card:hover h3 {
    color: var(--primary-color);
}


/* --- Grille Compacte (Tutos & Portfolio) --- */
.category-block {
    margin-bottom: 60px;
}

.category-title {
    font-size: 1.6rem;
    color: #ffffff;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #222;
}

/* ==========================================
   FORCE L'AFFICHAGE SUR 3 COLONNES (BOUTIQUE)
   ========================================== */
   /* ==========================================
   CONSTRUCTEUR DE GRANDE LARGEUR POUR LA BOUTIQUE
   ========================================== */

/* Libère le conteneur global pour qu'il prenne toute la largeur de l'écran */
.boutique-container {
    width: 100% !important;
    max-width: 1400px !important; /* <--- Donne l'espace nécessaire pour vos cartes */
    margin: 0 auto !important; /* Centre tout le bloc au milieu du site */
    padding: 40px 8% 80px 8%; /* Aligné sur vos marges d'origine */
    box-sizing: border-box;
    border: 2px solid #fff;
}

.tuto-card {
    background-color: var(--bg-card);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.05) 100%);
    border: 1px solid #222;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                border-color 0.3s ease, 
                box-shadow 0.3s ease;
}

.tuto-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-color);
    box-shadow: 0 15px 30px -10px rgba(0, 230, 255, 0.3); /* <-- SÉCURISÉ ET FERMÉ PROPREMENT */
}




/* --- Lecteurs YouTube --- */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; 
    height: 0;
    overflow: hidden;
    background-color: #000;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* --- Contenu des cartes --- */
.tuto-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.tuto-card-content h4 {
    font-size: 1.05rem;
    margin-bottom: 8px;
    color: #ffffff;
    
}

.tuto-card-content p {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-muted);
    margin-bottom: 20px;
    flex-grow: 1;
}

/* Ligne de séparation haute au-dessus des badges */
.tuto-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    margin-top: auto;
    border-top: 1px solid #222; /* Corrigé : border-top au lieu de border-bottom */
}

.difficulty-level {
    font-size: 0.8rem;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 4px;
}

.diff-easy { 
    background-color: rgba(46, 204, 113, 0.15); 
    color: #2ecc71; 
}   
.diff-medium { 
    background-color: rgba(241, 196, 15, 0.15); 
    color: #f1c40f; 
} 
.diff-hard { 
    background-color: rgba(231, 77, 60, 0.273); 
    color: #e74c3c; 
}    

.badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 3;
}

.badge-new { 
    background-color: #00e6ff; 
    color: #000; 
}
.badge-hot { 
    background-color: #ff3366; 
    color: #fff; 
}
.badge-promo { 
    background-color: #ffcc00; 
    color: #000; 
}
/* Badge de prix épuré */
.badge-prix {
    display: inline-block;
    background-color: #5f6aff; 
    color: #ffffff;
    border-radius: 6px; 
    padding: 4px 10px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(95, 106, 255, 0.3);
}


/* ==========================================
   6. PORTFOLIO DE RÉALISATIONS (STYLE CINÉMA)
   ========================================== */
/* ==========================================
   FIX D'ALIGNEMENT POUR LA PAGE PRÉSENTATION
   ========================================== */
.tuto-grid-compact {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important; /* Largeur idéale des affiches */
    gap: 30px !important;
    width: 100%;
    max-width: 1100px; /* Aligne les cartes sur la même largeur que votre texte À Propos */
    margin: 40px auto 0 auto !important; /* Centre parfaitement le bloc au milieu de la page */
}

.tuto-grid-compact > a.cinema-card {
    display: flex !important;
    flex-direction: column;
    text-decoration: none;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #222;
    background-color: var(--bg-card);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
}


/* Hauteur fixe de 320px pour vos affiches, parfaitement alignées */
.portfolio-img-box {
    position: relative;
    width: 100%;
    height: 320px; 
    overflow: hidden;
}
.portfolio-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Permet à l'image de remplir le cadre de 200px sans être déformée */
}


/* L'overlay avec un dégradé sombre élégant */
/* L'overlay avec un rembourrage (padding) ajusté */
.portfolio-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 15%, rgba(0, 0, 0, 0.4) 65%, rgba(0, 0, 0, 0.1) 100%);
    display: flex;
    align-items: flex-end; 
    justify-content: center;
    padding: 35px 25px; /* <--- Augmenté à 35px en bas pour décoller le texte du bord */
    box-sizing: border-box;
    opacity: 0.9; 
    transition: opacity 0.3s ease, background-color 0.3s ease;
    z-index: 2;
}



.portfolio-text-overlay {
    text-align: center;
    width: 100%;
    transform: translateY(10px); 
    transition: transform 0.4s ease;
}

.portfolio-text-overlay h4 {
    font-size: 1.2rem;
    color: #ffffff;
    margin-bottom: 6px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    letter-spacing: 1px !important; /* <--- Applique vos 1.5px d'espacement pour que tout respire */
    line-height: 1; /* Donne un peu d'air entre les lignes si le texte passe sur 2 lignes */
}

/* Cible le paragraphe pour l'éloigner du bouton */
.portfolio-text-overlay p {
    font-size: 0.85rem;
    color: #ccfffc; 
    margin-bottom: 25px !important; /* <--- Augmenté pour créer de l'espace avant le bouton */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
    letter-spacing: 1.5px !important; /* <--- Applique vos 1.5px d'espacement pour que tout respire */
    line-height: 1.5; /* Donne un peu d'air entre les lignes si le texte passe sur 2 lignes */
}

.portfolio-hover-btn {
    display: inline-block;
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0; 
    transition: all 0.3s ease;
}

/* --- HOVER SUR LES CARTES LIÉES À LA GRILLE --- */
.tuto-grid-compact > a.tuto-card:hover {
    transform: translateY(-5px);
    border-color: #ffcc00 !important; /* Lueur dorée cinéma */
    box-shadow: 0 10px 30px rgba(255, 204, 0, 0.15) !important;
}

.tuto-grid-compact > a.tuto-card:hover .portfolio-img {
    transform: scale(1.05); 
}

.tuto-grid-compact > a.tuto-card:hover .portfolio-text-overlay {
    transform: translateY(0);
}

.tuto-grid-compact > a.tuto-card:hover .portfolio-hover-btn {
    opacity: 1;
}

.portfolio-hover-btn:hover {
    background-color: var(--primary-color);
    color: #000;
    box-shadow: 0 0 15px rgba(0, 230, 255, 0.6);
}

/* ==========================================
   7. PAGE PRÉSENTATION TEXTE (EDITORIAL CORRIGÉ)
   ========================================== */
.representation-solo {
    width: 100%;
    max-width: 850px; /* Brise l'étirement et fixe une largeur idéale */
    margin: 40px auto !important; /* Force le centrage parfait horizontal */
    padding: 0 20px;
    box-sizing: border-box;
}

.about-story {
    width: 100%; /* Votre excellente intuition : on définit la largeur */
    margin-bottom: 40px;
    text-align: left; /* Garde le texte aligné à gauche pour la lecture */
}

.about-story h1 {
    font-size: 2.8rem;
    margin-bottom: 25px;
    color: #fff;
    text-align: center; /* Seul le grand titre principal est centré */
}

.about-story h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #fff;
    margin-top: 40px;
}

.about-story p {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 20px;
}

.lead-text {
    font-size: 1.3rem !important;
    color: #fff !important;
    font-weight: 300;
    line-height: 1.6;
}

/* Grand visuel de coupure lui aussi parfaitement centré */
.large-about-image {
    width: 100%;
    height: 450px;
    margin: 40px 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #222;
}

.large-about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================
   BANNIÈRE DEs PAGES (HAUTEUR 250PX)
   ========================================== */
.contact-banner {
    height: 250px; /* Hauteur exacte demandée */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background-image: url('../Images/tutomusical.jpg'); /* Reprend votre superbe image d'accueil */
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border-bottom: 1px solid #222;
}

/* Filtre pour assombrir la photo derrière le titre de contact */
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.6), var(--bg-color));
    z-index: 1;
}

.banner-content {
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

.banner-content h1 {
    font-size: 2.4rem;
    color: #ffffff;
    margin-bottom: 8px;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
    letter-spacing: 1px;
}

.banner-content p {
    font-size: 1.05rem;
    color: var(--primary-color); /* Texte en bleu électrique/néon */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
    font-weight: 300;
}

/* Ajustement pour que le contenu des cartes de la boutique soit compact */
.tuto-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Force le bloc prix et bouton à s'aimanter proprement tout en bas de la carte */
.tuto-card-content .tuto-meta {
    margin-top: auto !important; 
    width: 100%;
}

.demo-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 8px 0 15px 0;
    line-height: 1.4;
}

/* Style pour votre bouton Accéder au logiciel */
.btn-telecharger {
    margin-top: 5px;
    background-color: #ffffff;
    color: #000000;
    border: none;
    padding: 10px 20px;
    width: 100%;
    border-radius: 6px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: block;
    transition: background 0.3s, box-shadow 0.3s;
}

.btn-telecharger:hover {
    background-color: var(--primary-color); /* Devient bleu électrique au survol */
    box-shadow: 0 0 15px rgba(0, 230, 255, 0.4);
}

/* ==========================================
   STYLE DE LA PAGE CONNEXION / ESPACE MEMBRE
   ========================================== */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px 0;
}

.login-box {
    background-color: var(--bg-card);
    border: 1px solid #222;
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 450px; /* Boîte de connexion compacte et centrée */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

.login-box h2 {
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 8px;
    text-align: left;
}

.login-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 30px;
    text-align: left !important;
}

.input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    width: 100%;
}

.login-label {
    font-size: 0.85rem;
    color: #fff;
    font-weight: 600;
    text-align: left;
}

.label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.forgot-password {
    font-size: 0.8rem;
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s;
}

.forgot-password:hover {
    color: #fff;
    text-decoration: underline;
}

/* Bouton principal de connexion style blanc/néon */
.btn-login {
    background-color: #ffffff;
    color: #000000;
    border: none;
    padding: 12px 20px;
    width: 100%;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.btn-login:hover {
    background-color: var(--primary-color); /* Devient bleu électrique au survol */
    box-shadow: 0 0 15px rgba(0, 230, 255, 0.5);
}

.login-footer {
    margin-top: 25px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    border-top: 1px solid #222;
    padding-top: 20px;
}

.signup-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

.signup-link:hover {
    text-decoration: underline;
    color: #fff;
}
/* Zone de confirmation de suppression */
.delete-confirmation-box {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.delete-label {
    font-size: 0.95rem;
    color: var(--text-muted, #ccc);
}

.delete-label strong {
    color: #ff3366;
}

.delete-input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #444;
    background-color: var(--bg-card, #1e1e24);
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.delete-input:focus {
    border-color: #ff3366;
}

/* État désactivé du bouton */
.btn-delete-disabled {
    background-color: #44222b !important;
    color: #888888 !important;
    cursor: not-allowed !important;
    opacity: 0.6;
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

/* État actif du bouton */
.btn-delete-active {
    background-color: #ff3366 !important;
    color: #ffffff !important;
    cursor: pointer !important;
    opacity: 1;
}
/* Page 404 */
/* ==========================================
   STYLE DE LA PAGE D'ERREUR 404 (FAUSSE NOTE)
   ========================================== */
.error-404-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.error-404-box {
    text-align: center;
    max-width: 600px;
    padding: 40px;
    background-color: var(--bg-card);
    border: 1px solid #222;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

.error-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    animation: pulse-error 2s infinite ease-in-out;
}

.error-404-box h1 {
    font-size: 2.2rem;
    color: #fff;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.error-subtitle {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 35px;
}

.error-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-secondary-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    transition: color 0.3s;
}

.btn-secondary-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* ==========================================
   BANDEAU COOKIES CONFORME RGPD / CNIL
   ========================================== */
.cookie-banner-box {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(150%); /* Caché par défaut en bas */
    width: 90%;
    max-width: 600px;
    background-color: rgba(22, 22, 26, 0.98);
    border: 1px solid #222;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
    z-index: 9999;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Classe injectée par JavaScript pour faire surgir le bandeau */
.cookie-banner-box.show {
    transform: translateX(-50%) translateY(0);
}

.cookie-title {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 8px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cookie-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 20px;
}

.cookie-text a {
    color: var(--primary-color);
    text-decoration: none;
}

.cookie-text a:hover {
    text-decoration: underline;
}

/* Boutons d'action */
.cookie-btns {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-cookie-accept {
    background-color: #ffffff;
    color: #000;
    border: none;
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-cookie-accept:hover {
    background-color: var(--primary-color);
    box-shadow: 0 0 12px rgba(0, 230, 255, 0.4);
}

.btn-cookie-refuse {
    background-color: transparent;
    color: var(--text-muted);
    border: 1px solid #333;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-cookie-refuse:hover {
    color: #fff;
    border-color: #ff3366;
}
/* Style du bouton rouge néon pour annuler la commande */
.btn-annuler-commande {
    background-color: transparent;
    color: var(--text-muted);
    border: 1px solid #333;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-annuler-commande:hover {
    background-color: rgba(255, 51, 102, 0.05);
    color: #ffffff;
    border-color: #ff3366;
    box-shadow: 0 0 15px rgba(255, 51, 102, 0.3);
    transform: translateY(-2px);
}


/* Pied de page */
footer {
    text-align: center;
    padding: 40px;
    background-color: var(--bg-color);
    border-top: 1px solid #222;
    color: var(--text-muted);
    font-size: 0.9rem;
}
/* Style des liens légaux du footer */
.legal-links a:hover {
    color: var(--primary-color) !important;
    text-shadow: 0 0 8px rgba(0, 230, 255, 0.4);
}