/* ==========================================================================
   INDEX.CSS — styles propres à la page d'accueil (index.php)
   Les composants communs (bandeau, cartes, boutons…) sont dans global.css :
   ici on ne règle que ce qui est particulier à l'accueil.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. BANDEAU
   L'image fond.jpg se termine par une vague crème : on garde le bas visible.
   -------------------------------------------------------------------------- */
.bandeau--accueil {
    background-position: center bottom;
    min-height: clamp(420px, 85vh, 760px);
}

.bandeau--accueil h1 {
    max-width: 12ch;          /* titre sur plusieurs lignes, comme sur l'ancien site */
    margin-inline: auto;
}

/* Sur grand écran, l'encadré se place à droite pour laisser voir les joueurs */
@media (min-width: 900px) {
    .bandeau--accueil {
        justify-items: end;
        padding-inline: max(var(--marge-cotes), (100% - var(--largeur-max)) / 2);
    }
}


/* --------------------------------------------------------------------------
   2. QUI SOMMES-NOUS ? : texte + photo du phare
   -------------------------------------------------------------------------- */
.presentation {
    display: grid;
    gap: var(--espace-l);
    align-items: center;
}

.presentation__texte p {
    font-size: 1.1rem;
}

.presentation__image {
    width: 100%;
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

/* Mobile et tablette : photo moins haute, recadrée sur le phare */
@media (max-width: 899px) {
    .presentation__image {
        max-height: 420px;
        object-fit: cover;
        object-position: center 60%;
    }
}

/* Ordinateur : texte à gauche, photo à droite */
@media (min-width: 900px) {
    .presentation {
        grid-template-columns: 1.1fr 1fr;
        gap: var(--espace-xl);
    }
}


/* --------------------------------------------------------------------------
   3. LE CLUB : 3 cartes photo
   -------------------------------------------------------------------------- */
.cartes-club {
    --colonne-min: 200px;   /* 3 colonnes dès la tablette */
}

.cartes-club .carte-photo__texte {
    padding: var(--espace-l) var(--espace-m);
}

.cartes-club .carte-photo__texte h3 {
    margin-bottom: var(--espace-m);
}

/* Le faux bouton « Voir » se remplit quand on survole la carte */
.cartes-club .carte-photo:hover .btn,
.cartes-club .carte-photo:focus-visible .btn {
    background-color: var(--creme);
    color: var(--bleu-nuit);
}

/* Mobile : cartes moins hautes pour ne pas faire défiler trop longtemps */
@media (max-width: 599px) {
    .cartes-club .carte-photo {
        aspect-ratio: 4 / 3;
    }
}


/* --------------------------------------------------------------------------
   4. DERNIÈRES ACTUS (les cartes sont dans global.css)
   -------------------------------------------------------------------------- */
.actus-accueil__bouton {
    margin-top: var(--espace-l);
}


/* --------------------------------------------------------------------------
   5. RÉSEAUX : TikTok + Instagram
   -------------------------------------------------------------------------- */
.reseaux {
    display: grid;
    gap: var(--espace-xl);
}

.reseaux__bloc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espace-m);
}

.reseaux__bloc h3 {
    margin: 0;
}

/* ÉQUILIBRE TikTok / Instagram : les deux blocs ont exactement la même hauteur
   (--hauteur-media). Les 2 vidéos verticales et le carré de 4 photos Instagram
   occupent ainsi une place équivalente.
   Mobile : hauteur calculée pour que les 2 vidéos tiennent dans la largeur. */
.reseaux {
    --hauteur-media: min(320px, (100vw - 3rem) / 1.125);
}

@media (min-width: 900px) {
    .reseaux {
        --hauteur-media: clamp(300px, 26vw, 420px);
    }
}

/* Les 2 vidéos côte à côte, au format vertical 9:16 */
.reseaux__videos {
    display: grid;
    grid-template-columns: repeat(2, calc(var(--hauteur-media) * 9 / 16));
    gap: var(--espace-m);
}

.reseaux__videos video {
    width: 100%;
    height: var(--hauteur-media);
    object-fit: cover;
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    background-color: var(--bleu-nuit);
}

/* Les 4 publications Instagram : un carré 2 x 2 de la même hauteur que les vidéos */
.reseaux__insta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espace-m);
    width: var(--hauteur-media);
    height: var(--hauteur-media);
}

.reseaux__insta img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

/* Petit zoom au survol des vidéos et photos */
.reseaux__videos a,
.reseaux__insta a {
    display: block;
    border-radius: var(--rayon);
    transition: transform var(--transition);
}

.reseaux__videos a:hover,
.reseaux__insta a:hover {
    transform: scale(1.03);
}

/* Ordinateur : TikTok et Instagram côte à côte */
@media (min-width: 900px) {
    .reseaux {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}