@charset "utf-8";
body {position: relative; max-width: 1024px; background-color: white; font-size: 100%; margin: 0 auto 0 auto;}
body:lang(zh), button:lang(zh), .zh {font-family: STKaiti, KaiTi, FangSong, STSong, Dengxian, sans-serif, Microsoft YaHei, SimHei, SimSun}
body:lang(fr), button:lang(fr), .fr {font-family: Calibri, Arial, sans-serif}
li.fr {color: blue;}
li.zh {color: red;}

ul {width: 100%; margin: 0; padding: 0; height: 100%;}
ul > li {list-style-type: none; text-align: center; font-size: 120%; width: 100%;}
ul > li.sous > ul > li {font-size: 100%;}
ul > li a {display: block; width: 100%;}
ul > li.choisi {background-color: #aaaaaa; color: blue;}
ul figure img {vertical-align: middle;}
li.sous {cursor: pointer;}
li.menu, li.espace {position: relative;}
li.menu > ul.sub, li.espace > ul.sub {position: absolute; top: 100%;}
li.menu > ul.sub {width: 8.5em; left: 0;}
li.menu > ul.sub > .second {display: none;}
li.menu > ul.sub > li {font-size: 100%;}
li.espace > ul.sub {width: 11em; right: 8px;}
li.espace > ul.sub > li {font-size: 95%; text-align: left; padding-left: 8px;}
li.espace > ul.sub > li.cmdtemo, li.espace > ul.sub > li.cptdcnx{padding-left: 0; padding-right: 8px;}
li.espace > ul.sub > li.cmdtemo {display: flex; flex-direction: row; justify-content: flex-start;}
li.espace > ul.sub > li.cmdtemo > .temoig {width: 18%; font-size: 125%;}
.bouton {cursor: pointer;}
#wsmenu li.temoig, span.temoig {color: red;}
span.temoig {text-align: center;}
.notif {width: 8px; height: 8px; border-radius: 50%; background: red;}
li.menu > label, li.espace > ul.sub > li.cpteuro > label {position: relative;}
li.espace > ul.sub > li.cpteuro > label > .notif {position: absolute; top: 0; left: 105%;}
li.menu > label > .notif {position: absolute; top: -2px; left: calc(100% - 8px / 2); animation: 1s 2 notif 2s;}
@keyframes notif {
    60% {top: -2px; left: calc(-8px / 2)}
    80% {top: calc(100% - 8px / 2); left: calc(-8px / 2)}
    90% {top: calc(100% - 8px / 2); left: left: calc(100% - 8px / 2)}
    100% {top: -2px;}}
li.evt {position: relative;}
li.evt > .notif {position: absolute; top: 8px; left: calc(100% - 8px);}
.wsmenu > ul {display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.wsmenu > .glo {position: fixed; z-index: 11; height: 80px; top: 0; max-width: 1024px; background: #ffffff;}
.wsmenu > .glo > .entete {width: 500%;}
.wsmenu > .glo > .entete > figure {width: 96px; margin: 8px 8px 8px 16px;}
.wsmenu > .cat {position: fixed; left: auto; top: 80px; height: 32px; max-width: 1022px; z-index: 2; background: #ffffff; border: 1px solid #dddddd;
	box-shadow: 2px 2px 4px 0 #dddddd; border-radius: 0;}
li.menu {background: darkblue; padding: 0 6px 0 6px; width: max-content; box-shadow: 2px 2px 4px 0 #aaaaaa;}
li.menu > label {font-size: 1.25em; color: white;}
.wsmenu > ul > li {height: 32px; line-height: 32px;}
.wsmenu > ul > li.cmdmsg {line-height: normal;}
.wsmenu > ul > li > ul > li, .wsmenu li.sous > ul.sub > li {height: 40px; line-height: 40px; border: 1px solid white}
.wsmenu > ul > li > ul > li {background: #eeeeee; padding: 4px 0 4px 0;}
.wsmenu > ul > li > ul > li:hover {background: #aaaaaa; color: white;}
.wsmenu > ul > li:not(.menu):not(.choisi):hover, .wsmenu ul > li:not(.menu):active {background: #eeeeee;}

li > ul figure img, li > figure > img {width: 32px;}
.partage > ul > figure > img, .cmdcpt > figure > img {width: 24px;}
.espace > ul > figure > img {width: 28px;}
.wsmenu label {margin: 0;}
.cmdrech > label {font-size: 100%;}
.cmdmsg > label {font-size: 120%;}
.cmdmsg {cursor: pointer; color: lightgreen;}

input::placeholder {color: #666666;}
.temo > #wsdon > .lst > .fiche {width: 45%; height: 408px; border: 1px solid #aaaaaa; box-shadow: 2px 2px 4px 0 #dddddd; justify-content: space-between;}
.temo > #wsdon > .lst > .fiche > * {width: 100%;}
.temo > #wsdon > .lst > .fiche > h2 {text-align: center; color: darkblue; text-shadow: none; line-height: 100%; margin: 0.6em 0 0.4em 0;}
.temo > #wsdon > .lst > .fiche > .fnct {text-align: right; color: blue; margin-right: 1em;}
.temo > #wsdon > .lst > .fiche > .site {text-align: right; height: 1.5em; margin-right: 1em; color: green;}
.temo > #wsdon > .lst > .fiche > h3 {text-align: center; margin: 0.4em 0 0 0; color: red; font-size: 125%;}
.temo > #wsdon > .lst > .fiche > .txt {height: 66.7%; overflow-y: auto; padding: 0 8px 0 8px;}
.temo > #wsdon > .lst > .fiche > .txt > p {line-height: normal;}
.temo > #wsdon > .lst > .fiche > time {text-align: center; font-size: 90%; background: #dddddd; margin: 0; padding: 6px 0 2px 0;}
.temo .cmdcpt, .temo .cmdtemo {color: green;}


/*==================== GENERIQUE ====================*/
div {box-sizing: border-box; overflow: hidden;}
h1, .enseigne {color: #222222; text-shadow: 2px 2px 2px #cccccc;}
h1, h1.ttr, .enseigne {font-size: 1.15em; font-weight: 600;}
h2 {font-size: 1.1em; font-weight: 600; margin: 1em 0 4px 0; line-height: 150%; color: #333333; text-shadow: 1px 1px 2px #dddddd;}
h3 {color: #444444;}
h3:not(.ttr_fiche), .ttr {font-size: 1.1em; font-weight: bold; margin: 1.5em auto 0.5em auto;}
h4 {font-size: 1.1em; color: #666666; font-weight: bold; margin: 1.5em 0 0.5em 0;}
h5 {font-size: 1.05em; color: #666666; font-weight: bold; margin: 1.5em 0 0.5em 0;}
p.lst1 {display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start;}
p.lst1 > .symbole:before {content: "-";}
p.lst1 > .symbole {margin: 0 1em 0 1em;}
.emp {font-weight: bold; color: red; text-shadow: 1px 1px 3px #bbbbbb; letter-spacing: 0.5px;}
a {text-decoration: none;}
a:hover {cursor: pointer;}
a:link {color: inherit;}
a:visited {color: inherit;}
strong {color: #222222; font-weight: 900;}
em {font-style: normal; color: grey; font-weight: 500;}
button {border-style: none; width: 8em;}
button:disabled {color: grey; font-weight: 400;}
button:not(:disabled) {font-weight: 900; color: blue;}
button.iban {color: #222222;}
button.annu:not(:disabled) {color: red;}
button.ok {color: green;}
button.suppr:not(:disabled) {color: red;}
button.nouv:not(:disabled) {color: blue;}
.chevron.plus, .chevron.moins {color: red; display: inline-block; transform: rotate(-90deg);}
.para.txt > p, figure > p {color: green;}
figure {width: 100%; min-height: 1px; margin: 0; text-align: center;}
figure > figcaption {margin-top: 0.5em;}
figure > p, figure > .txt {text-align: left;}
figure > .txt {color: grey;}
.plustout {color: red; background-color: lightgray; font-size: 150%; width: 50%; position: relative; left: 25%; text-align: center;}
.plustout:hover, .son:hover, .clic:hover {cursor: pointer;}
input:read-only, textarea:read-only {background-color: lightgray;}
input.nega {color: red;}
/*--- taille ---*/
.debug {width:100%; height: 32em;}
p {width: 100%; font-size: 1.1em; font-weight: 300; margin: 0.9em 0 0.9em 0;}
figcaption {font-size: 75%; display: flex; flex-direction: row; justify-content: flex-end; align-items: flex-start;}
.diapo figcaption {justify-content: center;}
figcaption > * {white-space: nowrap;}
figcaption > :not(:first-child):not(:empty) {margin-left: 8px;}
.contact {display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background-color: #444; color: #eee; padding-bottom: 1em;}
.contact > .txt > p {margin: 0;}
.contact > .txt > p:last-child {margin-bottom: 0.5em;}
.contact .txt p {font-size: 90%;}
.contact figure > figcaption {justify-content: center;}
.contact figcaption {font-size: 80%;}
.contact figcaption em {color: unset;}
img {width: 100%; height: auto;}
audio {width: 100%; margin: 1em 0 1em 0;}
img + figcaption, audio + figcaption {width: 100%;}
img[style*="512"] + figcaption, img[style*="640"] + figcaption {width: max-content; margin-left: auto; margin-right: auto;}
.para {width: 100%;}
.para:not(.txt) {display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start;}
.para.txt + .para:not(.txt), figure + .para:not(.txt), .para.txt + figure, .txt + .para:not(.txt) {margin-top: 1.5em;}
.para.img2 > figure {width: 48%;}
.para.img3 > figure {width: 32%;}
.para.img4 > figure {width: 23%;}
.para > figure > figcaption {justify-content: center;}
.para > figure > figcaption > *:not(.lib) {display: none;}
/*--- positionnement ---*/
.hz {display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end;}
/*--- espacement et alignment ---*/
label {margin-right: 2px; white-space: nowrap;}
.temoig label.oblig {color: red;}
.vt > label {margin-right: 0;}
.vt > label + input {margin-top: 2px;}
.txt > p {text-align: justify; line-height: 170%;}
.para.txt > .txt > p {font-size: 1em; color: grey;}
.txt > .centre {text-align: center;}
article > :first-child {margin-top: 0;}
article > :last-child {margin-bottom: 0;}
header:first-child > :first-child {margin-top: 0;}
video {display: block; margin: auto;}
/*--- visibilité ---*/
.interne {display: none;}
.entete > .txt > p:empty {display: none;}

/*==================== VOILE ====================*/
.wsvoi {background-color: #cccccc; opacity: 0.3; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; display: none;}
.sablier {display: none;}

/*==================== MESSAGE ====================*/
.wsmsg:not(.async) {background-color: white; position: fixed; top: 50%; left: 50%; z-index: 13; flex-direction: column; align-items: center;
	transform: translate(-50%,-50%); border: 2px solid red; padding: 32px;}
.wsmsg:not(.async) > * {line-height: 64px;}
.wsmsg:not(.async) > .cmdzone {padding-top: 32px;}
.wsmsg.async {background-color: rgba(230,230,255,1); position: fixed; top: 50%; left: 50%; z-index: 11; flex-direction: row;
	align-items: center; padding: 1em; transform: translate(-50%,-100%);}
.wsmsg > .cmdzone {width: 60%; display: flex; flex-direction: row; justify-content: space-around;}
.wsmsg > .msgzone {width: 80%; text-align: center;}

/*==================== CORPS CENTRAL ====================*/
.wscor {width: 100%;}
.wscor.catal:not(.interne) {position: relative;}
.wscor:not(.catal):not(.interne) {display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start;}
.wsout:not(.blq) {display: flex; flex-direction: column; justify-content: space-around; align-items: center; overflow: visible;
	max-width: 1024px;}
.wsout:not(.blq) > :not(.cmdnote) {width: 50%; box-shadow: 0 0 16px 0 gainsboro; margin-bottom: 24px;}
.wscor > .wsdon, .wscmd > .plus {width: 80%;}
.wsout > .comb.compte > * {box-shadow: 0 16px 20px 0 gainsboro;}
.wsout > .comb.compte > :not(:first-child) {margin-top: 20px;}
.plus.npages {margin-bottom: 16px; display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap;}
.plus.npages > button {width: 6em; margin: 4px 16px 4px 16px;}

/*==================== FORMULAIRE ====================*/
.cpteuro > .detail {padding: 0 1em 1em 1em; max-height: 320px; overflow-y: scroll;}
.cpteuro > .detail > * {margin: 0 0 0.3em 0;}
.cpteuro > .detail > * > :first-child {width: 65%; margin-right: 4px;}
.cpteuro > .detail > * > :nth-of-type(2) {width: 20%; text-align: right;}
.cpteuro > .detail > * > :nth-of-type(3) {width: 15%; text-align: center;}
.cpteuro > .detail > :first-child {font-size: 100%; font-weight: bold;}
.cpteuro > .detail > :first-child > :first-child {text-align: center;}
.cpteuro > .detail > :nth-of-type(2n) {background-color: #eeeeee;}
.cpteuro > .detail .futur {color: blue;}
.cpteuro > .detail .credit {color: green;}
.cpteuro > .detail .debit {color: red;}
.comb .voile {position: absolute; top: 0; left: 0; height: 100%; z-index: 11; background-color: #cccccc; opacity: 0.3;}
.comb, .comb .msgzone, .comb .cmdzone {background-color: white;}
.err {color: red;}
.wsout.blq {position: absolute; top: 0; left: 0;}
.wsout.blq.choisi {width: 100%; height: 768px;}
.wsout.blq .comb {width: 512px; position: absolute; top: 50%; left: 50%; z-index: 11; transform: translate(-50%,-70%); border: 2px grey solid;}
.wsout.blq .comb .ttr {font-size: 1em;}
.wsout.blq form label {font-size: 90%;}
.comb .ttr {text-align: center; font-weight: 600; font-size: 1.5em; color: grey;}
.comb .cmdaut {width: 80%;}
.cmdaut > button {width: 100%;}
.cmdaut > button:not(:last-child) {margin-bottom: 1em;}
.comb > *, .cptcnx > *, .cptcre > *, .comb.cpteuro div:not(.cmdaut) {width: 100%;}
.comb .vt {display: flex; flex-direction: column;}
.comb input, .comb textarea {width: 100%; box-sizing: border-box;}
.comb textarea {height: 6em;}
.comb textarea:read-only {height: 4em;}
.comb button {font-size: 100%;}
.chkcase {display: flex; flex-direction: row;}
.chkcase > label {white-space: nowrap;}
.chkcase > input {width: max-content;}
/*--- positionnement ---*/
.comb, .cptcnx, .cptcre {display: flex; flex-direction: column; align-items: center;}
.comb form > .hz {justify-content: space-between; align-items: center;}
.comb form > .vt {display: flex; flex-direction: column; align-items: flex-start;}
.comb .msgzone {text-align: center; z-index: 12;}
.comb .cmdzone {display: flex; flex-direction: row; justify-content: space-around; z-index: 12;}
/*--- espacement et alignment ---*/
form, .cmdzone, .msgzone, .cmdaut {padding: 1em 0 1em 0;}
.wsout.blq form, .wsout.blq .cmdzone, .wsout.blq .msgzone, .wsout.blq .cmdaut {padding: 0.5em 0 0.5em 0;}
.comb form > * {padding: 0.5em 1em 0.5em 1em;}
.wsout.blq .comb form > * {padding: 0.3em 1em 0.3em 1em;}
.comb label {text-align: left; white-space: normal;}
.comb:hover {color: black;}
.comb.temoig > form label[name="site"]:after, .comb.temoig > form label[name="href"]:after {content: " (optionnel)";}

/*==================== RESPONSIVE ====================*/
.wsmsg {width: 50%; display: none;}
/*--- corps central ---*/
.wscor > .wsdon, .wscmd > .plus {width: 100%;}
.plus.npages {margin-bottom: 32px;}
/*--- message ---*/
.wsmsg {width: 80%;}
/*--- autres ---*/
h1, .enseigne {font-size: 115%;}
.hz:not(.mini) {flex-direction: column; align-items: flex-start;}
.hz.mini > .vt:not(:first-child) {margin-left: 8px;}

@media (max-width: 1024px) {
	.wsout:not(.blq) > :not(.cmdnote) {width: 60%;}
}
@media (max-width: 768px) {
	li:not(.cmdrech):not(.cmdmsg), .ttr_categ {font-size: 100%;}
	.wsout.blq .comb {width: 100%; box-sizing: border-box;}
	.wsout:not(.blq) > :not(.cmdnote) {width: 75%;}
	.comb .cmdaut {width: 90%;}
	.comb > :not(:first-child) .ttr {margin-top: 1.5em;}
	.comb .ttr {font-size: 1em; padding: 0em; margin-top: 0.5em;}
	.comb .hz > .vt:not(:last-child) {margin-right: 0;}
	form label {font-size: 85%;}
	form, .cmdzone, .msgzone, .cmdaut {padding: 0.5em 0 0.5em 0;}
	.para.img3 > figure > figcaption {display: none;}
}
@media (max-width: 512px) {
	.wsout:not(.blq) > :not(.cmdnote) {width: 80%;}
}
@media (min-width: 544px) and (max-height: 448px) {
	.wsmenu > .glo {height: 40px;}
	.wsmenu > .glo > .entete {width: 240%;}
	.wsmenu > .glo > .entete > figure {width: 48px; margin: 8px 8px 8px 48px;}
	.wsmenu > .cat {height: 0; z-index: 12; top: 40px;}
	li.menu {position: fixed; top: 4px; left: 4px; z-index: 12;}
	li.menu ~ li.second {display: none;}
	li.menu > ul.sub > li.second, .wsmenu > ul > li.menu > ul.sub > li:not(.second), .wsmenu li.sous > ul.sub > li {
		display: block; height: 32px; line-height: 32px; background: #eeeeee;}
	li.menu > ul.sub > li.sous {position: relative;}
	li.menu > ul.sub > li.sous > ul.sub {position: absolute; top: 0; left: 100%; display: flex; flex-direction: row; align-items: center;}
	li.menu > ul.sub > li.sous > ul.sub > li {background: #eeeeee; color: darkred; padding: 4px 8px 4px 8px; white-space: nowrap;}
	li > ul figure img, li > figure > img {width: 24px;}
	.partage > ul > figure > img, .cmdcpt > figure > img {width: 18px;}
	.espace > ul > figure > img {width: 24px;}
	.cmdrech > label {font-size: 60%;}
	.temo > #wsdon > .lst > .fiche {width: 47%;}
	.cmdmsg > label {font-size: 125%;}
}
@media (max-width: 488px) {
	li.sous {position: relative;}
	li.sous > ul.sub {position: absolute; top: 100%; width: 160%;}
	.cpteuro > .detail > :not(:first-child) {font-size: 90%;}
	.comb form > * {padding: 0.5em 0.25em 0.5em 0.25em;}
	.para > figure > figcaption {display: none;}
}
@media (max-width: 448px) {
	.wsmenu > .glo {height: 48px;}
	.wsmenu > .glo > .entete {width: 200%;}
	.wsmenu > .glo > .entete > figure {width: 56px; margin: 8px;}
	.wsmenu > .cat {top: 48px;}
	ul > li.sous:last-child > ul.sub {left: -50%;}
	li > ul figure img, li > figure > img {width: 24px;}
	.partage > ul > figure > img, .cmdcpt > figure > img {width: 18px;}
	.espace > ul > figure > img {width: 24px;}
	.cmdrech > label {font-size: 60%;}
	.cmdmsg > label {font-size: 125%;}
	#wsrech > form {width: 80%;}
	.temo > #wsdon > .lst > .fiche {width: 97%; height: 354px;}
	p.lst1 > .symbole {margin-left: 0;}
	.wsout:not(.blq) > :not(.cmdnote) {width: 100%;}
	.comb textarea:read-only {font-size: 0.9em;}
}
@media (max-width: 416px) {
	.comb textarea:read-only {font-size: 0.85em;}
}
@media (max-width: 376px) {
	.comb textarea:read-only {font-size: 0.8em;}
}
@media (max-width: 320px) {
	.wsmenu > .glo {height: 40px;}
	.wsmenu > .glo > .entete > figure {width: 48px;}
	.wsmenu > .glo > .entete {width: 140%;}
	.wsmenu > .cat {top: 40px;}
	h1, h1.ttr, .enseigne {font-size: 1.05em;}
	h3:not(.ttr_fiche), .ttr {font-size: 1em;}
	p {font-size: 0.9em;}
	.cpteuro > .detail > :not(:first-child) {font-size: 81%;}
	.comb button {font-size: 95%;}
}

/*==================== Première couverture ====================*/
.txt_img {background-color: beige; color: green; font-weight: 900; margin: 0 0 4px 0;}
.txt_img, .txt_img > a {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.txt_img > a > span:not(:first-child) {margin-top: 0.5em;}
.fiche {display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 30%; margin: 1em 0.25em 1em 0.25em;
	border-radius: 4px; background-color: palegoldenrod;}
.fiche > .ttr_fiche {width: 90%; font-weight: 600; font-size: 1em; line-height: 120%; height: 2.4em; margin: 0.5em 0 0.5em 0;}
.txt_img + .ttr_fiche {height: 2.4em;}
.fiche > .ttr_fiche > a {display: flex; flex-direction: column; justify-content: flex-start; align-items: center;}
.fiche > :first-child {margin-top: 0;}
.fiche > :not(:first-child):not(.ttr_fiche) {padding: 0;}
.fiche > :last-child {margin-bottom: 1em;}
.lst.equipe > .fiche > .ttr_fiche {height: 3.6em;}
.fiche > .ttr_fiche .lig2, .fiche > .ttr_fiche .lig3 {font-size: 90%;}
.fiche > .ttr_fiche .lig2 {color: grey;}
@media (max-width: 1024px) {
	.txt_img, .txt_img > a {font-size: 110%;}
}
@media (max-width: 896px) {
	.txt_img, .txt_img > a {font-size: 100%;}
}
@media (max-width: 768px) {
	.txt_img, .txt_img > a, .fiche > .ttr_fiche > a {font-size: 100%;}
	.fiche {width: 47%; margin: 1em 0.1em 1em 0.1em;}
}
@media (max-width: 512px) {
	.fiche > :not(:first-child):not(.ttr_fiche) {padding: 0;}
	.txt_img, .ttr_fiche, .fiche > .ttr_fiche {font-size: 95%; }
	.fiche > .ttr_fiche .lig2, .fiche > .ttr_fiche .lig3 {font-size: 90%;}
}
@media (max-width: 440px) {
	.fiche {width: 46%;}
	.fiche:nth-of-type(2n) {margin: 1em 0.5em 1em 0.2em;}
}
@media (max-width: 416px) {
	.fiche > .ttr_fiche .lig2, .fiche > .ttr_fiche .lig3 {font-size: 85%;}
}
@media (max-width: 376px) {
	.txt_img, .txt_img > a {font-size: 95%;}
}
@media (max-width: 320px) {
	.txt_img, .txt_img > a {font-size: 90%;}
	.fiche > .ttr_fiche, .fiche > .ttr_fiche .lig1 {font-size: 90%;}
	.fiche > .ttr_fiche .lig2, .fiche > .ttr_fiche .lig3 {font-size: 78%;}
}
@media (max-width: 256px) {
	.fiche {width: 100%;}
	.txt_img, .txt_img > a {font-size: 110%;}
	.fiche > .ttr_fiche, .fiche > .ttr_fiche .lig1 {font-size: 110%;}
	.fiche > .ttr_fiche .lig2, .fiche > .ttr_fiche .lig3 {font-size: 110%;}
}

/*==================== Couverture publicitaire ====================*/
.pub_fiche {width: 30%; margin: 1em 0 0 0;}
.pub_fiche > * {text-align: center;}
.pub_fiche > :last-child {padding-bottom: 0.5em;}
.pub_fiche > *:not(.pub_ttr) {background-color: palegoldenrod;}
.pub_fiche > .txt {height: 4.2em;}
.wsdon.catal .pub_fiche > .txt > p {line-height: 120%;}
.pub_ttr {font-size: 105%; font-weight: 600;}
.pub_fiche > .txt > p, .dt_pub, .pub_fiche > .lien_pub {font-size: 85%;}
@media (max-width: 768px) {
	.pub_fiche {width: 47%;}
}
@media (max-width: 512px) {
	.pub_ttr {font-size: 90%;}
	.pub_fiche {width: 100%;}
}

/*==================== BLOC PRINCIPAL ====================*/
.wsdon > h1 {font-size: 125%; text-align: center; margin: 1em auto 1em auto;}
.wsdon > .txt, .wsdon > .lst > .txt {width: 100%; padding: 0 8px 0 8px;}
.lst {background-color: whitesmoke; display: flex; flex-direction: row; justify-content: space-around; align-items: flex-start; flex-wrap: wrap;}
.lst > li.tout {margin: 1em 0 1em 0; color: blue; font-weight: 600; width: 100%; text-align: center; list-style-type: none;}
.lst > .txt {width: 100%;}
/*--- couleur ---*/
.idx_ttr, .catpub {background-color: whitesmoke;}
.lst > .ttr_categ, .catpub > .ttr_categ {color: darkgoldenrod; font-weight: 900; width: 100%; text-align: center;}
.lien_pub {color: blue;}
.idx_ttr {color: grey;}
.aut {color: green;}
address {font-style: normal;}
.info > address {color: blue;}
.info {font-size: 80%; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; margin-bottom: 1em;}
.info > :not(:first-child) {margin-left: 8px;}
.info > :empty + * {margin-left: 0;}
.info > figure {width: 64px;}
.info figcaption {display: none;}
/*--- taille ---*/
article {box-sizing: border-box;}
.wsdon:not(.catal) > div > article {width: 49%; padding: 1em 0.6em 1em 0.6em;}
.wsdon:not(.catal) figcaption {display: none;}
.wsdon.catal > * {box-sizing: border-box;}
.wsdon.catal > .catdon {display: flex; flex-direction: row; justify-content: space-between; width: 100%; min-height: 1px; margin-top: 1.5em;
	padding-bottom: 1em;}
.wsdon.catal > .catdon > article:only-child {width: 100%;}
.wsdon.catal > .catdon > article:not(:only-child) {width: 62.5%; min-height: 1px;}
.horiz > figure, .horiz > .texte {width: 50%;}
.lien > .url {font-size: 100%; font-weight: 600;}
.corresp {margin-bottom: 1em; display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap;}
.corresp > * {width: 25%; line-height: 200%; text-align: center;}
.idx_fiche {width: 30%; border-radius: 12px; box-shadow: 6px 4px 4px 0px lightgrey; margin-bottom: 1em;}
.idx_fiche > .idx_ttr {margin: 0;}
.idx_lst {min-height: 10em; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0.5em 0 0.5em 0;}
.idx_lst > h3 {font-size: 95%; margin: 0.3em 0 0.3em 0;}
.idx_lst span:not(:first-child) {margin-left: 1em;}
.table.messa + .cmdmsg {font-size: 95%;}
/*--- positionnement ---*/
.wsdon.catal {display: flex; flex-direction: column; justify-content: space-between;}
.horiz {display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.catidx {display: flex; flex-direction: row; justify-content: space-around; align-items: flex-start; flex-wrap: wrap;}
/*--- espacement et alignment ---*/
.ttr_categ {margin-top: 1em;}
.wsdon.catal > header {padding-top: 6px;}
.wsdon.catal > aside {padding-top: 1em; padding-bottom: 1em;}
article > figure + figure {margin-top: 16px;}
button.comcat {margin: 1em auto 2em auto; font-size: 100%}
.catdon > article > p:not(:first-child), .catdon > article > .horiz > .texte > p {margin: 1.5em 0 1.5em 0;}
.wsdon.catal p {line-height: 150%;}
.catpub {margin-top: 1em; display: flex; flex-direction: row; justify-content: space-around; align-items: flex-start; flex-wrap: wrap;}
time > .dt:not(:empty) + .hr:not(:empty) {margin-left: 3px;}
.lig2 {margin: 0.2em 0 0.2em 0;}
.idx_ttr, .pub_ttr {text-align: center; padding: 0.8em 0 0.8em 0;}
@media (max-width: 1024px) {
	.wsdon.catal > * {padding-left: 0.9em; padding-right: 0.9em;}
}
@media (max-width: 768px) {
	.wsdon.catal {flex-direction: column;}
	.wsdon.catal > .catdon {flex-direction: column;}
	.wsdon.catal > .catdon > article:not(:only-child) {width: 100%;}
	.wsdon:not(.catal) p {font-size: 90%;}
	.corresp > * {width: 32%;}
}
@media (max-width: 512px) {
	.catidx {flex-direction: column; justify-content: flex-start; align-items: flex-start; flex-wrap: nowrap;}
	.idx_fiche {width: 100%;}
}
@media (max-width: 440px) {
	.tdb > .ttr {font-size: 100%;}
}
@media (max-width: 320px) {
	.tdb > .ttr {font-size: 90%;}
}
/*--- autres ---*/
.cre:not(:empty) {padding: 0 2px 0 2px; border: 1px solid grey; border-radius: 6px;}

/*==================== TABLEAU DE BORD ====================*/
.tdb {display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 1em auto 1em auto;
	background-color: #eeeeee; border-radius: 4px; box-shadow: 0 0 2px 0 #444444;}
.tdb > .ttr {margin: 0;}
.tdb + div {width: 100%;}
.tdb > .cmdbloc {display: flex; flex-direction: row; justify-content: flex-end; width: 2em;}
.tdb > .cmdbloc > button {font-size: 1.5em;}
.tdb > .cmdbloc > button.chevron {color: #444444; width: 100%; background: transparent;}
.tdb > .ttr, .tdb > .titre {padding-left: 0.5em;}

/*==================== COMMENTAIRE ====================*/
article > aside {width: 100%;}
.deb {margin-left: 3px;}
.suiv {margin-left: 2em;}
.deb, .suiv {margin-right: 3px;}
.deb p, .deb time + div {color: green;}
.suiv p, .suiv time + div {color: blue;}
.deb > :first-child, .suiv > :first-child {display: flex; flex-direction: row; justify-content: flex-start;}
.file:not(:last-child) {margin-bottom : 1em; border-bottom: 3px white solid;}
.file time {margin-right: 1em;}

/*==================== DIAPORAMA ====================*/
.diapone, .diapo {width: 100%;}
.diapone {position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 0.3em 1em 0.3em;}
.ttr + .diapone {margin-top: 1em;}
.diapone > .diapi {display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap;}
.diapo {display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;}
.diapo > figure {display: flex; flex-direction: column; align-items: center;}
.diapone.d2_1 > .diapo > * {width: 48%;}
.diapone.d3_1 > .diapo > * {width: 32.5%;}
.diapi {max-width: 768px;}
.diapi:not(.vide) + .diaprol > button {height: calc(100% - 96px);}
.diapi > figure {width: inherit; margin: 2px;}
.diapi > figure.choisi {border: 2px green solid;}
.diapi > figure:not(.choisi) {border: none;}
.diapi > figure > img {max-height: 64px;}
.diaprol > button {position: absolute; top: 0; width: 1em; height: 100%; font-size: 1em; background-color: transparent; color: red;	border-style: none;}
.diaprol > button:focus {outline: none; color: red;}
.diaprol > button:hover {background-color: transparent;}
.diaprol > button.gauche {left: 0;}
.diaprol > button.droit {right: 0; transform: rotate(-180deg);}

/*==================== COMMANDE ====================*/
#wscmd:not(:empty) {text-align: center; padding: 1em 0 1em 0;}

/*==================== Icônes ====================*/
.icone {position: relative; width: 100%; height: 100%;}
.icone > * {position: absolute;}

.loupe > .obj1 {z-index: 11; width: 10px; height: 10px; border: 2px solid grey; top: calc(50% - (10px / 2) - 2px); left: calc(50% - (10px / 2) - 2px);
    background: white; border-radius: 50%;}
.loupe > .obj2 {width: 12px; height: 12px; border-top: 2px solid grey; top: 50%; left: calc(50% - (10px / 2) + (10px / 2));
    transform: rotate(45deg) translate(calc((-12px / 2) * 0.215 / 0.785), calc(12px / 2));}

.connect > .obj1 {display: block; position: relative; width: 100%; height: 100%;}
.connect > .obj1:before, .connect > .obj1:after {content: " "; position: absolute; width: 14px; height: 2px; top: calc(50% - (2px / 2));
	left: calc((100% - 14px) / 2); background: grey;}
.connect > .obj1:before {transform: translateY(calc((14px / 2) * 0.383)) rotate(22.5deg);}
.connect > .obj1:after {transform: translateY(calc((-14px / 2) * 0.383)) rotate(-22.5deg);}
.connect > .obj2 {position: absolute; width: 6px; height: 6px; background: grey; border-radius: 50%;
	top: calc(50% - 6px / 2); left: calc((100% - 14px * 0.924) / 2 - (6px / 2));}
.connect > .obj3, .connect > .obj4 {position: absolute; width: 6px; height: 6px; background: grey; border-radius: 50%;
	left: calc((100% - 14px * 0.924) / 2 + 14px * 0.924 - (6px / 2));}
.connect > .obj3 {top: calc((100% - 14px * 0.383 * 2) / 2 - 6px / 2);}
.connect > .obj4 {top: calc((100% - 14px * 0.383 * 2) / 2 + 14px * 0.383 * 2 - 6px / 2);}

.usr0 > * {position: absolute;}
.usr0 > .obj1 {width: 8px; height: 8px; border: 2px solid grey; top: 12%; left: calc(50% - 8px / 2 - 2px / 2); border-radius: 50%;}
.usr0 > .notif {top: 0; left: calc(50% + 8px / 2 + 2px + 1px);}
.usr0 > .obj2 {width: 20px; height: 8px; border: 2px solid grey; top: calc(10% + 8px + 2px * 2 + 2px); left: calc(50% - 20px / 2 - 2px / 2);
	border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom: none;}
.usr0.ok > .obj1 {border: 2px solid #1bc61b;}
.usr0.ok > .obj2 {border: 2px solid #1bc61b; border-bottom: none;}
.usr0.ok > .obj3 {top: -10%; left: calc(50% + 8px); font-size: 80%; color: #1bc61b; font-weight: bold;}
.usr0.ok > .obj3:before {content: "\2713";}

.cptdcnx {display: flex; flex-direction: row; justify-content: flex-start;}
.cptdcnx > .decnx {width: 18%;}
.decnx > * {position: absolute;}
.decnx > .obj1, .decnx > .obj2 {border: 2px solid transparent; width: 16px; height: 16px; border-radius: 50%;
	top: calc((100% - 16px - 2px * 2) / 2); left: calc(50% - 16px / 2 - 2px / 2);}
.decnx > .obj1 {border-color: transparent green green green; transform: rotate(-10deg);}
.decnx > .obj2 {border-left-color: green; transform: rotate(10deg);}
.decnx > .obj3 {border: 2px solid green; width: 0; height: 8px; top: calc((100% - 16px - 2px * 2) / 2 - 2px); left: calc(50% - 2px / 2); border-radius: 4px;}

/*==================== RECHERCHE ====================*/
.rech {display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative;}
#wsrech {height: 3em; background-color: #eeeeee; margin-bottom: 8px;}
.rech input {width: 100%;}
.rech button {width: 100%; width: 32px; height: 24px; background: transparent;}
.rech button:disabled > .loupe > .obj1 {border: 2px solid #cccccc;}
.rech button:disabled > .loupe > .obj2 {border-top: 2px solid #cccccc;}
.rech button:not(:disabled) > .loupe > .obj1 {border: 2px solid green;}
.rech button:not(:disabled) > .loupe > .obj2 {border-top: 2px solid green;}
#wsrech > form {width: 50%; justify-content: space-around;}
.rech > form > .hz {justify-content: center; padding-right: 1em;}
.rech > .cmdzone {width: 10%;}

/*==================== ANIMATIONS ====================*/
.wsdon > figure {margin: 0 auto 0 auto;}
.wscor.hsr0 > .wsdon > figure,
.wscor.hsr1 > .wsdon > figure,
.wscor.hsr2 > .wsdon > figure,
.wscor.hsr3 > .wsdon > figure {animation: 1s ease-in a-img-dep-ce;}
.wscor.hsr4 > .wsdon > figure,
.wscor.hsr5 > .wsdon > figure,
.wscor.hsr6 > .wsdon > figure {animation: 0.5s ease-in a-img-dep-gd;}
.wscor.hsr7 > .wsdon > figure,
.wscor.hsr8 > .wsdon > figure,
.wscor.hsr9 > .wsdon > figure {animation: 0.5s ease-in a-img-dep-dg;}
.wsdon:not(.catal) > h1 {position: relative; color: #eeeeee; width: max-content;}
.wsdon:not(.catal) > h1:before {position: absolute; content: attr(data-text); top: 0; text-align: center; color: #111111; white-space: nowrap; overflow: hidden;}
.hsr0 > .wsdon:not(.catal) > h1:before,
.hsr1 > .wsdon:not(.catal) > h1:before,
.hsr2 > .wsdon:not(.catal) > h1:before,
.hsr3 > .wsdon:not(.catal) > h1:before,
.hsr4 > .wsdon:not(.catal) > h1:before {animation: 1.5s linear a-txt-bal-gd;}
.hsr5 > .wsdon:not(.catal) > h1:before,
.hsr6 > .wsdon:not(.catal) > h1:before,
.hsr7 > .wsdon:not(.catal) > h1:before,
.hsr8 > .wsdon:not(.catal) > h1:before,
.hsr9 > .wsdon:not(.catal) > h1:before {animation: 1.5s linear a-txt-bal-hb;}
@keyframes a-img-dep-dg {0% {width: 0px; margin-right: 0;} 100% {width: 100%; margin-right: 0;}}
@keyframes a-img-dep-gd {0% {width: 0px; margin-left: 0;} 100% {width: 100%; margin-left: 0;}}
@keyframes a-img-dep-ce {0% {width: 16px;} 100% {width: 100%;}}
@keyframes a-zon-dep-dg {0% {transform: translateX(100%);} 100% {transform: translateX(0);}}
@keyframes a-zon-dep-gd {0% {transform: translateX(-100%);} 100% {transform: translateX(0);}}
@keyframes a-zon-dep-ce {0% {width: 16px;} 100% {width: 100%;}}
@keyframes a-txt-bal-gd {0% {width: 0%;} 100% {width: 100%;}}
@keyframes a-txt-bal-hb {0% {width: 100%; height: 0%;} 100% {width: 100%; height: 100%;}}