:root{
	--1664-color: #22305c;
	--tt-vert-color: #126D31;
	--tt-jaune-color: #FCC443;
	--tdf-vert-color: #006c31;
	--tdf-jaune-color: #fff200;
}
h5 {
	margin-bottom:0;
	margin-top:1.15em;
}
.bg-tt-vert {
	background-color: var(--tt-vert-color);
}
.bg-tdf-vert {
	background-color: var(--tdf-vert-color);
}
.bg-tdf-jaune {
	background-color: var(--tdf-jaune-color);
}
.text-vert {
	color: var(--tt-vert-color);
}
.text-jaune {
	color: var(--tt-jaune-color);
}
.text-tdf-jaune {
	color: var(--tdf-jaune-color);
}
.text-tdf-vert {
	color: var(--tdf-vert-color);
}
.bg-tt-jaune {
	background-color: var(--tt-jaune-color);
}
.bg-tt-trame {
	background-image: url("img/tt-trame-jo.png"); 
	background-attachment: fixed;
    background-size: cover;
    background-position-x: center;
	background-repeat: no-repeat;
}
.bg-tt-tdf {
	background-color: var(--tdf-jaune-color);
	background-image: url("img/bg-tt-tdf.jpg"); 
	background-attachment: fixed;
    background-size: cover;
    background-position-x: center;
	background-repeat: no-repeat;
}
.bg-1664 {
	background-color: var(--1664-color);
}
.bg-sombre {
	background-color: #111d3d;
}
.bg-sombre-euro {
	background-color: #111d3d;
	/*background-attachment: fixed;*/
    background-size: contain;
    background-position-x: center;
	background-repeat: no-repeat;
}
.bg-euro-bandes {
	background-color: #111d3d;
    background-size: auto;
    background-position-x: center;
	background-repeat: no-repeat;
	background-image: url("1664-un-ete-a-la-french/img/un-ete-french-bg-paysage.jpg");    
}
@media (orientation: landscape) {
	.orientation-portrait {
		display: none;
	}
	.bg-sombre-euro {
		background-image: url("1664-un-ete-a-la-french/img/un-ete-french-bg-verre.jpg");    
	}
}
@media (orientation: portrait) {
	.orientation-paysage {
		display: none;
	}
	.bg-euro-bandes {
		background-image: url("1664-un-ete-a-la-french/img/un-ete-french-bg-portrait.jpg");    
	}
}
.bg-1664-degrade {
	background-image: url("1664-un-ete-a-la-french/img/degrade.jpg");
	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;
}
.claim-euro {
	font-variant: all-small-caps;
	font-size: 5.5vmax;
	line-height: 3.6vmax;
	color: white;
	font-family: paral;
}
.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;
}
.text-paral {
	font-family: paral;
}
.text-foco {
	font-family: foco;
	text-transform: uppercase;
}
.text-paris {
	font-family: Paris;
	line-height: .95em;
	transition: font-weight .45s ease-out;
}
.text-bureau {
	font-family: bureau;
	line-height: 1em;
}
.text-gras {
	font-weight: 700;
}
.text-heavy {
	font-weight: 900;
}
.text-thin {
	font-weight: 200;
}
.text-tt-jo-shadow{
	text-shadow: 0 0 15px #FCC443, 0 0 15px #FCC443, 0 0 15px #FCC443;
}
.rounded-lg {
	border-radius: 24px !important;
}
.rounded-100 {
	border-radius: 100% !important;
}
.mention{
	color: #ccc;
    font-size: x-small;
}
.mt-n1 {
  margin-top: -0.25rem !important;
}
sup{
	text-transform: lowercase;
    font-size: x-small;
}

.cag-container {
  position: relative;
  width: 300px;
  height: 300px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; 
  -o-user-select: none;
  user-select: none;
}
.cag-canvas {
  position: absolute;
  top: 0;	
}
.cag-resultat {
	width: 100%;
	height: 100%;
}
.animate__delai {
  --animate-delay: 2s;
}

/*Typos*/
@font-face {
  font-family: bureau;
  src: url("font/BureauGrotCompressed-Medium.otf");
}
@font-face {
  font-family: paral;
  src: url("font/ParaCH.ttf");
}
@font-face {
  font-family: foco;
  src: url("font/Foco-Bold.ttf");
}
@font-face {
  font-family: Paris;
  src: url('font/Paris2024-Variable.ttf') format("truetype-variations");
  font-weight: 1 999;
}