.link0:link { text-decoration: none }
.link0:visited { text-decoration: none }
.link0:active { text-decoration: none }
.link0:hover { text-decoration: none }

/******************************************************************************************
variables générales : texte, finenames, tailles, fonts, couleurs
******************************************************************************************/

:root {

  --site-width-px: 900px; /* 900px  70% :largeur de la page (bandeau, menu du haut... */
  --top-menu-left-padding: 12px; /* décalage à droite du menu du haut */
 
  --left-width-px: 110px; /* largeur du menu à gauche */
  --left-padding-px: 10px; /* largeur du padding du menu à gauche */

  --right-content-padding: 15px; /* general padding of right contents */

  --right-content-title-color: #aabbbb; /* couleur d'un titre d'image pour pagegenerator */
  --right-content-color: #333355; /* pour le text de contenu dans right-content */
  --right-content-background: #ffffe0; /* background color of right content parts */
  
  --menu-text-color: #a8a8c0; /* menu text color */
  --menu-text-selected-color: #906890; /* menu text color when selected, si possible == color de balise <a> (plus haut) */

  --a-text-hover-color: #E06890; /* menus et liens : - quand la souris passe dessus */
  --a-text-color: #906890; /* liens : couleur de base */
  
  --top-menu-background: #f8e8c4; /* background du menu du haut */
  --left-menu-background: #f8f8e0; /* background du menu à gauche */
 
  --webmaster-color: #888888; /* $webmaster_color dans la ligne copyright */
  --bottom-color: #afafbf; /* pour le texte general de la ligne copyright */
  
  --window-background: #DDDDDD; /* background of what is outside the site display (right, left, below) */
  --error-message-color : #DD8888; /* pour erreurs de code et aussi dans les champs à remplir (contact.php) */
}

/******************************************************************************************
style par défaut des liens <a>
******************************************************************************************/

a {
  font-family: Arial, sans-serif;  
  font-size: 0.93rem; 
  font-weight: bold;              
  color: var(--a-text-color); 
  text-decoration: none; /* pas de soulignement */
}
a:visited { /* pour les liens déjà visités */
  color: var(--a-text-color); /* meme couleur que <a> simple */
}
a:hover { /* quand on passe la souris dessus */
  color: var(--a-text-hover-color); /* change la couleur au survol */
  text-decoration: none; /* pas de soulignement */
}

/******************************************************************************************
style des headers <h1>, <h2> et des citations <q>
******************************************************************************************/

h1 {
  font-size: 1.46rem;
  color: #887777;
  margin-top: 0rem;  
  margin-bottom: 0rem;
  text-align: left;
}

h2 {
  font-size: 1.16rem;
  font-weight: bold;
  color: #887777;
  margin-bottom: 0rem;
  text-align: left;
  font-style: italic;
}

q {
  quotes: "«" "»" "‹" "›";
  font-size: 1.0rem;
  color: #604040;
  font-weight: lighter;
  font-style: italic;
}
q::before { content: open-quote "\00A0"; }
q::after { content: "\00A0" close-quote; }


/******************************************************************************************
body : top level style, s'applique partout
******************************************************************************************/

body {
  margin: 0;
  background-color: var(--window-background); /* pour la zone externe à la page remplie */
  font-family: Arial, sans-serif;
  overflow-y: scroll; /* toujours réserver endroit de la scroll bar */
}

/******************************************************************************************
page-wrapper (contient top-banner, top-menu, main-container) :
******************************************************************************************/

.page-wrapper {
  display: table;
  width: var(--site-width-px);
  margin: 0 auto;
}

/******************************************************************************************
top-banner (bandeau orange) : container :
******************************************************************************************/

.top-banner {
  width: var(--site-width-px);
  background-repeat: repeat-x;
  background-position: center;
  padding: 1px 0;
  text-align: left; /* center; */
}
.banner-text {
  font-family: papyrus, serif;
  font-weight: bold;
  color: #ddddee;
  font-size: 1.8rem; /* ++ taille plus grande */
  letter-spacing: 1px;
}

/******************************************************************************************
top-menu : container + sous-classes :
******************************************************************************************/

