/*
Theme Name: Électricien Montréal
Description: Électricien Montréal est un répertoire des électriciens pour le résidentiel, commercial et industriel
Author: Électricien
Version:4
Tags: électricien, électriciens
*/

@charset "utf-8";
/* CSS Document */

body {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
	line-height: 1.6;
}
header {
}
li.cat-item {
	list-style-type: none;
}
.bar {
	width: 25px;
	height: 3px;
	background-color: #fff;
	margin: 5px 0;
	transition: transform 0.3s;
}

.ecriture { font-family: Roboto;}
.blocs {
	box-sizing: border-box;
}
.couleura {
	background: #999;
}
.centre {
	width: 100%;
	margin: 0 auto;
}
.bloc-centre {
	box-sizing: border-box;
	margin: 100px 0 100px 0;
	width: 80%;
	margin: 0 auto;
}
.conteneur-flex {
	display: flex;
	flex-wrap: wrap;
}
.bloc img {
	max-width: 100%;
	height: auto;
	display: block;
}
.moitie {
	width: 50%;
	margin: 100px 0 100px 0;
	padding: 30px;
}
.soixante {
	width: 60%;
	margin: 100px 0 100px 0;
	padding: 0px;
}
.quarante {
	width: 40%;
	margin: 100px 0 100px 0;
	padding: 30px;
}
.soixanteb {
	width: 70%;
	margin-top: 0px;
	text-align: right;
}
.quaranteb {
	width: 30%;
}
.trois {
	width: 33%;
	box-sizing: border-box;
	margin: 100px 0 100px 0;
	padding: 30px;
}
.trois h2 {
	color: #fff;
	margin: 20px 0 20px 0;
	text-align: center;
}
.wp-block-columns {
	width: 90%;
	margin: 0 auto 0 auto;
}
footer {
	text-align: left;
	padding: 0;
	margin-top: 100px;
}
.bas-contenu {
	padding: 50px 0px 50px 0px;
}
.bas-section {
	width: 23%;
	box-sizing: border-box;
	padding-left: 20px;
}
.bas-section h2 {
	color: #999;
	margin: 20px 0 20px 0;
}
.bas-sectionb {
	width: 100%;
	padding: 0px 0px 0px 0px;
	margin: 20px 0px 0px 0px;
	height: 39px;
	line-height: 39px;
	text-align: center;
}
a.wp-block-latest-posts__post-title {
	text-decoration: none;
	font-weight: bold;
}
.post {
	display: flex;
	align-items: center;
}
.thumbnail {
	margin-right: 40px;
	float: left;
}
.content {
	flex: 1;
}
.quaranteb {
	width: 30%;
}
.quaranteb img {
	float: none;
}
ul.menu {
	text-align: right;
}
/* Style des liens du menu au survol */


/* Style des liens du menu en tant que boutons */
.menu li {
	display: inline-block;
	margin: 5px; /* Ajoute de l'espace entre chaque bouton */
	text-decoration: none;
	font-weight: bold;
	margin: 0;
	padding: 0;
	width: 100%;
}
.menu li a {
	display: inline-block;
	margin: 10px; /* Ajoute de l'espace entre chaque bouton */
	text-decoration: none;
	font-weight: bold;
}
.wp-block-latest-posts.wp-block-latest-posts__list {
	list-style: none;
	padding-left: 0;
	width: 80%;
	margin: 0 auto;
}
.wp-block-latest-posts.wp-block-latest-posts__list li {
	margin-top: 40px;
	margin-bottom: 40px;
	padding: 30px;
}


.categories {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

.categories li {
    flex: 1 0 25%; /* Chaque élément occupe 25% de la largeur */
    max-width: 25%; /* Maximum 25% de la largeur */
    text-align: left;
    padding: 10px;
    box-sizing: border-box;
}
h2 {
    margin-top:0px;
}


.imageentreprise img {
    max-width: 100%;
    padding: 0 10% 0 10%;
}
div#articlea {
    float: left;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 30px;
}

.image {
    width: 30%;
    float: left;
}


div#articleb {
    float: left;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}
