/* 
  Ce site est développé par :
  Jean-François McDuff
  et
  Sylvain Meunier
  
  Pour le compte de :
  jemesouviens.net

  2020 © jemesouviens.net - Tous droits réservés
*/

* { box-sizing: border-box; }                   /* Les mesures des boîtes prennent en compte les bordures */

:root {
  --couleur_blanc : rgb(255, 255, 255);                                        /* Couleur - blanc */
  --couleur_bleu_fonce : rgb(11, 63, 164);                                     /* Couleur - bleu foncé */
  --couleur_bleu_pale : rgb(158, 190, 247);                                    /* Couleur - bleu pale */
  --couleur_gris_souris : rgb(201, 209, 220);                                  /* Couleur - Gris souris */
  --couleur_noir : rgb(0, 0, 0);                                               /* Couleur - noir */
  --couleur_rouge : rgb(237, 28, 36);                                          /* Couleur - rouge */
  --couleur_rouge_hover : rgb(237, 28, 36);                                    /* Couleur - rouge_survol */
  --couleur_vert : green;                                                      /* Couleur - vert */

}

.curseur_main:hover { cursor: pointer; }

body { 
  overflow: hidden; 
  height: 100vh;
}
box {                                           /* Boite - Rectangle de couleur servant de légende */
  min-height: 1em;                                 /* Boite - hauteur minimum */
  min-width: 2.1em;                                /* Boite - largeur minimum */
}
a { 
    color: blue;
    text-decoration: none; 
    font-weight: bolder;
}
a:hover { 
    color: darkblue; 
    font-weight: bolder;
}
a:visited { 
    color: rgb(102, 116, 135); 
    font-weight: bolder;
}
a:visited:hover { 
    color: darkblue; 
    font-weight: bolder;
}
button:hover, input[type="submit"]:hover { background-color: var(--couleur_bleu_fonce); color: white;}
footer {
    position: fixed;
    bottom: 0;
    right: 0;
    height: 7vh;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 25;
}
footer div {
    position: absolute;
    bottom: 1px;
    margin: auto;
    left: 2%;
}
footer p {
    position: relative;
    bottom: -10px;
    text-align: center;
    color: white;
    font-size: small;
    font-family: 'Times New Roman';
}
footer center div a,
footer center div a:visited {
    color: var(--couleur_gris_souris);
    font-weight: normal;
    text-align: center;
    font-size: 12px;
    text-decoration: underline;
}
footer center div a:hover,
footer center div a:visited:hover {
    color: var(--couleur_bleu_pale);
    font-weight: normal;
    text-align: center;
    font-size: 12px;
    text-decoration: underline;
}
p {                                     /* Famille de police génériques de base */
    font-family: Times New Roman, Arial, Verdana sans-serif;      /* Styles de la police */
    font-size: medium;                      /* Grosseur de la police */
    color: black;                           /* Les paragraphes seront en noir */
    padding-left: 2%;                       /* Marge intérieure gauche */
    padding-right: 2%;                      /* Marge intérieure droite */
}       
section{
    width: 100%;                        /* On a indiqué une largeur (obligatoire) */
    margin: auto;                           /* On peut donc demander de centrer un bloc avec auto */
    padding-top: 0%;                        /* Marge intérieure */
    margin-bottom: 1%;                      /* Marge extérieure */
    background: white;                      /* Couleur de fond */
    border: 2px solid #214fa3;              /* bordure; épaisseur et couleur */
    border-radius: 10px;                    /* Coins arrondis */
    box-shadow: 8px 8px 12px black;         /* Ombrage sous les sections */
}
table tr td button { width: 100%; }

marquee p a {
  color: var(--couleur_bleu_pale);
}
marquee p a:visited:hover {
  color: var(--couleur_gris_souris);
}

/*********************************************************** Barre de chargement *******************************************************/

.loading {
  position: absolute;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.9);
  transition: 0.45s;
  z-index: 10;
}
.loading-container {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, -70%);
  color: rgb(158, 190, 247);
  font-size: 2vw;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), 
    5px 5px 70px rgba(255, 255, 255, 0.5);
}
.number {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 1vh;
  transform: translate(-50%, -70%);
}
#bar {
  width: 750px;
  height: 5vh;
  border: 1px solid rgb(158, 190, 247);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), 
    5px 5px 70px rgba(255, 255, 255, 0.5);
}
#progress {
  background-color: rgb(158, 190, 247);
  width: 0;
  height: 100%;
}
#loadText {
  text-align: center;
  color: rgb(158, 190, 247);
}
.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/*********************************************************** Barre de défilement *****************************************************/

