/*
Theme Name: Mon thème
Theme URI: https://blackstoremada.com/
Author: RNH
Author URI: https://blackstoremada.com/
Description: thème développé pour https://blackstoremada.com/
Version: 1.0
*/

/* BODY - général */

* {
margin:0;
padding:0;
box-sizing:border-box;
}

html {
background:#ffffff;
}

@font-face {
  font-family:"montserrat";
  src: url("https://blackstoremada.com/wp-content/themes/montheme/media-upload/Montserrat-VariableFont_wght.ttf");
  font-display: swap;
}

body {
font-family:"montserrat";
background:#ffffff;
}

h1 {
line-height:1.3em;
margin-bottom:2.2%;
}

p {
font-size:0.94em;
margin-bottom:1.2%;
line-height:1.4em;
color:#636363;
}

a {
color:#636363;
}

.bouton {
padding-top:1%;
padding-bottom:1%;
margin-top:6%;
background:#ffffff;
width:40%;
text-align:center;
border-style:outset;
border-color:#000000;
}

.bouton a {
color:#000000;
text-decoration:none;
text-transform:uppercase;
font-weight:400;
}

.desktop-none {
display:none;
}

/* ACCUEIL */


.topnav-menu {
overflow:hidden;
position:relative;
}

#myLinks {
display:none;
}

.topnav-menu a {
padding:1.6% 2%;
text-decoration:none;
font-size:0.6em;
display:block;
color:#636363;
text-transform:uppercase;
}

.topnav-menu a.icon {
color:#000000;
font-size:1.2em;
display:none; /*au lieu de block*/
position:absolute;
}

.menu ul {
display:block;
}



.logo {
padding-left:10%;
}

.logo img {
width:30%;
}

.topnav {
margin-top:2%;
margin-left:2%;
display:grid;
grid-template-columns:40% 45% auto;
gap:2%;
}

.txt-branding {
margin-top:30%;
padding-left:10%;
}

.txt-branding h1 {
text-transform:uppercase;
font-size:3em;
font-weight:900;
}

.txt-branding .ventes {
text-transform:uppercase;
font-size:1.2em;
font-weight:300;
margin-bottom:10%;
color:#000000;
opacity:80%;
letter-spacing:0.1em;
}

.salama {
margin-top:8%;
}

.naly {
text-align:right;
}

.naly img {
width:80%;
}

.visibilite {
margin-top:18%;
padding-left:6%;
color:#000000;
width:50%;
}

.images-services {
padding-left:10%;
margin-top:18%;
display:grid;
grid-template-columns:40% 25% 25%;
gap:2%;
}

.images-services img {
width:100%;
}

.creativity1 img {
width:94%;
}

.services-description {
padding-left:18%;
margin-top:8%;
display:grid;
grid-template-columns:35% 50%;
gap:2%;
}

.description p {
margin-bottom:3%;
}

.cheese-cake {
margin-top:6%;
}

.contact {
padding-left:6%;
margin-top:18%;
display:grid;
grid-template-columns:45% 46%;
gap:4%;
padding-bottom:3%;
}

.resaka {
width:90%;
}

.resaka .titre {
text-transform:uppercase;
font-size:1.5em;
font-weight:600;
margin-bottom:4%;
color:#000000;
}

.num {
margin-top:18%;
}

.reseaux-sociaux {
margin-top:4%;
display:grid;
grid-template-columns:5% 5%;
gap:2%;
}

.reseaux-sociaux img {
width:100%;
}

.nom-contact-champ, .email-contact-champ, .objet-contact-champ, .message-contact-champ {
padding-bottom:8%;
}

.nom-contact-champ input, .email-contact-champ input, .objet-contact-champ input {
font-size:0.85em;
}

.message-contact-champ textarea {
line-height:1.4em;
}

.nom-contact-champ input, .email-contact-champ input, .objet-contact-champ input, .message-contact-champ textarea {
border-width:0px 0px 1px 0px;
width:80%;
}

.nom-contact-champ input:focus, .email-contact-champ input:focus, .objet-contact-champ input:focus, .message-contact-champ textarea:focus {
outline:none;
}

.bouton-contact input {
padding:2%;
text-transform:uppercase;
font-size:0.8em;
background:#FFFFFF;
border:solid #808080 1px;
border-radius:6%;
}

.bouton-contact input:hover {
cursor:pointer;
}

/*MESSAGE ENVOYE*/

.hibou {
margin-top:8%;
margin-left:auto;
margin-right:auto;
margin-bottom:4%;
text-align:center;
}

.hibou img {
width:15%;
}

.page-id-28 p {
text-align:center;
font-size:1em;
}

.page-id-28 .bouton {
width:30%;
margin-top:4%;
margin-left:auto;
margin-right:auto;
}

/*SMARTPHONE PORTRAIT*/

@media only screen and (max-width:460px) and (orientation: portrait) {
.mobile-none {
display:none;
}
.desktop-none {
display:block;
}

.bouton {
width:60%;
}

/*ACCUEIL*/

.txt-branding {
margin-top:20%;
padding-left:8%;
}

.logo img {
width:50%;
}

.topnav {
grid-template-columns:70% auto;
}

.txt-branding h1 {
font-size:2em;
}

.naly {
margin-top:18%;
text-align:center;
}

.visibilite {
margin-top:30%;
width:100%;
}

.images-services {
padding-left:6%;
margin-top:30%;
}

.services-description {
padding-right:2%;
margin-top:8%;
display:block;
}

.services-description h2 {
margin-bottom:6%;
}

.description p {
margin-bottom:4%;
}

.contact {
margin-top:30%;
display:block;
}

form {
margin-top:18%;
}
    
} /* FERMETURE SMARTPHONE PORTRAIT*/


/*SMARTPHONE LARGE PAYSAGE*/

@media screen and (max-height: 430px) and (orientation: landscape) { 

.logo img {
width:50%;
}

.txt-branding {
margin-top:20%;
}

.txt-branding h1 {
font-size:2em;
}

.visibilite {
width:100%;
}
    
} /*FERMETURE SMARTPHONE LARGE PAYSAGE*/


/*TABLETTE PORTRAIT*/


@media screen and (min-width: 750px) and (max-width: 890px) and (orientation: portrait) {
    
.logo img {
width:50%;
}

.txt-branding {
margin-top:20%;
}
    
.txt-branding h1 {
font-size:2em;
}

.visibilite {
width:100%;
}
    
} /*FERMETURE TABLETTE PORTRAIT*/

/*TABLETTE PAYSAGE*/

@media screen and (min-width: 1000px) and (max-width: 1275px) and (orientation: landscape) { 

.logo img {
width:30%;
}

.txt-branding {
margin-top:20%;
}
    
.txt-branding h1 {
font-size:2em;
}

.visibilite {
width:100%;
}

} /*FERMETURE TABLETTE PAYSAGE*/