.texte {
    float: left;
    width: 90%;
    padding: 0 5% 0 5%;
}
.articlepl {
    float: left;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.image img {
    max-width: 100%;
}

.entreprise {
    width: 100%;
    float: left;
    margin: 20px auto 60px auto;
    background: #eeeeee;
    border: 1px solid #ebebeb;
}
.imageentreprise {
    width: 90%;
    float: left;
	text-align:center;
	padding: 0 5% 0 5%;

}
.texteentreprise {
    float: left;
    width: 90%;
	padding: 0 5% 0 5%;
}


div#bloc {
    width: 96%;
    margin: 0 auto 0 auto;
	padding: 1% 2% 1% 2%;
}
div#haut {
    float: left;
    width: 100%;
}

.quaranteb img {
    max-width: 100%;
}

h2.wp-block-heading {
    margin-top: 0px;
}
p {
    margin-top: 0px;
}
.wp-block-columns {
    margin-top: 70px;
    margin-bottom: 70px;
}
.alignright {
    float: left;
    margin-right: 50px;
}
section {
    width: 90%;
    margin: 0 auto 0 auto;
}
ul.liensv {
    list-style: none;
}
.liensv li {
    float: left;
    width: 100%;
    margin-bottom: 20px;
    list-style: none;
	
}
.image img {
    width: 100%;
}


/* Pour rendre les liens en pleine largeur sur les appareils mobiles */
@media screen and (max-width: 767px) {
    .categories li {
        flex: 1 0 100%; /* Chaque élément occupe 100% de la largeur sur les appareils mobiles */
        max-width: 100%; /* Maximum 100% de la largeur */
    }

	.texte {width:98%;}
		.texteentreprise {
		width:98%;   padding: 0 1% 0 1%;
}
	.imageentreprise {width:98%;   padding: 0 1% 0 1%;}
}


/* Styles pour les écrans de petite taille (mobile) */
@media only screen and (max-width: 600px) {
	
	.image {
		width:98%;
}
	.texte {width:98%;}
		.texteentreprise {
		width:98%;   padding: 0 1% 0 1%;
}
	.imageentreprise {width:98%;   padding: 0 1% 0 1%;}	
	
.menu-principal {
	margin-top: 20px;
	margin-bottom: 20px;
}
.quaranteb img {
}
.wp-block-columns {
	width: 90%;
	margin: 0 auto;
}
.menu li {
	display: inline-block;
	padding: 0; /* Ajoute de l'espace autour du texte */
	margin: 0; /* Ajoute de l'espace entre chaque bouton */
	text-decoration: none;
	color: gainsboro; /* Couleur du texte */
	width: 100%;
	font-weight: bold;
}
.menu li a {
	display: inline-block;
	padding: 10px 80px 10px 80px;
	margin: 0; /* Ajoute de l'espace entre chaque bouton */
	text-decoration: none;
	font-weight: bold;
	text-align: center;
}
ul.menu {
	text-align: center;
	margin: 0;
	padding: 0;
}
.quaranteb {
	width: 100%;
	text-align: center;
	height: auto;
}
.quaranteb img {
	height: auto;
}
.soixanteb {
	width: 100%;
}
h1.titrepage {
	text-align: center;
	margin: 50px 0 20px 0;
}
.wp-block-columns {
	margin: 0 auto;
	width: 90%;
	margin-bottom: 50px;
}
}
 @media screen and (max-width: 768px) {

	.image {
		width:98%;
}
	.texte {width:98%;}
		.texteentreprise {
		width:98%;   padding: 0 1% 0 1%;
}
	.imageentreprise {width:98%;   padding: 0 1% 0 1%;}
header {
}
.wp-block-columns {
	width: 80%;
	margin: 0 auto;
}
h1.titrepage {
	text-align: center;
	margin: 50px 0 20px 0;
}
.wp-block-columns {
	margin: 0 auto;
	width: 90%;
	margin-bottom: 50px;
}
.quaranteb {
	height: auto;
}
ul.menu {
	text-align: center;
	margin: 0;
	padding: 0;
}
.bloc {
	width: 100%;
	transition: transform 0.3s ease-in-out; /* Ajout de transition pour un effet smooth */
	animation: bounce 1s ease infinite alternate; /* Ajout de l'animation bounce */
}
.trois,  .quarante,  .moitie,  .soixante {
	width: 100%;
}
.soixanteb {
	width: 100%;
}
.quaranteb {
	width: 100%;
	text-align: center;
}
.wp-block-latest-posts.wp-block-latest-posts__list {
	width: 98%;
}
.bas-section {
	width: 100%; /* Les sections prennent toute la largeur sur petit écran */
	margin-bottom: 10px; /* Espacement entre les sections */
	text-align: center;
}
.container {
	margin: 0 auto;
	width: 98%;
}
footer {
	padding: 20px 0;
}
.container {
	margin: 0 auto;
	width: 80%;
}
.credits {
	text-align: center;
	margin-top: 20px;
}
/* Styles pour les liens de navigation */
footer ul {
	list-style: none;
	padding: 0;
}
footer ul li {
	margin-bottom: 10px;
}
footer ul li a {
	text-decoration: none;
}
footer ul li a:hover {
	text-decoration: underline;
}
}

