font-face {
    font-family: "FontAwesomeRegular";
    src: url("/includes/fonts/fa-regular-400.ttf");
}

html {
    height: 100%;
}

body {
	text-align: left;
	font-family: Arial, sans-serif;
	font-size: 22px;
	line-height: 1em;
	margin: 0;
	height: 100%;
}

div.pageWrapper {
    min-height: 100%;
/*	max-width: 99em;
	min-width: 60em;
	margin: 0 auto;*/
	padding: 5em 0em 1em 0em;
/*	background-image: linear-gradient(to bottom right, #3e3d3d, black);*/
/*    background-image: linear-gradient(to bottom right, #656677, #0000006b);*/
    background-image: linear-gradient(to bottom right, #1210662e, #adabe817);
}

div.contentWrapper {
    max-width :1500px;
	padding: 10px 1em 10px 1em;
}

div.contentWrapperNoMenu {
    max-width :1500px;
	display: contents;
	padding: 10px 1em 10px 1em;
}

/*div.contentWrapper-Flex {
    border: solid 1px gainsboro;
    border-radius: 0.5rem;
	margin: 10px 4em;
	padding: 10px 1em 10px 1em;
	display: flex;
}*/

/*div.content {
	width: 75%;
	margin: 2em;
    border: dashed 4px red;
    border-radius: 1.5rem;
}*/

div.content {
	/* max-width: 980px;
	margin: 2em auto */
	/* width: 75%; */
	margin-top: 2em;
	margin-bottom: 2em;
	margin-left: 10%;
	margin-right: 10%;
	border: solid 4px #0070ff75;
	border-radius: 1.5rem;
	/* align-self: center; */
    padding-bottom: 2em;
}

div.contentCentered {
	display: flex;
	margin-top: 2em;
	margin-bottom: 2em;
	margin-left: 10%;
	margin-right: 10%;
	align-items: center;
	justify-content: center;
	margin-top: 2em;
	margin-bottom: 2em;
	border: solid 4px #0070ff75;
	border-radius: 1.5rem;
	padding-bottom: 2em;
}

/*
div.content h2 {
	padding: 1rem 0 1rem 1rem;
	background-image: linear-gradient(to bottom right, #d9d9d9, #111);
	border-radius: 0.5rem;
	color: #000000bd;
	margin-top: 3rem;
	width: 100%;
}*/

div.content h2 {
	/* border-top: dashed red; */
	border-bottom: dashed 4px #0070ff26;
	padding: 1em;
	/* background-image: linear-gradient(to bottom right, #b3edff, #0e7fa2); */
	color: #000000bd;
	margin-top: 0;
	/* margin-left: 0; */
	/* width: 50%; */
	border-radius: 1.5rem 1.5rem 0 0;
	line-height: 1.2em;
}

/*h2.billet {
      border-top: dashed red;
      border-right: solid red;
	padding: 1rem;
	background-image: linear-gradient(to bottom right, #b3edff, #0e7fa2);
	color: #000000bd;
	margin-top: 3rem;
	margin-left: 5rem;
	width: 50%;
	border-radius: 0 1.5rem 0 1.5rem;
}*/

div.content h3 {
	text-align: center;
}

div.text {
	padding: 1rem 5rem 0 5rem;
}

pre {
	display: inline-block;
}

blockquote p {
	text-indent: 3em;
	white-space: break-spaces;
}

blockquote {
    position: relative; 
    text-align: center;
    padding: 3rem 5rem;
    width: 80%;  /* create space for the quotes */
    color: #003a6c;
    margin: 0rem auto 2rem;
}

blockquote:before{
    font-family: FontAwesomeRegular;
    position: absolute;
    color: #003a6c;
    font-size: 10rem;
    content: "“";
    margin-top: 5rem;
    margin-right: -5rem;
    top: -20px;
    right: 100%;
}

blockquote:after{
    font-family: FontAwesomeRegular;
    position: absolute;
    color: #003a6c;
    font-size: 10rem;
    content: "”";
    margin-left: -5rem;
    left: 100%;  
    top: auto;
    bottom: 0px;
}

a {
	color: #206cae;
	text-decoration: underline;
    text-decoration-style: dotted;
	text-underline-offset: 2px;
    white-space:normal;
}

a:hover {
	text-decoration: none;
	color: #0087ff;
	background-color: inherit;
}

a.permalien {
	color: #ff000070;
	text-decoration: underline;
	text-underline-offset: 2px;
}

a.permalien:hover {
	color: #f00;
	text-decoration: none;
	background-color: inherit;
}

a.permalien::after {
  content: "🔗";
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
}

span.tooltip {
    all:unset;
	text-decoration: underline;
    text-decoration-style: dashed;
	text-underline-offset: 2px;
}

span.tooltip span {	
	display: none;
	color: #fff;
    background: rgba(41, 137, 216, 0.94);
    text-indent: 0;
	border-radius: .5em;
	text-align: center;
	position: absolute;
	border: 0.1em solid #1E5799;
    padding: 0.5em;
    margin-top: 1.5em;
    transform:translateX(-50%);
}

span.tooltip:hover span { 
	display: inline-block; 
}

ul {
    margin-left: 3em;
}

li {
line-height: 1.4em;}
em {
/*	font-weight: bold;*/
/*	text-shadow: 0 0 2px #00ffc3;*/
/*	color: #0004EE69;*/
    text-shadow: 2px 2px 10px blueviolet;
}

em em {
/*    font-weight: normal;
    text-shadow: none;
    color: #ff4646;
    text-decoration-line: underline;*/
    text-shadow: 2px 2px 10px red;
    text-decoration-line: underline;
    text-decoration-style: dotted;
}

s {
	text-decoration-thickness: 2px;
}

/*

bleu
text-shadow: 0 0 4px #0028FF;
color: #00abff;

rouge
text-shadow: 0 0 4px #FF00CB;
color: #f00;

vert
text-shadow: 0 0 4px #FFFB00;
color: #00ff87;
*/

form {
	padding: 1rem 2rem 0 2rem;
	display: grid;
	max-width: 50%;
}

form div
{
	padding: 1rem 2rem 0 2rem;
}

textarea,
input[type="text"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="url"],
input[type="file"],
input[type="submit"],
input[type="number"] {
	border: 1px solid rgba(127, 127, 127, .5);
	background: #6faeff;
	padding: 10px;
	border-radius: 5px;
	box-sizing: border-box;
	margin: 5px 0px;
}

button {
	padding: 10px 20px;
	background: #6faeff;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 4px;
	cursor: pointer;

}

button-submit {
	padding: 10px 40px;
}

button-other {
	background: white;
	color: #555;
	margin-right: 5px;
	transition: box-shadow .2s;
	box-shadow: none;
}

p {
	font-size: 1em;
/*	margin: 0 3em 2em 3em;*/
	line-height: 1.4em;
	padding: 0;
	text-align: justify;
	text-indent: 2em each-line;
}

p:not(.date, .illustration, .status, .link)::first-letter {
	font-size: 130%;
	font-weight: bold;
}

p.date {
	font-size: 0.5em;
	margin: 0.5em 0 0 0;
	line-height: 1em;
	text-align: left;
	text-indent: 0;
}

p.illustration {
	text-align: center;
	font-style: italic;
	text-indent: 0;
    padding: 1em;
}

p.illustration img {
    box-shadow: 0.5em 0.5em 1em rgba(72, 70, 81, 0.69);
	margin-top: 0.5em;
	max-width: 70%
}

p.status {
	text-align: center;
}

p.video {
	text-align: center;
	font-style: italic;
	text-indent: 0;
    padding: 1em;
}

p.video video {
    box-shadow: 0.5em 0.5em 1em rgba(72, 70, 81, 0.69);
	margin-top: 0.5em;
}

p.source {
	text-align: right;
	margin-right: 10%;
	position: relative;
}


.no_margin_top {
	margin-top: -1em;
}

details[open] summary::after {
  content: "Masquer";
}

details:not([open]) summary::after {
  content: "Lire la suite";
}

summary {
	color: #206cae;
	text-underline-offset: 2px;
}

summary:hover {
	text-decoration: none;
	background-color: inherit;
	color: #ffa700;
	cursor: pointer;
}

/*div.hidden {
	padding: 1rem 2rem 0 2rem;
	display: none;
}*/

div#navigation {
	text-align: center;
	padding-bottom: 2em;
}

