/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
@font-face {
    font-family: 'photograph_signatureregular';
    src: url('police/photograph_signature.woff2') format('woff2'),
url('police/photograph_signature.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

:root
{
	--CouleurNoir:#1d1d1b;
	--CouleurJaune:#fbe79b;
	--CouleurJaunePale:#f6f5ee;
	--CouleurBleu:#2293d2;
	--CouleurGris:#ededed;
	
      --gap: 12px;
      --row-height: 8px; /* base pour le calcul des "row spans" */
      --bg: #fafafa;
      --card-bg: #fff;
      --shadow: 0 6px 18px rgba(20,20,30,0.06);
      --radius: 10px;
      --accent: #1f6feb;
      --max-width: 1200px;
	
}

body, html, a, ul, ol, li, img{ padding:0px; margin:0px; border:0px; list-style-type:none;}
a, button, a img, a:hover, button:hover, a:hover > img, label, li, ::after, :hover:after{transition : all 0.2s linear;}
body{ font:14px/22px 'Source Sans 3', sans-serif; font-weight:300;color:var(--CouleurNoir);}
a{ color:var(--CouleurNoir);}img{ border:0px;}
html{  /*display: block; position: relative;  box-sizing: border-box; overflow-y: auto;  overflow-x: hidden; scroll-behavior: smooth;*/}
body{  display: block; position: relative;  box-sizing: border-box; overflow-y: auto;  overflow-x: hidden; scroll-behavior: smooth;}
/*
html { box-sizing:border-box; height:100%; scrollbar-gutter: stable; }
body { min-height:100%; margin:0; overflow-x:hidden; }*/

.Decalage.DecaleTop{margin-top: 80px; width: 100%; float: left;}

/* STRUCTURE*/
div#first{ width: 100%; display: block; text-align: center; float: left;}

@media screen and (max-width: 1024px) 
{
	div#first div#second{ width:  calc(100% - 20px);padding:10px; display: inline-block; text-align: left;  }
	div.CaseLimite{width: calc(100% - 20px); padding: 20px 10px; display: inline-block;}
	div.CaseLimite2{width: 100%; display: inline-block;}
}
@media screen and (min-width: 1024px) 
{
	div#first div#second{ width: 944px; display: inline-block; text-align: left;  }
	div.CaseLimite, div.CaseLimite2{width: 100%; display: inline-block;}
}
@media screen and (min-width: 1200px) 
{
	div#first div#second{ width: 1120px; display: inline-block; text-align: left;  }
	div.CaseLimite{max-width: 500px; width: calc(100% - 100px); display: inline-block;padding: 50px;}
	div.CaseLimite2{max-width: 500px; display: inline-block;}
}
@media screen and (min-width: 1400px) 
{
	div#first div#second{ width: 1320px; display: inline-block; text-align: left;  }
	div.CaseLimite{max-width: 700px; width: calc(100% - 100px); display: inline-block; padding: 50px;}
	div.CaseLimite2{max-width: 700px; display: inline-block;}
}

@media screen and (min-width: 1024px) 
{
	.row{width: 100%; display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex; display: flex !important;  -webkit-flex-direction: row;  -moz-flex-direction: row;  -ms-flex-direction: row;  flex-direction: row !important; float: none; display: inline-block; position: relative;}
 	.row .case1{ flex: 1;display: inline-block; position: relative; }.row .case2{ flex: 2;display: inline-block; position: relative; }.row .case3{ flex: 3; display: inline-block; position: relative;}.row .case4{ flex: 4; display: inline-block; position: relative;}.row .case5{ flex: 5; }.row .case6{ flex: 6; position: relative; }.row .case7{ flex: 7; }.row .case8{ flex: 8; }.row .case9{ flex: 9; }.row .case10{ flex: 10; }.row .case11{ flex: 11; }.row .case12{ flex: 12; }
	
	.column{width: 100%; max-width: 100% !important; display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex; display: flex !important;  -webkit-flex-direction: row;  -moz-flex-direction: row;  -ms-flex-direction: row;  flex-direction:column ; float: none; min-height: 100%; height: 100%; }
	.column.column100{height: 100%;}
 	.column .case1{ flex: 1; flex-direction: column;}.column .case2{ flex: 2;flex-direction: column; }.column .case3{ flex: 3;flex-direction: column; }.column .case4{ flex: 4;flex-direction: column; }.column .case5{ flex: 5;flex-direction: column; }.column .case6{ flex: 6; flex-direction: column; max-width: 100% !important;  }.column .case7{ flex: 7; flex-direction: column;}.column .case8{ flex: 8; flex-direction: column;}.column .case9{ flex: 9;flex-direction: column; }.column .case10{ flex: 10;flex-direction: column; }.column .case11{ flex: 11; flex-direction: column;}.column .case12{ flex: 12; flex-direction: column;}
	
	.row > div, .column > div{position: relative;}	
}
@media screen and (max-width: 1024px) 
{
	.row{float: left; width: 100%;position: relative;}
	.row .case12, .row .case6, .row .case11, .row .case10, .row .case9, .row .case8, .row .case7, .row .case6, .row .case5, .row .case4, .row .case3, .row .case2, .row .case1{float: left; width: 100%; position: relative;}
	.case12.padding10, .case11.padding10, .case10.padding10, .case9.padding10, .case8.padding10, .case7.padding10, .case6.padding10, .case5.padding10, .case4.padding10, .case3.padding10, .case2.padding10, .case1.padding10{width: calc(100% - 20px);}	
}

@media screen and (min-width: 1024px) 
{
.CaseVerticalCentre {
    display: flex;
    flex-direction: column; /* pour garder le contenu en colonne */
    justify-content: center; /* centre verticalement */
    align-items: flex-start; /* optionnel : aligne à gauche, tu peux mettre center */
    height: 100%; /* assure que la div prend toute la hauteur du parent */
    padding: 45px; /* si tu gardes ton padding existant */
    box-sizing: border-box; /* pour inclure le padding dans la hauteur */
}
}

@media (max-width: 768px) 
{
	.CaseVerticalCentre{padding:25px;}
}



.padding10{padding: 10px;}
.case6.padding10{padding: 10px; width: calc(50% - 20px);}

@media screen and (max-width: 1024px) 
{
.case6.padding10{padding: 10px; width: calc(100% - 20px);}
}
@media (max-width: 768px) 
{
	.padding10{padding: 10px; width: calc(100% - 20px);}
}
.case_table{display:table !important;height:100%; width: 100%;}.case_table .vertical_align{display:table-cell;vertical-align:middle; width: 100%;}

/*
* Weight
*/
.w100{font-weight: 100;} .w300{font-weight: 300;} .w500{font-weight: 500;} .w700{font-weight: 700;} .w900{font-weight: 900;} 
/*
* Aligenment
*/
.txtcenter{text-align: center;} .txtleft{text-align: left;} .txtright, .txtrightPC{text-align: right;}
/*
* Couleur
*/
.txtblanc{color:#FFFFFF;}
/*
* Size
*/
.size1{font-size: 20px !important;}
/*
* Background 
*/
.BgJaunePale{background: var(--CouleurJaunePale);}
.BgNoir{background: var(--CouleurNoir);}
.BgBois{background: url("/charte/BgBois.webp") center center no-repeat; background-size:cover;}
/*
* .Deco
*/
.deco1:before{content: ""; position: absolute; top: -20px; left: -150px; width: 350px; height: 300px; background: #FFFFFF; -webkit-mask: url('../charte/IconeMonture.svg') no-repeat 50% 50%;  mask: url('../charte/IconeMonture.svg') no-repeat 50% 50%; z-index: 0; transform: rotate(90deg);}

.DecoTrait::after{ width: 4px; height: calc(100% + 100px); content: ""; position: absolute; top: -50px; left: 18px; background: var(--CouleurNoir);}

.DecoLunette::before{position: absolute; top: 46px; left: 18px; width: calc(100% - 90px); height: 4px; content: ""; background: var(--CouleurNoir);}
.DecoLunette::after{position: absolute; top: -20px; left: calc(100% - 80px); width: 150px; height: 150px; content: ""; background: var(--CouleurNoir); -webkit-mask: url('../charte/IconeMonture.svg') no-repeat 50% 50%;  mask: url('../charte/IconeMonture.svg') no-repeat 50% 50%;}

.DecoAngle::before{position: absolute; display:block; top: 46px; left: 0px; width: calc(100% - 18px); height: 4px; content: ""; background: var(--CouleurNoir);z-index: 1}
.DecoAngle::after{position: absolute; display:block; top: 46px; right: 18px; width: 4px; height: 100px; content: ""; background: var(--CouleurNoir); z-index: 1}

.DecoTraitDroit::after{position: absolute; display:block; bottom: 0px; right: 18px; width: 4px; height: 50px; content: ""; background: var(--CouleurNoir); z-index: 1}

@media (max-width: 1024px) 
{
	.DecoLunette{height: 40px;}
	.DecoLunette::before{ width: calc(100% - 188px);}
	.DecoLunette::after{ right: 20px; left: inherit;}
	.DecoAngle{display: none;}
}

/*
* padding
*/
.padding45{padding:45px;}

@media (max-width: 768px) 
{
	.padding45{padding:25px; width: calc(100% - 50px) !important;}
}

/*
* Titre
*/
.Titre1{font: 45px/70px "Bebas Neue", sans-serif; padding: 0px 0px 40px 0px; margin: 0px; text-transform: uppercase; position: relative; display: block;}
.Titre1::after{width: 60px; height: 4px; position: absolute; background: var(--CouleurNoir); content: ""; position: absolute; bottom: 10px; left: 0px; transform-origin: left; transform: rotate(-20deg)}

.Titre2{font: 30px/50px "Bebas Neue", sans-serif; padding: 0px 0px 20px 0px; margin: 0px; text-transform: uppercase; color:#FFFFFF; position: relative;}
.Titre2::after{width: 30px; height: 2px; position: absolute; background: #FFFFFF; content: ""; position: absolute; bottom: 0px; left: 0px; transform-origin: left; transform: rotate(-20deg);}

.Titre3{font: 30px/50px "Bebas Neue", sans-serif; padding: 0px 0px 20px 0px; margin: 0px; text-transform: uppercase; color:var(--CouleurNoir); position: relative; display: block;}
.Titre3::after{width: 30px; height: 2px; position: absolute; background: var(--CouleurNoir); content: ""; position: absolute; bottom: 0px; left: 0px; transform-origin: left; transform: rotate(-20deg);}

.Titre4{font: 26px/40px "Bebas Neue", sans-serif; padding: 0px 0px 20px 0px; margin: 0px; text-transform: uppercase; color:#FFFFFF; position: relative;}
.Titre4::after{width: 20px; height: 2px; position: absolute; background: #FFFFFF; content: ""; position: absolute; bottom: 0px; left: 0px; transform-origin: left; transform: rotate(-20deg);}


.Titre5{font: 45px/70px "Bebas Neue", sans-serif; padding: 0px 0px 40px 0px; margin: 0px; text-transform: uppercase; position: relative; display: block; color:#FFFFFF;}
.Titre5::after{width: 60px; height: 4px; position: absolute; background: #FFFFFF; content: ""; position: absolute; bottom: 10px; left: 0px; transform-origin: left; transform: rotate(-20deg)}

.Titre6{font: 26px/40px "Bebas Neue", sans-serif; padding: 0px 0px 20px 0px; margin: 0px; text-transform: uppercase; color:var(--CouleurNoir); position: relative;}


.Baseline{font: 40px/100px "photograph_signatureregular";}
.Baseline2{font: 40px/40px "photograph_signatureregular";}

@media (max-width: 768px) {
	
.Titre5{font: 30px/40px "Bebas Neue", sans-serif; padding: 0px 0px 40px 0px; margin: 0px; text-transform: uppercase; position: relative; display: block; color:#FFFFFF;}
.Titre5::after{width: 30px; height: 2px; position: absolute; background: #FFFFFF; content: ""; position: absolute; bottom: 5px; left: 0px; transform-origin: left; transform: rotate(-20deg)}
	
    .Baseline {        margin-top: 40px; padding: 10px;        float: left;        text-align: center;        width: calc(100% - 20px); font: 40px/50px "photograph_signatureregular";   }
}
/*
* Bouton
*/
.Btn1{font: 20px/50px "Bebas Neue", sans-serif; padding: 10px 20px 10px 20px; border: 1px solid var(--CouleurNoir); text-align: center; text-decoration: none; letter-spacing: 1px; }
.Btn1:hover{background: var(--CouleurNoir); color:#FFFFFF;}
.Btn1::after{content: "➜"; padding: 0px 10px 0px 10px;}
.Btn1:hover::after{color:#FFFFFF;padding: 0px 0px 0px 20px;}

.Btn2{font: 20px/50px "Bebas Neue", sans-serif; padding: 10px 20px 10px 20px; border: 1px solid #FFFFFF; text-align: center; text-decoration: none; letter-spacing: 1px; color:#FFFFFF; }
.Btn2:hover{background: var(--CouleurJaune); color:var(--CouleurNoir);}
.Btn2::after{content: "➜"; padding: 0px 10px 0px 10px; color: #FFFFFF}
.Btn2:hover::after{color:var(--CouleurNoir);padding: 0px 0px 0px 20px;}

.BtnBig{ padding: 10px 10px 40px 10px; height: calc(100% - 50px); width: calc(100% - 20px); background: var(--CouleurNoir); color:#FFFFFF; font: 30px/40px "Bebas Neue", sans-serif; text-transform: uppercase; display: block; letter-spacing: 1px;}
.BtnBig::after{content: ""; z-index: 1; width: 40px; height: 40px; bottom: 0px; right: 20px; position: absolute; display: block; -webkit-mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%;  background: #FFFFFF;}
.BtnBig:hover{background: var(--CouleurJaune); color:var(--CouleurNoir);}
.BtnBig:hover::after{background:var(--CouleurNoir);}

.BtnNext{font: 20px/50px "Bebas Neue", sans-serif; padding: 10px 20px 10px 20px; border: 1px solid var(--CouleurNoir); text-align: center; text-decoration: none; letter-spacing: 1px; background: #FFFFFF; white-space: nowrap; }
.BtnNext:hover{background: var(--CouleurNoir); color:#FFFFFF;}
.BtnNext::after{content: ">"; padding: 0px 10px 0px 10px;}

.BtnPrevious{font: 20px/50px "Bebas Neue", sans-serif; padding: 10px 20px 10px 20px; border: 1px solid var(--CouleurNoir); text-align: center; text-decoration: none; letter-spacing: 1px; white-space: nowrap;}
.BtnPrevious:hover{background: var(--CouleurNoir); color:#FFFFFF;}
.BtnPrevious::before{content: "<"; padding: 0px 10px 0px 10px;}


.BtnContentDoctolib{ padding: 5px 10px 5px 60px; color:#FFFFFF; text-transform: uppercase; position: relative; font:16px/30px 'Source Sans 3', sans-serif; font-weight:700;background: var(--CouleurBleu); text-decoration: none;}
.BtnContentDoctolib::before{-webkit-mask: url("../charte/IconeDoctolib.svg") no-repeat 50% 50%;  mask: url('../charte/IconeDoctolib.svg') no-repeat 50% 50%;width: 40px; height: 40px; top: 15px; left:10px; content: ""; position: absolute; background: #FFFFFF;  z-index: 2;}
.BtnContentDoctolib:hover{background: var(--CouleurNoir);}

/*
* HEADER
*/
.header{position: absolute; top: 0px; left: 0px; z-index: 999999; width: calc(100% - 20px); height: 80px; padding-right: 20px; background: var(--CouleurNoir);}
.home .header{background: none;}
.header .LogoIcone{position: absolute; top: 0px; left: 0px; width: 180px; height: 80px; background: var(--CouleurNoir);}
.header .LogoIcone::after{content: ""; z-index: 1; width: 80px; height: 80px; top: 0px; left: 40px; position: absolute; display: block; -webkit-mask: url('../charte/IconeMonture.svg') no-repeat 50% 50%;  mask: url('../charte/IconeMonture.svg') no-repeat 50% 50%;  background: #FFFFFF;}
.header .LogoIcone a{display: block; height: 100%; width:100%; z-index: 2; position: relative;}
.header .menu{position: absolute; top: 0px; left: 180px; width: 180px; height: 80px; background: var(--CouleurJaune);}
.header .menu .LogoMenu{position: absolute; top: 39px; left: 20px; width: 40px; height: 2px; background: var(--CouleurNoir);transition : all 0.2s linear;}
.header.Affiche .menu .LogoMenu{background: var(--CouleurJaune);}
.header .menu .LogoMenu::before{content: ""; z-index: 1; width: 40px; height: 2px; background: var(--CouleurNoir); top: -12px; left: 0px; position: absolute; display: block;transition : all 0.2s linear;}
.header.Affiche .menu .LogoMenu::before{content: ""; z-index: 1; width: 40px; height: 2px; background: var(--CouleurNoir); top: -15px; left: 0px; position: absolute; display: block; transform-origin: left; transform: rotate(45deg);transition : all 0.2s linear;}

.header .menu .LogoMenu::after{content: ""; z-index: 1; width: 40px; height: 2px; background: var(--CouleurNoir); top: 10px; left: 0px; position: absolute; display: block;transition : all 0.2s linear;}
.header.Affiche .menu .LogoMenu::after{content: ""; z-index: 1; width: 40px; height: 2px; background: var(--CouleurNoir); top: 13px; left: 0px; position: absolute; display: block; transform-origin: left; transform: rotate(-45deg);transition : all 0.2s linear;}

.header .menu .TitreMenu{font:14px/80px 'Source Sans 3', sans-serif; color: var(--CouleurNoir); padding-left: 80px; text-align: center;}
.header .BtnDoctolib{ width: 180px; height: 80px; position: absolute; top: 0px; right: 0px; display: block; background: var(--CouleurBleu); }
.header .BtnDoctolib a{white-space: nowrap; color:#FFFFFF; text-transform: uppercase; font:14px/80px 'Source Sans 3', sans-serif; padding-left: 40px; padding-right: 20px; display: block; position: relative;}
.header .BtnDoctolib a::before{content: ""; position: absolute; top: 28px; left: 8px; width: 24px; height: 24px; background: #FFFFFF; -webkit-mask: url('../charte/IconeDoctolib.svg') no-repeat 50% 50%;  mask: url('../charte/IconeDoctolib.svg') no-repeat 50% 50%; z-index: 2;}
.header .BtnDoctolib a:hover{background: var(--CouleurNoir); color:var(--CouleurBleu);}
.header .BtnDoctolib a:hover::before{background: var(--CouleurBleu);}
.header .ContentReseaux{width: auto; height: 80px; position: absolute; top: 0px; right: 180px; }
.header .ContentReseaux .IconeReseaux{width: 24px; height: 24px; margin: 28px 10px 0px 0px; display: block; position: relative; float: left;}
.header .ContentReseaux .IconeReseaux::after{width: 24px; height: 24px;}
.header .ContentReseaux .IconeReseaux.FB::after{content: ""; position: absolute; top: 0px; left: 0px;  background: var(--CouleurJaune); -webkit-mask: url('../charte/IconeFacebook.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFacebook.svg') no-repeat 50% 50%; z-index: 2;}
.header .ContentReseaux .IconeReseaux.Instagram::after{content: ""; position: absolute; top: 0px; left: 0px;  background: var(--CouleurJaune); -webkit-mask: url('../charte/IconeInstagram.svg') no-repeat 50% 50%;  mask: url('../charte/IconeInstagram.svg') no-repeat 50% 50%; z-index: 2;}
.header .ContentReseaux .IconeReseaux:hover::after{background: var(--CouleurNoir);}

.ContentMenu{visibility: hidden; width: 360px; height: calc(100% - 80px); padding-top: 80px; top: 0px; left: -360px;transition : all 0.2s linear; background: var(--CouleurJaune); position: fixed; z-index: 999998;}
.ContentMenu.Affiche{left: 0px; display: block; transition : all 0.2s linear; visibility: visible;}
.ContentMenu ul{ padding-left: 60px; padding-top: 60px;}
.ContentMenu ul li{ width: 100%;  }
.ContentMenu ul li a{font: 22px/40px "Bebas Neue", sans-serif; color:var(--CouleurNoir);}


@media (max-width: 768px) 
{
	.header .ContentReseaux{ height: 30px; top: 0px; width: 50%; left: 0px;}
	.header .ContentReseaux .IconeReseaux{width: 20px; height: 20px; margin: 5px 10px 0px 0px;}
	.header .ContentReseaux .IconeReseaux::after{width: 20px; height: 20px;}
	.header.Affiche .ContentReseaux .IconeReseaux::after{background: var(--CouleurNoir);}
	.header .BtnDoctolib{height: 30px; width: 50%; right: 0px;  }.header .BtnDoctolib a{font:14px/30px 'Source Sans 3', sans-serif; display: block; text-align: center;}.header .BtnDoctolib a::before{width: 20px; height: 20px; left: 5px; top: 5px;}
	.header .LogoIcone{top: 30px; left: 0px; width: 50%; }
	.header .menu{top: 30px; left: 50%; width: 50%}
	
	.header .LogoIcone::after{content: ""; z-index: 1; width: calc(100% - 30px); height: calc(100% - 30px); top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); display: block; -webkit-mask: url('../charte/Logo-simple.svg') no-repeat 50% 50%;  mask: url('../charte/Logo-simple.svg') no-repeat 50% 50%;  background: #FFFFFF;}
	
	.header.fixe{ position: fixed;}
}
@media (min-width: 768px) 
{
	.header.fixe{ position: fixed;}
}


/*
* Diaporama
*/
.diaporama{width: 100%; z-index: 1; position: relative; margin: 0px 0px 0px 0px; height: calc(100% - 100px); display: block; overflow: hidden; min-height: 700px;}
.diaporama .diapo{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; display: none;}
.diaporama .diapo:first-child{ display: block;}
.diaporama .diapo img{width: 100%;  height: 100%;/*position: absolute; z-index:1; top:50%; left: 50%; transform: translate(-50%, -50%);*/
	object-fit: cover;       /* l’image remplit la zone sans être déformée */
  object-position: center; /* centre l’image dans la zone */}

.diaporama .Degrade{position: absolute; top: 0px; left:0px; height: 100%; width: 33%; z-index: 99; display: block; background: linear-gradient(90deg,rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 100%);}

.diaporama .Logo{position: absolute; top: 120px; left: 40px;  z-index: 999; width: 380px; text-align: center;}
.diaporama .Logo img{width: 280px;}
.diaporama .Titre{position: absolute; bottom: 20px; left: 40px; width: 380px;  z-index: 2; text-align: center;  z-index: 999; text-align: center;}
.diaporama .Titre h1{font: 55px/70px "photograph_signatureregular";}

.diaporama .DiaporamaNavigation{ width:20px; position: absolute; right: 0px; top:50%; transform: translateY(-50%); z-index: 10; text-align: right;}
.diaporama .DiaporamaNavigation .Puce{width: 20px; height: 60px; display: block; background: var(--CouleurNoir); margin: 5px 0px 5px 0px; }
.diaporama .DiaporamaNavigation .Puce.on{background: var(--CouleurJaune); width: 20px; margin-left: -20px; width: 40px;}

.next{} .next img{max-width: 50px;transform: rotate(90deg);}

@media (max-width: 768px) 
{
	.diaporama{min-height: 500px;}
	.diaporama .Logo{display: none;}
	/*.diaporama .Logo img{width: 180px;}*/
	.diaporama .Degrade{display: none;}
	.diaporama .Titre{position: absolute; bottom: 20px; left: 20px; width: calc(100% - 40px);  z-index: 2; text-align: center;  z-index: 999; text-align: center;}
	.diaporama .Titre h1{font: 40px/55px "photograph_signatureregular";text-shadow: 0px 0px 4px #FFFFFF;}
}
/*
* Cases
*/
.ListingCase {  display: grid;  grid-template-columns: repeat(4, 1fr);  gap: 0px; height: 100%}
.ListingCase2 {  display: grid;  grid-template-columns: repeat(2, 1fr);  gap: 0px; height: 100%}
.CaseGamme {  position: relative;  width: 100%;  /*aspect-ratio: 1 / 1;*/ /* carré automatique */  overflow: hidden;  cursor: pointer;}
.CaseGamme img {  width: 100%;  height: 100%;  object-fit: cover;  display: block;  transition: transform .4s ease;}
/* Overlay caché par défaut */
.overlay {  position: absolute;  inset: 0;  background: rgba(0, 0, 0, .6);  color: #fff;  opacity: 0;  display: flex;  /*justify-content: center;  align-items: center;*/  flex-direction: column;  transition: opacity .3s ease; padding: 10px; text-decoration: none;}
.overlay .arrow {  position: absolute;  bottom: 10px;  right: 10px;  font-size: 1.6em;}
.overlay .arrow::after{content: ""; position: absolute; right: 0px; bottom: 0px; width: 60px; height: 60px; background: #FFFFFF; -webkit-mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%; z-index: 2; transform-origin: center; transform: rotate(0deg);}
/* Effets au survol */
.overlay .arrow:hover{background: none !important;}
.CaseGamme:hover .overlay {  opacity: 0.9;}
.CaseGamme:hover img {  transform: scale(1.1);}

.ListingPhoto{ display: flex;	position: relative;  gap: 0px; /* espace entre les photos */  overflow: hidden; /* pour éviter que l'image déborde */	width: 100%; height: 100%;}
.ListingPhoto .CasePhoto { flex: 1;  width: 100%;  height: auto;  transition: flex 0.5s ease, transform 0.5s ease;  cursor: pointer;  object-fit: cover; /* garde les proportions de l'image */	overflow: hidden;	position: relative;}
.ListingPhoto .CasePhoto img {  width: 100%;  height: 100%;  object-fit: cover;  display: block;  transition: transform .4s ease;}
.ListingPhoto .CasePhoto:hover {flex: 3; /* augmente la largeur de l'image survolée */  transform: scale(1.05); /* léger zoom */}

@media (max-width: 768px) 
{
	.ListingCase { grid-template-columns: repeat(2, 1fr); }
}

.ListingCase2 {  display: grid;  grid-template-columns: repeat(2, 1fr);  gap: 0px; height: 100%}
.CaseGamme2 {  position: relative;  width: 100%;  /*aspect-ratio: 1 / 1;*/ /* carré automatique */  overflow: hidden;  cursor: pointer; max-height: 400px;}
.CaseGamme2 img {  width: 100%;  height: 100%;  object-fit: cover;  display: block;  transition: transform .4s ease;}
/* Overlay caché par défaut */
.overlay2 {  position: absolute;  inset: 0;  background: rgba(0, 0, 0, .6);  color: #fff;  opacity: 0;  display: flex;  /*justify-content: center;  align-items: center;*/  flex-direction: column;  transition: opacity .3s ease; padding: 10px; text-decoration: none;}
.overlay2 .Excerpt{margin-top: 20px;}
.overlay2 .arrow {  position: absolute;  bottom: 10px;  right: 10px;  font-size: 1.6em;}
.overlay2 .arrow::after{content: ""; position: absolute; right: 0px; bottom: 0px; width: 60px; height: 60px; background: #FFFFFF; -webkit-mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%; z-index: 2; transform-origin: center; transform: rotate(0deg);}
/* Effets au survol */
.overlay2 .arrow:hover{background: none !important;}
.CaseGamme2:hover .overlay2 {  opacity: 0.9;}
.CaseGamme2:hover img {  transform: scale(1.1);}

@media (max-width: 768px) 
{
	.ListingCase2 { grid-template-columns: repeat(1, 1fr); }
}



ul.design1{margin: 10px 0px 10px 5px; font:18px/26px 'Source Sans 3', sans-serif; font-weight:300; font-weight: 300;}
ul.design1 li::before{content:"•"; padding:0px 5px 0px 0px; color:var(--CouleurJaune); font:18px/26px 'Source Sans 3', sans-serif; font-weight: 900;}

/*
* gestion ds photos
*/
picture.Design1{margin: 20px 0px 20px 0px; display: block; height: calc(100% - 40px) }
picture.cover img{width: 100%;  height: 100%; object-fit: cover;       /* l’image remplit la zone sans être déformée */
  object-position: center; /* centre l’image dans la zone */}
picture.contain img{width: 100%;  height: 100%; object-fit: contain;       /* l’image remplit la zone sans être déformée */
  object-position: center; /* centre l’image dans la zone */}
picture.contain2 img{width: 100%;  height: 100%; object-fit: contain;       /* l’image remplit la zone sans être déformée */
  object-position: left; /* centre l’image dans la zone */}

.Opticien{ padding: 100px 0px 100px 0px; background: url("/charte/BgOpticien.webp") center center no-repeat; background-size: cover ; background-attachment: fixed;}

.Stats{ padding: 100px 0px 100px 0px; background: url("/charte/BgStats.webp") center center no-repeat; background-size: cover ; background-attachment: fixed;}

.Stats.DecoTraitStats::before, .Opticien.DecoTraitStats::before{ position: absolute; top: 150px; left: 18px; height: calc(100% - 150px); width: calc(25% - 38px); content: ""; border-top: 4px solid #FFFFFF; border-left: 4px solid #FFFFFF; z-index: 1; }

.Stats.DecoTraitStats::after, .Opticien.DecoTraitStats::after{ position: absolute; top: 0px; right: 18px; height: 150px; width: calc(25% - 38px); content: ""; border-bottom: 4px solid #FFFFFF; border-right: 4px solid #FFFFFF;}

.UneStats{/*padding-top: 50px;*/ position: relative; margin-top: -4px;}


.UneStats .Icone{ width: 100%; float: left; height: 130px; position: relative;}
.UneStats .Icone::before{content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 90px; height: 90px; background: #FFFFFF;  z-index: 2;}
.UneStats .Icone.IconeLunette::before{-webkit-mask: url('../charte/IconeMonture.svg') no-repeat 50% 50%;  mask: url('../charte/IconeMonture.svg') no-repeat 50% 50%;width: 130px; height: 130px; top: 0px; }
.UneStats .Icone.IconeHoraires::before{-webkit-mask: url('../charte/IconeHorloge.svg') no-repeat 50% 50%;  mask: url('../charte/IconeHorloge.svg') no-repeat 50% 50%;}
.UneStats .Icone.IconeGarantie::before{-webkit-mask: url('../charte/IconeGarantie.svg') no-repeat 50% 50%;  mask: url('../charte/IconeGarantie.svg') no-repeat 50% 50%;}
.UneStats .StatBigChiffre{font: 60px/60px "Bebas Neue", sans-serif; color:#FFFFFF; text-transform: uppercase; width:100%; text-align: center;}
.UneStats .StatsTxt{font: 30px/30px "Bebas Neue", sans-serif; color:#FFFFFF; text-transform: uppercase; width:100%; text-align: center;}

@media (max-width: 768px) 
{
	.UneStats{padding-bottom: 30px;}
}
/*
* LEs Avis
*/
.reviews {box-sizing:border-box !important;}
.reviews {display:flex;flex-wrap:nowrap;align-items:stretch;width:calc(100% - 30px);overflow-x:auto;padding:15px 15px;}
.review {flex:4;display:flex;align-items:flex-start;gap:12px;border:1px solid #e6e6e6;border-radius:8px;padding:10px 14px; margin: 4px; background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04); cursor: pointer;}
.review-avatar {width:40px;height:40px;border-radius:50%;background:#f2f2f2;overflow:hidden;flex:none;}
.review-content {flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;}
.review-header {align-items:center;gap:8px;min-width:0;}
.review-author {font-weight:600;font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.review-meta {display:flex;align-items:center;gap:6px;font-size:12px;color:#666;white-space:nowrap;flex:none;}
.review-text {font-size:14px;line-height:1.4;color:#222;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height: 3em;transition: max-height 0.4s ease;}
.review-text.expanded {-webkit-line-clamp:unset;white-space:normal;max-height: 500px;}
.review-toggle {background:none;border:none;color:#0073e6;padding:0;margin-top:4px;font-size:13px;cursor:pointer;align-self:flex-start;}
.stars {--star-size:14px;--star-color:#ddd;--star-fill:#f5a623;--rating:0;position:relative;display:inline-block;inline-size:calc(var(--star-size) * 5);block-size:var(--star-size);background:linear-gradient(90deg,var(--star-color) 0 0) no-repeat;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 20"><defs><symbol id="s"><polygon points="10,1 12.9,7.1 19.6,7.6 14.1,11.9 15.9,18.4 10,14.7 4.1,18.4 5.9,11.9 0.4,7.6 7.1,7.1"/></symbol></defs><use href="%23s" x="0"/><use href="%23s" x="22"/><use href="%23s" x="44"/><use href="%23s" x="66"/><use href="%23s" x="88"/></svg>') center/100% 100%;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 20"><defs><symbol id="s"><polygon points="10,1 12.9,7.1 19.6,7.6 14.1,11.9 15.9,18.4 10,14.7 4.1,18.4 5.9,11.9 0.4,7.6 7.1,7.1"/></symbol></defs><use href="%23s" x="0"/><use href="%23s" x="22"/><use href="%23s" x="44"/><use href="%23s" x="66"/><use href="%23s" x="88"/></svg>') center/100% 100%;}
.stars::before {content:"";position:absolute;inset:0;inline-size:calc(var(--rating)/5*100%);background:var(--star-fill);}


@media (max-width:768px) {.reviews {flex-wrap:wrap;padding:0;}.review {flex:1 1 100%;}}

/*
* Slide des marques
*/
/* ---- Conteneur principal ---- */
.logo-slider-container {  position: relative; float: left;  width: 100%;  margin: 0px 0px 0px 250px;  overflow: hidden;  display: block;  align-items: center;  justify-content: center;}
/* ---- Zone du slider ---- */
.logo-slider-container  .logo-slider {  overflow: hidden;  width: 100%;}
/* ---- Ligne des logos ---- */
.logo-slider-container  .logo-slider .logos {  display: flex;  align-items: center;  gap: 40px;  transition: transform 0.6s ease;}
/* ---- Logos individuels ---- */
 .logo-slider-container  .logo-slider .logos img {  width: 120px;  height: auto;  object-fit: contain;  filter: grayscale(100%);  opacity: 0.8;  transition: all 0.3s ease;}
.logo-slider-container  .logo-slider .logos img:hover {  filter: grayscale(0%);  opacity: 1;  transform: scale(1.05);}

/* ---- Flèches de navigation ---- */
.ContentArrow{position: absolute; top: 50%; transform: translateY(-50%); left: 10px;}
.arrow {  display: inline-block; width: 80px; height: 80px; margin-right: 20px; position: relative;}

.arrow:hover {  background-color: var(--CouleurJaune);}

.arrow.left::after {-webkit-mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%;width: 80px; height: 80px; top: 0px; left:0px; content: ""; position: absolute;  transform: rotate(180deg);background: var(--CouleurNoir);  z-index: 2;}
.arrow.right::after { -webkit-mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%;width: 80px; height: 80px; top: 0px; left:0px; content: ""; position: absolute; background: var(--CouleurNoir);  z-index: 2;}


@media (max-width: 768px) 
{	
	.ContentArrow{width: 60px;}
	.arrow{height: 40px; width: 40px;margin-right: 10px; }
	.arrow.left::after, .arrow.right::after{ height: 40px; width: 40px;}
	.logo-slider-container{margin: 0px 0px 0px 100px; }
}


/* ---- Responsive ---- */

/* Tablette : 3 logos visibles */
@media (max-width: 992px) {
  .logos img {  width: 100px;  }
  .logos { gap: 30px; }
}

/* Mobile : 2 logos visibles */
@media (max-width: 600px) {
  .logos img {  width: 80px;  }
  .logos {  gap: 20px;  }
}

/*
* Footer
*/
.FooterEspace{padding: 50px 0px 50px 0px;}
.FooterEspace a{color:#FFFFFF;}
@media (max-width: 768px) 
{
	.FooterEspace{padding: 50px 10px 50px 10px;}
}
.LogoFooter{text-align: center; width: 100%; padding: 50px 0px 50px 0px;}
.LogoFooter img{ max-width: 250px;}

.FooterAdresse, .FooterHoraires, .FooterTel{margin-top: 20px; padding: 0px 0px 0px 50px; color:#FFFFFF; position: relative;}
.ContentAdresse, .ContentHoraires, .ContentTel{margin-top: 20px; padding: 0px 0px 0px 50px; color:var(--CouleurNoir); position: relative;}

.FooterAdresse::after, .ContentAdresse::after{-webkit-mask: url("../charte/IconeMap.svg") no-repeat 50% 50%;  mask: url('../charte/IconeMap.svg') no-repeat 50% 50%;width: 30px; height: 30px; top: 0px; left:10px; content: ""; position: absolute; background: #FFFFFF;  z-index: 2;}
.FooterHoraires::after, .ContentHoraires::after{-webkit-mask: url("../charte/IconeHoraires2.svg") no-repeat 50% 50%;  mask: url('../charte/IconeHoraires2.svg') no-repeat 50% 50%;width: 30px; height: 30px; top: 0px; left:10px; content: ""; position: absolute; background: #FFFFFF;  z-index: 2;}
.FooterTel::after, .ContentTel::after{-webkit-mask: url("../charte/IconeTel.svg") no-repeat 50% 50%;  mask: url('../charte/IconeTel.svg') no-repeat 50% 50%;width: 30px; height: 30px; top: 0px; left:10px; content: ""; position: absolute; background: #FFFFFF;  z-index: 2;}
.ContentAdresse::after, .ContentHoraires::after, .ContentTel::after{background: var(--CouleurNoir);}

.LinkFooter{font: 16px/30px "Bebas Neue", sans-serif; color:#FFFFFF;  text-align: left; text-decoration: none; letter-spacing: 1px; display: block; }
.LinkFooter:hover{color:var(--CouleurJaune);}
.LinkFooter::before{content: "➜"; padding: 0px 20px 0px 20px;}
.LinkFooter:hover::after{color: var(--CouleurJaune); padding: 0px 10px 0px 30px;}



.LinkDoctolib{height: calc(100% - 20px); display: block; width: calc(100% - 20px); padding: 10px; background: var(--CouleurBleu); text-decoration: none;}
.Doctolib{ padding-left: 60px; color:#FFFFFF; text-transform: uppercase; position: relative; font:20px/30px 'Source Sans 3', sans-serif; font-weight:700;background: var(--CouleurBleu);}
.Doctolib::before{-webkit-mask: url("../charte/IconeDoctolib.svg") no-repeat 50% 50%;  mask: url('../charte/IconeDoctolib.svg') no-repeat 50% 50%;width: 40px; height: 40px; top: 10px; left:10px; content: ""; position: absolute; background: #FFFFFF;  z-index: 2;}

.LinkDoctolib:hover{background:var(--CouleurJaune); color:var(--CouleurNoir);}
.LinkDoctolib:hover .Titre5{color:var(--CouleurNoir);}
.LinkDoctolib:hover .Titre5::after{background:var(--CouleurNoir);}
.LinkDoctolib:hover .Doctolib{color:var(--CouleurNoir);}
.LinkDoctolib:hover .Doctolib::before{background: var(--CouleurNoir)}

/*
* Fil d'Ariane
*/
.FilAriane{display: block; padding: 10px; background: var(--CouleurGris); float: left; width: calc(100% - 20px);}
.FilAriane nav{display: block;}
.FilAriane nav ol{ display: block;}
.FilAriane nav ol li{ padding-right: 20px; color:var(--CouleurNoir); display: inline-block; float: left;}
.FilAriane nav ol li::before{content: ">"; padding: 0px 5px 0px 5px; }
.FilAriane nav ol li a{ font-size: 12px;}

/*
* Slide show lunette
*/

.SlideShow{width:100%; height: 500px;}
.SlideShow .UnSlide{position: absolute; top: 0px; left: 0px; width: calc(100% - 40px); height: calc(100% - 40px); z-index: 1; background: #FFFFFF; padding: 20px;transition : all 0.2s linear; opacity: 0;}
.SlideShow .UnSlide.on{z-index: 2; opacity: 1;transition : all 0.2s linear;}
.SlideShow .UnSlide  .SlideContentTxt{position: absolute; top: 10px; left: 0px; width: 100%; z-index: 2;}
.SlideShow .UnSlide  .SlideContentTxt .LunetteMarque{position: absolute; top: 0px; left: 0px; background: var(--CouleurJaunePale); padding: 5px 10px 5px 50px; }
.SlideShow .UnSlide  .SlideContentTxt .LunetteMarque img{ width: 80px;}

.SlideShow .UnSlide  .SlideContentTxt .LunetteDescription{position: absolute; top: 0px; left: 170px; background: var(--CouleurJaunePale); padding: 5px; /*width: calc(100% - 170px);*/ display: block; min-height: 90px;  }

.SlideShow .UnSlide a.LienImg{display: block; width: 100%; height:100%; position: relative; z-index: 1;}
.SlideShow .UnSlide a.LienImg:hover::after{position: absolute; content: ""; width: 100px; height: 100px; transform: translate(-50%, -50%); border-radius: 50px; background: var(--CouleurJaune); z-index: 1; top: 50%; left: 50%;}
.SlideShow .UnSlide a.LienImg:hover::before{-webkit-mask: url("../charte/IconeLoupe.svg") no-repeat 50% 50%;  mask: url('../charte/IconeLoupe.svg') no-repeat 50% 50%; width: 50px; height: 50px; top: 50%; left:50%; transform: translate(-50%, -50%); content: ""; position: absolute; background: var(--CouleurNoir);  z-index: 2;}

.SlideShow .UnSlide a.LienImg > img{max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: contain; }
/*
.SlideShow .UnSlide a img{
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}*/


.SlideShow  .Nav{position: absolute; z-index: 10; bottom: 5px; left: 50%; transform: translate(-50%); white-space: nowrap;}
.SlideShow  .Nav .SlidePrevious{ height: 40px; width: 40px; padding: 5px; background: url("/charte/IconeFleche.svg"); background-size: contain; transform: rotate(180deg);  display: inline-block; margin-right: 10px;}
.SlideShow  .Nav .SlideNext{ height: 40px; width: 40px; padding: 5px; background: url("/charte/IconeFleche.svg"); background-size: contain;  display: inline-block; margin-left: 10px;}
.SlideShow  .Nav .NavSlide{height: 40px; width: 40px; padding: 5px;  margin: 0px 2px 0px 2px; display: inline-block; position: relative;}
.SlideShow  .Nav .NavSlide::after{content: ""; height: 40%; width: 100%; position: absolute; bottom: 0px; left: 0px; background: var(--CouleurNoir);}
.SlideShow  .Nav .NavSlide.on::after{height: 100%; background: var(--CouleurJaune);}
@media (max-width: 768px) 
{
	.SlideShow{ height: 350px;}
	.SlideShow  .Nav .NavSlide{width: 10px;}
}
/*
* FAQ
*/

.faq-item{ margin-right: 40px;}
.faq-item h3{font: 20px/40px "Bebas Neue", sans-serif; padding: 0px 0px 0px 0px; margin: 0px 0px 10px 0px;  color:var(--CouleurNoir); position: relative; border-bottom: 1px solid var(--CouleurNoir); padding-right:40px; display: block;}
.faq-item h3::after{width: 40px; height: 40px; position: absolute; right: 0px; top: 0px; display: block;  background: var(--CouleurNoir); content: ">"; color:#FFFFFF; text-align: center; font: 20px/40px 'Source Sans 3', sans-serif;}
.faq-item.active h3::after{transform: rotate(90deg);}

.faq-item p{ display: none; margin: 10px 0px 30px 0px;}
.faq-item:hover{background: var(--CouleurJaune);}
.faq-item.active p{display: block;}

/*
* Formulaires
*/
form.DesignForm1{}
form.DesignForm1 input, form.DesignForm1 textarea{ border: 1px solid #e0ddd8; background:#f6f6f6; font: 16px/30px 'Source Sans 3', sans-serif; font-weight:300; padding: 5px; width:calc(100% - 12px);  }
form.DesignForm1 textarea{height: 150px;}

/*
* Pop-up cookies
*/
.pop_cookie{position: fixed; bottom: 0px; left: 0px; width: 100%; background: rgba(255,255,255,0.80); z-index: 999999999; border-top: 2px solid var(--CouleurJaune); height: 50px; line-height: 50px;}

/*
* Icone
*/
.Icone{padding-left: 30px; display: block; position: relative; font-size: 22px; line-height: 30px; text-align: left;}
.Icone::after{position: absolute; top: 5px; left: 5px; z-index: 1; width: 20px; height: 20px; content: "";}
.Icone.Check::after{-webkit-mask: url('../charte/IconeCheck.svg') no-repeat 50% 50%;  mask: url('../charte/IconeCheck.svg') no-repeat 50% 50%; background: var(--CouleurNoir)}

/*
* Frise chronologique verticale
*/
.UneChronologie { display: flex;align-items: flex-start;position: relative;padding: 20px 0;transition : all 0.2s linear;}
.ChronoDate {width: 100px;text-align: right; padding-right: 30px; padding-top: 10px; font-weight: bold;}
.ChronoTitre {background: #f0f0f0;padding: 10px 15px;border-radius: 5px; position: relative;}
.UneChronologie::before {content: ''; position: absolute;left: 110px;top: 0; z-index: 1; bottom: 0;width: 2px; background: var(--CouleurJaune);}
.UneChronologie::after{ width: 10px; height: 10px; background: #FFFFFF; border: 2px solid var(--CouleurJaune); content: ""; position:absolute; top: 33px; left: 105px; z-index: 2; border-radius: 10px; }
.UneChronologie:hover{background: var(--CouleurJaune);transition : all 0.2s linear;}
.UneChronologie:hover .ChronoTitre{background: none;transition : all 0.2s linear;}
.UneChronologie:hover .ChronoTitre::before{    content: "";    width: 15px;    height: 2px;    background: var(--CouleurNoir);    position: absolute;    top: 20px;    left: -5px;    z-index: 1;}


 /* Grid container */
 .wrap{     max-width: var(--max-width);      margin: 36px auto;      padding: 0 18px;    }
    .mosaic{      display: grid;      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));      grid-auto-rows: var(--row-height);      gap: var(--gap);      align-items: start;    }
    /* Item card */
    .mosaic-item{      background: var(--card-bg);      border-radius: var(--radius);      box-shadow: var(--shadow);      overflow: hidden;      display: block;      text-decoration: none;      color: inherit;      transition: transform .18s ease, box-shadow .18s ease;      will-change: transform;    }
    .mosaic-item:focus,    .mosaic-item:hover{      transform: translateY(-6px);      box-shadow: 0 18px 36px rgba(20,20,30,0.12);    }

    .mosaic-item img{      display:block;      width:100%;      height:auto;      object-fit: cover;      vertical-align: middle;      -webkit-user-drag: none;      user-select: none;    }

    /* Responsive tweaks */
    @media (max-width:720px){      .mosaic{ grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); }    }

/* Bloc iamge */
.contain-fixed-size-div { display: flex; gap: 10px;flex-wrap: wrap; transition : all 0.2s linear;}
.fixed-size-div {  width: 150px;      /* Largeur fixe du div */  height: 150px;     /* Hauteur fixe du div */  display: flex;     /* Flex pour centrer le contenu */  justify-content: center;  /* Centre horizontalement */  align-items: center;      /* Centre verticalement */  overflow: hidden;  /* Coupe le surplus de l'image si nécessaire */  border: 1px solid #ccc;   /* Optionnel : pour visualiser le div */ transition : all 0.2s linear;}
.fixed-size-div a{display: block; padding: 10px; text-align: center;}
.fixed-size-div:hover > a img{width: calc(100% + 20px); height: calc(100% + 20px); transition : all 0.2s linear; margin-left: -10px;}
.fixed-size-div a img {  width: 100%;       /* L'image prend toute la largeur du div */  height: 100%;      /* L'image prend toute la hauteur du div */  object-fit: contain; /* Ajuste l'image sans la déformer */}