/* ==========================================================
   BASE / RESET
   ========================================================== */

  html, body {overflow:visible;margin:0px;padding:0px;background-color:white;}
  body { font-family: Arial, Helvetica, sans-serif;}
/*body { font-family: Lora, sans-serif;}*/
.texte-mobile {
  display: none;
}

/* ==========================================================
   LINKS / INLINE ELEMENTS
   ========================================================== */

  code {font-size:2em;}
  a:link{color: #000000;}
  a:visited{color:#000000;}
  a:hover{color: #999999; text-decoration: none;}

/* ==========================================================
   LAYOUT GLOBAL (BANNIÈRE / MENU / CONTENU)
   ========================================================== */

  #layer1 {POSITION: absolute; TOP: 0px;LEFT: 0px; width: 100%; /* clip: rect(); supprimé car vide */ text-align: center}
  #layer2 {POSITION: absolute; TOP: 0px; LEFT: 0px; text-align: center; width: 100%; /* clip: rect(); supprimé car vide */}

  .petitTitre {text-decoration:underline;font-weight: bold;}
  #menu {
    font-family: Arial, Helvetica, sans-serif ;
    position:fixed;
    overflow:auto;
    left:0px;
    width:220px;
    bottom:0px;
    top:80px;
    background-color:white;
    background-image:url(../pics/book.jpg);
    font-size:90%;
    }
  #bann {
    position:fixed;
    right:0px;
    left:0px;
    top:0px;
    height:80px;
    font-family: "Times New Roman", verdana, serif ;
    background-color:white;
    background-image:url(../pics/book.jpg);
    font-size:90%;
    }
  #contenu {
    position:absolute;
    overflow:auto;
    left:220px;
    right:0px;
    bottom:0px;
    top:80px;
    background-color:white;
    background-image:url(../pics/pagebook.jpg);
    }

/* ==========================================================
   TYPOGRAPHIE & CONTENU (Titres, paragraphes, citations)
   ========================================================== */

  #bann h2 {font-family: "Times New Roman", verdana, sans-serif ; color:#000080;text-align:center;margin-bottom:0px;}
  #bann h3 {font-family: "Times New Roman", verdana, sans-serif ; color:#000080;text-align:center;margin-top:0px;}

  #menu h1 {font-family: Arial, Helvetica, sans-serif ;font-weight : bolder; margin-left: 23px;text-decoration:underline;}
  #menu h2 {font-family: Arial, Helvetica, sans-serif ;font-weight : bolder; margin-left: 23px;text-decoration:underline;}
  #menu h3 {font-family: Arial, Helvetica, sans-serif ;font-weight : bolder; margin-left: 23px;text-decoration:underline;}
  #menu h4 {font-family: Arial, Helvetica, sans-serif ;font-weight : bolder; margin-left: 23px;text-decoration:underline;}
  #menu h5 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin-left: 40px;
  margin-top: -10px;
  margin-bottom: -5px;  /* juste avant la liste */
  font-size: 75%;     /* entre h4 et li */
  text-decoration: underline;
}

  
  #menu li {font-family: Arial, Helvetica, sans-serif ;margin-left: 23px;font-size:70%;}

  #contenu h1 {font-family: Cinzel, serif ;	text-align:center; color: #0033cc;	font-size: 32px; font-weight: bold;	text-decoration:underline;margin-bottom:50px}
  /*#contenu h1 {font-family: Arial, Helvetica, sans-serif ;	text-align:center; color : #0000FF;	font-size: 32px; font-weight: bold;	text-decoration:underline;margin-bottom:50px}*/
  #contenu h3 {margin-left: 23px;text-decoration:underline;font-size:medium;}
  #contenu h5 {text-align: center;margin-top:50px;margin-bottom:0px;}
  #contenu h6 {text-align: center;margin-top:0px;font-style:italic;}
  #contenu a {color: blue;}
  #contenu p {margin-left:60px;margin-right:60px;font-size:90%;text-align:justify;}
  #contenu blockquote {font-style:italic;margin-left:90px;margin-right:90px;font-size:90%;text-align:justify;}
  #contenu .titreinterne {text-decoration:underline;font-weight: bold;font-size:85%;}
  #contenu .retrait {margin-left: 50px;}
  #contenu .noteimage {font-size:small; text-align: center; font-style:italic;margin-top:0px;margin-bottom:20px;}

