@charset "utf-8";
@import "/page/css/defaut.css";

:root {
    --dftHdrFont: adamina;
    font-family:Arial, verdana, sans-serif;
    --hdrcolor:azure; 
    --hdroppcolor: #080808 ; 
    --hdrselbgclr: rgba(240, 255, 255, 0.9) /*azure avec transparence*/
}
/***********  fonts  ***************/
@font-face {
    font-family: adamina;
    font-weight: normal;
    src: url(/page/fonts/Adamina-Regular.ttf);
}
@font-face {
    font-family: titlefont;
    font-weight: normal;
    src: url(/page/fonts/DMSerifText-Regular.ttf);
}
@font-face {
    font-family: robotocnd;
    font-weight: normal;
    src: url(/page/fonts/RobotoCondensed-VariableFont_wght.ttf);
}

@counter-style fleche {
    system: cyclic;
    symbols: "\2BA9";
    suffix: "\0020\0020";
}

@media screen and (hover:hover) {
    :root {
        font-size :  0.6vw; 
        --lastcolw : 40px;
        --fontsizemenu : 1.75rem;
    }
    body { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr [col-fin]; height: 100vh; width: 100vw; overflow-wrap: normal; line-height: 1.4;}

        body > :is(header,footer) {background-color:#29296d}
        body > header {grid-row:1; display: grid; grid-template-columns: auto 1fr; grid-template-rows: repeat(2,auto);}
            body > header > img {grid-column: 1; grid-row: 1 / span 2; max-width: 10vw; margin-inline: 0.5vw; align-self: center; }
            body > header > div.hdrtitl {grid-row: 1; grid-column: 2; width:fit-content; justify-self:center; align-self: center; font-size: 4rem; font-family: var(--dftHdrFont); font-style: italic; color:#FFE97E}

            body > header > nav {grid-column: 2; grid-row: 2; margin: 0.25rem 30% 0.25rem 1rem;}
                body > header > nav > img {display:none}
                body > header > nav > ul {display: grid; grid-template-columns: repeat(4, 1fr);padding: 0; border: ridge 4px currentColor; background-color: #eaeaea;
                        border-radius: 8px; font-weight: bold; font-size: var(--fontsizemenu); color:var(--hdroppcolor)}

                    body > header > nav > ul > li {padding: 0.25rem;  overflow: hidden; text-overflow: ellipsis; white-space:nowrap; border-right: currentColor 3px double; text-align: center;}
                    body > header > nav > ul > li:last-child {border-right: none;}

                    body > header > nav > ul > li:where(:hover,[aria-selected]) {background-color: var(--hdrselbgclr); border-right-color: currentColor; color: var(--hdroppcolor)}


                    body > header > nav > ul > li:empty {display: none}
                    /*body > header > nav > ul > li:hover {display: block;border: 1px solid #cbcbcb;border-bottom: 0;border-radius: 3px 3px 0px 0px ;}*/

                    body > header ul.submenu {display: none; position: absolute; float: left; top: calc(2rem + 8px); left: -1px; padding: 10px; list-style:fleche inside; text-align: left;
                            opacity: 0; background-color:var(--hdrcolor);
                            border: 1px solid var(--hdroppcolor); border-top: 0; border-radius: 0px 0px 10px 10px;
                        }
                    body > header > nav > ul > li:hover > ul.submenu {opacity: 1;display: flex; flex-direction: column;}
                    body > header ul.submenu > li {overflow-x: visible; white-space: nowrap; font-size: 80%;}

        body > main {grid-row:2; display:grid; grid-template-rows:0.5rem 1fr 0.5rem; grid-template-columns:0.5rem 1fr 0.5rem; background-color: #f7f4f0; overflow-y:scroll; }
            body > main > article {display:none; grid-row:2; grid-column:2; font-family: robotocnd; color:#333; font-size:1.5rem;}
            body > main > article[aria-selected] {display:flex; flex-direction: column;}
            /*body > main > article[aria-label]:not([aria-label="Accueil"]):before {content:attr(aria-label); display:block; margin-bottom:2rem; padding-bottom: 0.25em; border-bottom: double 0.2em currentColor;
                background-color: var(--hdrselbgclr); text-align: center; font-family: var(--dftHdrFont); font-size:4rem; color:navy;}*/
            body > main > article > :is(div, figure, section) {width:95%; margin:0 auto; margin-top:2rem; padding:0.5rem 1rem; border: solid 1px #333; background-color: var(--hdrselbgclr);}
            body > main > article > :is(div, figure, section):first-of-type {margin-top:0.5rem}
            /*body > main > article > :is(div, figure, section):nth-child(even) {align-self: end;}*/
            body > main > article > figure > img {width:25%; float:left; margin-inline: 0 1rem}
            body > main > article > figure:nth-child(even) > img {width:25%; float:right; margin-inline: 1rem 0}

            body > main > article > :is(div, figure, section) h3 {margin-bottom:1rem; text-decoration:underline; text-underline-offset: 0.15em; font-family: var(--dftHdrFont); font-size:1.75em; color:navy;}
            body > main > article > :is(div, figure, section) h4 {margin-block:0.15em; font-weight: bold; font-size:1.2em}
            body > main > article > :is(div, figure, section) p {margin-block: 0.25em;}

            body > main > article > footer {display:none}
        
        body > footer {grid-row:3; display: grid; grid-template-columns: repeat(3,1fr); padding: 5px 2rem; font-family: var(--dftHdrFont); font-size:1.75rem; color:#FFE97E;}
        body > footer > * {margin:0 auto; width:fit-content; align-self: center; justify-self: center;}
            body > footer > :first-child {grid-column:1; }
            body > footer > :nth-child(2) {grid-column:2; }
            body > footer > :last-child {grid-column:3; }

        article#pgaccueil > :is(div, figure, section) h3 {display:list-item; list-style: fleche inside}

        article#pggenea figure.detail {display:flex}
        article#pggenea figure.detail > img {max-width:35%; margin-inline:1em; border:solid 1px grey; background-color:rgba(255,255,255,0.5); vertical-align: text-top;}

        article:is(#pgsrvc,#pgfonc) > section[aria-label]:before {content:attr(aria-label); display:block; margin-bottom:1rem; 
                text-decoration:underline; text-underline-offset: 0.15em; font-family: var(--dftHdrFont); font-size:1.5em; color:navy;}
}


@media screen and (hover:none) {
    body { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr [col-fin]; height: 100vh; width: 100vw; overflow-wrap: normal; line-height: 1.4;}

        body > :is(header,footer) {background-color:#29296d}
        body > header {grid-row:1; display: grid; grid-template-columns: auto 1fr var(--lastcolw); grid-template-rows: auto;}
            body > header > img {grid-column: 1; max-width:10vw}
            body > header > div.hdrtitl {grid-row: 1; grid-column: 2; width:fit-content; justify-self:center; align-self: center; font-size: 5rem; font-family: var(--dftHdrFont); font-style: italic; color:#FFE97E}

            body > header > nav {grid-column: 3; align-self: end; height:var(--lastcolw); justify-content: right;}
                body > header > nav > img {margin: 0 10% 10% 0%; width:90%;}
                body > header > nav > ul {float: right; margin: -2px 2px 0; padding: 0; border: ridge 4px currentColor; background-color: #eaeaea;
                        border-radius: 8px; font-weight: bold; font-size: var(--fontsizemenu); color:var(--hdroppcolor)}
                body > header > nav:not(.hover) > ul  {display:none;}

                    body > header > nav > ul > li {padding: 4px 10px; line-height: 1.5em; white-space:nowrap; border-bottom: currentColor 3px double; text-align: right;}
                    body > header > nav > ul > li:last-child {border-bottom: none;}

                    body > header > nav > ul > li:where(:hover,[aria-selected]) {background-color: var(--hdrselbgclr); border-right-color: var(--hdroppcolor); color: var(--hdroppcolor)}


                    body > header > nav > ul > li:empty {display: none}

        body > main {grid-row:2; display:grid; grid-template-rows:0.5rem 1fr 0.5rem; grid-template-columns:0.5rem 1fr 0.5rem; background-color: #f7f4f0; overflow-y:scroll; }
            body > main > article {display:none; grid-row:2; grid-column:2; font-family: robotocnd; color:#333; font-size:var(--fontsizemenu);}
            body > main > article[aria-selected] {display:flex; flex-direction: column;}
            body > main > article[aria-label]:not([aria-label="Accueil"]):before {content:attr(aria-label); display:block; margin-bottom:2rem; padding-bottom: 0.25em; border-bottom: double 0.2em currentColor;
                background-color: var(--hdrselbgclr); text-align: center; font-family: var(--dftHdrFont); font-size:4rem; color:navy;}
            body > main > article > :is(div, figure, section) {width:95%; margin:0 auto; margin-top:2rem; padding:0.5rem 1rem; border: solid 1px #333; background-color: var(--hdrselbgclr);}
            body > main > article > :is(div, figure, section):first-of-type {margin-top:0.5rem}
            /*body > main > article > :is(div, figure, section):nth-child(even) {align-self: end;}*/
            body > main > article > figure > img {width:25%; float:left; margin-inline: 0 1rem}
            body > main > article > figure:nth-child(even) > img {width:25%; float:right; margin-inline: 1rem 0}

            body > main > article > :is(div, figure, section) h3 {margin-bottom:1rem; text-decoration:underline; text-underline-offset: 0.15em; font-family: var(--dftHdrFont); font-size:1.5em; color:navy;}
            body > main > article > :is(div, figure, section) h4 {margin-block:0.15em; font-weight: bold; font-size:1.2em}
            body > main > article > :is(div, figure, section) p {margin-block: 0.25em;}

            body > main > article > footer {display:list-item; list-style: fleche inside; font-weight:bold; font-style: italic; font-size:1.2em; color:navy; text-decoration: underline;}
        
        body > footer {grid-row:3; display: grid; grid-template-columns: repeat(3,1fr); padding: 5px 2rem; font-family: var(--dftHdrFont); font-size:3rem; color:#FFE97E;}
        body > footer > * {margin:0 auto; width:fit-content; align-self: center; justify-self: center;}
            body > footer > :first-child {grid-column:1; }
            body > footer > :nth-child(2) {grid-column:2; }
            body > footer > :last-child {grid-column:3; }

        article#pgaccueil > :is(div, figure, section) h3 {display:list-item; list-style: fleche inside}

        article#pggenea figure.detail {display:flex}
        article#pggenea figure.detail > img {max-width:35%; margin-inline:1em; border:solid 1px grey; background-color:rgba(255,255,255,0.5); vertical-align: text-top;}

        article:is(#pgsrvc,#pgfonc) > section[aria-label]:before {content:attr(aria-label); display:block; margin-bottom:1rem; 
                text-decoration:underline; text-underline-offset: 0.15em; font-family: var(--dftHdrFont); font-size:1.5em; color:navy;}
}

@media screen and (min-width: 1201px) and (hover:none) {
    :root {
        font-size : 0.55vw;
        --lastcolw : 40px;
        --fontsizemenu : 1.75rem;
    }
}
@media screen and (min-width: 900px) and (max-width: 1200px) and (hover:none) {
    :root {
        font-size :  0.6vw; 
        --lastcolw : 40px;
        --fontsizemenu : 2.25rem;
    }
}
@media screen and (min-width: 451px) and (max-width: 899px) {
    :root {
        font-size :  0.75vw; 
        --lastcolw : 30px;
        --fontsizemenu : 2.8rem;
    }

    body > footer {grid-template-columns: repeat(2,1fr); grid-template-rows:repeat(2,auto);}
        body > footer > :first-child {grid-column:1; grid-row:1}
        body > footer > :nth-child(2) {grid-column:1; grid-row:2}
        body > footer > :last-child {grid-column:2; grid-row:1 / span 2}

}
@media screen and (max-width: 450px) {
    :root {
        font-size :  0.85vw; 
        --lastcolw : 20px;
        --fontsizemenu : 3.2rem;
   }

    body > footer {grid-template-columns: repeat(2,1fr); grid-template-rows:repeat(2,auto);}
        body > footer > :first-child {grid-column:1; grid-row:1}
        body > footer > :nth-child(2) {grid-column:1; grid-row:2}
        body > footer > :last-child {grid-column:2; grid-row:1 / span 2}
}

/*********/