/* RESET BASIQUE */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Le html et le body prennent toute la fenêtre */
html, body { width: 100%; height: 100%; overflow: auto; font-family: Lato, sans-serif;letter-spacing: 0.05em;line-height: 1.6; }
/* BACKGROUND PHOTO*/
.background-container { position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; overflow:hidden; }
.background-container img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(10,10,30,0.3); animation:fadeInOverlay 3s forwards; }
@keyframes fadeInOverlay { 0% { background:rgba(255,255,255,0); backdrop-filter:blur(4px); } 100% { background:rgba(255,255,255,0.2); backdrop-filter:blur(0px); } }
/* 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:3% 0% 1% 0%}
h2 {font-size:110%;text-transform: uppercase;width:100%;font-weight:normal;padding:1% 0% 1% 0%}
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:0% 0% 2% 0%}
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: 0% 5% 1.5% 5%; background-color: rgba(255, 255, 255, 0); }
.content-block-menu { width: 100%;top:0%; padding:1.5% 5% 0.8% 5%; z-index: 2000;box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5) }
@media screen and (max-width: 768px) {.content-block {padding: 1% 5% 5% 5%;}}
@media screen and (max-width: 768px) {.content-block-menu {padding: 3% 5% 3% 5%;}}
/* LOGO */ 
.logo {width: 299px;padding-top:2% }
@media screen and (max-width: 768px) {.logo {width: 200px; height:auto;padding-top:8%}}
/* 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: 180%;padding-top:0%;font-weight:bold;}
/* CONTACT */
.contact { padding:2% ; line-height:25px }
/* COPYRIGHTS */
.copyrights { padding:2% ; line-height:25px }
/* BOUTON */
.bouton {color: white;text-decoration: none !important;;padding:10px 10px 10px 10px;display: inline-block;z-index: 2000;box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5)  }
/* 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;}}
.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); }}
/* GALERIE */
.galerie {text-align: center;}
.galerie img {width: 100%;padding: 1% 0;display: block;margin: 0 auto;}



/* COULEURS*/
  /*  FONCE:  anthracite  33,31,33 */
  /*  CLAIR:  crème clair  242, 240, 232 */
  /*  ICONES: bleu moyen 16,97,169 */

/* POLICE TITRES ET LI */ h1, h2, h3, h4 {color:rgb(33,31,33);}
/* POLICE MENU ET BOUTONS */.titre-menu, .bouton, .modal-content, .modal-content .close, .modal-content a, .modal-content a:hover, .contact, .copyrights {color:rgb(33,31,33);}
/* POLICE SLOGAN */ .slogan {color:#ffffff;}

/* FOND MENU ET BOUTONS */.modal-content, .content-block-menu,.bouton {background-color: rgba(242, 240, 232, 0.9)}
/* FOND CONTACT ET COPYRIGHTS */ .contact, .copyrights {background-color: rgba(242, 240, 232, 0.7)}

/* ICONES */ .pulse-effect,.mail-contact {color:#F08B4B;}
/* LI CARRES */ li::before {color:#F08B4B;}
/* LIGNES */ hr {background-color:#F08B4B;}
hr {background-color: #F08B4B;}