/** ------------------------------------------------------*/
/** CSS POUR CONTENANT DES PAGES DÉBUT                    */
/** 2021-11-12                                            */
/** 2022-11-08 MIS ENSEMBLE CSS CONTENU ET ARTICLES       */
/** 2022-11-08 AJOUTÉ DANS ve2cev-contenu&articles.css    */
/** 2024-01-11 CHANGER POUR content: "Date de publication */
/** 2025-01-07 AJOUTER MonArticleCourt                    */
/** 2025-02-07 MODIFIER AFFICHAGE DES LIENS AVEC _BLANK   */
/** ----------------------------------------------------- */
@charset "UTF-8";

/**VOIR CONTENANT PRIMAIRE=1100PX MENU=150PX RESTE=>950PX */
/**PREND LE RESTE DE LA PAGE */
#pages_contenant {
  width: auto;
  overflow: hidden;
  min-height: 600px;
  border-style: solid;
  /** HAUT,DROIT,BAS,GAUCHE */
  padding: 3px 5px 10px 5px;
  /** POUR AFFICHER UNE BORDURE DE SÉPARATION À GAUCHE */
  /** haut, droit, bas, gauche */
  border-width: 0px 0px 0px 3px;
  border-color: var(--VarMonBleuPale);
}

/***** DEBUT FORMATAGE DU CONTENU DES PAGES ****/

/** TITRE DE CHAQUE PAGE    */
/** NORMALEMENT AVEC TAG h1 */
.TitreDesPages  {
  /** object-fit: contain; */
  background-color: var(--VarMonBleuMedium);
  color: var(--VarMonBlanc);
  text-align: center;
  font-size: 2.2rem;
  font-weight: bold;
  width: auto;
  height: auto;
  border: 0px solid var(--VarMonNoir);
  border-radius: 6px;
  /** padding: 0px; */
  /** padding-bottom: 4px; */
  /** HAUT, DROIT, BAS, GAUCHE */
  /** margin: 2px 5px 2px 2px; */
  margin-top: 4px;
  /** ombre #666666 gris #4f4f4f gris foncé */
  /* box-shadow: 6px 6px 10px #4f4f4f; */
  box-shadow: 3px -2px 9px 1px grey;;
}

.TitresDesPages img {
  background-color: var(--VarMonBlanc);
  padding: 0px;
  width: auto;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  text-align: center;
}

/** TITRE DE CHAQUE PAGE */
/** NORMALEMENT AVEC TAG h2 */
.SousTitresDesPages {
  /** POUR QUE LA VALEUR WIDTH FONCTIONNE AVEC SPAN */
  display: block;
  /** object-fit: contain; */
  background-color: var(--VarMonBleuMedium);
  color: var(--VarMonBlanc);
  text-align: left;
  width: auto;
  height: auto;
  font-size: 1.5rem;
  font-weight: bold;
  /** pour laisser une marge à gauche */
  /** HAUT, DROIT, BAS, GAUCHE */
  padding: 2px 0px 2px 10px;
  border: 0px solid var(--VarMonBleuMedium);
  border-radius: 6px;
  /** ombre #666666 gris #4f4f4f gris foncé */
  /* box-shadow: 6px 6px 10px #4f4f4f; */
  box-shadow: 3px -2px 9px 1px grey;
}

.SousTitresDesPages img {
  background-color: var(--VarMonBlanc);
  padding: 0px;
  width: auto;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  text-align: center;
}

/**********************
  2025-01-18
  J'AI DÉPLACÉ TOUTES LES DÉFINITIONS DE STYLE
  PERSONNALISÉES VERS 1-DebutDesPages.css
**********************/


/** --------------------------------------------- */
/** CSS POUR CONTENANT DES PAGES FIN              */
/** --------------------------------------------- */

