/***** Class *****/ 
h2.chapo           { font: 400 clamp(1.2rem, 1.3rem + .2vw, 1.5rem)/2 var(--fontBody);}
.sous_titre        { font: 400 clamp(1.8rem, 2.2rem + .2vw, 3rem)/1.2 var(--fontTitre); color: var(--colorBodySousTitre); position: relative; margin-bottom: 20px; }
.link-promotion    { margin-bottom: 150px;}

@media (max-width:800px) {
    .link-promotion    { margin-bottom: 100px;}
}

/***** Banner *****/ 
.banner             { width: 90vw; max-width: 1400px; margin: 160px auto 0 auto; position: relative; display: grid; grid-template-columns:60% auto; align-items: center; }
.banner:before      { content: ''; position: absolute; background: #e5f3f2; border-radius: 50%; width: 1000px; height: 1000px; top: -40%; transform: translateY(-50%); left: 75%; z-index: -1;}

.banner .photo img  { max-width: 100%; height: auto; min-height: 550px; object-fit: cover; border-radius: 20px;}

.banner .texte>div            { position: relative; border-radius: 20px; color: #ffffff; margin-left: -100px; box-shadow: 0px 40px 60px 0px rgba(34, 145, 176, 0.25); padding: 85px 60px;}
.banner .texte>div:before     { content: ''; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(113,165,176,1) 0%, rgba(57,135,150,1) 30%, rgba(38,104,124,1) 70%); opacity: .9; position: absolute; z-index: 20; left: 0; top: 0; border-radius: 20px;}

.banner .texte>div h1         { font: 500 clamp(2.5rem, 3.2rem + .2vw, 4rem)/1.5 var(--fontTitre); letter-spacing: 2px; position: relative; z-index: 200;}
.banner .texte>div h1 span    { text-transform: uppercase; font-size: 12px; letter-spacing: 2px; font-weight: 700; display: block; margin-bottom: 15px;}

@media (max-width:1366px) {
    .banner .texte>div  { padding: 65px 40px; }
    .banner .photo img  { min-height: 500px;}
}

@media (max-width:1200px) {
    .banner     { margin-top: 110px;}
}

@media (max-width:800px) {
    .banner                 { grid-template-columns:1fr; align-items: start; width: 100vw }
    .banner .photo          { padding: 0 5vw; z-index: 2;}
    .banner .texte          { z-index: 1;}
    .banner .texte>div      { margin-left: 0; box-shadow: none; border-radius: 0; z-index: -1; margin-top: -80px; padding-top: 120px;}
    .banner .texte>div:before { border-radius: 0;}
}

@media (max-width:600px) {
    .banner .photo img  { min-height: 400px;}
}

@media (max-width:400px) {
    .banner .photo img  { min-height: 360px;}
}

/***** horaires *****/
.horaires							{ position: relative; z-index: 220; display: block; width: 350px; background: #ffffff; border-radius: 10px; vertical-align: top; margin-top: 30px;}
.horaires>p						    { padding: 15px 50px 15px 30px; cursor: pointer; position: relative; font-size: 1.4rem; font-weight: 400; line-height: 1.4; color: #000000;}
.horaires>p:after				    { width: 70px; height: 50px; border-radius: 50%; position: absolute; right: 0; top: 0; top: 50%;
    transform: scaleY(1) translateY(-50%); background: url(../images/scrollbottom.svg) 50% 52% no-repeat; content:"";}
.horaires>p.active:after			{ transform: scaleY(-1) translateY(50%);}
.horaires b							{ font-size: 1.8rem; font-weight: 500; letter-spacing: 0.4px; display:block; padding-bottom: 2px;}
.horaires ul						{ width: 100%; background: #40c1c5; text-align: left; line-height: 30px; padding: 20px 30px; font-size: 1.3rem; position: absolute; left: 0; top: 90%; color: #ffffff; display: none; z-index: -1; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
.horaires li						{ margin-bottom: 15px; font-size: 1.4rem; ;}
.horaires li span                   { display: block; font-size: 1.5rem; margin-top: -5px;}

@media (max-width:1000px) {
    .horaires                       { width: 100%;}
    .horaires>p						{ padding: 15px 40px 15px 15px; }
}

@media (max-width:600px) {
    .horaires                       { text-align: left;}
}


/***** Bloc *****/ 
.bloc-intro     { margin: var(--marginBloc); width: 90vw; max-width: 1200px;}

.bloc-professionnels        { position: relative; margin: var(--marginBloc); width: 90vw; max-width: 1200px; padding: 100px 0; display: grid; grid-template-columns:repeat(2,1fr); align-items: start; z-index: 1;}
.bloc-professionnels:before { content: ''; width: 200vw; left: -50vw; top: 0; position: absolute; z-index: -1; height: calc(100% - 50px); background: #26687c;}
.bloc-professionnels .sous_titre  { color: #ffffff; font: 400 clamp(1.8rem, 2.2rem + .2vw, 3rem)/1.8 var(--fontTitre);}
.bloc-professionnels p            { color: #ffffff;}
.bloc-professionnels ul           { color: #ffffff; margin: 20px 0;}
.bloc-professionnels ul li        { position: relative; padding: 10px 0 10px 45px;}
.bloc-professionnels ul li:before { content: ''; position: absolute; left: 0; top: 5px; width: 30px; height: 30px; background: url("../images/li.svg") left top no-repeat;}
.bloc-professionnels .link        { display:block; width: 60px; height: 40px; position: relative; background: url("../images/big-arrow-blue.svg") left 50% no-repeat; margin-top: 20px; }
.bloc-professionnels .item        { position: relative;}

.bloc-team              { z-index: 10; display: grid; grid-template-columns:320px auto; align-items: center; grid-gap: 0 35px;  position: absolute; top: -150px; left: 60px;}
.bloc-team .photo img   { max-width: 100%; height: auto; border-radius: 20px; box-shadow: 0px 40px 60px 0px rgba(34, 145, 176, 0.25);}
.bloc-team .texte       { color: #ffffff;  font: 400 clamp(1.8rem, 2.2rem + .2vw, 3rem)/1.2 var(--fontBody);}
.bloc-team .texte p     { position: relative;}
.bloc-team .texte p:before     { content: ''; position: absolute; left: -60px; top: -60px; background: url("../images/arrow_team.svg") left 50% ; width: 73px; height: 49px; }
.bloc-team .texte span  { display: block; font-size: 1.4rem;}

.bloc-team.reverse        { grid-template-columns:auto 320px; top: 150px; left: inherit; right: 0;}
.bloc-team.reverse .photo { grid-area: 1 / 2;}
.bloc-team.reverse .texte { grid-area: 1 / 1; text-align: right;}
.bloc-team.reverse .texte p        { margin-top: 100px;}
.bloc-team.reverse .texte p:before { transform:scaleX(-1);  left: inherit; right: -60px;}

.bloc-optique     { position: relative; margin: var(--marginBloc); width: 90vw; max-width: 1200px; display: grid; grid-template-columns:repeat(2,1fr); align-items: start; grid-gap: 0 80px; font-size: 0; line-height: 0;}
.bloc-optique p   { font-size: 1.4rem; line-height: 1.8;}

.bloc-optique-fiche              { border-radius: 20px; margin-top: 70px; position: relative; z-index: 1; cursor: pointer;} 
.bloc-optique-fiche.shape:before { content: ''; position: absolute; background: #e5f3f2; border-radius: 50%; width: 1000px; height: 1000px; top: 0; left: -800px; z-index: -1;}
.bloc-optique-fiche.shape-2:before { content: ''; position: absolute; background: #e5f3f2; border-radius: 50%; width: 1000px; height: 1000px; top: 100px; left: -800px; z-index: -1;}
.bloc-optique-fiche.shape-3:before { content: ''; position: absolute; background: #e5f3f2; border-radius: 50%; width: 1000px; height: 1000px; top: 100px; right: -800px; z-index: -1;}
.bloc-optique-fiche img { max-width: 100%; height: auto; border-top-left-radius: 20px; border-top-right-radius: 20px;}
.bloc-optique-fiche p   { font-size: 1.4rem; line-height: 1.8;}
.bloc-optique-fiche div { box-shadow: 0px 40px 60px 0px rgba(34, 145, 176, 0.25); padding: 45px; position: relative; z-index: 2; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; backdrop-filter: blur(8px); transition: all 400ms ease-in-out;}
.bloc-optique-fiche div a                   { position: relative;}
.bloc-optique-fiche div a.link-arrows:after { content: ''; position: absolute; z-index: 10; right: 0; top: 50%; transform: translateY(-50%); background: url("../images/big-arrow-blue.svg") left 50% ; width: 50px; height: 12px;}
.bloc-optique-fiche div a.link-arrows h3    { font: 500 clamp(1.8rem, 2.2rem + .2vw, 3rem)/1.8 var(--fontTitre); color: var(--colorBodySousTitre); margin-bottom: 20px;}
.bloc-optique .item:nth-child(1) .bloc-optique-fiche:nth-child(1) { margin-top: 0;}


.bloc-marques { position: relative; z-index: 1;  margin: var(--marginBloc);}
.bloc-marques .slider-marques { width: 100vw;}
.bloc-marques .slider-marques .item { width: 220px; height: 220px; margin-right: 25px; position: relative; border-radius: 20px;  box-shadow: 0px 40px 60px 0px rgba(34, 145, 176, 0.25);  background: linear-gradient(135deg, rgba(113,165,176,1) 0%, rgba(57,135,150,1) 30%, rgba(38,104,124,1) 70%); display: flex; justify-content: center; align-items: center;}
.bloc-marques .slider-marques .item img { max-width: 100%; height: 100%;}
.bloc-marques .nav_slider { position: absolute; right: 0; bottom: -80px; z-index: 10;}

@media (min-width:1201px) {
    .bloc-professionnels .link:hover { background: url("../images/big-arrow-blue.svg") right 50% no-repeat;}
    .bloc-optique-fiche:hover div a.link-arrows:after { right: -10px;}
    .bloc-optique-fiche div a.link-arrows:hover:after { right: -10px;}
    .bloc-optique-fiche:hover div { backdrop-filter: blur(16px); transition: all 400ms ease-in-out;}
    .bloc-optique-fiche:hover div { box-shadow: 0px 40px 60px 0px rgba(34, 145, 176, 0.10);}
}

@media (max-width:1200px) {
    .bloc-marques .slider-marques .item { width: 180px; height: 180px;}
    
    .bloc-professionnels  { grid-template-columns:60% 1fr; padding: 60px 0 80px 0;}
    
    .bloc-team                  { grid-template-columns:230px auto; top: -100px; grid-gap: 0 20px; left: 20px; }
    .bloc-team.reverse          { grid-template-columns:auto 230px; top: 200px; grid-gap: 0 20px; }
    .bloc-team.reverse .texte p { margin-top: 50px;}
    
    .bloc-optique        { grid-gap: 0 40px;}
}

@media (max-width:1000px) {
    .bloc-professionnels                        { grid-template-columns:1fr; padding-bottom: 0;}
    .bloc-professionnels .item:nth-child(1)     { grid-area: 2; top: -100px;}
    .bloc-professionnels .item:nth-child(2)     { grid-area: 1;}
    
    .bloc-team                { position: relative; top: -100px; left: inherit; width: 500px;}
    .bloc-team.reverse        { top: -150px; left: -100px;}
    .bloc-team .photo img     { border-radius: 10px;}
    
    .bloc-optique-fiche img  { border-top-left-radius: 10px; border-top-right-radius: 10px;}
    .bloc-optique-fiche div  { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding: 30px;}
}

@media (max-width:800px) {
    .bloc-professionnels { margin-bottom: 0;}
    .bloc-marques .slider-marques .item { width: 140px; height: 140px;} 
    .bloc-optique     { grid-template-columns:1fr; grid-gap: 0 0; margin-top: 0;}
    .bloc-optique-fiche { max-width: 600px; margin: 20px auto;}
    
    .bloc-optique .item:nth-child(1)     { margin-top: 180px;}
    .grid-optique-intro                  { position: absolute; top: 0; max-width: 600px; width: 100%; left: 50%; transform: translateX(-50%);}
}

@media (max-width:600px) {
    .bloc-professionnels .item:nth-child(2)     { max-width: 350px;}
    .bloc-team                                  { grid-template-columns:180px auto;  max-width: 350px; width: 100%;}
    .bloc-team.reverse                          { grid-template-columns:auto 180px; left: 0;}
    
    .bloc-optique                               { margin-top: -10px;}
    .bloc-optique:before                        { content: ''; width: 200vw; left: -50vw; position: absolute; z-index: -1; top: -40px; height: calc(100% - 100px); background: #e5f3f2;}
    .grid-optique-intro p,
    .bloc-optique-fiche p                       { display: none;}
    .bloc-optique .item:nth-child(1)            { margin-top: 60px;}
    .bloc-optique-fiche h3                      { margin-bottom: 0;}
    .bloc-optique-fiche div                     { padding: 10px 30px;}
    .bloc-optique-fiche div a.link-arrows h3    { margin-bottom: 0; font-size: 1.8rem;}
    
    .bloc-optique-fiche.shape:before,
    .bloc-optique-fiche.shape-2:before,
    .bloc-optique-fiche.shape-3:before          { content: none;}
    .bloc-optique-fiche div                     { backdrop-filter: none; background: #ffffff;}
}
@media (max-width:400px) {
    .bloc-team .texte     { font-size: 1.8rem}
}