/* ==========================================================
   BLOCS SPÉCIFIQUES (chanson, épitaphe, lettres, lieux-dits)
   ========================================================== */

  #contenu .chanson {font-family: "Times New Roman", verdana, serif ;width: 100% ; max-width:500px; margin: auto;border: none;}
  #contenu .chanson td {text-align: center;font-size: 90%;}
  #contenu .chanson h3 {text-decoration: none;margin-bottom: 5px;margin-top: 10px;}
  #contenu .epitaphe {
      background-image:url('../pics/xpierre2.jpg');
      width: 100% ;
      max-width:600px;
      margin: 20px auto 50px auto;
      border: none;
      text-align:center;
      font-weight:normal;
      padding-top:20px;
      padding-bottom:10px;
      padding-left:10px;
      padding-right:10px;
      font-family: Georgia, serif;}
  #contenu .epitaphe .titre {font-weight: bold;text-align: center;padding-bottom: 7px;}
  #contenu .epitaphe td {text-align:center;vertical-align:top;}
  #contenu  .citationdoc1{	font-weight:normal;
    text-decoration:none;
    margin-left:50px;
    margin-right:100px;
    text-align:justify;
    font-family: Arial, Helvetica, sans-serif;}
  #contenu  .citationdoc1 h4 {font-size: 85%;margin-left:50px;margin-right:100px;font-weight: bold;}
  #contenu  .citationlettre{
    background-image:url('../pics/parchemin2.jpg');
    margin-left:150px;
    margin-right:150px;
    text-align:justify;
    font-weight:normal;
    font-family: Arial, Helvetica, sans-serif;
    padding-top:20px;
    padding-bottom:20px;}
  #contenu  .citationlettre p {font-size: 95%;}
  #contenu  .citationlettre h3 { text-align: center; }
  #contenu .citationlettre li {
    padding-left: 2em;
    list-style-position: inside;
  }

/* En-tête manuscrit (ligne gauche/centre/droite) */
#contenu .citationlettre .lettre .entete-lettre{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8em;
  margin-bottom: 3em;
  padding: 0 2em;
}
#contenu .citationlettre .lettre .footer-lettre{
  margin-top: 3em;        /* grand blanc avant le footer */
  margin-left: 40%;      /* zone de signature à droite */
}

#contenu .citationlettre .lettre .footer-lettre p{
  margin-top: 0;
  margin-bottom: 0.5em;  /* interligne léger */
}

#contenu .citationlettre .lettre .footer-lettre .signature{
  margin-top: 1.5em;    /* blanc avant la signature */
  font-style: italic;
}

#contenu .citationlettre .lettre .footer-lettre .signature-nom{
  margin-top: 0.5em;
  text-align: right;    /* nom + date bien à droite */
  font-style: italic;
}

#contenu .citationlettre .lettre .entete-gauche,
#contenu .citationlettre .lettre .entete-droite{
  flex: 1;
}

#contenu .citationlettre .lettre .entete-centre{
  flex: 0 0 auto;
  text-align: center;
  padding: 0 10px;
}

#contenu .citationlettre .lettre .entete-droite{
  text-align: right;
}

/* “Monsieur le Directeur,” centré façon manuscrit */
#contenu .citationlettre .lettre .salutation-centree{
  text-align: left;
  margin-left: 45%;
  margin-bottom: 40px; 
  font-style: italic;
  font-size: 1.25em;
}

#contenu .citationlettre .lettre .salutation-centree + p {
  text-indent: 10em;
}
#contenu .citationlettre .lettre p {
  margin-top: 0;
  margin-bottom: 0.5em;
}
#contenu .citationlettre .lettre p.paragraphe {
  margin-bottom: 1.4em;
}


