/* ===== FOND PLEIN ÉCRAN SOUS LE MENU ===== */
.lettre-wrapper {
    background: url("fond-lettre.avif") center/cover no-repeat fixed;
    min-height: 100vh;
    padding: 40px 0; /* espace sous le menu */
}

/* Bloc de texte transparent */
.lettre-section {
    width: 80%;
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;

    background: rgba(255, 255, 255, 0.20); /* transparence légère */
    backdrop-filter: blur(6px);            /* effet verre dépoli */
    -webkit-backdrop-filter: blur(6px);    /* compatibilité */
    border-radius: 12px;

    color: #1a3a78;
    font-size: 32px;
	font-weight: bold;
    line-height: 1.6;
}

.contenu {
    background: transparent !important;
    box-shadow: none !important;
}



/* ===== TITRE ===== */
.titre-section {
    text-align: center;
    margin-bottom: 40px;
}

.titre-site {
    font-size: 42px;
    font-weight: bold;
    color: #1a3a78;
}

/* ===== LECTEUR AUDIO ===== */
.audio-player {
    margin: 20px auto 30px auto;
    text-align: center;
}

.audio-player audio {
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.4);
}

/* ===== PHOTO FINALE ===== */
.photo-fin {
    margin-top: 40px;
    text-align: center;
}

.photo-fin img {
    width: 80%;
    max-width: 500px;
    border-radius: 12px;
}

/* ===== BLOC PHOTO + AUDIO ===== */
.audio-wrapper {
    width: 100%;
    max-width: 900px;
    margin: 40px auto;
    text-align: center;
}

/* Photo dans un cadre */
.audio-photo img {
    width: 80%;
    max-width: 450px;
    border-radius: 12px;
    display: block;
    margin: 0 auto 20px auto;
}

/* Conteneur du lecteur */
.audio-player-box {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 20px;
    border-radius: 12px;
    width: 80%;
    max-width: 450px;
    margin: 0 auto;
}

/* Titre du lecteur */
.audio-title {
    font-size: 20px;
    font-weight: bold;
    color: #1a3a78;
    margin-bottom: 10px;
}

/* Lecteur audio */
.audio-player {
    width: 100%;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.4);
}
/* ===== MINI LECTEUR VIDEO ===== */

/* Conteneur vidéo dans le même style que l'audio */
.video-player {
    width: 100%;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.4);
    padding: 10px;
    box-sizing: border-box;
}

/* Vidéo elle-même */
.video-player video {
    width: 100%;
    max-width: 500px; /* même largeur que ton lecteur audio */
    border-radius: 10px;
    display: block;
    margin: 0 auto;
}

/* ===== LECTEUR VIDEO CARRÉ AVEC PHOTO ===== */
.video-box {
    width: 80%;
    max-width: 450px;
    margin: 0 auto 30px auto;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}

/* Vidéo carrée */
.video-box video {
    width: 100%;
    aspect-ratio: 1 / 1; /* ← carré parfait */
    border-radius: 12px;
    object-fit: cover;   /* ← la photo remplit le carré */
}