pre {
	border: 1px solid #bbb;
	margin: 0 1em 1em 1em;
	padding: 0.5em;
	line-height: 1.5em;
	font-size: 90%;
}

  /************************/
 /*		Menu flottant	 */
/************************/

div.floatingMenuWrapper
{
    display:flex;

}

div.floatingMenu
{
	width: 15%;
	margin-top: 3rem;
    flex-shrink: 0;
    white-space: nowrap;
}

ul.floatingMenu
{
	margin: 0;
	width: 100%;
}

ul.floatingMenu li
{
    margin-bottom: 0.5em;
}

ul.floatingMenuIsFloating
{
	position: fixed;
	top: 0;
    width: 15%;
}

ul.floatingMenuIsFloating li
{
    margin-bottom: 0.5em;
}

li.floatingMenuPrevious a
{
	color: #7b7b7b;
}

li.floatingMenuCurrent a
{
	color: #ffa700;
}

li.floatingMenuMenuNext a
{
	color: #d0d0d0;
}

  /************************/
 /*		Commentaires	 */
/************************/
/*h1.commentaires {
	padding: 1rem;
    background-image: linear-gradient(to bottom right, #ffa275, #f00);
	margin-top: 3rem;
	margin-left: 5rem;
	width: 50%;
	border-radius: 0 1.5rem 0 1.5rem;
    text-align: center;
    margin-top: 4em;
    margin-left: 33%;
    width: 33%;
}*/