/*-----------------------------------------------------------------------------------------*/
/*Inventaire des Rapports de la Première Guerre mondiale 14-18
de l'Archidiocèse de Malines-Bruxelles et des Diocèses de Bruges, Gand, Liège et Tournai.*/
/*questionaire*/
#contenu .citationlettre .question p:last-child {
  padding-left: 3ch;
}
/*------------*/

/*lettre 14-18*/



/*-----------------------------------------------------------------------------------------*/
  
  /*liens sources et documents*/
  #contenu .citation-header {
    display: flex;
    justify-content: flex-end;
    padding-right: 0.8em;
    gap: 0.6em;
  }
  #contenu .citation-header img {
    display: block;
  }
/* Quand .citation-header est DANS un H1 : icônes à côté du titre */
#contenu h1{
  /*display: flex;*/
  justify-content: center;   /* garde l’ensemble centré */
  align-items: center;
  gap: 12px;                 /* espace entre titre et icônes */
}

/* La citation-header, dans un H1, ne doit plus se coller à droite */
#contenu h1 .citation-header{
  display: inline-flex;
  justify-content: flex-start;
  padding-right: 0;          /* annule ton padding-right actuel */
  gap: 6px;                  /* espace entre les 2 icônes */
}

/* Optionnel : évite que le span prenne trop de place en cas de titre long */
#contenu h1 .h1-title{
  display: inline;
}
/* */


#contenu .citationlettre table {
  border-collapse: collapse;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 5em;
}
#contenu .citationlettre th,
#contenu .citationlettre td {
  text-align: center;
}


#contenu .citationlettre table caption {
  padding: 2em;
}


  #contenu .citation2 {
    width:480px;
    text-align: left;
    font-family: "Times New Roman", verdana, serif ;
    font-style:italic;
    font-size: 90%;
    font-weight: bold;}
  #contenu .retrait h2 {text-decoration:underline;font-size:medium;}


  #contenu #lieuxdits {margin-left:80px;margin-right:5%;}
  #contenu #lieuxdits h1 {
    font-weight: normal;
    color : #000000;
    text-align:left;
    list-style-type:none;
    font-family: "Times New Roman", verdana, serif ;
    font-size: 100%;
    text-decoration:underline;
    margin-top:5px;
    margin-bottom:0px;
    margin-right:5px}
  #contenu #lieuxdits li>ul>li:last-child{
    font-size: 90%;
    font-family: "Times New Roman", verdana, serif ;
    text-decoration:none;
    margin-top:5px;
    list-style-type: none;
    margin-left: 10px;}
  #contenu #lieuxdits li > ul {
    padding-left: 0;
    margin-left: 0;
    list-style: none;}

  #contenu .centrer {margin:auto;text-align: center;}
  #contenu  q {font-style:italic;}
#contenu .retrait q {font-weight: bold;font-style:italic;}
    .centrer {margin:auto;text-align: center;}
    .centrer a {padding-left: 50px;padding-right: 50px;}
    .centrer a img {padding-left: 0px;padding-right: 0px;}
    .gauche {margin-left:150px;}
    .gauche img {padding-right: 50px;vertical-align:middle;}
    .picpos1 {margin-left:150px;}
    .floatleft {float:left;margin-left:150px;margin-right:10px;}
    .floatleft2 {float:left;margin-left:60px;margin-right:10px;}
    .floatleft3 {float:left;margin:3px 10px 2px 16px;}
    .floatright {float:right;margin-left:50px;margin-right:50px;}
    .listebombe  li{margin-right: 8px;}

/* ==========================================================
   LISTES & SOMMAIRES
   ========================================================== */

    .listebourgmestre {margin-left:60px;}
    .listebourgmestre h2 {text-decoration:underline;font-size: 85%;margin-top:15px;}
    .listebourgmestre ul {font-size: 90%;margin:10px;}
    .listebourgmestre ul li{margin-top:8px;}
    .listebourgmestre ul li ul li {text-decoration:none;list-style-type:none;margin-top:8px;position:relative;padding-left:1.2em;}
  .listebourgmestre ul li ul li::before {content:"-";position:absolute;left:0;}

    .listebourgmestre span {text-decoration:underline;list-style-type:none;}
