*,
*::before,
*::after {
    box-sizing: border-box;
}

body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: linear-gradient(135deg, #004c96, #051148);
    color:white;
    line-height:1.6;
    background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.425)),url("/images/new/background_1.jpg") !important;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

header {
    background: hsla(100, 100%, 100%, .9);
    color: darkblue;
    padding: 0px 20px;
    text-align: center;
}

header.desktop-header {
    display: block;
}

header.mobile-header {
    display: none;
}


header .header-title {
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap:20px;
    flex-wrap:wrap;
    align-content: center;
}

header .header-text {
    display: flex;
    flex-direction: column;
}

header .header-logo{
    height:128px;
    width:auto;
    object-fit:contain;
}

header h1{
    font-size:48px;
    margin:0;
}

header p{
    opacity:0.9;
    margin-top:10px;
}

section {
    border-radius: 1em;
    padding: 1em 1em;
    background-color: hsla(0, 0%, 100%, .8);
    color: darkblue;
}

.container{
    max-width:1400px;
    margin:auto;
    padding:40px 20px;
    display: flex;
    flex-direction: column;
    gap: 2em;
    width: 100% !important;
    padding: 10px 20px !important
}

h2 {
    border-left:6px solid darkblue;
    padding-left:15px;
}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
    gap:25px;
    margin-top:25px;
}

.card {
    background:white;
    color:#1c2b36;
    padding:25px;
    border-radius:10px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, .4);
    transition:transform .2s;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 1/2;
}

.card p {
    margin: 0;
    line-height: 22px;
}

/* Cartes claires : on retire l'assombrissement noir du fond */
.card.bapteme { background: url(images/new/icone-bapteme.jpg) center / cover no-repeat !important; }
.card.bapteme-junior { background: url(images/new/icone-bapteme-junior.jpg) center / cover no-repeat !important; }
.card.loisirs { background: url(images/new/icone-loisirs.jpg) right center / cover no-repeat !important; }
.card.intermediaire { background: url(images/new/icone-intermediaire.jpg) center / cover no-repeat !important; }
.card.confirme { background: url(images/new/icone-confirme.jpg) right center / cover no-repeat !important; }
.card.encadrement { background: url(images/new/icone-encadrement.jpg) center / cover no-repeat !important; }
.card.specialites { background: url(images/new/icone-tech.jpg) center / cover no-repeat !important; }
.card.juniors { background: url(images/new/icone-juniors.jpg) center / cover no-repeat !important; }
.card.aide-moniteur { background: url(images/new/icone-aide-moniteur.jpg) center / cover no-repeat !important; }
.card.apnee-decouverte { background: url(images/new/icone-apnee-decouverte.jpg) center / cover no-repeat !important; }
.card.apnee-loisirs { background: url(images/new/icone-apnee-loisirs.jpg) center / cover no-repeat !important; }
.card.apnee-expert { background: url(images/new/icone-apnee-expert.jpg) center / cover no-repeat !important; }

/* Encart blanc translucide avec flou pour isoler le texte */
.card .contents {
    backdrop-filter: blur(3px);             /* Floute légèrement la photo sous le texte */
    -webkit-backdrop-filter: blur(3px);
    color: white;
    padding: 5px;
    border-radius: 8px;
    font-size: 18px;
    transition: opacity 0.3s ease;                     /* On cache l'encart par défaut */
    transition-delay: 0.12s;
}

.card p, 
.card ul, 
.card h3 {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    line-height: 1.2em;
}

/* Ajustement de la couleur des listes dans l'encart */
.card .contents ul {
    margin-bottom: 0;
    padding-left: 20px;
}

/* On remet le titre H3 en blanc avec une légère ombre portée direct sur la photo */
.card h3 {
    margin-top: 0;
    color: #ffffff;
    font-size: 1.3em;
    left: 0 !important;
    right: auto;
    position: relative;
    width: 100%;
}

.card:hover{
    transform:translateY(-4px);
}

.badge {
    display: inline-block;
    background: #007bc4;
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    width: fit-content;
}

.testimonial{
    background:#eef4f8;
    color:#1c2b36;
    padding:20px;
    border-radius:8px;
    margin-top:15px;
}

footer{
    margin-top:60px;
    background:#0c3d5a;
    color:white;
    text-align:center;
    padding:30px;
    font-size:14px;
}

.small{
    font-size:14px;
    opacity:0.8;
}

.btn-link img {
    border:none;
    padding:12px 18px;
    border-radius:12px;
    cursor:pointer;
    margin-top:10px;
    background: white;
    box-shadow: 0px 0px 10px 5px rgba(0,0,0,.1);
    max-width: 60vw;
}

.btn-link:hover img{
    transform: scale(1.05);
    transition: transform .3s ease, box-shadow .3s ease, -webkit-transform .3s ease, -webkit-box-shadow .3s ease;
}

.btn-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    flex-direction: column;
    align-items: center;
}

.secret{
    display:none;
    margin-top:20px;
    padding:20px;
    background:#fff7d6;
    color:#1c2b36;
    border-radius:8px;
}

.bubbles {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    overflow:hidden;
    z-index:0;
}

.bubble{
    position:absolute;
    bottom:-100px;
    background:rgba(255,255,255,0.2);
    border-radius:50%;
    animation:rise linear infinite;
}

@keyframes rise{
    0% {
        transform:translateY(0);
        opacity:0;
    }
    10% {
        opacity:1;
    }
    100% {
        transform:translateY(-120vh);
        opacity:0;
    }
}

#map{
    background:#dce9f3;
    height:400px;
    border-radius:10px;
    position:relative;
    overflow:hidden;
}

.spot{
    position:absolute;
    width:12px;
    height:12px;
    background:#e63946;
    border-radius:50%;
    cursor:pointer;
}

.planning{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
    margin-top:25px;
}

.session{
    background:white;
    color:#1c2b36;
    padding:20px;
    border-radius:10px;
    box-shadow:0 6px 20px rgba(0,0,0,0.08);
}

.day{
    font-weight:bold;
    font-size:18px;
    color:royalblue;
    margin-bottom:8px;
}

.activity{
    font-size:14px;
}

@media (max-width: 768px) {
    header.mobile-header {
        display: flex !important;
        padding: 5px 10px;
        width: 100%;
    }

    header.desktop-header  {
        display: none !important;
    }
    .mobile-header .header-title {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        justify-content: space-between;
        gap: 0px !important;
    }
    .mobile-header .header-logo {
        width: 48px;
        height: auto;
    }
/*
    .mobile-header .header-title h1 {
        display: none;
    }
*/
    .mobile-header .header-title + p,
    .mobile-header .header-title + p + p {
        margin-top: 1em;
    }

    .grid {
        grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    }

    .card {
        aspect-ratio: 1/1;
    }

    h3 {
        margin: 0;
    }
}

.question{
    margin-bottom:20px;
}

.question label{
    display:block;
    margin-top:6px;
    cursor:pointer;
}

section a{
    color:white;
    text-decoration:underline;
}

.card a{
    color:royalblue;
}