/* Styles pour les écrans de taille moyenne à grande (tablettes et ordinateurs de bureau) */
@media only screen and (min-width: 900px) {
.menu-principal {
	margin-top: 25px;
}
h1.titrepage {
	text-align: center;
	margin: 60px 0px 50px 10%;
}
footer ul li a {
	text-decoration: none;
}
.quaranteb img {
	float: left;
}
.menu-principal {
/* Styles pour le menu principal sur les tablettes et ordinateurs de bureau */
}
.page_item {
	display: inline-block;
	margin: 5px; /* Ajoute de l'espace entre chaque bouton */
	text-decoration: none;
	color: gainsboro; /* Couleur du texte */
}
.page_item {
	text-decoration: none;
	font-weight: bold;
	color: gainsboro;
}
/* Style des liens du menu au survol */
.page_item:hover {
}
.soixanteb {
	width: 70%;
	margin-top: 0px;
	text-align: right;
}
.menu li {
	display: inline;
}
}
 @media only screen and (min-width: 1000px) {
.centre {
	width: 100%;
	margin: 0 auto;
}
.soixanteb {
	width: 70%;
	margin-top: 0px;
	text-align: right;
}
.wp-block-columns {
	width: 80%;
	margin: 0 auto;
}
h1.titrepage {
	margin: 60px 0px 40px 10%;
	text-align: left;
}
.menu li {
	display: inline;
}
}
 @media only screen and (min-width: 1200px) {
.centre {
	width: 80%;
	margin: 0 auto;
}
.menu li {
	display: inline;
}
h1.titrepage {
	margin: 60px 0px 40px 10%;
	text-align: left;
}
}



/* Pour les téléphones cellulaires typiques */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Styles */
	
	

.image {
    width: 100%;
}


div#articleb {
    width: 100%;
}
.texte {
    width: 90%;
    padding: 0 5% 0 5%;
}
.articlepl {
    width: 100%;
}

.image img {
    max-width: 100%;
}

.entreprise {
    width: 90%;
}
.imageentreprise {
    width: 100%;
}
.texteentreprise {
    float: left;
    width:90%;
	padding: 0 5% 0 5%;
}


div#bloc {
    width: 100%;
    margin: 20px auto 0 auto;
}
div#haut {
    width: 100%;
}

.quaranteb img {
    max-width: 100%;
}

h2.wp-block-heading {
    margin-top: 0px;
}
p {
    margin-top: 0px;
}
.wp-block-columns {
    margin-top: 30px;
    margin-bottom: 30px;
}
.alignright {
    float: none;
    margin-right: 10px;
}
section {
    width: 100%;
    margin: 0 auto 0 auto;
}
ul.liensv {
    list-style: none;
}
.liensv li {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}
.image img {
    width: 100%;
}
	
	
	
}

/* Pour les tablettes en mode portrait */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Styles */
	
	.liensv li {
    float: left;
    width: 50%;
    margin-bottom: 20px;
}
			.liensv li {
    float: left;
    width: 50%;
    margin-bottom: 20px;
}
	div#articlea {
    float: left;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 30px;
}

.image {
    width: 30%;
    float: left;
}


div#articleb {
    float: left;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}
