/* SOMMAIRE CSS
INIT : polices, variables
Page
Font-size
Header, chapo, barre info, tag modules footer
Titres,espaces en hauteur et largeur, marges, padding
Liens
Blockquote, mark, sup, sub, graisses
Sources
Code
sous titres textes, alignements citations sources code
Alignements, centrer 
Couleurs
Bordures
Majuscule, minuscules
Arrondis
Sections

            Rouge -0 -1 Rose violet bleu vert jaune orange brun gris  noir blanc
            Grilles
            Espaces
            Boutons : base, couleurs, alignements, particuliers (liens, sup, infos, voir)
            , fermer Images vignettes ombres bords
            Cards
            Notes
            Formulaires
            Input : textes, radios, cocher, curseur, dates
            Tableaux
            Composants en-tête footer sections encarts
            Accordéon
            Alerte
            Carrousel
            Puces
            Modale
            Progrès
            Notation
            Stepoer pas a pas bulles
            Meduaqueries
            576 768 992 1200
            Animations
            Plugin date glisse dépose ouverture de fichier */

/* INIT : polices DYS, ELite, Roboto, variables  */
@font-face {
  font-family: OpenDyslexic;
  src: url(../font/dys/OpenDyslexic3-Regular.ttf);
}
@font-face {
  font-family: OpenDyslexic-Bold;
  src: url(../font/dys/OpenDyslexic3-Bold.ttf);
}
@font-face {
  font-family: Special_Elite;
  src: url(../font/Special_Elite/SpecialElite-Regular.ttf);
}
@font-face {
  font-family: roboto;
  src: url(../font/roboto/Roboto-Regular.ttf);
}
.font-roboto {
  font-family: roboto;
}
.font-elite {
  font-family: Special_Elite, cursive;
}
.font-mono {
  font-family: 'Courier New', Courier, monospace;
}
@font-face {
  font-family: OpenDyslexic;
  src: url(../font/Noto_Sans/NotoSans-Black.ttf);
}
.noto {
  font-family: 'Noto Sans', sans-serif;
}
:root {
  --rouge: rgb(255, 38, 0);
  --rouge-1: rgb(255, 97, 97);
  --rouge-2: rgb(240, 80, 80);
  --rouge-3: rgb(230, 53, 53);
  --rouge-4: rgb(210, 45, 45);
  --rouge-5: rgb(198, 40, 40);
  --rouge-6: rgb(180, 28, 28);
  --rose: #b71540;
  --rose-1: #f48fb1;
  --rose-2: #f06292;
  --rose-3: #ec407a;
  --rose-4: #d81b60;
  --rose-5: #c2185b;
  --rose-6: #ad1457;
  --bleu: #7098cf;
  --bleu-1: #87ceeb;
  --bleu-2: #6a89cc;
  --bleu-3: #4a69bd;
  --bleu-4: #9c27b0;
  --bleu-5: #6a1b9a;
  --bleu-6: #0a3d62;
  --violet: #7986cb;
  --violet-1: #c5cae9;
  --violet-2: #9fa8da;
  --violet-3: #5c6bc0;
  --violet-4: #3949ab;
  --violet-5: #283593;
  --violet-6: #1a237e;
  --cyan: #26c6da;
  --cyan-1: #b2ebf2;
  --cyan-2: #80deea;
  --cyan-3: #4dd0e1;
  --cyan-4: #0097a7;
  --cyan-5: #00838f;
  --cyan-6: #006064;
  --teal: #26a69a;
  --teal-1: #80cbc4;
  --teal-2: #4db6ac;
  --teal-3: #00897b;
  --teal-4: #00796b;
  --teal-5: #00695c;
  --teal-6: #004d40;
  --vert: #198754;
  --vert-1: #81c784;
  --vert-2: #4caf50;
  --vert-3: #43a047;
  --vert-4: #388e3c;
  --vert-5: #2e7d32;
  --vert-6: #1b5e20;
  --jaune: #ffc107;
  --jaune-1: #fff59d;
  --jaune-2: #fff176;
  --jaune-3: #ffeb3b;
  --jaune-4: #fdd835;
  --jaune-5: #fbc02d;
  --jaune-6: #fbc02d;
  --ambre: #ffca28;
  --ambre-1: #ffecb3;
  --ambre-2: #ffe082;
  --ambre-3: #ffc107;
  --ambre-4: #ffa000;
  --ambre-5: #ff8f00;
  --ambre-6: #ff6f00;
  --orange: #ffa726;
  --orange-1: #ffb74d;
  --orange-2: #ff9800;
  --orange-3: #fb8c00;
  --orange-4: #f57c00;
  --orange-5: #ef6c00;
  --orange-6: #e65100;
  --lime: #d4e157;
  --lime-1: #e6ee9c;
  --lime-2: #cddc39;
  --lime-3: #c0ca33;
  --lime-4: #afb42b;
  --lime-5: #9e9d24;
  --lime-6: #827717;
  --orangeFonce: #ff7043;
  --orangeFonce-1: #ff8a65;
  --orangeFonce-2: #ff5722;
  --orangeFonce-3: #f4511e;
  --orangeFonce-4: #e64a19;
  --orangeFonce-5: #d84315;
  --orangeFonce-6: #bf360c;
  --brun: #8d6e63;
  --brun-1: #a1887f;
  --brun-2: #795548;
  --brun-3: #6d4c41;
  --brun-4: #5d4037;
  --brun-5: #4e342e;
  --brun-6: #4e342e;
  --gris: #bdbdbd;
  --gris-1: #e0e0e0;
  --gris-2: #9e9e9e;
  --gris-3: #757575;
  --gris-4: #616161;
  --gris-5: #4f4f4f;
  --gris-6: #262626;
  --grisBleu: #78909c;
  --grisBleu-1: #cfd8dc;
  --grisBleu-2: #b0bec5;
  --grisBleu-3: #90a4ae;
  --grisBleu-4: #90a4ae;
  --grisBleu-5: #90a4ae;
  --grisBleu-6: #90a4ae;
  --blanc: rgba(250, 250, 250, 0.95);
  --blanc-1: rgb(245, 245, 245);
  --blanc-2: rgb(240, 240, 240);
  --blanc-3: rgb(240, 240, 240);
  --noir: #212529;
  --noir-1: rgba(39, 22, 0, 0.5);
  --noir-2: rgb(20, 0, 0);
  --noir-3: rgb(20, 0, 0);
  --strong: #f8db75;

  /*  font-size: clamp(0.8rem, 1.5vw, 1.25rem); 
    valeur minimale, valeur à tester, valeur maximale. 

*/
--fs-0: clamp(0.5rem, 0.15rem + 1.4vw, 1.2rem);
--fs-1: clamp(0.6rem, 0.275rem + 1.3vw, 1.25rem);
--fs-2: clamp(0.7rem, 0.4rem + 1.3vw, 1.3rem);
--fs-3: clamp(0.8rem, 0.45rem + 1.5vw, 1.5rem);
--fs-4: clamp(1rem, 0.6rem + 1.62vw, 1.8rem);
--fs-5: clamp(1.2rem, 0.8rem + 1.7vw, 2rem);
--fs-6: clamp(1.25rem, 0.775rem + 2vw, 2.2rem);
--fs-7: clamp(1.3rem, 0.725rem + 2.4vw, 2.45rem);
--fs-8: clamp(1.4rem, 0.55rem + 3.1vw, 2.8rem);
--fs-9: clamp(1.5rem, 0.75rem + 3.2vw, 3rem);
--fs-10: clamp(1.6rem, 0.75rem + 3.3vw, 3.2rem);
--fs-11: clamp(1.7rem, 0.8rem + 3.4vw, 3.6rem);
--fs-12: clamp(1.8rem, 0.85rem + 3.5vw, 4rem);

  /* 

  --fs-1: clamp(0.70rem, calc(0.59rem + 0.57vw), 1.04rem);
  --fs-2: clamp(0.94rem, calc(0.81rem + 0.62vw), 1.30rem);
  --fs-3: clamp(1.25rem, calc(1.12rem + 0.64vw), 1.63rem);
  --fs-4: clamp(1.67rem, calc(1.54rem + 0.62vw), 2.03rem);
  --fs-5: clamp(2.22rem, calc(2.11rem + 0.54vw), 2.54rem);
  --fs-6: clamp(2.96rem, calc(2.89rem + 0.36vw), 3.17rem);
  --fs-7: clamp(3.95rem, calc(3.94rem + 0.04vw), 3.97rem);
  --fs-8: clamp(4.96rem, calc(5.36rem + -0.51vw), 5.26rem);
 
  --fs-1: clamp(0.96rem, calc(1.14rem + -0.22vw), 1.09rem);
  --fs-2: clamp(1.16rem, calc(1.25rem + -0.12vw), 1.23rem);
  --fs-3: clamp(1.23rem, calc(1.38rem + 0.01vw), 1.38rem);
  --fs-4: clamp(0,75rem, calc(1.52rem + 0.19vw), 1.67rem);
  --fs-5: clamp(1.75rem, calc(1.66rem + 0.43vw), 2.00rem);
  --fs-6: clamp(1.97rem, calc(1.82rem + 0.73vw), 2.40rem);
  --fs-7: clamp(2.22rem, calc(1.99rem + 1.13vw), 2.88rem);
  --fs-8: clamp(2.49rem, calc(2.16rem + 1.64vw), 3.46rem);
  --fs-9: clamp(2.80rem, calc(2.35rem + 2.29vw), 4.15rem);
  --fs-10: clamp(3.15rem, calc(2.53rem + 3.10vw), 4.98rem);
  --fs-11: clamp(6.5rem, calc(4vw + 1rem), 6.5rem);
  --fs-12: clamp(6.5rem, calc(6vw + 1rem),8rem); */

  --space-3xs: clamp(0.19rem, calc(0.09rem + 0.49vw), 0.44rem);
  --space-2xs: clamp(0.38rem, calc(0.2rem + 0.85vw), 0.81rem);
  --space-xs: clamp(0.56rem, calc(0.29rem + 1.34vw), 1.25rem);
  --space-s: clamp(0.75rem, calc(0.41rem + 1.71vw), 1.63rem);
  --space-m: clamp(1.13rem, calc(0.61rem + 2.56vw), 2.44rem);
  --space-l: clamp(1.5rem, calc(0.82rem + 3.41vw), 3.25rem);
  --space-xl: clamp(2.25rem, calc(1.23rem + 5.12vw), 4.88rem);
  --space-2xl: clamp(3rem, calc(1.63rem + 6.83vw), 6.5rem);
  --space-3xl: clamp(4.5rem, calc(2.45rem + 10.24vw), 9.75rem);
  --space-4xl: clamp(4.88rem, calc(4.29rem + 2.93vw), 6.38rem);
  --space-5xl: clamp(5.44rem, calc(2.88rem + 12.8vw), 8.38rem);
  --space-6xl: clamp(6rem, calc(5.07rem + 4.63vw), 12rem);
  --space-7xl: clamp(9rem, calc(7.61rem + 6.95vw), 12.56rem);
  --space-8xl: clamp(9rem, calc(7.61rem + 6.95vw), 12.75rem);
  --space-9xl: clamp(9.75rem, calc(8.58rem + 5.85vw), 14rem);
  --space-9xl: clamp(12rem, calc(10.15rem + 9.27vw), 16.75rem);
  --space-10xl: clamp(18rem, calc(15.22rem + 13.9vw), 25.13rem);
  --space-11xl: clamp(20rem, calc(18.22rem + 14vw), 28rem);
  --space-12xl: clamp(25rem, calc(25.22rem + 18vw), 36rem);
}

