@import "/page/css/defaut.css";

:root {
    --dftFontSize:var(--ft12);
    --dftFont:Arial, verdana, sans-serif;
    --dftHdrFont:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    --fontEttMenu: var(--dftHdrFont, serif);
    --fontMenu: var(--dftFont, sans-serif);
}
body{ display:grid; grid-template-rows: 65px 1fr auto; grid-template-columns: 0 1fr [col-fin];
        height: 100vh; width: 100vw; margin: 0; padding: 0; background: url(/page/images/biblio.jpg);
        overflow-wrap: normal; overflow:hidden; user-select: none; -webkit-text-size-adjust: none; font-family: var(--dftFont); font-size: var(--dftFontSize);}

body.showmenu {grid-template-columns: minmax(300px,auto) 1fr [col-fin];}

mark {display:inline-block;background-color : #FDF55E; padding:2px;}
mark:before{margin:0px 3px;padding:2px; background-clip:border-box ;background:red; color:white; font-weight : bolder;font-size:110%}
mark[subject]:before {content:attr(subject);}

h1, .hdr1 {font-family: var(--dftHdrFont,serif); margin : 0 -5px 5px; padding: 3px;  border-radius:10px;border:inherit; background-color:var(--bg-color,#17283c);
    background:linear-gradient(to bottom, #17283c,#0a4180); text-align: center;font-size: calc(9px + var(--dftFontSize)); font-weight:bold;color:var(--coltitle) ;} /*titre de section*/
h2, .hdr2 {font-family:  var(--dftHdrFont,serif); margin:5px 0; padding:5px; border-radius: 3px;background-color:var(--bg-color,#af8f83); color:var(--coltitle); 
    text-align: start; font-size: calc(4px + var(--dftFontSize)); font-weight:bold;}
h3, .hdr3 {font-family:  var(--dftHdrFont,serif); margin: 5px 0; padding:3px 5px; background-color:var(--bg-color,rgba(0, 0, 125, 0.25));text-align: start;
    color:#f6f6aa;font-size: calc(3px + var(--dftFontSize)); font-weight:bold;}
h4, .hdr4 {font-family:  var(--dftHdrFont,serif); display: inline-block; margin: 5px 0 5px 10px; margin-left: var(--decal,0px); border-bottom: 3px currentColor double;
    padding:2px; background-color:var(--bg-color,rgba(203,135,135,50%));text-align: start;font-size: calc(1px + var(--dftFontSize));font-weight: bold;}
h5, .hdr5, h6, .hdr6 {font-family:  var(--dftHdrFont,serif); }
hr {display: block; margin: 3px auto;box-sizing:border-box; background-clip:content-box;}
hr.sep {margin:10px auto; width:40%; height:5px; background:linear-gradient(#60a3dd,#093153,#60a3dd);border: 1px solid navy; border-radius: 4px}

/*menu côté gauche*/
body > aside#blocmenu {grid-row: 2; grid-column: 1;  display:none; padding: 5px; padding-right: 10px; overflow:hidden auto;
    background: whitesmoke; color:#333333; font-family:var(--fontEttMenu,Serif); font-weight:bold; font-size: calc(3px + var(--dftFontSize)); line-height: calc(5px + var(--dftFontSize));}
body.showmenu > aside#blocmenu {display:initial}
body > aside#blocmenu > mnu-grp { display:block; margin: 0; padding:5px; text-decoration:underline; pointer-events: all; font:var(--fontEttMenu)}
body > aside#blocmenu > mnu-grp:before{content:"."; display:inline-block; margin-right:3px; width:10px; vertical-align:text-top; font-size:0;
        background-image: url(/page/images/plus.gif); background-size: cover; background-repeat: no-repeat;background-position: center;}
body > aside#blocmenu > mnu-grp.open:before{background-image: url(/page/images/moins.gif);}
body > aside#blocmenu > mnu-grp.nochild:before{background-size: 0 !important;}
body > aside#blocmenu > mnu-grp > * {display:none; margin-top:3px ; margin-left:10px ; border: 1px solid #cbcbcb; padding:3px; padding-left:10px; border-radius: 3px;}
body > aside#blocmenu > mnu-grp.open, body > aside#blocmenu.extend > mnu-grp {text-decoration:none;}
body > aside#blocmenu > mnu-grp.open >*:not(:empty), body > aside#blocmenu.extend > mnu-grp >*:not(:empty)  {display:block;}
body > aside#blocmenu > mnu-grp.open > mnu-sub[data-lib]:before{content:attr(data-lib); display: inline-block; margin-bottom: 3px; padding: 0 5px; background-color: aqua; font-size: 90%;}
body > aside#blocmenu > mnu-grp mnu-ln {display:block ; padding-left:15px; white-space: nowrap; 
    color: black; font-family: var(--fontMenu,Arial); font-size: var(--dftFontSize); font-weight: normal;
    background-repeat: no-repeat;background-position: left;background-image: url(/page/images/puce1.gif); background-size:10px;}
body > aside#blocmenu > mnu-grp mnu-ln:not([data-name]){font-style: italic;background-color: rgba(255,125,0,0.25);}

main { flex:1 1 auto; padding:3px; margin-top:5px;overflow-y:auto;overflow-x: hidden; display:flex; flex-direction: column;}
main > *:not(:first-of-type) {display:none}
main > * {flex:1 1 auto}


/**** article et section ****/
article:empty, article > section:empty {display:none}
article > section, article > header > section, article > div > section {margin: 0 5px; padding: 5px 10px; border: 2px ridge var(--bdre); background-color: #f5f4e9;}
article > section.gridMode, article> div  > section.gridMode {display:grid; height:var(--pageH,800px); box-sizing:border-box; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; grid-column-gap: 5px;}

section > header > *.histo:before{content:"Historique et organisation"; display:block; margin:0 -15px 1rem; border-bottom: ridge 5px lightgrey; font-size: calc(7px + var(--dftFontSize)); font-weight:bold;}
section > header > *.histo[titre]:before {content:attr(titre)}
section > my-content {display:block; margin-top:5px; padding : 0 30px;}
section > my-content.tenue:before{content:"Description des tenues"; display:block; margin:0 -15px 1rem; border-bottom: ridge 5px lightgrey; font-size: calc(7px + var(--dftFontSize)); font-weight:bold;}
section > my-content.tenue[titre]:before {content:attr(titre)}

:is(section > header,section > my-content):has(~ my-content) {padding-bottom:15px; margin-bottom:15px; background-image: url(/page/images/fond4.jpg); background-size: 50% 5px; background-position: center bottom; background-repeat: no-repeat;}

section.gridMode > aside {grid-column: 1; grid-row:2; overflow: visible auto}
section.gridMode > div.princ, article > section.gridMode > my-content {grid-column: 2; grid-row:2; overflow-y: auto}
section.gridMode > header, article > section.gridMode > h1 {grid-column: span 2; margin-bottom:10px; padding-bottom:5px;border-bottom: double 3px #e0e0e0}
/* article > section:not(:first-of-type) h1:before {content:"<"; display:inline-block; position:absolute; top:3px; left:5px; padding:3px; background-color: #f6f6f6;border:var(--bdre) solid 1px;border-radius: 5px;color:darkgrey}
article > section:not(:last-of-type) h1:after {content:">"; position:absolute; top:3px; right:5px; padding:3px; background-color: #f6f6f6;border:var(--bdre) solid 1px;border-radius: 5px;color:darkgrey} */

/**** Intro et texte ****/
article section.intro, *.text {padding : 7px 30px;background-color: white;}
:is(article section.intro, *.text) > :is(p, div) {margin-right:7px; margin-left: 1em; margin-bottom:0;}
:is(article section.intro, *.text) :where(p + p, div + p, p + div,div + div)  { margin-top: 7px;}
*.text {border: solid 1px var(--bdre);border-radius: 7px}

/*
body.princflex{padding:5px; display:flex; flex-direction: column;}
	#titre {flex:0 0 60px; line-height:60px; font-size : 40px ;  text-align : center ; text-decoration : underline ; color : brown;}

    body.princflex ul.nav .navItem {font-size: 100%;}
	div#grp_princ{display:flex;flex-direction: row;}
    div#grp_princ>div {flex:1 1 50%;overflow: hidden auto;margin:1%}
    
    div#grp_princ div.subSites {padding:3px}
    div#grp_princ div.subSites:before {content: attr(title); display: block; white-space: pre; line-height: 150%;font-size: 130%;font-weight: bolder;text-align: center; text-decoration: double underline blueviolet; }
    div.detsite {margin-top: 10px;} 
    div.detsite>span{float:right}
    div.detsite>span:before{content:'Dern. visite :'; padding-right:3px}
    div.detsite>a {line-height: 20px; vertical-align: middle; text-decoration: underline;}
    div.detsite>a:after{content:""; display:inline-block; width:25px; height:20px;background-image: url('images/ptoeil.gif');background-position: center;background-repeat: no-repeat; background-size: 17px; vertical-align: middle;}

*/