/* =========================
   VARIABLES CSS GLOBALES
   ========================= */

/* Définition des variables CSS réutilisables sur l’ensemble du site */

:root{
    /* Couleur de fond principale du site */
    --color-bg: #f3f5f7;

    /* Couleur principale (boutons, liens, accents graphiques) */
    --color-primary: #0ea574;

    /* Variante plus foncée pour les états hover */
    --color-primary-dark: #0c825c;

    /* Couleur des titres */
    --color-heading: #0c6b3f;

    /* Couleur principale du texte */
    --color-text: #222222;

    /* Largeur maximale du contenu */
    --content-width: 1200px;

    /* Hauteur du header (utile pour le menu sticky) */
    --header-height: 80px;

    /* Rayon par défaut des angles arrondis */
    --box-radius: 14px;

    /* Ombre portée utilisée sur les blocs */
    --box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}


/* =========================
   STYLES GÉNÉRAUX
   ========================= */

/* Styles globaux du body */
body{

    /* Suppression des marges par défaut */
    margin:0;

    /* Police par défaut pour le texte */
    font-family: Arial, Helvetica, sans-serif;

    /* Couleur de fond générale */
    background:var(--color-bg);

    /* Couleur du texte */
    color:var(--color-text);

    /* Décalage du contenu pour compenser le header fixe */
    padding-top: var(--header-height);
}

/* Titres de niveau 1 à 3 */
h1, h2, h3{
    font-family:'Montserrat', sans-serif;
    color:var(--color-heading);
    margin-top:0;
}

/* Paragraphes */
p{
    font-size:1.6rem;
    line-height:1.8;
    margin:0 0 1rem;
}

/* Liens */
a{
    color:var(--color-primary);
    text-decoration:none;
}

/* États hover et focus des liens */
a:hover,
a:focus{
    color:var(--color-primary-dark);
    text-decoration:none;
}

/* Images */
img{
    max-width:100%;
    height:auto;
    display:block;
}


/* =========================
   CONTENEURS ET BLOCS
   ========================= */

/* Wrapper générique pour centrer le contenu */
.wrapper{
    max-width:var(--content-width);
    margin:0 auto;
}

/* Bloc de section réutilisable */
.section-box{
    max-width:var(--content-width);
    margin:0 auto 40px;
    background:#ffffff;

   /* Espacement interne */
    padding:40px 60px 60px;
}

/* =========================
   BOUTONS
   ========================= */

/* Bouton en forme de pilule */
.btn-pill{
    background:var(--color-primary);
    border:none;

   /* Forme arrondie */
    border-radius:999px;

   * Espacement interne du bouton */
    padding:15px 45px;

   /* Taille et poids du texte */
    font-size:1.3rem;
    font-weight:700;

   /* Couleur du texte */
    color:#ffffff;

   /* Permet l’affichage correct sur les liens */
    display:inline-block;
    cursor:pointer;
}

/* États hover et focus du bouton */
.btn-pill:hover,
.btn-pill:focus{
    background:var(--color-primary-dark);
    color:#ffffff;
}

/* Boutons Bootstrap personnalisés */
.btn{
    font-family:'Montserrat', sans-serif;
    font-weight:600;
}

/* =========================
   IMAGES ET MÉDIAS
   ========================= */

.hero img,
.tennis-intro img,
.welcome-section img,
.content img,
.map-section iframe,
.video-wrapper iframe {
    border-radius: calc(var(--box-radius) - 4px);
}

/* Images à l’intérieur des sections */
.section-box img {
    border-radius: calc(var(--box-radius) - 4px);
}

/* =========================
   ARRONDIS GLOBAUX
   ========================= */

/* Application d’angles arrondis sur les principaux blocs du site */
.hero,
.welcome-section,
.tennis-hero,
.tennis-intro,
.tennis-content,
.section-box,
main,
.content,
.sport-card,
.equipements,
.selection-hiver,
.sources-main,
.map-section,
.sport-links {
    border-radius: 16px;
}