body {
    width: 100%;
    font-size: 15pt;
    font-family: Georgia, sans-serif;
    background-image: url("maquetteSITE.png");
    margin: 0;
    display: flex;
    width : 100%;
    flex-direction: column;
    min-height: 100vh;
}

.simple{
    width: 100%;
    font-size: 12pt;
    font-family: Georgia, sans-serif;
    background-image: url("fondbleu.png");
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    color: white;
    font-family: Georgia, sans-serif;
}

/* ANIMATIONS*/

.anim {
    animation: rotation 1s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   TEXTE
   ========================= */

#texte {
    filter: blur(0px);
    width: 250px;
    height: 250px;
}

#texte:hover {
    filter: blur(4px);
    height: 250px;
    width: 250px;
}

#lum,
#C {
    height: 250px;
    width: 250px;
}
/* ==========================================================================
   ANIMATIONS AU DÉFILEMENT (SCROLL)
   ========================================================================== */

/* État initial de TOUS les blocs cachés avant le scroll */
.scroll-anim {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    will-change: opacity, transform;
}

/* État des blocs lorsqu'ils deviennent visibles à l'écran */
.scroll-anim.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   TITRES
   ========================= */

h1 {
    font-family: Arial Black, sans-serif;
    font-size: 7rem;
    color: #1B348F ;
    line-height: 1;
    margin: 0;
    text-align: left;
}
h4 {
    font-family: Arial Black, sans-serif;
    font-size: 7rem;
    color: #1B348F ;
    line-height: 1;
    margin: 0;
        justify-content: center;
    text-align: center;
}

#sous-titre {
    font-size: 1rem;
    color: black ;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-top: 20px;
    text-align: left;
}
main {
    flex: 1;
}

.separateur {
    border: none;
    border-top: 5px solid #CD2436;
    margin: 0;
}

h2 {
    font-size: 27pt;
    text-align: center;
    color: white;
}

#effet {
    height: 100%;
    background-color: #BBE2FC;
    color: white;
}

/* =========================
   BLOCS THÉMATIQUES
   ========================= */

.vue {
    width: 100%;
    height: 250px;
    background-color:#FCEBB0;
    display: flex;
	justify-content: flex-start;
}

.Fatigue {
    width: 100%;
    height: 250px;
    background-color: #CD2436;
    display: flex;
	justify-content: flex-start;

}

.concentration {
    width:100%;
    height: 250px;
    background-color:#FCEBB0;
    display: flex;
	justify-content: flex-start;
}

/* =========================
   INTRODUCTION / HERO / CTA
   ========================= */
   #heroN {
    background-image: url(NotreGroupe.jpg);
    background-size: cover;
    background-position: center;
    padding: 80px 60px;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#hero {
    background-image: url(MaquetteSite.png);
    background-size: cover;
    background-position: center;
    padding: 80px 60px;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#hero-contenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#hero-texte {
    flex: 2;
}

@keyframes secousse {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(5deg); }
    50%  { transform: rotate(0deg); }
    75%  { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

#hero-contenu img {
    width: 550px;
    height: auto;
    margin-right: 80px;
    animation: secousse 2s ease-in-out infinite;
}
    #CTA {
    background-color: #C9533A;
    background-size: cover;
    background-position: center;
    padding: 40px 60px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* <-- AJOUTÉ : Centre horizontalement les éléments (titre, texte, bouton) */
    text-align: center;  /* <-- AJOUTÉ : Centre le texte du paragraphe si besoin */
}

