/**
 * outils-classe-vue.css
 * feuille de style generique pour outils-classe-vue.php.
 * @version 2026.02.11
 * @author  Michel Cartereau
 */ 

/*
 A NOTER : feuille de style de foundation a charger au prealable 
   foundation version >= 6.4 : foundation.css ~> foundation-float.css
   https://get.foundation/sites/docs/grid.html
 Couleurs 
  0073E5 bleu 
  2E2E2E gris 
  727272 gris leger 
  964C00 orange fonce
  D3E1F0 bleu leger 
  E6E6E6 gris leger  
  E57200 orange 
  F7E9D0 orange leger
 Architecture generale 
  page avec bloc-principal et pied fixe au bas, bloc-principal avec entete et corps, 
     entete avec chapeau, menu-annexe optionnel, menu-principal, puis sous-menu optionnel 
 */
 
html, body {height: 100%;}

/* foundation : ecrans -> A VOIR AU CAS PAR CAS */ 
@media screen and (min-width: 40em) {
} 
@media screen and (max-width: 39.9375em) {
} 
 
/* generiques 2018.8.14 */
.a-droite { text-align: right; }
.a-gauche { text-align: left; }
.anomalie { color: red; font-weight: bold; }  /* 2020.04.01 */
.bloc-en-ligne { display: inline-block; padding-right: 0.5rem; }
.centre { text-align: center; }
.decalage { padding: 0 2em; } /* 2023.04.24 */
.encadre { outline: solid 1px #E57200; padding: 2%; margin: 1%; } /* 2023.03.23 */
.en-avant { font-weight: bolder; }
.en-italique { font-style: italic; } /* 2023.04.18 */
.en-bloc  { display: block; }
.en-ligne  { display: inline; }
.libre { clear: both; }
.masque { visibility: hidden; } /* 2019.5.13 : invisible -> masque car defini dans Foundation */
.reduit { font-size: smaller;} /* 2019.1.25 : + */
.vide { display: none; }
.info { color: #E57200; } /* 2026.02.11 */
.texte-code { font-family: 'courier new', courier, monospace; } /* 2026.02.11 */
cite { color: currentColor; } /* 2026.02.10 */

/* filet (largeur reduite sinon par Fondation )*/
hr { max-width: 100% !important; }

/* page */ 
#page { min-height: 100%; position: relative; } /* tout le contenu   */ 

/* bloc-principal */ 
#bloc-principal { padding-bottom: 80px; } 

/* pied */ 
#pied {
 font-size: 80%; 
 padding: 2ex 1ex; 
 color: #727272; background-color: #F2EFEB;
 clear: both; font-style: normal; 
 position: absolute; bottom: 0; left: 0; right: 0; 
} /*  height: 30px;  */ 
#pied a { color: #727272; text-decoration: underline; text-underline-position: under; }
#pied a:hover { color: black; text-decoration: none; } 
#pied address {font-style: normal; }
#pied i.fa-arrow-alt-circle-up { font-size: 150%; } /* 2023.04.18 */

/* retour au debut de page */
div.retour-debut { float:right; }

/* entete */
#entete { background-color: #E57200; color: white; padding: 1ex; }

/* chapeau */
#chapeau, .top-bar { background-color: #E57200; color: white; } 
#chapeau.top-bar { padding: 0; } /* 2023.05.05 */

/* coin-depart */
#coin-depart { padding: 0 1ex; } 
#coin-depart h1 { font-size: 1.2rem; font-weight: bolder; color: white; }

/* menu-annexe */ 
#menu-annexe, #menu-annexe a, .top-bar ul
 { background-color: #E57200; color: white !important; }  /* 2020.05.14 - font-size: 90%; */
#menu-annexe a
 { text-decoration: underline; text-underline-position: under; } /* 2020.05.15 */
#menu-annexe a:hover 
 { text-decoration: none; background-color: white !important; color: #964C00 !important; }
#menu-annexe ul#connexion, #menu-annexe ul#connexion li
 { display: inline-block; line-height: 1; } /* 2022.12.09 */
 
/*  
#menu-annexe.top-bar-right > ul.dropdown.menu
 { color: white; background-color:#E57200; } 
#menu-annexe.top-bar-right > ul.dropdown.menu > li.is-dropdown-submenu-parent > a
 { color: white; } 
#menu-annexe.top-bar-right > ul.dropdown.menu > li.is-dropdown-submenu-parent > a::after
 { border-color: white transparent transparent ; background-color: #E57200; } 
#menu-annexe li.is-dropdown-submenu-item  a 
 { color: #E57200; background-color: white; } 
#menu-annexe li.is-dropdown-submenu-item  a:hover, #menu-annexe.is-dropdown-submenu-item  a:active  
 { color: #964C00; } 
 */

/* menu principal */ 
#menu-principal
  { background-color: #E57200; color: white; font-weight: bolder;
   padding: 0 0.5ex 0 0.5ex; font-size: 1rem;}  /*  */ 
#menu-principal a:visited  , #menu-principal a:link
  { background-color: #E57200; color: white; margin: 0.5ex; 
   padding: 1ex; border: solid 1px white; border-radius: 5px; }  
#menu-principal a:hover
  { background-color: white !important; color: #964C00 !important; } 
#menu-principal .menu .active a
 { border-color: white; background-color: white; color: #E57200; } /* 2022.05.10 border: 0px; */
@media screen and (max-width: 39.9375em) {
 #menu-principal ul.menu li { display: block; width: 100%; } 
} 
 
/* sous-menu */ 
div#sous-menu    /* border: solid thin #E57200; border-top-width: 2px; border-right-color: #F2EFEB;*/ 
  { background-color: #E57200; color: white; padding: 0 0.5ex 0.5ex 0.5ex; line-height: 200%; }  /* font-size: 90%; */
div#sous-menu a:visited  , div#sous-menu  a:link
  { background-color: #E57200; color: white; margin: 0.5ex; 
   padding: 0.5ex; border: solid 1px white; border-radius: 5px; } 
 /* !important */ 
div#sous-menu a:hover, div#sous-menu input.bouton:hover
  { background-color: white !important; color: #964C00 !important; } 
div#sous-menu .menu .active a
  { border-color: white; background-color: white; color: #E57200; }
  /* 2022.05.10 border: 0px; background-clip: border-box; */
@media screen and (max-width: 39.9375em) {
  div#sous-menu ul.menu li { display: block; width: 100%; } 
} 

/* corps */ 
#corps   {padding: 1ex 2ex;} 

/* menu deroulant vertical avec Foundation active
menu principal
<ul id="connexion" class="menu-deroulant dropdown menu" data-dropdown-menu="nzporg-dropdown-menu" role="menubar">  
  <li class="is-dropdown-submenu-parent opens-left" role="none" data-is-click="false">
    <a role="menuitem" aria-haspopup="true" aria-label="CARTEREAU &nbsp;Michel">CARTEREAU &nbsp;Michel</a> 
    sous-menu
    <ul class="submenu is-dropdown-submenu first-sub vertical" data-submenu="" role="menubar" style=""> 
      <li role="none" class="is-submenu-item is-dropdown-submenu-item"> <a href="#" role="menuitem">...</a> </li>
    </ul>
  </li>
</ul>
https://get.foundation/sites/docs/dropdown-menu.html
 */ 

.fragment-deroulant { display: inline; }  /* 2024.11.15 */ 


/*  menu deroulant dans l'entete */
/* ancres  du menu principal ou de sous-menu */ 
div#entete ul.dropdown.menu > a { display: inline; }
div#entete ul.dropdown.menu a::after { border-top-color: white; } /* pointe d'acces a la liste deroulante */
div#entete ul.no-js.dropdown.menu a::after { border-top-color: none; } /* pas de pointe d'acces si pas de javascript */
/* survol ou clic sur ancre du menu principal ou de sous-menu */
div#entete ul.dropdown.menu a:hover, ul.dropdown.menu  a:active  {
  background-color: white !important; 
  color: #964C00 !important; 
} 
/* menu principal */ 
div#entete ul.no-js.dropdown.menu { display: none; } 
  /* aucun affichage si pas de javascript (<html class="no-js">) */ 
div#entete ul.dropdown.menu { display: inline-block; } /*  */
/* element du menu principal */ 
div#entete ul.dropdown.menu > li { } /* display: inline-block; visibility: collapse;*/
div#entete .dropdown.menu > li > a { padding-top: 0.5ex;  padding-bottom: 0.5ex; } /* 2023.05.05 */
/* sous-menu */ 
/* A VOIR :  masquage avant activation du code JS Foundation (FOUC, flash de contenu sans style) 2022.12.09 */ 
div#entete ul.sous-menu-deroulant { } /* display: inline-block;  */
/* lien du sous-menu  */ 
div#entete .dropdown .is-dropdown-submenu a { padding: 0.5ex 1ex; } /* 2023.05.05 */

/*  menu deroulant dans le corps */
div#corps ul.no-js.dropdown.menu { display: none; } 
  /* aucun affichage si pas de javascript (<html class="no-js">) */ 
div#corps ul.dropdown.menu { }
/* survol ou clic sur ancre du menu principal ou de sous-menu */
div#corps ul.dropdown.menu a:hover, ul.dropdown.menu  a:active  {
  color: white !important; 
  background-color: #E57200 !important;
 } 
/* entete du menu  */ 
div#corps ul.dropdown.menu a::after { border-top-color: #E57200; } /* pointe d'acces a la liste deroulante */

/* titres */
#corps h1, #corps h2, #corps h3  {  color: #E57200;} /* */ 
#corps h1 { font-size: 1.2rem;  }
#corps h2 { font-size: 1.15rem;  }
#corps h3 { font-size: 1.1rem;  }
#corps h4 { font-size: 1.05rem;  }

/* division d'affichage provisoire - 2024.12.17 */
div#provisoire
 { padding: 1ex 2ex 1.5ex; color: #CC7F31; background-color: #F0F0F0; border-bottom: 4px solid #CC7F31; }

/* liens */ 
#corps a { color: #E57200; text-decoration: underline; text-underline-position: under; border-bottom-color: #E57200;} /*  */ 
#corps a > img, .lien-cache { text-decoration: none; border-bottom: transparent 0 none; }
#corps a:hover { color: #964C00; text-decoration: none; }

/* formulaires et boutons */ 
.bouton {
  margin: 0.5ex; padding: 0 1ex; border: solid 1px black; border-radius: 5px; cursor: pointer; 
}
input[type="file"] { /* 2020.04.01 */
  height: auto !important; 
} 
div#page input[type="password"], div#page input[type="text"].passe {
  font-family: Consolas, Monaco, monospace !important; font-size: 90% !important;
} /* 2023.08.29 */
label {
  display: inline; padding: 0 0.5rem; 
  font-size: 1rem; /* 2020.04.09 */
}
.libelle-depot { /* 2018.11.15 */ 
  display: inline-block; cursor: pointer;
}
.btn-depot { /* 2018.11.15 */
  position: fixed; right: 100%; bottom: 100%;
}
div#entete .bouton { background-color: #E57200; color: white; border-color: white; }
div#depot-menu [type="file"] { color: #E57200; width: 12em; }
div#menu-principal label , div#sous-menu label  { color: inherit }
@media screen and (min-width: 40em) { /* ecran large */ 
 /* 2020.04.21  input.bouton, div#menu-principal input, div#sous-menu input,
   div#menu-principal select, div#sous-menu select*/ 
  input, select
    { width: auto !important; display: inline !important; 
    height: 1.5rem !important; margin: 0 !important; padding: 0 0.5rem !important;}
  div#menu-principal input[type="checkbox"], div#sous-menu input[type="checkbox"],
  div#menu-principal input[type="radio"], div#sous-menu input[type="radio"]
    { height: 1rem;  }
  [type="checkbox"], label > [type="checkbox"], [type="radio"], label > [type="radio"] 
    { margin-left: 1rem ; margin-right: 0; }
  div#menu-principal  select, div#sous-menu select, div#corps select 
    { appearance : menulist; -webkit-appearance: menulist; -moz-appearance: menulist; }
  label
    { padding: 0; } 
  .entete-zone /* 2022-11-23  -  display: block; float: left; width: 19%; mais + columns medium dans outils-classe-vue.php */ 
    { text-align: right; padding: 0 1ex 1ex 0; line-height: 150%; } 
  .zone-suite-entete /* 2022-11-23  -  display: block; width: 79%; float: right; mais + columns medium dans outils-classe-vue.php */ 
    { text-align: left; padding: 0 0 1ex 0; line-height: 150%; } 
  fieldset
    { border: thin black dotted; padding: 0.5em;}
  legend
    { padding: 0 0.5em;}
} 
/* [type="color"], [type="date"], [type="datetime-local"], [type="datetime"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea */

/* datatables */
div.t-valeurs
 { margin: 1ex 0; padding: 1ex; border: dotted gray thin; font-size: 90%; } /* width: auto;   */
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate 
 { color: gray; } 
 .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate ,
div.t-valeurs label, div.t-valeurs select 
 { color: gray; font-size: 90%; } 
div.dataTables_wrapper.dt-foundation div.row.grid-x
 { max-width: none !important; } 
 /* si foundation : annulation taille max 62.5rem = 1 000 px  */ 
div.t-valeurs table
 { margin-left: 0; margin-right: 0; } /* 2020.05.13 - width: auto;  */ 
div.t-valeurs select, div.t-valeurs input[type = "search"]
 { width: auto; display: inline; }
table.dataTable thead, table.dataTable thead th, table.dataTable tfoot, table.dataTable tfoot th
 { font-weight: normal; padding: 10px 18px 10px 10px; }  /* 2019.01.25 +  2020.05.13 */ 
table.dataTable tbody tr  /* 2020.04.30 */
 { vertical-align: top; }
table.dataTable tbody tr dl, ol, ul  /* 2020.04.30 */
 { margin-bottom: 0; }
@media screen and (min-width: 40em) { /* ecran large */
  div.dataTables_filter input 
   { height: 1.5rem; padding: 0 0.5rem; }  
  .dataTables_wrapper .dataTables_paginate .paginate_button.current
   { padding: 0.1rem 0.5rem;  }
}

/* onglets */
#corps div.onglets li.tabs-title
  { font-size: 90%; margin: 0;  } 
#corps div.onglets li.tabs-title > a 
 { padding: 1ex; background-color: #E57200; color: white; 
   border: solid 2px white; border-radius: 5px 5px 0px 0px; text-decoration: none; } 
#corps div.onglets li.tabs-title > a:hover
 { color: #964C00; background-color: white; border: 2px solid #E57200; } 
#corps div.onglets li.tabs-title > a[aria-selected="true"]
 { background-color: white; color: #E57200; border: 2px solid #E57200; 
  border-bottom: 6px solid white !important; margin-bottom: -4px; } 
  /* A REVOIR : bordure inferieure legerement retrecie dans coins lateraux 2023.03.24 */  
#corps div.onglets .tabs-content
 { border: 2px solid #E57200; border-radius: 0px 5px 0 0; } 
#corps div.onglets ul.tabs
 { border: 0px; } 

/* onglets dans sous-menu  2020.07.16 */
#sous-menu div.onglets li.tabs-title
  { font-size: 90%; margin: 0; font-weight: bolder; } 
#sous-menu div.onglets li.tabs-title.is-active
  {   } 
#sous-menu div.onglets li.tabs-title > a 
 { padding: 1ex; margin-bottom: 0; background-color: #E57200; color: white; 
   border: solid 1px white; border-radius: 5px 5px 0 0; text-decoration: none; } 
#sous-menu div.onglets li.tabs-title > a:hover
 { color: #964C00; background-color: white; border: 1px solid #E57200; } 
#sous-menu div.onglets li.tabs-title > a[aria-selected="true"]
 { background-color: white; color: #E57200; border: 1px solid #E57200; 
   border-bottom: 4px solid white;  } /* margin-bottom: -4px; */  
#sous-menu div.onglets .tabs-content
 { border: 1px solid white ; border-radius: 0px 5px 0 0; 
   background-color: #E57200; color: white; } 
#sous-menu div.onglets ul.tabs
 { border: 0px; background-color: #E57200; } 

/* zone de boite d'information defini implicitement - 2019.3.22 
   cf initBoiteInfo(), afficherBoiteInfo(message), ... dans outils-commun.js */
div#outilsCommunBoiteInfo {
  display: none;
  position: fixed;
  z-index: 10;
  right: 50%;
  top: 15%;
  width: 300px;
  height: 100px;
  background: gray;
  color: white;
  border: 3px outset #CC7F31;
  padding: 1em;
}

/* carte avec leaflet  2023.01.16 */ 
div.leaflet-pane a, div.leaflet-control-container a {
  text-decoration: none !important;
}
div.leaflet-popup-content a { 
  text-decoration: underline !important; text-underline-position: under; border-bottom-color: #E57200 !important;
}
div.leaflet-popup-content a:hover { 
  color: #964C00 !important; text-decoration: none !important; 
}

/* visualisation du mot de passe en saisie  2023.03.29 */
.bascule-passe {
  margin-left: 5px; cursor: pointer; font-size: smaller  !important; 
}
@media screen and (min-width: 40em) { /* ecran large */ 
  .bascule-passe {
    margin-left: -30px; cursor: pointer; 
  }
}