/* FONTS 'WORK SANS'
   DOCUMENTATION : http://weiweihuanghuang.github.io/Work-Sans/
-------------------------------------------------- */
@font-face {font-family: 'work_sansmedium';src: url('WorkSans-Medium.woff') format('woff');font-weight: normal;font-style: normal;}

/* RESET CSS
-------------------------------------------------- */
*, *:before, *:after{margin:0;padding:0;border:0;box-sizing:border-box}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary{display:block}
::-moz-selection{background:#000;color:#fff}
::selection{background:#000;color:#fff}
img{display:block;margin-bottom:1em;width:100%;height:auto;}
sup, sub {vertical-align: baseline;position: relative;top: -0.4em;}
sub {top: 0.4em}
.querie{display:none}
.noquerie{display:inline}
a{color:#000;word-break: break-all;border-bottom:.1em solid;text-decoration:none;display:inline;}
a:focus{outline:0}

/* TYPOGRAPHIE
-------------------------------------------------- */
*{-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}
*{-webkit-font-variant-ligatures: common-ligatures;font-variant-ligatures: common-ligatures;-webkit-font-feature-settings: "liga", "clig";font-feature-settings: "liga", "clig";-webkit-font-feature-settings: "tnum";font-feature-settings: "tnum";}
.frac{font-variant-numeric: diagonal-fractions;-webkit-font-feature-settings: "frac";font-feature-settings: "frac";}
.swash{-webkit-font-feature-settings: "swsh" 2;font-feature-settings: "swsh" 2;}
.old {font-variant-numeric: oldstyle-nums;-webkit-font-feature-settings: "onum";font-feature-settings: "onum";}

/* SITE
-------------------------------------------------- */
html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
body{display:none;font-family:'work_sansmedium';counter-reset: foo;letter-spacing:0.025em;line-height:1.25em;color:#000}
body{font-size: calc(16px + (20 - 16) * ((100vw - 420px) / (1600 - 420)));}
section{width:50%;float:left;}

/* HEADERS
-------------------------------------------------- */
h1, h2, h3, h4{display:inline;font-size:1em;line-height:1em;font-weight:normal;margin:0}
h2{font-style:italic}

/* NAV
-------------------------------------------------- */
nav dl{width:100%;padding:1em 1em 0 1em;margin-bottom:1em;display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
nav dd{width:33%;word-break: break-all;}
nav dd:nth-child(2){text-align:center}
nav dd:nth-child(3){text-align:right}

/* SECTION .images
-------------------------------------------------- */
section.images{padding:0 .5em 2em 1em}
section figure{display: table;padding-bottom:2em}
section.images figcaption{padding: 1em 0 2em; display: table-row;}

/* Liste des images et numérotation */
section figcaption ul {text-decoration: none;display: table;margin:0;width:50%}
section figcaption ul {padding-left:0}
section figcaption ul li {counter-increment: foo;display: table-row;}
section figcaption ul li:before {content: counter(foo) ".";width:2em;display: table-cell;vertical-align:top;text-align: left;}

/* SECTION .textes
-------------------------------------------------- */
section.textes{padding:0 1em 2em .5em}
section p+p{text-indent:2em}
section p:nth-child(2n){margin-bottom:1em}
/* Liste dans le texte (dialogue) */
section .texte ul{list-style: none;padding-left:2em;margin:1em 0 1em 0}
section .texte ul li:before{content:'~';padding-right:1em}

/* TABLEAU CV
-------------------------------------------------- */
section table{border-collapse: collapse;margin-bottom: 1em;margin-top:3em;}
section table h2{font-style:normal;text-indent:0}
section table td:nth-child(1){padding-right: 1em;vertical-align: top;}
section table td:nth-child(2){text-indent: -2em;padding-left:2em;} 
section table tr:nth-child(1) td:nth-child(2){padding-bottom:1em} 

/* FOOTER
-------------------------------------------------- */
footer{width:100%;background:#fff;color:black;padding:2em;border-top:2px solid;text-align: center;float:left;cursor:n-resize}
main{float:left}
main.cv{border-top:2px solid black}


/* 
--------------------------------------------------
--------------------------------------------------
MEDIA QUERIES (Version mobile)
-------------------------------------------------- 
-------------------------------------------------- 
*/
@media only screen and (max-width:1024px){
    section figcaption ul{width:100%}
}
@media only screen and (max-width:600px){
    footer{position:fixed;bottom:0;padding:1em 2em}

    
    section.images, section.textes, section figcaption ul{width:100%}
    section.images, section.textes{padding:1em}
    section.textes table:nth-child(1){margin:0}
    .querie{display:inline}
    .noquerie{display:none}
    
    nav dd:nth-child(1){word-break:keep-all;}
    nav dd:nth-child(1) h1{border-bottom:1px solid transparent;width:70%;word-break:keep-all;}
    nav dd:nth-child(1){width:50%;word-break:keep-all;}
    nav dd:nth-child(2){width:25%;text-align:center}
    nav dd:nth-child(3){width:25%;text-align:right}

    thead, tbody,th, td, tr {display: block;}
    section table tr{width:100%;}

    section table td:nth-child(1){width:100%;padding-left:2em}
    section table td:nth-child(2){width:100%;text-indent:0em;padding-left:0em;display:table} 
    section table td:nth-child(2):before{content:'\2022';text-indent:0;width:1em;display:table-cell}
    section table tr:nth-child(1) td:nth-child(2):before{content:'';padding-bottom:2em;text-indent:0;width:2em;display:table-cell}

}
@media only screen and (max-width:400px){
}

/* 
--------------------------------------------------
--------------------------------------------------
MEDIA QUERIES (Version print)
-------------------------------------------------- 
-------------------------------------------------- 
*/
@media print {
    section.images, section.textes, section figcaption ul{width:100%}
    section.images, section.textes{padding:1em}
    figure{page-break-inside:avoid} 
    section.textes table:nth-child(1){margin:0}
    main.cv{page-break-inside: avoid;border-top:2px solid white;} 
    @page{size:auto;margin: 1em;} 
    body{margin: 0} 
    footer{display:none} 
}