@charset "UTF-8"; /* 20231009 Style Universaelle parametrabele. Développé pour EVT */ /* Recouvre image */ .blimover { width: 100% !important; height: 100% !important; z-index: 1000 !important; position: absolute !important; top: 0 !important; left: 0 !important; } body { background-color: ; /* font-family: Arial, Helvetica, sans-serif; */ font-family: Tahoma, Geneva, sans-serif; color: ; } .centrer { text-align: center; margin: auto; } .gestion { background-color: ; font-family: Arial, Helvetica, sans-serif; color: ; } .gestion .haut_de_page { display: none; } .gestion header { background-color: ; color: ; } a { color: #A3A3A3; text-decoration: none; } .a { color: #A3A3A3; text-decoration: none; } a:hover { color: #393939; } h2 a { color: black; } h2 a:hover { color: #393939; } section { margin-bottom: 50px; } .alerte { color: crimson; font-weight: bold; } .vert { color: green; font-weight: bold; } .hidden { display: none; } /* Container */ .container { margin-left: auto; margin-right: auto; padding-bottom: 20px; height: auto; background-color: ; color: ; } nav { float: right; width: 100%; margin-right: 25px; } .gestion nav { float: none; } .haut_de_page a { color: ; } .haut_de_page a:hover { color: black; } .haut_de_page { width: 100%; height: 5%; background-color: ; border-bottom: 1px solid #767676; } .haut_de_page nav ul { list-style: none; width: 350px; float: right; margin-right: 25px; } .haut_de_page nav ul li { width: 100px; float: left; color: #FFFFFF; font-size: 14px; text-align: center; letter-spacing: 2px; font-weight: bold; transition: all 0.3s linear; } .boutons { width: 92px; } .boutons img { width: 24%; } .boutons ul { position: absolute; /* on cache les sous menus complètement sur la gauche */ left: -999em; background-color: ; display: flex; flex-direction: column; } .boutons:hover ul { /* Au survol des li du menu on replace les sous menus */ left: inherit; width: 130px; margin: auto; text-align: center; } .boutons ul li a { text-align: left; margin: auto; } .menu { width: 100%; float: left; font-weight: normal; font-size: 20px; letter-spacing: 2px; } .soustitre { font-weight: lighter; font-size: 0.8em; } .menu nav ul { list-style: none; float: right; } .menu nav ul li { float: left; color: #FFFFFF; text-align: left; margin-right: 25px; letter-spacing: 2px; } @media screen and (max-width : 792px) { .menu { width: 100%; font-weight: normal; font-size: 10px; letter-spacing: 2px; } .menu nav ul { float: left; } .menu nav ul li { display: flex; flex-direction: column; margin-right: 25px; letter-spacing: 2px; } .resp { display: none; } } header { height: 80px; background-color: ; border: 7px solid ; padding: 15px; margin-top: 15px; text-align: center; } .acceuil { height: 210px; background-size: cover; /* Resize the background image to cover the entire container */ background-size: auto 100%; background-repeat: no-repeat; background-position: center top; background-color: ; padding: 70px; margin-top: 20px; color: ; text-shadow: 2px 2px , -2px -2px , -2px 2px , 2px -2px ; text-align: center; } .page h1 { margin: auto; font-size: 0.8em; } .page img { height: 70px; } @media screen and (max-width : 792px) { header { height: 120px; padding: 30px; margin-top: 8px; text-align: center; } header img { width: auto; max-width: 480px; height: auto; } header h1 { padding: 10px; font-size: 1em; } } .simpleSheet { padding: 10px; } .centreEtroit { width: 400px; margin: auto; text-align: left; } .centreEtroit h2 { text-align: center; } .centreEtroit table { padding-bottom: 8px; border: 1px; } .grosBoutonTablette { /* display: inline-block; */ Float: left; width: 200px; height: 300px; text-align: center; } .grosBoutonTablette img { width: 100px; height: 100px; cursor: pointer; } .centreMoyen { width: 600px; margin: auto; text-align: center; } .gaucheMoyen { width: 600px; margin: auto; text-align: left; background-color: aqua; } .centreLarge { width: 95%; margin: auto; clear: both; } .categories { margin: auto; padding-top: 35px; padding-left: 5%; display: inline-block; background-color: ; /* // Fond de couleur de la page d'accueil */ margin-top: 0px; } .text_column { text-align: justify; font-weight: lighter; line-height: 25px; color: ; } .image_colonne { width: 95%; } .colonne h2 { text-align: center; } .colonne iframe { text-align: justify; } .imgOfArticle { height: 300px; object-fit: contain; } .formulaire { width: 400px; margin: auto; text-align: center; } .fb { width: 100%; text-align: center; float: left; margin: auto; padding: 5px; } .pied { text-align: center; float: left; width: 98%; } .image { width: 150px; height: 220px; background-color: #444444; color: darkgray; padding: 20px; } .imageT { width: 400px; /* height: 130px; */ background-color: #444444; color: darkgray; padding: 15px; display: flex; } .imageT .th { width: 150px; } .texte { padding-left: 15px; width: 400px; } .imagette { width: 130px; height: auto; } .imagette img { border: thick; } .tableaumesphoto { display: flex; flex-wrap: wrap; justify-content: center; } .element { background-color: darkgrey; } /* Tableau MES INFOS **************************************** */ .tableauinfo th { text-align: right; } .tableauinfo td { text-align: left; } /* *************** Mise en page des formolaires ************* */ fieldset { width: 600px; padding: 20px 20px 20px 20px; margin: auto; margin-bottom: 10px; border: 3px solid darkslategrey; border-radius: 50px; } /* **************** Mise en pages Nous contacter ************ */ .text_contact { color: black; } .cadrecontact { width: 800px; margin: auto; padding: 20px; background-color: ; color: grey; border: 1px solid black; border-radius: 5%; } .cadrecontact form ul li { list-style: none; } .cadrecontact form ul li label { display: inline-block; width: 162px; HEIGHT: 20px; padding: 8px; background-color: black; color: #F1F1F1; } .cadrecontact form ul li input { display: inline-block; width: 540px; HEIGHT: 20px; padding: 7px; } .cases { /* display: inline-block; */ margin: 0px; float: left; } .cadrecontact form ul li textarea { width: 720px; height: 150px; padding: 7px; } /* **** Mise en pages tu tableu des prix dans fonctionsTarif.php **** */ .tableau_prix th { padding: 10px; text-align: center; } .teteLigne { padding-right: 10px; text-align: right; } .prix { text-align: center } /* **** Mise en pages tu tableu des messages clients dans message.php **** */ .cadremessages { width: 1000px; padding: 5px; margin: auto; /* background-color: ; */ } .cadremessages table { border: 1px solid #000000; padding: 5px; width: 100%; } .cadremessages ul li { list-style: none; } .cadremessages ul li ul { width: 1000px; } .cadremessages ul li ul li { list-style: none; display: inline-block; width: 200px; } .sujet { width: 1000px; } .texte { width: 1000px; } /* ---------------- Style du modole Galarie ---------------- */ .accueilPhotographe { width: 100%; } .accueilPhotographe img { width: 90%; padding: 0% 5%; } .titre { display: inline-block; padding-left: 5%; } .titre a { color: ; } .grillePhotos { width: 95%; min-height: 10px; margin: auto; display: flex; flex-wrap: wrap; justify-content: space-around; } .caseImage { width: 200px; height: 200px; overflow: hidden; object-fit: cover; padding: 20px; } .caseImage img { width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease-out; } .caseImage img:hover { width: 110%; height: 110%; } .imageTG { width: 500px; height: 170px; margin: 6px; background-color: #444444; color: darkgray; padding: 15px; display: flex; } .imageTG .texte p { width: 350px; overflow: auto; background-color: #4B1E00; } /* ----------------- Overlay de la page d'aceuil ------------------------- */ .overlayAcceuil { position: fixed; display: none; width: 100%; /* Full width (cover the whole page) */ height: 100%; /* Full height (cover the whole page) */ top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } /* ----------------- Slide Show du module galerie ----------------- */ .containerSlideShow * { box-sizing: border-box; } .containerSlideShow { position: absolute; left: 0px; top: 0px; background-color: black; width: 100%; display: none; } .slide img { width: 100%; margin: auto; max-height: 100%; } /* ----------------- Module réseau social ----------------- */ .reseauPost { width: 60%; margin: auto; background-color: grey; } /* ----------------- Mise en page Members -------------------- */ .containerMembers { display: flex; flex-wrap: wrap; justify-content: space-around; } .cardMember { width: 500px; color: #393939; background-color: #FFFFFF; border-color: #767676; border-radius: 5px; padding: 10px; margin: 5px; display: grid; grid-gap: 10px; grid-template-columns: 100px 1fr; grid-template-rows: 100px 1fr; align-items: center; } .actionMember { grid-column: 1; } .actionMember button { margin: 5px; } .avatarMember { padding: 5px; } .datasMember { width: 1fr; grid-column: 2; grid-row: 1/3; text-align: left; padding-left: 30px; }