/* 

fri25oct24
wed14dec22
sat02apr22 




690		pano






*/



h2#first{margin-top:49%}/*69% */

header{position:fixed;top:0px;left:0px}/* § */
footer{position:fixed;bottom:0px;left:0px;}/* local def */

/* no
footer,
footer ul{min-width:100%}
footer ul li{width:30%}
footer ul li a{width:99%}

footer ul,
footer ul li,
footer ul li a{float:left}
 */




	/* defaults - margin-padding = Ø */
marquee,
hr,
span,div,
html,body,
main,header,footer,
h1,h2,h3,
article,p,small,
:target,
time,
blockquote,
video,
ul,li,a,
details,summary,
img,figure,figcaption{margin:0px;padding:0px}

									main{margin-top:0em}/* § 0.6em */

	/* float left */
marquee,/* ? */
span,div,
hr,
	div h1,
h1,
h2,h3,h4,h5,
video,
html,body,main,

article,p,
ul,li,

time,
blockquote,
details,summary,
figure,figcaption{float:left}



img{float:left}/* ? */
img{width:100%;}/*		§	?	*/











	/* 		80					TOP 1st fixed img- last */
#erst{position:fixed;}
#erst{top:2em;left:0px}
#erst{z-index:-1}









	/* 	thu03oct24			K O											 */

body{display:flx;}

body img#erst{border:4px solid red}

	/* 		???			
img#erst{justify-content:center}
	body img#erst{justify-content:space-around}
		body img#erst{align-items:center;}
					 */






	/* display:block */
span,div,
	div h1,
:target
		blockquote,
span blockquote,
	hr,/* ? */
video,
/* ? main,li,small*/
html,body,header,
footer,
footer ul,
time,
h2,h3,h4,h5,
article,p,
ul,
	li a,/* 4 Links */
details,summary,
img,figure,figcaption{display:block;}



	/* height */
div{height:auto;}/* 100%min-ko */
div{position:sttic;}

html,body{height:100%;}


	/* deco hr 
	hr{width:94%;height:0.4em;}
	hr{margin:2em 0px;margin-left:1em}
*/

	/* widths 					div,		*/
marquee,
span,
div,
	div h1,
h3,
video,
blockquote,
html,body,main,header,footer,
article,
p,
h1,h2,
time,
/*		ul, li,		?	 */
figure,figcaption{width:100%;}







/*			my IDs 			
*/


/* ø
img#last{brder-top:2em double grey}
img#last{position:fixd;bottom:0px}
img#last{z-index:-2}
 */

img#escher{max-width:320px;margin:1%;}/* yes98% */
img#escher{min-width:94%;}/* -/- */
img#escher{brder:4px solid brown}/*  */

/* non-vo */
img#non-vo{max-width:320px;margin:1%;}/* yes */
img#non-vo{min-width:98%;}
img#non-vo{border:4px solid brown}/* yes */


/* ? */
figure{max-width:;margin:}/* 80% - 1em 8% */



ul{max-width:80%;}
	ul{width:320px;margin:1em 19%}/* 44%--§ */

	details ul{width:320px;max-width:80%;margin:1em 0%}

ul{list-style:none;}

li{max-width:90%;}/* ko */




footer{min-width:100%;}

blockquote{max-width:92%;}



article{overflow-x:scroll;}

details{width:90%;min-width:/*90%-min-width:360px;=NO! */;}
summary{max-width:92%;}/* § */

main p{max-width:94%;}
span p{max-width:94%;}/* #lex */

video{width:}/* 320px - no ! max-*/



	/* margin-padding 					100%				*/

main{margin:0px 0px;padding:0.6em 0px}/* § */

	li{margin:0.2em 0px;padding:0em 0px}


	figure *{padding:0.6em 0px}
	figure figcaption{width:100%;padding:0em 0px}



	h2{margin:0px;padding:0.6em 0em}/* intrinsic */
	h2{padding-top:0.2em;padding-bottom:0.6em}



