.pageTitre{position:relative;height:100dvh;width:100%;margin:0;padding:0;box-sizing:border-box}.pageTitre button{position:absolute;right:1em;bottom:1em;z-index:1}#titreVideo{position:absolute;top:var(--tailleBase); right:0; bottom:0; left:0;overflow:hidden;z-index:0;background-color:var(--couleurPrincipale);mix-blend-mode:luminosity;filter:brightness(0.625)}#titreVideo video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); min-width:100%;min-height:100%;width:auto;height:auto;object-fit:cover;z-index:-1}#titreTexte{position:absolute;top:var(--tailleBase); right:0; bottom:0; left:0;display:flex;align-items:center;justify-content:center}#titreLogo{--tailleLogo:calc(var(--tailleBase) * 1.5);--couleurLogo:white;font-size:var(--tailleLogo);display:flex;align-items:center;justify-content:center;text-shadow:0 0 0.25rem black}#titreTitre{margin-bottom:-0.38em}#titreSlogan{margin-left:calc(var(--gap));padding-left:calc(var(--gap));border-left:var(--bordure);width:fit-content}@media screen and (max-width:767px) and (orientation:portrait){#titreLogo{flex-direction:column;align-items:flex-start}#titreTitre{margin-top:0.38em;margin-bottom:-0.19em}#titreSlogan{margin-left:unset;padding-left:unset;border-left:none;padding-top:0.5em;border-top:var(--bordure)}}@media screen and (min-width:1024px){#titreLogo{--tailleLogo:calc(var(--tailleBase) * 1.75)}}@media screen and (min-width:1280px){#titreLogo{--tailleLogo:calc(var(--tailleBase) * 2)}}#atelierBanniere{display:flex;flex-direction:column;width:100%;aspect-ratio:4 / 5;background-color:var(--couleurPrincipale)}@media screen and (orientation:landscape){#atelierBanniere{flex-direction:row;aspect-ratio:12 / 3}}.banniereImage{position:relative;height:calc(100% / 3);width:100%;font-size:0.9em;transition:height var(--transitionMoyenne),width var(--transitionMoyenne)}#atelierBanniere:hover .banniereImage{height:20%}#atelierBanniere:hover .banniereImage:hover{height:60%}@media screen and (orientation:landscape){.banniereImage{height:100%;width:calc(100% / 3)}#atelierBanniere:hover .banniereImage{height:100%;width:30%}#atelierBanniere:hover .banniereImage:hover{height:100%;width:40%}}.banniereImage::before{content:'';display:block;position:absolute;top:0; right:0; bottom:0; left:0;background-color:var(--couleurPrincipale);opacity:0.25;transition:opacity var(--transitionMoyenne)}#atelierBanniere:hover .banniereImage::before{opacity:0.75}#atelierBanniere:hover .banniereImage:hover::before{opacity:0}.banniereLegende{position:absolute;bottom:1em;width:100%;font-style:italic;text-align:center;color:transparent;transition:color var(--transitionMoyenne)}.banniereImage:hover .banniereLegende{color:white}.banniereImage picture,.banniereImage img{display:block;height:100%;width:100%;border:none;object-fit:cover}
/* Design, intégration et optimisation : Julien Bret | https://julienbret.com/ */