/* GENERAL */
/* GENERAL */
/* GENERAL */
/* GENERAL */
/* GENERAL */
/* GENERAL */
/* GENERAL */
:root {
    --ecriture: black;
    --ecritureContraste: white;

    --background: #f1f1f1;
    --backgroundPrimaire: #ededed;
    --backgroundSecondaire: #864047;
    --tertiaryDark: #672d33;
    --fondVert: #1e5539;
    --boxShadow: 10px 10px 25px #756b6c, -10px -10px 25px #ccbebe;
    --boxShadowSurPrimaire: 15px 15px 30px #c3c3c3, -15px -15px 30px #c8c8c8;

    --elementCliquable: #982f3a;
    --boxShadowElementCliquable: #62262b 0px 2px 4px, rgba(101, 8, 8, 0.3) 0px 7px 13px -3px, #6e2129 0px -3px 2px inset;
    --elementCliquableHover: #b82d39;
    --elementCliquableSaturer: #bf202e;
}


html {
    scroll-behavior: smooth;
}

.changeTheme {
    grid-column: 15 / 16;
    cursor: pointer;
    margin-top: -10px;
    font-size: 16px;
    color: white;
}

.changeTheme:hover {
    color: var(--elementCliquableHover);
    text-decoration: none;
}

body {
    background: var(--background);
}

.fondNeutre {
    background: var(--background);
}

.primaireDark {
    /* background-color: #3b3e45; */
    background: var(--backgroundPrimaire);
}

.darkFond {
    background-color: #2c2c2c;
}

.secondaireDark {
    /* background-color: #46484b; */
    background: var(--backgroundSecondaire);
}

.tertiaryDark {
    background: var(--tertiaryDark);
}

.fondVert {
    background: #688B58;
}

.fondMusée {
    background-color: #A3333D;
}

.fondAVoir {
    background-color: #F64740;
}

.fondActivité {
    background-color: #FFA630;
}

.fondResto {
    background-color: #033860;
}

.bar {
    background-color: #7CB4B8;
}

.fondBoite {
    background-color: #001f30;
}

.fondBarEtBoite {
    background: rgb(124, 180, 184);
    background: linear-gradient(90deg, rgba(124, 180, 184, 1) 0%, rgba(0, 31, 48, 1) 100%);
}

.fondDebordantLecture {
    background: var(--backgroundPrimaire);
    padding: 5px 20px 5px 20px;
    box-shadow: var(--boxShadow);
    border-left: solid 5px var(--backgroundSecondaire);
}

.fondDebordantModuleComplementaire {
    border-left: dashed 5px var(--backgroundSecondaire);
}

/* HEADER / FOOTER*/
.head {
    overflow: hidden;
    position: fixed;
    top: 0 !important;
    right: 0;
    background: var(--tertiaryDark);
    height: 50px;
    width: 14%;
    z-index: 100;
}

nav {
    height: auto;
    padding-top: 6px;
    padding-bottom: 4px;
}

.conteneurLogo {
    grid-column: 8 / 9;
}

.bttn-logo-nav {
    border: 0px;
    background-color: transparent;
}

.logoNav {
    width: 80px;
    height: auto;
}

.conteneurBttnNav {
    grid-column: 1 / 16;
}

.bttn-nav {
    font-family: 'Times New Roman', Times, serif;
    font-size: 16px;
    font-weight: bold;
    float: right;
    padding: 10px 10px 5px 10px;
    border: 0px;
    background-color: transparent;
    cursor: pointer;

}

.bttn-nav-sommaire {
    font-family: 'Times New Roman', Times, serif;
    font-size: 16px;
    font-weight: bold;
    padding: 5px 10px 5px 10px;
    border: 0px;
    background-color: transparent;
    cursor: pointer;
}

.bttn-nav a,
.bttn-nav-sommaire a {
    color: white;
    text-decoration: none;
}

.bttn-nav a:hover,
.bttn-nav-sommaire a:hover {
    color: black;
    text-decoration: none;
}

.pageActive {
    color: var(--elementCliquableHover) !important;
    /* text-decoration: underline 1px !important; */
}

/* .logoAccueil{
    display: block;
    width: 300px;    
    padding-bottom: 2%;
    margin: auto;
} */







.foot {
    height: auto;
    width: 100%;
    background: var(--backgroundPrimaire);
}

.logoFooter {
    display: block;
    width: 150px;
    padding-bottom: 2%;
    margin: auto;
}

.texteFooter {
    font-family: 'Playfair Display', serif;
    font-size: 12px;
    margin: 0px;
    color: var(--ecriture);
}

.texteFooter a {
    color: var(--ecriture);
}


/* POURS LES Progamme visites */
.figure {
    margin: 0px;
}

.iconAudio {
    border: none;
    display: inline-block;
    margin: 5px 5px 8px 0px;

    width: 30px;
    height: 30px;
    cursor: pointer;
    background-color: none;
    background-size: cover;
    background-position: center;
}

.humainFR {
    background-image: url(IconLogo/iconAudioHumainFR.png);
}

.robotFR {
    background-image: url(IconLogo/iconAudioRobotFR.png);
}

.robotAn {
    background-image: url(IconLogo/iconAudioRobotAn.png);
}

.robotEs {
    background-image: url(IconLogo/iconAudioRobotEs.png);
}

.iconVisuLangue {
    border: none;
    display: inline-block;
    margin: 8px 5px 8px 0px;
    width: 7%;
    height: 25px;
    cursor: pointer;
    background-color: none;
    background-size: cover;
    background-position: center;
}

.boiteAudio {
    margin: 0px;
    margin-top: 20px;
    float: right;
}

.ligneAudio {
    width: 90%;
    display: inline;
}

.bigLanguette {
    background: var(--backgroundPrimaire);
    grid-column: 1 / 5;
    height: 180px;

    margin-left: -200px;
    margin-bottom: -160px;
    border-radius: 20px;
    box-shadow: var(--boxShadow);
}

.boiteThemeVisite {
    background: var(--tertiaryDark);
    border-radius: 10px;
    padding-bottom: 40px;
    margin-left: -120px;
    margin-right: 30px;
}

.boiteNiveauVisite,
.boiteTempsVisite {
    display: inline-block;
    padding: 10px 25px 5px 5px;
    border-radius: 10px;
}

.boiteTempsVisite {
    margin-left: 15px;
}

.poinçonAcote {
    display: inline-block;
    margin: 5px 5px 0px 5px;
    width: 40px;
    height: 40px;
}

