/*
 * 68000.fr
 * Olivier Maréchal
 */

:root {
  --red-color: #FF6F61;
  --blue-color: #243E6E;
  --cyan-color: #94a8cd;
}



body {
	color:var(--blue-color);
	font-family: 'Rufina', cursive;
	font-size: 1.4rem;
	overflow-y: overlay; /* scrollbar */
}
@media (min-width: 768px) {
	body {
		font-size: 1rem;
	}
}


body.inline {
	margin: 0.5em;
  background: gray;
}
@media (min-width: 768px) {
	body.inline {
		margin: 2em;
	}
}
a {
	text-decoration: none;
}



/* Tites */
h1 {
	/* word-wrap: break-word; */
	text-transform: lowercase;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: calc(2em + 2vw);
	margin:1em 0;
	font-family: elephant;
	text-align: center;
}
h2 {
	font-size: calc(1em + 1vw);
	margin:1em;
	font-family: elephant;
	text-align: center;
}
h2 strong {
	color:var(--red-color);
	font-weight: normal;
}


.blocBlue {
	background-color:var(--blue-color);
	color:white;
	padding-top: 1em;
	padding-bottom: 1em;
}
.blocGray {
	background-color:#e8e8e8;
	padding-top: 1em;
	padding-bottom: 1em;
}



.date {
	font-style: italic;
}


.cloud {
	font-family: elephant;
	text-align: center;
}
.cloud.tag {
	margin-bottom: 3em;
}
.cloud span {
	margin: 0.5em;
}
.cloud a {
	color: var(--blue-color);
}
.cloud a:hover, .cloud a.activ {
	color: var(--red-color);
	text-decoration: none;
}
.cloud.cat span {
	font-size: calc(2em + 2vw);
}
.cloud.tag span {
	font-size: calc(1em + 1vw);
}

.cloud sup {
    top: -.9em;
    font-size: 50%;
}


.hash, .hash.cat a {
	font-size: 1.1em;
	color: var(--red-color);
}
.hash.cat {
	font-size: 1.3em;
	font-weight: bold;
}


.colorRed{
	color: var(--red-color);
}
section {
	margin-bottom:3em;
}
@media (min-width: 768px) {
	section {
		margin-bottom:5em;
	}
}

.footer > div {
	margin-top:0.5em;
	margin-bottom:0.5em;
}

.footer a {
  color: white;
}
a.email {
  text-decoration-color: orange;
  text-decoration-line: underline;
 }


.framed {
  margin: 0 auto;
  width: 375px;
  height: 60vh;
  border-radius: 1em;
  box-shadow: 0 -6px 0 12px #f5f5f5, 0px 1px 10px 15px #b9b9b9;
  background: gray;
}
.framed iframe {
	border:0;
	height:100%;
}

.iframeFull iframe {
	width:100%;
}

.name {
    font-size:2em;
    word-wrap: break-word;
}
.name::before {
	left: -15px;
	width: 15px;
	position: absolute;
	content: "";
	display: inline-block;
	background: var(--blue-color);
	height: 1px;
	margin-left: 10px;
	top: 24px;
	z-index: -1;
}

.name a {
    color: inherit;
}

a.btn {
    font-size:1.4rem;
}


.intro {
	margin-bottom: 1rem;
}
.intro::first-letter {
    font-size: 1.3em;
    line-height: 1em;
}

footer {
	background:var(--blue-color);
	color: white;
	padding: 1em 0;
}

img.illustration {
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 29vh;
    background-position: center;
    border-radius: 6em 1em 6em 1em;
}

img.produit {
    border-radius: 2em;
    width: 100%;
    padding: 0.5em;
}
@media (min-width: 768px) {
	img.produit {
	}
}

img.blog {
    width: 100%;
    border-radius: 1em;
    margin-top: 1rem;
}

button {
    margin: 1em 0;
}


img.tail.blog {
}

.clean li {
	position: relative;
	list-style-type: none;
}

.clean li::after {
  left: -23px;
  width: 15px;
  position: absolute;
  content: "";
  background: var(--blue-color);
  height: 1px;
  top: 13px;
}
ul.clean ul li::after {
  left: -16px;
  width: 8px;
}

@media (min-width: 992px) {
	.modal-lg {
	    max-width: 80%;
	}
}
@media (min-width: 576px) {
	.modal-lg {
	    max-width: 80%;
	}
}


.headerParallaxe {
	background-size: cover;
	height:300px;
}
    


