:root{
	--1664-color: #22305c;
	--ttvert-color: #126D31;
	--ttjaune-color: #FCC443;
}
h5 {
	margin-bottom:0;
	margin-top:1.15em;
}
.bg-tt-vert {
	background-color: var(--ttvert-color);
}
.text-vert {
	color: var(--ttvert-color);
}
.text-jaune {
	color: var(--ttjaune-color);
}
.bg-tt-jaune {
	background-color: var(--ttjaune-color);
}
.bg-1664 {
	background-color: var(--1664-color);
}
.bg-sombre {
	background-color: #111d3d;
}
.bg-1664-img {
	background-image: url("cxwjkptnpcdmxr/img/fond.png");
	background-size: cover;
	background-position: center;
	background-color: var(--1664-color);
}
.m-10 {
	margin: 5% 10% 2% 10%;
}
.claim-1664 {
	font-variant: all-small-caps;
	font-size: 6vmax;
	line-height: 3.2vmax;
	color: white;
	font-family: bureau;
}
.petit {
	font-size:.6em;
}
.chapo {
	font-variant: all-small-caps;
	font-size: .9em;
	font-family: var(--bs-body-font-family);
}
.claim-1664 .bleu {
	background: linear-gradient(to bottom, rgba(0,0,0,0) 26%, #31a8e0 26%, #31a8e0 89%, rgba(0,0,0,0) 89%);
	padding:0 .08em;
}
.claim-1664 .rouge {
	background: linear-gradient(to bottom, rgba(0,0,0,0) 26%, #e20a17 26%, #e20a17 89%, rgba(0,0,0,0) 89%);
	padding:0 .08em;
}
.typo16 {
	font-family: bureau;
	line-height: 1em;
}
.mention{
	color: #ccc;
    font-size: x-small;
}

/* BOUTON TWIST */
.twist{
    overflow: hidden;
    position: relative;
	transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.twist:hover{
    color: #fff;
    border: none;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    animation: rotate 0.7s ease-in-out both;
}
.twist:before,
.twist:after{
    content: '';
    background: #fff;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0;
    transform: translate(100%, -25%) translate3d(0, 0, 0);
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    transition: all 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.twist:hover:before,
.twist:hover:after{
    opacity: 0.10;
}
.twist:hover:before{ transform: translate3d(50%, 0, 0) scale(0.9); }
.twist:hover:after{ transform: translate(50%, 0) scale(1.1); }
@keyframes rotate{
    0%{ transform: rotate(0deg); }
    25%{ transform: rotate(3deg); }
    50%{ transform: rotate(-3deg); }
    75%{ transform: rotate(1deg); }
    100%{ transform: rotate(0deg); }
}
/* ANIMATION */
.animation{
	transition: all 1s cubic-bezier(0.02, 0.01, 0.47, 1);
	z-index: 110;
	opacity: 0;
}
.anim-petit{
	height: 10px;
	opacity: 0;
}
.anim-grandir{
	transform: translate(0, -100px) scale(100) rotate(5deg);
}
.cache{
	height: 300%;
	width: 100%;
	z-index: 100;
	top: 0;
	position: absolute;
	opacity:0;
}

/*Typos*/
@font-face {
  font-family: bureau;
  src: url("font/BureauGrotCompressed-Medium.otf");
}