/*

*/

/* Terme technique mise en exergue */
span.tt-exergue {
  font-family: 'Arial Narrow', Arial, Verdana, "Helvetica Neue", Helvetica;
  font-weight:bold;
  font-size:1.07em;
  font-variant:all-small-caps;
  font-style:italic;
}

.in-cadre {
  border: 1px solid #CCC;
  padding: 2em
}
blockquote {
  color: #464646;
  border-left: 3px solid #DDDDDD;
  padding-left: 0.6em;
  font-style: italic;
}
/*
  --- LES LISTES DE LIENS HORIZONTAUX ---
*/
.horizontal_links {

}
.horizontal_links a,
.horizontal_links button
{
  margin-right:0.7em;
}
/*
  --- EXPLICATIONS ---
*/
.explication {
  font-size:0.85em;
  font-style:italic;
}
/*
*/
div.row-flex {
  display:flex;
  margin-top:0.6em;
}
div.row-flex span.libelle {
  /* flex:1; NON, C'EST divRow QUI DOIT LE DÉFINIR */
}
div.row-flex span.value {
  flex:2;
}
/*
*/
span.libelle {
  display:inline-block;
}
.libelle {
  color:#555555;
  font-size:0.86em;
  font-family:Arial,Helvetica,Geneva;
  /* font-style:italic; */
  letter-spacing:0.4px;
}
@media only screen and (min-width: 767px) {
  /* ÉCRAN */
  .libelle {padding:0 12px;}
}
@media only screen and (max-width: 767px) {
  /* SMARTPHONE */
  .libelle {padding:0;}
}

/*
  Pour un div contenant un message qui doit se trouver tout seul (ou presque)
  dans la page (section#content)
*/
div.only-message {
  margin:3% 5%;
  padding:4em;
  font-size:1.2em;
  text-align:center;
  max-width:var(--text-max-width);
  box-sizing:border-box;
}

/*
  Les cadres-liens qui permettent de rejoindre les grosses parties dans
  chaque section
*/
.goto {
  position:relative;
  padding:1em 1.3em;
  text-align:center;
  margin-top:1em;
  border:1px solid #DDDDDD;
}

@media only screen and (min-width: 767px) {
  
  /* ÉCRAN */
  
  .goto {
    display:inline-block;
    width:200px;
    min-width:200px;
    max-width:200px;
    margin-right:12px;
    font-size:1.1em;
  }
}
@media only screen and (max-width: 767px) {
  
  /* SMARTPHONE */
  
  .goto {
    display:block;
    margin-right:12px;
    margin-right:12px;
    font-size:0.9em;
  }
}



.goto.empty {visibility:hidden;}

.goto {
  font-family:Geneva, Helvetica, Arial;
  font-variant:all-small-caps;
  letter-spacing:0.2px;
}