.texte {
    float: left;
    width: 60%;
    padding: 0 5% 0 5%;
}
.articlepl {
    float: left;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.image img {
    max-width: 100%;
}

.entreprise {
    width: 90%;
    float: left;
    margin: 20px auto 60px auto;
    background: #eeeeee;
    border: 1px solid #ebebeb;
}
.imageentreprise {
    width: 25%;
    float: left;
}
.texteentreprise {
    float: left;
    width: 65%;
	padding: 0 5% 0 5%;
}


div#bloc {
    width: 96%;
    margin: 1% auto 1% auto;
	padding: 1% 2% 1% 2%;
}
div#haut {
    float: left;
    width: 100%;
}

.quaranteb img {
    max-width: 100%;
}

h2.wp-block-heading {
    margin-top: 0px;
}
p {
    margin-top: 0px;
}
.wp-block-columns {
    margin-top: 70px;
    margin-bottom: 70px;
}
.alignright {
    float: left;
    margin-right: 50px;
}
section {
    width: 90%;
    margin: 0 auto 0 auto;
}
ul.liensv {
    list-style: none;
}

.image img {
    width: 100%;
}
}

/* Pour les tablettes en mode paysage et les petits ordinateurs */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Styles */
		.liensv li {
    float: left;
    width: 50%;
    margin-bottom: 20px;
}
	div#articlea {
    float: left;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 30px;
}

.image {
    width: 30%;
    float: left;
}


div#articleb {
    float: left;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}
.texte {
    float: left;
    width: 60%;
    padding: 0 5% 0 5%;
}
.articlepl {
    float: left;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.image img {
    max-width: 100%;
}

.entreprise {
    width: 90%;
    float: left;
    margin: 20px auto 60px auto;
    background: #eeeeee;
    border: 1px solid #ebebeb;
}
.imageentreprise {
    width: 25%;
    float: left;
}
.texteentreprise {
    float: left;
    width: 65%;
	padding: 0 5% 0 5%;
}


div#bloc {
    width: 96%;
    margin: 1% auto 1% auto;
	padding: 1% 2% 1% 2%;
}
div#haut {
    float: left;
    width: 100%;
}

.quaranteb img {
    max-width: 100%;
}

h2.wp-block-heading {
    margin-top: 0px;
}
p {
    margin-top: 0px;
}
.wp-block-columns {
    margin-top: 70px;
    margin-bottom: 70px;
}
.alignright {
    float: left;
    margin-right: 50px;
}
section {
    width: 90%;
    margin: 0 auto 0 auto;
}
ul.liensv {
    list-style: none;
}
.liensv li {
    float: left;
    width: 50%;
    margin-bottom: 20px;
}
.image img {
    width: 100%;
}
	
}

/* Pour les grands écrans d'ordinateurs de bureau */
@media (min-width: 1200px) {
    /* Styles */

div#articlea {
    float: left;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 30px;
}

.image {
    width: 30%;
    float: left;
}


div#articleb {
    float: left;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}
.texte {
    float: left;
    width: 60%;
    padding: 0 5% 0 5%;
}
.articlepl {
    float: left;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.image img {
    max-width: 100%;
}

.entreprise {
    width: 100%;
    float: left;
    margin: 20px auto 60px auto;
    background: #eeeeee;
    border: 1px solid #ebebeb;
	padding:40px 0px 40px 0px;
}
.imageentreprise {
    width: 25%;
    float: left;
	padding:0;
}
.texteentreprise {
    float: left;
    width: 65%;
	padding: 0 5% 0 5%;
}


div#bloc {
    width: 96%;
    margin: 1% auto 1% auto;
	padding: 1% 2% 1% 2%;
}
div#haut {
    float: left;
    width: 100%;
}

.quaranteb img {
    max-width: 100%;
}

h2.wp-block-heading {
    margin-top: 0px;
}
p {
    margin-top: 0px;
}
.wp-block-columns {
    margin-top: 70px;
    margin-bottom: 70px;
}
.alignright {
    float: left;
    margin-right: 50px;
}
section {
    width: 90%;
    margin: 0 auto 0 auto;
}
ul.liensv {
    list-style: none;
}
.liensv li {
    float: left;
    width: 25%;
    margin-bottom: 20px;
}
.image img {
    width: 100%;
}
	
	
}