/* Init  */
*,
::after,
::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}
iframe {
  width: 100%;
  height: 100%;
  border: none;
}
html {
  scroll-behavior: smooth;
}
body {
  background: url(https://emi.re/img/front/black_denim.jpg) #1a1a1a;
}
html {
  font: 1em/1.5 'Open Sans', sans-serif;
  font-size: 16px;
}
ul li {
  list-style-type: none;
}

/* Page  */
.page {
  max-width: 1260px;
  width: 100%;
  margin: 0 auto;
  padding: 8px;
  color: var(--blanc);
}
.blockquote,
li,
p {
  font-size: var(--fs-4);
  line-height: 1.1;
  text-align: justify;
}

.sourceGauche {
  text-align: left;
}

/* Font size */
.fs-1 {
  font-size: var(--fs-1);
}
.fs-2 {
  font-size: var(--fs-2);
}
.fs-3 {
  font-size: var(--fs-3);
}
.fs-4 {
  font-size: var(--fs-4);
}
.fs-5 {
  font-size: var(--fs-5);
}
.fs-6 {
  font-size: var(--fs-6);
}
.fs-7 {
  font-size: var(--fs-7);
}
.fs-8 {
  font-size: var(--fs-8);
}
.fs-9 {
  font-size: var(--fs-9);
}
.fs-10 {
  font-size: var(--fs-10);
}
.fs-11 {
  font-size: var(--fs-11);
}
.fs-12 {
  font-size: var(--fs-12);
}

/* header  */
.header {
  width: 100%;
  margin-bottom: 1rem;
  background: -moz-linear-gradient(top, #900 0, #700 100%);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #900),
    color-stop(100%, #700)
  );
  background: -webkit-linear-gradient(top, #900 0, #700 100%);
  border-radius: 6px;
  display: grid;
  grid-template-columns: 1fr 11fr;
}
.header h1 {
  font-family: Special_Elite, cursive;
  font-size: clamp(1rem, calc(0.66rem + 3vw), 3.2rem);
  text-transform: uppercase;
  color: #fff7bc;
  display: flex;
  justify-content: center;
  align-self: center;
}
.header img {
  margin: 0.5rem;
  width: clamp(24px, calc(2.4vw + 1rem), 50px);
  display: flex;
  justify-content: center;
  align-self: center;
}
.barreHelp {
  width: 95%;
  margin-left: 4%;
}
/* Chapo, selectArea, modules, sommaire */
.chapo {
  padding: 1rem;
  color: #fff;
  overflow: auto;
}
.chapo p,
.chapo a {
  font-size: var(--fs-5);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.selectArea {
  background-color: #2c2c2c;
  border-radius: 6px;
  margin: 1rem 1rem 10rem 1.8rem;
  padding: 1rem;
}
.selectArea h5 {
  text-align: center;
  font-size: var(--fs-6);
  text-transform: uppercase;
  font-weight: 700;
  margin: 2rem 0 1rem 0;
  justify-content: center;
}
.selectArea h6 {
  font-size: var(--fs-3);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.2em;
}
.selectArea h6 a {
  color: #7098cf;
  transition: 0.5s;
}
.selectArea a:hover {
  color: #e4b5ff;
}
.selectArea li {
  list-style-type: none;
  line-height: 0.7;
}
.selectArea li:before,
.puces-orange li:before {
  padding: 0 0.4rem 0 0.8rem;
  content: '\2022';
  color: orange;
}
.modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, 220px);
  justify-content: space-between;
  grid-gap: var(--fs1);
}
.sommaire {
  display: grid;
  grid-template-columns: repeat(auto-fit, 320px);
  justify-content: space-between;
  grid-gap: var(--fs-1);
}
.sommairePlus {
  display: grid;
  grid-template-columns: repeat(auto-fit, 280px);
  justify-content: space-between;
  grid-gap: var(--fs-1);
}
.sommaire li a,
.sommairePlus li a {
  font-size: var(--fs-2);
  color: #f5f5f5;
  transition: 0.5s;
}

/* TagModules */
.tagModule {
  transition: 0.2s ease-in;
}
.tagModule {
  font-size: clamp(0.8rem, 1.5vw, 1.25rem);
  min-width: 100px;
  height: 32px;
  background-color: #f90;
  border-radius: 6px;
  margin-bottom: 0.6em;
  line-height: 1.8;
}
.tagModule img {
  border: 0;
  max-height: 32px;
  float: left;
  padding-right: 1em;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}
.selectArea .tagModule > a,
.tagModule a {
  color: #000;
  cursor: pointer;
}
.tagModule:hover {
  color: rgba(97, 0, 0, 0.2);
}

/* Barre info du chapo */
.barreTime {
  height: 4rem;
  font-size: var(--fs-5);
  margin-top: 2rem;
  border-top: 1px dotted var(--strong);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dureeLect,
.batterie {
  margin-top: 6px;
  padding-left: 0.5em;
}
.barreTime .clock {
  margin-top: 6px;
}

/* Footer */
footer {
  padding-top: var(--space-10xl);
  padding-bottom: var(--space-2xl);
}
.licence,
.licence a {
  color: #44a299;
}
.grid-licence {
  display: grid;
  grid-template-columns: 6fr 3fr 3fr;
  grid-gap: 0.2em;
  padding-top: 0.5em;
}
.licence {
  font-size: var(--fs-1);
  font-weight: 200;
  line-height:1;
  color: var(--gris-3);
}
.licence img {
  width: 20%;
  float: left;
  margin-right: 2px;
}
.maj {
  text-align: right;
  color: var(--blanc-1);
  font-size: 1.2rem;
}
.mail-btn {
  display: inline-block;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: #2f2f2f;
  outline: 0;
  padding: 0.2rem;
  font-size: var(--fs-2);
  color: #fff;
  letter-spacing: 0.5rem;
  text-indent: 0.5rem;
  transition: color 0.2s, border 0.3s;
  border-radius: 0.3em;
}
.mail-btn:hover {
  color: rgba(255, 255, 255, 0.4);
  border: 2px solid rgba(255, 255, 255, 0);
  transition: color 0.1s, border 0.2s;
}
.barreMaj {
  border-bottom: 1px dashed var(--jaune);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.barreMaj:first-child {
  padding-bottom: 1em;
}

/* Titres  */
h2,
h3,
h4,
h5,
h6 {
  font-family: Special_Elite, cursive;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.2;
  color: #fefedf;
}
h2 {
  font-size: var(--fs-8);
}
h3 {
  font-size: var(--fs-7);
}
h4 {
  font-size: var(--fs-6);
}
h5 {
  font-size: var(--fs-5);
}
h6 {
  font-size: var(--fs-4);
}

/* Espaces : largeur */
.w-O5 {
  width: 5%;
}
.w-10 {
  width: 10%;
}
.w-15 {
  width: 15%;
}
.w-20 {
  width: 20%;
}
.w-25 {
  width: 25%;
}
.w-30 {
  width: 30%;
}
.w-40 {
  width: 40%;
}
.w-50 {
  width: 50%;
}
.w-60 {
  width: 60%;
}
.w-70 {
  width: 70%;
}
.w-80 {
  width: 80%;
}
.w-90 {
  width: 90%;
}
.w-100 {
  width: 100%;
}
.w-150 {
  width: 150%;
}
.w-200 {
  width: 200%;
}
.w-300 {
  width: 300%;
}
.w-400 {
  width: 400%;
}
.w-500 {
  width: 500%;
}

/* Espaces : hauteur */
.h-5 {
  height: 5%;
}
.h-10 {
  height: 10%;
}
.h-15 {
  height: 15%;
}
.h-20 {
  height: 20%;
}
.h-25 {
  height: 25%;
}
.h-30 {
  height: 30%;
}
.h-40 {
  height: 40%;
}
.h-50 {
  height: 50%;
}
.h-60 {
  height: 60%;
}
.h-75 {
  height: 75%;
}
.h-100 {
  height: 100%;
}
.vh-100{
  min-height: 100vh;
}
/* Espaces : horizontal */
.space-05 {
  padding-top: var(--space-3xs);
}
.space-10 {
  padding-top: var(--space-2xs);
}
.space-20 {
  padding-top: var(--space-xs);
}
.space-30 {
  padding-top: var(--space-s);
}
.space-40 {
  padding-top: var(--space-m);
}
.space-50 {
  padding-top: var(--space-l);
}
.space-60 {
  padding-top: var(--space-xl);
}
.space-70 {
  padding-top: var(--space-2xl);
}
.space-80 {
  padding-top: var(--space-3xl);
}
.space-90 {
  padding-top: var(--space-4xl);
}
.space-100 {
  padding-top: var(--space-5xl);
}
.space-150 {
  padding-top: var(--space-6xl);
}
.space-200 {
  padding-top: var(--space-7xl);
}
.space-300 {
  padding-top: var(--space-8xl);
}
.space-400 {
  padding-top: var(--space-9xl);
}
.space-500 {
  padding-top: var(--space-10xl);
}
.space-600 {
  padding-top: var(--space-11xl);
}
.space-700 {
  padding-top: var(--space-12xl);
}

/* Marges */
.m-0 {
  margin: 0;
}
.m-1 {
  margin: 0.25rem;
}
.m-2 {
  margin: 0.5rem;
}
.m-3 {
  margin: 1rem;
}
.m-4 {
  margin: 1.5rem;
}
.m-5 {
  margin: 3rem;
}
.mt-0 {
  margin-top: 0;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 1rem;
}
.mt-4 {
  margin-top: 1.5rem;
}
.mt-5 {
  margin-top: 3rem;
}
.mr-0 {
  margin-right: 0;
}
.mr-1 {
  margin-right: var(--space-2xs);
}
.mr-2 {
  margin-right: var(--space-xs);
}
.mr-3 {
  margin-right: var(--space-s);
}
.mr-4 {
  margin-right: var(--space-m);
}
.mr-5 {
  margin-right: var(--space-l);
}
.mr-auto {
  margin-right: auto;
}
.mb-0 {
  margin-bottom: 0;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-3 {
  margin-bottom: 1rem;
}
.mb-4 {
  margin-bottom: 1.5rem;
}
.mb-5 {
  margin-bottom: 3rem;
}
.mb-auto {
  margin-bottom: auto;
}
.ml-0 {
  margin-left: 0;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 1rem;
}
.ml-4 {
  margin-left: 1.5rem;
}
.ml-5 {
  margin-left: 3rem;
}
.ms-auto {
  margin-left: auto;
}

/* Padding */
.p-0 {
  padding: 0;
}
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 1rem;
}
.p-4 {
  padding: 1.5rem;
}
.p-5 {
  padding: 3rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 1rem;
}
.pt-4 {
  padding-top: 1.5rem;
}
.pt-5 {
  padding-top: 3rem;
}
.pe-0 {
  padding-right: 0;
}
.pe-1 {
  padding-right: 0.25rem;
}
.pe-2 {
  padding-right: 0.5rem;
}
.pe-3 {
  padding-right: 1rem;
}
.pe-4 {
  padding-right: 1.5rem;
}
.pe-5 {
  padding-right: 3rem;
}
.pb-0 {
  padding-bottom: 0;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-3 {
  padding-bottom: 1rem;
}
.pb-4 {
  padding-bottom: 1.5rem;
}
.pb-5 {
  padding-bottom: 3rem;
}
.pl-0 {
  padding-left: 0;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-3 {
  padding-left: 1rem;
}
.pl-4 {
  padding-left: 1.5rem;
}
.pl-5 {
  padding-left: 3rem;
}

/* Liens */
a,
a:active,
a:focus,
a:hover {
  color: #6cb8ff;
  text-decoration: none;
}
a:link img,
a:visited img,
img {
  border-style: none;
}
.lien {
  float: left;
  margin-top: -0.6em;
}
.lienSup {
  display: inline-block;
  margin-bottom: 0.2em;
  width: 10px;
  height: 10px;
}

/* Blockquote, mark, sup, sub, graisses */
.blockquote {
  padding-left: 1em;
  color: rgba(135, 206, 250, 0.9);
  font-style: italic;
  font-weight: lighter;
}
.blockquote cite {
  font-style: italic;
  color: var(--blanc);
  font-size: var(--fs-2);
}
mark {
  background-size: 0.25em 1em, calc(100% - 0.25em * 2 + 1px) 1em, 0.25em 1em;
  background-position: left center, center, right center;
  background-repeat: no-repeat;
  background-color: transparent;
  background-image: linear-gradient(
      to bottom right,
      transparent 50%,
      var(--strong) 50% 100%
    ),
    linear-gradient(to right, var(--strong), var(--strong)),
    linear-gradient(to top left, transparent 50%, var(--strong) 50%);
}
sub,
sup {
  font-size: smaller;
  line-height: 0;
  top: -0.4em;
}
sub {
  bottom: -0.25em;
}
.supInfo {
  display: inline;
  width: 18px;
  margin-top: 8px;
}
.majSup {
  font-size: 10px;
  color: #f5f5f5;
  vertical-align: top;
  position: relative;
  top: -0.5em;
}
.majSup sup {
  font-size: 10px;
}
strong,
.strong {
  color: var(--orange-1);
  font-weight: 700;
}

/* Sources */
.source,
.sourceCentre,
.sourceGauche {
  display: block;
  font-style: italic;
  font-size: var(--fs-3);
  color: #d3d3d3;
}
.source {
  text-align: right;
}
.sourceCentre {
  text-align: center;
}

/* Code */
.pre {
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--fs-2);
  background: #070707;
  color: #ffadd6;
  margin: 1em 0 2em 0;
  padding-top: 1em;
  border: 1px solid goldenrod;
}
a > code {
  color: inherit;
}
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
  background: #070707;
}

/* Alignements, centrer */
.justify-content-start {
  display: flex;
  justify-content: flex-start;
}
.justify-content-end {
  display: flex;
  justify-content: flex-end;
}
.justify-content-center {
  display: flex;
  justify-content: center;
}
.justify-content-between {
  display: flex;
  justify-content: space-between;
}
.justify-content-around {
  display: flex;
  justify-content: space-around;
}
.justify-content-evenly {
  display: flex;
  justify-content: space-evenly;
}
.align-items-start {
  display: flex;
  -webkit-align-items: flex-start;
  align-items: start;
}
.align-items-end {
  display: flex;
  align-items: end;
}
.align-items-center {
  display: flex;
  align-items: center;
  -webkit-align-items: center;
}
.align-items-baseline {
  align-items: baseline;
}
.align-items-stretch {
  display: flex;
  align-items: stretch;
}
.align-content-start {
  display: flex;
  align-content: flex-start;
}
.align-content-end {
  display: flex;
  align-content: flex-end;
}
.align-content-center {
  display: flex;
  align-content: center;
}
.align-content-between {
  display: flex;
  align-content: space-between;
}
.align-content-around {
  display: flex;
  align-content: space-around;
}
.align-content-stretch {
  display: flex;
  align-content: stretch;
}
.align-self-auto {
  display: flex;
  align-self: auto;
}
.align-self-start {
  display: flex;
  align-self: flex-start;
}
.align-self-end {
  display: flex;
  align-self: flex-end;
}
.align-self-center {
  display: flex;
  align-self: center;
}
.align-self-baseline {
  display: flex;
  align-self: baseline;
}
.align-self-stretch {
  display: flex;
  align-self: stretch;
}
.row-center {
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.text-center {
  text-align: center;
  margin: 0 auto;
}
.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.centreOcentre {
  display: flex;
  justify-content: center;
  align-items: center;
}
.centreGauche {
  display: flex;
  justify-content: left;
  align-items: center;
}
.centreDroit {
  display: flex;
  justify-content: right;
  align-items: end;
}
.centreBas {
  display: flex;
  justify-content: center;
  align-items: end;
}
.horiz-block .centrerVertFlex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.centrerVertGrid {
  display: grid;
  place-items: center;
}
.parent1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.parent2 {
  display: grid;
  place-items: center;
}
.parent {
  display: flex;
}
.enfant {
  margin: auto;
}
.d-flex {
  display: flex;
}

/* Couleurs textes */
.rouge {
  color: var(--rouge);
}
.rouge-1 {
  color: var(--rouge-1);
}
.rouge-2 {
  color: var(--rouge-2);
}
.rouge-3 {
  color: var(--rouge-3);
}
.rouge-4 {
  color: var(--rouge-4);
}
.rouge-5 {
  color: var(--rouge-5);
}
.rouge-6 {
  color: var(--rouge-6);
}
.rose {
  color: var(--rose);
}
.rose-1 {
  color: var(--rose-1);
}
.rose-2 {
  color: var(--rose-2);
}
.rose-3 {
  color: var(--rose-3);
}
.rose-4 {
  color: var(--rose-4);
}
.rose-5 {
  color: var(--rose-5);
}
.rose-6 {
  color: var(--rose-6);
}
.bleu {
  color: var(--bleu);
}
.bleu-1 {
  color: var(--bleu-1);
}
.bleu-2 {
  color: var(--bleu-2);
}
.bleu-3 {
  color: var(--bleu-3);
}
.bleu-4 {
  color: var(--bleu-4);
}
.bleu-5 {
  color: var(--bleu-5);
}
.bleu-6 {
  color: var(--bleu-6);
}
.violet {
  color: var(--violet);
}
.violet-1 {
  color: var(--violet-1);
}
.violet-2 {
  color: var(--violet-2);
}
.violet-3 {
  color: var(--violet-3);
}
.violet-4 {
  color: var(--violet-4);
}
.violet-5 {
  color: var(--violet-5);
}
.violet-6 {
  color: var(--violet-6);
}
.cyan {
  color: var(--cyan);
}
.cyan-1 {
  color: var(--cyan-1);
}
.cyan-2 {
  color: var(--cyan-2);
}
.cyan-3 {
  color: var(--cyan-3);
}
.cyan-4 {
  color: var(--cyan-4);
}
.cyan-5 {
  color: var(--cyan-5);
}
.cyan-6 {
  color: var(--cyan-6);
}
.teal {
  color: var(--teal);
}
.teal-4 {
  color: var(--teal-4);
}
.teal-5 {
  color: var(--teal-5);
}
.teal-6 {
  color: var(--teal-6);
}
.vert {
  color: var(--vert);
}
.vert-1 {
  color: var(--vert-1);
}
.vert-2 {
  color: var(--vert-2);
}
.vert-3 {
  color: var(--vert-3);
}
.vert-4 {
  color: var(--vert-4);
}
.vert-5 {
  color: var(--vert-5);
}
.vert-6 {
  color: var(--vert-6);
}
.jaune {
  color: var(--jaune);
}
.jaune-1 {
  color: var(--jaune-1);
}
.jaune-2 {
  color: var(--jaune-2);
}
.jaune-3 {
  color: var(--jaune-3);
}
.jaune-4 {
  color: var(--jaune-4);
}
.jaune-5 {
  color: var(--jaune-5);
}
.jaune-6 {
  color: var(--jaune-6);
}
.ambre {
  color: var(--ambre);
}
.ambre-1 {
  color: var(--ambre-1);
}
.ambre-2 {
  color: var(--ambre-2);
}
.ambre-3 {
  color: var(--ambre-3);
}
.ambre-4 {
  color: var(--ambre-4);
}
.ambre-5 {
  color: var(--ambre-5);
}
.ambre-6 {
  color: var(--ambre-6);
}
.orange {
  color: var(--orange);
}
.orange-1 {
  color: var(--orange1);
}
.orange-2 {
  color: var(--orange-2);
}
.orange-3 {
  color: var(--orange-3);
}
.orange-4 {
  color: var(--orange-4);
}
.orange-5 {
  color: var(--orange-5);
}
.orange-6 {
  color: var(--orange-6);
}
.orangeFonce {
  color: var(--orangeFonce);
}
.orangeFonce-1 {
  color: var(--orangeFonce-1);
}
.orangeFonce-2 {
  color: var(--orangeFonce-2);
}
.orangeFonce-3 {
  color: var(--orangeFonce-3);
}
.orangeFonce-4 {
  color: var(--orangeFonce-4);
}
.orangeFonce-5 {
  color: var(--orangeFonce-5);
}
.orangeFonce-6 {
  color: var(--orangeFonce-6);
}
.lime {
  color: var(--lime);
}
.lime-1 {
  color: var(--lime-1);
}
.lime-2 {
  color: var(--lime-2);
}
.lime-3 {
  color: var(--lime-3);
}
.lime-4 {
  color: var(--lime-4);
}
.lime-5 {
  color: var(--lime-5);
}
.lime-6 {
  color: var(--lime-6);
}
.brun {
  color: var(--brun);
}
.brun-1 {
  color: var(--brun-1);
}
.brun-2 {
  color: var(--brun-2);
}
.brun-3 {
  color: var(--brun-3);
}
.brun-4 {
  color: var(--brun-4);
}
.brun-5 {
  color: var(--brun-5);
}
.brun-6 {
  color: var(--brun-6);
}
.gris {
  color: var(--gris);
}
.gris-1 {
  color: var(--gris-1);
}
.gris-2 {
  color: var(--gris-2);
}
.gris-3 {
  color: var(--gris-3);
}
.gris-4 {
  color: var(--gris-4);
}
.gris-5 {
  color: var(--gris-5);
}
.gris-6 {
  color: var(--gris-6);
}
.grisBleu {
  color: var(--grisBleu);
}
.grisBleu-1 {
  color: var(--grisBleu-1);
}
.grisBleu-2 {
  color: var(--grisBleu-2);
}
.grisBleu-3 {
  color: var(--grisBleu-3);
}
.grisBleu-4 {
  color: var(--grisBleu-4);
}
.grisBleu-5 {
  color: var(--grisBleu-5);
}
.grisBleu-6 {
  color: var(--grisBleu-6);
}
.blanc {
  color: var(--blanc);
}
.blanc-1 {
  color: var(--blanc-1);
}
.blanc-2 {
  color: var(--blanc-2);
}
.blanc-3 {
  color: var(--blanc-3);
}
.noir {
  color: var(--noir);
}
.noir-1 {
  color: var(--noir-1);
}
.noir-2 {
  color: var(--noir-2);
}
.noir-3 {
  color: var(--noir-3);
}

/* Couleurs Fond */
.bgRouge {
  background: var(--rouge);
}
.bgRouge-1 {
  background: var(--rouge-1);
}
.bgRouge-2 {
  background: var(--rouge-2);
}
.bgRouge-3 {
  background: var(--rouge-3);
}
.bgRouge-4 {
  background: var(--rouge-4);
}
.bgRouge-5 {
  background: var(--rouge-5);
}
.bgRouge-6 {
  background: var(--rouge-6);
}
.bgRose {
  background: var(--rose);
}
.bgRose-1 {
  background: var(--rose-1);
}
.bgRose-2 {
  background: var(--rose-2);
}
.bgRose-3 {
  background: var(--rose-3);
}
.bgRose-4 {
  background: var(--rose-4);
}
.bgRose-5 {
  background: var(--rose-5);
}
.bgRose-6 {
  background: var(--rose-6);
}
.bgBleu {
  background: var(--bleu);
}
.bgBleu-1 {
  background: var(--bleu-1);
}
.bgBleu-2 {
  background: var(--bleu-2);
}
.bgBleu-3 {
  background: var(--bleu-3);
}
.bgBleu-4 {
  background: var(--bleu-4);
}
.bgBleu-5 {
  background: var(--bleu-5);
}
.bgBleu-6 {
  background: var(--bleu-6);
}
.bgViolet {
  background: var(--violet);
}
.bgViolet-1 {
  background: var(--violet-1);
}
.bgViolet-2 {
  background: var(--violet-2);
}
.bgViolet-3 {
  background: var(--violet-3);
}
.bgViolet-4 {
  background: var(--violet-4);
}
.bgViolet-5 {
  background: var(--violet-5);
}
.bgViolet-6 {
  background: var(--violet-6);
}
.bgCyan {
  background: var(--cyan);
}
.bgCyan-1 {
  background: var(--cyan-1);
}
.bgCyan-2 {
  background: var(--cyan-2);
}
.bgCyan-3 {
  background: var(--cyan-3);
}
.bgCyan-4 {
  background: var(--cyan-4);
}
.bgCyan-5 {
  background: var(--cyan-5);
}
.bgCyan-6 {
  background: var(--cyan-6);
}
.bgTeal {
  background: var(--teal);
}
.bgTeal-1 {
  background: var(--teal-1);
}
.bgTeal-2 {
  background: var(--teal-2);
}
.bgTeal-3 {
  background: var(--teal-3);
}
.bgTeal-4 {
  background: var(--teal-4);
}
.bgTeal-5 {
  background: var(--teal-5);
}
.bgTeal-6 {
  background: var(--teal-6);
}
.bgVert {
  background: var(--vert);
}
.bgVert-1 {
  background: var(--vert-1);
}
.bgVert-2 {
  background: var(--vert-2);
}
.bgVert-3 {
  background: var(--vert-3);
}
.bgVert-4 {
  background: var(--vert-4);
}
.bgVert-5 {
  background: var(--vert-5);
}
.bgVert-6 {
  background: var(--vert-6);
}
.bgJaune {
  background: var(--jaune);
}
.bgJaune-1 {
  background: var(--jaune-1);
}
.bgJaune-2 {
  background: var(--jaune-2);
}
.bgJaune-3 {
  background: var(--jaune-3);
}
.bgJaune-4 {
  background: var(--jaune-4);
}
.bgJaune-5 {
  background: var(--jaune-5);
}
.bgJaune-6 {
  background: var(--jaune-6);
}
.bgAmbre {
  background: var(--ambre);
}
.bgAmbre-1 {
  background: var(--ambre-1);
}
.bgAmbre-2 {
  background: var(--ambre-2);
}
.bgAmbre-3 {
  background: var(--ambre-3);
}
.bgAmbre-4 {
  background: var(--ambre-4);
}
.bgAmbre-5 {
  background: var(--ambre-5);
}
.bgAmbre-6 {
  background: var(--ambre-6);
}
.bgOrange {
  background: var(--orange);
}
.bgOrange-1 {
  background: var(--ambre-1);
}
.bgOrange-2 {
  background: var(--ambre-2);
}
.bgOrange-3 {
  background: var(--ambre-3);
}
.bgOrange-4 {
  background: var(--ambre-4);
}
.bgOrange-5 {
  background: var(--ambre-5);
}
.bgOrange-6 {
  background: var(--ambre-6);
}
.bgOrangeFonce {
  background: var(--orangeFonce);
}
.bgOrangeFonce-1 {
  background: var(--orangeFonce-1);
}
.bgOrangeFonce-2 {
  background: var(--orangeFonce-2);
}
.bgOrangeFonce-3 {
  background: var(--orangeFonce-3);
}
.bgOrangeFonce-4 {
  background: var(--orangeFonce-4);
}
.bgOrangeFonce-5 {
  background: var(--orangeFonce-5);
}
.bgOrangeFonce-6 {
  background: var(--orangeFonce-6);
}
.bgLime {
  background: var(--lime);
}
.bgLime-1 {
  background: var(--lime-1);
}
.bgLime-2 {
  background: var(--lime-2);
}
.bgLime-3 {
  background: var(--lime-3);
}
.bgLime-4 {
  background: var(--lime-4);
}
.bgLime-5 {
  background: var(--lime-5);
}
.bgLime-6 {
  background: var(--lime-6);
}
.bgGris {
  background: var(--gris);
}
.bgGris-1 {
  background: var(--gris-1);
}
.bgGris-2 {
  background: var(--gris-2);
}
.bgGris-3 {
  background: var(--gris-3);
}
.bgGris-4 {
  background: var(--gris-4);
}
.bgGris-5 {
  background: var(--gris-5);
}
.bgGris-6 {
  background: var(--gris-6);
}
.bgGrisBleu {
  background: var(--grisBleu);
}
.bgGrisBleu-1 {
  background: var(--grisBleu-1);
}
.bgGrisBleu-2 {
  background: var(--grisBleu-2);
}
.bgGrisBleu-3 {
  background: var(--grisBleu-3);
}
.bgGrisBleu-4 {
  background: var(--grisBleu-4);
}
.bgGrisBleu-5 {
  background: var(--grisBleu-5);
}
.bgGrisBleu-6 {
  background: var(--grisBleu-6);
}
.bgBrun {
  background: var(--brun);
}
.bgBrun-1 {
  background: var(--brun-1);
}
.bgBrun-2 {
  background: var(--brun-2);
}
.bgBrun-3 {
  background: var(--brun-3);
}
.bgBrun-4 {
  background: var(--brun-4);
}
.bgBrun-5 {
  background: var(--brun-5);
}
.bgBrun-6 {
  background: var(--brun-6);
}
.bgBlanc {
  background: var(--blanc);
}
.bgBlanc {
  background: var(--blanc);
}
.bgBlanc-1 {
  background: var(--blanc-1);
}
.bgBlanc-2 {
  background: var(--blanc-2);
}
.bgBlanc-3 {
  background: var(--blanc-3);
}
.bgNoir {
  background: var(--noir);
}
.bgNoir-1 {
  background: var(--noir-1);
}
.bgNoir-2 {
  background: var(--noir-2);
}
.bgNoir-3 {
  background: var(--noir-3);
}

/* Bords */
.bord-vert {
  border: 2px solid var(--vert);
}
.bord-rouge {
  border: 2px solid var(--rouge);
}
.bord-orange {
  border: 2px solid var(--orange);
}
.bord-bleu {
  border: 2px solid var(--bleu);
}
.bord-jaune {
  border: 2px solid var(--jaune);
}
.bord-gris {
  border: 2px solid var(--gris);
}
.bord-blanc {
  border: 2px solid var(--blanc);
}
.bordTuto {
  border: 1px solid #ccc;
  border-radius: 0.43rem;
  background-color: #242529;
}
.bord-gauche {
  border-left: 8px solid var(--bleu);
  margin-left: var(--space-m);
}

/* Majuscule, minuscules */
.text-lowercase {
  text-transform: lowercase;
}
.text-uppercase {
  text-transform: uppercase;
}
.text-capitalize {
  text-transform: capitalize;
}
.text-justify {
  text-align: justify;
}
.text-italic {
  font-style: italic;
}

/* Arrondis */
.rounded {
  border-radius: 6px;
}
.rounded-0 {
  border-radius: 0;
}
.rounded-1 {
  border-radius: 0.2em;
}
.rounded-2 {
  border-radius: 0.3em;
}
.rounded-3 {
  border-radius: 0.4em;
}
.rounded-4 {
  border-radius: 0.6em;
}
.rounded-5 {
  border-radius: 0.8em;
}
.rounded-6 {
  border-radius: 1em;
}
.rounded-circle {
  border-radius: 50%;
}

/* Sections */
.section {
  position: relative;
  scroll-snap-align: center;
  z-index: 1;
  color: #d3d3d3;
  padding: 0 0.5rem 1rem 0.5rem;
  border-radius: 6px;
  margin: 3em 0;
}
.section__page {
  background-color: hsl(0, 0%, 12%);
  border-radius: 6px;
  padding: 1em;
  margin: 3em 0;
}
.section__header {
  display: none;
  position: sticky;
  top: 0;
  left: 0;
  padding: 1.25rem 0 0.3rem 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  background-color: #0a3d62;
  border-radius: 6px;
}
.section__title {
  letter-spacing: 0.03rem;
  text-transform: uppercase;
  color: #dee2e6;
}

/* Encarts */
.encart {
  border: 1px ridge #e1e1e1;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  padding: 1rem;
  background: #1c2331;
  margin: 0.5rem 0;
}
.encart p,
.encart ol,
.encart ul {
  font-size: var(--fs-5);
  line-height: 1.2;
}
.encart:hover {
  background: #000;
  transition: 0.4s;
}
.encart h2 {
  font-size: var(--fs-7);
  font-family: 'Courier New', Courier, monospace;
  color: #ffd359;
  text-align: center;
  text-transform: uppercase;
  margin: 0.5em 0 1em 0;
}
.encart h3 {
  color: #eab92d;
}

/* Input radios */
.radioRectInline,
.radioRondInline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  max-width: 480px;
  margin: 1rem auto 2rem;
}
.radioQuest input[type='radio'].radioQuestCheck,
.radioQuest input[type='radio'].radioQuestCheckBord,
.radioQuest input[type='radio'].radioQuestOuiNon,
input[type='radio'].radioRect,
input[type='radio'].radioRond,
input[type='radio'].radioOvale {
  display: none;
}
input[type='radio'].radioRond + label {
  padding: 0.5rem 1.2rem;
  border: 4px dashed #0dcaf0;
  opacity: 0.4;
  border-radius: 50%;
}
input[type='radio'].radioRond:checked + label {
  border: 4px solid #0dcaf0;
  opacity: 1;
}
input[type='radio'].radioOvale + label {
  background: var(--gris-bleu);
  padding: 0.5rem 1.2rem;
  border: 4px dashed #0dcaf0;
  opacity: 0.5;
  border-radius: 0.25em;
}
input[type='radio'].radioOvale:checked + label {
  border: 4px solid #0dcaf0;
  opacity: 1;
}
input[type='radio'].radioRond.bord-jaune + label {
  border: 1px solid #ff0;
}
input[type='radio'].radioRond.bord-vert + label {
  border: 1px solid green;
}
input[type='radio'].radioRond.bord-bleu + label {
  border: 1px solid #00f;
}
input[type='radio'].radioRond.bord-rouge + label {
  border: 1px solid red;
}
input[type='radio'].radioRect + label {
  font-size: 1.2em;
  font-weight: 700;
  padding: 0.5rem 0.2rem;
  border: 4px dashed #0dcaf0;
  opacity: 0.5;
  width: 100px;
  text-align: center;
  text-transform: uppercase;
  border-radius: 5px;
  transition: 0.2s ease-in;
}
input[type='radio'].radioRect + label:hover {
  background: rgb(0, 54, 108, 0.9);
  color: azure;
  cursor: pointer;
}
input[type='radio'].radioRect:checked + label {
  border: 4px solid #0dcaf0;
  opacity: 1;
  color: azure;
}
.radioQuest {
  color: #fffcf5;
  align-items: center;
  flex-wrap: wrap;
}
.radioQuest label {
  margin: 0.1rem;
  display: inline;
}
.radioQuest,
.row-space {
  display: flex;
  justify-content: space-between;
}

/* RadioQuest */
.radioQuest input[type='radio'].radioQuestCheck + label::before {
  content: '🔳';
  font-size: var(--fs-10);
}

.radioQuest input[type='radio'].radioQuestCheck:checked + label::before,
.radioQuest input[type='radio'].radioQuestOuiNon.radioQuestOui + label::before {
  content: '✔️';
}
.radioQuest input[type='radio'].radioQuestOuiNon + label::before {
  opacity: 0.5;
}

.radioQuest input[type='radio'].radioQuestOuiNon:hover + label {
  border: 1px dashed #00f;
  border-radius: 6px;
  background: transparent;
  transition: 0.3s ease-in;
}
.radioQuest input[type='radio'].radioQuestOuiNon:checked + label::before {
  opacity: 1;
}
.radioQuest input[type='radio'].radioQuestOuiNon.radioQuestNon + label::before {
  content: '❌';
}
.radioQuest input[type='radio'].radioQuestCheckBord:hover + label {
  background: #00003d;
  transition: 0.2s ease-in;
}
.radioQuest input[type='radio'].radioQuestCheckBord + label {
  padding: 0.3rem 0.5rem;
  border: 1px dashed #ccc;
  width: 32%;
  height: 3.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.radioQuest input[type='radio'].radioQuestCheckBord:checked + label {
  background: rgb(0, 95, 95);
  border: 1px solid #4b93ff;
}
.radioQuestChecksdd:checked {
  background-color: #0d6efd;
  border-color: #4b93ff;
}
.radioQuestOui + label {
  background-color: greenyellow;
  border: 1px dashed transparent;
  border-radius: 6px;
}
.radioQuestNon + label {
  background-color: #4b93ff;
  border: 1px dashed transparent;
  border-radius: 6px;
}
input[type='checkbox'],
input[type='image'],
input[type='radio'] {
  background-color: transparent;
  border: 0;
  width: auto;
}
.radio2x > input[type='radio'],
.radio3x > input[type='radio'] {
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}


.questH {
  height: 3.5rem;
}
.rebExacte {
  width: 100%;
  height: 2px;
  background: goldenrod;
}
.select-01,
.select-02,
.select-03 {
  box-sizing: border-box;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  width: 100%;
  padding: 0.2em;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.select-01 {
  border: 2px dashed var(--blanc);
  color: var(--blanc);
}

.select-02 {
  border: 2px dashed #7098cf;
  color: #7098cf;
}

.select-03 {
  border: 2px dashed #eab92d;
  color: #eab92d;
}

.select-01:hover,
.select-02:hover,
.select-03:hover {
  border: 2px ridge var(--blanc);
  cursor: pointer;
}

.selected {
  border: 2px ridge orange;
}
.selectedBord {
  border: 3px solid orange;
}
.selBordGauche {
  border-left: 5px solid orange;
  outline: #0097a7 5px solid;
}
/* Ratios */
.ratio,
.mediaCard,
.video-responsive {
  position: relative;
}
.ratio {
  width: 100%;
}
.ratio::before {
  display: block;
  padding-top: 0;
  content: '';
}
.ratio-1x1 {
  padding-top: 0;
}
.ratio-4x3 {
  padding-top: calc(3 / 4 * 100%);
}
.ratio-16x9 {
  padding-top: calc(9 / 16 * 100%);
}
.ratio-21x9 {
  padding-top: calc(9 / 21 * 100%);
}
.ratio ratio-16x9 {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.ratio > *,
.video-responsive iframe {
  top: 0;
  left: 0;
  height: 100%;
  position: absolute;
  width: 100%;
}
.video-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  height: 0;
}

/* MediaCard */
.mediaCard {
  background-color: #e6e7ee;
  flex-direction: column;
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0 2rem 0;
}
.mediaCard,
.mediaCard a,
.mediaCard li,
.mediaCard ol,
.mediaCard p,
.mediaCard ul {
  color: #000;
  font-size: var(--fs-4);
}
.mediaCardBody h2 {
  color: var(--violet);
  margin-top: 1em;
  font-size: var(--fs-6);
}
.mediaCardBody h3 {
  color: var(--gris-4);
  font-size: var(--fs-5);
}
.mediaCardBody .source {
  border-top: dashed orange 1px;
  margin-top: 1em;
  color: var(--gris-3);
}
.mediaCardAudio {
  padding: 1rem;
  margin: 1rem 0 2rem 0;
  background: rgb(94, 94, 94);
  border-radius: 6px;
}
.mediaCardAudio h2 {
  color: #e1ffff;
}
.mediaCardAudio .source {
  color: #a8a8a8;
}
.mediaCardSon {
  background: black;
  padding-bottom: 2em;
  border-radius: 6px;
}

/* youtube player */
.youtube-player {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
  border-radius: 6px;
}
.youtube-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}
.youtube-player img {
  object-fit: cover;
  display: block;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  margin: auto;
  max-width: 100%;
  width: 100%;
  position: absolute;
  border: none;
  height: auto;
  cursor: pointer;
  -webkit-transition: 0.4s all;
  -moz-transition: 0.4s all;
  transition: 0.4s all;
}
.youtube-player img:hover {
  filter: brightness(75%);
  -webkit-filter: brightness(75%);
}
.youtube-player .play {
  height: 100px;
  width: 100px;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
  position: absolute;
  background: url(https://emi.re/img/icn/lectureyt.png) no-repeat;
  cursor: pointer;
}
.youtube-player:hover .play {
  background: url(https://emi.re/img/icn/lectureythv.png) no-repeat;
}

/* 		bouton close animé */
.modal-container [class^='btnFerme']:last-child {
  margin-right: 0;
}

.btnFermeAnime {
  height: 40px;
  width: 40px;
  background: red;
  border-radius: 5px;
  position: absolute;
  top: 10px;
  right: 10px;
}

.btnFermeAnime .inner {
  display: block;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.btnFermeAnime .inner:before {
  content: '';
  position: absolute;
  height: 2px;
  width: 50px;
  background-color: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  transition: ease-out 0.2s all;
}

.btnFermeAnime .inner:after {
  content: '';
  position: absolute;
  height: 2px;
  width: 50px;
  background-color: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: ease-out 0.2s all;
}

.btnFermeAnime .label {
  color: #fff;
  opacity: 0;
  transition: all 0.2s ease-out;
  margin: 0 auto;
}

.btnFermeAnime:hover .inner:before,
.btnFermeAnime:focus .inner:before {
  transform: translate(-50%, 0%) rotate(0);
  top: 25%;
}

.btnFermeAnime:hover .inner:after,
.btnFermeAnime:focus .inner:after {
  transform: translate(-50%, 0%) rotate(0);
  top: 76%;
}

.btnFermeAnime:hover .label,
.btnFermeAnime:focus .label {
  opacity: 1;
}

/* MiniCard, Card */
.card,
.mediaCard {
  display: flex;
}

.card-text,
.card-title {
  text-align: center;
}
.card {
  background: #2c2c2c;
  justify-content: space-between;
  width: 230px;
  height: 460px;
  margin: 10px;
}
.card-img {
  border-radius: 6px 6px 0 0;
  background-size: cover;
}
.card-body {
  padding: 0.5rem;
  line-height: 1;
}
.card-title {
  margin-bottom: 0.5rem;
  color: #fb6a4a;
  font-size: 1rem;
  font-weight: 700;
}
.card-text {
  font-size: 1rem;
  line-height: 1;
}
.card-footer {
  display: block;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 6px;
  border-radius: 0 0 6px 6px;
}
.cardAudio {
  display: flex;
  justify-content: center;
  height: 54px;
}

/* Galerie */
.galerie {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1260px;
}
.gal-titre {
  text-transform: uppercase;
  text-align: center;
}

.galerie-petite {
  width: 130px;
  height: 180px;
}
.galerie-petite .gal-titre {
  font-size: var(--fs-2);
}

.galerie-petite-plus {
  width: 200px;
  height: 300px;
  font-size: var(--fs-2);
  line-height:  var(--fs-2);
}
.galerie-petite img {
  width: 130px;
  height: auto;
  max-height: 60%;
}
.galerie-petite-plus .galerie-lien {
  font-size: var(--fs-1);
}
.galerie-petite-plus img {
  width: 200px;
  height: auto;
  max-height: 60%;
}

.galerie-moyenne {
  width: 220px;
  height: 340px;
}
.galerie-moyenne .gal-texte p {
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  padding: 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-2);
  color: var(--blanc-1);
  text-align: justify;
}
.galerie-moyenne .gal-titre {
  font-size: var(--fs-3);
}
.galerie-moyenne img {
  width: 220px;
  height: auto;
  max-height: 45%;
}
.galerie-grande {
  width: 280px;
  height: 480px;
}
.galerie-grande img {
  width: 280px;
  height: auto;
  max-height: 45%;
}
.galerie-grande .gal-titre {
  font-size: var(--fs-4);
}
.galerie-grande .gal-texte p {
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  padding: 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-3);
  color: var(--blanc-1);
  text-align: justify;
}
.galerie .gal-item {
  background: var(--gris-6);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  margin: 8px;
}

.galerie .gal-texte {
  height: 25%;
  margin: 3px;
}

.gallerie-img {
  object-fit: cover;
  border-radius: 6px 6px 0 0;
}
.galerie-lien {
  display: flex;
  align-items: center;
  position: sticky;
  top: 100vh;
  background: #2e2e2e;
  color: #fefedf;
  border-top: 2px solid var(--jaune);
  border-bottom: 2px solid var(--jaune);
  margin-bottom: 0.5rem;
}
.galerie-lien:hover {
  padding-left: 0.5em;
  border-left: 0.3em solid #ffefe5;
  transition: 0.2s ease-in;
}
.galerie-lien img {
  width: 32px;
  float: left;
  margin: 0.1em;
  padding-right: 0.5em;
}
.galerie-tab {
  display: flex;
  justify-content: center;
  justify-content: space-between;
  margin: 10px;
}
.galerie-tab .gal-icone {
  width: 24px;
  margin-right: 10px;
}
.gal-video {
  width: 280px;
  height: auto;
  max-height: 50%;
}

.miniCard {
  display: block;
  width: 140px;
  height: 230px;
  margin: 5px;
  flex-shrink: 0;
  text-overflow: ellipsis;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 6px;
  background: #000;
  transition: 0.2s ease-in;
}
.miniCard:hover {
  border: 1px solid rgba(171, 171, 171);
}
.miniCard h6 {
  text-align: center;
  font-size: 0.7rem;
  line-height: 1;
  color: #87ceeb;
}
.miniCard p {
  font-size: 0.6rem;
  line-height: 1;
  padding: 6px;
}
.miniCard a {
  color: #fff;
}
.miniCard img {
  width: 100%;
  height: auto;
  border-radius: 6px 6px 0 0;
}
/* Divers : Couper et ajouter 3 points, stopper les flottants */
.long-txt {
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  padding: 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stopFloat {
  overflow: auto;
}
/* img-thumbnail cover */
.img-cover,
.img-fluid {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
}

/* 		Tableaux */

table {
  border-collapse: collapse;
  /* centrer */
  margin: auto;
}

td,
th {
  border: 1px solid lightcoral;
  padding: 10px;
}

/* Visible, invisible */
.vis {
  display: block;
  opacity: 1;
}
.inv {
  display: none;
  opacity: 0;
}

/* Boutons */
.btnLien {
  display: flex;
  align-items: center;
  min-width: 140px;
  text-align: center;
  font-family: Nunito_Sans, sans-serif;
  font-size: var(--fs-4);
  background: #2e2e2e;
  color: #fefedf;
  border-top: 2px solid var(--jaune);
  border-bottom: 2px solid var(--jaune);
  margin-top: 0.8rem;
}
.btnLien img {
  float: left;
  height: 32px;
  margin: 0.1em;
  padding-right: 0.5em;
}
.btnLien:hover {
  padding-left: 0.5em;
  border-left: 0.3em solid #ffefe5;
  transition: 0.2s ease-in;
}

.btnReponse {
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid;
  vertical-align: middle;
  border-radius: 6px;
  padding: 0.375em 0.75em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease;
}
.btnReponse:hover {
  cursor: pointer;
  background: rgb(0, 164, 0);
  color: #fff;
}

.btnGris {
  display: inline-block;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: #2f2f2f;
  outline: 0;
  padding: 0.2rem 1rem;
  color: #fff;
  letter-spacing: 0.5rem;
  text-indent: 0.5rem;
  transition: color 0.2s, border 0.3s;
  border-radius: 0.3em;
}
.btnGris:hover {
  color: rgba(235, 255, 122, 0.8);
  border: 2px solid rgba(255, 255, 255, 0);
  transition: color 0.1s, border 0.2s;
}
/* Bouton base orange */
.btn {
  background-color: #ffb94b;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#fddb6f),
    to(#ffb94b)
  );
  background-image: -webkit-linear-gradient(top, #fddb6f, #ffb94b);
  background-image: -moz-linear-gradient(top, #fddb6f, #ffb94b);
  background-image: -ms-linear-gradient(top, #fddb6f, #ffb94b);
  background-image: -o-linear-gradient(top, #fddb6f, #ffb94b);
  background-image: linear-gradient(top, #fddb6f, #ffb94b);

  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;

  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);

  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.3) inset;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.3) inset;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;

  border-width: 1px;
  border-style: solid;
  border-color: #d69e31 #e3a037 #d5982d #e3a037;

  text-transform: uppercase;
  text-align: center;
  padding: 0.5em 1em;
  color: #472a00;
  font-weight: 700;
  margin: 1em 0 1.5em 0;
}
.btn a {
  color: #000;
}
.btn:hover,
.btn:focus {
  background-color: #fddb6f;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ffb94b),
    to(#fddb6f)
  );
  background-image: -webkit-linear-gradient(top, #ffb94b, #fddb6f);
  background-image: -moz-linear-gradient(top, #ffb94b, #fddb6f);
  background-image: -ms-linear-gradient(top, #ffb94b, #fddb6f);
  background-image: -o-linear-gradient(top, #ffb94b, #fddb6f);
  background-image: linear-gradient(top, #ffb94b, #fddb6f);
  cursor: pointer;
}

.clickPourVoir {
  width: 40%;
  top: -3rem;
  left: 50%;
  position: relative;
  opacity: 0.8;
  display: block;
  line-height: 2;
  border-radius: 0.3em;
  color: #fff;
  font-size: var(--fs-5);
  transition: 0.3s ease-in;
}
.clickPourVoir:hover {
  opacity: 1;
}

.btnDys {
  float: right;
  width: 120px;
  height: 32px;
  font-size: var(--fs-3);
  border: 1px solid green;
  border-radius: 6px;
  cursor: pointer;
  color: var(--jaune);
}
.btnDys img {
  float: left;
  max-height: 24px;
  padding: 6px 10px 0 6px;
}
.btnPlus {
  position: absolute;
  display: inline-block;
  border-radius: 50%;
  color: #fff;
  border: 2px solid #ee907b;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  font-size: 1em;
  line-height: 1.25em;
  font-weight: 600;
  background-color: #ee907b;
}
.btn-large {
  width: 100%;
  border-radius: 6px;
  font-size: var(--fs-5);
  text-transform: uppercase;
  padding: 5px;
}

/* Sommaire summary */
summary {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 15px 0 5px 5px;
}
details {
  background: #f6f6f6;
  cursor: pointer;
  border-radius: 6px;
}
details p {
  color: var(--brun);
  line-height: 1.5;
  padding: 0 15px 20px 50px;
  cursor: auto;
  text-align: justify;
}
details summary::before {
  /* content: '🔽'; */
  display: inline-block;
  margin-right: 10px;
  transition: transform 0.4s ease-out;
}
details[open] summary::before {
  transform: rotate(90deg);
}

/* Badges */
.badge {
  color: #000;
  border-radius: 6px;
  padding: 0 1rem;
  float: left;
  margin-right: 0.8rem;
  line-height: 1;
}

.galerie-badge {
  display: inline-block;
  width: 240px;
  height: auto;
}
/* Badges le saviez-vous*/
.badge-ask {
  display: flex;
  justify-content: center;
  align-items: center;
  color: whitesmoke;
  border-radius: 6px;
  padding: 1rem;
  font-size: var(--fs-4);
  background: brown;
  border-radius: 6px;
}
/* Ticket */
.ticketFond {
  height: 98px;
  margin: 2em 0 1em 0;
  background-color: var(--jaune);
  border: 1px solid var(--jaune);
  border-radius: 0.5em;
}
.ticketTrait {
  height: 12px;
  margin: 44px 0;
  background-color: #291100;
}
.ticketTxt {
  width: 200px;
  margin-left: 50px;
  background-color: var(--jaune);
  color: #8b4513;
  font-size: var(--fs-7);
  text-align: center;
  position: relative;
  z-index: 1;
  top: -9px;
}
@media (min-width: 768px) {
  .ticketTxt {
    width: 200px;
    margin-left: 100px;
    top: -20px;
  }
}

/*  */

/*  */

/* Grilles */
/* auto-fill : rempli la ligne avec autant de colonne qu'elle peut en contenir.
auto-fit : rempli la ligne avec autant de colonne qu'elle peut en contenir et agrandit les, de manière à occuper */
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12,
.grid-2-3,
.grid-2-8-2,
.grid-2-6-4,
.grid-2-8,
.grid-3-9,
.grid-1-10-1,
.grid-4-8,
.grid-5-7,
.grid-8-3-1,
.grid-2-4 {
  grid-gap: var(--fs-2);
  display: grid;
}
.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 2fr));
}
.grid-2-3 {
  grid-template-columns: 2fr 3fr;
}
.grid-2-4 {
  grid-template-columns: 2fr 4fr;
}
.grid-2-8 {
  grid-template-columns: 2fr 8fr;
}
.grid-2-8-2 {
  grid-template-columns: 2fr 8fr 2fr;
}
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(100px, 3fr));
}
.grid-3-9 {
  grid-template-columns: 3fr 9fr;
}
.grid-1-10-1 {
  grid-template-columns: 1fr 10fr 1fr;
}
.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 4fr));
}
.grid-4-8 {
  grid-template-columns: 4fr 8fr;
}
.grid-5 {
  grid-template-columns: repeat(auto-fit, minmax(100px, 5fr));
}
.grid-5-7 {
  grid-template-columns: 5fr 7fr;
}
.grid-6 {
  grid-template-columns: repeat(6, 1fr);
}
.grid-7 {
  grid-template-columns: repeat(7, 1fr);
}
.grid-8 {
  grid-template-columns: repeat(8, 1fr);
}
.grid-8-3-1 {
  grid-template-columns: 8fr 3fr 1fr;
}
.grid-2-6-4{
  grid-template-columns: 2fr 6fr 4fr;
}
.grid-9 {
  grid-template-columns: repeat(9, 1fr);
}
.grid-10 {
  grid-template-columns: repeat(10, 1fr);
}
.grid-11 {
  grid-template-columns: repeat(11, 1fr);
}
.grid-12 {
  grid-template-columns: repeat(12, 1fr);
}
.grid-4-3-1-4-2-2-4-1-3-4 {
  display: grid;
  grid-template-columns: 4fr 3fr 1fr 4fr 2fr 2fr 4fr 1fr 3fr 4fr;
  grid-template-rows: minmax(0, 1fr) repeat(6, minmax(2.5rem, auto)) minmax(
      0,
      1fr
    );
  grid-gap: var(--fs-2);
}
.grid-1-11,
.grid-10-2,
.grid-2-10,
.grid-4-8,
.grid-8-4 {
  grid-gap: var(--fs-2);
  display: grid;
  align-items: center;
}
.grid-1-11 {
  grid-template-columns: 1fr 11fr;
}
.grid-2-10 {
  grid-template-columns: 2fr 10fr;
}
.grid-10-2 {
  grid-template-columns: 10fr 2fr;
}
.grid-8-4 {
  grid-template-columns: 8fr 4fr;
}
.grid-4-8 {
  grid-template-columns: 4fr 8fr;
}

/* Tooltip */
[data-tooltip] {
  position: relative;
  font-family: Nunito_Sans, sans-serif;
}
[data-tooltip]:after,
[data-tooltip]:before {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  left: 50%;
  bottom: calc(100% + 5px);
  pointer-events: none;
  transition: 0.2s;
  will-change: transform;
}
[data-tooltip]:before {
  content: attr(data-tooltip);
  padding: 10px 18px;
  min-width: 50px;
  max-width: 300px;
  width: max-content;
  width: -moz-max-content;
  border-radius: 6px;
  font-size: var(--fs-3);
  background-color: rgba(0, 12, 24, 0.95);
  color: rgb(255, 246, 228);
  text-align: center;
  white-space: pre-wrap;
  transform: translate(-50%, -5px) scale(0.5);
  z-index: 9999;
}
[data-tooltip]:after {
  content: '';
  border-style: solid;
  border-width: 5px 5px 0;
  border-color: rgba(55, 64, 70, 0.9) transparent transparent;
  transition-duration: 0s;
  transform-origin: top;
  transform: translateX(-50%) scaleY(0);
}
[data-tooltip]:hover:after,
[data-tooltip]:hover:before {
  visibility: visible;
  opacity: 1;
}
[data-tooltip]:hover:before {
  transition-delay: 0.3s;
  transform: translate(-50%, -5px) scale(1);
}
[data-tooltip]:hover:after {
  transition-delay: 0.5s;
  transition-duration: 0.2s;
  transform: translateX(-50%) scaleY(1);
}
[tool-pos='left']:after,
[tool-pos='left']:before {
  left: auto;
  right: calc(100% + 5px);
  bottom: 50%;
}
[tool-pos='left']:before {
  transform: translate(-5px, 50%) scale(0.5);
}
[tool-pos='left']:hover:before {
  transform: translate(-5px, 50%) scale(1);
}
[tool-pos='left']:after {
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent rgba(55, 64, 70, 0.9);
  transform-origin: left;
  transform: translateY(50%) scaleX(0);
}
[tool-pos='left']:hover:after,
[tool-pos='right']:hover:after {
  transform: translateY(50%) scaleX(1);
}
[tool-pos='right']:after,
[tool-pos='right']:before {
  left: calc(100% + 5px);
  bottom: 50%;
}
[tool-pos='right']:before {
  transform: translate(5px, 50%) scale(0.5);
}
[tool-pos='right']:hover:before {
  transform: translate(5px, 50%) scale(1);
}
[tool-pos='right']:after {
  border-width: 5px 5px 5px 0;
  border-color: transparent rgba(55, 64, 70, 0.9) transparent transparent;
  transform-origin: right;
  transform: translateY(50%) scaleX(0);
}
[tool-pos='bottom']:after,
[tool-pos='bottom']:before {
  top: calc(100% + 5px);
  bottom: auto;
}
[tool-pos='bottom']:before {
  transform: translate(-50%, 5px) scale(0.5);
}
[tool-pos='bottom']:hover:before {
  transform: translate(-50%, 5px) scale(1);
}
[tool-pos='bottom']:after {
  border-width: 0 5px 5px;
  border-color: transparent transparent rgba(55, 64, 70, 0.9);
  transform-origin: bottom;
}

/* Fiche action */
.ficheAction {
  background: rgb(0, 0, 0);
  background: linear-gradient(
    32deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(94, 57, 57, 0.8954175420168067) 79%,
    rgba(89, 89, 89, 1) 100%
  );
  border-radius: 6px;
  max-width: 840px;
  width: 100%;
  margin: 0 auto;
}
.ficheActionGrid {
  display: grid;
  grid-template-columns: 4fr 9fr;
  grid-gap: 0.5rem;
}
.ficheAction p {
  text-align: left;
  font-size: var(--fs-3);
  color: #008b8b;
  margin: 0.4em;
  line-height: 1;
}
.ficheAction .bordDroit {
  border-right: 4px solid brown;
}
.ficheAction .btnLien {
  font-size: var(--fs-2);
}
.ficheAction .btnLien img {
  height: 18px;
}
.ficheAction .bordDroit p {
  font-size: var(--fs-2);
}
.ficheAction .bordDroit h2,
.ficheAction img {
  font-size: var(--fs-3);
}
.ficheAction p {
  color: #09ffff;
}
.ficheAction h1 {
  font-size: var(--fs-4);
  text-align: center;
  text-transform: uppercase;
  color: var(--jaune);
}
.ficheAction h2 {
  margin: 1em 0 0.6em;
  color: #03bebe;
  font-size: var(--fs-3);
  letter-spacing: 0;
  text-transform: uppercase;
}

/*  */

/*  */

/*  */

/* Animations animated +  */
:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}
.zoom-2 img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: 0.6s ease-in-out;
  transition: 0.6s ease-in-out;
}

.zoom-2 div:hover img {
  position: relative;
  z-index: 500;
  -webkit-transform: scale(2);
  transform: scale(2);
  border-radius: 3px;
}
.zoom-3 img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: 0.6s ease-in-out;
  transition: 0.6s ease-in-out;
}

.zoom-3 div:hover img {
  position: relative;
  z-index: 500;
  -webkit-transform: scale(3);
  transform: scale(3);
  border-radius: 3px;
}

.zoom-4 img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: 0.6s ease-in-out;
  transition: 0.6s ease-in-out;
}

.zoom-4 div:hover img {
  position: relative;
  z-index: 500;
  -webkit-transform: scale(4);
  transform: scale(4);
  border-radius: 3px;
}
.anima {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated {
  opacity: 0;
  visibility: hidden;
  transition: 1s ease-in-out;
}
.animated.inview {
  opacity: 1;
  visibility: visible;
  transform: translate(0);
}
/*Init des animations avec tirets 
 */
.init-anim {
  opacity: 0;
  visibility: hidden;
}
.sousBulle.inview {
  background: orange;
  opacity: 1;
  visibility: visible;
}
@-webkit-keyframes opa_1 {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes opa_1 {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@-webkit-keyframes opa_0 {
  0% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
@keyframes opa_0 {
  0% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
.fadeIn {
  -webkit-animation-name: opa_1;
  animation-name: opa_1;
}
.fade-in {
  animation: fade-in 2s linear;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeOut {
  -webkit-animation-name: opa_0;
  animation-name: opa_0;
}

.fadeInDown {
  -webkit-animation-name: opa_1;
  animation-name: opa_1;
  transform: translateY(-150px);
}

.fadeInLeft {
  transform: translateX(-150px);
  -webkit-animation-name: opa_1;
  animation-name: opa_1;
}

.fadeInRight {
  transform: translateX(150px);
  -webkit-animation-name: opa_1;
  animation-name: opa_1;
}
.fade-in-down {
  animation: fade-in-down 2s ease infinite;
}
@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
@keyframes rubberBand {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

.slideDownFadeIn {
  transform: translateY(-150px);
  -webkit-animation-name: opa_1;
  animation-name: opa_1;
}

.slideUpFadeIn {
  transform: translateY(150px);
  -webkit-animation-name: opa_1;
  animation-name: opa_1;
}

.bounce-in-down {
  animation: bounce-in-right 1s ease-out;
}
@keyframes bounce-in-down {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(+30px);
  }
  80% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.bounce-in-right {
  animation: bounce-in-right 2s ease;
}
@keyframes bounce-in-right {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(-30px);
  }
  80% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}

.bounce-out {
  animation: bounce-out 2s ease;
}
@keyframes bounce-out {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

.bounce-out-down {
  animation: bounce-out-down 2s ease;
}
@keyframes bounce-out-down {
  0% {
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

.rotate-in-down-left {
  animation: rotate-in-down-left 2s ease;
}
@keyframes rotate-in-down-left {
  0% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}

.rotate-in-up-left {
  animation: rotate-in-up-left 2s ease;
}
@keyframes rotate-in-up-left {
  0% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
.gelatine {
  animation: gelatine 2.5s;
}
@keyframes gelatine {
  from,
  to {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}

@media (min-width: 481px) {
}

@media (min-width: 768px) {
  .radio2x > input[type='radio'] {
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
  }
  .radio3x > input[type='radio'] {
    -ms-transform: scale(3);
    -webkit-transform: scale(3);
    transform: scale(3);
  }
}

@media (min-width: 992px) {
}

@media (min-width: 1280px) {
}