.listebourgmestre span.tooltip {
    text-decoration: none;
}

/* ==========================================================
   GALERIES & IMAGES (Highslide + alignements)
   ========================================================== */

  #contenu .highslide-gallery img {border: none;}
  .highslide-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center; /* centrage vertical dans chaque ligne */
    padding: 20px;
    box-sizing: border-box;}

  .highslide-gallery .item {
    display: flex;
    flex-direction: column;
    justify-content: center; /* centre l’image et la légende verticalement dans la "cellule" */
    align-items: center;
    width: calc((100% - 4 * 20px) / 5);
    text-align: center;}

  .highslide-gallery .item img {
    width: 100%;
    height: auto;}


  #sommaire {text-align: center; font-family: "Times New Roman", verdana, serif ;}
  #sommaire p {text-align: center;font-size:100%;margin:5px;}


  .highslide-figure {margin: 0;padding: 0;border: none;}
  .highslide-figure a img {border: none;}
  .highslide-figure figcaption {
    font-size: small;
    font-style: italic;
    margin-top: 1px;
    margin-bottom : 25px;
    font-size:80%;
    margin-left:8%;
    margin-right:5%;}
  #contenu .citation {
    width:250px;
    text-align: left;
    font-family: "Times New Roman", verdana, serif ;
    font-style:italic;
    font-size: 90%;
    font-weight: bold;}

/* ==========================================================
   INFO-BULLES (définitions)
   ========================================================== */

/* Mots avec définition */
.def {
  border-bottom: 1px dotted #555;
  cursor: help;
  position: relative;
}

/* Bulle */
.def .tooltip {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9em;
  max-width: 260px;
  min-width: 160px;
  text-align: center;
  line-height: 1.4;
  white-space: normal;
  z-index: 999;
  display: none;
}

.contact {
  display: inline-block;
  margin: 10px auto 0 auto;
  text-align: center;
  font-family: "Times New Roman", verdana, serif;
  font-size: clamp(12px, 3.5vw, 16px);
  white-space: nowrap;
}




.rcree{margin-left: 35px;}
.rcree-title{
  font-size: 110%;
  font-weight: bolder;
  text-decoration: underline;
}
.rcree .icone {
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  vertical-align: middle;
  margin-left: 6px;
  display: inline-block;
  cursor: pointer;
  
}




#contenu #lieuxdits .map-icone,
#contenu #lieuxdits .map-icone:visited,
#contenu #lieuxdits .map-icone:hover {
  text-decoration: none !important; /* enlève le souligné sur l’icône */
  display: inline-block;
  margin-left: 6px;
}












    /* Mobile styles */


/* ==========================================================
   RESPONSIVE / MOBILE
   ========================================================== */

    @media (max-width: 915px) {

    /* Mobile Menu */
    #hamburger {
      display: none;
      background: none;
      background-image:url(../pics/pagebook.jpg);
      border: none;
      font-size: 1.5em;
      padding: 0.5em;
      cursor: pointer;}
      #hamburger {
        display: block;
        position: absolute;
        top: 5px;
        left: 85%;
        z-index: 1000;
        background-color: white;
        border: none;
        border-radius: 4px;
        background-image:url(../pics/pagebook.jpg);	}
  #layer1 {POSITION: absolute; TOP: 0px;LEFT: 0px; width: 84%; /* clip: rect(); supprimé car vide */ text-align: center;left:8px;}
  #layer2 {POSITION: absolute; TOP: 0px; LEFT: 0px; text-align: center; width: 80%;left:8px; /* clip: rect(); supprimé car vide */}

  #bann {
    position:fixed;
    right:0px;
    left:0px;
    top:0px;
    height:80px;
    font-family: "Times New Roman", verdana, serif ;
    background-color:white;
    background-image:url(../pics/pagebook.jpg);
    font-size:70%;
    }
      #menu {
        display: none;
        position: absolute;
        top: 5em;
        right: 0;
        width: 200px;          /* largeur fixe pour le menu */
        left: auto;
        background-color: #f2f2f2;
        z-index: 999;
        padding: 1em;
        box-sizing: border-box;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      }
      #menu.open {
        display: block;
        z-index: 1000;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        /*  background-image:url(../pics/pagebook.jpg);	 */
        background-image:
        linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2)),
        url(../pics/pagebook.jpg);
      }
      #zone-clic-mobile {
        position: fixed;
        top: 0;
        right: 0;
        width: 60px;       /* largeur de la zone cliquable */
        height: 100vh;     /* toute la hauteur de l'écran */
        z-index: 1000;
        background-color: transparent;
        cursor: pointer;
        display: none;     /* visible seulement en mobile */
      }


      /* Affiche la zone en mode mobile */


    /* Mobile CONTENU */

      #contenu {
        top: 7%;
        left: 0%;
        z-index: 900;}
