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

/* Reset des défauts Chrome*/
	ul, p {margin-block-start:0;margin-block-end:0;padding-inline-start:0}
	option {white-space: normal;min-height: fit-content}
    dd {margin-inline-start:0;}
    input {font:inherit}
    figure {-webkit-margin-start:0px;-webkit-margin-end:0px;-webkit-margin-before:0px;-webkit-margin-after:0px;}
    table {border-collapse: collapse}
    
    *[onclick], area {cursor:pointer}
/*****************/
:root {
    --bgsxH : #A9EAFE;
    --bgsxF : #FFFFBB;
    --bgsxE : #EDD39B;
    --bgsxI : #EDD39B;
    --bgsys : #e6e6e6;
    --brdrsys : grey
}
.spinner { z-index: 10; position: absolute; top: 50%; left: 50%; height: 100px; width: 100px;
    /* Create a curve at the top */
    border: 4px solid #d1d5db;
    border-top-color: #3b82f6;
    border-radius: 50%;

    animation: spinner 800ms linear infinite;
}
.spinner.stop {display:none;animation-duration: unset;}
@keyframes spinner {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
} 

ext-lnk { line-height: 1.2; background-color: #d7d793; padding: 2px 3px; font-weight: bold;}
ext-lnk > div{display:inline-block; cursor: pointer;font-style: italic;text-decoration: underline;}
ext-lnk[post]:after{content:'voir ' attr(post); margin-left:5px;}

body {display:grid; grid-template-columns: auto 1fr; grid-template-rows: 40px 1fr;
    box-sizing:border-box; height:100vh;width:100vw; padding: 0;margin: 0; overflow:hidden;
    /*background-image: url('images/biblio.jpg');*/
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: var(--ft12); color: black;-webkit-text-size-adjust:none; }

body > aside {grid-column: 1; grid-row: 1 / span 2;}
body > nav {grid-column: 2; grid-row: 1;}
body > main {grid-column: 2; grid-row:2; display: flex ; flex-direction:column; background-color: #fbe8d0; overflow:hidden;}
    body > main > *:not(:first-child) {display:none}


/*** aside ***/
body > aside {display: grid ; grid-template-rows: auto 1fr; grid-row-gap:5px; width:350px; border-right: 3px double grey;}
body.small > aside:not(.extd) {width:30px; background-color: #d7d7d7; background-image: url(images/pt_fleche_droite.png);background-repeat: no-repeat;
    background-position: center 15px ; background-size: 50%;}
body.small > aside:not(.extd) > * {display:none}
    aside#colgauche > div#firstcell{padding:3px;}
    aside#colgauche > div#firstcell > div.lnmenu {display:grid; grid-template-columns: 70px 1fr; grid-template-rows:25px;
        margin: 5px; padding: 0;background: linear-gradient(#3575A0 15%,navy,#3575A0 15%); border-radius: 8px; color:azure}
    aside#colgauche > div#firstcell > div.lnmenu > * {text-align: center;line-height:25px; font-weight: bold;font-size: 115%;}
    aside#colgauche > div#firstcell > div.lnmenu > *:first-child {border-right: 3px double azure;}
    aside#colgauche > div#firstcell > div#enttliste { font-size: 150%;border-style: ridge ;border-color: #f1e5e5 ;text-align:center;background-color: white;margin:3px}
    aside#colgauche > div#firstcell > div#choixsexe {display:grid; pointer-events: none;grid-template-columns:repeat(4, 1fr);grid-template-rows:auto auto}
    aside#colgauche > div#firstcell > div#choixsexe:before {content:"Afficher/masquer les :"; grid-column: 1 /span 4;}
    aside#colgauche > div#firstcell > div#choixsexe > * {pointer-events:all; padding-left:20px; background-image:url('images/checkbox.png'); background-repeat:no-repeat; background-position :3px center; background-size :12px}
        aside#colgauche.vsxh > div#firstcell > div#choixsexe *.vsxh, aside#colgauche.vsxf > div#firstcell > div#choixsexe *.vsxf,
            aside#colgauche.vsxe > div#firstcell > div#choixsexe *.vsxe, aside#colgauche.vsxi > div#firstcell > div#choixsexe *.vsxi{background-image:url('images/uncheckbox.png')}


        aside#colgauche.vsxh > div#detliste *.sxH, aside#colgauche.vsxf > div#detliste *.sxF,
            aside#colgauche.vsxe > div#detliste *.sxE, aside#colgauche.vsxi > div#detliste *.sxI{display:none}
    /*********Colonne de liste*************/

              
        #detliste {flex:1 1 auto; margin:0;padding-left:20px; padding-bottom:5px; overflow-x: hidden;color:blue; }
            #detliste>*{display:none;pointer-events:none;}
            #detliste div[sel='y'] {display:block}
            #detliste div[data-val], #detliste div.fmly, #detliste div.divInd {pointer-events:all; padding: 2px 2px 2px 15px; background-repeat:no-repeat; background-image:url(images/puce2.png); background-position : left center;}
            
            #detliste div[vsx] {height: 18px;overflow: hidden}
                #detliste div[vsx]>span {display: inline}
                #detliste div[vsx]>span:last-child {text-overflow: ellipsis}
                #detliste div[vsx]>span:first-child {float: right;padding-left:10px;padding-right: 10px}

            #detliste div.fmly>*{pointer-events: none;}
                #detliste div.fmly.princ{background-color: rgba(245,239,129,.75)}
            #detliste div.divInd {display:flex; flex-direction:row;height: 18px; max-width: 100%;padding-right: 10px;cursor: pointer; pointer-events:all; text-decoration: underline; color:blue}
                #detliste div.divInd>* {pointer-events: none;}
                #detliste div.divInd.princ{background-color: rgba(245,239,129,.75)}
                #detliste div.divInd>span:first-child {flex: 0 0 auto;order: 1}
                #detliste div.divInd>span:last-child {flex: 1 1 auto;order: 0;margin-right:5px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;}

            #detliste mark {display:block;border:solid red 1px; border-radius:5px; background-color : #FDF55E; padding:2px; white-space: pre-line;}

            #colgauche[vsx*="H"] #detliste div.sxH {display:none}
            #colgauche[vsx*="F"] #detliste div.sxF {display:none}
            #colgauche[vsx*="E"] #detliste div.sxE {display:none}
            #colgauche[vsx*="I"] #detliste div.sxI {display:none}
            
            #idxfam {pointer-events:none}
            #idxfam {pointer-events:all}

/*** nav ***/
body > nav {display: flex; flex-direction: column; justify-content: center; border-bottom: 3px double grey;}
ul.nav {display: block;margin: 5px; padding: 0; height: 25px;background: linear-gradient(#3575A0 15%,navy,#3575A0 15%);border-radius: 8px; list-style: none;}
    ul.nav .navItem, ul.nav .blankItem { position: relative;float: left;margin: 0;padding: 4px 10px;line-height:16px;background-size: 13px;border-right: aqua 3px double;color: #f6f6f6;font-weight:bolder;font-size: 115%;}
    ul.nav li.navItem:first-of-type {padding-left:20px; border-radius: 8px 0 0 8px;}
    ul.nav .navItem:empty {display: none}
    ul.nav .navItem>ul {display: none; position: absolute; float: left;top: 23px; left: -1px;padding: 10px 10px 10px;width: inherit;list-style:none;text-align: left;
	    opacity: 0; background: #FFFFFF; background-color: #f8f8f8;
	    border: 1px solid #cbcbcb; border-top: 0; border-radius: 0px 0px 10px 10px;
        overflow-y: auto; max-height: 200px;
    }
    ul.nav li.navItem:first-of-type>ul {left:9px}    
    ul.nav .navItem>ul#lstrecent {list-style-type: decimal;list-style-position: inside}
    ul.nav .navItem[data-filtre='true'] {background-image: url('gif/filtre.png');background-repeat: no-repeat;background-position: 3px center;}
    ul.nav .navItem:hover {display: block;background-color: #f8f8f8;color: navy;border: 1px solid #cbcbcb;border-bottom: 0;border-radius: 3px 3px 0px 0px ;}
    ul.nav .navItem:hover>ul {opacity: 1;display: block;}
    ul.nav .navItem>ul>li, .tstlength {padding-left: 15px;white-space: nowrap;font-size: 95%;font-weight:normal;color: black;background-repeat: no-repeat;background-position: left;}
	ul.subsites>li {padding-left: 5px;background-image: url('images/puce2.gif');background-size: 8px}
	ul.subsites>li>div {display: none}





div.divInd, span.blocInd {text-decoration : underline; color:blue}
div.divInd.short, span.blocInd.short {color:orangered;}

*[onclick^="Affichfamille"] {text-decoration : underline;}
.fmlyprinc {background-color:gold}
.fmlysndr {background-color:white}
.fmlyetude {background-color:silver}
bgstab {background-color:orange}
err {display: inline;color: red}
err:after {display: inline;content:" !";color: white;font-weight:bold;background-color: red}
.degradegris {background: linear-gradient(to right,#d0d0d0 0,#eee 5%,#f7f7f7 10%,#f7f7f7 90%,#eee 95%,#d0d0d0 100%);background: -webkit-linear-gradient(left,#d0d0d0 0,#eee 5%,#f7f7f7 10%,#f7f7f7 90%,#eee 95%,#d0d0d0 100%);}
.btn_menu {background: linear-gradient(#3575A0 15%,navy,#3575A0 15%);color: #f6f6f6}
.btn_menu_MH>*:hover {background-color: #f8f8f8;color: navy;}
.tooltip {position: relative;float: left;margin: 0;padding: 4px 20px;line-height:16px;}

#detliste .persoprinc, .grprelation .persoprinc, .enfants .persoprinc {background-color :darkblue ; color:white}

dl.doc_img:empty{display:none}
dl.doc_img>dd {display: inline-block;background-repeat: no-repeat;background-size: 20px;background-position: 2px center;line-height: 20px;padding: 2px 2px 2px 25px;text-decoration: underline;border: 1px solid rgb(200,200,200);}
dl.doc_img>dd:not(:first-child){margin-left: 20px}


/*********Accueil*************/
#zoneaccueil {flex:1 1 auto;overflow-y: auto;color:black;background-color: rgba(155,155,155,0.5);}
#zoneaccueil>* {margin: 10px 15px 5px 15px; flex:0 0 auto}
    #bandeauAccueil {display: flex;flex-direction:row;border: 1px #a1aba9 solid;border-radius: 0 10px 10px;padding: 5px; line-height:15px;}
        #bandeauAccueil div {flex: 1 1 auto; margin-top:10px 25px;text-align:left; padding:3px;padding-left:15px; vertical-align:top;}
        #bandeauAccueil mark {padding:1px 2px; font-weight: bold;text-decoration: double underline;}
    #textaccueil {flex:1 1 auto; padding: 5px;box-sizing: border-box;border: 3px double;overflow-y: auto}
        #textaccueil #acc_titre {border: 3px ridge #f1e5e5 ; margin-bottom: 5px;margin-top: 20px;background-color: #e6e6e6;width: 50%}
        #textaccueil #acc_sstitre {text-decoration: underline;font-weight: bold}
        #textaccueil li {margin-bottom: 3px;margin-left: 20px}         
        #textaccueil a {font-weight: bold;color: blue;text-decoration: underline}

/*********Liste des patronymes*************/
#lstpatro {/*flex-direction: column; */flex: 1 1 auto;  overflow: hidden auto;padding: 0px; border: 3px double black;background-color: rgb(247,247,247);}
	#lstpatro:before {display:block;content:" - Liste des patronymes - ";background-color:#006FA4; color:white; font-size:175%;font-weight : bold ; border-bottom:inherit;text-align: center;}
    #lstpatro>div {columns: 320px 4; column-rule: lightyellow;column-gap: 5px;}
	#lstpatro ul {margin-block-start:0;/*margin-bloc-end:0;*/padding-inline-start:0;padding-left: 20px;break-inside: avoid;break-before: avoid;}
	#lstpatro ul[data-val]:before {content: attr(data-val); display: inline-block;width: 100px;margin: 10px;padding-left: 20px;border-bottom: double 3px navy; font-size:115%}
	#lstpatro ul>li>a {padding-right:10px; text-decoration : underline;cursor:pointer;}
	#lstpatro ul>li>span {padding-left:10px; font-size: 95%;}


/*********Recherche*************/
#ListeRec {flex: 1 1 auto; flex-direction:column;position:static; grid-template-rows: auto 1fr;margin: 0;padding: 2px;overflow-x: hidden;}
#coldroite #ListeRec:first-child {display:grid; }
    #CritRec {padding: 5px 5px 20px;background-color: rgb(230, 227, 222);border: 1px #a1aba9 solid;border-radius: 0 10px 10px}
        #CritRec fieldset {display: inline-block; vertical-align: text-top;margin-bottom: 15px; background-color: Menu;border: 2 px groove ThreeDFace}
        #CritRec fieldset legend {font-size: 115%; font-weight:bolder;margin-bottom: 3px; color: MenuText;background-color: Menu;border: 1px dotted ThreeDFace;border-bottom-width: 0}
        #CritRec fieldset>span {display:inline-block; width: 45px; margin-bottom: 5px; margin-right: 3px}
        #CritRec fieldset>input {width: 100%}
        #CritRec #i_Pren {text-transform: capitalize;}
        #CritRec fieldset>span~input {width: calc(100% - 55px)}
        #CritRec fieldset.recSx>div {line-height: 20px;}
        #CritRec fieldset>div>input {margin: 0 5px 0 0;vertical-align: text-bottom}
        #CritRec #rec_periode .format {margin-right: 50px;background-color: lightyellow}

        #CritRec div.blocrecgroup {display:grid; grid-template-columns: 25px 25px repeat(6, max-content); grid-gap:3px}
        #CritRec div.blocrecgroup>form, #CritRec div.blocrecgroup>div.enttgroup {display:contents}
        #CritRec div.blocrecgroup>div.enttgroup>label {border:var(--brdrsys) solid 1px;border-radius: 3px;padding:1px 3px;background-color: #f0e766;text-align: center;}
        #CritRec div.blocrecgroup>form>* {font-size:var(--ft12); line-height:15px}
        #CritRec div.blocrecgroup>form>span {display: inline-block; border: 2px ridge var(--brdrsys); background-color: var(--bgsys);text-align: center;font-size:120%;}
        #CritRec div.blocrecgroup>form>span[data-name="+"] {visibility: hidden;}
        #CritRec div.blocrecgroup>form:only-of-type>span[data-name="-"] {visibility: hidden;}
        #CritRec div.blocrecgroup>form:last-of-type>span[data-name="+"] {visibility: visible;}


    #ResultRec {overflow-y:auto;background-color: #fefefe;font-size: var(--ft11); column-count: 3;}
    #ResultRec>*:first-child {display: block;text-align: center;font-size: var(--ft18); color: #6d1919; column-span: all;}
    #ResultRec>*:not(:first-child) {display: block;padding-left: 5px; margin:2px 5px;line-height: 18px;border:1px solid navy;border-radius:3px;background-color: rgba(240, 240, 240, 0.5)}
    #CritRec button { display: inline-block; margin: 0 10%; font-weight: normal; font-size: var(--ft12); color: white; cursor: pointer; background: #a1aba9;}
    #CritRec button[name='valid'] { float: right;}

/*********communes*************/
#ListeCmne {flex: 1 1 auto; flex-direction:row;position:static;margin: 0;padding: 2px;font-size: var(--ft12); overflow-y:auto}
    #CritCmne {flex: 0 0 350px; padding: 5px 5px 20px;background-color: rgb(230, 227, 222);border: 1px #a1aba9 solid;border-radius: 0 10px 10px;overflow-y: auto;}
	#CritCmne:before {content: "Liste des rattachements des lieux"; display: block; white-space: pre;margin-bottom: 5px; border-bottom: double grey 4px;line-height: 20px; font-size: var(--ft18); text-align: center;}
        #CritCmne div {margin-left: 10px}
        #CritCmne div:before {content: attr(data-nom)}

    #ResultCmne {flex: 1 1 auto;margin-left: 10px;overflow: hidden auto;background-color: floralwhite;}
        #ResultCmne div[data-nom] {display:none;}
		#ResultCmne div[data-nom][data-vu],#ResultCmne div[data-nom][id] {display: block}
		#ResultCmne div[data-nom][data-vu='0'] div[data-nom] {display: block}

        #ResultCmne div[id][data-nom]:before {content: attr(data-nom)}
		.elmtParent {font-size: 120%;}
		.elmtParent>span {margin-right:3px; font-weight: bold;text-decoration: underline;float: left}

		.rCmne {margin: 10px 20px 5px 0;padding-left: 15px;}
		.rCmne:before {display: inline-block;margin-bottom: 3px;margin-left: -10px;padding: 2px 5px;background-color: navy;font-size: 110%;color: white;}
		.rCmne *[data-title]:before {content: attr(data-title)" :";display: inline;margin-right:3px ; text-decoration: underline;font-weight: bold}
		.rCmne .cmneid *{margin: 2px 5px;}
		.rCmne .cmnecmt {padding: 0 15px}
		.rCmne .cmnecmt:before{content: "Notes :";display:block;padding-bottom: 5px;margin-left: -10px;font-size: 110%;text-decoration: underline;font-weight: bold;}	
		.rCmne .subcmne {display:flex;flex-direction:row;border: double 3px var(--brdrsys);}
		.rCmne .AR {flex: 1 0 50%;padding: 0 15px;}
		.rCmne .AR:not(:first-child) {border-left: double 3px lightgrey}
		.rCmne .AR[data-ttip]:before {content: attr(data-ttip);display:block;padding-bottom: 5px;margin-left: -10px;font-size: 110%;text-decoration: underline;font-weight: bold;}
		.rCmne .AR div>div {margin-left: 10px;padding-left: 15px;background-image: url(images/flechebrise.gif);background-repeat: no-repeat}
		.rCmne .AR span {margin-right:3px; font-weight: bold;text-decoration: underline;float: left}
 
/*******Zone Fiche********/
#zonefiche {flex:1 1 auto;flex-direction:column; overflow-y: auto}
    #fichdet {flex: 1 1 auto; overflow-y:auto;position:static;margin: 0;padding: 2px 10px;cursor: default}
    #fichdet>article {display: none;}
    #fichdet>article:first-child {display: block}

        #fichdet>article>section { background: #f7f7f7;border: double #2f7cda;margin-top:10px; margin-bottom:10px;}
        #fichdet>article>section:empty {display:none}
        section[blocLib]:before {content:attr(blocLib); display:block; font-size:150%; font-weight:bold; text-decoration: underline;}
        #fichdet>article>section:before, table.grpevent caption {display:block;height:25px; background-color:#006FA4; padding-left: 15px; padding-top:2px; color:white;font-size:var(--ft16); font-weight: bold;text-transform: uppercase}
        div.lgnevent {font-size:90%; line-height:15px}

    #fichdet>#grpmap {display:block; text-align: center;pointer-events: none;}
    #fichdet>#grpmap>div.cntr:not(:first-child) {display: none;}
    #fichdet>#grpmap>div.cntr:first-child {display:inline-block; position:sticky; margin:0 auto; border: 3px double navy; overflow:auto; background: white;}
        #fichdet>#grpmap div.subcntr{position:absolute;box-sizing: content-box;height:var(--dftH);width:var(--dftW);pointer-events: all;}
        #fichdet>#grpmap div.subcntr:not(.slct):hover{outline:2px solid navy;outline-offset: -1px;}
        #fichdet>#grpmap div.subcntr.slct{outline:2px solid rgb(45, 204, 71);outline-offset: -1px;}

        /* Détail individu */
            section.grppatro {padding: 3px 10px;}
            section.grppatro >div#firstbloc {display:grid;grid-template-columns:min-content auto}
            section.grppatro img.portrait {grid-column: 1; max-width: 100px; max-height: 110px;}
            section.grppatro div.blocPrinc {grid-column: 2; padding-left: 5mm}
            section.grppatro div.blocPrinc >span.nom {margin-left:-5mm;font-size:160%; font-weight: bold;}
            section.grppatro div.blocPrinc >span.pnom {font-size:140%; font-weight: bold;margin-left:2mm}
            section.grppatro div.blocPrinc >span.id {float:right; margin-right: 10px; padding:2px 5px; font-weight: normal; text-align:right; outline: navy dotted 1px; outline-offset: -2px}
            section.grppatro div.blocPrinc >.sx:before{content : "Sexe :"; margin-right: 3px; font-weight: bold}
            section.grppatro div.blocPrinc >div.comment:empty{display:none}
            section.grppatro div.blocPrinc >div.comment {padding-left:5mm}
            section.grppatro div.blocPrinc >div.comment:before{content : "Notes :"; margin-left:-5mm; margin-right: 3px; font-weight: bold}

            section.grppatro >div.signe, section.grppatro >div.docImg {grid-column: 1/3;}
            section.grppatro >div.signe:before {content:"Signatures"; display:block; font-weight:bold; font-size:110%; text-decoration: underline;}
            section.grppatro >div.signe>div.bk_vignette>img {display:block}
            div.bk_vignette {display:inline-block;margin:3mm}
            div.bk_vignette >div {display:inline; padding-right: 5px; font-weight: bold; font-style: italic;vertical-align: top;}
            div.bk_vignette >img{max-width:120px; max-height:50px; border: grey 2px solid;border-radius: 5px;}

            section.grppatro >div.docImg:before {content:"Documents"; display:block; font-weight:bold; font-size:110%; text-decoration: underline;}
            section.grppatro >div.docImg >div.bk_vignette {display:inline-flex;margin:3mm; max-width: 250px; flex-direction: row;}
            section.grppatro >div.docImg >div.bk_vignette * {pointer-events: none;}
            section.grppatro >div.docImg >div.bk_vignette >img{max-width:50px; max-height:50px; border: grey 2px solid;border-radius: 5px;cursor: pointer;}

	    /* hypothèques */
                section.grphypo {display:grid; grid-template-columns: 20px 75px 200px 200px auto;grid-auto-flow: column;}
                section.grphypo:before, section.grphypo > bureau {grid-column:1/ span 5}
                section.grphypo >*:not(bureau) {border-top:1px solid navy}
                section.grphypo >bureau {font-size:120%;padding-left:20px}
                section.grphypo >bureau:not(:first-of-type) {border-top:3px double grey}
                section.grphypo > forml {grid-column:2;}
                section.grphypo > lieu {grid-column:3}
                section.grphypo > prof {grid-column:4}
                section.grphypo > note {grid-column:5}

	    /* relations*/
                table.grprel { width:calc(100% - 10px); margin:0 auto; ; padding:0; border-collapse:collapse;font-size: 90%;}
                table.grprel tbody tr {border-top:solid 1px lightblue;}
                table.grprel tbody tr:first-of-type {border-top:0;}
                table.grprel tbody tr:nth-of-type(odd) {background-color: cornsilk;}
                table.grprel tbody tr >td {vertical-align:top; padding: 2px; background-clip:content-box}

	    /* évènements */
        calrev {background-repeat:no-repeat;background-position:left center;background-size:15px;padding-left:20px;background-Image:url("images/btn_bonnet.gif");}
                section.grpevent {display:grid; grid-template-columns: repeat(3,minmax(175px,max-content)) auto;}
                section.grpevent:before{grid-column: 1/span 4;}
                section.grpevent>div.lgnevent {display:contents; font-size: 90%;line-height: 15px}
                section.grpevent>div.lgnevent:not(:first-child)>* {box-shadow:cadetblue 0px -1px}
                section.grpevent>div.lgnevent>div{vertical-align: top; white-space: nowrap; padding:3px 5px;}
                section.grpevent>div.lgnevent>div.cmnt{white-space: normal;}
                section.grpevent div.evdt {grid-column:1; text-align: right;}
                    section.grpevent div.evdt >calrev {display: block;font-weight : bolder; line-height:17px;}
                section.grpevent div.cmne {grid-column:2; cursor: help; white-space: pre-line}
                    section.grpevent div.cmne::first-line {text-decoration: underline}
                    section.grpevent div.cmne[data-lxdit]:after{content:attr(data-lxdit);display:block;font-style: italic; color: navy;}
                section.grpevent div.typ {grid-column:3;}
                    section.grpevent div.typ.etcv {background-color: #FFFDC4;color:darkred;font-weight: bold}
                    section.grpevent div.typ.eP {background-color: rgba(100,200,200,0.75); color: white}
                    section.grpevent div.typ.divers {background-color: rgba(0, 0, 0, 0.00)}
                    section.grpevent div.typ.mili {background-color: #68F2FF;}
                    section.grpevent div.typ.notr {background-color: darkred; color: white}
                    section.grpevent div.typ.reside {background-color: white; font-style: italic; font-weight: bold}
                section.grpevent div.cmnt {grid-column:4;}
                section.grpevent div.cmnt .notes {padding-left: 25px;}
                section.grpevent div.cmnt .notes:not([class*=" t"]) {padding-left: 0px;}
				section.grpevent div.cmnt .notes:before{margin-left: -25px; font-weight:bold}

                section.grpevent div.cmnt >div.bk_vignette {display:inline-block;margin:3mm; max-width: 150px;pointer-events: all;}
                section.grpevent div.cmnt >div.bk_vignette * {pointer-events: none;}
                section.grpevent div.cmnt >div.bk_vignette >img{display:block; max-width:120px; max-height:120px; border: grey 2px solid;border-radius: 5px;cursor: pointer;}

	    /* carrière mili */
                section.grpmili {display:grid; grid-template-columns: repeat(3,max-content) 1fr;}
                section.grpmili:before{grid-column: 1/span 4;}
                section.grpmili>div.lgnevent {display:contents; font-size: 90%;line-height: 15px}
                section.grpmili>div.lgnevent:not(:first-child)>* {box-shadow:cadetblue 0px -1px}
                section.grpmili>div.lgnevent>div{vertical-align: top; white-space: nowrap; padding:3px 5px;}
                section.grpmili>div.lgnevent>div.cmnt{white-space: normal;}
                section.grpmili div.evdt {grid-column:1; text-align: right;}
                    section.grpmili div.evdt >calrev {display: block;font-weight : bolder; line-height:17px;}
                section.grpmili div.cmne {grid-column:2;}
                section.grpmili div.grade {grid-column:3;}
                section.grpmili div.grade:not(:empty) {background-color: rgba(100,200,200,0.75); color: white}
                section.grpmili div.cmnt {grid-column:4;}

	    /* famille */
			    div.tabfamille {display:grid; grid-template-columns:1fr 250px; margin : 0 5px 5px 5px; vertical-align:top;background-color:white;padding:0px 8px 8px 8px;border:3px ridge #f1e5e5;}
                div.tabfamille > .epoux {grid-column: 1/3;font-size:110%}
                div.tabfamille > .epoux >span{text-decoration : underline; color:blue}
                div.tabfamille > .enfants{grid-area:2/2/span 2/2; height:fit-content; border:2px ridge lightgrey; vertical-align:top;pointer-events:none}
                div.tabfamille > .detmarg{grid-column:1; grid-row: 2;padding-left: 10px;margin-top:5px;}

                div.tabfamille >div.lstenfants {grid-column:1; grid-row: 3; counter-reset: nbenfants; margin: 2mm 0 0 5mm ; border-top: 1px solid lightgrey;
                    display:grid;grid-template-columns: repeat(var(--nbcol,4),minmax(auto,1fr));
                }
                div.tabfamille >div.lstenfants:before {content:attr(data-lib)" :"; grid-row: 1; grid-column: 1 / span var(--nbcol); font-size:120%;font-weight:bold; text-decoration: underline;}
                div.tabfamille >div.lstenfants >div.eft {box-sizing:border-box;margin : 3px 0; padding:0 3px; overflow-x: visible;vertical-align:top;}
                div.tabfamille >div.lstenfants >div.eft:before {counter-increment: nbenfants;content:counter(nbenfants);display:inline;padding:0px 2px; margin-right:5px;background-color:navy;color:yellow;text-align: center;font-size:90%;}
                div.tabfamille >div.lstenfants >div.eft >div.eft_det {margin-left:5px; padding-left: 12px; font-size: var(--ft12);
                    background-image: url('/page/images/puce2.gif'); background-size: 8px; background-repeat: no-repeat; background-position: left 3px;}
                div.tabfamille >div.lstenfants >div.eft div.divInd {display:inline}
                /*********/
                div.tabfamille > div.detmarg calrev {margin-left:10px; font-weight: bold;}
                div.tabfamille > div.detmarg > div.lgnevent:before {content: "";display: inline-block;width: 8px;height: 8px;background-image: url("images/puce2.gif");background-size: cover}
                div.tabfamille > div.detmarg > div.lgnevent>div.typ {display:inline; padding-left:5px;font-weight: bold;}
                div.tabfamille > div.detmarg > div.lgnevent>div.evdt {display: inline;}
                    div.tabfamille > div.detmarg > div.lgnevent>div.evdt:before {content:attr(exacte)}
                    div.tabfamille > div.detmarg > div.lgnevent>div.evdt>calrev:before {content:" {"}
                    div.tabfamille > div.detmarg > div.lgnevent>div.evdt>calrev:after {content:"}"}
                div.tabfamille > div.detmarg > div.lgnevent>div.cmne{ display:inline}
                    div.tabfamille > div.detmarg > div.lgnevent>div.cmne:before{content:", "}
                    div.tabfamille > div.detmarg > div.lgnevent>div.cmne>* {display:inline}
                    div.tabfamille > div.detmarg > div.lgnevent>div.cmne>div.compl {padding-left:3px; font-style: italic; color: navy;}
                    div.tabfamille > div.detmarg > div.lgnevent>div.cmne[data-lxdit]:after{content:attr(data-lxdit);display:inline;margin-left:2px;font-style: italic; color: navy;}
                div.tabfamille > div.detmarg > div.lgnevent>div.cmnt {background-color: rgba(0,0,0,0); margin-left:40px}
                    div.tabfamille > div.detmarg > div.lgnevent>div.cmnt .notes {padding-left: 25px;}
                    div.tabfamille > div.detmarg > div.lgnevent>div.cmnt .notes:not([class*=" t"]) {padding-left: 0px;}
                    div.tabfamille > div.detmarg > div.lgnevent>div.cmnt .notes:before{margin-left: -25px; font-weight:bold}

                    div.tabfamille > div.detmarg div.cmnt >div.bk_vignette {pointer-events: all;}
                    div.tabfamille > div.detmarg div.cmnt >div.bk_vignette * {pointer-events: none;}
                    div.tabfamille > div.detmarg div.cmnt >div.bk_vignette >img{max-width:75px; max-height:75px; border: grey 2px solid;border-radius: 5px; cursor: pointer;}
                    div.tabfamille > div.detmarg div.cmnt >div.bk_vignette >div {display:inline; padding-right: 5px; font-weight: bold; font-style: italic;vertical-align: top;}
    
				div.tabfamille > .enfants>div.entt {padding:5px;border-bottom:inherit;text-align:center;font-size:120%;text-transform:uppercase; font-weight:bold;background:beige}
                div.tabfamille > .enfants>div {padding:1px 2px;border-bottom:0.5px solid rgba(125,125,125,0.5);pointer-events: all;overflow: hidden; font-size:var(--ft11)}
                div.tabfamille > .enfants>div.divInd {text-decoration : underline; color:blue}
                div.tabfamille > .enfants>div:last-child{border-bottom:none}
                div.tabfamille > .enfants>.divInd>* {pointer-events: none;}
                div.tabfamille > .enfants>.divInd>span {display: inline}
                div.tabfamille > .enfants>.divInd>span:last-child {text-overflow: ellipsis}
                div.tabfamille > .enfants>.divInd>span:first-child {float: right;padding-left:10px;padding-right: 10px}
                div.tabfamille > .enfants>.sxH {background-color: var(--bgsxH)}
                div.tabfamille > .enfants>.sxF {background-color: var(--bgsxF)}
                div.tabfamille > .enfants>.sxE {background-color: var(--bgsxE)}
                div.tabfamille > .enfants>.sxI {background-color: var(--bgsxI)}
                div.tabfamille > .enfants> div.withSub {background-color: rgb(250,250,250)}
                div.tabfamille > .enfants> div.withSub >span.periode {float: right;padding-left:10px;padding-right: 10px}
                div.tabfamille > .enfants> div.withSub >div.enftSub {display:none;margin-left:10px;background-color: white;white-space: pre-line;font-size: 80%}
                div.tabfamille > .enfants> div.withSub:hover >div.enftSub {display:block; border-top: navy 1px dashed; padding-top: 3px;}

/*******curseur chragement*******/
    div#progress {position:absolute; left:0; top:0; z-index: 5;display: flex;width: 100%;height: 100%; flex-direction:row; text-align: center;background:rgba(75,75,75, 0.5);}  
        #progress>div#crsr{display: inline-block;flex:0 1 auto;transform-origin: center; align-self:center; margin:0px auto; height: 5px; width: 120px; padding: 0;background: linear-gradient(45deg, #ade0eb, transparent);}
                
/*******MESSAGES*******/
	div#btemsg {display:flex; position:absolute; left:0; top:0; z-index: 5;width: 100%;height: 100%; flex-direction:row; pointer-events: none; text-align: center;background:rgba(75,75,75, 0.5);} 
	div#btemsg:empty {display: none}
        div#btemsg a[onclick] {display:block; pointer-events: all;cursor:pointer;border: outset var(--brdrsys); border-radius: 10px; max-width:fit-content; margin:5px auto; padding: 4px 15px; background-color: var(--bgsys);}
	div#btemsg fieldset {border:double var(--brdrsys) 3px; margin-top: 15px;padding: 5px;text-align: left;}
    div#btemsg fieldset legend {font-size: 115%; font-weight:bold;margin-bottom: 3px; background-color: var(--bgsys);border: 1px solid var(--brdrsys);}
    div#btemsg fieldset legend:only-child {display:none}


    div#btemsg>div.newBox {flex:1 1 auto; max-width:25%; align-self:center; margin:0px auto; padding: 10px;border-style: groove;background-color: floralwhite;text-align: initial}
    div#btemsg>div.newBox> div.entt {display: block;background:navy;color: white;text-align: center;padding: 3px 5px;font-size: 130%;}
    div#btemsg>div.newBox> div[data-title]:before {font-size: 110%; font-style:italic;text-decoration: underline;}
    div#btemsg>div.newBox> *:Empty{display:none}

		#detBteInd .lgnrelt {display: list-item; list-style-type: circle;margin-left: 20px}
            #detBteInd .lgnrelt>*{display: inline-block}
		#detBteInd .prof:before{display:inline; content: 'Profession(s) :'; font-weight: bold; text-decoration: underline;margin-right:5px}
        #detBteInd .comment .divInd {display:inline-block}
        #detBteInd fieldset.signe {overflow-x:auto; pointer-events: none;}
        #detBteInd div.bk_vignette {display:inline-block; font-size:80%;margin:2mm}
        #detBteInd div.bk_vignette >img{display:block; width:80px; border: grey 1px solid;border-radius: 3px;}

		#tabcmne .cmneid {margin-top:5px; padding-bottom: 10px;border-bottom: navy 3px double}
		#tabcmne .cmneid *{margin: 2px 5px 2px 10px}	
        #tabcmne #subAR >div:nth-child(n+2):before{display:inline;content:'> '};
        #tabcmne #subAR >div:nth-child(n+3):before{display:inline;content:'>> '};

        #tabcmne #subPR >div:nth-child(n+2):before{display:inline;content:'> '};
        #tabcmne #subPR >div:nth-child(n+3):before{display:inline;content:'>> '};
        
    #btemsg>#tabcmne *:empty {display:none}
    #btemsg>#tabcmne div[lib]:before {content:attr(lib)" : "; margin:0 3px; font-size:105%; font-weight:bold; text-decoration: underline;}

	.newBox	.comment{margin-top:5px; padding-bottom: 10px;font-size: 90%;border-bottom: navy 3px double}


	#bteSignat {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
		#bteSignat .comment>span {float: right}
        #bteSignat #_prec, #bteSignat #_next {display: none;width: 50px;height: 195px;background-image: url('images/fleche_droite_2.png');background-repeat: no-repeat;background-position:center;background-size: contain;}
        #bteSignat:not([hidebtn="0"]) #_prec, #bteSignat:not([hidebtn="0"]) #_next {display:inline-block}
		#bteSignat #_prec {-ms-transform: scaleX(-1);transform: scaleX(-1);-moz-transform: scaleX(-1);}
		#bteSignat #_princ {display: inline-block;width: 360px;height: 195px;margin: 3px; padding: 3px;border: grey 2px inset;border-radius: 5px;
			background-color: white;background-size: contain;background-repeat: no-repeat;background-position: center;background-clip: content-box;}

    #bteImage {max-width: 90%;max-height: 80%;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;flex-direction: column;}
    #bteImage[data-vu] {display:flex}
		#bteImage #_princImg {display: inline-block;margin: 3px auto; padding: 3px;border: grey 2px inset;border-radius: 5px;}

		.rCmne .cmnecmt {padding: 0 15px}
		.rCmne .cmnecmt:before{content: "Notes :";display:block;padding-bottom: 5px;margin-left: -10px;font-size: 110%;text-decoration: underline;font-weight: bold;}	

		.rCmne .AR[data-ttip]:before {content: attr(data-ttip);display:block;padding-bottom: 5px;margin-left: -10px;font-size: 110%;text-decoration: underline;font-weight: bold;}
        .rCmne .AR div>div {margin-left: 10px;padding-left: 15px;background-image: url(images/flechebrise.gif);background-repeat: no-repeat}
        .rCmne .AR span {margin-right:3px; font-weight: bold;text-decoration: underline;float: left}
        
/*******Calendriers********/
div.bloc_cal {display: inline-block;padding: 15px;margin: 10px auto}
div.Calendrier {display:inline-block; font-size: var(--ft14)}
    div.Calendrier span[data-sel]{padding-left:15px; background-size: 12px;background-repeat: no-repeat;background-position: left center;}
    div.Calendrier span[data-sel="1"] {background-image: url('images/puce2.gif'); }
    div.Calendrier span[data-sel="0"] {background-image: url('images/puce1.gif');}
    div.Calendrier .btn_valid {float: right}
    div.Calendrier option {text-transform: capitalize;padding: 0 5px;font-size: var(--ft12); }
    div.Calendrier option[value="31JR"] {display: none}
    div.Calendrier[value="CG"] option[value="31JR"] {display: block}
    div.Calendrier[value="CG"] option.compl {display: none}
    div.Calendrier optgroup {display: none}
    div.Calendrier:not([value="CG"]) optgroup.mCR {display: block}
    div.Calendrier[value="CG"] optgroup.mCG {display: block}
    div.Calendrier:not([value="CG"]) optgroup.aCR {display: block}
    div.Calendrier[value="CG"] optgroup.aCG {display: block}
fieldset.resultat {display: inline-block; min-width: 200px; vertical-align: top;margin-left:15px;border:double 4px darkgrey;line-height: 20px}
    fieldset.resultat span:nth-of-type(odd) {font-size: var(--ft13); text-decoration: black double unterline;margin-right: 5px}
    fieldset.resultat span:nth-of-type(even) {font-size: var(--ft1); padding:0px 5px; background-color: rgba(231, 245, 137, 0.27)}
    fieldset.resultat span:empty {display: none}

/********  Accueil  ********/
    .descgenea {margin-top:10px;counter-reset: sectnGen;}
    .descgenea >section {margin-left:8px}
    .descgenea >section:before {counter-increment: sectnGen; content: counter(sectnGen)") "attr(title)" : ";
        display: block; margin : 8px 0 3px -8px; white-space: pre-line;list-style: upper-latin;text-decoration: underline;}
    .descgenea >section >p::first-line {padding-left:10px}
    .descgenea >section >p {margin-bottom:5px}

@media print {
    /*@page :first {margin:auto}*/
    @page :left { margin-right:12.5mm;}
    @page :right { margin-left:12.5mm;}

    body > :not(main) {display:none}
    body > main > *:not(#zonefiche) {display:none}
}