.texteAcote {
    margin-top: -27px;
    margin-left: 50px;
    color: white;
}

/* POUR LES IMAGES */
/* POUR LES IMAGES */
/* POUR LES IMAGES */
/* POUR LES IMAGES */
/* POUR LES IMAGES */

.poinçon {
    width: 30px;
    height: 30px;
}

.grandPoinçon {
    width: 40px;
    margin-right: 0px;
    margin-bottom: 5px;
}

.tresGrandPoinçonRond {
    width: 40px;
    margin-left: 5px;
    border-radius: 60px;
    padding: 15px 20px 15px 20px;
}

.tresGrandPoinçonRondChoix {
    width: 40px;
    margin-left: 5px;
    padding: 15px 20px 15px 20px;
    border-radius: 20px;
}

.enteteFiche {
    background-color: var(--backgroundSecondaire);
    z-index: 20 !important;
    width: 90px;
    height: 90px;
    margin: auto;
    border-radius: 60%;
    margin-bottom: -40px;
}

.iconEntete {
    margin-top: 20px;
    display: block;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}

.iconAnimatChoix {
    background-image: url(IconLogo/iconChoix.png);
}

.iconAnimatChoix:hover {
    background-image: url(IconLogo/choixv2.gif);
}

.iconAnimatTemps {
    background-image: url(IconLogo/iconTemps0.png);

}

.iconAnimatTemps:hover {
    background-image: url(IconLogo/tempsV2.gif);
}

.iconAnimatNiveau {
    background-image: url(IconLogo/iconNiveau0.png);
}

.iconAnimatNiveau:hover {
    background-image: url(IconLogo/niveauV2.gif);
}

.iconSelct {
    width: 30px;
    height: 30px;
    display: block;
    margin: auto;
}

.iconRond {
    border-radius: 50px;
}

.iconBati {
    width: 25%;
    display: block;
    margin: auto;
    margin-top: -175px;
    /* margin-bottom: 55px; */
}

.placementCurseurMedievalEtModerne {
    margin-top: -30%;
    z-index: 3;
}

.curseurDebutMedieval {
    transform: rotate(320deg);
    width: 25px;
    margin-left: -70px;
    margin-top: 15px;
}


.curseurMedieval {
    transform: rotate(-30deg);
    width: 25px;
    margin-left: -40px;
    margin-top: 5px;
}

.curseurModerne {
    margin-left: 33px;
    transform: rotate(26deg);
    width: 25px;
}

.placementCurseurAntiqueEtCompo {
    margin-top: -23%;
    margin-bottom: 100px;
    z-index: 3;
}

.curseurDebutContempo {
    margin-left: 90px;
    transform: rotate(50deg);
    width: 25px;
}

.curseurContempo {
    margin-left: 110px;
    transform: rotate(65deg);
    width: 25px;
    margin-top: 5px;
}

.curseurDebutFinContempo {
    margin-left: 120px;
    transform: rotate(80deg);
    width: 25px;
    margin-top: 15px;
}

.imgcarré {
    width: 100%;
    display: block;
    margin: auto;
}

.imgCarréTailleFixe {
    width: 15px;
    display: block;
    margin: auto;
    margin-left: -1px;
}



/* LES IMAGES CLIQUABLES */
.infoBulleImgClik {
    display: none;
    background-color: #ffffff;
    border: #154976 solid 2px;
    border-left: #154976 solid 5px;
    color: #1b1b1b;
    padding: 20px;

    position: absolute;
    width: 350px;
    left: 319px;
    z-index: 20;
    transform: translateY(-640px);
}

.legendeInfoBulleClik {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 12px;
    margin: 0px;
    line-height: 0em;
    font-style: normal;
}

area {
    background: #154976;
    cursor: help;
    cursor: url(IconLogo/curseurClicBleu-25.png) 10 14, pointer
}

.bttnQuitterImgClik {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #154976;
    color: white;
    border: none;
    padding: 2px 5px 5px 7px;
}




.mockupVertical {
    width: 100%;
    max-width: 300px;
    display: block;
    margin: auto;
}

.mockupHorizontal {
    width: 100%;
    max-width: 500px;
    display: block;
    margin: auto;
}










.imgPresentation {
    height: 320px;
    /* width: auto; */
    background-size: cover;
    /* box-shadow: rgb(5, 5, 22) 0px -50px 36px -18px inset; */
    box-shadow: rgb(7, 7, 16) 0px -50px 36px -18px inset;
    float: left;
    width: 40%;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
}

.titreBasImgPresentation {
    position: relative;
    top: 266px;
    padding: 5px 0px 5px 16px;
    margin: 0px;
    color: white;
}

.sousTitreBasImgPresentation {
    font-family: 'Nixie One', serif;
    font-size: 12px;
    /* color: rgb(255, 238, 238); */
    position: relative;
    top: 266px;
    padding: 0px 0px 5px 16px;
    margin: 0px;
    color: white;
}

.textePresentation {
    float: right;
    width: 50%;
}

.tresGrandConteneurDoubleImg {
    min-height: 540px;
    width: 100%
}

.grandConteneurDoubleImg {
    min-height: 540px;
    width: 80%;
    margin: 0% 10% 0% 10%;
}

.conteneurDoubleImg {
    min-height: 300px;
    width: 100%;
}

.conteneurDoubleImgCarré {
    min-height: 300px;
    width: 50%;
    margin: 0% 25% 0% 25%;
}

.imgContenues {
    max-height: 100%;
    width: auto;
    background-size: cover;
}

.plan1792 {
    background-image: url(PlanAngers/plan-Angers-1792-reduit-avec-encadré-fond-gris-et-marqueurs.png);
    background-position: center;
}

.plan1792:hover {
    background-image: url(PlanAngers/plan-Angers-1792-détail2-avec-encadré.png);
}

.façadeThéatreBinet {
    background-image: url(GrandTheatre/salle-des-spectacles-construite-sur-la-place-du-ralliement-11-f1-1741-redimention.png);
    background-position: center;
}

.façadeThéatreBinet:hover {
    background-image: url(GrandTheatre/incendie-théâtre-angers-nuit-4-decembre-1865-11-Fi-1743-archives-dep.png);
}

.coupoleLenepveu {
    background-image: url(GrandTheatre/Lenepveu-coupole-angers2.jpg);
    background-position: center;
}