.container.page {
    margin-bottom: 5em;
}

.container.page p {
    overflow-wrap: break-word;
}

/* images insérées depuis le wysiwyg de l'admin */
.container.page .corps img {
	display: block;
    margin: 0 auto;
    /*
	max-width: 90%;
	width: auto;
    height: auto;
	*/
    border-radius: 1em;
    padding: 1em;
    border: 2px dotted #ff6f61;
}


/*
 * Menu de nav
 */

.menuWrapper {
  position:fixed;
  top:0;
  left: 0;
  width:100%;
  z-index:4;
}

.menus {
	display:none;
	background: rgba(1, 45, 88, 0.8);
	backdrop-filter: blur(15px);
	position:relative;
	height: 100vh;
	padding-top: 3em;
}
.menus.ouvert {
}

.menus ul {
  display: flex;
  list-style-type: none;
  padding-left: 0px;
  flex-direction: column;
  justify-content: space-evenly;
  height: calc(100% - 3em);
}

.menus li {
	margin-left: 0px;
	text-align: center;
}

.menus a {
	display: inline-block;
	text-transform: lowercase;
	color: white;
	padding: 0 15px;
	font-size: 40px;
	border-radius: 0.5em;
}
.menus .univers a {
	font-size: 20px;
}
.menus .corpo a {
	font-size: 20px;
}
.menus a:hover {
	text-decoration: none;
	background-color: #ffffff;
	color:#01305f;
	transition: background 0.3s ease-in-out;
}
.menus a.isactive {
	background-color: #ffffff;
	color:#01305f;
}

.burger {
	color: var(--red-color);
	left: 0;
  position: absolute;
  z-index: 1;
  display: inline-block;
  width: 75px;
  font-size: 35px;
  line-height: 75px;
  text-align: center;
  cursor: pointer;
}
.burger.activ div {
  transform: rotateZ(180deg);
  transition: all 0.5s ease-in-out;
}
.burger div {
  transform: rotateZ(0deg);
  transition: all 0.5s ease-in-out;
}
.burger.activ div::before {
  content: "\f00d";
	transition: all 0.5s ease-in-out;
}


.search {
	color: var(--red-color);
	right: 0px;
  position: absolute;
  z-index: 1;
  display: inline-block;
  width: 75px;
  font-size: 35px;
  line-height: 75px;
  text-align: center;
  cursor: pointer;
}
.search.activ div {
  transform: rotateZ(180deg);
  transition: all 0.5s ease-in-out;
}
.search div {
  transform: rotateZ(0deg);
  transition: all 0.5s ease-in-out;
}
.search.activ div::before {
  content: "\f00d";
	transition: all 0.5s ease-in-out;
}

.searchZone {
  display:none;
  position:relative;
  backdrop-filter: blur(5px);
  background: rgba(1, 45, 88, 0.8);
  height: 100vh;
  padding: 1em;
}

.searchZone a {
	border-radius: 0.3em;
	font-size: 1.3em;
	color: white;
	display: block;
	padding: 0.2em;
	margin: 0.2em;
}
.searchZone a:hover {
	text-decoration: none;
	background: rgba(247, 110, 96, 0.57);
}

.searchZone span {
	display: block;
}

.searchZone a .cat {
	font-size: 0.8em;
	color: var(--red-color);
}

.searchZone a .corps {
	font-size: 0.8em;
	color: var(--cyan-color);
}


.fastSearch {
    color: white;
    background: transparent;
    display: block;
    margin: 0 auto;
    border-radius: 0.3em;
    border: 2px solid white;
    font-size: 1.3em;
    width: calc(100% - 105px);
    outline: none;
    padding: 0.4em;
}
.fastSearch::placeholder {
    color: var(--red-color);
}

#s_ajax {
	height: calc(100% - 150px);
	overflow-y: scroll;
	
}

#s_ajax::-webkit-scrollbar {
    width: 16px;
}
#s_ajax::-webkit-scrollbar-thumb {
    background-color: #fff;
    border-radius: 20px;
}
#s_ajax::-webkit-scrollbar-track {
    background: rgb(11 18 65 / 48%);
    border-radius: 20px;
}

body::-webkit-scrollbar {
    width: 18px;
}
body::-webkit-scrollbar-thumb {
    background-color: #f76f61;
    border-radius: 20px;
}
body::-webkit-scrollbar-track {
    background: rgb(0 0 0 / 7%);
    border-radius: 20px;
}


