body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    margin: 0;
    padding: 40px 20px;
    font-family: "Old Standard TT", serif;
    background: #ffffff;
    color: #1a1a1a;
    text-align: center;
}

        .header { 
            margin-top: 60px; 
            margin-bottom: 60px; 
            text-align: center;
        }

h1 {
    font-size: 64px;
    margin: 0;
    font-weight: normal;
}

.explication {
    margin-top: 15px;
    font-size: 20px;
    color: #1a1a1a;
}

.subtitle {
    margin-top: 20px;
    font-size: 18px;
    font-style: italic;
    color: #595959;
}

#date {
    font-size: 16px;
    margin-top: 2px;
}

.carousel {
    max-width: 1100px;      /* largeur maîtrisée */
    margin: 60px auto 20px auto;
    position: relative;
}

.carousel img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    display: block;
    transition: opacity 0.6s ease-in-out;
    opacity: 1;
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Style du crédit photo */
.photo-credit {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    padding: 5px 12px;
    font-size: 11px;
    font-family: monospace;
    letter-spacing: 1px;
    border-radius: 4px;
    pointer-events: none; /* Ne gêne pas le clic sur l'image */
    transition: opacity 0.3s;
    text-transform: uppercase;
}

/* --- BOUTONS ÉLÉGANTS ET LUMINEUX --- */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.4);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition-duration: 0.3s;
    z-index: 30;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Effet de lueur au survol */
.nav-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 20px var(--accent-glow);
    border-color: rgba(255, 255, 255, 0.8);
    transform: translateY(-50%) scale(1.15);
}

/* Effet de clic */
.nav-btn:active {
    transform: translateY(-50%) scale(1);
}

#prev { left: -30px; }
#next { right: -30px; }

/* Icones SVG agrandies pour plus de clarté */
.nav-btn svg {
    width: 29px; /* Taille augmentée selon votre souhait */
    height: 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2; /* Épaisseur ajustée pour l'équilibre visuel */
    stroke-linecap: round;
    stroke-linejoin: round;
}

.carousel button:not(.expand-btn):hover {
    background: rgba(8, 8, 8, 0.5);
}

#prev { 
    left: 10px;  

}
#next { right: 10px; 
}

/* Styles pour le bouton d'agrandissement */
.expand-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: 1px solid rgba(32, 32, 32, 0.3);
    padding: 8px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit; /* Utilise Old Standard TT */
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    z-index: 20;
}

.expand-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translateY(-2px);
}

.expand-btn svg {
    width: 16px;
    height: 16px;
}

.caption {
    margin-top: 20px;
}

.caption h2 {
    margin: 0;
    font-size: 24px;
    font-weight: normal;
}

.archi {
    font-size: 17px;
    margin-top: 15px;
    color: rgb(39, 85, 85);
}

.coords {
    font-size: 16px;
    margin-top: 10px;
}

.repertoire {
    margin-top: 100px;
    text-align: center;
    font-family: "Old Standard TT", "Courier New", monospace;
    font-size: 20px;
    color: #1a1a1a;
    letter-spacing: 2px;
}

.repertoire a {
    color: inherit;
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
}

/* Application du soulignement progressif sélectionné */
.repertoire a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #242424;
    transform-origin: bottom right;
    transition: transform 0.4s ease-out;
}

.repertoire a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.repertoire.autre {
    margin-top: 20px;
}

.carousel img.fade-out {
    opacity: 0;
}

.footer {
    margin-top: 40px;
    padding: 10px;
    text-align: center;
    font-size: 12px;
    color: #aaa;
    letter-spacing: 1px;
    padding: 30px;
}

@media (max-width: 1024px) {
    .tel {
        display: none;
        max-width: 900px;
        margin: 0 auto;
    }
    .subtitle {
        display: none;
    }
    .container {
        display: none;
    }
    .repertoire a {
        font-size: 30px;
        border : solid 2px #1a1a1a;
        background-color: #1a1a1a;
        border-radius: 40px;
        color: white;
        padding: 20px 40px;
    }
    .repertoire.autre {
        display: none;
    }
}

@media (max-width: 600px) {
    h1 {
        font-size: 31px;
    }
    .repertoire a {
        font-size: 20px;
    }
}

@media (max-width: 400px) {
    h1 {
        font-size: 31px;
    }
    .repertoire a {
        font-size: 20px;
        padding: 20px 20px;
    }
}