blockquote{margin:0.2em 0em;padding:1em 1em}
	p{mrgin:0em 1em;pdding:0em 1em}

blockquote{margin:0.2em 0em;padding:1em 1em}

details{margin:0.2em 0px;}
details p{margin:0.2em 0.3em;}
	summary{margin:0.2em 0px;}/* ko */

details{padding:1em}
details{padding-right:}/* ko */
details p{padding:0em}
details p{padding-right:}/* ko */
	summary{padding:1em}



/* #lex */
details img,
details figcaption{margin:0em 0px;padding:0em}





	/* text-align - center //////// left */


address strong,
	hr,		/* no, ko */
h2 code,
h3,
figcaption,
li a,/* ko */
h1,h2{text-align:center;}

article figcaption,
details span figcaption{text-align:left;}/* #lex */
/* small, */



	/* 			a 			*/
	a{text-decoration:none}
	a{width:;padding:}/* 4px 8px100%*/
	a{line-height:1.4;}

figcaption a{width:;padding:0px 6px}/* 4px 8px100%*/

a{brder:2px solid navy}
a{bckground:snow;color:nvy}

	li a{border:2px solid MidnightBlue}/* § */
li a{bckground:snow;color:nvy}

figcaption a{border:1px solid RoyalBlue}/* relevés */
figcaption a{background:snow;color:nvy}

/* border-radius */
li{-webkit-border-radius:9px;
-moz-border-radius: 6px;}

a{-webkit-border-radius:9px;
-moz-border-radius: 6px;}


li a{-webkit-border-radius:9px;
-moz-border-radius:6px;}

figcaption a{
-webkit-border-radius:9px;
-moz-border-radius:6px;}


	/* hover */
/* sat17dec22 */
	a:link:hover{background:cyn;}


	/* hover
a:link:hover{outlin: dotted rd;
font-weight: 900;
fnt-variant: small-caps;
font-style: obliqu;
fnt-stretch:;
fnt-family: Courier, "Lucida Console", monospace;
ltter-spacing:0.1em} */

/* p/ Lois */
mark:hover{font-size:lrger;}/* § */

li:hover{bckground:lime;}
li a:hover{background:ble;color:navy}


	figure a:link img:hover{outline:2px solid blue;}/* yes */



/* Labo*/
	/* external links */
a[href^="http:/"] {
padding-right:;/* 13px */
background:url('external.gif') no-repeat center right;
background:AliceBlue;/* lightblueLavender-aqua */
brder:2px solid blue;}/*  */

	/* external links */
a[href^="https:/"] {
padding-right:;/* 13px */
background:url('external.gif') no-repeat center right;
background:LightCyan;/* Plum */
brder:2px solid navy;}

/* pdf */
a[href$=".pdf"] {
padding-right:;/* 18px */
background:url('acrobat.png') no-repeat center right;
bckground:khaki;
brder:2px solid blue;}

/* emails */
a[href^="mailto:"] {
padding-right:;/* 20px */
background:url('email.png') no-repeat center right;
background:pink;
border:2px solid black;}



	/* 			C O L O R S
*/
hr{bckground:snow;}/*no */