/*
 * Logo animé
 */
 
.logoContainer {
	position:relative;
	font-size: 25px;
	font-family: elephant;
	background:var(--blue-color);
	overflow:hidden;
	align-items: center;
	display: flex;
	height: 100vh;
	flex-flow: row wrap;
}

.logoContainer.news, .logoContainer.form, .logoContainer.crea, .logoContainer.page {
	height: 50vh;
}

/* soutient à l'Ukraine */
footer:before {
	display: block;
	margin-top: -2em;
    border-radius: 1em;
    border-bottom: 20px solid #fed500;
    background: #015bbb;
    content: " ";
    height: 40px;
    width: 100%;
}

#error404 header.logoContainer {
	border: 5px solid red;
	animation: animGuru 1s 0s linear infinite;
}
@keyframes animGuru {
	0% {border-color: transparent;}
	49% {border-color: transparent;}
	50% {border-color: red;}
}

.logoCenter {
	text-align: center;
	width:100%;
}

.logoNumeric {
	text-align: center;
	/* overflow: hidden; */
	font-size:25vw;
	animation: animNumeric 3s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
	filter: blur(20px);
	/* transform: scale(1); */
	letter-spacing: -0.1em;
	left:-50%;
	position:relative;
	width:200%;
	opacity:0.2;
	z-index:1;
}
@media (min-width: 768px) {
	.logoNumeric {
		font-size:13vw;
	}
}
@keyframes animNumeric {
	0% {
		opacity:0.2;
		filter: blur(20px);
		transform: scale(2);
		letter-spacing: 2em;
	}
	60% {
		opacity:1;
		color:var(--red-color);
		filter: blur(0px);
		text-shadow: 0px 0px 0px;
		transform: scale(1);
	}
	80% {
		color:white;
		text-shadow: 0px 0px 40px var(--red-color);
	}
	100% {
		opacity:1;
		filter: blur(0px);
		letter-spacing: -0.1em;
		color:#ffffff;
		text-shadow: 0px 0px 0px;
	}
}
.logoNumeric a {
	color: inherit;
	text-decoration: none;
}
.logoNumeric a:hover {
	text-decoration: none;
}

.logoAlpha {
	text-align: center;
	font-size:8vw;
	animation: animAlpha 2.5s 2.5s ease-out forwards;
	letter-spacing: 0.05em;
	left: 0.5%;
	position:relative;
	width:100%;
	opacity:0;
	color:var(--red-color);
	top: -4vw;
}
@media (min-width: 768px) {
	.logoAlpha {
		font-size:4vw;
	}
}
@keyframes animAlpha {
	0% {
		opacity:0;
		top: -13vw;
	}
	30% {
		opacity:1;
		top: -4vw;
		color:#ffffff;
	}
	70% {
		opacity:1;
		top: -4vw;
		color:#ffffff;
	}
	100% {
		opacity:0;
		top: -4vw;
		color:#ffffff;
	}
}

.logoWS {
	text-align: center;
	text-transform: lowercase;
	font-size:8vw;
	animation: animWS 1.5s 4s ease-out forwards;
	letter-spacing: 0.1em;
	left: 0.5%;
	position:absolute;
	width:100%;
	opacity:0;
	top: -4vw;
	color: var(--red-color);
}
@media (min-width: 768px) {
	.logoWS {
		font-size:4vw;
	}
}
@keyframes animWS {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}


.next i {
	color: white;
	font-size: 2em;
	opacity:0;
	transition:1s all;
	animation: animNext 1s 5s ease-out forwards;
	transform: rotate(90deg);
}
@keyframes animNext {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

.next i:hover {
	color: var(--red-color);
	transition:1s all;
}



nav.breadcrumb {
	background: rgb(36 62 110 / 16%);
	font-weight: bold;
}
nav.breadcrumb ol {
	padding-top: 1em;
}
nav.breadcrumb a {
	color: var(--red-color);
}
.breadcrumb-item+.breadcrumb-item::before {
	content: ">";
}



/*
 * Modal Bootstrap
 */

.modal {
	cursor: zoom-out;
}
.modal-content {
	cursor: initial;
}




/*
 * RUF
 */
 
.scrollrotate {
	transform-origin: 50% 50%;
	transition: all 1s ease-in-out;
}
.scrollrotateanim {
	transform: rotate(90deg);
}





#cb-cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 999; border-radius: 0; display: none; }