/* style.css */

/* Reset & base */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:#f4f7f6;color:#222;line-height:1.6}


/* Layout */
#page{max-width:960px;margin:auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.08)}
#branding{background:#97c49a;color:#fff;padding:2rem;text-align:center}
#branding h1 a{color:#fff;text-decoration:none}
#branding img{width:100%;height:auto;margin-top:1rem;border-radius:6px}

/* fond global */
body{
    background: linear-gradient(to bottom, #97c49a, #b9e4c9);
    min-height: 100vh;
}

/* fond du conteneur central */
#page{
    background: #fcfffd;        /* retire cette ligne si tu veux le fond vert partout */
}
/* Conteneur pleine largeur et responsive */
/* Ajustement rapide de l’espace autour de l’image en-tête */
#hero{
    position: relative;
    width: 100%;
    line-height: 0;          /* supprime l’espace sous l’image */
    margin: 0;               /* plus d’espace vertical */
    padding: 0;
	overflow: hidden;          /* pas de débordement */
}

#hero img{
    width: 100%;
    height: auto;
    display: block;
}

.hero-text{
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.7);
    max-width: 90%;            /* ne dépasse pas l’image */
    word-wrap: break-word;
}

.hero-text h1{
    font-size: 2.5rem;
    margin: 0 0 1.5rem;   /* interligne sous le titre */
}

.hero-text h1 a{
    color: #fff;
    text-decoration: none;
}

.hero-text p{
    font-size: 1.2rem;
    margin: 0 0 .75rem;   /* interligne sous le slogan */
}

/* Téléphones : texte plus petit + retour à la ligne */
@media (max-width: 600px) {
  .hero-text h1 a{
    font-size: 1.5rem;          
    margin: 0 0 .5rem;
  }
}
/* Cacher le slogan sur petits écrans */
@media (max-width: 600px) {
  .hero-text p {
    display: none;
  }
}


/* Titre du site */
#branding h1 a,
#site-description{
    color: #00695c;
}
#branding{
    padding: 0 !important;
    margin: 0;
}
#branding .wrapper{
    padding: 0;
}

/* Navigation */
#access{
    background: linear-gradient(to bottom, #b9e4c9, #97c49a); /* dégradé haut→bas */
    border-bottom: 1px solid #e5e5e5;
}
.menu{
    display:flex;
    flex-wrap:wrap;
    gap:1px;
}
.menu li{
    flex:1 1 auto;
    list-style:none;
}
.menu a{
    display:block;
    padding:1rem;
    text-align:center;
    color: #00695c;              /* texte vert foncé sur le dégradé */
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}
.menu a:hover,
.menu a.active{
   /* background:rgba(0,0,0,.08); /* légère teinte sombre au survol */
	background: rgba(0,105,92,.1);
}

/* Content */
#content{padding:2rem}
#content h1{margin-bottom:1rem;font-size:1.8rem;color:#00695c}
#content p{margin:.5rem 0}

/* Réduction de l’image à 80 % */
#content img {
    max-width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;  /* centre l’image horizontalement */
}
/* Footer */
#colophon{
    background:#97c49a;
    color:#00695c; 
    padding:1rem;
    text-align:center;
    font-size:.9rem;
}