section.haut-page{
background:var(--noir); color:var(--blanc); height:70vh; position:relative;
}
section.haut-page .filtre{background-color:var(--filtre); position:absolute; left:0; top:0; width:100%; height:100%; mix-blend-mode: multiply; }
section.haut-page .swiper-container{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50% );width:95%; padding-bottom:3rem; }
section.haut-page .swiper-container .swiper-slide{ text-align:left; padding:0 10%; box-sizing:border-box;  }
section.haut-page .swiper-container .swiper-slide .date{ font-size:1rem; text-align:left;}
section.haut-page .swiper-container .swiper-slide h3{ font-size:2rem; margin:0.5em 0}
section.haut-page .swiper-container .swiper-slide .trait{ width: 50%; height:3px; background-color: var(--bleu); margin:1.5rem 0}
section.haut-page .swiper-container .swiper-slide .vs{display:none;}
section.haut-page .swiper-container .swiper-slide .extrait{ margin:2rem 0; }
section.haut-page .swiper-container .swiper-button-prev, section.haut-page .swiper-container .swiper-button-next{
width:44px; height:44px; border-radius: 50%; background-position:center; background-repeat:no-repeat; background-size:cover;
}
section.haut-page .swiper-container .swiper-button-prev{ background-image:url(//www.multigraphic.net/wp-content/themes/multigraphic/css/img/prev.svg)}
section.haut-page .swiper-container .swiper-button-next{ background-image:url(//www.multigraphic.net/wp-content/themes/multigraphic/css/img/next.svg)}
section.haut-page .swiper-container .swiper-button-prev::after, section.haut-page .swiper-container .swiper-button-next::after{display:none;}
section.haut-page .swiper-container .swiper-pagination{ text-align:center; position:relative; display:inline-block; bottom:-3rem; }
section.haut-page .swiper-container .swiper-pagination-bullets{ border:1px solid; width:auto; margin:0 auto; padding:0.25rem 1rem; border-radius:2rem; border-color:var(--gris)}
section.haut-page .swiper-container .swiper-pagination-bullet{ width:12px; height:12px; background-color: var(--blanc); opacity:1;}
section.haut-page .swiper-container .swiper-pagination-bullet-active{ background-color: var(--bleu);}
.wrap-sec{ position:relative; }
.wrap-sec .cercle{ display:none; }
section.contact{position:relative; padding:0 10%; z-index:2;}
section.contact .accroche{position:relative;  font-size:5vw; color:var(--blanc); padding:3rem 0; font-weight:400;}
section.contact .fond{ position:absolute; left:0; top:0; width:95%; height:100%; background-color:var(--bleu); }
section.contact a.bouton{ position:absolute; left:50%; top:100%; z-index:2; transform:translate(-50%, -50%);background-color:var(--grisfonce); color:var(--blanc); border:5px solid }
section.contact a.bouton:hover{background-color: var(--fushia);}
.home section h2{ font-size:2rem; font-weight:400; }
section.produits{ padding:2rem 0 0 0; position:relative; }
section.produits > .row{ margin-left:0; margin-right:0; }
section.produits .intro{ text-align:center; width:80%; max-width:768px; margin:0 auto;}
.familles{ margin:2.5rem auto; width:95%;}
.familles .row > div{ padding:0;}
.familles h2{ margin:0.75rem 0; color: var(--noir); text-transform: lowercase;}
.familles .picto{ height:60px; margin:0 auto; text-align:center; display:inline-block; }
.familles .picto img{ width:auto; height:100%; margin:0 auto; display:block; }
.familles .item{ padding:0 10% 2rem 10%; margin:2rem 0; border-bottom: 1px solid var(--grisclair); -webkit-box-sizing:border-box; box-sizing:border-box; }
.familles .item .descr, section.produits .intro{ line-height:140%; text-align:center; }
.familles .item .descr p{text-align:center; }
.familles .item a{ background-color:var(--fushia); color: var(--blanc); text-transform:uppercase; display:inline-flex; padding:0.5rem 1rem; border-radius: 2rem; font-size:0.9rem;}
.familles .item a:hover{ background-color:var(--bleu); }
section.produits .points{ display:none; }
section.produits a.bouton{ background-color: var(--grisfonce); color:var(--blanc); }
section.produits a.bouton:hover{ background-color: var(--bleu);  border-color:var(--bleu); }
section.savoir-faire{ background-color:var(--noir); padding:6rem 0 4rem 0; position:relative; color:var(--blanc); padding-left:1rem; padding-right:1rem; text-align:left; }
section.savoir-faire a{ color:var(--blanc); font-weight: 900; }
section.savoir-faire a:hover{ color:var(--bleu); }
section.savoir-faire .inner{ padding:0 1rem;}
section.savoir-faire .courbe{ width:100%; height:auto; position:absolute; left:0; top:0; z-index:2; }
section.savoir-faire .courbe svg{ width:100%; height:auto; }
section.savoir-faire h2 span{display:inline-block; }
section.savoir-faire h2 span::after{content:""; display:block; height:3px; background-color:var(--bleu);margin-top:.75em}
section.savoir-faire .resume{ text-align:left;}
section.savoir-faire .resume ul{
margin:2rem 0;
padding:0;
list-style:none;
font-size:0;
display: flex;
flex-wrap: wrap;
gap:0.5rem;
justify-content: start
}
section.savoir-faire .resume ul li{
flex:0 1 auto;
font-size:1rem;
text-transform:uppercase;
padding:0.5rem 1rem; margin:5px 0;
border-left:1px solid;
text-align:center;
}
section.savoir-faire a.bouton{ background-color:var(--blanc); margin:2rem 0; color:var(--noir); font-weight:400; }
section.savoir-faire a.bouton:hover{ background-color: var(--bleu); color:var(--blanc); border-color:var(--bleu); }
section.savoir-faire .vs{ display:none; }
section.presentation{
background-color: var(--grisclair);
}
section.presentation, section.reseaux{ padding:3rem 0; text-align:left;}
section.presentation .inner, section.reseaux .inner{ padding:0 1rem !important; width:calc(100% - 2rem);}
section.presentation .texte{ padding:0 15%;}
section.presentation h2 span, section.reseaux h2 span{display:inline-block; }
section.presentation h2 span::after, section.reseaux h2 span::after{content:""; display:block; height:3px; background-color:var(--bleu);margin-top:.75em}
section.presentation a.bouton{  margin:2rem 0; font-weight:400; }
section.reseaux h2{
text-align:center;
}
section.reseaux .flux{
width:90%;
margin:2rem auto;
}
section.reseaux .flux .content{
height:680px;
border: 1px solid var(--bleu);
border-bottom:0.35rem solid var(--bleu);
border-radius:1px; margin-bottom:1rem;
padding:2rem
} @media screen and (orientation: landscape){
section.haut-page{
height:calc( 85vh - 124px ); 
}
section.reseaux .flux{
width:85%;
}
}
@media screen and (min-width: 768px){
.familles{ width:90%; }
.familles .item{ border-right: 1px solid var(--grisclair); border-bottom:none; }
.familles .cat:nth-child(0n+3) .item, .familles .cat:last-child .item{ border-right:none; }
section.savoir-faire .resume ul li{ padding:0.5rem 1.5em; }
section.savoir-faire .donnees{ padding:0 13.5%; }
}
@media screen and (min-width: 1024px){
section.haut-page .swiper-container .swiper-slide .resume{ padding-right:10%;}
section.haut-page .swiper-container .swiper-slide .vs{display:block;}
section.contact{ -webkit-transform:translateY(-50%); transform:translateY(-50%); }
section.contact .accroche{font-size:3.5vw;}
section.savoir-faire .cover{display:block; position:absolute; left:0; top:0; width:100%; height:100%; }
section.savoir-faire .vs{ display:block; position:absolute; left:0; top:0; width:30%; height:100%; z-index:1; }
section.savoir-faire .donnees{ padding:0; }
section.presentation .vs{ -webkit-transform:translateX(1rem); transform:translateX(1rem) }
}
@media screen and (min-width: 1280px){
section.haut-page{
height:calc( 100vh - 124px ); 
}
section.haut-page .swiper-container{ opacity:0; -webkit-transition:all 1.5s ease-out; transition:all 1.5s ease-out; }
section.haut-page .swiper-container.animated{ -webkit-transform:translate(-50%, -50%) !important; transform:translate(-50%, -50%) !important; }
.wrap-sec .cercle{ display:block; position:absolute; right:0; top:0; width:20%; z-index:1; overflow:hidden; }
.wrap-sec .cercle > div{ width:130%; height:130%; border:2px solid var(--grisclair); border-radius:100%; top:unset; bottom:40%;}
section.contact .accroche{font-size:3vw;} 
.home section h2{ font-size:2.265rem;}
.familles{ margin-top:5rem; margin-bottom:5rem; width:85%; }
.familles .item .descr{ padding:0 10% }
.familles .cat{ opacity:0; -webkit-transform:translateY(100%); transform:translateY(100%); -webkit-transition:all 1.5s ease-out;  transition:all 1.5s ease-out; }
section.produits{ padding:0 0 0 0; opacity:0; -webkit-transform:translateY(600px); transform:translateY(600px); -webkit-transition:all 1s ease-out;transition:all 1s ease-out; }
section.produits.animated{
opacity:1; -webkit-transform:translateY(0); transform:translateY(0);  
}
section.produits a.bouton{ opacity:0; -webkit-transform:translateY(-200%); transform:translateY(-200%); transition:all 0.2s ease-out; }
.familles .item .picto img{ -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out; -webkit-transform-origin:top center;transform-origin:top center; }
.familles .item .picto.zoom img{ -webkit-transform:scale(2); transform:scale(2); opacity:.2; }
section.produits .points{ display:block; width:85px; position:absolute; right:20%; top:5rem; }
section.produits .points svg{ width:100%; height:auto; }
section.produits .points svg circle{ opacity:.2; }
#Ellipse_27, #Ellipse_34, #Ellipse_41{ 
animation-name:points; animation-duration: 1s; animation-timing-function: linear; animation-fill-mode: both; animation-iteration-count: infinite; 
}
section.produits .traitobl{ width:82px; height:1px; background-color:var(--fushia); position:absolute; right:5%; top:15rem; transform:rotate( 45deg ); }
section.savoir-faire{ padding:8rem 0 5rem 0; }
section.savoir-faire .donnees{ opacity:0; -webkit-transform:translateY(100%); transform:translateY(100%); -webkit-transition:all 1s ease-out; transition:all 1s ease-out; }
section.savoir-faire a.bouton{ margin:3rem 0; }
section.presentation .texte{ opacity:0; -webkit-transform:translateY(100%); transform:translateY(100%); -webkit-transition:all 1s ease-out; transition:all 1s ease-out; }
}
@media screen and (min-width: 1440px){
section.haut-page .swiper-container .swiper-slide h3{ font-size:2.25rem;}
section.haut-page .swiper-container .swiper-slide .extrait{ font-size:1.2rem; }
section.contact .accroche{font-size:2.265rem;} 
section.haut-page .swiper-container .swiper-slide .resume{ padding-right:20%;}
section.savoir-faire{ padding:6rem 0; }
}
@media screen and (min-width: 1680px){
section.savoir-faire{ padding:10rem 0 7rem 0; }
}