body{
	background:#282828;
	background-position: top center;
	margin:0 auto;
	font-family:'Avenir', 'Segoe', 'Segoe UI';
	max-width: 1200px;
	overflow-y: scroll;
}

@font-face {
    font-family: "Agency FB";
    src: url('AGENCYR.TTF');
}

header{
	margin: 0 auto;
	background-color: #48233e;
}

header p{text-align:center; margin: 0; padding: 30px 0 0;}
.logo{width: 400px;}

a{color: black;}

.bloc-principal{width: 80%; margin: 0; padding: 0 10%; color:#000; text-align: center; background-color: #ffc127; float: left;}
.bloc-actu{width: 80%; margin: 0; padding: 0 10%; color:#000; text-align: center; background-color: #FFF; float: left; background-image: url("images/fond-actu.jpg"); background-position: top}
.bloc-gauche{background-color: #ff6a36; margin: 0; text-align: center; color: #fff;}
.bloc-droit{background-color: #ffc127; margin: 0; text-align: center; color: #000;}
.picto p{color: #fff; font-size: 24px; font-family: 'Agency FB'; text-align: center; text-transform: uppercase; letter-spacing: 1px; margin: 0; padding: 10px 0;}

h1{margin: 0; padding: 50px 10px 20px; font-family: 'Agency FB'; font-size: 45px; text-transform: uppercase; letter-spacing: 1px;}
p{padding: 5px 10px;}

footer{margin: 0 auto; margin: 0; padding: 10px 0; background-color: #48233e; text-align: center;}
footer,footer a{color: #ffc127;}


/* SmartPhone */

@media (max-width: 316px){
h1 {font-size: 20px;}
.logo{width: 250px !important;}
.bloc-activites{height: 850px !important;}
.activites img{width: 70% !important; height: 70% !important; margin-left: 15% !important; max-width: 300px;}
.picto{width: 100% !important;}
}

@media  (min-width: 317px) and (max-width: 520px){
.bloc-activites{height: 1250px !important;}
.activites img{width: 70% !important; height: 70% !important; margin-left: 15% !important; max-width: 300px;}
.picto{width: 100% !important;}
}

@media  (min-width: 521px) and (max-width: 640px){
.bloc-activites{height: 1200px !important;}
}

@media (max-width: 767px){
header img{margin: 0 0px;}
.logo{width: 300px;}
.bloc-principal{width: 90%; margin: 0; padding: 0 5%; color:#000; text-align: center; background-color: #ffc127; float: left;}
.bloc-actu{width: 90%; margin: 0; padding: 0 5%; color:#000; text-align: center; background-color: #FFF; float: left; background-image: none;}

.bloc-activites{width: 90%; padding: 0 5%; background-image: url("images/fond-activites.jpg"); background-color: #ffc127; background-repeat: no-repeat; height: 1380px;}
.activites{width: 100%; float: left; margin-right: 0; margin-bottom: 5px;}
.activites img{border-radius: 10px; width: 54%; height: 54%; margin-left: 23%; margin-top: 80px; max-width: 300px;}

.bloc-picto{width: 100%; margin: 0; float: left; background: #ff6a36;}
.picto{width: 33%; float: left; margin-left: 0; margin-bottom: 5px;}
.picto img{margin: 30px 0 0 !important;}

.bloc-gauche{width: 100%; float: left;}
.bloc-droit{width: 100%; float: left;}
.bloc-droit p{padding: 0;}
footer{font-size: 12px;}
}

/* Tablet */

@media (min-width: 767px) and (max-width: 1023px){
header img{margin: 0 auto;}
.bloc-principal{width: 90%; margin: 0; padding: 0 5%; color:#000; text-align: center; background-color: #ffc127; float: left;}
.bloc-actu{width: 90%; margin: 0; padding: 0 5%; color:#000; text-align: center; background-color: #FFF; float: left; background-image: none;}

.bloc-activites{width: 100%; margin: 0; background-image: url("images/fond-activites.jpg"); background-color: #ffc127; height: 564px;}
.activites{width: 33%; float: left; margin: 0;}
.activites img{border-radius: 10px; width: 90%; height: 90%; margin-left: 5% !important; margin-top: 170px; max-width: 300px;}

.bloc-picto{width: 100%;float: left; background: #ff6a36;}
.picto{width: 33%; float: left; margin: 0;}
.picto img{margin: 30px 0 0 !important;}

.bloc-gauche{width: 50%; float: left;}
.bloc-droit{width: 50%; float: right;}
}

/* Navigateur */

@media (min-width: 1024px){
.bloc-activites{float: left; background-image: url("images/fond-activites.jpg"); width: 100%; height: 564px;}
.activites{float: left; width: 33.33%;}
.activites img{border-radius: 10px; margin: 120px 10% 0; width: 80%; max-width: 300px;}

.bloc-picto{float: left; background: #ff6a36; margin: 0; padding: 20px 0 10px; width: 50%; height: 240px;}
.picto{width: 33%; float: left;}
p, li{font-size: 18px;}

.bloc-gauche{width: 50%; float: left;}
.bloc-droit{width: 50%; float: right;}
}

form.alpanet-form,
form {
    width: 90%;
    max-width: 700px;
    margin: 0 auto;
    font-family: system-ui, sans-serif;
}

/* Grille responsive pour les champs */
.alpanet-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .alpanet-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Labels --- */
.alpanet-label {
    font-size: 14px;
    color: #fff;
    display: block;
    margin: 5px;
}

/* --- Inputs et Textarea --- */
.alpanet-input,
.alpanet-textarea {
    width: 80%;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #fff;
    color: #222;
    font-size: 15px;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.alpanet-textarea {
    width: 90%;
}

/* Focus */
.alpanet-input:focus,
.alpanet-textarea:focus {
    border-color: #1e4bb8;
    box-shadow: 0 0 0 1px #1e4bb8;
    outline: none;
}

/* Hover */
.alpanet-input:hover,
.alpanet-textarea:hover {
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* --- Bouton Envoyer --- */
.alpanet-button {
    background: #48233e;
    color: white;
    border:1px solid #000;
    font-weight: 600;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.alpanet-button:hover {
    background: #ffc127;
}

/* Désactivé par le script */
.alpanet-button.opacity-50 {
    opacity: 0.5;
}

.alpanet-button.cursor-not-allowed {
    cursor: not-allowed;
}

/* --- Messages --- */
.hidden {
    display: none !important;
}

/* Chargement */
.loading {
    display: block;
    font-size: 14px;
    color: #555;
    margin-top: 5px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .loading {
        color: #ccc;
    }
}

/* Erreur */
.error-message {
    margin-top: 10px;
    padding: 10px 14px;
    background: #ffe5e5;
    color: #a30000;
    border: 1px solid #ffbaba;
    border-radius: 6px;
    font-size: 14px;
}

/* Succès */
.sent-message {
    margin-top: 10px;
    padding: 10px 14px;
    background: #e0ffe7;
    color: #006b1d;
    border: 1px solid #9affb5;
    border-radius: 6px;
    font-size: 14px;
}

.alpanetemail {
    display: none !important;
}