/** ------------------------------------------------------------------ */
/** CSS ARTICLES - POUR STANDARDISER PUBLICATIONS DES ARTICLES - DÉBUT */
/** 2021-11-12 Nouvelle facon avec date sous le titre                  */
/** 2022-11-08 AJOUTÉ DANS ve2cev-contenu&articles.css                 */
/** ------------------------------------------------------------------ */
/**BOITE PRINCIPALE DE L'ARTICLE*/

.ve2cev_article {
  /** object-fit: contain;   */
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  /** COULEUR DE FOND - SI PAS SPÉCIFÉE, C'EST L'IMAGE DE FOND QUI S'AFFICHE */
  /* background-color: var(--VarMonGrisClair); */
  /** HAUT, DROIT, BAS, GAUCHE */
  /** margin: 0px 2px 0px 2px; */
  /**COMMENTÉ 2023-05-23 */
  /** border: 3px ridge #0FF; */
  border-radius: 6px;
  box-shadow: 3px 3px 6px #666666;
}

/**ENTETE DE L'ARTICLE*/
.ve2cev_article header {
  display: grid;
  grid-template-columns: 50% 50%;
  /* padding: 1px 4px 1px 1px; */
  padding: 0px;
  margin: 0px;
}

/*** TITRE - ENTETE DE L'ARTICLE ***/
/* N'IMPORTE QUEL TAG QUI VIENT EN PREMIER */
/* *:first-child OU :first-child SEMBLE EQUIVALENT
/* .ve2cev_article header > :first-child */
.ve2cev_article header > *:first-child
{
  grid-row: 1; /* TITRE SUR LA PREMIÈRE LIGNE DE L'ENTÊTE */
  /* UTILISE TOUTES LES COLONNES */
  grid-column: 1 / -1;
  color: var(--VarMonBlanc);
  background-color: var(--VarMonBleuMedium);
  width: 100%;
  height: auto;
  font-size: 1.2rem;
  font-weight: bold;
  /** HAUT, DROIT, BAS, GAUCHE */
  /** margin: 1px 1px 0px 1px; */
  margin: 0px;
  /** margin-bottom: -2px; */
  padding:4px 4px 4px 6px;
  border-width: 0px;
  /** boder-style: none; */
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

/* TOUS LES AUTRES DIV DANS HEADER */
.ve2cev_article header div {
  grid-row: 2;
  color: var(--VarMonNoir);
  background-color: var(--VarMonJaunePale);
  font-size: .9rem;
  padding: 2px;
  margin: 0px;
  border-width: 1px;
  border-color: var(--VarMonGris);
  border-style: none none dotted none;
}

/** AJOUTER Date de publication EN AVANT */
.ve2cev_article header .date_pub::before {
  content: "Date\00a0 de\00a0publication: ";
}

/** AJOUTER Catégorie EN AVANT */
.ve2cev_article header .categorie::before {
  content: "Catégorie\00a0: ";
}

/**LA PARTIE QUI CONTIENT LE TEXTE */
.ve2cev_article .article_contenu {
  /** color:#A00; */ /**ON PEUT DONNER UNE COULEUR AU TEXTE */
  /** font-size: 100%; */
  /** line-height: 1.2; */
  /** background-color: var(--VarMonBlanc); */
  line-height: inherit;
  width:auto;
  margin-left: 5px;
  margin-right: 5px;
  /** HAUT, DROIT, BAS, GAUCHE */
  /** padding: 2px 5px 2px 5px; */
}

/** .ve2cev_article .article_contenu p {   margin: 6px; } */

.ve2cev_article .article_contenu p:first-child {
  /** padding-top: 0px;*/
  margin-top: 5px;
}

.ve2cev_article .article_contenu p:last-child {
  /** padding-bottom: 0px; */
  margin-bottom: 5px;
}

/** LE PIED DE PAGE DE L'ARTICLE */
.ve2cev_article footer {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-column-gap: 10px;
  /* padding: 1px 4px 1px 1px; */
  margin: 0px;
  padding: 0px;
  font-size: .9rem;
  background-color: var(--VarMonJaunePale);
  border-width: 1px;
  border-color: var(--VarMonGris);
  border-style: dotted none none none;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
/** --- ------------------------------------------------------------ */
/** CSS ARTICLES - POUR STANDARDISER PUBLICATIONS DES ARTICLES - FIN */
/** ---------------------------------------------------------------- */

/** --- -------------------------------------------------- */
/** 2025-01-07 - CSS ARTICLE COURT - POUR LA PAGE INDEX    */
/** ------------------------------------------------------ */
  .MonArticleCourt {
    margin: 10px 2px 10px 2px;
    /* margin: 5px; */
    padding: 0px;
    /* background-color: Ivory; */
    /* background-color: white; */
    background-color: #F0F0F0;
    border-radius: 0.5rem;
    /* margin-bottom: 15px; */
    border: 2px dotted grey;
    border: 1px solid grey;
  }

  .MonArticleCourt > header {
    /* margin-bottom: 0px; */
    margin: 0px;
    padding: 0px 5px 0px 5px;
    border-radius: 0.5rem;
  }

  .MonArticleCourt > header > .entete-titre {
    /* color: blue; */
    margin-bottom: 0;
    margin: 0px;
    padding: 0px;
    color: DimGray;
    /* line-height: 1; */
    /* background-color: #f8f8f8; */
  }

  .MonArticleCourt > header > .entete-ligne-1 {
    width: 100%;
    text-align: left;
  }

  .MonArticleCourt > header > .entete-ligne-1 > .PartieGauche {
    /* Aligne le texte et les éléments à gauche */
    text-align: left;
    /* line-height: 1.2; */
    font-size: .9em;
    /* font-style: italic; */
    color: white;
    background-color: SkyBlue;
    margin: 0px;
    padding: 0px 5px 0px 5px;
    border-radius: 3px 0 0 0;
  }

  .MonArticleCourt > header > .entete-ligne-1 > .PartieDroite {
    /* line-height: 1.2; */
    font-size: .9em;
    font-style: italic;
    color: grey;
    margin-left: 20%; /* Ajoute un espace flexible entre les deux éléments */
  }

    .MonArticleCourt > .contenu {
      /* margin: 5px; */
      padding: 0px 5px 0px 5px;
      /* line-height: 1; */
    }

    MonArticleCourt > a.lien {
     font-size: 2em;
    }

    .MonArticleCourt > .contenu p {
      /* margin:3px; */
      /* margin-bottom: 5px; */
      margin: 5px 0px 5px 0px;
    }

    .contenu p:first-child {
      margin-top: 0;
    }

    /*
    .contenu p:last-child {
      margin-bottom: 0;
    }
    */

    /* footer { */
      /* font-size: 0.8em; */
      /* color: #555; */
      /* border-top: none; */
      /* padding-top: 5px; */
      /* background-color: #f2f2f2; */
      /* Arrondi le coin inférieur gauche */
      /* border-bottom-left-radius: 10px;  */
      /* Arrondi le coin inférieur droit */
      /* border-bottom-right-radius: 10px;  */
    /* } */


    footer {
      font-size: 0.8em;
      color: grey;
      border-top: none;
      /* padding-top: 5px; */
      /* padding-left: 5px; */
      /* background-color: lightgrey; */
      /* border-bottom-left-radius: 10px; */
      /* border-bottom-right-radius: 10px; */
      /* Hauteur fixe */
      /* height: 30px;  */
      /* Centrage vertical */
      /* line-height: 30px;  */
      /* text-align: center; */ /* Centrage horizontal */
    }

    /* ligne de séparation avant */
    .SéparationAvant {
      border: 0;
      border-top: 1px dotted grey;
      margin: 0;
      margin-top: 10px;
    }

    /* ligne de séparation après*/
    .SéparationAprès {
      border: 0;
      border-top: 1px dotted grey;
      margin: 0;
      margin-bottom: 10px;
    }

   /* ligne de séparation après*/
    .séparation-hr {
      border: 0;
      border-top: 1px dotted grey;
      padding: 0px;
      margin: 0px;
    }
/** --- --------------------------------------------------- */
/** 2025-01-07 - CSS ARTICLE COURT - FIN                    */
/** ------------------------------------------ ------------ */

/** CSS POUR EFFETS SPÉCIAUX   */
/** -------------------------- */
/** 2025-02-04 - METTRE EN VERT LES LIENS QUI S'OUVRENT DANS UNE AUTRE PAGE */
a[target="_blank"] {
  color: green;
}

/** 2025-02-04 */
/** METTRE EN INDIGO LES LIENS QUI S'OUVRENT DANS UNE AUTRE PAGE LORSQU'ON PASSE DESSSUS */
a[target="_blank"]:hover {
  color: indigo;
  text-decoration: underline; /* Souligné */
  text-decoration-thickness: 2px; /* Épaisseur du soulignement à 2px */  
  /* font-weight: bold; */
}

/** 2025-02-04 - AJOUTER UN CADRE VERT POUR LES LIENS IMAGES QUI S'OUVRENT DANS UNE AUTRE PAGE */
a[target="_blank"] img {
  border: 2px solid green; /* Changez la couleur de la bordure selon vos préférences */
}

.blinking{
    animation: blinkingText 1.2s step-start infinite;
    color: var(--VarMonRouge);
    background-color: var(--VarMonJaunePale);
}
@keyframes blinkingText {
  50% { opacity: 0; }
}

/**2022-04-03 - DÉLAI LORSQUE LA SOURIS N'EST SUR L'IMAGE*/
.grossir {
  transition: transform .4s;
}

/** POUR GROSSIR UNE IMAGE LORSQUE ON PASSE LA SOURIS DESSUS */
/** 2020-04-03 CETTE FAÇON EST MIEUX */
.grossir:hover {
  position:relative;
  top: -80px;
  /** left:20%; */
  transition: transform .4s;
  transform-origin: -2% 50%;
  transform: scale(2);
  /** animation-delay: 2s; */
  /** transition-delay: 1s; */
  /** transition-duration: 3s; */
}

/** 2022-04-03 POUR AFFICHER DES IMAGES PLUS GRANDES EN PASSANT DESSSUS */
/** METTRE <img class="thumbnail" ... POUR ACTIVER */
.thumbnail:hover {
    position:relative;
    top: -80px;
    /** top: -10vh; */
    left:2%;
    width:96% !important;
    height:auto;
    display:block;
    z-index:999;
}

/** POUR AFFICHER DES INFOBULLES 2020-05-28*/
/** DANS N'IMPORTE QUEL TAG <tag infobule="texte à afficher"> */
*[data-infobulle] {
  position: relative;
  /** text-decoration: underline; */
  cursor: help;
}

*[data-infobulle]:hover::before {
  content: attr(data-infobulle);
  display: block;
  position: absolute;
  /** overflow:  auto; */
  white-space:nowrap;
  font-size: .8rem;
  background-color: var(--VarMonJaune);
  padding: 2px;
  color: var(--VarMonNoir);
  left: -10px;
  top: -30px;
  /**min-width: 400px;*/
  border: 1px;
  border-color: var(--VarMonNoir);
  border-style: solid;
  border-radius: 4px;
  /**visibility: visible;*/
  z-index: 99;
}

/** 2024-04-02 - Voir www.devquarters.com/how-do-you-create-a-tooltip-in-css */
/** <div class="tooltip">Hover over me<span class="tooltip-text">I am a tooltip</span></div> */
.tooltip {
  position: relative;
  display: inline-block;
  /* border-bottom: 1px dotted black; */
  color: var(--VarMonMarron);

}

.tooltip .tooltip-text {
  visibility: hidden;
  width: 120px;
  background-color: var(--VarMonBleuMedium);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.9s;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}


/** ----------------------------- */
/** FIN CSS POUR EFFETS SPÉCIAUX  */
/** ----------------------------- */