/**
 * styles commun pour les pages web.
 * @version 2024-07_initiale @author CETU-LaurentBEAUJEU
 * @version 2024-10_actuelle @author CETU-LaurentBEAUJEU
 * @licence Propriétaire CETU (Centre d'Etude des TUnnels)
*/


/*
=====   COULEURS DU SITE   =====
*/
:root {
  --colorBG: white;
  --colorFG: black;
  --colorErrorBorder: hsl(32, 100%, 35%);
  --colorError: hsl(0, 100%, 35%);
  --colorBg1: hsl(212, 100%, 85%);
  --colorBg2: hsl(212, 95%, 80%);
  --colorBg3: hsl(212, 90%, 75%);
  --colorFg1: hsl(212, 70%, 60%);
  --colorFg2: hsl(212, 65%, 50%);
  --colorFg3: hsl(212, 60%, 40%);
}


/*
=====   NORMALISATION BASIQUE  =====
*/
body, div, p, span, a, ul, li, table, thead, tbody, tr, th, td, form, fieldset, legend, label, input, select, option, textarea, button {
  box-sizing: border-box;
  background-color: transparent;
  color: inherit;
  font-family: arial, helvetica, sans-serif;
  font-size: 12pt;
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-align: left;
  vertical-align: baseline;
  word-spacing: normal;
  letter-spacing: normal;
  border-collapse: collapse;
}

html {
  scroll-behavior: auto;
}

td, th {
  padding: 1px 3px;
}


/*
###########################################
##   I N T E R F A C E   D U   S I T E   ##
###########################################
*/
/*
=====   BODY + GRILLE   =====
*/
body {
  background-color: var(--colorBG);
  color: var(--colorFG);
  min-width: 720px;
  max-width: 1600px;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}

.col-1 {
  grid-column: span 1
}
.col-2 {
  grid-column: span 2;
}
.col-3 {
  grid-column: span 3;
}
.col-4 {
  grid-column: span 4;
}
.col-5 {
  grid-column: span 5;
}
.col-6 {
  grid-column: span 6;
}

@media only screen and (max-width: 1280px) {
  .grid {
    grid-template-columns: 1fr;
  }
  [class*="col-"] {
    grid-column: span 1;
  }
}


/*
=====   ACTIF AU SURVOL/CLIC   =====
*/
.active-fg {
  color: var(--colorFg2);
}
.active-fg:hover {
  color: var(--colorFg1);
}
.active-fg:active {
  color: var(--colorFg3);
}

.active-bg {
  background-color: var(--colorBg2);
}
.active-bg:hover {
  background-color: var(--colorBg3);
}
.active-bg:active {
  background-color: var(--colorBg1);
}

.active-border {
  border-color: var(--colorFg2);
}
.active-border:hover {
  border-color: var(--colorFg1);
}
.active-border:active {
  border-color: var(--colorFg3);
}

.bouton {
  font-size: 0.8em;
  font-weight: bold;
  white-space: nowrap;
  letter-spacing: 0.1em;
  padding: 3px 8px 2px 8px;
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  text-decoration: none;
}


/*
=====   ERREURS   =====
*/
.error-fg {
  color: var(--colorError) !important;
}

.error-border {
  border-color: var(--colorErrorBorder) !important;
}

/*
=====   BANNIERE FIXE   =====
- #banner est en position sticky, car avec fixed le scroll horizontal ne fonctionne pas sur la bannière.
- #paddingtop permet de créer un espace en haut de #banner, car margin/padding-top génèrent un decalage lors d'un scroll vertical avec sticky.
- #action est une <table>, car les <div float:left/right> gérent mal la répartition des éléments et les messages sur plusieurs lignes.
*/
#banner {
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  border-bottom: 2px solid var(--colorFg2);
  background-color: var(--colorBG);
}

#paddingtop {
  height: 5px;
}

table#actions {
  margin: 0 10px 5px 10px;
}

.message {
  padding: 0 0.5em;
  font-size: 0.9em;
  width: 50%;
}


/*
=====   DIALOG   =====
*/
dialog {
  padding: 25px;
  border: 3px solid var(--colorFg2);
  border-radius: 5px;
  box-shadow: 0px 0px 10px 5px #FFFFFF50;
}

dialog div {
  font-size: 1.1em;
  margin-bottom: 1em;
}

dialog button {
  margin: 20px 20px 0px 20px;
  padding: 10px 20px 8px 20px !important;
}

dialog::backdrop {
  background-color: #00000050;
}



/*
#############################
##   F O R M U L A I R E   ##
#############################
*/

fieldset {
  display: inline-block;
  padding: 5px;
  border: 1px solid var(--colorBg1);
  width: fit-content;
  border-radius: 3px;
}

input, select, textarea {
  border: 1px solid var(--colorBg1);
  color: var(--colorFG);
  background-color: var(--colorBG);
  padding: 3px 5px 2px 5px;
  border-radius: 3px;
}

input[type="radio"] {
  appearance: none;
  border: 1px solid var(--colorBg1);
  border-radius: 50%;
  width:1em;
  height:1em;
  vertical-align: bottom;
  margin: 3px 4px 3px 3px;
}

input[type="radio"]:checked {
  border: 2px solid var(--colorFg3);
  background-color: var(--colorBg3);
}

input[type="checkbox"] {
  appearance: none;
  border: 1px solid var(--colorBg1);
  border-radius: 20%;
  width:1em;
  height:1em;
  vertical-align:bottom;
  margin: 3px 8px 3px 3px;
}

input[type="checkbox"]:checked {
  border: 2px solid var(--colorFg3);
  background-color: var(--colorBg3);
}

.legend {
  font-weight: bold;
  margin-bottom: 1em;
}

.legend>input, .legend>select, .legend>fieldset {
  margin-left: 10px;
}

input:hover, select:hover, textarea:hover, fieldset:hover {
  border: 1px solid var(--colorFg1);
}

input:focus-visible, select:focus-visible, textarea:focus-visible, fieldset:focus-visible {
  border: 1px solid var(--colorFg2);
  outline: none;
}

.ident {
  margin-left: 20px;
}

.identbloc {
  margin-left: 2px;
  padding-left: 15px;
  border-left: 3px solid var(--colorBg1);
}




/*
NE SERT PAS/PLUS

.lightBg {
  background-color: var(--colorUI01);
}

.tranparentBg {
  background-color: transparent;
}

.clearfix::after {
  content: ""; clear: both; display: table;
}
*/