/* feuille de style (CSS) usage SCREEN. Auteur: Dominique Guebey. Version du 2026-04-06 */
* {margin:0; padding:0; border-width:0px;}
.print {display:none !important;}
#pr_pied {display:none;}
#ypied div.print {display:none;}
body {background-color:#e0e0e0; color:#000000; font-size:14px; letter-spacing:1px; word-spacing:2px;
font-family:Roboto, Verdana, Helvetica, "Times New Roman", Tahoma, sans-serif;}
main {max-width:924px; margin-left:auto; margin-right:auto; padding:16px 6px 48px 6px; background-color:#ffffff; color:#323232;}
h1, h2, h3 {margin:6px 0px 6px 0px;}
h1 {font-size:30px;}
h2 {font-size:24px;}
h3 {font-size:20px;}
h4 {font-size:18px; margin:10px 0px 6px 48px;}
h5 {font-size:16px; margin:6px 0px 4px 56px;}
h6 {font-size:14px; margin:4px 0px 0px 86px;}
a:link {color:#007878; text-decoration:none;}
a:visited {color:#aa0000;}
a:hover {color:#cc0000;}
a:active {outline:#cc0000 solid 1px;}
a:focus {outline:#cc0000 solid 1px;}
#menutab a {border:solid 2px #007878; border-radius:7px;}
#menutab a:link {color:#007878;}
#menutab a:visited {color:#007878;}
#menutab a:hover {color:#ffffff; background-color:#007878;}
#menutab a:focus {color:#007878; background-color:#ffffff;border:solid 2px #990000;}
#menutab a:active {color:#007878; background-color:#ffffff;}
h1, h2, h3, h4, h5, h6 {font-family:"Times New Roman";}
p {text-indent:24px; text-align:justify; margin:0px 92px 0px 92px;}
.poeme {margin:0px 72px 0px 102px;}
.pomar {margin-left:-102px;width:100px;float:left;}
p.navd {margin-right:8px;}
#casting {padding-left:92px;}
dl {margin:0px 92px 0px 92px; text-align:left;}
ol {margin:0px 92px 0px 92px; text-align:left;}
ul {margin:0px 92px 0px 92px; text-align:left;}
ol ol, ol ul, ul ul, ul ol {margin:0px 0px 0px 16px;}
ul p, ol p, dl p {margin:0px;}
pre {line-height:120%; background-color:#ffffff; margin:0px 0px 8px 72px;display:table;}
img {max-width:960px; height:auto;padding:6px;}
thead {background-color:#000000; color:#ffffff; border:1px solid #ffffff;}
thead a:link {color:#ffffff; text-decoration:none;}
thead a:visited {color:#bb4488; text-decoration:none;}
thead a:hover {text-decoration:underline;}
th, thead td {text-align:center;}
td {vertical-align:top; text-align:left; padding:4px;}
/* Pour probleme sortie (pre...) debordant sur petit ecran */
/*.result {display:table;background-color:#ffffff; padding-right:4px;}*/
.bando2 {width:100%; text-align:left; color:#007878; background-color:#e0e0e0; margin:0px 0px 0px 0px; padding:6px 0px 6px 0px;}
.bando2 a:link, .bando2 a:visited {color:#007878; text-decoration:none;}
.bando2 a:hover {color:#990055; text-decoration:none;}
.bando2 img { padding:0px;}
#menubar {width:100%; display:inline-block; color:#ffffff; background-color:#a0a0a0; font-size:80%;}
#menubar a {padding:3px 4px;}
#menubar a:link, #menubar a:visited {color:#ffffff; text-decoration:none;}
#menubar ul {display:inline-block;list-style-type:none; background-color:inherit;}
#menubar > ul {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;}
#menubar ul li {float:left; text-decoration:none; text-align:left; background-color:inherit;} /* Tout est dans le float-left !!! */
#menubar ul li a {padding:0px 4px 0px 4px;}
#menubar a:link, #menubar a:visited {background-color:inherit; color:#ffffff; text-decoration:none;} 
#menubar a:hover {background-color:#444444; text-decoration:none; padding:6px 4px 9px 4px;} 
/* display none pour occulter tant que le pointeur ne passe pas dessus */
#menubar li ul {display:none; margin-left:0px; list-style-type:none; width:250px; padding:3px 4px 4px 4px; color:#ffffff;}
#menubar li ul a {display:block; margin-left:-4px; margin-right:-4px;}
#menubar li:hover ul {display:block; position:absolute;}
#menubar li:hover ul li {float:none;}
#menubar ul li ul {margin-left:0px; margin-top:-3px;}
#menubar ul ul a:hover {margin-left:-4px; margin-right:-4px; padding:0px 0px 0px 4px;}
.slang {border:1px solid;display:block;float:left; margin:0px 4px 0px 4px; padding:0px 8px 0px 4px;}
#menubar li.slang, #menubar li.slang > ul {background-color:#007878; color:#ffffff;width:20px;}
#menubar li.slang li {margin:0px 0px 0px -4px;padding:0px 0px 0px 0px;}
.btitre {line-height:120%; font-family:Georgia, "Times New Roman", Serif; font-size:22px;}
.ctitre {margin-left:12px; line-height:120%; font-family:"Times New Roman", Serif; font-size:22px; font-style:italic; color:#000000; background-color:#e0e0e0;  display:inline-block;}
.bgblanc {background-color:#ffffff; color:#000000;}
.bgroug {background-color:#ff0000; color:#000000;}
.bgver {background-color:#66ff66; color:#000000;}
.bgjaun {background-color:#ffff66; color:#000000;}
.bgris {background-color:#dddddd; color:#000000;}
.bgalt_a {background-color:#ccdddd; color:#000000;}
.bgalt_b {background-color:#eeffff; color:#000000;}
dt.bgalt_a, dt.bgalt_b {margin-top:0px; padding-left:0px; padding-right:0px;}
/*dd ul.bgalt_a, dd ul.bgalt_b {margin-top:0px;}*/
dt.bgalt_a a:link, dt.bgalt_b a:link {display:block; padding-left:6px; padding-right:6px; text-decoration:none;}
dd ul.bgalt_a a:link, dd ul.bgalt_b a:link {display:block; padding-left:6px; padding-right:6px; text-decoration:none;}
dt.bgalt_a a:hover, dt.bgalt_b a:hover {background-color:#d800ff; color:#ffffff;}
dd ul.bgalt_a a:hover, dd ul.bgalt_b a:hover {background-color:#d800ff; color:#ffffff;}
/*dt.bgalt_a a:focus, dt.bgalt_b a:focus {outline:#990000 solid 1px;}
dd.bgalt_a a:focus, dd.bgalt_b a:focus {outline:#990000 solid 1px;}*/
thead td {background-color:#000000; border-color:#ffffff; border-style:solid; border-width:1px;}
.bgroug a:visited {color:#ffffff;}
.demo {background-color:#909090; color:#ffffff;}
.demo dt, .demo h1, .demo h2, .demo h3, .demo h4, .demo h5, .demo h6 {color:#66ff66;}
.demo a:link  {color:#66ff66; text-decoration:none;}
.demo a:hover {background-color:#ffffff; color:#33aa33; text-decoration:underline;}
.demo a:visited  {color:#66ff66; text-decoration:none;}
div.demo {margin-left:-8px; padding:8px 2px 8px 12px; list-style-type:none;}
ul.demo, ol.demo {margin:0px 0px 0px -6px; padding:8px 6px 8px 6px; list-style-type:none;}
h1.demo, h2.demo, h3.demo {margin:6px 0px 6px -6px; padding:10px 0px 12px 12px;}
h4.demo, h5.demo, h6.demo {margin:6px 0px 4px -6px; padding:10px 0px 12px 12px;}
#ynavig, #znavig {padding:0px 0px 0px 0px; font-size:80%;}
nav#ynavig, nav#znavig {max-width:900px; margin-left:auto; margin-right:auto;}
.case {display:block; float:left; margin:0px 0px 0px 8px; padding:0px 4px 0px 4px; border:1px solid;}
.case, {float:left; background-color:inherit;}
.bouton {background-color:#a0a0a0; color:#ffffff; font-weight:bold;}
.boutret {background-color:#ffffff; color:#007878; font-weight:bold;border-color:#007878;}
.bout2  {background-color:#303080;}
.bouton, div.boutret, div.bout2 {display:block; border-radius:7px; float:left; border:2px solid; 
  padding:0px; margin:0px 0px 0px 8px; }
.bouton a:link, .bouton a:visited, div.bout2 a:link, div.bout2 a:visited {padding:0px 4px 0px 4px; border-radius:7px; color:#ffffff;}
.bouton a:hover, div.bout2 a:hover {padding:0px 4px 0px 4px; display:block; background-color:#ff00ff; text-decoration:none; border-radius:7px;}
div.boutret a:link, div.boutret a:visited {padding:0px 4px 0px 4px; border-radius:7px; color:#007878;}
div.boutret a:hover {padding:0px 4px 0px 4px; display:block; background-color:#ff00ff; color:#ffffff; text-decoration:none; border-radius:7px;}
.encadr {background-color:#eeffff;border-top:1px solid #00dd00;border-bottom:1px solid #00dd00;}

/* 
td.noprint a:link  {display:block; text-decoration:none; padding:0px;}
td.noprint a:hover {display:block; text-decoration:none; color:#ffffff; background-color:#ff00ff; padding:0px;}
*/

#ypied {margin:0px 0px 8px 8px; float:right; background-color:#a0a0a0; color:#ffffff; border-radius:7px;}
#ypied div {display:block; float:left; border-style:solid; border-width:1px; 
  padding:0px 4px 0px 4px; margin:0px 8px 4px 8px; background-color:#000000; color:#ffffff;}
td.listing pre {background-color:#c8c8c8;}
.carblanc {color:#ffffff;}
.carbleu  {color:#4400bb;}
.carmagenta {color:#dd0088;}
.carouge  {color:#ff0000;}
.carvert  {color:#00aa00;}
.fonbleu  {color:#000000; background-color:#9999ff;}
#botbar {position:fixed; float:bottom; bottom:0; margin-bottom:50px; padding:0px 4px 0px 4px; border-style:double; border-width:4px; border-color:#ff0000;}
article {margin:6px 12px 6px 12px; padding:6px; border:1px solid #000000;}
article p {text-indent:18px; text-align:justify; margin:0px 12px 0px 24px;}
figure {padding:0px 6px 6px 6px;}
/* IMAGE DE GALERIE */
.image {background-color:#e0e0e0;}
.image .bando2 {display:none;}
.image > figure {background-color:#ffffff;}
div.gal_gri img {padding:0px;}

@media only screen and (max-width:1200px) {
pre {margin:8px 0px 0px 40px;}
/*footer:after { content: '1200'; color:#666666; float:right;}*/
}

@media only screen and (max-width:1024px) {
main {padding:4px 6px 48px 6px; max-width:850px}
div.demo, ul.demo, ol.demo {margin:0px 0px 0px -6px; padding:6px 6px 6px 6px;}
h1.demo, h2.demo, h3.demo {margin:6px 0px 6px -6px; padding:10px 0px 12px 12px;}
h4.demo, h5.demo, h6.demo {margin:6px 0px 4px -6px; padding:10px 0px 12px 12px;}
img {max-width:820px; height:auto;}
#ypied {margin:0px 0px 8px 8px; float:right;}
.gal_gri { margin-left:92px; margin-right:72px; }
pre {margin:8px 0px 0px 40px;}
article {margin:6px 6px 6px 6px; padding:6px;}
nav#ynavig, nav#znavig {max-width:850px; margin-left:auto; margin-right:auto;}
/*footer:after { content: '1024'; color:#666666; float:right;}*/
}

@media only screen and (max-width:900px) {
main {padding:4px 6px 32px 6px; max-width:750px}
img {max-width:720px; height:auto;}
pre {margin:8px 0px 0px 30px;}
nav#ynavig, nav#znavig {max-width:750px; margin-left:auto; margin-right:auto;}
.poeme {margin:0px 24px 0px 92px;}
.pomar {margin-left:-92px;width:88px;float:left;}
/*footer:after { content: '900'; color:#666666; float:right;}*/
}

@media only screen and (max-width:768px) {
main {padding:4px 6px 24px 6px; max-width:630px}
img {max-width:600px; height:auto;}
.btitre {margin-top:32px; margin-left:32px; font-size:1.3em;}
.ctitre {margin-left:12px; font-size:1.3em;}
.gal_gri { margin-left:92px; margin-right:72px; }
h1.demo, h2.demo, h3.demo, h4.demo, h5.demo, h6.demo {margin:6px 0px 6px -6px; padding:10px 0px 12px 12px;}
pre {margin:8px 0px 0px 20px;}
#ynavig .bouton, #znavig .bouton {margin-right:32px;}
article {margin:6px 4px 6px 4px; padding:6px;}
nav#ynavig, nav#znavig {max-width:600px; margin-left:auto; margin-right:auto;}
.poeme {margin:0px 16px 0px 72px;}
.pomar {margin-left:-70px;width:68px;float:left;}
/*footer:after { content: '768'; color:#666666; float:right;}*/
}

@media only screen and (max-width:640px) {
main {font-size:12px; max-width:480px; padding:4px 6px 16px 6px}
img {max-width:450px; height:auto;}
dl {margin:0px 48px 0px 48px;}
p {text-indent:24px; margin:0px 30px 6px 40px;}
#casting {padding-left:40px;}
pre {margin:8px 0px 0px 10px; white-space:pre-wrap;}
ol, ul {margin:0px 30px 9px 40px;}
.gal_gri { margin-left:72px; margin-right:60px; }
/*.poeme {margin: 4px 4px 4px 4px; margin: 0px 30px 6px 32px;}*/
.vers {padding-left: 4px;}
nav#ynavig, nav#znavig {max-width:480px}
.poeme {margin:0px 10px 0px 60px;}
.pomar {margin-left:-60px;width:58px;float:left;}
/*footer:after { content: '640'; color:#666666; float:right;}*/
}

@media only screen and (max-width:480px) {
/* *********** ATTENTION :VOIR AUSSI : ecranvert.css marche_calend.css charte.css ******* */
body {color:#ffffff; background-color:#000000; font-size:12px; font-family:Roboto, Verdana, Roboto, Bookman, sans} 
main {color:#ffffff; background-color:#000000; padding:4px 4px 4px 4px; max-width:480px}
.image {background-color:#000000;color:#ffffff;} /* IMAGE DE GALERIE */
.image > figure {background-color:#ffffff;color:#000000;}
.encadr {background-color:#225555;color:#ffffff;}
img {max-width:400px;}
.bando2 {width:100%; font-size:1em; padding:1px 2px 1px 2px; margin:0px 0px 0px 0px;}
.btitre {margin-top:32px; margin-left:32px; font-family:Georgia, "Times New Roman", Serif; font-size:1em;}
.ctitre {margin-left:12px; font-family:"Times New Roman", Serif; font-style:italic; font-size:1em; padding-left:4px; display:inline-block; text-align:center;}
div.demo, ul.demo, ol.demo, h1.demo, h2.demo, h3.demo, h4.demo, h5.demo, h6.demo, {margin: 0px 0px 0px 0px; padding: 0px 1px 0px 1px;}
h1.demo, h2.demo, h3.demo, h4.demo, h5.demo, h6.demo {background-color:#909090; color:#ffffff}
/*.result {background-color:#000000; color:#ffffff; padding-right:0px;}*/
#menutab a:link, #menutab a:visited {border:solid 2px #ffffff; color:#ffffff; background-color:#000000;}
#menutab a:hover {color:#000000; background-color:#ffffff;}
h1, h2, h3, h4, h5, h6 {margin:4px 0px 0px 0px; color:#ffffff;}
h1, h2, h3 {line-height:1.2; margin-bottom:0px;}
h1 {font-size:21px;}
h2 {font-size:19px;}
h3 {font-size:17px;}
h4 {font-size:15px;}
h5 {font-size:13px;}
h6 {font-size:12px;}
a:link {color:#00ff00;}
a:hover {color:#ff0000;}
a:visited {color:#ff6666;}
.bgver a {color:#000000;}
.demo a:visited {color:#ff7777; text-decoration:none;}
.bouton a:link, .bouton a:visited, div.bout2 a:link, div.bout2 a:visited {color:#aaffaa;}
dl {text-align:left;}
dt.bgalt_a a:link, dt.bgalt_b a:link {padding-top:12px;  padding-bottom:12px;}
.bgalt_a a:focus, .bgalt_a a:active, .bgalt_b a:focus, .bgalt_b a:active {outline:#ff0000 solid 1px;}
figure.navd, figure.navg {margin-left:auto; margin-right:auto;}
p {text-indent:12px; margin:4px 4px 4px 4px;}
#casting {padding-left:4px;}
pre {margin:4px 0px 0px 0px; background-color:#000000; color:#ffffff; white-space:pre-wrap;}
ol, ul {margin:0px 4px 0px 2px; padding-left:12px;}
ul ul, ol ul, ul ol, ol ol {padding-left:6px; margin-left:6px;}
li > p  {margin-left:0px; text-indent:6px;} 
dl {margin:0px 03px 6px 04px;}
table.listing pre {color:#000000; background-color:#c8c8c8;}
thead td, thead th {background-color:#ffffff; color:#000000; border-color:#000000; border-style:solid; border-width:1px;}
tbody td, tbody th {background-color:#000000; border-color:#ffffff; border-style:solid; border-width:1px;}
tfoot td, tfoot th {background-color:#000000; border-color:#ffffff; border-style:solid; border-width:1px;}
article {border-color:#ffffff;}
article p {padding:0px; margin:0px; text-indent:12px; text-align:left;}
dt.bgblanc {padding-left:6px; padding-right:06px; margin-top:0px}
dd {padding-left:7px; text-indent:4px; text-align:left;}
dd li {padding-left:2px; text-indent:0px;}
dd pre {padding-left:2px; text-indent:0px; color:#ffffff; background-color:#000000;}
.bgroug {background-color:#dd0000; color:#ffffff;}
.bgroug a {color:#ffffff;}
.bgroug a:link, .bgroug a:visited { color: #ffffff;}
.bgver {background-color:#66ff66; color:#000000;}
.bgver a { color: #ffffff;}
.bgver a:link, .bgver a:visited {color:#ffffff;}
.bgjaun {background-color:#ffff66; color:#000000;}
.bgjaun a {color:#ffffff;}
.bgjaun a:link, .bgjaun a:visited {color:#ffffff;}
.bgris {background-color:#dddddd; color:#000000;}
tr.bgris td  {background-color:#dddddd; color:#000000;}
.bgalt_a a, .bgalt_b a {color:#000000;}
#ynavig .bouton, #znavig .bouton, #ynavig .bout2, #znavig .bout2 {margin-right:27px;}
#ynavig .bouton a:link, #znavig .bouton a:link, #ynavig .bouton a:visited, #znavig .bouton a:visited {color:#ffffff;}
#ynavig div.bout2  a:link, #znavig div.bout2  a:link, #ynavig div.bout2  a:visited, #znavig div.bout2  a:visited {color:#ffffff;}
#ynavig .bout2 a, #znavig .bout2 a {font-size:larger;}
.gal_gri {margin-left:48px; margin-right:32px;}
#botbar {display:none}
.vers {padding-left: 1px;}
#casting {color: #ffff00;}
article {margin:3px; padding:4px;}
.poeme {color:#ffffff; background-color:#000000;margin:0px 8px 0px 27px;}
.pomar {margin-left:-27px;float:none;}
/*footer:after { content: '480'; color:#666666; float:right;}*/
}