/*
Theme Name: 7e-republique
Theme URI: https://7e-republique.fr/
Author: Elian Arif
Author URI: https://7e-republique.fr/
Description: Theme from the blog 7e-republique.fr, vive la France.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: 7e-republique
*/

/* ------------------------
   SECTION PRÉSENTATION
------------------------- */
.presentation {
    display: flex;
    flex-direction: column;
    justify-content: center;  /* Centrer verticalement */
    align-items: center;      /* Centrer horizontalement */
    padding: 1rem;       /* Un peu d'espace tout autour */
    background: linear-gradient(135deg, #f9f6f1, #d4a6a1); /* Dégradé très doux beige très clair → rouge bordeaux atténué */
    text-align: center;
    width: 100%;              /* Largeur 100% pour s'adapter à la page */
    max-width: 900px;        /* Largeur max de la section */
    margin: 0 auto;           /* Centrer la section horizontalement */
    border-radius: 10px;      /* Coins arrondis pour plus de douceur */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Ombre très légère */
}

.presentation h1 {
    font-size: 2.5rem;
    color: #333;
    font-weight: 700;
    margin-bottom: 2rem; /* Plus d'espace sous le titre */
    line-height: 1.2;
}

.presentation p {
    font-size: 1.125rem;
    color: #555;
    line-height: 1.8;
    max-width: 800px;         /* Largeur max pour le texte */
    margin: 0 auto;           /* Centrer le texte */
    padding: 0 1rem;          /* Un peu de padding pour que le texte ne touche pas les bords */
    margin-top: 1.5rem;       /* Plus d'espace au-dessus du texte */
}

/* ------------------------
   SECTION CERCLES
------------------------- */

.hero-circles {
    min-height: 30vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.circle-container {
    position: relative;
    width: 100%;
    max-width: 700px;
    aspect-ratio: 7 / 5;
}

/* ------------------------
   CERCLES (COMMUN)
------------------------- */

.circle-bubble {
    position: absolute;
    width: clamp(80px, 11vw, 125px);
    height: clamp(80px, 11vw, 125px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    padding: 0.6rem;
    box-shadow: 0 4px 8px rgba(0,0,0,.2);
    font-size: clamp(11px, 1.1vw, 16px);
}

/* ------------------------
   POSITIONS — DESKTOP / TABLETTE
------------------------- */

/* Centre réel */
.circle-bubble.center {
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.circle-bubble.top-left {
    top: 18%;
    left: 20%;
}

.circle-bubble.left {
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
}

.circle-bubble.bottom-left {
    bottom: 8%;
    left: 3%;
}

.circle-bubble.top-right {
    top: 18%;
    right: 20%;
}

.circle-bubble.right {
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
}

.circle-bubble.bottom-right {
    bottom: 8%;
    right: 3%;
}

/* ------------------------
   HOVER
------------------------- */

.circle-bubble:hover {
    background-color: #333 !important;
}

/* ------------------------
   MOBILE — POSITIONS FACILES À AJUSTER
------------------------- */

@media (max-width: 768px) {

    .circle-container {
        max-width: 520px;
    }

    /* 🔧 CENTRE */
    .circle-bubble.center {
        top: 24%;   /* ← modifiable facilement */
        left: 50%;
    }

    /* 🔧 GAUCHE */
    .circle-bubble.top-left {
        top: 20%;
        left: 12%;
    }

    .circle-bubble.left {
        top: 50%;
        left: 2%;
    }

    .circle-bubble.bottom-left {
        bottom: 12%;
        left: 5%;
    }

    /* 🔧 DROITE */
    .circle-bubble.top-right {
        top: 20%;
        right: 12%;
    }

    .circle-bubble.right {
        top: 50%;
        right: 2%;
    }

    .circle-bubble.bottom-right {
        bottom: 12%;
        right: 5%;
    }
}

/* ------------------------
   MOBILE ÉTROIT
------------------------- */

@media (max-width: 480px) {

    .circle-container {
        max-width: 360px;
    }

    .circle-bubble {
        width: 80px;
        height: 80px;
        font-size: 12px;
        padding: 0.4rem;
    }

    /* 🔧 Ajustements fins */
    .circle-bubble.center {
        top: 10%;
    }

    .circle-bubble.top-left,
    .circle-bubble.top-right {
        top: 10%;
    }

    .circle-bubble.top-left {
        left: 18%;
    }

    .circle-bubble.top-right {
        right: 18%;
    }
    .circle-bubble.bottom-left,
    .circle-bubble.bottom-right {
        bottom: 2%;
    }

    .circle-bubble.bottom-left{
        left: 0%;
    }

    .circle-bubble.bottom-right{
        right:0%;
    }

}

/* ------------------------
   THÉMATIQUES
------------------------- */

.thematiques {
    padding: 4rem 1rem;
    width: 100%;
}

/* ------------------------
   TYPO & GÉNÉRAL
------------------------- */

p {
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    line-height: 20px;
    margin-bottom: 1.5rem; /* Espacement entre les paragraphes */
}

h1, h2, h3, h4, nav a {
    font-family: 'Bebas Neue', sans-serif !important;
    letter-spacing: .2em;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 2rem; /* Plus d'espace sous le titre */
}

h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 2rem;  /* Ajout d'un espacement avant les titres h2 */
    margin-bottom: 1.5rem; /* Espacement après les titres h2 */
}