/*  Typo
----------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

a:link, a:visited
{
    text-decoration: underline;
    color:#EC4413;
}
a:active { 	text-decoration: underline; }
a:hover { text-decoration:none; }


h1 { font:bold 18px/140% "Trebuchet MS", Verdana, sans-serif; }
h2 { font:bold 14px/140% "Trebuchet MS", Verdana, sans-serif; }

p {	font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;}

/*  Layout
----------------------------------------------- */

body {
    background-color: white !important;
    padding:35px 0 0 0;
    margin:0;
    font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#container
{

    margin:0 auto;
    width:80vw;
    background:white;
}

@media (max-width: 600px) {
    #container {
margin: auto 0px;
        width:70vw;

    }
}

#header
{
    padding:17px;
}

#header h1,
#header a
{
    padding:0;
    font-family:"Helvetica","Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
    font-size:30px;
    font-weight:normal;
    text-decoration:none;
    line-height:1.3em;
    color:#666666;
    text-align:right;
}

#header a:hover { text-decoration:none;  }


#navigation
{
    float:left;
    width:220px;
    padding:17px;

  

}



#sidebar
{
    padding-top:10px;
}

#content
{
    float:right;

    width:530px;
    padding:17px;

}

#footer
{
    clear:both;
    margin-top:10px;
    background:url(https://u.jimcdn.com/cms/o/s8eb388a4e24ff323/userlayout/img/footer-bg.gif?t=1301567854) repeat-x top;
    height:65px;
display: none !important;
visibility: hidden !important;
  opacity: 0.2 !important;
background: red !important;
}

#footer .gutter 
{
    height:30px;
    padding:35px 15px 0 90px;
}

/*  Navigation
----------------------------------------------- */

ul.mainNav1,
ul.mainNav2
{
    margin:0;
    padding: 0;
}


ul.mainNav1 li,
ul.mainNav2 li
{
    display: inline;
    margin: 0;	
    padding: 0;
}


ul.mainNav1 li a,
ul.mainNav2 li a
{
    font:normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
    text-decoration: none;
    display: block;
    color:#333;

    font-size: 1.2em !important;
font:normal 11px Arial, Verdana, Geneva, Helvetica, sans-serif;
    text-decoration: none;
    color:#333;
    /*border-bottom:1px solid #CCC;*/
}



ul.mainNav1 li a { padding:4px 4px 4px 4px; }
ul.mainNav2 li a { padding:4px 4px 4px 14px; }
ul.mainNav3 li a { padding:4px 4px 4px 24px; }


@media (max-width: 600px) {
    ul.mainNav1 li a, ul.mainNav2 li a {
    font-size: 0.8em !important; /* Double la taille de la police sur mobile */
    padding:0px 0px 0px 0px;
    }
}





ul.mainNav1 a {
  font-family: "Work Sans", sans-serif !important;
  font-optical-sizing: auto !important;
  font-weight: 400 !important;
  color: #848484 !important;
}

ul.mainNav1 a:hover
{
    background:#EEE;
    color:black;
}

ul.mainNav1 a.current { 
    font-weight: 600 !important;
    color: red !important;
}

/* rajoute un point rouge */
ul.mainNav1 a.current::after {
    content: " ◼︎"; /* Caractère de point */
    color: red; /* Couleur du point */
    font-size: 20px; /* Taille du point, ajustez selon vos besoins */
    margin-right: 8px; /* Espacement entre le point et le texte */
    vertical-align: middle; /* Ajuste l'alignement vertical si nécessaire */
}


.titre-centre {
    text-align: center;
    color: #9399b2; 

    font-size: 5em; /* Taille de la police. Ajustez selon vos besoins */
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    padding:20px;
    margin-top: 20px;
    height: auto;
    opacity: 1;
}

.titre-centre:hover {
    opacity: 0.75;
}
  


/* Règle media query pour les écrans de moins de 768px de large */
@media (max-width: 768px) {
    .titre-centre {
        font-size: calc(2em + (38 * ((100vw - 320px) / 448))); /* Ajuste dynamiquement la taille de la police */
 }
}

.flex-container {
    display: flex;
    justify-content: center; /* Centre le contenu */
    align-items: center; /* Centre les éléments verticalement si nécessaire */
}

.myMenuLeft {
    background-color: white !important;

    margin-right: 0px;
    margin-left: 0vw;
    margin-top: 0px;
    margin-bottom: auto;
    width: 30vw;
}

@media (max-width: 600px) {
    .myMenuLeft {
        margin-left: 0px;
    width: 0vw;

    }
}

.myMenuRight {
    background-color: white !important;

     margin-right: 0px;
    margin-left: 0vw;
    margin-top: 0px;
    margin-bottom: auto;
    width: 30vw;
}

@media (max-width: 600px) {
    .myMenuRight {
        margin-left: 0px;
    width: 0vw;

    }
}



.sidebar2 {
     background-color: white !important;
    margin-left: 0px;
    margin-right: 20px;
}

.navBarPersoContainer {
width:100%;
text-align: center;
font-family: 'Montserrat', sans-serif !important;
font-weight: 400 !important;
    color: red !important;

}




.navBarPerso {
    width: 100vw; /* Prend la largeur de l'écran */
    background-color: white; /* Couleur de fond de la navbar */
    overflow: hidden; /* Assure que tout reste dans la navbar */
    margin-bottom: 40px;
    margin-top: 10px;
margin-right: auto;
margin-left: auto;
text-align: center;

}

@media (max-width: 600px) {
    .navBarPerso {
width: 100vw;
text-align: center;
margin-top: 0px;
font-size: 1.0em;
    }
}


.navBarPerso ul {
    list-style-type: none; /* Enlève les puces de la liste */
    padding: 0; /* Enlève le padding par défaut */
    margin: 0; /* Enlève la marge par défaut */
    text-align: center; /* Centre les éléments dans la navbar */
}

.navBarPerso ul li {
    display: inline; /* Affiche les éléments de la liste en ligne */
}

.navBarPerso ul li a {
    display: inline-block; /* Affiche les liens en blocs en ligne */
    padding: 10px 20px; /* Espacement autour des liens */
    text-decoration: none; /* Enlève le soulignement des liens */
    color: #848484; /* Couleur initiale des liens */
    font-family: Arial, sans-serif; /* Type de police */
    font-size: 1.2em; /* Taille de la police. Ajustez selon vos besoins */

}

@media (max-width: 600px) {
    .navBarPerso ul li a {
        padding: 3px;
font-size: 1.0em;

    }
}


.navBarPerso ul li a{
  font-family: "Work Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.navBarPerso ul li a:hover {
    color: red; /* Couleur des liens au survol */

}






.myFooter {
   display: none !important;
visibility: hidden !important;
  opacity: 0.2;
background: red !important;
}

.spacer {
    height: 50px; /* Définit la hauteur de l'espacement */
}

#cc-sidecart-wrapper, .j-cart-icon {
visibility: hidden !important}

/*
.j-module, .n, .j-gallery, .thumb_sq2, .thumb_sq1 {
width: 100% !important;
background: red !important;
}
*/

.hidden {
    visibility: hidden;
}

#pageTitle {
            font-size: 2em;
            text-align: center;
            display: none;
            padding:1em;
  text-align: center;
    color: #9399b2; 

    font-size: 5em; /* Taille de la police. Ajustez selon vos besoins */
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    height: auto;
    opacity: 1;
        }