/*p.commentaire {
    line-height: 1em;
    margin-left: 3em;
}*/

p.pseudo {
    transform: skewY(-6deg);
    margin-top: -1em;
    padding-bottom: 1em;
    position: absolute;
}

em.pseudo {
    all: revert;
	font-weight: bold;
	color: #7E4CEC;
}

div.commentaire {
    --b: 3em; /* tail dimension */
    --p: 50%;  /* main position (0%:top 100%:bottom) */
    --r: 1.2em; /* the radius */
    margin: 3em 8em 3em 25%;
    padding: 3em 1em 1em 1em;
    border-radius: var(--r)/var(--r) min(var(--r),var(--p) - var(--b)/4) min(var(--r),100% - var(--p) - var(--b)/4) var(--r);
    background: #aeafdd4d; /* the main color */
    font-size: 0.7em;
    position: relative;
    width: 50%;
    
}
div.commentaire:before {
    content: "";
    position: absolute;
    left: 100%;
    top: clamp(0%,var(--p) - var(--b)/4,100% - var(--b)/2);
    width: var(--b);
    aspect-ratio: 1;
    background: inherit;
    --g:#000 calc(100% - 1px),#0000;
    -webkit-mask: 
    radial-gradient(circle closest-side at 88% 88%,var(--g)),
    radial-gradient(20% 20% at 55% 48%,var(--g)),
    radial-gradient(25% 25% at 0 25%,var(--g));
}

/* HTML: <div class="tooltip">This is the same as #8 but with another shape for the tail </div> */
div.commentaire2 {
    --b: 3em; /* tail dimension */
    --p: 50%;  /* main position (0%:top 100%:bottom) */
    --r: 1.2em; /* the radius */
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: 3em;
    padding: 1em;
    border-radius: var(--r)/min(var(--r),var(--p) - var(--b)/4) var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/4);
    background: #55d78f4d; /* the main color */
    font-size: 0.7em;
    position: relative;
}

div.commentaire2:before {
    content: "";
    position: absolute;
    right: 100%;
    top: clamp(var(--b)/-2,var(--p) - 3*var(--b)/4,100% - var(--b));
    width: var(--b);
    aspect-ratio: 1;
    background: inherit;
    --g:#000 calc(100% - 1px),#0000;
    -webkit-mask: 
    radial-gradient(circle closest-side at 12% 12%,var(--g)),
    radial-gradient(20% 20% at 45% 52%,var(--g)),
    radial-gradient(25% 25% at 100% 75%,var(--g));
}








  /********************************/
 /*		Moteur de recherche		 */
/********************************/
em.recherche
{
	font-weight: bold;
	text-shadow: 0 0 4px #FF00CB;
	color: #ff4646;
}

div.recherche {
	width: 75%;
	margin: 0px	5%;
}

div.recherche h2.recherche {
	padding: 1rem;
	background-image: linear-gradient(-45deg, #ff8227 10%, #d70a0a 20%, #f22743de 60%);
/*
	background-image: linear-gradient(-45deg, #f47d7d 10%, #930808 90%);
*/
	border-radius: 0.5rem;
	color: #000;
	margin-top: 3rem;
	margin-left: 0;
	width: 100%;
	text-align: center;
}

ul.recherche {
	margin-top: 0;
	margin-bottom: 0;
	animation-duration: 2s;
	animation-name: slidein;
	overflow: hidden;
	padding: 0;
}

@keyframes slidein {
	from {
		max-height: 0;
		width: 100%;
	}
	to {
		max-height: 100rem;
		width: 100%;
	}
}

a.recherche {
	margin-left: 1em;
}

a.recherche_plus {
	color: #d0d0d0;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 2px;
}

a.recherche_plus:hover {
	text-decoration: none;
	background-color: inherit;
	color: #ffa700;
	cursor: pointer;
}