.scrollbarLook::-webkit-scrollbar{                    /* Apparence de la barre de défilement */
    display: none;                                    /* Aucun affichage de la barre de défilement */
    -ms-overflow-style: none;                         /* Aucun style de la barre de défilement */
    scrollbar-width: 0;                               /* Largeur de la barre de défilement */
}

.scroll_general {                                     /* Barre de défilement vertical pour les pages Biographies, Synthèses, Annexes et Répertoire */
  height: 35vh;                                         /* Hauteur de la barre de défilement */
}

/***************************************************************** Bordures **********************************************************/

.bordure_bleue,
.bordure_bleue_hover {                                      /* Bordure de couleur bleue */
  border: 1px blue solid; 
  margin: 0 1%;
}
.bordure_bleue_hover:hover {background-color: blue;}
.bordure_bleue_hover:hover a {color: white;}
.bordure_ronde { border-radius: 10px; }               /* Coins arrondis */
.bordure_ronde_inf { border-radius: 0 0 10px 10px; }  /* Coins arrondis inférieurs seulement */
.bordure_ronde_sup { border-radius: 10px 10px 0 0; }  /* Coins arrondis supérieurs seulement */

/*************************************************************** Calendrier **********************************************************/

.calendrier_case {                                          /* Défini les cases du calendrier */
  background-image: url("../../images/case.png");             /* Image de fond des cases */
  background-size: 100% 100%;                                 /* Grandeur de l’image selon le parent */
  background-repeat: no-repeat;                               /* Répétition de l’image de fond */
  height: 6em;                                                /* Hauteur de la case */
  width: 11%;                                                 /* Largeur de la case */
}
.calendrier_evenement {                                     /* Bande de couleurs des événements */
  width: 92%;                                                 /* Largeur de la bande */
  margin-left: 5%;                                            /* Marge extérieure gauche de la bande */
  margin-top: -0.5em;                                         /* Marge extérieure supérieure de la bande */
  padding-top: 2em;                                           /* Marge intérieure supérieure de la bande */
  text-align: left;                                           /* Alignement du texte dans la bande */
  position: absolute;                                         /* Positionnement absolu du texte dans la boîte */
  bottom: 0.2em;                                              /* Positionnement relatif du texte à partir du bas de la boîte */
  right: -0.2em;                                              /* Positionnement relatif du texte à partir de la droite de la boîte */
  font-size: small;                                           /* Grosseur de la police */
  overflow-y: scroll;                                         /* Assure le défilement vertical */
}
.calendrier_jour {                                          /* Ajuste l’apparence de la case indiquant le jour */
  background-image: url('../../images/jour.png');             /* Image de fond pour le jour du mois */
  height: 2.1em;                                              /* Hauteur de la zone du jour du mois */
  width: 2.1em;                                               /* Largeur de la zone du jour du mois */
  background-size: 100% 100%;                                 /* Grandeur de l’image selon le parent */
  position:absolute;                                          /* Position absolute de la zone du jour du mois */
  top:5%;                                                     /* Position à partir du haut du parent */
  right:3%;                                                   /* Position à partir de la marge de droite du parent */
  text-align: center;                                         /* Alignement du texte dans la zone */
  font-weight: bold;                                          /* Épaisseur de l’écriture dans la zone */
  vertical-align: top;                                       /* Alignement vertical dans la zone */
  color: black;                                               /* Couleur du texte dans la zone */
}
.calendrier_jour_actuel {                                   /* Ajuste l’apparence du jour actuel */
  background-image: url("../../images/jour_actuel.png");      /* Image de fond pour le jour actuel */
  height: 2.1em;                                              /* Hauteur de la zone du jour actuel */
  width: 2.1em;                                               /* Largeur de la zone du jour actuel */
  background-size: 100% 100%;                                 /* Grandeur de l’image selon le parent */
  position:absolute;                                          /* Position absolute de la zone du jour actuel */
  top:5%;                                                     /* Position à partir du haut du parent */
  right:3%;                                                   /* Position à partir de la marge de droite du parent */
  text-align: center;                                         /* Alignement du texte dans la zone */
  font-weight: bold;                                          /* Épaisseur de l’écriture dans la zone */
  vertical-align: top;                                       /* Alignement vertical dans la zone */
  color: white;                                               /* Couleur du texte dans la zone */
}
.calendrier_jour p, .calendrier_jour_actuel p {             /* Ajustement de la date dans la case du jour */
  margin-top: 0.5em;                                          /* Ajutement des marges du texte du jour du mois */
  font-family: Time New Romans, Arial, Sans serif;            /* Type de police pour le calendrier. */
}