.coupoleLenepveu:hover {
    background-image: url(GrandTheatre/Lenepveu-maquette-plafond-opéra-garnier-Paris-1872.jpg);
}

.theatreBotrelMagne {
    background-image: url(GrandTheatre/dessin\ gt\ Magne.jpg);
    background-position: center;
    height: 80%;
}

.theatreBotrelMagne:hover {
    background-image: url(GrandTheatre/projet\ Nouvel\ Opéra\ de\ Paris,\ vue\ perspective\ Botrel\ et\ Crepinet,\ 1861.jpg);
}

/* POUR LES FONDS */
/* POUR LES FONDS */
/* POUR LES FONDS */
/* POUR LES FONDS */
/* POUR LES FONDS */



.transparentVersPrimaire {
    background: linear-gradient(#f5f5f600, 20%, #131b21);
    /* background: linear-gradient(#F5F5F6, 10%, #1d2833); */
    /*  top, right, bottom et left. */
}

.BlackTransparent {
    background-color: rgba(77, 77, 77, 0.279);
}

.WhiteTransparent {
    background-color: rgba(255, 255, 255, 0.773);
}



.fondAmovible {
    margin-top: 400px;
    width: 100%;
    height: auto;
    z-index: 2;
}

.fondFixe {
    background-attachment: fixed;
    height: 800px;

    background-image: url(IconLogo/illuCielEtTexte2.png);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.imgFond1 {
    background-image: url(imgArchives/angersFoncé.jpg);
    background-size: cover;
}

.fondCarte {
    height: auto;
    background-image: url(imgArchives/planNB1869.jpg);
    background-size: cover;
}

.fondVueAerienne {
    height: auto;
    background-image: url(PlanAngers/evers\ 3409\ Château\,\ vue\ aérienne\ foncé.jpg);
    background-size: cover;
}

/* REDUIRE LE POID DES IMG EVERS */
.fondRalliement {
    background-image: url(imgArchives/gt.jpg);
}

.fondCathedrale {
    background-image: url(imgArchives/cathe1.jpg);
}

.fondPiedBoulet {
    background-image: url(imgArchives/fontaine-pied-bouletHorizontalecentre.jpg);
}



/* Angers disparu */
.fondGareStLaud {
    background-image: url(imgArchives/saint\ laud\ 1923.jpg);
}

.fondAbbayeToussaint {
    background-image: url(imgArchives/evers\ 1628\ ruine\ abbaye\ toussaint.jpg);
}

.fondMonteStMaurice {
    background-image: url(imgArchives/monterStMauriceDessin.jpg);
}


.fondGasnault {
    background-image: url(GrandTheatre/carte\ postale\ café\ GasnaultV2.jpg);
}

.fondCinemaPalace {
    background-image: url(imgArchives/le\ palace\ angers.jpg);
}

.fondplaceLorraine {
    background-image: url(imgArchives/placeLorraineAerienne.jpg);
}


.fondRueAlsace {
    background-image: url(imgArchives/evers\ 3525\ rue\ d\ alsace\ en\ 1905.jpg);
}

.fondCercleMilitaire {
    background-image: url(imgArchives/cercleMilitaire.jpg);
}


.fondCirqueTheatre {
    background-image: url(imgArchives/cirqueTheatre.jpg);
}

.fondPlaceDesHalles {
    background-image: url(imgArchives/placeHalles.jpg);
}

.fondGareStSerge {
    background-image: url(Gares/Saint\ Serge/65\ angers\ la\ gare\ saint\ sergeFoncer.jpg);
}


.fondAbattoir {
    background-image: url(imgArchives/abattoir.jpg);
}

.fondPontVerdun {
    background-image: url(imgArchives/pontVerdun.jpg);
}


.fondNOM {
    background-image: url(imgArchives/);
}

/* TYPOGRAPHIE */
/* TYPOGRAPHIE */
/* TYPOGRAPHIE */
/* TYPOGRAPHIE */
/* TYPOGRAPHIE */
/* TYPOGRAPHIE */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nixie+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,500&display=swap');

h1 {
    /* font-family: 'Bebas Neue', cursive; */
    font-family: 'Marck Script', cursive;
    font-size: 75px;
    margin-top: 0;
    margin-bottom: 0px;
    line-height: 1em;
    color: var(--tertiaryDark);
}

h2 {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    margin: 0px;
    color: var(--ecriture);
}

h3 {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    margin: 0px 0px 10px 0px;
    color: var(--ecriture);
}

h4 {
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    margin: 10px 0px 10px 0px;
    color: var(--ecriture);
}



.sousTitre {
    font-family: 'Nixie One', cursive;
    font-size: 12px;
    line-height: 1.5em;
    color: var(--ecriture);
}


.alinea {
    margin-left: 30px;
}

.description {
    font-family: 'Nixie One', serif;
    font-size: 12px;
    line-height: 1.5em;
    margin-top: -8px;

}

.lectureLongue {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 15px;
    line-height: 1.5em;
    font-weight: normal;
    color: var(--ecriture);
}

.paragraphebreveHist {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 12px;
    line-height: 1.5em;
    font-weight: normal;
    color: white;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: -5px;
}

.megaChiffre {
    font-family: 'Literata', serif;
    font-size: 100px;
    color: var(--ecriture);
}

.legende {
    font-family: 'Nixie One', serif;
    font-size: 12px;
    margin: 0px;
    margin-top: 2px;
    color: var(--ecriture);
}

.asterix {
    font-family: 'Nixie One', serif;
    font-size: 10px;
    margin: 0px;
    margin-top: 2px;
    line-height: 1em;
    color: var(--ecriture);
}


/* EFFETS SUR LE TEXTE */
/* EFFETS SUR LE TEXTE */
/* EFFETS SUR LE TEXTE */
/* EFFETS SUR LE TEXTE */

.bleu {
    color: #154976;
}

.ecriture {
    color: var(--ecriture);
}

.ecritureContraste {
    color: var(--ecritureContraste);
}

.blanc {
    color: white;
    /* color: var(--ecriture); */
}

.rouge {
    color: #9c1006;
}

.noir {
    /* color: #1b1b1b; */
    color: #1D2428;
}

.noirIntense {
    color: #0e1113;
}

.grisFoncé {
    /* color: #1b1b1b; */
    color: #273035;
}

.grisClair {
    color: rgb(175, 174, 174);
}


.surligner {
    /* background-color: #f0f01e ; */
    background-color: #f0d71e;
    /* background-color: #faa92f; */
    color: #1b1b1b;
    /* color: whitesmoke; */
}

.barrer {
    text-decoration: line-through 2px;
    font-style: normal;
}

.lienNude {
    text-decoration: none;
}

.lienNude a {
    color: var(--ecriture) !important;
    text-decoration: none;
}

.lienNude a:hover {
    text-decoration: underline;
}

.lienNudeBlanc a {
    color: #ffffff;
    text-decoration: none;
}

.lienNudeNoir a {
    color: black;
    text-decoration: none;
}



/* POSITION  */
/* POSITION  */
/* POSITION  */
/* POSITION  */
/* POSITION  */
/* POSITION  */
/* POSITION  */
.arrierePlan {
    position: relative;
    z-index: 0;
}

.premierPlan {
    position: relative;
    z-index: 2;
    /* left: 70%;
    top: 30px; */
}

.centre {
    text-align: center;
}

.aligneDroite {
    text-align: end;
}

.elementBas {
    padding-top: 200%;
}

.elemCentre {
    display: block;
    margin: auto;
}

.elementsCentres {
    display: inline-block;
    margin-right: 5px;
}

.centreHB {
    padding-top: 15%;
    padding-bottom: 5%;
}




.conteneur16 {
    display: grid;
    grid-template-columns: repeat(16, minmax(0, 1fr));
    gap: 5px;
}


/* commence à 1 */
.boite1a2 {
    grid-column: 1 / 2;
}

.boite1a3 {
    grid-column: 1 / 3;
}

.boite1a5 {
    grid-column: 1 / 5;
}

.boite1a6 {
    grid-column: 1 / 6;
}

.boite1a7 {
    grid-column: 1 / 7;
}

.boite1a8 {
    grid-column: 1 / 8;
}

.boite1a9 {
    grid-column: 1 / 9;
}

.boite1a10 {
    grid-column: 1 / 10;
}

.boite1a11 {
    grid-column: 1 / 11;
}

/* TOUTE LA LARGEUR = CENTRE */
.boite1a16 {
    grid-column: 1 / 16;
}

/* commence à 2 */
.boite2a3 {
    grid-column: 2 / 3;
}

.boite2a4 {
    grid-column: 2 / 4;
}

.boite2a5 {
    grid-column: 2 / 5;
}

.boite2a6 {
    grid-column: 2 / 6;
}

.boite2a7 {
    grid-column: 2 / 7;
}

.boite2a8 {
    grid-column: 2 / 8;
}

.boite2a9 {
    grid-column: 2 / 9;
}

.boite2a10 {
    grid-column: 2 / 10;
}

.boite2a11 {
    grid-column: 2 / 11;
}

.boite2a12 {
    grid-column: 2 / 12;
}

/* CENTRE */
/* CENTRE */
/* CENTRE */
.boite2a15 {
    grid-column: 2 / 15;
}

.boite2a16 {
    grid-column: 2 / 16;
}

/* commence à 3 */
.boite3a5 {
    grid-column: 3 / 5;
}

.boite3a6 {
    grid-column: 3 / 6;
}

.boite3a7 {
    grid-column: 3 / 7;
}

.boite3a8 {
    grid-column: 3 / 8;
}

.boite3a9 {
    grid-column: 3 / 9;
}

.boite3a10 {
    grid-column: 3 / 10;
}

.boite3a11 {
    grid-column: 3 / 11;
}

.boite3a12 {
    grid-column: 3 / 12;
}

/* CENTRE */
/* CENTRE */
/* CENTRE */
.boite3a14 {
    grid-column: 3 / 14;
}

.boite3a15 {
    grid-column: 3 / 15;
}

/* commence à 4 */
.boite4a5 {
    grid-column: 4 / 5;
}

.boite4a6 {
    grid-column: 4 / 6;
}

.boite4a7 {
    grid-column: 4 / 7;
}

.boite4a8 {
    grid-column: 4 / 8;
}

.boite4a10 {
    grid-column: 4 / 10;
}

/* CENTRE */
/* CENTRE */
/* CENTRE */
.boite4a13 {
    grid-column: 4 / 13;
}

/* commence à 5 */
.boite5a6 {
    grid-column: 5 / 6;
}

.boite5a7 {
    grid-column: 5 / 7;
}

.boite5a8 {
    grid-column: 5 / 8;
}

.boite5a10 {
    grid-column: 5 / 10;
}

/* CENTRE */
/* CENTRE */
/* CENTRE */
.boite5a12 {
    grid-column: 5 / 12;
}

.boite5a14 {
    grid-column: 5 / 14;
}

/* commence à 6 */
.boite6a8 {
    grid-column: 6 / 8;
}

.boite6a9 {
    grid-column: 6 / 9;
}

.boite6a10 {
    grid-column: 6 / 10;
}

/* CENTRE */
/* CENTRE */
/* CENTRE */
.boite6a11 {
    grid-column: 6 / 11;
}

.boite6a14 {
    grid-column: 6 / 14;
}

.boite6a15 {
    grid-column: 6 / 15;
}

/* commence à 7 */
.boite7a9 {
    grid-column: 7 / 9;
}

/* CENTRE */
/* CENTRE */
/* CENTRE */
.boite7a10 {
    grid-column: 7 / 10;
}

.boite7a11 {
    grid-column: 7 / 11;
}

.boite7a12 {
    grid-column: 7 / 12;
}

.boite7a14 {
    grid-column: 7 / 14;
}



/* A DROITE */
/* A DROITE */
/* A DROITE */

/* commence à 8 */
.boite8a9 {
    grid-column: 8 / 9;
}

.boite8a10 {
    grid-column: 8 / 10;
}

.boite8a11 {
    grid-column: 8 / 11;
}

.boite8a12 {
    grid-column: 8 / 12;
}

.boite8a14 {
    grid-column: 8 / 14;
}

.boite8a15 {
    grid-column: 8 / 15;
    padding: 10px;
}

/* commence à 9 */
.boite9a10 {
    grid-column: 9 / 10;
}

.boite9a12 {
    grid-column: 9 / 12;
}

.boite9a14 {
    grid-column: 9 / 14;
}

/* commence à 10 */

.boite10a12 {
    grid-column: 10 / 12;
}

.boite10a13 {
    grid-column: 10 / 13;
}

.boite10a14 {
    grid-column: 10 / 14;
}

.boite10a15 {
    grid-column: 10 / 15;
}

.boite10a16 {
    grid-column: 10 / 16;
}

/* commence à 11 */
.boite11a13 {
    grid-column: 11 / 13;
}

.boite11a14 {
    grid-column: 11 / 14;
}

.boite11a15 {
    grid-column: 11 / 15;
}

.boite11a16 {
    grid-column: 11 / 16;
}

/* commence à 12 */
.boite12a13 {
    grid-column: 12 / 13;
}

.boite12a14 {
    grid-column: 12 / 14;
}

.boite12a16 {
    grid-column: 12 / 16;
}

/* commence à 13 */
.boite13a16 {
    grid-column: 13 / 16;
}

/* commence à 14 */
.boite14a15 {
    grid-column: 14 / 15;
}

.boite14a16 {
    grid-column: 14 / 16;
}

/* commence à 15 */
.boite15a16 {
    grid-column: 15 / 16;
}

/* .conteneurMosa{
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 20px;
}
.boiteMosa{
    width: 80%;
    margin: auto;
} */


/* MISE EN FORME CONTENEUR */
/* MISE EN FORME CONTENEUR */
/* MISE EN FORME CONTENEUR */
.ficheEXplicative {
    display: none;
    background-color: #ffffff;
    /* box-shadow: var(--boxShadow); */
    border: #b87b00 solid 2px;
    border-left: #b87b00 solid 5px;
    padding: 20px;
    position: absolute;
    /* width: 30em; */
    width: 550px;
    margin-left: 10%;
    transform: translateX(-150px);
    z-index: 50;
}

.texteDeclancheurInfoBulle {
    cursor: help;
    text-decoration: underline 2px var(--elementCliquableSaturer);
    z-index: 0;
}

.texteDeclancheurInfoBulle:hover {
    background-color: var(--elementCliquableSaturer);
    color: #ffffff;
}

.infoBulle {
    display: none;
    background-color: #ffffff;
    /* box-shadow: var(--boxShadow); */
    border: var(--elementCliquableSaturer) solid 2px;
    border-left: var(--elementCliquableSaturer) solid 5px;
    padding: 20px;
    position: absolute;
    width: 450px;
    left: 45%;
    transform: translateX(-150px);
}

.texteDansInfobulle {
    font-family: monospace;
    font-size: 13px;
    color: black;
    font-style: normal !important;
    line-height: 1px;
}

.texteRelatifImgExempleInfobulle {
    width: 55%;
    display: inline-block;
}

.petiteImgInfoBulle {
    width: 40%;
    display: block;
    margin: auto;
    margin-top: 5px;
}

.imgInfoBulle {
    width: 80%;
    display: block;
    margin: auto;
    margin-top: 5px;
}

.legendeInfoBulle {
    font-family: 'Nixie One', serif;
    font-size: 12px;
    margin: 0px;
    color: black;
    /* margin-top: 2px; */
    line-height: 1em !important;
    font-style: normal;
}

.imgCoteACote {
    width: 49%;
    display: inline-block;
    margin: auto;
    margin-top: 5px;
}

.imgExempleInfobulle {
    width: 20%;
    float: right;
    margin: 0px 2px 0px 2px;
}

.legendeExempleInfobulle {
    font-family: 'Nixie One', serif;
    font-size: 12px;
    text-align: right;
    line-height: 1em;
    width: 20%;
    float: right;
    margin-right: 5px;
}

.bttnQuitter {
    position: absolute;
    right: 0;
    top: 0;
    background-color: var(--elementCliquable);
    color: white;
    border: none;
    padding: 2px 5px 5px 7px;
    cursor: pointer;
    /* top, right, bottom, left, */
}

.fondDebordant {
    background: var(--backgroundPrimaire);
    padding: 10px 30px 10px 30px;
    z-index: 0;
    box-shadow: var(--boxShadow);
}



.carouselMonument {
    padding: 4px;
    width: 100%;
    overflow-x: auto;
    /* overflow-y: hidden; */
    white-space: nowrap;
    scrollbar-color: var(--elementCliquable) var(--backgroundPrimaire);
    scrollbar-width: thin;
}

.conteneurVisionneuse {
    max-width: 850px;
    margin-left: 100px;
    margin-right: 70px;
    margin-bottom: 60px;
    top: 0 !important;
    display: inline-block;
    background-color: var(--backgroundSecondaire);
    border-radius: 10px;
    box-shadow: var(--boxShadow);
}

.boxParametrage {
    width: 330px;
    display: inline-block;
}

.imgVisionneuse {
    height: 300px;
    width: auto;
    background-size: cover;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    box-shadow: #121212 0px -50px 36px -18px inset;
}

.fondDebordantVisionneuse {
    margin-left: -10px;
    margin-right: -10px;
    z-index: -1;
}

.poinçonBasVisionneuse {
    width: 25px;
    height: 25px;
    padding-top: 270px;
    margin-left: 10px;
}

.titreBasImgVisionneuse {
    position: relative;
    top: -30px;
    padding: 5px 0px 5px 45px;
    color: white;
}

.boxInfoComplementaireMonument {
    width: 450px;
    display: block;
    float: inline-end;
    z-index: 0;
    white-space: normal;
    padding-left: 20px;
}

.boxIconMonument {
    height: 160px;
    display: block;
}

.conteneurInfoPratique {
    width: auto;
    white-space: normal;
    display: inline-block;
    margin-top: -18px;
    padding-left: 20px;
}

.conteneurIconTexte {
    width: 100%;
    /* height: 30px; */
    margin-top: 5px;
}

.icon {
    display: inline-block;
    width: auto;
    min-width: 20px;
}

.texte {
    display: inline-block;
    width: 78%;
    color: white;
}


.languette {
    background-color: var(--backgroundSecondaire);
    border: none;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    float: inline-end;
    padding-left: 8px;
    width: 60px;
    height: 30px;
    margin-top: -25px;
    cursor: pointer;
}

.fermerLanguette {
    background: var(--backgroundSecondaire);
    color: white;
    width: 30px;
    border: none;
    margin-left: 93%;
    cursor: pointer;
    border-top-right-radius: 10px;
}




/* LES BOUTONS */
/* LES BOUTONS */
/* LES BOUTONS */
/* LES BOUTONS */
/* LES BOUTONS */
/* LES BOUTONS */

.bttnGenerique {
    background: var(--elementCliquable);
    box-shadow: var(--boxShadowElementCliquable);
    border: none;
    color: #F6F6F6;
    display: inline-block;
    border-radius: 20px;
    cursor: pointer;
}

.bttnGenerique:hover {
    background-color: var(--elementCliquableHover);
    color: #ffffff;
}

.bttnLegende {
    border: none;
    color: #F6F6F6;
    display: inline;
    border-radius: 20px;
    cursor: pointer;
    padding: 5px 30px 5px 30px;
    margin-bottom: 10px;
}

.bttnValidationSeul {
    width: 100%;
    margin-top: 15px;
}

.conteneurBttnValEtReset {
    margin: 70px 5px 15px 5px;
}

.bttnValidation {
    width: 90%;
}

.bttnValidationEtroit {
    width: 85%;
}

.bttnSecondaire {
    border: var(--elementCliquable) solid 2px;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    /* box-shadow: var(--boxShadow); */
    cursor: pointer;
    background-color: transparent;
    color: var(--ecriture);
    border-radius: 20px;
}

.bttnSecondaire:hover {
    background: var(--elementCliquableHover);
    /* background-color: #661414 !important; */
    border: var(--elementCliquableHover) solid 2px;
    color: white;
}

.bttnReset {
    float: right;
    max-width: 40px;
    font-size: 20px;
    padding: 0% 2% 1% 2%;
    height: 38px;
}


.bttnChoix {
    background: #fbfbfb;
    box-shadow: #494848b9 0px 2px 4px, rgba(65, 10, 10, 0.3) 0px 7px 13px -3px, #71626066 0px -3px 2px inset;
    border: none;
    border-radius: 50px;
    color: black;
    border-radius: 10px;
}

.bttnChoix:hover {
    background-color: var(--elementCliquableHover);
    box-shadow: #1c1b1ad0 0px 2px 4px, rgba(42, 2, 2, 0.3) 0px 7px 13px -3px, #2c252466 0px -3px 2px inset;
    cursor: pointer;
    color: white;
}


.bttnTemps,
.bttnNiveau {
    font-family: Arial, Helvetica, sans-serif;
    margin: 15px 5px 5px 5px;
    width: 45%;
    text-align: center;
}

.bttnTemps {
    float: left;
}

.bttnNiveau {
    float: right;
}

.bttnIndisponible {
    background: var(--background);
    box-shadow: none;
    border: var(--background) solid 2px !important;
    cursor: default !important;
    color: white;
}

.bttnIndisponible:hover {
    background-color: var(--background) !important;
    color: white;
    box-shadow: none;
}


.vignette {
    width: 35%;
    height: 30px;
    background: var(--tertiaryDark);
    border: none;
    color: #F6F6F6;
    display: inline-block;

    text-align: left;
    padding: 5px;
    margin-bottom: 5px;
}

.poinçonVignette {
    margin-top: 5px;
    width: 25px;
    height: 25px;
}

.texteVignette {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 10px;

    color: white;
    text-align: left;
    margin-top: -18px;
    margin-left: 30px;
}



/* PERSONNALISATION DES ELEMENTS */
/* PERSONNALISATION DES ELEMENTS */
/* PERSONNALISATION DES ELEMENTS */

.bordsArrondis {
    border-radius: 10px;
}

.bordsArrondisBas {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.boxShadow {
    box-shadow: var(--boxShadow);
}

.boxShadowSurPrimaire {
    box-shadow: var(--boxShadowSurPrimaire);
}

.lumiere {
    box-shadow: 15px 15px 30px #191919, -15px -15px 30px #3c3c3c;
}

.lumiereFine {
    box-shadow: 15px 15px 30px #191919,
        -5px -5px 30px #3c3c3c;
}

.lumiereGrandFormat {
    box-shadow: #3c3c3c 0px 12px 20px 2px;
}

.ombre {
    /* box-shadow: rgb(0, 0, 0) 0px 20px 30px -10px; */
    /* box-shadow: rgb(59, 59, 74) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; */
    box-shadow: rgb(22, 22, 22) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.ombreGrandFormat {
    box-shadow: rgba(0, 0, 0, 0.56) 0px 12px 20px 2px;
}

.ombreFineB {
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.long {
    width: 100%;
    margin-top: 15px;
}

.flou {
    filter: blur(3px);
    z-index: 1;
}


svg {
    fill: currentColor;
    height: auto;
    max-width: 66vmin;
    transform-origin: center;
    /* width: 40%; */
    color: var(--ecriture);
}

/* ANIMATION */
/* ANIMATION */
/* ANIMATION */
/* ANIMATION */
/* ANIMATION */
/* ANIMATION */
.reveal-loaded .reveal [class*="reveal-"] {
    opacity: 0 !important;
    animation: none !important;
    transition: 1s !important;
}

.reveal-loaded [class*="reveal-"] {
    animation: revealAnimation 1s cubic-bezier(.5, 0, 0, 1) both;
}

.reveal-loaded .reveal-2 {
    animation-delay: .2s;
}

.reveal-loaded .reveal-3 {
    animation-delay: .3s;
}

.reveal-loaded .reveal-4 {
    animation-delay: .4s;
}

@media (prefers-reduced-motion: reduce) {
    .reveal-loaded [class*="reveal-"] {
        animation: none !important;
    }
}

@keyframes revealAnimation {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.tracking-in-expand {
    animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation-delay: 1s;
    animation-duration: 2s;
}

@keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

.text-pop-up-top {
    animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-duration: 2s;
}

@keyframes text-pop-up-top {
    0% {
        transform: translateY(0);
        transform-origin: 50% 50%;
        text-shadow: none;
    }

    100% {
        transform: translateY(-50px);
        transform-origin: 50% 50%;
        text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
    }
}



.grossir {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

.grossir:hover {
    transform: scale(1.2);
}

.zoomImg:hover {
    -ms-transform: scale(1.5);
    /* IE 9 */
    -webkit-transform: scale(1.5);
    /* Safari 3-8 */
    transform: scale(1.5);
}


/* LES ESPACES  */
/* LES ESPACES  */
/* LES ESPACES  */
/* LES ESPACES  */
/* LES ESPACES  */
/* LES ESPACES  */
.marges {
    padding-left: 10%;
    padding-right: 10%;
}

.margesFortes {
    padding-left: 20%;
    padding-right: 20%;
}


.petitEspaceVide {
    height: 20px;
    grid-column: 1 / 16;
}

.espaceVide {
    height: 50px;
    grid-column: 1 / 16;
}

.espaceVideIntermédiaire {
    height: 100px;
    grid-column: 1 / 16;
}

.espaceVideIntermédiaireWeb {
    height: 100px;
    grid-column: 1 / 16;
}

.grandEspaceVide {
    height: 150px;
    grid-column: 1 / 16;
}

.tresGrandEspaceVide {
    height: 300px;
    grid-column: 1 / 16;
}

.espaceHaut {
    margin-top: 50px;
}


.videAutour {
    padding: 10px;
}

.grandVideAutour {
    padding: 30px;
}

.moduleDansModule {
    margin: 20px;
}

.grandVideDGB {
    padding: 10px 30px 30px 30px;
}

.grandVideDG {
    padding: 15px 30px 0px 30px;
}

.sansVideDG {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.remonter {
    margin-top: -60px;
}

.descendreElem {
    margin-bottom: -40px;
}



.ApparaitTablette,
.ApparaitMobile,
.ApparaitMobile620 {
    display: none;
}

@media only all and (max-width: 1100px) {

    .marges,
    .margesFortes {
        padding-left: 15px;
        padding-right: 15px;
    }

    .grandVideDG {
        padding: 5px 15px 15px 15px;
    }

    .tresGrandEspaceVide {
        height: 100px;
    }

    .fondAmovible {
        margin-top: 400px;
    }

    .fondFixe {
        height: 650px;
    }

    .conteneurLogo {
        grid-column: 1 / 3;
        /* display: block; */
        margin: auto;
    }

    .logoNav {
        width: 60px;
        height: auto;
        margin-left: 10px;
    }

    .iconNav {
        width: 22px;
    }


    .bttn-nav {
        top: 0;
    }

    .conteneurVisionneuse {
        vertical-align: top;
        max-width: 240px;
        margin-left: 40px;
        margin-right: 40px;
        display: inline-block;
        box-shadow: var(--boxShadow);
    }

    .boxParametrage {
        width: 300px;
        display: block;
    }

    .boxInfoComplementaireMonument {
        width: 300px;
        display: block;
        float: bottom;
        z-index: 0;
        padding-bottom: 5px;
    }

    .boxIconMonument {
        height: 120px !important;
    }

    .iconBati {
        margin-top: -180px !important;
    }


    .boxInfoComplementaireMonument {
        width: 270px;
        display: block;
        float: none;
        z-index: 0;
        white-space: normal;
        padding-left: 20px;
        background: var(--backgroundSecondaire);
    }

    .languette {
        /* background-image: url(IconLogo/clicToDeplierbas.png);  */
        border: none;
        float: none;
        width: 30px;
        height: 20px;
        margin-top: 0;
        margin-left: 130px;
    }

    .fermerLanguette {
        margin-left: 90%;
    }

    .poinçonVignette {
        width: 20px;
        height: 20px;
    }

    .texteVignette {
        font-size: 10px;

        text-align: left;
        margin: -25px;
        margin-left: 25px;
        margin-top: -18px;
    }

    .bttnGenerique,
    .bttnSecondaire,
    .bttnChoix {
        font-size: 12px;
    }


    .bigLanguette {
        grid-column: 1 / 6;
        height: 190px;
        margin-left: -100px;
        margin-bottom: -170px;
    }

    .boiteThemeVisite {
        grid-column: 1 / 6;
        padding-bottom: 5px;
        margin-left: -15px;
        margin-right: 10px;
    }

    .boiteTempsVisite {
        margin-left: 15px;
    }

    .ligneAudio {
        width: 80%;
    }

    .conteneurBttnValEtReset {
        margin: 70px 5px 5px 5px;
    }

    .bttnValidationEtroit {
        width: 80%;

    }

    .bttnReset {
        border-radius: 10px;
        min-width: 17%;
        font-size: 15px;
        padding: 0% 1.2% 1% 1.2%;
        height: 35px;
    }

    .DisparaitTablette {
        display: none;
    }

    .ApparaitTablette {
        display: block;
    }
}

@media only all and (max-width: 800px) {

    .conteneurLogo {
        grid-column: 1 / 2;
    }

    .logoNav {
        width: 25px;
        height: auto;
        margin-left: 6px;
    }

    .conteneurBttnNav {
        grid-column: 1 / 16;
        margin-left: 7px;
        margin-top: 10px;
    }

    .bttn-nav {
        font-size: 12px;
        padding: 0px 5px 5px 10px;
    }

    .changeTheme {
        grid-column: 14 / 16;
        /* font-size: 10px; */
        margin-top: 8px;
    }

    .fondAmovible {
        margin-top: 360px;
    }

    .fondFixe {
        height: 570px;
    }

    .logoFooter {
        display: block;
        width: 80px;
        padding-bottom: 2%;
        margin: auto;
    }




    h1 {
        font-size: 50px;
        margin-bottom: 10px;
    }

    h2 {
        font-size: 25px;
    }

    h3 {
        font-size: 19px;
    }

    h4 {
        font-size: 15px;
    }

    .lectureLongue {
        font-size: 13px;
        line-height: 1.8em;
    }

    .paragraphebreveHist {
        font-size: 12px;
    }

    .alinea {
        margin-left: 0px;
    }

    .espaceVideIntermédiaireWeb {
        height: 50px;
    }

    .espaceVideDispMob {
        display: none;
    }

    .espaceVide {
        height: 15px;
    }

    .grandEspaceVide {
        height: 20px;
    }

    .grandVideDGB {
        padding: 10px 10px 10px 10px;
    }

    .tresGrandEspaceVide {
        height: 30px;
    }

    .espaceMobile {
        height: 100px;
    }

    .petitEspaceMobile {
        height: 20px;
        grid-column: 1 / 16;
    }

    .grandEspaceSurMobile {
        height: 250px;
    }


    /* toutes les boites */
    .boite1a3,
    .boite1a5,
    .boite1a6,
    .boite1a7,
    .boite1a8,
    .boite1a9,
    .boite1a10,
    .boite1a13,
    .boite1a16,

    .boite2a3,
    .boite2a5,
    .boite2a6,
    .boite2a8,
    .boite2a9,
    .boite2a10,
    .boite2a11,
    .boite2a12,
    .boite2a14,
    .boite2a15,

    .boite3a5,
    .boite3a6,
    .boite3a7,
    .boite3a8,
    .boite3a9,
    .boite3a10,
    .boite3a11,
    .boite3a12,
    .boite3a14,
    .boite3a15,

    .boite4a7,
    .boite4a8,
    .boite4a13,

    .boite5a6,
    .boite5a8,
    .boite5a10,
    .boite5a12,
    .boite5a14,

    .boite6a8,
    .boite6a9,
    .boite6a10,
    .boite6a11,
    .boite6a14,
    .boite6a15,

    .boite7a10,
    .boite7a11,
    .boite7a12,
    .boite7a14,

    .boite8a10,
    .boite8a11,
    .boite8a12,
    .boite8a14,
    .boite8a15,

    .boite9a12,
    .boite9a14,

    .boite10a12,
    .boite10a13,
    .boite10a14,
    .boite10a15,
    .boite10a16,

    .boite11a13,
    .boite11a14,
    .boite11a15,
    .boite11a16,

    .boite12a14,
    .boite12a16,

    .boite13a16,

    .boite14a15,
    .boite14a16 {
        grid-column: 2 / 16;
    }

    .imgVerticaleMauvaiseQuali {
        grid-column: 5 / 12 !important;
    }

    .grandPoinçon {
        width: 30px;
    }

    .bigLanguette {
        grid-column: 1 / 8;
        height: 180px;
        margin-left: -50px;
        margin-bottom: -165px;
    }

    .boiteThemeVisite {
        grid-column: 1 / 8 !important;
        padding-bottom: 5px;
        margin-left: -10px;
        margin-right: 10px;
    }

    .boiteTempsVisite,
    .boiteNiveauVisite {
        grid-column: 1 / 8 !important;
    }

    .ligneAudio {
        width: 80%;
    }

    .boiteAudio {
        grid-column: 9 / 16 !important;
        margin-top: 0px;
    }

    #map {
        width: 100%;
        height: 400px;
        margin-right: 0%;
    }

    .ifram360Theatre {
        width: 90%;
        height: 500px;
        margin: 0% 5% 5% 5%;
    }

    .enteteFiche {
        width: 60px;
        height: 60px;
        border-radius: 60%;
        margin-left: -20px;
        margin-bottom: 0px;
    }

    .iconEntete {
        margin-top: 15px;
        margin-right: 10px;
        display: block;
        height: 30px;
        background-size: contain;
        background-repeat: no-repeat;
        z-index: 2;
    }

    .fondDebordant {
        background: var(--backgroundPrimaire);
        padding: 15px 20px 10px 30px;
        margin-bottom: 10px;
        z-index: 0;
        box-shadow: none;
    }


    .elementBas {
        padding-top: 0px;
    }

    .imgPresentation {
        height: 220px;
        float: top;
        width: 100%;
    }

    .titreBasImgPresentation {
        top: 166px;
    }

    .sousTitreBasImgPresentation {
        top: 166px;
    }

    .textePresentation {
        float: none;
        width: 90%;
    }

    .conteneurDoubleImg {
        min-height: 262px;
    }

    .conteneurDoubleImgCarré {
        min-height: 330px;
        width: 100%;
        margin: 0px 0px 10px 0px;
    }

    .infoBulleImgClik {
        width: 200px;
        left: 0px;
        z-index: 2;
        transform: translateY(-230px);
    }

    .infoBulle,
    .ficheEXplicative {
        width: 200px;
        margin-left: 0%;
    }

    .ficheEXplicative {
        transform: translateX(-0px);
    }


    .imgExempleInfobulle {
        width: 40%;
        margin: 0px 0px 0px 2px;
    }

    .legendeExempleInfobulle {
        font-family: 'Nixie One', serif;
        font-size: 12px;
        line-height: 1em;
        width: 45%;
        margin-top: -90px;
    }

    .box-apparait-au-clic {
        display: none;
    }


    .conteneurVisionneuse {
        vertical-align: top;
        max-width: 240px;
        margin-left: 25px;
        margin-right: 25px;
        display: inline-block;
    }

    .boxParametrage {
        width: 240px;
        display: inline-block;
    }

    .boxInfoComplementaireMonument {
        display: inline-block;
        width: 240px;
        z-index: 0;
        white-space: normal;
        padding-left: 0px;
    }

    .boxIconMonument {
        height: 150px;
    }

    .conteneurInfoPratique {
        width: 230px;
        display: inline-block;
        margin: 0% 1% 2% 3%;
    }

    .languette {
        display: inline-block;
        width: 30px;
        height: 20px;
        margin-left: 105px;
        margin-right: 105px;
    }

    .fermerLanguette {
        margin-left: 85%;
        border-top-right-radius: 0px;
    }

    .ApparaitMobile {
        display: inline-block;
    }

    .DisparaitMobile {
        display: none;
    }
}


@media only all and (max-width: 620px) {
    .fondAmovible {
        margin-top: 350px;
    }

    .fondFixe {
        height: 500px;
    }

    .imgRotateMobile {
        width: 620px;
        transform: rotate(-90deg);
        margin-left: -195px;
        margin-top: 170px;
        margin-bottom: 180px;
    }

    .ApparaitMobile620 {
        display: inline-block;
    }

    .DisparaitMobile620 {
        display: none;
    }

    .carouselDoubleimg {
        padding: 8px;
        width: 128%;
        height: auto;
        margin-left: -18%;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        background: var(--backgroundSecondaire);
    }

    .conteneurDoubleImgMobile {
        max-height: 250px;
        width: auto;
        margin-left: 0px;
        margin-right: 15px;
        top: 0 !important;
        display: inline-block;
    }

    .bigLanguette {
        grid-column: 2 / 15;
        height: 170px;
        margin-left: -70px;
        margin-bottom: -155px;
    }

    .boiteThemeVisite {
        grid-column: 2 / 15 !important;
        padding-bottom: 5px;
        margin-left: -40px;
        margin-right: 10px;
    }

    .boiteTempsVisite,
    .boiteNiveauVisite {
        grid-column: 1 / 15 !important;
        margin-left: -40px;
        height: 20px;
    }

    .poinçonAcote {
        display: inline-block;
        margin: -5px 5px 0px 5px;
        width: 30px;
        height: 30px;
    }

    .texteAcote {
        font-size: 18px;
    }

    .ligneAudio {
        width: 86%;
    }

    .boiteAudio {
        grid-column: 2 / 15 !important;
        margin-top: 60px;
    }


}


@media only all and (max-width: 420px) {
    .fondAmovible {
        margin-top: 300px;
    }

    .fondFixe {
        height: 400px;
    }
}