.top-menu {
  width: var(--site-width-px); /* ici et juste dessous, var(--left-width-px remplacé par 12px */
  padding: 3px 0px 3px var(--top-menu-left-padding); /* en haut, droite, bas, gauche */
  box-sizing: border-box; /* inclut le padding dans la largeur */
  background-color: var(--top-menu-background);
  text-align: left;
}
.top-menu a {
  text-decoration: none;
  margin: 0 5px;
  font-family: papyrus, serif;
  font-size: 1rem;
}
.top-menu a.menu-normal { color: var(--menu-text-color); font-weight: bolder; }
.top-menu a.menu-normal:hover { color: var(--a-text-hover-color) !important; font-weight: bolder; }
.top-menu a.menu-selected { color: var(--menu-text-selected-color); font-weight: bolder; }
.top-menu a.menu-selected:hover { color: var(--a-text-hover-color) !important; font-weight: bolder; }
.top-menu .separator { color: var(--menu-text-color); margin: 0 10px; } /* largeur du séparateur entre éléments */

/******************************************************************************************
main-container (contient left-menu et right-content) :
******************************************************************************************/

.main-container {
  display: flex;
  align-items: stretch; /* flex-start */
  width: 100%; /* prend toute la largeur de page-wrapper */
  box-sizing: border-box; /* inclut le padding dans le sizing */
}

/******************************************************************************************
left-menu pour le menu vertical à gauche : container + sous-classes :
******************************************************************************************/

.left-menu {
  flex: 0 0 var(--left-width-px); /* largeur fixe */
  min-width: var(--left-width-px);
  max-width: var(--left-width-px);
  overflow: hidden; /* coupe tout excédent */
  background-color: var(--left-menu-background);
  text-align: right;
  padding-top: 18px; /* en haut du menu de gauche (et sous le menu du haut) */
  padding-left: 0px;
  padding-right: var(--left-padding-px);
  box-sizing: border-box; /* inclut le padding dans le sizing */
  /***
  display: table-cell;
  width: calc(var(--left-width-px) - 2 * var(--left-padding-px));
  background-color: #05f5f5;
  vertical-align: top;
  text-align: right;
  padding: var(--left-padding-px);
  ***/
}
.left-menu a { /* cible les liens contenus dans left-menu */
  display: block;
  text-decoration: none;
  font-family: arial, sans-serif;
  font-size: 0.80rem; /* taille fixée ici */
  margin-bottom: 7px; /* ++ espace entre items */
}
.left-menu a.left-normal { color: var(--menu-text-color); font-weight: bold; }
.left-menu a.left-normal:hover { color: var(--a-text-hover-color) !important; font-weight: bolder; }
.left-menu a.left-selected { color: var(--menu-text-selected-color) !important; font-weight: bold; }
.left-menu a.left-selected:hover { color: var(--a-text-hover-color) !important; font-weight: bolder; }

/******************************************************************************************
right-content (sous-class de main-container) : container + sous-classes :
******************************************************************************************/

.right-content {
  width: 100%; /* prend tout le reste */
  color: var(--right-content-color);
  text-align: justify;
  text-justify: inter-character; /* justifié à droite ET à gauche */
  background-color: var(--right-content-background);
  padding: 0px;
  /**** box-sizing: border-box; /* inclut le padding dans le sizing */
}

/******************************************************************************************
right-contact (sous-class de main-container, pour contact.php) : container + sous-classes :
******************************************************************************************/

.right-contact {
  width: 100% ; 
  background-color: var(--right-content-background);
  border-collapse: separate; 
  box-sizing: border-box; /* inclut le padding dans le sizing */
  padding: calc(var(--right-content-padding) - 8px); /* corrige le padding interne du td */
}
.right-contact td {
  padding: 8px; /* espace interne dans les cellules */
  vertical-align: middle; /* aligne le texte au milieu */
}

/*************************************/

.contact-label {
    font-weight: bold;
    color: var(--right-content-title-color);
    vertical-align: middle;
    padding-right: 0px;
}
.contact-label.vcentered {
    display: flex;
    text-align: left; /* aligne le contenu de la cellule à gauche */

    flex-direction: column; /* empile verticalement */
    align-items: flex-start; /* centre verticalement */
    gap: 4px; /* espace constant entre input et erreur */
}