#contenu h1 {font-family: Cinzel, serif ;	text-align:center; color: #0033cc;	font-size: 32px; font-weight: bold;	text-decoration:underline;margin-bottom:50px}
#contenu ul h1,
#contenu li h1 {
  display: block;
  justify-content: normal;
  align-items: normal;
}
#lieuxdits h1 {
  display: block;
  justify-content: normal;
  align-items: normal;
  text-align: left;
}

      /*#contenu h1 {
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        color: #0000FF;
        font-size: 32px;
        font-weight: bold;
        text-decoration: underline;
        margin-bottom: 50px;}*/
      #contenu p {margin-left:8%;margin-right:5%;font-size:90%;text-align:justify;}
      #contenu .retrait {margin-left: 5%;}
      #contenu #lieuxdits {margin-left:5%;margin-right:5%;}
      #contenu #lieuxdits h1 {
        font-weight: normal;
        color : #000000;
        text-align:left;
        list-style-type:none;
        font-family: "Times New Roman", verdana, serif ;
        font-size: 100%;
        text-decoration:underline;
        margin-top:5px;
        margin-right:5%}
      #contenu #lieuxdits li>ul>li:last-child{
        font-size: 90%;
        font-family: "Times New Roman", verdana, serif ;
        text-decoration:none;
        margin-top:5px;
        list-style-type: none;
        margin-left: 10px;}
      #contenu #lieuxdits li > ul {
        padding-left: 0;
        margin-left: 0;
        list-style: none;}
      #contenu > .gauche {margin-bottom:25px;margin-left:25px;text-align: center;}
      #contenu > .gauche img {
        display: inline-block;
        vertical-align: middle;
        padding-right: 10px;}

  #contenu .centrer img {margin-left:8%;width: 60%;height: auto;	}

  #sommaire {text-align: center; font-family: "Times New Roman", verdana, serif ;}
  #sommaire p {text-align: center;font-size:100%;margin:5px;}

  #contenu #sommaire .centrer img {margin-left:0%;}
  #contenu #sommaire .centrer img { max-height: 247px;
    max-width: 100%;
    height: auto;
    width: auto;}
  #contenu .centrer {margin:auto;text-align: center;}
  #contenu .centrer a {padding-left: 0px;padding-right: 20px;}
  #contenu .centrer a img {padding-left: 0px;padding-right: 0px;}

  #contenu .chanson {font-family: "Times New Roman", verdana, serif ;width: 100% ; max-width:500px; margin: auto;border: none;}
  #contenu .chanson td {text-align: center;font-size: 80%;}
  #contenu .chanson h3 {text-decoration: none;margin-bottom: 2px;margin-top: 4px;}

  #contenu blockquote {font-style:italic;margin-left:13%;margin-right:8px;font-size:90%;text-align:justify;}

      /*.floatleft {float:left;margin-left:9%;margin-right:10px;margin-bottom:2px;}	*/
      .picpos1 {
        float: none;
        text-align: center;
        margin: 20px auto;}
      .picpos1 img {
        width: 50%;
        height: auto;}

      .highslide-gallery .item {width: calc((100% - 2 * 20px) / 3);}
      	#contenu .epitaphe {
        width: calc(100% - 100px);
        margin: 10px 0 0 50px;
        background-size: 100% auto;
        font-size: 85%;
        font-family: Georgia, serif; }

      	#contenu .epitaphee td {
        font-size: 14px;
        padding: 8px;
        word-break: break-word;
    text-align:center;
    vertical-align:top; }

