/* RESET BASIQUE */ * { margin:0; padding:0; box-sizing:border-box; }  
/* Le html prend toute la fenêtre */ html { width:100%; height:100%; overflow:auto; font-family:Lato,sans-serif; line-height:150%; }  
/* Le body prend toute la fenêtre */ body { width:100%; height:100%; overflow:auto; font-family:Lato,sans-serif; line-height:150%; }  
/* Conteneur de l'image en fond */ .background-container { position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; overflow:hidden; }  
/* L'image en fond */ .background-container img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; opacity:0.5; animation:fadeInOpacity 3s forwards; }  
/* Définition de l'animation */ @keyframes fadeInOpacity { 0% { opacity:0.7; } 100% { opacity:0.3; } }  

/* Conteneur principal */
.container { width: 100%;}
/* LES POLICES ET TEXTES*/
h1 {font-size:130%;text-transform: uppercase;width:100%;text-align:left;font-weight:normal;padding:10px 0px 20px 0px}
h2 {font-size:110%;text-transform: uppercase;width:100%;font-weight:normal;padding:10px 0px 20px 0px}
h3 {font-size:100%;width:100%;text-align:left;}
h4 {font-size:90%;font-weight:300;}
hr {width: 50%; margin-left: 0;border: none; height: 1px; margin-bottom:20px}
ul {list-style:none; margin:0; padding:0;} 
li {position:relative; margin:0.5em 0; padding-left:1.5em;} 
li::before {content:"\2752"; position:absolute; left:0; top:0.2em; line-height:1;}
/* ======================== Apparition progressive + Zoom ======================== */
@keyframes fadeZoomIn { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } }
.content-div { animation: fadeZoomIn 1s ease forwards; opacity: 0; }
/* Bloc de contenu commun */ 
.content-block { width: 100%; padding: 1.7% 5% 1.7% 5%; background-color: rgba(255, 255, 255, 0); }
.content-block-menu { width: 100%;top:0%; padding:0.8% 5% 0.8% 5%; background-color: rgba(255, 255, 255, 0); z-index: 2000;  }
@media screen and (max-width: 768px) {.content-block {padding: 7% 5% 7% 5%;}}
@media screen and (max-width: 768px) {.content-block-menu {padding: 3% 5% 3% 5%;}}
/* Sticky classes */ 
.sticky-left, .sticky-center, .sticky-right { position: sticky; z-index: 10;}  
.sticky-left { top: 0; text-align: left;}  
.sticky-center { top: 10px; text-align: center;}  
.sticky-right { top: 20px; text-align: right;}
/* Non-sticky classes */ 
.left { text-align: left;} .center { text-align: center;} .right { text-align: right;}
/* SLOGAN */
.slogan { font-size: 150%; color:red}

/* CONTACT */
.contact { padding:2% ; line-height:25px }
/* COPYRIGHTS */
.copyrights { padding:2% ; line-height:25px }
/* BOUTON */
.bouton {color: white;text-decoration: none !important;;padding:5px 10px 5px 10px;display: inline-block;z-index: 2000; }
/* MENU DÉROULANT (voir le script togglemenu à mettre dans le javascript comme dans site bleu */
.modal { display: none; position: fixed; z-index: 3000; top: 10%; left: 50%; transform: translateX(-50%); width: 80%; height: auto; max-height: 80%; overflow-y: auto; }
.modal-content { width: 100%; height: auto; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; }
.modal-content .close { position: absolute; top: 10px; right: 20px; font-size: 30px; cursor: pointer; color: white; }
.modal-content a { display: block; margin: 10px 0; font-size: 20px; color: white; text-decoration: none; text-transform: uppercase; }
.modal-content a:hover { color: silver; }
/* ANIMATIONS*/
.slide-in-right {opacity: 0;transition: opacity 0.5s ease-in-out;}@keyframes slideInRight { from {transform: translateX(10%);opacity: 0;} to {transform: translateX(0);opacity: 1;}}
.animate-spin{animation:w3-spin 2s infinite linear} @keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
.pulse-effect {animation: pulse 2s ease-in-out infinite;animation-delay: 2.4s; /* Pause entre les effets */}@keyframes pulse {0% { transform: scale(1); }50% { transform: scale(1.5); }100% { transform: scale(1); }}

/* COULEURS*/

/*     */
/*     */

h1, h2, h3, h4, li::before {color:rgb(199,64,63);}
.modal-content, .content-block-menu, .bouton, hr {background-color: rgba(199,64,63, 0.8)}
.titre-menu, .bouton, .modal-content, .modal-content .close, .modal-content a, .modal-content a:hover, .contact, .copyrights {color:white;}
.contact, .copyrights {background-color: navy}
.pulse-effect {color:white;}
.animate-spin {color:white;}