header h1{background:#333333;color:snow;}/* #333333 */
h2{background:white;color:black;}

main p{background:snow;color:black}
	small{color:maron}

ul{background:nvy;color:snow;}
	ul li{background:lightblue;color:red}
	li{background:cyan;color:pink}/* § */

	figure{background:What;}/* Ivory */
figcaption{background:Ivory;color:brown}/* § */

/* #lex */
#lex figcaption{bckground:AntiqueWhite;}/* Linen */
	#lex figure{background:Linen;}/* Wheat */

html{background:#333333}
body{background:}/* snow */



article{background:MintCrem}

footer{background:#333333;color:snow}

blockquote{background:Ivory;color:snw}

video{background:silvr;}
#video{background:PaleGoldenRod;color:snw}
video{brder:6px solid indianred}

span{background:}/* yellow */



div{bckground:Wheat;clor:navy}
div:nth-child(even){bckground:PaleGoldenRod;color:rd}/* fri13jan23 */



details{background:GhostWhite;}
details span{bckground:snow;}/* sun29jan23 */
details span p{bckground:snow;}/* sun29jan23 */


#lex{background:}/* tan § */
#lex details{background:GhostWhite}

details summary span{bckground:Magenta}

	details{background:LightSeaGreen}/* § */
main details{bckground:Coral}


details #lex{bckground:snw;clor:navy}/* § */
	summary{background:BlanchedAlmond;}/* GoldenRod */



	/* border-top */
#video{border-top:11px dotted indianred}
#video{border-bottom:11px dotted indianred}

	details{border-top:}/*11px solid snow*/
	summary{border-top:6px solid navy}/*darkred*/
	summary{border-bottom:0px solid navy}

#lex{border-top:}/*9px solid navy*/
#lex{brder-bottom:9px dashed grey}

h2{boder-top:0px double maroon}



details:first-child{background:Plum;color:Blue}/*ko*/
details{bckground:mediumpurple;color:snw}

details:last-child{background:aqa;color:navy}
details{bckground:mediumpurple;color:snw}/**/


 /* ►
summary:after {content: "\25ba"; 
color:navy;
bckground:gold;
brder:solid thin;
padding-left:1px;
display:inline;
margin-left: 0.2em;
vertical-align: %;}
 */


	/* Links  block*/
ul{text-align:center;}
ul li{text-align:left;}

ul{margin:em;padding:em}
ul li{margin:0.5em;padding:0.5em}
ul li{padding-top:0.5em}



	/*			 f o n t s 			*/
body{font-size:larger}
body{font-family:sans-serif,"Lucida Console",monospace;}
article{font-family:serif,"garamond",;}

h2{font-size:xx-large}
	h3{font-size:medium}/* fri07jan23 */

figure{font-size:larger}
figcaption{font-size:lrger}
figure a{font-size:smaller}


main p{font-size:medium}

details{font-size:larger;color:blue;}
summary{font-size:x-large;color:darkblue;}
details figcaption{font-size:medium;color:MediumBlue;}/* #lex */

span figure figcaption{font-size:medium}
span p{font-size:smaller}


figcaption small{font-family:monospace}
figcaption small{font-size:larger}

ul{font-size:x-large}
ul li{font-size:medium}

#code{font-size:larger}
#code{font-family:Courier,"Lucida Console",monospace;}

p small{line-height:}/* 90%ko */



html{brder-top: 11em dashed red}/* yes */
html{mrgin-top: em}/* 44ko */

body{order-top: 4em dashed green}/* yes */
body{margin-top: em}/* 44ko */



	/* 
*/
	/* 
*/
	/* === mQ_Breaking point! ! 
*/
		@media only screen and (min-width:480px) and (max-width:768px){




	}	/* === END Breaking point mQ _ === */




	/* 		§		=== mQ_Breaking point! ! 
*/
		@media only screen and (min-width:769px) and (max-width:1024px)	{

h2#first{margin-top:62%}
main:frst-of-type{margin-top:	}	/*		62%		72%-59em			*/

	/*widths*/
/* § */
figure{min-width:27%;max-width:200px;}/* 	§	?	 */
figure{margin:1em 1%;padding:0.7em}
figure{margin-top:0.4em;padding-top:0.7em}


	/* #lex */
	details{width:44%;width:;}/* § */

details{width:27%;max-width:460px;}/* § */

details summary{min-width:;max-width:;}/* 70% */
details figure{margin:1em 0%;padding:0em}



/* vd logo 84%*/
details figure{min-wdth:100%;max-width:;}/* min-width:100%*/
details figure{margin:1em 0%;padding:0em}


	/*Links bloc*/
ul{width:340px;max-width:380px;}/* min-27% 480px*/
details ul{width:;max-width:;}/* 340px	380px*/


details,
ul{margin:0.5em;padding:0.5em}
ul li{margin:0.5em;padding:0.5em}

	details span{min-width:100%}/* 200%§ */
details #lex{padding:1em}
details #lex{padding-right:em}/* ko */

details summary span{mx-width:90%}/* ko */
details summary{padding:0.4em 1em}



#lex{max-height:}/* 50em§ */
#lex{font-size:smaller}

¨
/* 
span#lex{widows:0;
text-align:left;
-moz-column-count:3;
-moz-column-gap:9px;
-moz-column-rule:1px solid grey;

-webkit-column-count:3;
-webkit-column-gap:9px;
-webkit-column-rule:1px solid #c4c8cc;}
 */


/* ko
article div{widows:0;}

article div{column-fill:balance;}

div{break-after:column;}

article div{column-span:none;bckground:silver}

div{height:auto}
 */
/* 50em */



/* 2 b0tt0m img */
	/* class last img
	img.last{width:50%} */			/* § */


/* -/- */
img#escher{min-width:320px;max-width:30%;}/* § */


/* or inline-flex
main{display:flex;}
main{justify-content:center}
 */

/* flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; */

	/* Labo flex
 ko 
#escher{display:flex;}
#escher{flex-grow:1;}
#escher{justify-content:center}
#escher{align-content:center}
 */


blockquote{width:27%;max-width:320px;}
blockquote{margin:0.7em;padding:0.7em}



/* details + img{max-width:30%}escher */



/* myClasses */
#variantes figure{width:22%;max-width:;}/*18% - 480px */

#variantes figure:first-child{min-width:32%;max-width:;}/* -ko */
#variantes figure:last-child{min-width:32%;max-width:;}/* -ko */
#variantes figure:last-child{clear:al}/* ko */

#variantes figure:first-child{border:4px solid aqu}/* ko */
#variantes figure:last-child(even){border:4px solid aqu}

/* 
#video{width:27%;max-width:420px;}
video{max-width:480px} */


	/*			 fo n t s 			*/
article figcaption{font-size:smaller}
article figcaption{color:red}

	}

	/* === END Breaking point mQ _ === */



	/* === mQ_Breaking point! ! 
*/
		@media only screen and (min-width:1025px){



	}

	/* === END Breaking point mQ _ === */










	/* 		my CLASS 				pano
*/
/* sat31dec22 */

	/* 4 fotos cement bois*/
figure.pano{overflow-x:scroll;}/* § */

	.pano{min-width:96%;max-width:;}/*	§	*/
	.pano{width:%;}/* ko max- § */
	.pano{margin:0px 0em;}/* 110px 3em */
	.pano{padding:0px 0px;}/* 100px. 0px; */

	.pano img{margin:0px}/* 10.2em 0px;ko */
	.pano img{padding:0px;}
	.pano img{width:200%;}/* § 			fri25oct24				*/		

.pano{margin-bottom:1em;}/* 3em */

figure.pano{min-height:;}/* 	?		512px		88% */
figure.pano img{height:}/*		92%		 § */

figure.pano img{bckground:rd;color:}
figure.pano{background:midnightblue;color:}



/* § */
.pano{border-top:0.3em dotted snow}
.pano img{border-top:0.3em dotted snow}/*  */

.photos div .pano img{border-top:0.3em dotted snow}/* yes */
.photos div .pano img{border-bottom:0.3em dotted snow}

/* § 	lateral		*/
.photos div .pano img{border-left: 0.3em solid lime}/* 20%. */
.photos div .pano img{border-right:0.3em solid red}/* ko */






	/*.tue21dec22 */
/* 		Using_CSS_counters


https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters

Set a counter named 'section', and its initial value is 0. 

body{counter-reset: section; }

*/
body{counter-reset:figure;}



	/* Increment the value of section counter by 1 */

/*
h3::before {
  counter-increment: section; 


#cement figure::after{counter-increment:figure; 
float:right;
font-size:smaller;
*/

/* Display the word 'Section ', the value of section counter, and a colon before the content
of each h3 

  content: "; " counter(section) ": "; }

*/

content: "photo " counter(figure) ""; }