/* Couleur du fond (3 : normal, simple et exergue) */
.goto:not(.exergue):not(.simple) {
  background-color: rgba(151, 209, 230, 1);/*rgba(174, 217, 210, 1);*/
}
.goto.simple {
  background-color:transparent;
}
.goto.exergue {
  background:linear-gradient(to right, #83bfea, #2484bf);
  /*background:linear-gradient(to right,#74babc,#397d7f);*/
}

/* Couleur du lien = texte */
.goto:not(.exergue) {
  color: #555555;
}
.goto.exergue {
  color: white;
}
/* Survol du lien */
.goto:hover { transition:0.1s; }
.goto:not(.exergue):hover {
  color:#000000;
}
.goto.exergue:hover {
  color:#000000;
}


span.pastille {
  border-radius:2em;
  display:inline-block;
  padding:6px;
  background-color:red!important;
  color:white!important;
  font-size:0.65em;
  width:18px;
  text-align:center;
  cursor:pointer;
}
span.pastille a {
  all:unset!important;
}
span.pastille a:hover {all:unset!important}
/* Quand la pastille est dans un bloc goto */
.goto span.pastille {
  position:absolute;
  top:-8px;
  right:-8px;
  z-index:10;
}
.goto:hover span.pastille {
  background-color:red!important;
  color:white!important;
}

/*
  Les tables des matières flottantes dans la page
*/
div.float-tdm {
  position:relative;
  width:auto;
  max-width:50%;
  border:1px solid var(--contre-color-normal);
  /* border:1px solid var(--dark-color-normal); */
  border-radius:1em;
  padding:1em 2em;
  z-index:100;
}

@media only screen and (max-width: 768px) {
  /* SMARTPHONE */
  div.float-tdm {
    display:inline-block;
    margin-top:1em;
    margin-bottom:1em;
    float:unset;
    font-variant:small-caps;
    background-color:steelblue;
  }
  div.float-tdm > a {
    /* Pour que les liens soient assez espacés */
    margin:1.5em 0;
    color:white!important;
  }
}
@media only screen and (min-width: 768px) {
  /* LARGE */
  div.float-tdm {
    display:inline-block;
  }
  div.float-tdm:not(.left) {
    float:right;
    margin:3em 0 2em 3em;
  }
  div.float-tdm.left {
    margin:3em 3em 2em 0;
  }
}


div.float-tdm > a {
  display:block;
  color: var(--contre-color-normal);
}

div.float-tdm legend {
  position: absolute;
  top:-0.8em;
  left:3.5em;
  font-style:italic;
  /* color:var(--contre-color-normal); */
  /* color:var(--fond-discret-inner-object); */
  color:#999999;
  background-color:white;
  padding:0 4px;
  font-size:0.93em;
}

/*

  --- INFOS-BULLE ---

  Note : on les obtient par Tag.info_bulle("message")
  ou Tag.info_bulle("Message d'aide", {text:"le picto à voir"})
*/
span.info-bulle {
  position:relative;
}
span.info-bulle.picto {

}
span.info-bulle.texte span.info-bulle-clip {
  border-bottom:1px dashed var(--contre-color-normal);
}
span.info-bulle.texte span.info-bulle-clip:after {
  content: '💬';
  font-size:0.85em;
  margin-left:4px;
}
span.info-bulle.picto span.info-bulle-clip {
  opacity:0.5;
}
span.info-bulle span.info-bulle-clip + span.info-bulle-aide {
  position:absolute;
  display:block;
  width:200px;
  opacity:0;
  background-color:var(--contre-color-normal);
  color:white;
  left:0px;
  top:20px;
  text-align:left;
  padding:12px;
  border-radius:12px;
  font-size:0.85em;
}
span.info-bulle span.info-bulle-clip:hover {
  opacity:1;
  z-index:100;
}
span.info-bulle span.info-bulle-clip:hover + span.info-bulle-aide {
  opacity:1;
  transition: 0.35s;
  z-index:100;
}

/*
  --- LIGNES À CASES ---
*/
div.cases-line {
  display:inline-block;
  width:auto;
  border: 1px solid;
  font-size:0.75em;

}
div.cases-line > span {
  margin:0;
}
@media only screen and (min-width: 767px) {
  /* ÉCRAN */
  div.cases-line > span {
    padding: 0 24px;
  }
}
@media only screen and (max-width: 767px) {
  /* SMARTPHONE */
  div.cases-line > span {
    padding: 0 10px;
  }
}


div.cases-line span.case-libelle {
  background-color:#CCCCCC;
  border-left:1px solid;
  color:grey;
}
div.cases-line span.case-value {
  font-weight: 900;
  border-right:1px solid black;
}


/*
  --- DOCUMENT ---
*/
div.document {
  font-size:12.5pt;
  background-color:#EDF3F9;
  padding: 2em 3em;
  box-sizing: border-box;
}

div.document h1,
div.document h2,
div.document h3
{
  color:inherit;
  font-variant:all-small-caps;
  font-weight:normal;
}
div.document h1 {
  font-size:2.1em;
  margin-top:2em;
  margin-bottom:1em;
}
div.document > h1:nth-child(2),
div.document > h2:nth-child(2)
{
  margin-top:0;
}

div.document h2 {
  font-size:1.6em;
}
div.document h3 {
  font-size:1.2em;
}

/*
  Bloc encadrant une simulation
  Surtout utiliser en administration, avant l'envoi de messages par exemple
*/
div.simulation {
  border:1px solid green;
  padding:1em;
  background-color:#DFD;
  position:relative;
}
div.simulation:before {
  content:"SIMULATION";
  padding:2px 8px;
  position:absolute;
  font-size:10pt;
  background-color:green;
  color:white;
  top:10px;
  left:-40px;
}