.contact-fb-img {
    display: block;
    max-width: 100%;
    height: auto;
}

/******************************************************************************************
error-message (en Javascript dans contact.php, et aussi index.php et pagegenerator.php...)
******************************************************************************************/

.error-message {
    font-weight: bold;
    color: var(--error-message-color);
    font-size: 0.9rem;
    display: none; /* caché par défaut dans l'écran de saisie de contact.php */
}
/*.right-content .error-message { /* mais si c’est utilisé dans right-content, */
    /* display: inline-block; /* alors forcer l'affichage, et padding aussi en haut */
    /*padding: var(--right-content-padding);*/
/*}*/
.error-message:not(:empty) {
    display: block;
}

/******************************************************************************************
sendmail (sous-class de right-content pour sendmail.php) : container
******************************************************************************************/

/***************** .right-sendmail { 
  flex: 1; *****************/ /* prend tout le reste */
/***************  padding: 0; 
  /*** box-sizing: border-box; /* inclut le padding dans le sizing */
/******************* }

/******************************************************************************************
pagegenerator (sous-class de right-content) : container + sous-classes :
******************************************************************************************/

.right-pagegenerator {
  padding: 0px;
  background-color: var(--right-content-background);
  font-family: Arial, sans-serif;
  font-size: 1rem;
  /* color: xxx ; héritée de .right-content */
}

/* Table principale */
/*. right-pagegenerator */ .right-pagegenerator-table {
  width: 100%;
  padding-bottom: var(--right-content-padding); /* ajout d'une séparation entre chaque element du contenu */
  border-collapse: separate;
  border-spacing: 0px;
  table-layout: auto; /* force chaque cellule à ne pas s'élargir selon le contenu */
}

/* Cellule */
/* .right-pagegenerator */ .right-pagegenerator-cell {
  padding: var(--right-content-padding);
  vertical-align: center; /* texte aligné au centre */
  /* color: #00FF00 !important; */
}

/* Cellule contenant l’image */
/* .right-pagegenerator */ .right-pagegenerator-cell-img {
  white-space: nowrap;  /* empêche que l’image soit compressée */
  width: auto;          /* laisse le navigateur décider la largeur */
}

/* Titre */
.right-pagegenerator-title {
  margin-bottom: 0.5rem; /* ajoute un petit spacing */
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--right-content-title-color); */
}

/* Contenu */
.right-pagegenerator-content {
  font-size: 1rem;
  /* color: xxx ; héritée de .right-pagegenerator */
}

/* Images */
.right-pagegenerator .right-pagegenerator-img {
  border: 0;
  max-width: 100%;
  height: auto; /* conserve le ratio naturel */
  display: block;
}

/******************************************************************************************
Copyright : containers :
******************************************************************************************/

.copyright {
  align-items: center;
  flex-wrap: nowrap; /* empêche le passage sur 2 lignes */
  width: 100%;
  max-width: 100%;
  padding: 0px 3px; /* haut+bas, droite+gauche, pour que le block ne touche pas les bords de la zone content à droite */
  box-sizing: border-box;
  overflow: hidden; /* empêche le débordement si trop large */
}

.copyright-left {
  font-family: Courier, monospace;
  font-size: 0.7rem;
  color: var(--bottom-color);
}

.copyright-webmaster {
    font-size: 0.75rem;
    color: var(--webmaster-color);
    text-decoration: none; /* jamais de soulignement */
}

.copyright-webmaster:hover {
    text-decoration: none; /* jamais de soulignement */
}

.copyright-right {
  font-family: Arial, sans-serif;
  font-size: 0.7rem;
  color: var(--bottom-color);
}

/******************************************************************************************
pour que la scroll bar qui apparait ou non ne décale pas la page a gauche ou à droite : 
( ne fonctionne pas toujours, par contre "overflow-y: scroll" dans .body fait le job )
******************************************************************************************/

/* html { */
/*  overflow-y: scroll; DOUBLON avec <body> /* règle universelle, fonctionne partout */
/*  scrollbar-gutter: stable; /* règle moderne, plus élégante si supportée */
/* } */