#CTAp {
    font-size: 14pt;
    font-family: Georgia, sans-serif;
    color: white;
    margin-top: 20px;
        text-align: center;
}
.bouton-cta {
    display: inline-block;
    font-size: 15pt;
    background-color: #FCD608; /* Le jaune de votre charte */
    color:white; /* Texte noir pour le contraste */
    text-decoration: none;
font-family: Georgia, sans-serif;
    padding: 15px 30px;
    border-radius: 30px;
    margin-top: 25px;
    width: fit-content;
    box-shadow: 4px 4px 0px #1B348F; /* Ombre bleue */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bouton-cta:hover {
    transform: scale(1.05); /* Légère animation au survol */
    box-shadow: 6px 6px 0px #1B348F;
}
.intro {
    width: 70%;
    margin: 40px auto;
    background-color: #1B348F;
    padding: 25px 35px;
    border-radius: 12px;
    border-left: 6px solid #FCD608;
    color: white;
    font-size: 1.05rem;
    line-height: 1.7;
    box-shadow: 4px 4px 0px #FCD608;
}

/* =========================
   BOÎTES DE CONTENU
   ========================= */
#article {
    background-image: url(foond.png);
    background-size: cover;
    background-position: center;
    padding: 80px 60px;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.conteneur-box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin: 60px auto;
    padding: 0 40px;
    max-width: 1200px;
}

.box {
    background-color: #1B348F;
    border: 3px solid #FCD608;
    border-radius: 14px;
    width: 290px;
    padding: 25px;
    color: white;
    box-shadow: 4px 4px 0px #CD2436;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.box:hover {
    transform: translateY(-7px);
    box-shadow: 6px 6px 0px #FCD608;
    border-color: #CD2436;
}

.box h3 {
    font-size: 1rem;
    font-family: Arial Black, sans-serif;
    color: white;
    margin: 12px 0 4px 0;
}

.box .poste {
    font-size: 0.85rem;
    font-weight: bold;
    color: #FCD608;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.box p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: white;
    margin: 0;
}

.image-membre {
    width: 100%;
    max-width: 180px;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* =========================
   HEADER
   ========================= */

header {
    height: 85px;
    background-color: #FCEBB0;
    color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

/* Logo centré */
header #logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Navigation */
header nav {
    margin-left: auto;
    display: flex;
    align-items: center;
}

header nav ul {
    display: flex;
    margin: 0;
    padding: 0;
}

header li {
    display: inline-block;
    width: 150px;
    height: 60px;
    text-align: center;
    list-style: none;
}

header li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: black;
    text-decoration: none;
}

header li a:hover {
    background-color: red;
    border-radius: 30px;
}

/* Compatibilité ancienne version */

#groupe1 {
    display: inline-block;
    position: relative;
    left: 800px;
    width: 150px;
    text-align: center;
}

#groupe2 {
    display: inline-block;
    position: relative;
    right: 10px;
    width: 150px;
    text-align: center;
}

/* styles membre1 et membre2 supprimés — remplacés par .box */



#image-membre{
	width: 212px;
    max-width: 100%;
    height: auto;
}

#Ville{
    position: relative;
    width: fit-content;
    margin-left: auto;
    text-align: right;
    bottom: 300px;
}


#Form{
    background-color: #FCEBB0;
}
.grand{
    transition-duration: 1s;
}
.grand:hover{
    font-size: 30px;
}

.eclaire{
    opacity: 0.23;
}
.eclaire:hover{
    transition-duration: 1s;
    opacity: 1;
}

.police{
    transition-duration: 1s;
}

.police:hover{
    font-family : 'Arial black';
    font-size: 20px;
    color: #1B348F; 
    
}
/* =========================
   IMAGES
   ========================= */

.EffetGif {
    width: 100%;
    height: auto;
}

#carte{
    display: block;
    margin: auto;
    position: static;
}
/* =========================
   FOOTER
   ========================= */

footer {
    background-color: #FCEBB0;
    color: black;
    text-align: center;
    padding: 30px 1.5rem;
    margin-top: auto;
}

footer p {
    margin: 5px 0;
    font-size: 14px;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 15px 0 0;
    display: flex;
    justify-content: center;
}

footer li {
    font-size: 13px;
    color: black;
}

form{
    text-align: center;
    background-color:#CD2436 ;
}

.Nous{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}