/*----------------------------------------------------------------------------
 * DESCR.    : Hérimar   -   Feuille de style.
 * AUTEUR    : Éric DUPONT.
 * COPYRIGHT : Copyright (C) 2022-2025, Éric DUPONT - Tous droits réservés.
----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------
 * VARIABLES
 *--------------------------------------------------------------------------*/

:root {
  --col_h1:      #EFCB72;
  --col_h2:      #D92013;
  --col_h3:      #F8E3AF;
  --col_href:    #EFCB72;
  --col_note:    #F8E3AF;
  --col_bord_dk: #533412;
  --col_bord_lt: #CC1E12;
  --col_bord_ph: #EFCB72;
  --col_bord_ah: #404040;
  --col_body_dk: #202020;
  --col_body_lt: #303030;
  --col_body_wg: #9E1F1B;
  --col_over_dk: #303030;
  --col_over_wg: #EFCB72;
  --col_text_dk: #CCA95D;
  --col_text_ph: #7D6A41;
  --col_text_wg: #533412;
  --col_zone_dk: #D92013;
  --col_zone_lt: #EFCB72;
  --col_grf_axe: #F8E3AF;
  --col_grf_bar: #CC1E1230;
  --col_grf_brd: #CC1E12;
  --col_grf_txt: #CCA95D;
  --radmenu-niv1-dim:   40;
  --radmenu-niv2-dim:   70;
  --radmenu-niv2-angle: 40;
}

/*----------------------------------------------------------------------------
 * FONTES
 *--------------------------------------------------------------------------*/

