@font-face {font-family:WebFontTit; src:url('../fonts/classiq_regularchoix.woff'); font-display:swap}
@font-face {font-family:WebFontTxt; src:url('../fonts/classiq_regular.woff'); font-display:swap}

a:link, a:visited, a:hover, a:active {color:#101010; text-decoration-color:#675c90}
table{border-collapse:collapse; caption-side:bottom; font:13px Verdana, Geneva}
td {vertical-align:bottom}
td img {width:100%; height:inherit}
caption {text-align:left; padding-right:10px}
body {font:1.3em WebFontTxt; color:#101010; background:#f4edff}
p {text-align:justify}
p:before {content:""; width:220px; display:block; overflow:hidden}
sup {line-height:60%}
ul {display:table}
h6 {all:unset; text-decoration:underline; text-decoration-color:#675c90}

.txTit1 {margin:30px 0; font:.7em WebFontTit}
.txTit2 {margin:10px 0; text-align:left; font:.8em WebFontTit}
.txCtn {display:table; margin-bottom:30px; padding:10px; text-align:justify; font-size:.9em; border:1px solid #675c90; background:#fff}
.avBx {margin:25px 0; padding:10px 0; text-align:center; border-top:1px solid #675c90; border-bottom:1px solid #675c90; background:#fff}
.avTx {display:inline-table; vertical-align:top; width:0; padding:20px 1.5%; text-align:left; font:13px Verdana, Geneva}
.pitBox {display:table; min-width:336px; margin:30px 0 50px 0; padding-bottom:10px; border:1px solid #675c90; background:#fff}
.pitNom {text-align:center; font-size:1.2em; font-weight:bold; line-height:1.6em; letter-spacing:1px; color:#fff; background:#675c90}
.pitId {text-align:center; font-size:1em; line-height:1.5em; background:#cfc5df}
.pitLst {padding:3px 10px 0 10px; font-size:.9em; font-style:italic}
.pitLnk {display:block; padding:12px 10px; font:1.15em WebFontTit}
.pitDate {padding:0 10px 3px 10px; text-align:right; font-size:.9em}
.pitImg {float:left; margin:5px 10px 0 10px}
.pitTxt {padding:0 10px; line-height:1.2em}
.imgCntr {margin:10px auto 25px auto; max-width:calc(100% - 20px)}
.imgLeft {display:block; float:left; margin:10px 0 20px 0; padding-right:27px}
.imgRight {display:block; float:right; margin:10px 15px 20px auto; padding-left:20px}
.credit a, .credit {width:0; height:0; white-space:nowrap; text-indent:2px; text-decoration:none; transform:rotate(-90deg)}
.whitepaper {margin:0 auto; padding:30px 10px 10px 10px; border:1px solid #675c90; background:#fff}
.sources {clear:both; margin-top:15px; margin-bottom:15px; font:.95em WebFontTit; line-height:1.2em}
.clr {clear:both}
.ctr {text-align:center}

[id^="bt"] {width:40px; height:40px; background-image:url(../img/btns/btns-sprite.png); cursor:pointer}
#btTop {background-position:-280px 0; float:right; margin-left:12px; visibility:hidden}
#btNav {background-position:-320px 0; float:right; margin-left:12px}
#btMail {background-position:-240px 0}
#btTel {background-position:-440px 0}
#btMap {background-position:-480px 0; text-decoration:underline; text-decoration-color:#675c90}
#btDumb {background-position:-40px 0; cursor:none}
#btFacebook {background-position:-80px 0; float:right}
#btX {background-position:-120px 0; float:right; margin-left:15px}
#btPinterest {background-position:-160px 0; float:right; margin-left:15px}
:hover[id^="bt"] {opacity:.4}
:hover#btNav {opacity:1; transition:.3s}

#divbody {animation:fadein 1.5s}
@keyframes fadein {from {opacity:0} to {opacity:1}}

#head1 {position:fixed; top:0; left:0; right:0; height:40px; padding-top:4px; z-index:2; background:#f4edff}
#name {display:inline-block; margin-left:56px; font:bold 1.6em WebFontTit; line-height:40px}
#head2 {height:76px; margin-top:48px; background:#f4edff}
#logo {position:relative; float:left; width:40px; height:40px; margin:-44px 0 4px -4px; z-index:3}
#mission {padding-top:8px; text-align:center; font:1em WebFontTit}
#slogan {text-align:center}

#menu {display:none; position:fixed; top:44px; right:0; text-indent:10px; font:1.1em WebFontTit; z-index:3}
a.mCh, .mCh {display:block; width:250px; padding:10px; color:#fff; text-decoration:none; border-bottom:1px solid #f4edff; background:#786caa}
:hover.mCh, .slt {background:#cfc5df}
#lang {text-align:right; font-size:.8em; font-weight:normal}
#menuzine {clear:both; display:grid; grid-row-gap:5px; margin:30px 0; font:1.1em WebFontTit}

#Show {position:relative; width:360px; height:240px; margin:0 auto 20px auto; overflow:hidden; z-index:1}
[id^="slide"] {position:relative; width:100%; height:100%; opacity:0; animation:z 24s linear infinite 0s}
#slide1 {background:url(../img/slideshow/vitrail-classique.webp) no-repeat center/cover; opacity:1}
#slide2 {background:url(../img/slideshow/vitrail_0008_1024x683.webp) no-repeat center/cover; top:-240px; animation-delay:5s}
#slide3 {background:url(../img/slideshow/imposte-demi-lune.webp) no-repeat center/cover; top:-480px; animation-delay:10s}
#slide4 {background:url(../img/slideshow/art-nouveau_1024x683.webp) no-repeat center/cover; top:-720px; animation-delay:15s}
#slide5 {background:url(../img/slideshow/fishers-of-men.webp) no-repeat center/cover; top:-960px; animation-delay:20s}
@keyframes z {0%{opacity:0;transform:scale(1)}5%{opacity:1}25%{opacity:1}30%{opacity:0;transform:scale(1.1)}100%{opacity:0;transform:scale(1)}}
[id^="hImg"] {width:85px; height:85px; float:left; margin-right:10px; background:url(../img/gros-plan-vitraux.jpg) 0/400% 100%}
#hImg-fenetre {background-position:0 0}
#hImg-cadeau {background-position:-85px 0}
#hImg-lampe {background-position:-170px 0}
#hImg-lanterne {background-position:-255px 0}
#houzzwdgt {display:none}
.hzroot {text-align:center; font-size:12px; margin:0; padding:0; border:0}
.hzFrm {margin:0; padding:0; border:0; margin-bottom:3px}
.hzWidget {width:384px; height:314px; border:0; overflow:clip}
.gallery {display:grid; grid-template-columns:repeat(2,1fr); grid-gap:20px; max-width:860px; margin:40px auto 60px auto; overflow:hidden}
.gallery img {width:100%; height:150px; padding:10px; border:1px solid #675c90; background:#fff; object-fit:contain; position:relative; box-sizing:border-box}
.gallery img:hover {z-index:9; transform:scale(1.1); opacity:.4; transition:transform ease .5s}
.gallery img.full {position:fixed; top:0; left:0; z-index:10; width:100vw; height:100vh; object-fit:scale-down; background:rgba(0,0,0,.8)}
.gallery img.full:hover {z-index:10; transform:none; opacity:1}
a.prev, a.next {display:block; margin:25px 0; font:.9em WebFontTit; line-height:1.1em; text-decoration:none}
#imgPrev, #imgNext {float:left; margin:5px 10px 10px 0}

footer {clear:both; margin-top:30px; padding:4px; font:1.1em WebFontTit; background:#cfc5df}
#footlogo {width:40px; height:40px; float:left; margin:0 10px 50px 0}
.contact {margin:15px 0; text-indent:50px; white-space:nowrap; line-height:40px; font-size:.9em}
#copyright {clear:both; padding-top:15px; text-align:right; font-size:.75em}

#mapBox {position:fixed; top:0; left:0; width:100%; height:100%; visibility:hidden; z-index:4}
#mapWindow {position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; border:3px double #aaa; background:rgba(0,0,0,.9)}
#mapClose {position:absolute; z-index:1; right:0; margin:5px; padding:2px 11px; cursor:pointer; border:1px solid #aaa; background:#fff}
:hover#mapClose {color:#fff; background:rgba(232,17,35,.9)}
#map {position:inherit; width:100%; height:100%; z-index:0}
#mapContact {clear:both; width:99%; height:400px; min-width:280px; margin:0 auto 20px auto; border:1px solid #ccc}

@media print {
html {transform:scale(.95)}
body, #head1, #head2, footer {background:#fff}
#head1 {position:relative}
#head2 {margin-top:0}
header {border-bottom:1px solid #ccc}
footer {border-top:1px solid #ccc}
#menu, #menuzine, .mCh, a.prev, a.next, #btNav, #btTop, #btMap, #imgPrev, #imgNext {display:none}
}

@media screen and (min-width:568px) {
.txCtn {font-size:.95em}
#Show {width:534px; height:356px} #slide2 {top:-356px} #slide3 {top:-712px} #slide4 {top:-1068px} #slide5 {top:-1424px}
#houzzwdgt {display:block; clear:both; width:384px; margin:0 auto; overflow:clip}
.gallery {grid-template-columns:repeat(3,1fr)}
.whitepaper {width:90%}
footer {padding:8px}
#mapWindow {width:90%; height:90%; margin:auto}
}

@media screen and (min-width:768px) {
#head1 {padding:8px 8px 0 8px}
#name {margin-left:112px; letter-spacing:1px}
#head2 {height:80px}
#logo {width:96px; height:96px; margin:-40px 16px 10px 0}
#mission {text-align:left}
#slogan {margin-top:8px; text-align:left}
#menu {top:38px; right:8px; margin-top:10px}
#menuzine {grid-auto-flow:column; grid-template:repeat(5,auto)/290px; grid-row-gap:20px}
.pitBox {display:inline-table; width:46%; margin:20px 0 20px 2.3%}
#Show {width:675px; height:450px} #slide2 {top:-450px} #slide3 {top:-900px} #slide4 {top:-1350px} #slide5 {top:-1800px}
#houzzwdgt {float:right; margin-left:15px}
.gallery {grid-template-columns:repeat(4,1fr)}
.prev {clear:both; float:left; width:49%; margin:25px 0}
.next {float:right; width:49%; margin:25px 0; text-align:right}
#imgPrev {float:left; margin:5px 10px 10px 0}
#imgNext {float:right; margin:5px 0 10px 10px}
}

@media screen and (min-width:1024px) {
#menuzine {grid-template:repeat(4,auto)/repeat(3,290px)}
[id^="hImg"] {width:170px; height:170px}
#hImg-fenetre {background-position:0 0}
#hImg-cadeau {background-position:-170px 0}
#hImg-lampe {background-position:-340px 0}
#hImg-lanterne {background-position:-510px 0}
.txTit2 {margin:30px 0}
.txCtn {font-size:1em; line-height:1.2em}
.pitBox {width:30%; min-width:0; margin-top:60px}
.pitTxt {min-height:180px}
#Show {width:768px; height:512px} #slide2 {top:-512px} #slide3 {top:-1024px} #slide4 {top:-1536px} #slide5 {top:-2048px}
.gallery {grid-template-columns:repeat(4,200px)}
#btX {margin-top:-100px}
#btPinterest {margin-top:-100px; margin-right:60px}
#btFacebook {margin-top:-100px; margin-right:120px}
#copyright {clear:none; margin-top:-60px}
#mapContact {height:550px}

@media screen and (min-width:1244px) {
body {background:url(../img/btns/paisley.jpg) fixed}
#divbody {width:1200px; margin:0 auto; overflow:hidden; border-left:10px solid #f4edff; border-right:10px solid #f4edff; background:#f4edff}
#head1{left:calc(50% - 608px); right:calc(50% - 608px)}
#menu {right:calc(50% - 600px)}
#Show {width:840px; height:560px} #slide2 {top:-560px} #slide3 {top:-1120px} #slide4 {top:-1680px} #slide5 {top:-2240px}
}