#contenu table.joueurs {margin-left:3%;}
#contenu table.joueurs td {font-size: 80% !important;}


  #contenu .retrait .citation2 {
    width:80%;
    margin-left: 8%;
    /*text-align: left;*/
    font-family: "Times New Roman", verdana, serif ;
    font-style:italic;
    font-size: 80%;
    font-weight: bold;}
  #contenu .retrait .citation {
    width:80%;
    margin-left: 8%;
    /*margin-right:8%;*/
    /*text-align: left;*/
    font-family: "Times New Roman", verdana, serif ;
    font-style:italic;
    font-size: 80%;
    font-weight: bold;	}
  #contenu .retrait .citation2 p {margin-left: 0px;}
  #contenu  .citationdoc1{	font-weight:normal;
    text-decoration:none;
    margin-left:25px;
    margin-right:20px;
    text-align:justify;
    font-family: Arial, Helvetica, sans-serif;}
  #contenu  .citationdoc1 h4 {font-size: 85%;margin-left:8%;margin-right:100px;font-weight: bold;}
  #contenu  .citationlettre{
    background-image:url('../pics/parchemin2.jpg');
    margin-left:3%;
    margin-right:3%;
    text-align:justify;
    font-weight:normal;
    font-family: Arial, Helvetica, sans-serif;
    padding-top:20px;
    padding-bottom:20px;}
  #contenu  .citationlettre p {font-size: 95%;}

  .listebourgmestre {margin-left:8%;margin-right: 5%;}
  .listebourgmestre h2 {text-decoration:underline;font-size: 85%;margin-top:15px;}
  .listebourgmestre ul {font-size: 90%;margin:10px;}
  .listebourgmestre ul li{margin-top:8px;}
  .listebourgmestre ul li ul li {text-decoration:none;list-style-type:none;margin-top:8px;position:relative;padding-left:1.2em;}
  .listebourgmestre span {text-decoration:underline;list-style-type:none;}
.listebourgmestre span.tooltip {
    text-decoration: none;
}

  #contenu .retrait h2 {margin-left:3%;text-decoration:underline;font-size:medium;}


/*IMAGES*/


.floatleft {float: left; margin-left: 8% ; }
.floatleft .highslide-figure.paysage-1 img {max-width: 45vw; height: auto; display: block; }
.floatleft .highslide-figure.portrait-1 img {max-width: 45vw; height: auto; display: block; }

.floatleft2 {float: left; margin-left: 8% ; }
.floatleft2 .highslide-figure.paysage-1 img {max-width: 45vw; height: auto; display: block; }
.floatleft2 .highslide-figure.portrait-1 img {max-width: 45vw; height: auto; display: block; }


/* Version 1 : 1 portrait par ligne */
  .highslide-figure.portrait-1 a img {max-width: 40%;height: auto;}


/* Version 2 : 2 portraits par ligne */
  .highslide-figure.portrait-2 a img {max-width:30%;height: auto;}


/* Version 3 : 1 paysage par ligne */
  .highslide-figure.paysage-1 a img {max-width: 60%;height: auto;}


/* Version 4 : 2 paysages par ligne */
  .highslide-figure.paysage-2 a img {max-width: 30%;height: auto;}


}

@media (max-width: 768px) {
  #zone-clic-mobile {
        display: block;
        }

  .texte-pc {
    display: none;
  }
  .texte-mobile {
    display: block;
  }
}