.ferier {                                                   /* Ajustement de l'affichage du jour férier dans la case */
  font-size: xx-small;                                        /* Grosseur de la police */
  font-weight: bold;                                          /* Épaisseur de la police */
  text-align: left;                                           /* Alignement du texte dans la boîte */
  margin-top: 2%;                                             /* Marge supérieur */
  width: 75%;                                                 /* Largeur maximum du texte dans la boîte */
}

/***************************************************************** Couleurs *********************************************************/

.couleur_blanc { color: var(--couleur_blanc); }                                       /* Couleur du texte - blanc */
.couleur_bleu_fonce { color: var(--couleur_bleu_fonce); }                             /* Couleur du texte - bleu foncé */
.couleur_bleu_pale { color: var(--couleur_bleu_pale); }                               /* Couleur du texte - bleu pale */
.couleur_gris_souris { color: var(--couleur_gris_souris); }                           /* Couleur du texte - Gris souris */
.couleur_rouge { color: var(--couleur_rouge); }                                       /* Couleur du texte - rouge */
.couleur_rouge_hover { color: var(--couleur_rouge_hover); }                           /* Couleur du texte - rouge survol */
.couleur_rouge_hover:hover { color: rgb(20, 150, 20); }                               /* Couleur du texte en survol - rouge à vert */
a.couleur_rouge_hover:visited { color: var(--couleur_rouge_hover); }                  /* Couleur du texte lien visité - rouge survol */
a.couleur_rouge_hover:visited:hover { color: rgb(20, 150, 20); }                      /* Couleur du texte lien visité survolé - rouge survol */
.couleur_vert { color: var(--couleur_vert); }                                         /* Couleur du texte - vert */

/****************************************************************** Fonds ***********************************************************/