@font-face { font-family: 'Titre';  src: url('/rsc/WashingtonText.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Normal'; src: url('/rsc/Carlito-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Normal'; src: url('/rsc/Carlito-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'Normal'; src: url('/rsc/Carlito-Italic.ttf') format('truetype'); font-weight: normal; font-style: italic; }
@font-face { font-family: 'Normal'; src: url('/rsc/Carlito-BoldItalic.ttf') format('truetype'); font-weight: bold; font-style: italic; }

/*----------------------------------------------------------------------------
 * MEDIA QUERIES
 *--------------------------------------------------------------------------*/

/* Cas des écrans minuscules : résolution < 1280 x 720 */
@media only screen and (max-width: 1280px) {
  /* Adaptation des affichages pour les endpoints mobiles */
  * { box-sizing: border-box; }
  .mobiles-block { display: block; }
  .mobiles-table { display: table; }
  .classic-block { display: none; }
  .classic-table { display: none; }
  .classic-td { display: none; }
  body { height: 100%; padding: 0; margin: 0; width: 100%; }
  header { background-position-y: bottom !important; height: 80px !important; position: absolute !important; }
  header .logo { background-image: url('/img/logo_mobile.png') !important; background-size: contain; height: 55px !important; left: 5px; min-width: 205px !important; position: absolute; top: 5px; }
  article { display: flex; flex-direction: column; height: 100%; overflow: hidden; scrollbar-width: none; width: 100%; }
  article.contenu { padding-top: 90px; }
  iframe { border: none; flex-grow: 1; padding: 0; margin: 0; }
  div.menu-bouton { background-size: contain; height: 70px !important; top: -27px !important; width: 42px !important; }
  div.menu-version { bottom: 18px !important; font-size: .6em !important; position: absolute; right: 5px; }
  /* Page d'accueil */
  div.slider { font-size: 1em; margin: 10px !important; width: calc(100vw - 30px) !important; }
  /* Page des CGU */
  div.legal { font-size: 0.7em !important; height: calc(100vh - 100px) !important; width: 90% !important; }
  ul.legal li { text-align: left !important; }
  /* Aide */
  img.aide-herimar { height: 250px !important; }
  div.aide-conteneur { font-size: 1em; width: 95% !important; }
  div.aide-conteneur h2 { margin: 1.2em 0px !important; }
  div.aide { margin-left: 5px !important; }
  table.aide { margin-left: 0px !important; }
  /* Mosaïque */
  div.mosaique-case { height: 100% !important; width: 100% !important; }
  /* Liste*/
  table.liste { width: 95% !important; }
  tr.liste { height: 110px !important; }
  span.ville { color: var(--col_text_ph); }
  p.liste[type='dark'] { color: var(--col_body_wg); }
  img.liste { padding-left: 0px !important; }
  /* Photographies */
  div.legende[from='pho'] { display: block; font-size: 0.9em; width: 92vi !important; }
  div.legende[from='pho'] div.notice { margin-top: 0px !important; }
  div.photo { display: block; margin: 20px auto; height: 100vb !important; width: calc(92vi - 2px) !important; }
  img.survol { display: none; }
  div.photo-nav-container { background: url('/img/bgd_vert.png'); bottom: 0; border-left: 2px solid var(--col_text_dk); box-sizing: border-box; display: flex; flex-direction: column; margin: 0; padding: 0; position: fixed; right: 0; top: 0; width: 8vi; }
  div.photo-nav-touch { background-repeat: no-repeat; background-size: contain; border: none; flex-grow: .33; }
  div.photo-nav-touch[target='1'] { background-position-y: bottom; }
  div.photo-nav-touch[target='2'] { background-position-y: center; border-bottom: 2px solid var(--col_text_dk); border-top: 2px solid var(--col_text_dk); }
  div.photo-nav-touch[target='3'] { background-position-y: top; }
  /* Selects */
  input[type=text].select-filter { width: 100% !important; }
}

/* Cas des écrans moyens : 1280 x 720 < résolution < 1680 x 900 */
@media only screen and (min-width: 1281px) and (max-width: 1680px) {
  /* Adaptation des affichages pour les endpoints classiques  */
  .mobiles-block { display: none; }
  .mobiles-table { display: none; }
  .classic-block { display: block; }
  .classic-table { display: table; }
  .classic-td { display: table-cell; }
  article.contenu { padding-top: 130px; }
  /* Adaptation de la barre de titre */
  span.moyen { display: block; }
  span.stdrd { display: none; }
  span.grand { display: none; }
  #btn_bdd { display: none; }
  /* Page d'accueil */
  div.annonce { font-size: 0.8em; min-width: 250px !important; width: calc(100% - 20px); }
  div.slider { font-size: 0.8em; min-width: 250px !important; }
  div.slider img { width: 70px; }
  div.resume { font-size: 0.8em; min-width: 338px !important; }
  /* Photographies */
  div.legende[from='pho'] { font-size: 0.8em; }
  div.li-notice img { height: 13px; width: 13px; }
  div.citation { font-size: 13px !important; width: 605px !important; }
  div.objet { font-size: 0.8em !important; }
  #objet-img { height: 400px; width: 400px; }
  /* Carte */
  img.miniature[from='crt'] { width: 240px; }
  .carte-centre-1, td.legende[from='crt'] { font-size: 0.8em; }
  /* Liste */
  table.liste { font-size: 0.8em; }
  table.liste img.liste { height: 13px; width: 13px; }
  table.liste img.check { height: 24px; width: 16px; }
}

/* Cas des écrans standards : 1680 x 900 < résolution < 1920 x 1080) */
@media only screen and (min-width: 1681px) and (max-width: 1920px) {
  /* Adaptation des affichages pour les endpoints classiques  */
  .mobiles-block { display: none; }
  .mobiles-table { display: none; }
  .classic-block { display: block; }
  .classic-table { display: table; }
  .classic-td { display: table-cell; }
  article.contenu { padding-top: 130px; }
  /* Adaptation de la barre de titre */
  span.moyen { display: none; }
  span.stdrd { display: block; }
  span.grand { display: none; }
  /* Page d'accueil */
  div.annonce { width: calc(100% - 20px); }
  div.slider img { width: 100px; }
  /* Carte */
  img.miniature[from='crt'] { width: 300px; }
}

/* Cas des écrans larges : 1920 x 1080 < résolution */
@media only screen and (min-width: 1921px) {
  /* Adaptation des affichages pour les endpoints classiques  */
  .mobiles-block { display: none; }
  .mobiles-table { display: none; }
  .classic-block { display: block; }
  .classic-table { display: table; }
  .classic-td { display: table-cell; }
  article.contenu { padding-top: 130px; }
  /* Adaptation de la barre de titre */
  span.moyen { display: none; }
  span.stdrd { display: none; }
  span.grand { display: block; }
  /* Page d'accueil */
  div.annonce { font-size: 1.2em; min-width: 400px !important; width: calc(50% - 20px); }
  div.slider { font-size: 1.2em; min-width: 480px !important; }
  div.resume { font-size: 1.2em; min-width: 506px !important; }
  /* Aide */
  div.aide-conteneur { font-size: 1.2em; }
  img.aide-herimar { height: 360px !important; }
  /* Mosaïque */
  div.mosaique-case img.miniature[orientation='landscape'] { height: 60vi; max-height: 90%; max-width: 90% !important; }
  div.mosaique-case img.miniature[orientation='portrait'] { height: 90vi; max-height: 90%; max-width: 90% !important; }
  /* Photographies */
  div.legende[from='pho'] { font-size: 1.2em; }
  div.li-notice img { height: 21px; width: 21px; }
  div.citation { font-size: 1.2em !important; width: 780px !important; }
  div.objet { font-size: 1.2em !important; }
  #objet-img { height: 600px; width: 600px; }
  /* Carte */
  img.miniature[from='crt'] { width: 360px; }
  .carte-centre-1, td.legende[from='crt'] { font-size: 1.2em; }
  /* Liste */
  table.liste { font-size: 1.3em; }
  table.liste img.liste { height: 21px; width: 21px; }
  table.liste img.check { height: 36px; width: 24px; }
  /* Filtres */
  div.filtre-lign { font-size: 1.2em; }
  div.filtre-case { min-width: 450px !important; }
}

/*----------------------------------------------------------------------------
 * ASCENSEURS
 *--------------------------------------------------------------------------*/

* { scrollbar-color: var(--col_body_wg) var(--col_body_lt); }
*::-webkit-scrollbar { width: 16px; }
*::-webkit-scrollbar-button { height: 16px; width: 16px; }
*::-webkit-scrollbar-button:single-button:horizontal:decrement { background-color: var(--col_body_lt); background-position: center; background-image: url('/img/scroll-lf.png'); }
*::-webkit-scrollbar-button:single-button:horizontal:increment { background-color: var(--col_body_lt); background-position: center; background-image: url('/img/scroll-rt.png'); }
*::-webkit-scrollbar-button:single-button:vertical:decrement { background-color: var(--col_body_lt); background-position: center; background-image: url('/img/scroll-up.png'); }
*::-webkit-scrollbar-button:single-button:vertical:increment { background-color: var(--col_body_lt); background-position: center; background-image: url('/img/scroll-dn.png'); }
*::-webkit-scrollbar-thumb { background: var(--col_body_wg); }
*::-webkit-scrollbar-thumb:hover { background: rgb(186,55,52); }
*::-webkit-scrollbar-track { background: var(--col_body_lt); }

/*----------------------------------------------------------------------------
 * GENERIQUE
 *--------------------------------------------------------------------------*/

body { background: var(--col_body_dk); color: var(--col_text_dk); font-family: Normal; font-size: 15px; line-height: 1.3; margin: auto; padding: 0px; }
article.contenu { width: 100%; }
header { background: url('/img/banniere.png'); color: var(--col_text_dk); height: 120px; left: 0px; margin: 0px; overflow: hidden; padding: 0px; position: fixed; top: 0px; right: 0px; z-index: 10; }
iframe { border: none; height: 100vh; width: 100vw; }

a { border-top: 1px solid var(--col_bord_ah); border-bottom: 1px solid var(--col_bord_ah); border-radius: 3px; color: var(--col_h3); padding: 0px 3px; text-decoration: none; }
a:hover { background-color: var(--col_body_lt); border-top: 1px solid var(--col_bord_lt); border-bottom: 1px solid var(--col_bord_lt); cursor: pointer; }

h1 { color: var(--col_h1); font-family: Titre,sans-serif; font-size: 1.8vw; font-weight: normal; line-height: 1.2em; margin: 0px; }
h2 { color: var(--col_h2); font-size: 1.2em; margin: 1.3em; text-align: center; width: 100%; }
h3 { color: var(--col_h3); font-size: 1.2em; font-weight: normal; line-height: 1.5em; padding-left: 10px; text-transform: uppercase; }
h3 span { margin-right: 15px; }
h3.oyez { padding-left: 2.5em; }

sup { font-size: .6em; line-height: .5; }

table { margin: auto; padding: 0px; }

.center { text-align: center !important; }
.left { text-align: left !important; }
.right { text-align: right; }
.top { padding-top: 15px; vertical-align: top; }
.float-left { float: left; }
.no-margin-left { margin-left: 0px !important; }
.no-padding { padding: 0px !important; }
.border-bottom { border-bottom: 1px solid var(--col_bord_dk); }

.h10pxl { height: .7em !important; }
.h15pxl { height: 1em !important; }
.h50pxl { height: 3.3em; }
.h70pxl { height: 4.7em; }
.h100pxl { height: 6.7em; }

.w10pct { width: 10%; }
.w20pct { width: 20%; }
.w25pct { width: 25%; }
.w30pct { width: 30%; }
.w40pct { width: 40%; }
.w50pct { width: 50%; }
.w60pct { width: 60%; }
.w70pct { width: 70%; }
.w80pct { width: 80%; }
.w90pct { width: 90%; }
.w100pct { width: 100%; }

.w40pxl { width: 2.7em; }
.w60pxl { width: 4em; }
.w80pxl { width: 5.3em; }
.w95pxl { width: 6.3em; }
.w150pxl { width: 10em; }
.w200pxl { width: 13.3em; }
.w250pxl { width: 16.7em; }
.w400pxl { width: 26.7em; }

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

div.bouton { background: var(--col_body_wg); border-radius: 5px; color: white; font-size: large; height: 40px; line-height: 2.2; margin: 20px auto; text-align: center; -webkit-user-select: none; user-select: none; width: 150px; }
div.bouton:hover { background: var(--col_over_wg); color: var(--col_text_wg); cursor: pointer; }
div.bouton[type='large'] { height: 175px; padding-top: 25px; width: 200px; }
div.bouton[type='form'] { float: right; margin: 10px; }
div.bouton[type='cercle'] { border-radius: 50%; float: left; height: 54px; margin-left: 30px; width: 54px; }
div.bouton[type='reglage'] { border-radius: 3px; display: inline-block; height: 68px; line-height: 1; margin: 15px 64px; padding: 0px; width: 68px; }
div.bouton[type='reglage'] div.spinner-container { display: inline-table; height: 100%; }
div.bouton[type='reglage']:hover .spinner-nom { color: var(--col_text_wg); }
div.bouton[type='reglage']:hover .spinner-texte { color: var(--col_text_wg); }

div.erreur { display: flex; height: calc(100vh - 250px); width: calc(100vw); }
div.erreur img { display: block; margin: auto; max-height: calc(90vh - 250px); max-width: calc(90vw); }

div.keywords { display: none; }

img.travaux { display: block; margin: auto; max-height: 100vh; max-width: 100vw; }
img.miniature { border: 1px solid var(--col_bord_ph); margin: 20px 5px 0px 5px; padding: 2px; }
img.miniature:hover { border: 1px solid var(--col_bord_lt); cursor: pointer; }

/*----------------------------------------------------------------------------
 * COMMUNS
 *--------------------------------------------------------------------------*/

div.logo { background-image: url('/img/logo.png'); background-position: center; background-repeat: no-repeat; font-size: x-small; height: 100px; min-width: 370px; }
div.logo:hover { cursor: pointer; }

div.menu-bouton { float: right; height: 100px; position: relative; top: -37px; width: 60px; }
div.menu-bouton:hover { cursor: pointer; }
div.menu-version { bottom: 20px; position: absolute; right: 5px; }

div.login { background-image: url('/img/logo_light.png'); background-position: 50% 5%; background-repeat: no-repeat; border: 1px solid var(--col_bord_lt); border-radius: 10px; color: var(--col_h3); font-size: large; margin: 100px auto; padding-top: 120px; position: relative; text-align: center; vertical-align: top; width: 400px; }
td.login-info { color: var(--col_text_dk); font-size: medium; line-height: 1; text-align: justify; padding: 15px 20px; }
span.format[ok='0'] { border: 1px solid var(--col_body_dk); border-radius: 50%; color: var(--col_body_lt); display: inline-block; font-weight: bold; height: 22px; margin: auto 5px; padding-top: 3px; width: 25px; }
span.format[ok='1'] { background: var(--col_body_lt); border: 1px solid var(--col_h3); border-radius: 50%; color: var(--col_h3); display: inline-block; font-weight: bold; height: 22px; margin: auto 5px; padding-top: 3px; width: 25px; }
span.format:hover { cursor: help; }
a.forgotten-password { bottom: 5px; display: block; font-size: .7em; position: absolute; right: 5px; }

td.legal { color: var(--col_text_dk); font-family: Normal; font-size: small; line-height: 1.2; min-width: 350px; padding-right: 5px; text-align: right; -webkit-user-select: none; user-select: none; vertical-align: bottom; }

span.poignee { color: var(--col_body_wg); display: block; font-size: 100px; font-weight: bold; line-height: 10px; margin: 20px; }
span.poignee:hover { cursor: pointer; color: var(--col_over_wg); }

img.survol { margin: 10px; }
img.survol:hover { cursor: pointer; }

span.highlight { color: var(--col_h3); }
span.titre { color: var(--col_h2); display: inline-block; padding-left: 10px; padding-right: 5px; }
span.titre-li { color: var(--col_h2); display: inline-block; padding-left: 0px; padding-right: 5px; }

div.resume { display: none; margin: 0px 20px; min-width: 422px; width: auto; }
td.resume { font-size: 1.4em; height: 50px; padding-top: 10px; text-align: center; }
p.resume { color: var(--col_h2); font-size: small; height: 15px; padding: 0px; margin: 0px; }

/*----------------------------------------------------------------------------
 * FENÊTRES MODALES
 *--------------------------------------------------------------------------*/

button.modal { background: var(--col_body_wg); border: none; border-radius: 5px; color: white; font-size: large; height: 40px; line-height: 2.2; margin: 5px; text-align: center; width: 150px; }
button.modal:hover { background: var(--col_over_wg); color: var(--col_text_wg); cursor: pointer; }

div.modal { background-color: rgba(0,0,0,0.7); display: none; height: 100%; left: 0px; position: fixed; top: 0px; width: 100%; z-index: 100; }
div.modal-fram { background-color: var(--col_body_lt); border: 1px solid var(--col_bord_dk); border-radius: 10px; box-shadow: 5px 5px 5px black; margin: auto; padding: 0px; position: relative; top: 200px; width: 600px; }
div.modal-head { color: var(--col_h3); display: block; font-size: large; font-weight: normal; height: 25px; margin: 0px 35px; padding-bottom: 10px; padding-top: 14px; position: relative; text-transform: uppercase; }
div.modal-icon { background-image: url("img/modal.qs.png"); background-size: contain; display: block; float: left; height: 50px; margin: 10px 20px 25px 60px; position: relative; width: 50px; }
div.modal-text { color: var(--col_href); display: table-cell; font-size: medium; height: 70px; position: relative; vertical-align: middle; width: 410px; }
div.modal-foot { border-top: 1px solid var(--col_bord_dk); display: block; height: 50px; margin: 0px 35px; padding: 10px; position: relative; text-align: center; }

p.format { color: var(--col_h3); font-size: 0.9em; line-height: 1.1; margin: 3px 0px; }

/*----------------------------------------------------------------------------
 * AIDE
 *--------------------------------------------------------------------------*/

div.aide-conteneur { margin: 0px auto; position: relative; width: 70%; }
img.aide-herimar { height:300px; position: absolute; right: 10%; top: 0px; }
div.aide { margin-left: 50px; }
div.aide a { line-height: 1.5; }
div.aide ul { display: inline; }
div.aide li { margin-left: 30px; }
h3.aide { border-bottom: 1px solid var(--col_h3); padding-left: 0px; }
h3.aide:not(:first-of-type) { margin-top: 50px; }
table.aide { margin-left: 50px; }
td.aide-logo { padding-left: 20px; width: 70px; }
td.aide-logo img { border-left: 1px dotted var(--col_h3); padding-left: 12px; }
td.aide-text { text-align: justify; vertical-align: top; }
img.aide { border-left: 1px dotted var(--col_h3); margin: 20px; max-width: calc(100% - 60px); padding-left: 10px; }

a.sommaire { float: right; line-height: 1.2 !important; margin-top: 3px; }
a.sommaire:not(:first-of-type) { margin-top: 54px; }

/*----------------------------------------------------------------------------
 * OBJETS
 *--------------------------------------------------------------------------*/

div.objet { background: var(--col_body_lt); border: 1px solid var(--col_bord_dk); border-radius: 10px; box-shadow: 5px 5px 5px black; display: none; font-size: 1em; height: auto !important; line-height: 1.4; padding: 10px 10px 0px 10px; position: absolute; text-align: justify; text-justify: auto; width: auto; z-index: 100; }
img.objet { border: 1px solid var(--col_bord_ph); padding: 2px; }
div.objet-ligne1 { margin: 0px auto; overflow-y: auto; padding: 0px; text-align: center; vertical-align: middle; width: 90% }
div.objet-titre { color: var(--col_h3); font-weight: normal; }

/*----------------------------------------------------------------------------
 * CITATIONS
 *--------------------------------------------------------------------------*/

div.citation { background: var(--col_body_lt); border: 1px solid var(--col_bord_dk); border-radius: 10px; box-shadow: 5px 5px 5px black; display: none; font-size: 14px; height: auto !important; line-height: 1.4; padding: 10px; position: absolute; text-align: justify; text-justify: auto; width: 650px; z-index: 100; }
div.citation-separateur { border-bottom: 1px solid var(--col_h3); height: 1px; margin: 10px auto; padding: 0px; width: 90%; }
p.citation-titre { color: var(--col_h3); font-size: large; margin: 0px; padding: 0px 0px 10px 0px; text-transform: uppercase; }
span.citation-verset { color: var(--col_h2); font-weight: bold; }
sup.citation-renvoi { color: var(--col_note); }
span.citation-note { color: var(--col_note); font-size: .9em; }
span.citation { color: var(--col_h2); font-size: .8em; }
span.citation:hover { cursor: help; }
p.source { color: var(--col_text_ph); font-size: .8em; line-height: .8em; margin: 0px; text-align: right; }
p.source span { color: var(--col_h2); }

/*----------------------------------------------------------------------------
 * MENU CIRCULAIRE
 *--------------------------------------------------------------------------*/

.radmenu { display: none; position: absolute; }
.radmenu-centre { background-color: var(--col_bord_dk); background-image: url('/img/btn-ferme.png'); background-position: center; background-repeat: no-repeat; border: 1px solid var(--col_bord_dk); border-radius: 50%; height: calc(var(--radmenu-niv1-dim) * 0.7px); left: calc(50% - var(--radmenu-niv1-dim) * 0.35px); position: absolute; top: calc(50% - var(--radmenu-niv1-dim) * 0.35px); width: calc(var(--radmenu-niv1-dim) * 0.7px); z-index: 10; }
.radmenu-centre:hover { cursor: grab; }
.radmenu-texte { color: var(--col_text_wg); display: block; font-family: Carlito,sans-serif; font-size: 16px; height: 16px; position: absolute; text-align: center; width: 16px; z-index: 7; }
.radmenu-texte:hover { cursor: pointer; }
.radmenu-niv1-div { border: 1px solid var(--col_bord_dk); border-radius: calc(var(--radmenu-niv1-dim) * 2px); display: none; height: calc(var(--radmenu-niv1-dim) * 2px); overflow: hidden; position: absolute; width: calc(var(--radmenu-niv1-dim) * 2px); z-index: 5; }
.radmenu-niv1-triangle { background-color: var(--col_text_dk); border-left: 1px solid var(--col_bord_dk); height: calc(var(--radmenu-niv1-dim) * 1px); left: 50%; position: absolute; top: 50%; transform-origin: top left; width: calc(var(--radmenu-niv1-dim) * 1px); z-index: 6; }
.radmenu-niv1-triangle:hover { cursor: pointer; }
.radmenu-niv2-div { border-radius: calc(var(--radmenu-niv2-dim) * 2px); display: none; height: calc(var(--radmenu-niv2-dim) * 2px); overflow: hidden; position: absolute; width: calc(var(--radmenu-niv2-dim) * 2px); z-index: 1; }
.radmenu-niv2-triangle { background-color: var(--col_text_dk); border-left: 1px solid var(--col_bord_dk); height: calc(var(--radmenu-niv2-dim) * 1px); left: 50%; position: absolute; top: 50%; transform-origin: top left; width: calc(var(--radmenu-niv2-dim) * 1px); z-index: 2; }
.radmenu-niv2-triangle:hover { cursor: pointer; }

/*----------------------------------------------------------------------------
 * SPINNERS
 *--------------------------------------------------------------------------*/

div.spinner { height: 70px; float: left; margin: 5px auto; }
div.spinner-gauche { border: 30px solid transparent; border-right-color: var(--col_body_wg); float: left; height: 0px; margin-top: 3px; width: 0px; }
div.spinner-gauche:hover { border-right-color: var(--col_body_hv); cursor: pointer; }
div.spinner-gauche:hover span { color: var(--col_text_wg); }
span.spinner-gauche { color: white; display: block; font-size: 40px; line-height: 0px; padding-left: 8px; -webkit-user-select: none; user-select: none; }
div.spinner-infos { background: var(--col_body_lt); border: 1px solid var(--col_bord_lt); border-radius: 3px; float: left; height: 66px; margin: 0px 5px; width: 66px; }
div.spinner-nom { color: var(--col_h3); font-size: 10px; text-align: center; width: 100%; }
div.spinner-icone { display: flex; height: 25px; margin: 0px; text-align: center; width: 100%; }
div.spinner-icone img { height: 20px; margin: auto; width: 20px; }
div.spinner-texte { color: var(--col_text_dk); font-size: 20px; margin: 0px; text-align: center; width: 100%; }
div.spinner-droite { border: 30px solid transparent; border-left-color: var(--col_body_wg); float: left; height: 0px; margin-top: 3px; width: 0px; }
div.spinner-droite:hover { border-left-color: var(--col_body_hv); cursor: pointer; }
div.spinner-droite:hover span { color: var(--col_text_wg); }
span.spinner-droite { color: white; display: block; font-size: 40px; line-height: 0px; margin-left: -28px; -webkit-user-select: none; user-select: none; text-align: left; }

/*----------------------------------------------------------------------------
 * ACCUEIL
 *--------------------------------------------------------------------------*/

div.widget { background-image: url('/img/acc_centre.png'); background-position: center; background-repeat: no-repeat; background-size: 18%; display: inline-flex; height: calc(100vh - 160px); margin-left: 30px; margin-right: 30px; margin-top: 10px; position: relative; width: calc(100vh - 160px); }
div.widget-select { text-transform: uppercase; width: 200px; }
img.widget { background: var(--col_body_dk); border: 1px solid var(--col_bord_ph); padding: 2px; position: absolute; }
img.widget:hover { border-color: var(--col_bord_lt); cursor: pointer; }
img.widget[type='pay'] { height: calc((100vh - 180px) * 2 / 5); width: calc((100vh - 180px) * 3 / 5); }
img.widget[type='por'] { height: calc((100vh - 180px) * 3 / 5); width: calc((100vh - 180px) * 2 / 5); }
img.widget#nw { left: 0px; top: 0px; }
img.widget#ne { right: 0px; top: 0px; }
img.widget#se { bottom: 0px; right: 0px; }
img.widget#sw { bottom: 0px; left: 0px; }

div.slider { background: var(--col_body_lt); border-radius: 5px; border: 1px solid var(--col_body_wg); height: auto; margin: 10px 20px; width: 400px; }
div.slider p { margin: 10px auto; }
div.slider ul { display: inline-block; margin: 0px; padding: 0px 0px 0px 35px; }
div.slider li { height: auto; margin: 1px 0px 10px 0px; padding: 0px 0px 0px 8px; }
div.slider li::marker { color: var(--col_body_wg); content: '–'; }
div.slider-header { background: var(--col_body_wg); border-radius: 4px; border: none; color: white; font-size: 1.5em; height: 50px; line-height: 50px; position: relative; text-align: center; text-transform: uppercase; -webkit-user-select: none; user-select: none; width: 100%; }
div.slider-header:hover { cursor: pointer; filter: brightness(1.2); }
div.slider-header span { margin-right: 40px; }
div.slider-header img { float: left; height: 40px; margin-left: 10px; margin-top: 5px; width: 40px; }
div.slider-arrow { border: 10px solid transparent; border-color: white transparent transparent transparent; margin: 20px; position: absolute; right: 0px; top: 0px; width: 0px; }
div.slider-footer { display: none; margin: auto; text-align: justify; width: 90%; }

div.annonces { display: flex; flex-basis: auto; flex-flow: column wrap; height: calc(100vh - 150px - 3.5em); min-width: 400px; overflow: hidden; width: auto; }
div.annonce { background: var(--col_body_lt); border-radius: 5px; border: 1px solid var(--col_body_wg); height: auto; margin: 10px; }
div.annonce[type='1'] { width: calc(100% - 20px); }
div.annonce[type='2'] { width: calc(100% - 20px); }
div.annonce[type='3'] { width: calc(100% - 20px); }
div.annonce h3 { background: var(--col_body_wg); color: white; height: 40px; line-height: 40px; margin: 0px; -webkit-user-select: none; user-select: none; }
div.annonce h3:hover { cursor: default; }
div.annonce div.contenu { display: flex; flex-direction: row; align-items: center; }
div.annonce p.bat-nom { color: var(--col_note); margin: 10px 10px 0px 10px; text-align: center; width: calc(100% - 20px); }
div.annonce p.bat-info { font-size: .8em; margin: 0px 10px 10px 10px; text-align: center; width: calc(100% - 20px); }
div.annonce p { margin: 10px; text-align: left; width: calc(100% - 20px); }
div.annonce img.icon { float: right; height: 32px; margin: 3px; width: 32px; }
div.annonce img.ordinateur { height: 20vh; margin: 1vh; }

/*----------------------------------------------------------------------------
 * CGU
 *--------------------------------------------------------------------------*/

div.legal { font-size: 1.2em; height: calc(100vh - 150px); line-height: 1.2; margin: 10px auto; overflow-x: hidden; overflow-y: auto; width: 70%; }
div.legal p { padding: 0px 20px; text-align: justify; }
div.legal span.titre { padding-left: 20px; }
h3.legal { border-bottom: 1px solid var(--col_h2); font-size: 1.2em; line-height: 1.2; }
ul.legal { display: inline-block; padding-left: 40px; text-indent: -10px; }
ul.legal li { padding-right: 20px; height: auto; line-height: 1.5; text-align: justify; }
ul.legal li.sans-titre { text-indent: 0px; }

/*----------------------------------------------------------------------------
 * MOSAÏQUE
 *--------------------------------------------------------------------------*/

table.mosaique { border-collapse: collapse; height: auto; margin: auto; width: 100%; }
td.mosaique-poignee { vertical-align: top; width: 100px; }
div.mosaique-case { float: left; height: calc(30vh - 70px); margin: 1vh 0; text-align: center; width: calc(20vw - 45px); }
div.mosaique-case img.miniature { max-height: 90%; max-width: 90%; }
div.mosaique-case img.miniature[orientation='landscape'] { aspect-ratio: 3 / 2; }
div.mosaique-case img.miniature[orientation='portrait'] { aspect-ratio: 2 / 3; }
div.mosaique-case img.miniature-vide { aspect-ratio: 3 / 2; border: 1px solid var(--col_body_dk); margin: 20px 5px 0px 5px; max-height: 90%; max-width: 90%; padding: 2px; }

div.page { display: inline-block !important; margin-left: 10px !important; margin-right: 5px !important; width: 80px; }
span.page { display: inline-block; line-height: .3em; vertical-align: text-top; }

/*----------------------------------------------------------------------------
 * PHOTOS
 *--------------------------------------------------------------------------*/

div.photo { filter: drop-shadow(0 -2px 0 var(--col_body_dk)) drop-shadow(0 2px 0 var(--col_body_dk)) drop-shadow(-2px 0 0 var(--col_body_dk)) drop-shadow(2px 0 0 var(--col_body_dk)) drop-shadow(0 -1px 0 var(--col_bord_ph)) drop-shadow(0 1px 0 var(--col_bord_ph)) drop-shadow(-1px 0 0 var(--col_bord_ph)) drop-shadow(1px 0 0 var(--col_bord_ph)); float: left; height: calc(100vb - 160px); text-align: center; vertical-align: top; width: 65%; }
img.photo { object-fit: contain; height: 100%; width: 100%; }

div.separateur { border-top: 1px solid var(--col_bord_dk); color: var(--col_text_dk); font-size: .8em; margin: 15px 10px; text-align: center; width: calc(100% - 20px); }

div.legende[from='pho'] { box-sizing: border-box; float: left; margin: 0px; width: 17.5%; }
div.legende[from='pho'][position='left'] { padding-right: 5px; }
div.legende[from='pho'][position='right'] { padding-left: 5px; }
div.legende[from='pho'] div.notice { margin-top: 90px; }
div.legende[from='pho'][position='left'] img.poignee { float: left; margin-left: 25px; }
div.legende[from='pho'][position='left'] img.qrcode { float: right; }
div.legende[from='pho'][position='right'] img.poignee { float: right; margin-right: 25px; }
div.legende[from='pho'][position='right'] img.qrcode { float: left; }
p.legende { font-size: 1em; margin: 0px; padding: 0px 10px 0px 20px; text-align: justify; text-justify: auto; }

div.li-notice { margin-top: 5px; padding-left: 20px; }
div.li-notice img { float: left; margin-right: 5px; }
div.li-notice div { display: table-cell; float: left; line-height: 1.2em; vertical-align: middle; }

span.tiroir { cursor: help; -webkit-user-select: none; user-select: none; }

ul { display: none; margin: 0px; padding: 0px 0px 5px 2em; }
li { line-height: 1.5em; margin: 1px 0px; padding: 0px 0px 0px 8px; }
li::marker { color: var(--col_body_wg); content: '–'; }

span.symbole { color: var(--col_bord_dk); cursor: help; font-weight: bold; padding: 0px 10px; -webkit-user-select: none; user-select: none; }

/*----------------------------------------------------------------------------
 * CARTE
 *--------------------------------------------------------------------------*/

table.carte { border-collapse: collapse; height: auto; margin: auto; width: 90%; }
div.carte-centre { display: grid; grid-gap: 0; grid-template-rows: auto auto auto; height: calc(100vh - 150px); margin: 0; padding: 0; }
div.carte-centre-1 { grid-column: 1; grid-row: 1; padding-top: 10px; text-align: left !important; }
div.carte-centre-2 { grid-column: 1; grid-row: 2; }
div.carte-centre-3 { align-items: flex-end; display: flex; grid-column: 1; grid-row: 3; text-align: left !important; }
td.legende[from='crt'] { vertical-align: top; width: 100% !important; }

/*----------------------------------------------------------------------------
 * LISTE
 *--------------------------------------------------------------------------*/

table.liste { border-collapse: collapse; height: auto; margin: auto; width: 100%; }
tr.liste { height: calc((100vh - 170px) / 12); }
tr.liste[disabled='0']:hover { background: var(--col_over_dk); cursor: pointer; }
tr.liste-selection td { background: var(--col_over_dk); border-bottom: 1px solid var(--col_bord_lt); border-top: 1px solid var(--col_bord_lt); }
tr.liste-selection:hover { cursor: pointer; }
th.liste { border-bottom: 1px solid var(--col_bord_dk); color: var(--col_h3); font-size: 1.1em; font-weight: normal; text-align: left; text-transform: uppercase; }
td.liste-poignee { vertical-align: top; width: 100px; }
td.liste { padding-left: 1em; }
p.liste { color: var(--col_h2); display: table-cell; line-height: 1; vertical-align: middle; }
.liste[tab='20px'] { padding-left: 1em; }
img.liste { float: left; }
span.liste { color: var(--col_bord_dk); font-weight: bold; padding: 0px 10px; }

/*----------------------------------------------------------------------------
 * FILTRES
 *--------------------------------------------------------------------------*/

div.filtre-lign { border-bottom: 1px solid var(--col_bord_dk); display: block; text-align: center; width: 100%; }
div.filtre-lign h3 { font-size: 1.1em; margin: 1.2em auto 0px auto; padding-left: 0px; }
div.filtre-lign table { background: var(--col_body_lt); border-bottom: 1px solid var(--col_bord_lt); border-top: 1px solid var(--col_bord_lt); border-collapse: collapse; height: 60px; margin: 10px auto; text-align: left; width: 80%; }
div.filtre-case { display: inline-block; min-width: 375px; margin: 0px auto; max-width: 20vw; padding: 5px 0px; text-align: left; vertical-align: top; width: calc(20% - 6px); }
div.filtre-case span.titre { margin-top: 5px; }
div.filtre-case-demi { display: block; margin-top: 5px; height: 4.5em; }
div.filtre-case-qurt { display: inline-block; width: calc(50% - 10px); }

/*----------------------------------------------------------------------------
 * FORMULAIRE
 *--------------------------------------------------------------------------*/

div.base { display: inline-block; margin: 30px; }
div.admin { box-shadow: inset 0px 0px 30px var(--col_over_wg); }

div.info-perso { background: var(--col_body_lt); border: 1px solid var(--col_bord_lt); border-radius: 5px; display: inline-block; margin: 30px; height: 198px; vertical-align: top; width: 198px; }
p.info-perso-nom { color: var(--col_h3); font-size: medium; margin: 20px 0px; padding: 0px; }
p.info-perso-email { margin: 0px; padding: 0px; }
p.info-perso-profil { color: var(--col_h2); font-size: small; margin: 0px; padding: 0px; }

span.obligatoire { color: var(--col_h3); margin-right: 5px; }
span.obligatoire:hover { cursor: help; }

td.sep { padding: 15px; }
td.sep-bord { border-right: 1px solid var(--col_bord_dk); }

div.form-filtre { float: left; padding-left: 20px; margin-top: 7px; }
table.form-liste { border-collapse: collapse; margin: 0px; width: 100%; }
table.form-liste thead { display: block; width: 534px; }
table.form-liste tbody { display: block; height: calc(100vh - 190px); overflow-x: hidden; overflow-y: auto; width: 550px; }
table.form-liste tr { height: 30px; }
table.form-liste td.long { background-clip: text; background-image: linear-gradient(to left, var(--col_body_dk), var(--col_body_dk) 2%, var(--col_text_dk) 10%); padding-left: 20px; overflow: hidden; white-space: nowrap; -moz-background-clip: text; -moz-text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
table.form-liste td.court { padding-left: 20px; }
tr.form-liste:hover { background: var(--col_body_lt); cursor: pointer; }
tr.form-selection { background: var(--col_body_lt); border-bottom: 1px solid var(--col_bord_lt); border-top: 1px solid var(--col_bord_lt); }
tr.form-selection:hover { cursor: pointer; }
tr.form-selection td.long { background-image: linear-gradient(to left, var(--col_body_lt), var(--col_body_lt) 2%, var(--col_text_dk) 10%) !important; }
tr.form-selection td:first-child { position: relative; }

span.coche { color: var(--col_text_dk); left: 4px; position: absolute; -moz-text-fill-color: var(--col_text_dk); -webkit-text-fill-color: var(--col_text_dk); }

table.form-form { border-collapse: collapse; margin: 0px; }
table.form-form thead { display: block; }
table.form-form tfoot { border-top: 1px solid var(--col_bord_dk); display: block; }
table.form-form tbody { display: block; height: calc(100vh - 250px); overflow-y: auto; }
table.form-form tbody tr { height: 55px; }
table.form-form tbody tr td:not(:first-child) { height: 30px; padding-bottom: 5px; padding-top: 5px; }
table.form-lmp { width: 1000px; }
table.form-lmp th { border-bottom: 1px solid var(--col_bord_dk); color: var(--col_h2); font-weight: normal; vertical-align: bottom; }
table.form-lmp tbody { height: auto; overflow: visible; }

td.form-titre { color: var(--col_h2);  padding-right: 15px; text-align: right; width: 285px; }
td.form-titre-accent { color: var(--col_h2); padding-top: 17px !important; padding-right: 15px; text-align: right; vertical-align: top; width: 285px; }

td.form-edit { text-align: left; width: 800px; }
td.form-edit-accent { padding-top: 17px !important; text-align: left; vertical-align: top; width: 800px; }
p.info-accent { font-size: .8em; height: 10px; line-height: 1.2; margin: 0px 5px 5px 5px; padding: 0px; }
span.info-accent-1 { color: var(--col_h2); display: inline-block; padding-bottom: 1px; width: 54px; }
span.info-accent-2 { color: var(--col_h2); }
span.info-accent-3 { color: var(--col_h2); margin: 0px 5px; }

span.form-text-float { color: var(--col_text_dk); float: left; margin: 10px 20px 10px 0px; padding: 0px; }
span.form-text-fixed { color: var(--col_text_dk); margin-right: 5px; }

input.form-input { background: var(--col_body_dk); border: none; border-bottom: 1px dotted var(--col_bord_lt); color: var(--col_h3); font-size: 15px; max-width: 600px; }
input.form-input:focus { background: var(--col_body_lt); outline: none; }
input.form-input::placeholder { color: var(--col_text_dk); }

textarea { background: var(--col_body_lt); border: 1px dotted var(--col_bord_lt); border-radius: 5px; color: var(--col_h3); padding: 5px; resize: none; }
textarea:focus { outline: none; }
div.textarea-char-1 { color: var(--col_text_ph); float: right; margin-right: 80px; text-align: right; width: 40px; }
div.textarea-char-2 { color: var(--col_h3); float: right; text-align: right; width: 30px; }
div.textarea-char-3 { color: var(--col_h2); float: right; text-align: right; width: 150px; }
div.textarea-lien-char-1 { color: var(--col_text_ph); float: right; font-size: .8em; line-height: 1.2; margin-right: 10px; text-align: right; width: 30px; }
div.textarea-lien-char-2 { color: var(--col_h3); float: right; font-size: .8em; line-height: 1.2; text-align: right; width: 30px; }
div.textarea-lien-char-3 { color: var(--col_h2); float: right; font-size: .8em; line-height: 1.2; text-align: right; width: 150px; }
div.textarea-legende-1 { color: var(--col_h2); float: left; margin-left: 5px; width: 80px; }
div.textarea-legende-2 { float: left; text-align: right; width: 80px; }
div.textarea-legende-3 { color: var(--col_bord_lt); float: left; text-align: center; width: 30px; }

tr.textarea-legende { height: 10px !important; }
tr.textarea-legende td { font-size: .8em; height: 10px !important; line-height: 1.2; padding: 0px; }

div.lmp_add { float: left; font-size: 25px; height: 30px; line-height: 30px; margin: 20px 0px 0px 0px; width: 30px; }
div.lmp_suppr { float: left; font-size: 25px; font-weight: bold; height: 30px; line-height: 30px; margin: 10px 0px; width: 30px; }
div.bio2mnt { font-size: 40px; line-height: 35px; width: 40px }

tr.photo-choisie img.miniature#miniature { max-height: 300px; max-width: 300px; }

/*----------------------------------------------------------------------------
 * EDITEUR DE PHOTOS
 *--------------------------------------------------------------------------*/

div.edphoto-cadre { border: 1px solid var(--col_bord_ph); display: inline-block; padding: 2px; }
div.edphoto-visu { height: 500px; position: relative; width: 500px; }
div.edphoto-visu:hover { cursor: pointer; }
div.edphoto-zone { background: rgba(255,255,255,.3); border: 1px solid var(--col_zone_dk); border-radius: 2px; box-shadow: 1px 1px var(--col_zone_lt) inset, 1px -1px var(--col_zone_lt) inset, -1px 1px var(--col_zone_lt) inset, -1px -1px var(--col_zone_lt) inset; color: transparent; margin: 0px; padding: 2px; position: absolute; }
div.edphoto-zone:hover { cursor: move; }
div.edphoto-poignee { background: var(--col_zone_dk); position: absolute; height: 8px; width: 8px; }
div.edphoto-poignee.nw { top: -4px; left: -4px; }
div.edphoto-poignee.n  { top: -4px; left: calc(50% - 4px); }
div.edphoto-poignee.ne { top: -4px; left: calc(100% - 4px); }
div.edphoto-poignee.e  { top: calc(50% - 4px); left: calc(100% - 4px); }
div.edphoto-poignee.se { bottom: -4px; left: calc(100% - 4px); }
div.edphoto-poignee.s  { bottom: -4px; left: calc(50% - 4px); }
div.edphoto-poignee.sw { bottom: -4px; left: -4px; }
div.edphoto-poignee.w  { top: calc(50% - 4px); left: -4px; }
div.edphoto-poignee.n:hover,div.edphoto-poignee.s:hover { cursor: ns-resize!important; }
div.edphoto-poignee.e:hover,div.edphoto-poignee.w:hover { cursor: ew-resize!important; }
div.edphoto-poignee.nw:hover,div.edphoto-poignee.se:hover,div.edphoto-poignee.ne:hover,div.edphoto-poignee.sw:hover { cursor: move!important; }

input[type=file].edphoto-fichier { display: none; }

/*----------------------------------------------------------------------------
 * SELECTS
 *--------------------------------------------------------------------------*/

div.formselect { display: block; font-size: 0.9em; font-variant: normal; margin: 5px 20px; position: relative; -webkit-user-select: none; user-select: none; text-transform: none; }
div.formselect select { display: none; }
.select-selected { background: var(--col_text_dk); border: none; color: var(--col_text_wg); cursor: pointer; margin: 0; padding: 5px 25px 5px 10px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }
select:disabled+.select-selected { opacity: 0.3; }
select:enabled+.select-selected:hover { opacity: 0.8; }
select:enabled+.select-selected:focus { border: none; opacity: 0.8; }
.select-selected::after { border: 6px solid transparent; border-color: var(--col_bord_dk) transparent transparent transparent; content: ""; height: 0; position: absolute; top: 13px; right: 10px; width: 0; }
.select-selected.select-arrow-active::after { border-color: transparent transparent var(--col_bord_dk) transparent; top: 6px; }
.select-items { background: var(--col_text_dk); color: var(--col_text_wg); margin: 0; position: relative; }
.select-items div { border-bottom: 1px solid var(--col_bord_dk); cursor: pointer; margin: 0; padding: 5px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-items div:first-of-type { border-top: 1px solid var(--col_bord_dk); }
.select-items div:not(.opt-group):hover { background: var(--col_over_wg); color: var(--col_text_wg); }
.select-hide { display: none; }
.same-as-selected { background: var(--col_body_wg); color: white; }
.opt-group { background: var(--col_bord_dk); color: white; text-transform: uppercase; }
.opt-group:hover { cursor: not-allowed; }
input[type=text].select-filter { background-color: var(--col_bord_dk); background-image: url('/img/select_filtre.png'); background-repeat: no-repeat; background-size: contain; border: none; border-bottom: 1px solid white; color: white; display: block; font-size: .8em; height: 2.2em; margin: 0; padding-left: 2.2em; width: calc(100% - 2.2em); }
input[type=text].select-filter::placeholder { color: var(--col_text_dk); font-style: oblique; }
input[type=text].select-filter::selection { background: var(--col_body_wg); color: white; }
input[type=text].select-filter:focus { outline: none; }
.select-list { left: 0; margin: 0; margin-left: 10px; position: absolute; right: 0; top: 100%; width: 100%; z-index: 70; }

/*----------------------------------------------------------------------------
 * DUAL SELECTS
 *--------------------------------------------------------------------------*/

div.formdualselect { margin-left: 20px; -webkit-user-select: none; user-select: none; }
div.formdualselect select { display: none; }
div.formdualselect-container { border: none; color: var(--col_text_ph); float: left; font-size: .95em; height: 11.8em; margin: 0px; }
div.formdualselect-buttons { border: none; float: left; font-size: 1.5em; margin: 0px; padding-top: 3em; text-align: center; width: 1.5em; }
div.formdualselect-select { background: var(--col_text_dk); height: 9.5em; margin: 2px 0px; overflow-x: hidden; overflow-y: scroll; width: 11em; }
div.formdualselect-option { border: none; color: var(--col_text_wg); font-size: 1em; display: block; height: 1em; overflow: hidden; padding: 0px 5px 5px 5px; text-overflow: ellipsis; width: calc(100% - 10px); white-space: nowrap; }
div.formdualselect-option:hover { background: var(--col_over_wg); cursor: grab; }

/*----------------------------------------------------------------------------
 * CHECKBOX
 *--------------------------------------------------------------------------*/

label.formcheck { color: var(--col_text_dk); cursor: pointer; display: block; font-size: medium; margin-right: 20px; padding-left: 50px; padding-top: 2px; position: relative; text-align: left; -webkit-user-select: none; user-select: none; }
.formcheck input { cursor: pointer; height: 0; opacity: 0; position: absolute; width: 0; }
.formcheck .checkmark { background-color: var(--col_body_dk); border: var(--col_bord_ph) 2px solid; border-radius: 5px; height: 20px; left: 0; margin-left: 20px; position: absolute; top: 0; width: 20px; }
.formcheck .checkmark:after { content: ''; position: absolute; display: none; }
.formcheck:hover input ~ .checkmark { background-color: var(--col_body_lt); }
.formcheck input:checked ~ .checkmark { background-color: var(--col_body_wg); }
.formcheck input:checked ~ .checkmark:after { border: var(--col_h3) solid; border-width: 0 3px 3px 0; display: block; height: 10px; transform: rotate(45deg); margin-left: 6px; margin-top: 1px; width: 5px; }

/*----------------------------------------------------------------------------
 * GRAPHIQUE DES VISITES
 *--------------------------------------------------------------------------*/

div.graph-leg-vert { color: var(--col_grf_txt); display: inline-block; font-size: 10px; height: 110px; rotate: 180deg; text-align: right; text-orientation: mixed; -webkit-user-select: none; user-select: none; width: 12px; writing-mode: vertical-rl; }
div.graph-zone { border-bottom: 1px solid var(--col_grf_axe); border-left: 1px solid var(--col_grf_axe); border-right: 1px dotted var(--col_text_dk); display: inline-block; height: 100px; margin-bottom: 15px; position: relative; width: calc(100% - 20px); }
div.graph-grad { border-top: 1px dotted var(--col_text_dk); bottom: 0px; position: absolute; width: 100%; }
div.graph-bar-bar { background-color: var(--col_grf_bar); border: 1px solid var(--col_grf_brd); bottom: 0px; margin-left: 2px; margin-right: 2px; position: absolute; width: calc((100% - 48px)/ 12); }
span.graph-bar-txt { bottom: 0px; color: var(--col_grf_txt); font-size: 9px; line-height: 10px; position: absolute; text-align: center; -webkit-user-select: none; user-select: none; width:100%; }
span.graph-bar-leg { bottom: -14px; color: var(--col_grf_txt); font-size: 9px; line-height: 10px; position: absolute; text-align: center; -webkit-user-select: none; user-select: none; width:100%; }