/* Cascade Style Sheet for the site  :Tu Peux Savoir */
/* Author : Luc Miller */

/* Webfont: LatoLatin-Regular */@font-face {
    font-family: 'LatoLatinWeb';
    src: url('fonts/LatoLatin-Regular.eot'); /* IE9 Compat Modes */
    src: url('fonts/LatoLatin-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/LatoLatin-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/LatoLatin-Regular.woff') format('woff'), /* Modern Browsers */
         url('fonts/LatoLatin-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}
/* Webfont: LatoLatin-Italic */@font-face {
    font-family: 'LatoLatinWeb';
    src: url('fonts/LatoLatin-Italic.eot'); /* IE9 Compat Modes */
    src: url('fonts/LatoLatin-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/LatoLatin-Italic.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/LatoLatin-Italic.woff') format('woff'), /* Modern Browsers */
         url('fonts/LatoLatin-Italic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}
/* Webfont: LatoLatin-Bold */@font-face {
    font-family: 'LatoLatinWeb';
    src: url('fonts/LatoLatin-Bold.eot'); /* IE9 Compat Modes */
    src: url('fonts/LatoLatin-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/LatoLatin-Bold.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/LatoLatin-Bold.woff') format('woff'), /* Modern Browsers */
         url('fonts/LatoLatin-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

/* Webfont: LatoLatin-BoldItalic */@font-face {
    font-family: 'LatoLatinWeb';
    src: url('fonts/LatoLatin-BoldItalic.eot'); /* IE9 Compat Modes */
    src: url('fonts/LatoLatin-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/LatoLatin-BoldItalic.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/LatoLatin-BoldItalic.woff') format('woff'), /* Modern Browsers */
         url('fonts/LatoLatin-BoldItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

/* blockquote strong {font-weight: normal; font-style:italic;} */
blockquote strong {
    font-weight: normal;
    text-decoration: underline;
}
q strong {
    font-weight: normal;
    text-decoration: underline;
} /* q strong {font-weight: normal;} */
/* section p  > strong {font-weight: normal;} */
/* footer strong {font-weight: normal;} */
/* p > strong {font-weight: normal;} */

/* header  { */
/*     padding: 10px 20px; */
/*     margin: 0px 8px; */
/*  background: ivory; */
/* border: groove;} */
/* header  { */
/*     padding: 0px 10px 10px; */
/*     margin: 0px 8px; */
/* } */
header  {
    /* padding-bottom: 10px; */
    margin: 0px 18px;
    /* border-bottom: thin groove; */
}
header::after {content:""; display:block;  border-bottom: 2px solid #000000; border-top: 1px solid #000000; padding-top: 1px; margin: 10px 0px 0px}
/* header::after {content:""; display:block;  border-bottom: medium solid #000000; border-top: thin solid #000000; padding-top: 1px; margin: 10px 0px 0px} */
header h1 {
    font-family: Didot, "Didot LT STD",  "Bodoni MT", "Bodoni 72", Palatino, "Book Antiqua", Garamond, "Times New Roman", serif;
    font-weight: normal;
    font-size: 30px;
}
h2 {
    font-weight: bold;
    font-size: 1.2em;
    border-bottom: thin solid;
}
h3 {
    font-weight: normal;
    font-size: 1em;
}
h3::before {
    content: "❦\00A0\00A0"; /* Floral Heart ❦ \2766 */
}

img {
    max-width: 100%;
}
.annexe{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
} 
.subtitle {}
.version {display: none;}
.signature {
    text-align: right;
    font-style: italic;
}
.adresse {text-align: center;}
/* The following works but not scaled with fonts, blurred when zoomed, not nice for a pdf  */  
/* ul {list-style-image: url(https://upload.wikimedia.org/wikipedia/commons/8/85/Aldine_typographique_%28Zapf%29.svg)} */
/* ul {list-style-image: url("img/Aldine_typographique_(Zapf).png")} /\* 11px from SVG by Inkscape *\/ */
/* article ul {list-style-image: none} */  
ul {list-style-type: none;}
ul li::before {
    display: inline-block;
    font-size: 1em;
    line-height: 0;
    margin-left: -1.2em;
    width: 1.2em;
    content: "❧";/\* Rotated Floral Heart Bullet ❧ \2767 *\/ */ 
}
/* ul {list-style-type: "❧\00A0\00A0";} /\* Only works with Firefox *\/ */ 

.ulh {
    display: flex;
    /* align-items: center; */
    justify-content: center;
    /* justify-content: space-evenly; */
    /* text-align: center; */
}

/* .tables { */
/*     display:block; */
/* } */

.tables {
    display:flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center; 
}

.tables col {
    width: 2em;
}
.tables col:first-of-type {
    /* width: 15em;  *//* TPS-SANS */
    width: 13em; /* TPS-AVEC */
}
main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
main > section {
    flex: 1 1 30%;
    background: ivory; /* rgb(255,255,240) */   
    padding: 0px 10px;
    margin: 0px 8px 16px;
}
main > section:first-of-type {
    flex: 100%;
    background: none;
    padding: 10px;
    margin: 8px;
}
main > section:first-of-type::after {content:""; display:block;  border-bottom: 2px solid #000000; border-top: 1px solid #000000; padding-top: 1px; margin: 10px -8px 0px;}
/* section section {padding: 0px; margin: 0px; border-bottom: thin solid;} */
main section section {border-bottom: thin solid;}
main section section:last-of-type {border: none;}

article {
    /* font: 14px/1.6 Helvetica, "Trebuchet MS", Verdana, sans-serif; */
    /* font: 15px/1.4 LatoLatinWeb, Helvetica, "Trebuchet MS", Verdana, sans-serif; /\* This is a more original alternative with SIL Open Font License  *\/ */
    /* font: 18 px "Computer Modern Serif", serif; */
    /* background: white; */
    padding: 0px 10px;
    /*     padding: 10px 21px; */
    /*     margin: 10px 44px; */
    /* background: ivory;  */
}
article::before {content:""; display:block; border-top: 2px solid #000000; border-bottom: 1px solid #000000; padding-top: 1px;}

article figure {
	margin: 0 0 0 10px;
	padding: 0;
	float:right;
}
article figcaption {
    background-color: #222;
    color: #fff;
    font-size: smaller;
    padding: 2px;
    margin: 0;
    text-align: center;
}

a {
    outline: none;
    text-decoration: none;
    /* padding: 2px 1px 0; */
}

td { /* curiously this empty style is needed (and the otable is sensitive to the order of the followin styles) */
    /* border: 1px solid rgb(190,190,190);  */
    /*   padding: 2px 2px 2px 5px; */
}

td:nth-child(3n+2), td:nth-child(3n+3) {
    text-align: center;
}

tr:nth-child(odd) td {
    background-color: rgb(245,245,245);
    border: 1px solid rgb(190,190,190); 
    padding: 2px 2px 2px 5px;
}

tr:nth-child(even) td {
    background-color: rgb(250,250,250);
    border: 1px solid rgb(190,190,190); 
    padding: 2px 2px 2px 5px;
}

/* tr:hover {background-color: violet;} */

th {
    border: 1px solid rgb(190,190,190);
    padding: 2px 2px 2px 5px;
    background-color: rgb(225,225,225);
    text-align: center;
}

table {
    border-collapse: collapse;
    border: 2px solid rgb(200,200,200);
    font-size: 0.762em;
    margin: 0px 8px 8px;
}
/* letter-spacing: 1px; */
/* caption { */
/*   padding: 10px; */
/* } */


@media screen and (min-width: 720px) {
    .bgbrick {
	background-color: FireBrick;
    }
    .bgpat {
	background: url("img/asanoha-alhambra-Miller.svg") FireBrick repeat;
	background-size: 50px;
    }
    .bgbody {
	background: white;
	padding: 18px 10px;
	margin: 44px 51px;
    }
    body {
	/* font: 16px/1.4 Helvetica, "Trebuchet MS", Verdana, sans-serif; */
	font: 21px  "Bodoni MT", "Bodoni 72", Garamond, serif;
    }
    article {
        font: 15px/1.4 Lato, "LatoLatinWeb", Helvetica, "Trebuchet MS", Verdana, sans-serif; /* Lato is a more original alternative with SIL Open Font License  */
    }
    footer {font-size: 0.762em;}
    .subtitle {
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
    }
    .version  {display:inline;}
    .tables {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
    }  
    .image{
	display: flex;
	align-items: center;
	justify-content: center;
	/* justify-content: space-evenly; */
    }
    img {
	max-width: 330px;
	border: groove;
    }
    nav {
	padding : 10px;
    }
    nav::before {content:"☞\00A0\00A0"}

    a:link {
	color: indigo;
    }
    a:visited {
	color: purple;
    }
    a:focus, a:hover {
	border-bottom: 1px solid;
    }
    a:active {
	color: red;
    }
    a[href*="http"] {
	background: url("img/external-link-52.png") no-repeat 100% 60%;
	background-size: 12px 12px;
	padding-right: 15px;
    }
    article a[href*="http"] {
	background: url("img/external-link-52.png") no-repeat 100% 45%;
	background-size: 10px 10px;
	padding-right: 13px;
    }
    .image a[href*="http"] {
	outline: none;
	text-decoration: none;
	background: none;
	padding-right: 0;
    }
}

@media screen and (min-width: 720px) and (max-width: 1245px) {
    .subtitle {display: inline;}
}

@media screen and (max-width: 1244px) {
    main > section {
	flex: 1 1 100%;
    }
}

@media print {
    /* * { overflow: visible !important; } */
    main { display: block}
    body {
	font: 11pt "Bodoni MT", "Bodoni 72", Garamond, serif;
    }
    article {
	font: 9pt/1.4 Helvetica, "Trebuchet MS", Verdana, sans-serif; /* TPS-SANS */
	/* font: 10pt LatoLatinWeb, Helvetica, "Trebuchet MS", Verdana, sans-serif; /\* This is a more original alternative with SIL Open Font License *\/ */
    }
    header h1 {
	font-size: 18pt;
    }
    header  {
	margin: 0px;
    }
    header::after {content:""; display:block;  border-bottom: 2pt solid #000000; border-top: 1pt solid #000000; padding-top: 1pt; margin: 6pt 0pt 0pt}
    main > section:first-of-type::after {content:""; display:block;  border-bottom: 2pt solid #000000; border-top: 1pt solid #000000; padding-top: 1pt; margin: 10pt -8pt 0pt}
    article::before {content:""; display:block; border-top: 2pt solid #000000; border-bottom: 1pt solid #000000; padding-top: 1pt;}
    section p  > strong {font-weight: normal;}
    footer strong {font-weight: normal;}
    a {color:currentcolor}
    a[href*="http"] {
	color: indigo;
    }
    a[href*="#"] {
	color: darkred;
    }
    /* a[href*="index.html"] { */
    /* 	color: initial; */
    /* }/\* this turns off the coloring of page links from the annexe page to the appel page*\/ */
    /* a[href*="annexe.html"] { */
    /* 	color: initial; */
    /* }/\* this turns off the coloring of page links from the appel page to the annexe page*\/ */
    nav {
	display: none;
    }
    article figure {
	display: none;
    }
    article {
	break-inside: avoid-page; 
    }
    article:first-of-type {	
	break-before: page;
    }
    main > section {
	padding: 0px;
	margin: 0px;
    }
    main > section:first-of-type {
	padding: 0px;
	margin: 8pt 0px 0px;
    }
    /* main > section { */
    /* 	break-inside: avoid-page;  */
    /* } */
    h3 {break-after: avoid-page;}
    .subtitle {white-space: nowrap;}
    .tables {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
    }
    .image {
	margin: 0pt 20pt;
	float:left;
    }
    img {
	max-width: 110pt;
	height: auto;
	border: groove;
    }

    tr:nth-child(odd) td {
	background-color: rgb(245,245,245);
	border: 1pt solid rgb(190,190,190); 
	padding: 2pt 2pt 2pt 5pt;
    }

    tr:nth-child(even) td {
	background-color: rgb(250,250,250);
	border: 1pt solid rgb(190,190,190); 
	padding: 2pt 2pt 2pt 5pt;
    }

    /* tr:hover {background-color: violet;} */

    th {
	border: 1pt solid rgb(190,190,190);
	padding: 2pt 2pt 2pt 5pt;
	background-color: rgb(225,225,225);
	text-align: center;
    }

    table {
	border-collapse: collapse;
	border: 2pt solid rgb(200,200,200);
	font-size: 0.762em;
    }
}