/* Couleurs de fond*/
.bg_opacite_8 { opacity: 0.8; }                                                       /* Légère transparence */
.bg_souris { background-color: rgb(201, 209, 220); color: rgb(0, 0, 0); }             /* Fond gris personalisé */
.bg_blanc { background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); }              /* Fond blanc */
.bg_bleu_fonce { background-color: #1282e0; color: rgb(255, 255, 255); }              /* Fond bleu foncé */
.bg_bleu_marine { background-color: #0c5df1; color: rgb(255, 255, 255); }             /* Fond bleu marine */
.bg_bleu_pale { background-color: rgb(158, 190, 247); color: rgb(0, 0, 0); }          /* Fond bleu pâle */
.bg_bleu_royal { background-color: #204ea3; color: rgb(255, 255, 255); }              /* Fond bleu royal */
.bg_bourgogne { background-color: rgb(136, 0, 21); color: rgb(255, 255, 255); }       /* Fond bourgogne */
.bg_gris { background-color: rgb(125, 125,125); color: rgb(255, 255, 255); }          /* Fond gris */
.bg_gris_pale { background-color: lightgray; color: rgb(0, 0, 0); }                   /* Fond gris */
.bg_grisatre { background-color: #cfcfcb; color: rgb(0, 0, 0); }                      /* Fond grisâtre */
.bg_jaune { background-color: rgb(255, 242, 0); color: rgb(0, 0, 0); }                /* Fond jaune */
.bg_jaune_pale { background-color: #e8dd28; color: rgb(0, 0, 0); }                    /* Fond jaune pâle */
.bg_mauve { background-color: rgb(150, 27, 150); color: rgb(255, 255, 255); }         /* Fond mauve */
.bg_noir { background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); }               /* Fond noir */
.bg_orange { background-color: rgb(255, 100, 25); color: rgb(0, 0, 0); }              /* Fond orange */
.bg_peche { background-color: rgb(255, 175, 175); color: rgb(0, 0, 0); }              /* Fond pêche */
.bg_rouge { background-color: rgb(237, 28, 36); color: rgb(0, 0, 0); }                /* Fond rouge */
.bg_rouge_hover { background-color: rgb(237, 28, 36); color: rgb(0, 0, 0); }          /* Fond rouge avec survol */
.bg_rouge_hover:hover { background-color: rgb(20, 150, 20); color: rgb(0, 0, 0); }    /* Fond rouge avec survol actif */
.bg_vert { background-color: rgb(34, 177, 76); color: rgb(0, 0, 0); }                 /* Fond vert */
.bg_vert_fonce { background-color: rgb(0, 115, 0); color: rgb(255, 255, 255); }       /* Fond vert foncé */
.bg_or { background-color: #d5ad0c; color: rgb(0, 0, 0); }                            /* Fond couleur or */

/* Images */
.bg_main {                                              /* Fond d’écran principal */
  background-image: url("../../images/bg_main.jpg");    /* Image du fond d’écran */
  background-repeat: no-repeat;                         /* Répétition du fond d’écran */
  background-size: 100% 100%;                           /* Grandeur du fond d’écran dans l’écran */
}
.bg_metal {                                             /* Fond plaque de métal pour remplissage */
  background-image: url("../../images/bg_metal.png");   /* Image Fond métallique */
  background-repeat: no-repeat;                         /* Répétition du fond d’écran */                
  background-size: 100% 100%;                           /* Grandeur du fond d’écran dans le parent */
}
.bg_parchemin { 
  background-image: url("../../images/bg_parchemin.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.bg_parcheminFiltre {                                   /* Fond filtre pour aider à la lecture */
  background-color: rgba(255, 255, 255, 0.8);             /* Couleur du fond filtre */
}
.bg_parlement { 
  background-image: url("../../images/bg_assemblee_nationale_nb.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.bg_vieuxmontreal { 
  background-image: url("../../images/bg_vieuxMontreal_nb.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.bg_vieuxquebec { 
  background-image: url("../../images/bg_ph_nb.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.bg_col_historique { 
  background-image: url("../../images/bg_collectivites_historiques_nb.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.bg_eve_historique { 
  background-image: url("../../images/bg_evenements_historiques_nb.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.bg_lieuxHistorique { 
  background-image: url("../../images/bg_lieuxHistorique.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.bg_annexe_femme { 
  background-image: url("../../images/bg_femmes_nb.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.bg_annexe_homme { 
  background-image: url("../../images/bg_hommes_nb.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.bg_annexe_objet { 
  background-image: url("../../images/bg_objets_nb.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.bg_rep_litterature,
.bg_rep_musique,
.bg_rep_cinema { 
  background-image: url("../../images/bg_metal.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.bg_repertoire_litterature { 
  background-image: url("../../images/bg_litterature_nb.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.bg_repertoire_musique { 
  background-image: url("../../images/bg_musique_nb.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.bg_repertoire_cinema { 
  background-image: url("../../images/bg_cinema_nb.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.tableTHsurvol_bleu {
  background-color: var(--couleur_blanc);
}
.tableTHsurvol_bleu a, .tableTHsurvol_bleu a:visited {
  color: var(--couleur_bleu_fonce);
  font-weight: bold;
}
.tableTHsurvol_bleu:hover {
  background-color: var(--couleur_bleu_fonce);
}
.tableTHsurvol_bleu:hover a {
  color: var(--couleur_blanc);
  font-weight: bold;
}


/***************************************************************** Images ***********************************************************/

.bouton_recherche { width: 1.2em; }                     /* Largeur de la loupe de recherche */

.img_avatar {                                           /* Image - Avatar régulier */
  width: 20%; 
  height: 25vh;                              
  margin-left: 1%;
  margin-right: 1%;
  margin-top: 1%;
}

.img_drapeau_petit {                                    /* Image - Petit drapeau */
  height: 2em;                                            /* Image - hauteur */
  margin-top: -2px;                                       /* Image - marge supérieur négative */
} 

.img_icon {
  width: 5%;
}

.img_logo_grand { width: 25vw; }                         /* Image agrandie des logos */

.modImg {
  position: relative;
  text-align: center;
  overflow: hidden;
  color: black;
}

.modImgTxt {
  position: absolute;
  bottom: 1%;
  left: 1%;
  display: none;
}

.modGrand {}

.modGrand:hover {
  width: 98%;
  margin: auto;
}

.plus {                                                 /* Image - Plus dans les cases */
  position: absolute;                                     /* Image - positionnement absolu dans la case */
  top: 43%;                                               /* Image - positionnement à partir du haut de la case */
  right: 5%;                                              /* Image - positionnement à partir de la droite de la case */
  width: 15%;                                             /* Image - largeur de l'image dans la case en pourcentage */
  margin-left: 0.2em;                                     /* Image - marge relative de l'image dans la case */
}

/***************************************************************** Listes ***********************************************************/

.liste_sans { list-style: none; }                         /* Retrait des points de liste */

/***************************************************************** Marges ***********************************************************/

.margeAuto { margin: auto; }                              /* Permet de centrer un bloc */

.marge_ext_droite_n5p { margin-left: -5%; }               /* marge extérieure gauche négative de 5%*/
.marge_ext_droite_1p { margin-right: 1%; }                /* marge extérieure droite 1% */
.marge_ext_droite_2p { margin-right: 2%; }                /* marge extérieure droite 2% */

.marge_ext_gauche_n2p { margin-left: -2%; }               /* marge extérieure gauche négative de 2%*/
.marge_ext_gauche_1p { margin-left: 1%; }                 /* marge extérieure gauche 1% */
.marge_ext_gauche_2p { margin-left: 2%; }                 /* marge extérieure gauche 2% */
.marge_ext_gauche_4p { margin-left: 4%; }                 /* marge extérieure gauche 4% */
.marge_ext_gauche_5p { margin-left: 5%; }                 /* marge extérieure gauche 5% */

.marge_ext_inf_n2p {margin-bottom: -2%; }                 /* marge extérieure inférieure négative de 2% */
.marge_ext_inf_n1p {margin-bottom: -1%; }                 /* marge extérieure inférieure négative de 1% */
.marge_ext_inf_2p { margin-bottom: 2%; }                  /* marge extérieure inférieure de 2% */

.marge_ext_lat_2p { margin-right: 2%; margin-left: 2%; }  /* Marges latérales extérieures - 2% */

.marge_ext_sup_n3p { margin-top: -3%; }                   /* marge extérieure supérieure négative de 3% */
.marge_ext_sup_n2p { margin-top: -2%; }                   /* marge extérieure supérieure négative de 2% */
.marge_ext_sup_n1p { margin-top: -1%; }                   /* marge extérieure supérieure négative de 1% */
.marge_ext_sup_n0-5p { margin-top: -0.5%; }               /* marge extérieure supérieure négative de 0.5% */
.marge_ext_sup_1p { margin-top: 1%; }                     /* marge extérieure supérieure 1% */
.marge_ext_sup_2p { margin-top: 2%; }                     /* marge extérieure supérieure 2% */

.marge_ext_inf_n3p {margin-bottom: -3%; }                 /* marge extérieure inférieure négative de 3% */

.marge_int_1 {padding: 1%;}
.marge_int_lat_1 { padding-left: 1em; padding-right: 1em; }     /* marges intérieures latérales */

.marge_int_sup_2vh { padding-top: 2vh; }                         /* marge intérieures supérieure */
.marge_int_sup_4vh { padding-top: 4vh; }                         /* marge intérieures supérieure */

.marge_int_vert_1 { padding-top: 1em; padding-bottom: 1em; }    /* marges verticales intérieures */

/***************************************************************** Mesures **********************************************************/
.h10px { height: 10px; }                              /* Haudeur de 10 pixels */

.h5v { height: 5vh; }                                 /* Hauteur à 5% de l’écran */
.h6v { height: 6vh; }                                 /* Hauteur à 6% de l’écran */
.h8v { height: 8vh; }                                 /* Hauteur à 8% de l’écran */
.h10v { height: 10vh; }                               /* Hauteur à 10% de l’écran */
.h20v { height: 20vh; }                               /* Hauteur à 20% de l’écran */
.h23v { height: 23vh; }                               /* Hauteur à 23% de l’écran */
.h45v { height: 45vh; }                               /* Hauteur à 45% de l’écran */
.h50v { height: 50vh; }                               /* Hauteur à 50% de l’écran */
.h51v { height: 51vh; }                               /* Hauteur à 51% de l’écran */
.h55v { height: 55vh; }                               /* Hauteur à 55% de l’écran */
.h75v { height: 75vh; }                               /* Hauteur à 75% de l’écran */
.h76v { height: 76vh; }                               /* Hauteur à 76% de l’écran */
.h98v { height: 98vh; }                               /* Hauteur à 98% de l’écran */

.l2 { width: 2%; }                                    /* Largeur à 2% du parent */
.l5 { width: 5%; }                                    /* Largeur à 5% du parent */
.l10 { width: 10%; }                                  /* Largeur à 10% du parent */
.l20 { width: 20%; }                                  /* Largeur à 20% du parent */
.l24 { width: 24%; }                                  /* Largeur à 24% du parent */
.l28 { width: 28%; }                                  /* Largeur à 28% du parent */
.l30 { width: 30%; }                                  /* Largeur à 30% du parent */
.l32 { width: 32%; }                                  /* Largeur à 32% du parent */
.l34 { width: 34%; }                                  /* Largeur à 34% du parent */
.l40 { width: 40%; }                                  /* Largeur à 40% du parent */
.l42 { width: 42%; }                                  /* Largeur à 42% du parent */
.l47 { width: 47%; }                                  /* Largeur à 47% du parent */
.l49 { width: 49%; }                                  /* Largeur à 49% du parent */
.l50 { width: 50%; }                                  /* Largeur à 50% du parent */
.l60 { width: 60%; }                                  /* Largeur à 60% du parent */
.l70 { width: 70%; }                                  /* Largeur à 70% du parent */
.l80 { width: 80%; }                                  /* Largeur à 80% du parent */
.l95 { width: 95%; }                                  /* Largeur à 95% du parent */
.l96 { width: 96%; }                                  /* Largeur à 96% du parent */
.l98 { width: 98%; }                                  /* Largeur à 98% du parent */
.l100 { width: 100%; }                                /* Largeur à 100% du parent */

/***************************************************************** Overflow **********************************************************/
.cache { display: none; }                             /* Rend invisible le champ donné */
.overflowH { overflow: hidden; }                      /* Surplus d’affichage complètement caché */
.overflowY {                                          /* Affichage de la barre de défilement verticale seulement */
  overflow-y: scroll;                                   /* Surplus d’affichage vertical soutenu par une barre de défilement */
  overflow-x: hidden;                                   /* Surplus d’affichage horizontal caché */
}

/***************************************************************** Polices **********************************************************/
.page_stitre {                                          /* Sous-titre d’une page */                                 
    margin-top: 2vh;                                      /* marge extérieure supérieure */
    padding: 0;                                           /* marges intérieures */
    width: 60%;                                           /* largeur dans le parent */
    font-weight: bold;                                    /* épaisseur du texte */
    margin: auto;
}

.page_stitre p {                                        /* Paragraphe de sous-titre d’une page */
  color: var(--couleur_bleu_fonce);                       /* couleur du texte sous page_stitre */
  width: 100%;                                            /* largeur dans le parent */
} 

.police_defaut {
  font-family: Comic sans MS, Arial, Verdana sans-serif;      /* Styles de la police */
  font-size: medium;                                    /* Grosseur de la police */
  color: black;                                         /* Les paragraphes seront en noir */
}
.police_time {
  font-family: Times New Roman;
}

.police_petit { font-size: small; }                     /* Police - petite */
.police_normal { font-size: medium; }                   /* Police - régulière */
.police_l { font-size: large; }                         /* Police - large */
.police_xxl { font-size: xx-large; }                    /* Police - très grosse */

.titre_img {
  /* Remplace les anciennes images de titre — texte HTML pur */
  display: block;
  font-family: 'Times New Roman', Times, serif;
  font-weight: normal;             /* Annule le gras par défaut du h1 */
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  color: #1a4fa0;                           /* Bleu identique aux images originales */
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0.6vh auto 0;
  padding: 0.2em 2%;
  line-height: 1.1;
}

.texte_gras { font-weight: bolder; }                    /* Texte en caractère gras */
.texte_italique { font-style: italic; }                 /* Italique du texte */
.texte_normal { font-weight: normal; }                  /* Grosseur de texte normal */

/************************************************************** Positionnement ******************************************************/

.bordure_ronde_inf_bl { 
  position: relative;
  bottom: 0;
  left: 0;
  height: 5vh;
}

.cache { display: none; }                               /* Rend un parent invisible */

.droite_2p {                                            /* Positionnement absolu à droite de 2% de la marge extérieure */ 
  position: absolute;                                     /* Positionnement absolu */
  right: 2%;                                              /* Positionnement à 2% de la droite */
}

.fixe { position: fixed; }                              /* Postion fixe à l'écran */
.fixe_inf { 
  position: absolute; 
  bottom: 0;
  left: 1%;
  z-index: 3;
}

.fl_droite { float: right; }                            /* Flotaison à gauche */
.fl_gauche { float: left; }                             /* Flotaison à gauche */
.fl_sans { clear: both; }                               /* Flotaison annulée */

.centrer { text-align: center; }                        /* Texte - Centrer */
.droite { text-align: right; }                          /* Texte - Aligné à droite */
.gauche { text-align: left; }                           /* Texte - Aligné à gauche */

.liste_BSAR {                                           /* Ajustement des listes à l'intérieur des classes zones_BSAR */
  width: 100%;                                            /* Largeur de la liste à 100% de la zone */
  overflow-y: scroll;                                     /* Surplus d’affichage vertical soutenu par une barre de défilement */
  overflow-x: hidden;                                     /* Surplus d’affichage horizontal caché */
}

.marqueeWidth { width: 70%; margin: auto; }             /* Largeur occupée par les messages défilants */

.position_r {                                           /* Octroie une position selon le parent */
  position: relative;                                     /* Octroie une position selon le parent */                  
  overflow: hidden;                                       /* Ajuste le surplus à la case */
  height: 100%;                                           /* Fixe la hauteur de l'enfant à 100% du parent */
}

.vhaut { vertical-align: top; }                         /* Alignement vertical sur le haut du parent */

.zone_BSAR {                                            /* Ajustement des sections des pages Biographies, Synthèses, Annexes et Répertoires */
  width: 32%;                                             /* Largeur des section à 32% */
  height: 51vh;                                           /* Hauteur des section à 52% de la hauteur de l'écran */
  float: left;                                            /* Flotaison à gauche */
  margin-left: 1%;                                        /* Marge extérieure gauche à 1% */
}

/*************************************************************** Spécifiques *********************************************************/ 

#calendrier_interactif { 
  margin: 1em 1% 2em 1%;
  width: 100%;
}

#Categories, #Rechercher {
  position: relative;
}

#Categories select {
  font-size: large;
}

#Categories select {
  position: absolute;
  top: 3vh;
  left: 7%;
}

#mainContent { 
  position: absolute;
  top: 24vh;
  width: 98%;
  height: 76vh;
  margin-left: 0.5%;
  z-index: 1; 
}

#moisSelect {
  position: absolute;
  top: 15vh;
  left: 35%;
  background-color: rgb(201, 209, 220); color: rgb(0, 0, 0);
  height: auto;
  width: 30%;
  z-index: 4;
  display: none;
}

#Rechercher div {
  position: absolute;
  top: 2.5vh;
  right: 7%;
}

#typeEvenementCategories {
  position: absolute;
  top: -10vh;
  left: 7%;
  height: auto;
  width: 13%;
  z-index: 4;
  display: none;
}


/*************************** FADE EFFECT *******************************/
.fade-in-image {
  animation: fadeIn 5s;
  -webkit-animation: fadeIn 5s;
  -moz-animation: fadeIn 5s;
  -o-animation: fadeIn 5s;
  -ms-animation: fadeIn 5s;
}
.fade-in-image-waitX5 {
  animation: fadeIn 25s;
  -webkit-animation: fadeIn 25s;
  -moz-animation: fadeIn 25s;
  -o-animation: fadeIn 25s;
  -ms-animation: fadeIn 25s;
}


@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

/* Image effritée dès le départ */
#imgBienvenue {
    transition:
        opacity 0.6s ease-out,
        width 0.4s linear,
        filter 0.6s ease-out,
        transform 1.2s ease-out;
    filter: url("#pixelate") blur(1px) contrast(1.4);
}

/* Effritement renforcé (déjà appliqué au début) */
#imgBienvenue.effrite {
    filter: url("#pixelate") blur(1px) contrast(1.4);
}

/* Explosion de particules */
#imgBienvenue.explose {
    filter: url("#explode") blur(6px) brightness(1.4) contrast(1.3);
    transform: translate(-20px, -40px) scale(1.1);
    opacity: 0.15;
}
/************************************************************** Responsive — PC / Mobile ******************************************************/

/* Éléments visibles sur PC uniquement — affichage normal par défaut */
/* Sur mobile, .pc_only sera masqué via mobile.css                   */
.pc_only  { /* aucun style requis ici — visible par défaut */ }

/* Éléments réservés au mobile — toujours cachés sur PC */
.mobile_only { display: none; }