/* propriétés universelles et réglages par défaut */
:root {
    font-size: 10px; /* base pour rem */
}

*,
*::after,
*::before {
    box-sizing: border-box;
}

/* présentation (nouveaux éléments HTML) */
aside,
details,
footer,
header,
main,
nav,
section,
details.shimmed  summary {
    display: block;
}

/* présentation */
.gras.gras { /* la répétition sert à augmenter la spécificité du sélecteur */
    font-weight: bold;
}
.italique.italique {
    font-style: oblique;
}
.souligne.souligne {
    text-decoration: underline;
}
.clear {
    clear: both;
    padding: 0;
    margin: 0;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
.clearfix_left::after {
    content: "";
    display: block;
    clear: left;
}

b,
strong {
    font-weight: bolder;
}

summary {
    font-weight: bold;
}

/* cadres avec defilement */
.cadre_scroll {
  border: thin dotted black;
  margin:  2mm;
  padding: 2mm;
  overflow: auto;
  --scroll-margin-top-after-header-sticky: 0;
}



/* listes horizontales */

.lst_horizontal {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lst_horizontal > li {
    display: inline;
}
ul.lst_horizontal > li:not(.prefixe):not([hidden]) ~ li::before {
    content: " | ";
}
ul.lst_horizontal > li.prefixe ~ li:not([hidden]) ~ li::before {
    content: " – ";
}
ol.lst_horizontal > li:not(.prefixe):not([hidden]) ~ li::before {
    content: " > ";
}
:is(ul, ol).lst_horizontal > li.prefixe:not([hidden])::after {
    content: ": ";
}

/* page */
html {
    background-color: var(--background-color);
    color: var(--color);
    margin: 0;
    padding: 0;
}
:fullscreen {
    background-color: var(--background-color);
}

body {
    font-family: var(--font-family-corps);
    font-size: var(--font-size-corps);
    margin: 0;
    padding: 0;
    --padding-top-body: 20px;
    --padding-bottom-body: 60px;
    --padding-left-right-body: 50px;
}
body.dependent {
    --padding-top-body: 15px;
    --padding-bottom-body: 20px;
    --padding-left-right-body: 40px;
}
body.with-padding {
    padding-top: var(--padding-top-body);
    padding-bottom: var(--padding-bottom-body)
    padding-left: var(--padding-left-right-body);
    padding-right: var(--padding-left-right-body);
}
body.padding-on-children > header,
body.padding-on-children > main,
body.padding-on-children > footer {
    padding-left: var(--padding-left-right-body);
    padding-right: var(--padding-left-right-body);
}
body.padding-on-children > header:first-of-type {
    padding-top: var(--padding-top-body);
}
body.padding-on-children > footer:last-of-type,
body.padding-on-children.no_footer > main:last-of-type {
    padding-bottom: var(--padding-bottom-body);
}
body.noscroll {
    overflow: hidden;
}

.cadre_contenu {
    font-family: var(--font-family-corps);
    font-size: var(--font-size-corps);
}

.entete_principal,
.sample-entete_principal {
    background: var(--background-header);
}

/* entete: deux bloc l'un à côté de l'autre */
.entete_principal_inner {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: start;
    gap: 0;
}
.entete_principal_inner > .entete_logo {
    flex: none;
}
.entete_principal_inner > .entete_droite {
    flex: auto;
}

.entete_logo {
    width: 200px;
    padding: 15px;
}
.entete_logo  img {
    max-width: 170px; /* pour les navigateurs ne supportant pas min() */
    max-width: min(170px, 100%);
}
@media (max-width: 1000px) {
    .entete_principal_inner > .entete_logo {
        width: calc(25% - 50px);
    }
}
@media (max-width: 700px) {
    .entete_principal_inner > .entete_logo,
    .entete_principal_inner > .entete_logo + .entete_sep{
        width: 0;
        display: none;
    }
    body.padding-on-children {
        --padding-left-right-body: 30px;
    }
}

.entete_droite {
    display: flex;
    flex-flow: column nowrap;
    justify-content: start;
    gap: 5px;
    margin-bottom: 5px;
}
.entete_droite > * {
    flex: none;
}

.entete_statut {
    display: flex;
    flex-flow: row wrap-reverse;
    align-content: flex-start;
    align-items: center;
    justify-content: right;
    text-align: right;
    gap: 0 3em;
    margin-bottom: 5px;
    padding: 0;
}
.entete_statut > .entete_titre {
    /* caché par défaut */
    display: none;
}

.menu_grid {
    display: none;
}

/* menu, sectionnement */
.menu {
    display: block;
    font-family: var(--font-family-navigation);
}
.menu > ul {
    display: inline;
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu > ul > li {
    display: inline-block;
    padding: 0;
    margin: 0;
}
.menu > ul > li + li {
    margin-left: 1.6em;
}
.menu.menu > ul > li > a,
.menu.menu > ul > li > .clickable,
.menu.menu > ul > li > .hide_clickable,
.menu.menu > ul > li > button.seamless {
    display: block;
    margin: 0;
    padding: 0.4em 0 0.2em;
}
.menu.menu > ul > li > a:visited,
.menu.menu > ul > li > a:link,
.menu.menu > ul > li > .clickable,
.menu.menu > ul > li > .hide_clickable,
.menu.menu > ul > li > button.seamless {
    color: var(--color-navigation-light);
    border-bottom: var(--border-bottom-navigation-inactif);
}
.menu.menu > ul > li.active > a,
.menu.menu > ul > li > a.active,
.menu.menu > ul > li.active > .clickable,
.menu.menu > ul > li.active > .hide_clickable,
.menu.menu > ul > li.active > button.seamless,
.menu.menu > ul > li > .clickable.active,
.menu.menu > ul > li > .hide_clickable.active,
.menu.menu > ul > li > button.seamless.active,
.menu.menu > ul > li > a:hover,
.menu.menu > ul > li > .clickable:hover,
.menu.menu > ul > li > .hide_clickable:hover,
.menu.menu > ul > li > button.seamless:hover {
    text-decoration: none;
    color: var(--color-navigation-actif);
}
.menu.menu > ul > li.active > a,
.menu.menu > ul > li > a.active,
.menu.menu > ul > li.active > .clickable,
.menu.menu > ul > li.active > .hide_clickable,
.menu.menu > ul > li.active > button.seamless,
.menu.menu > ul > li > .clickable.active,
.menu.menu > ul > li > .hide_clickable.active,
.menu.menu > ul > li > button.seamless.active {
    font-weight: var(--font-weight-navigation-actif);
    border-bottom: var(--border-bottom-navigation-actif);
}
.menu.menu > ul > li.active.evidence.evidence > a {
    color: var(--rouge);
}


.menu {
    font-size: var(--font-size-menu);
}
.menu1 {
    font-size: var(--font-size-menu-1);
}
.menu2 {
    font-size: var(--font-size-menu-2);
}


/* focus, sélection */
/*
Pour les éléments susceptibles de recevoir le focus,
arrondit les coins, ce qui se répercutera sur le box-shadow représentant le marqueur de focus
*/
a,
input[type=checkbox],
input[type=color],
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
input:not([type]),
details > summary,
textarea,
.menulist_wrapper {
    border-radius: 1px;
}
@supports (not (-moz-user-select: none)) {
    /*
    On exclut pour FF l'élément <select>,
    sinon il force un aspect non-natif à l'élément
    */
    select {
        border-radius: 1px;
    }
}
input[type=radio] {
    border-radius: 50%;
}
/* marqueur de focus */
:focus {
    outline: var(--outline-focus);
    outline-offset: var(--outline-offset-focus);
    box-shadow: var(--box-shadow-focus);
}
.select_tree:focus-within {
    outline: var(--outline-focus);
    outline-offset: var(--outline-offset-focus);
    box-shadow: var(--box-shadow-focus);
}
/* supprime le marqueur propre à Firefox sur certains éléments pour lesquels la règle ci-dessus ne fonctionne pas */
*::-moz-focus-inner {
    border: none;
}
/*
Pour les navigateurs supportant :focus-visible,
on supprime le marqueur de focus quand l'utilisateur n'en a pas besoin
*/
:focus:not(:focus-visible) {
    --box-shadow-focus: none;
}

/* curseur */
button:not(:disabled),
input[type=button]:not(:disabled),
input[type=image]:not(:disabled),
input[type=submit]:not(:disabled) {
    cursor: pointer;
}
input[type=file]:not(:disabled)::file-selector-button {
    cursor: pointer;
}
input[type=file]:not(:disabled)::-webkit-file-upload-button { /* Saf -14.0, Ch -88 */
    cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
}
input[type=file]:disabled::file-selector-button {
    cursor: not-allowed;
}
input[type=file]:disabled::-webkit-file-upload-button { /* Saf -14.0, Ch -88 */
    cursor: not-allowed;
}
input[type=date]:read-only,
input[type=datetime-local]:read-only,
input[type=email]:read-only,
input[type=month]:read-only,
input[type=number]:read-only,
input[type=password]:read-only,
input[type=search]:read-only,
input[type=tel]:read-only,
input[type=text]:read-only,
input[type=time]:read-only,
input[type=url]:read-only,
input[type=week]:read-only,
input:not([type]):read-only,
textarea:read-only {
    cursor: not-allowed;
}

/* couleur de sélection */
::selection {
    background-color: var(--color-evidence);
}


/* liens */
a {
    text-decoration: none;
}
a.ostensible,
.liens-ostensibles  a {
    text-decoration: underline;
    text-decoration-style: dotted;
}
a:not(.seamless):not(.icone_wrapper):hover,
a:not(.seamless):not(.icone_wrapper):active,
.clickable:hover  a {
    text-decoration: underline;
    text-decoration-style: solid;
}
.clickable:hover {
    cursor: pointer;
}
.clickable:not(:hover)  a:not(:hover),
.icone_wrapper.icone_wrapper.icone_wrapper {
    text-decoration: none;
}
a:link {
    color: var(--color-link);
}
a:visited {
    color: var(--color-link-visited);
}
a:active {
    color: var(--color-link-active);
}
a.seamless:link,
a.seamless:visited,
a.seamless:active {
    color: inherit;
}

/* hack pour lien couvrant tout l'arrière-plan d'une cellule de tableau */
.div_lien_bg {
    width: 100%;
    margin-top: -4000px;
    border: 0;
    padding: 0;
    height: 4000px;
}
.div_lien_bg > * {
    display: block;
    border: 0;
    padding: 0;
    width: 100%;
    height: 8000px;
}
.div_lien_bg.div_lien_bg > *:focus {
    /* supprime l'indicateur de focus */
    box-shadow: none;
}
.parent_lien_bg {
    overflow: hidden; /* cache la partie du lien qui dépasse */
}
.parent_lien_bg > .div_lien_bg > * {
    position: relative; /* Safari: pour activer l'element depassant de .div_lien_bg */
}
.parent_lien_bg > * {
    position: relative; /* pour placer les autres elements au-dessus du précédent */
}

/* formulaires */
form {
    margin: 0;
    padding: 0;
}
fieldset {
    border: var(--border-frame);
}
fieldset > legend {
    font-style: oblique;
}
fieldset.nolegend,
fieldset.noborder {
    border: none;
    padding: 0;
}
fieldset.noborder > legend {
    font-weight: bold;
}
textarea,
select {
    resize: vertical
}
input:not(.btn_large),
button:not(.btn_large),
select,
optgroup,
option,
textarea,
datalist {
    font-size: var(--font-size-input);
    font-family: var(--font-family-input);
}
input[type=file]:not(.btn_large)::file-selector-button {
    font-size: var(--font-size-input);
    font-family: var(--font-family-input);
}
input[type=file]:not(.btn_large)::-webkit-file-upload-button { /* Saf -14.0, Ch -88 */
    font-size: var(--font-size-input);
    font-family: var(--font-family-input);
}
.btn_large {
    font-size: var(--font-size-corps);
    font-family: var(--font-family-corps);
}


/* éléments de formulaire d'apparence texte: couleur de texte et de fond */
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=file],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
input:not([type]),
textarea,
select[size]:not([size="1"]):not([size="0"]),
select[multiple] {
    /*
    explicite pour les raisons suivantes:
    - éviter un problème de disparition avec FF lorsqu'un parent change dynamiquement le background-color
    - éviter les incohérences d'affichage entre les éléments stylés et non stylés
    */
    background-color: var(--background-color-input);
    color: var(--color-input);
}
input[type=date],
input[type=datetime-local],
input[type=month],
input[type=time],
input[type=week] {
    /* nécessaire pour que Safari Mobile n’utilise pas une couleur personnalisée non modifiable */
    -webkit-appearance: textfield;
    appearance: textfield;
}
input:read-only,
textarea:read-only {
    background-color: var(--background-color-input-readonly);
}
input:disabled,
textarea:disabled,
select[size]:not([size="1"]):not([size="0"]):disabled  *,
select[multiple]:disabled   * {
    background-color: var(--background-color-input-disabled);
    color: var(--color-input-disabled);
}
select[size]:not([size="1"]):not([size="0"])  *:disabled,
select[multiple]  *:disabled {
    color: var(--color-input-disabled);
}
@supports (-webkit-text-decoration: green) {
    /* Safari utilise déjà une couleur plus claire dans cette situation */
    input:disabled,
    textarea:disabled {
        color: var(--color-input);
    }
}

/* output */
output {
    display: inline-block;
    font-weight: bold;
}

/* input/type=color: corrections pour Safari */
input[type=color] {
    min-height: 1.6em;
    vertical-align: bottom;
}

/* progress */
progress {
    background-color: var(--background-color-alt);
    border: var(--border-input);
    border-radius: 1px;
}
progress::-webkit-progress-bar {
    background-color: var(--background-color-alt);
}
progress::-webkit-progress-value {
    background-color: var(--color-colored-ultralight);
}
progress::-moz-progress-bar {
    background-color: var(--color-colored-ultralight);
}

/* éléments de formulaire: bordure */
@supports (not (-moz-user-select: none)) {
    /*
    On exclut pour FF l'élément <select>
    sinon il force un aspect non-natif à l'élément
    */
    select {
        border: var(--border-input);
    }
}
/* Pour FF, on inclut néanmoins l'élément <select> multiligne */
select[size]:not([size="1"]):not([size="0"]),
select[multiple] {
    border: var(--border-input);
}

.textfield_wrapper,
.searchfield_wrapper {
    /* élément enveloppant <input>, dont le but est d'avoir une zone plus large pour l'activation */
    display: inline-block;
    padding-bottom: 1em;
    margin-bottom: -1em;
    position: relative;
}

input[type=number]:not(:focus)::-webkit-inner-spin-button,
input[type=number]:not(:focus)::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
}
input[type=number]:not(:focus) {
    -moz-appearance: textfield; /* FF -79 */
    appearance: textfield;
}

input[type=search] {
    padding: 1px 6px;
    border: var(--border-input-field);
    border-radius: 5px;
}
input[type=search]::-webkit-contacts-auto-fill-button {
    display: none !important;
}

/* input: border */
input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=text],
input[type=url],
input:not([type]) {
    border: none;
    border-bottom: var(--border-input-field);
    /* usually overridden by next rule */
}
.textfield_wrapper.textfield_wrapper > input,
.searchfield_wrapper.searchfield_wrapper > input {
    border: none;
    border-radius: 3px;
    margin-bottom: 0;
}
.textfield_wrapper.textfield_wrapper > input {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.searchfield_wrapper.searchfield_wrapper > input {
    font-size: 1.6rem;
    padding-left: 3.6rem;
    padding-right: 0.5rem;
    height: 3rem;
}
.textfield_wrapper > input[type=search],
.searchfield_wrapper > input[type=search] {
    -moz-appearance: textfield; /* FF -79 */
    -webkit-appearance: textfield; /* Ch -83, Saf -15.3 */
    appearance: textfield;
}
/* bordure sur input recouvrant le bas */
.textfield_wrapper > .textfield_border,
.searchfield_wrapper > .searchfield_border {
    position: absolute;
    content: '';
    display: block;
    box-sizing: content-box;
    width: auto;
    left: 0;
    right: 0;
    bottom: 1em; /* textfield_wrapper.padding-bottom */
    height: 1rem;
    border-top: none;
    border-right: var(--border-input-field);
    border-bottom: var(--border-input-field);
    border-left: var(--border-input-field);
    border-radius: 0 0 3px 3px;
    pointer-events: none;
}
.textfield_wrapper > input:disabled ~ .textfield_border,
.searchfield_wrapper > input:disabled ~ .searchfield_border {
    border-bottom: var(--border-input-field-disabled);
    border-left: var(--border-input-field-disabled);
    border-right: var(--border-input-field-disabled);
}
.searchfield_wrapper > .searchfield_icon {
    position: absolute;
    content: '';
    display: block;
    width: auto;
    height: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 1em; /* searchfield_wrapper.padding-bottom */
    background-image: url('$common/icones/material_design2/b_search.svg');
    background-position: 1rem center;
    background-repeat: no-repeat;
    background-size: 1.6rem;
    filter: invert(0.3) var(--filter-invert-if-csd);
    pointer-events: none;
}

textarea {
    border: var(--border-input-field);
    border-radius: 3px;
}

textarea:disabled {
    border: var(--border-input-field-disabled);
}

input.evidence_if_nonempty:not([_input_blank]),
textarea.evidence_if_nonempty:not([_input_blank]) {
    background-color: var(--background-color-evidence);
}

input.alerte {
    background-color: var(--background-color-incorrect);
}
input.partiel {
    background-color: var(--background-color-evidence);
}
input.ok {
    background-color: var(--background-color-ok);
}

/* éléments pour la construction de menu déroulant personnalisé: désactivé par défaut */
.menulist_wrapper {
    display: inline-block;
    position: relative;
}
.menulist_button {
    display: none;
    position: absolute;
}

/*
    Champs redessinés
    Les listes déroulantes sont implémentées selon la technique décrite sur:
        https://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes
    Les cases à cocher et les boutons radios sont stylées via:
        * un élément généré pour les navigateurs supportant
            input { appearance: none; } # set to non-replaced
            input::after { ... }
*/

input[type=color],
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=file],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
input:not([type]),
select,
textarea {
    min-height: 2.4rem;
    min-width: 2.4rem;
    margin-top: 0.2rem;
    font-size: var(--font-size-input-large);
}
button:not(.seamless),
.btn_large {
    min-height: 2.4rem;
    min-width: 2.4rem;
    margin-top: 0.2rem;
}
input[type=file]::file-selector-button {
    min-height: 2.4rem;
    outline: none;
}
input[type=file]::-webkit-file-upload-button { /* Saf -14.0, Ch -88 */
    min-height: 2.4rem;
    outline: none;
}

.menulist_wrapper {
    /* on ne définit pas min-height et min-width sur .menulist_wrapper
       afin qu'il fonctionne raisonnablement bien
       si son descendant a [hidden] ou [style*="display: none"]
    */
    margin-top: 0.2rem;
}

input[type=checkbox],
input[type=color],
input[type=radio],
.menulist_wrapper > select {
    border: var(--border-input);
    display: inline-block;
}



/* checkbox, radio button */
input[type=checkbox] {
    border-radius: 3px;
}

input[type=checkbox],
input[type=radio] {
    position: relative;
    vertical-align: bottom;
    height: 1.6rem;
    width: 1.6rem;
    margin-top: 0.6rem;
    margin-bottom: 0.4rem;
}

.compact {
    vertical-align: bottom;
}
.compact  input[type=checkbox],
.compact  input[type=radio],
input[type=checkbox].compact,
input[type=radio].compact {
    margin-top: auto;
    margin-bottom: auto;
}

.input_topalign {
    display: inline-block;
    margin-top: 0.6rem;
}


@supports (
    (transform: translateY(-0.1em) rotate(45deg))   /* needed for check mark drawing */
    and ((-webkit-appearance: none) or (clip-path: circle() /* FF54+ */))   /* ability to use checkbox/radio input as non-replaced element */
) {

    /* Use custom checkbox/radio */
    input[type=checkbox],
    input[type=radio] {
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
    }

    /* Check mark */
    input[type=checkbox]::after,
    input[type=radio]::after {
        position: absolute;
        display: none;
        content: '';
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

    /* Show check mark */
    input[type=checkbox]:checked::after,
    input[type=checkbox]:indeterminate::after,
    input[type=radio]:checked::after {
        display: block;
    }

    /* Checkbox tick */
    input[type=checkbox]::after {
        box-sizing: content-box; /* à cause d'un bogue de calcul de dimensions avec Safari */
        width: calc(0.5rem - 1px);
        height: calc(0.9rem - 1px);
        border-style: solid;
        border-width: 0 1px 1px 0;
        border-color: currentColor;
        transform: translateY(-0.1rem) rotate(45deg);
    }
    input[type=checkbox]:indeterminate::after {
        width: 1rem;
        height: 0;
        border-width: 1px 0;
        transform: none;
    }

    /* Radio button inner circle */
    input[type=radio]::after {
        margin: auto;
        width: 0.6rem;
        height: 0.6rem;
        background-color: currentColor;
        border-radius: 50%;
        border-width: 0;
    }

}



/* menulist */
.menulist_wrapper > select {
    -webkit-appearance: none; /* Ch -83, Saf -15.3 */
    -moz-appearance: none; /* FF -79 */
    appearance: none;
    margin: 0;
    padding: 0 2.2rem 0 1rem;
}

.menulist_wrapper,
.menulist_wrapper > select,
input[type=color] {
    border-radius: 5px;
}

/* menulist arrow */
.menulist_wrapper > .menulist_button {
    position: absolute;
    display: block;
    top: 0.5rem;
    right: 0.8rem;
    box-sizing: content-box;
    width: 0.8rem;
    height: 0.8rem;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: currentColor;
    transform: scaleX(0.8) rotate(45deg);
    pointer-events: none;
}

/* arbre */
.select_tree {
    display: inline-block;
    border: var(--border-input-field);
    padding: 0.5em;
    overflow: auto;
    --scroll-margin-top-after-header-sticky: 0;
    overflow-x: hidden;
    -moz-user-select: none; /* FF -68 */
    -webkit-user-select: none; /* Ch -53, Saf */
    user-select: none;
}
.select_tree .select_tree_option:not(summary) {
   padding-left: 1em;
}
summary.select_tree_option {
    font-weight: normal;
}
.select_tree .select_tree_suboptions {
    padding-left: 1em;
}
.select_tree .select_tree_option[data-selected] {
    background-color: var(--color-evidence);
}
.select_tree_option {
    white-space: nowrap;
}
.select_tree_option:not(summary),
summary.select_tree_option > * {
    cursor: default;
}



/* couleur des cases à cocher, boutons radio et menus déroulants */
/* base */
input[type=checkbox],
input[type=color],
input[type=radio],
.menulist_wrapper > select {
    color: var(--color-input);
    background: var(--background-buttonlike);
}
input[type=color].evidence_if_nonempty:not([_input_blank]),
.menulist_wrapper > select.evidence_if_nonempty:not([_input_blank]) {
    background: var(--background-buttonlike-evidence);
}
/*
Couleur et couleur de fond pour la liste déroulante déroulée et ses options,
pour les navigateurs supportant cette option.
Pour contourner les différences de rendu sur différents navigateurs:
* la couleur de fond (background-color) est indiquée sur <select> (nécessaire pour FF Mac)
    Si on veut un fond différent pour la liste non déroulée, il faut indiquer
    à l'aide de la composante background-image (p.ex. linear-gradient(...))
* le fond (background) — incluant la couleur et l'image — et la couleur de texte (color)
  sont indiqués explicitement pour tous les descendants de <select>
*/
.menulist_wrapper > select {
    background-color: var(--background-color-select-option);  /* ne pas toucher background-image */
}
.menulist_wrapper > select  * {
    background: var(--background-color-select-option);
    color: var(--color-input);
}
.menulist_wrapper > select  *:disabled {
    color: var(--color-input-disabled);
}

/* :active */
input[type=checkbox]:active,
input[type=color]:active,
input[type=radio]:active,
.menulist_wrapper > select:active {
    background: var(--background-buttonlike-active);
}
input[type=color].evidence_if_nonempty:not([_input_blank]):active,
.menulist_wrapper > select.evidence_if_nonempty:not([_input_blank]):active {
    background: var(--background-buttonlike-evidence-active);
}
/* :checked, :indeterminate */
input[type=checkbox]:checked,
input[type=checkbox]:indeterminate,
input[type=radio]:checked {
    background: var(--background-buttonlike-checked);
}
/* :checked, :indeterminate & :active */
input[type=checkbox]:checked:active:not(:disabled)::after,
input[type=checkbox]:indeterminate:active:not(:disabled)::after,
input[type=radio]:checked:active:not(:disabled)::after {
    display: none;
}
/* :disabled */
input[type=checkbox]:disabled,
input[type=color]:disabled,
input[type=radio]:disabled,
.menulist_wrapper > select:disabled {
    background: var(--background-button-disabled);
}
input[type=checkbox]:disabled,
input[type=color]:disabled,
input[type=radio]:disabled,
.menulist_wrapper > select:disabled,
.menulist_wrapper > select:disabled ~ .menulist_button {
    color: var(--color-input-disabled);
}

/* reporte les styles hidden/display:none/visibility:hidden sur le bouton */
.menulist_wrapper > select[hidden] ~ .menulist_button,
.menulist_wrapper > select[style*="display:none"] ~ .menulist_button,
.menulist_wrapper > select[style*="display: none"] ~ .menulist_button,
.menulist_wrapper > select[style*="visibility:hidden"] ~ .menulist_button,
.menulist_wrapper > select[style*="visibility: hidden"] ~ .menulist_button {
    display: none;
}
.textfield_wrapper > input[hidden] ~ .textfield_border,
.textfield_wrapper > input[style*="display:none"] ~ .textfield_border,
.textfield_wrapper > input[style*="display: none"] ~ .textfield_border,
.textfield_wrapper > input[style*="visibility:hidden"] ~ .textfield_border,
.textfield_wrapper > input[style*="visibility: hidden"] ~ .textfield_border {
    display: none;
}
.searchfield_wrapper > input[hidden] ~ .searchfield_border,
.searchfield_wrapper > input[style*="display:none"] ~ .searchfield_border,
.searchfield_wrapper > input[style*="display: none"] ~ .searchfield_border,
.searchfield_wrapper > input[style*="visibility:hidden"] ~ .searchfield_border,
.searchfield_wrapper > input[style*="visibility: hidden"] ~ .searchfield_border {
    display: none;
}
.searchfield_wrapper > input[hidden] ~ .searchfield_icon,
.searchfield_wrapper > input[style*="display:none"] ~ .searchfield_icon,
.searchfield_wrapper > input[style*="display: none"] ~ .searchfield_icon,
.searchfield_wrapper > input[style*="visibility:hidden"] ~ .searchfield_icon,
.searchfield_wrapper > input[style*="visibility: hidden"] ~ .searchfield_icon {
    display: none;
}

/* formulaire: separateurs */
hr.f_separateur {
    clear: both;
}
hr.f_separateur.epaisseur0 {
    margin: 0.2em;
}
hr.f_separateur.epaisseur1 {
    margin: 0.8em 0.2em;
    border-width: medium 0 0 0;
}

/* blocs flottants: formulaire::bloc_debut() */
.f_bloc_left,
.f_bloc_right {
    margin-top: 0.6em;
    margin-bottom: 0.6em;
}
.empilement_f_bloc:not(:first-of-type)  .f_bloc_left,
.empilement_f_bloc:not(:first-of-type)  .f_bloc_right {
    margin-top: 0;
}
.empilement_f_bloc:not(:last-of-type)  .f_bloc_left,
.empilement_f_bloc:not(:last-of-type)  .f_bloc_right {
    margin-bottom: 0;
}
.f_bloc_left {
    float: left;
    margin-left: 0;
    margin-right: 0.6em;
}
.f_bloc_right {
    float: right;
    margin-left: 0.6em;
    margin-right: 0;
}
.f_bloc_left,
.f_bloc_inner_left {
    text-align: left;
}
.f_bloc_right,
.f_bloc_inner_right {
    text-align: right;
}

.f_groupe_left {
    float: left;
}
.f_groupe_right {
    float: right;
}

.icone_btn {
    border: 0;
    vertical-align: -30%;
    margin-right: 1em
}
.icone_btn.material-symbols-outlined {
    margin-right: 0.5em;
}

/* formulaires, nouvelle présentation */
dialog.f_large.f_large,
dialog.f_large.f_large > .dialog-content {
    padding: 0; /* reset */
}

.f_large {
    font-size: 100%;
}

.f_large  h3.pg_titre,
.f_large  h3.pg_titre_1 {
    margin-top: 2.4rem;
    margin-bottom: 0;
}

.f_large  h3 {
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
}


.f_large  input {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}


.f_large  input[type=checkbox],
.f_large  input[type=radio] {
    /* font-size: 200%; */
    margin-right: 0.6rem;
}

.f_large  .f_unit:not([hidden]) ~ .f_unit:not(.no_margin_left),
.f_large  .f_unit:not([hidden]) ~ * > .f_unit:first-child:not(.no_margin_left),
.f_large  .f_unit.add_margin_left {
    margin-left: 1.2rem;
}


.f_large  .f_bloc_left,
.f_large  .f_bloc_right {
    margin: 0; /* reset */
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

.f_large  .f_groupe {
    padding: 0.3rem 2.4rem;
}
.f_large  .f_groupe  .f_groupe {
    padding: 0;
}
.f_large  .f_groupe_sect {
    padding: 1.4rem 0;
}

.f_large  .f_groupe_sect + .f_groupe_sect,
.f_large  form  ~  *  .f_groupe_sect,
.f_large  .f_groupe_sect  ~  *  .f_groupe_sect {
    border-top: var(--border-theme);
}


/* button, basic style */
button:not(.seamless),
.btn_large {
    border: var(--border-input);
    border-radius: 6px;
    color: var(--color);
}
input[type=file] {
    border-radius: 6px;
}

button:not(.seamless),
.btn_large {
    background: var(--background-button);
}
input[type=file]::file-selector-button {
    border: var(--border-input);
    border-radius: 6px;
    color: var(--color);
    background: var(--background-button);
}
input[type=file]::-webkit-file-upload-button { /* Saf -14.0, Ch -88 */
    border: var(--border-input);
    border-radius: 6px;
    color: var(--color);
    background: var(--background-button);
}

/* button:active */
button:not(.seamless):hover,
.btn_large:hover {
    background: var(--background-button-hover);
}
button:not(.seamless):active,
.btn_large:active {
    background: var(--background-button-active);
}
input[type=file]:hover::file-selector-button {
    background: var(--background-button-hover);
}
input[type=file]:active::file-selector-button {
    background: var(--background-button-active);
}
/* Saf -14.0, Ch -88 */
input[type=file]:hover::-webkit-file-upload-button {
    background: var(--background-button-hover);
}
input[type=file]:active::-webkit-file-upload-button {
    background: var(--background-button-active);
}

/* button: disabled */
button:not(.seamless):disabled,
.btn_large:disabled {
    color: var(--color-input-disabled);
    background: var(--background-button-disabled);
}
input[type=file]:disabled::file-selector-button {
    color: var(--color-input-disabled);
    background: var(--background-button-disabled);
}
input[type=file]:disabled::-webkit-file-upload-button { /* Saf -14.0, Ch -88 */
    color: var(--color-input-disabled);
    background: var(--background-button-disabled);
}


.btn_large {
    min-height: 3rem;
    padding: 0.4rem 2rem;
}



button[type=submit]:not(.nosubmit),
.btn_large.message_evidence,
button:not(.seamless).message_evidence,
.submit,
.submitiffalse,
.submitifdirty:not(.nosubmit),
.submitifvalid:not(.nosubmit) {
    font-weight: bold;
    color: var(--color);
}

/*
Dans les règles ci-dessous, réglant background-{color,image},
la répétition «.submit.submit» dans le sélecteur permet de lui donner
une spécificité supérieure aux règles correspondantes «button:not(.seamless)» au-dessus.
*/

button[type=submit]:not(.nosubmit):not(.submitiffalse):not(.submitifdirty):not(.submitifvalid),
.btn_large.message_evidence,
button:not(.seamless).message_evidence,
.submit.submit,
form[data-dirty]  .submitifdirty,
form:valid  .submitifvalid {
    background: var(--background-button-evidence);
}

button[type=submit]:not(.nosubmit):not(.submitiffalse):not(.submitifdirty):not(.submitifvalid):hover,
.btn_large.message_evidence:hover,
button:not(.seamless).message_evidence:hover,
.submit.submit:hover,
form[data-dirty]  .submitifdirty:hover,
form:valid  .submitifvalid:hover {
    background: var(--background-button-evidence-hover);
}

button[type=submit]:not(.nosubmit):not(.submitiffalse):not(.submitifdirty):not(.submitifvalid):active,
.btn_large.message_evidence:active,
button:not(.seamless).message_evidence:active,
.submit.submit:active,
form[data-dirty]  .submitifdirty:active,
form:valid  .submitifvalid:active {
    background: var(--background-button-evidence-active);
}

button[type=submit]:not(.nosubmit):not(.submitiffalse):not(.submitifdirty):not(.submitifvalid):disabled,
.btn_large.message_evidence:disabled,
button:not(.seamless).message_evidence:disabled,
.submit.submit:disabled,
form[data-dirty]  .submitifdirty:disabled,
form:valid  .submitifvalid:disabled {
    background: var(--background-button-evidence-disabled);
}




.btn_large  .icone_btn {
    vertical-align: middle;
}

.f_large  h3 {
    padding: 0.6rem 2.4rem;
}


/* boutons sans bordure */
button.seamless {
    margin: 0;
    border: none;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    -moz-appearance: none; /* FF -79 */
    -webkit-appearance: none; /* Ch -83, Saf -15.3 */
    appearance: none;
}
button.seamless:not(:disabled) {
    cursor: pointer;
}


/* images, icones */
img,
input[type=image],
.icone,
.icone_btn,
.icone_selection,
a.icone_wrapper {
    display: inline-block;
    border: 0;
    vertical-align: middle;
}
.icone > svg,
.icone_btn > svg,
.icone_selection > svg {
    display: block;
    white-space: pre;
}
.icone.icone { /* repété pour avoir une spécificité supérieure à «button.seamless» */
    margin-left: 0.2em;
    margin-right: 0.2em;
    /* force à ne pas dépasser la ligne de texte */
    margin-bottom: -5px;
    margin-top: -5px;
}
a.icone_wrapper > .icone {
    display: block;
}
.icone,
.icone_btn {
    filter: var(--filter-icone);
}
.icone:not(.old-icon-style),
.icone_btn:not(.old-icon-style) {
    width: 1.25em;
    height: 1.25em;
    fill: var(--color-icon);
}

.icone.small {
    width: 1em;
    height: 1em;
}
.icone.xsmall {
    width: 0.8em;
    height: 0.8em;
}
.icone.large {
    width: 1.5em;
    height: 1.5em;
}
.icone.xlarge {
    width: 2.0em;
    height: 2.0em;
}
.icone.xxlarge {
    width: 2.5em;
    height: 2.5em;
}
.icone.no_margin {
    margin: 0;
}

.material-symbols-outlined.icone,
.material-symbols-outlined.icone_btn,
.material-symbols-outlined.icone_selection {
    width: auto;
    height: auto;
}
.material-symbols-outlined[data-symbol-style=outline] {
    font-variation-settings: 'FILL' 0;
}
.material-symbols-outlined[data-symbol-style=solid] {
    font-variation-settings: 'FILL' 1;
}
.material-symbols-outlined[data-symbol-style=off] {
    font-variation-settings: 'FILL' 1;
    opacity: 0.5;
}
.material-symbols-outlined.icone,
.material-symbols-outlined.icone_btn {
    color: var(--color-icon);
    font-size: 1.5em;
}
.material-symbols-outlined.small {
    font-size: 1.2em;
}
.material-symbols-outlined.xsmall {
    font-size: 0.96em;
}
.material-symbols-outlined.large {
    font-size: 1.8em;
}
.material-symbols-outlined.xlarge {
    font-size: 2.4em;
}
.material-symbols-outlined.xxlarge {
    font-size: 3em;
}

/* ancien style d'icône; ne pas modifier */
.icone.old-icon-style {
    border-radius: 4px;
}
.icone.old-icon-style.small {
    width: 1.1em;
    height: 1.1em;
    margin-left: 0.2em;
    margin-right: 0.2em;
}
.icone.old-icon-style.xsmall {
    width: 1.1em;
    height: 1.1em;
    padding: 0.2em;
    margin-left: 0.1em;
    margin-right: 0.1em;
}
.icone.old-icon-style.large,
.icone.old-icon-style.xlarge {
    width: auto;
    height: auto;
}

.vignette {
    border: thin solid var(--color-ultralight);
}
.montrer_transparence {
    background-image: repeating-linear-gradient(-45deg, white 0 2.8284px, lightgray 2.8284px 5.6568px);
}

.invert {
    filter: var(--filter-invert);
}
.invert-if-csd {
    filter: var(--filter-invert-if-csd);
}


/* divers */
table {
    empty-cells: show;
}

table.proprietes {
    border: 0;
    margin-bottom: 1em;
}
table.proprietes:not(.no_sep) > tbody > tr > td,
table.proprietes:not(.no_sep) > tbody > tr > th {
    border-bottom: thin solid var(--color-ultralight);
}
table.proprietes.cle_fixed_width > tbody > tr > th.proprietes_cle,
table.proprietes.cle_fixed_width > tbody > tr > th.proprietes_cle_right {
    width: 8em;
    min-width: 8em;
}
table.proprietes > tbody > tr {
    vertical-align: top;
}
th.proprietes_entete {
    text-align: left;
    padding-right: 2em;
}
th.proprietes_cle {
    text-align: left;
    padding-right: 2em;
    font-weight: normal;
    color: var(--color-light);
}
th.proprietes_cle_right {
    text-align: right;
    padding-left: 2em;
    font-weight: normal;
    color: var(--color-light);
}
td.proprietes_valeur {
    text-align: left;
    padding-right: 2em;
    font-weight: normal;
    white-space: pre-line
}
table.proprietes > caption {
    font-weight: bold;
    font-size:   larger;
    margin:      .5em auto;
}


/* formulaire, présentation table */
.form_table {
    margin: auto;
}
.form_tr {
    vertical-align: top
}
.form_td_gauche {
    white-space: nowrap;
    padding-top: 0.4em;
    text-align: right;
}
.form_td_droite {
    text-align: left;
}
.form_td_unique {
    text-align: center;
}

.form_tr_separateur + .form_tr_separateur {
    display: none;
}


/* ... */
ul.liste_raccourcis {
    display: block;
    margin: 0;
    padding: 0;
}
ul.liste_raccourcis > li {
    display: inline-block;
    margin: 0.5em 1em 0.5em 0;
    width: 20%;
}

.hang {
    padding-left: 5em;
    text-indent: -5em;
}
.hang > * {
    text-indent: 0;
}

.para.para {
    margin-top: 1em;
    margin-bottom: 1em;
}

.user-select-all {
    user-select: all;
}

/* details */
details > summary {
    cursor: pointer;
}

/*
details[open] > :not(summary) {
    animation: show 1s;
}
@keyframes show {
    from { opacity: 0; }
    to { opacity: 1; }
}
*/

/* hidden: toujours caché. Toujours caché. Nonobstant les autres règles, toujours caché. */
[hidden] {
    display: none !important;
}

/* template, pour les navigateurs ne le supportant pas (Ch25-, FF22-, Saf7.0-) */
template {
    display: none !important;
}

/* dialog */
dialog {
    /* valeurs natives, pour le polyfill */
    position: absolute;
    left: 0;
    right: 0;
    width: -moz-fit-content; /* FF -93 */
    width: -webkit-fit-content; /* Ch -45, Saf -10 */
    width: fit-content;
    height: -moz-fit-content; /* FF -93 */
    height: -webkit-fit-content; /* Ch -45, Saf -10 */
    height: fit-content;
    margin: auto;
}
dialog:not([open]) {
    /* natif: display: none; */
    /* Cependant, si une fenêtre de dialogue n'est pas ouverte, elle n'est pas ouverte. */
    display: none !important;
}

dialog:not(.seamless) {
    display: inline-block;

    z-index: 100;

    border: thin solid var(--color-ultralight);
    border-radius: 0.6rem;
    outline: solid medium transparent;
    outline-offset: 0;
    box-shadow: 0 0 16px 0 var(--background-color-backdrop);

    padding: var(--padding-dialog);
    overflow: auto;
    --scroll-margin-top-after-header-sticky: 0;

    text-align: left;
    font-family: var(--font-family-corps);
    font-size: var(--font-size-corps);
    font-weight: normal;
    font-variant: normal;
    line-height: normal;

    background-color: var(--background-color);
    color: var(--color);

    white-space: normal;
}

/*
avec overflow-y: auto, et width: fit-content,
la largeur peut être calculée sans tenir compte des barres de défilement,
puis les barres de défilement peuvent être placée, ce qui rend la boite de dialogue trop étroite.
La classe suivante sert à imposer la présence des barres de défilement le cas échéant (réglé par JS).
*/
dialog.overflow_height_scroll,
dialog > .dialog-content.overflow_height_scroll{
    overflow-y: scroll !important;
}

.backdrop {
    position: absolute;
    border: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: var(--background-color-backdrop);
    opacity: 0.5;
}
::backdrop {
    background-color: var(--background-color-backdrop);
    opacity: 0.5;
}

.cadre_contenu > dialog:not(.seamless),
.cadre_contenu > .overDialog > dialog:not(.seamless) {
    position: fixed;
    top: 4rem;
    bottom: 4rem;
    display: inline-block;
    max-height: calc(100% - 8rem);
    max-width: calc(100% - 8rem);
}
/*
Contourne un problème avec certains navigateurs qui masquent ce qui dépassent de l’élément <dialog> (Saf. 15.4 notamment).
Pour ce, reporte le overflow: scroll sur le contenu, qui est dans un enfant de classe dialog-content.
Les éléments avec position: fixed peuvent alors se placer directement dans l’élément dialog.
Note: les :where(...) servent à ne pas augmenter la spécificité du sélecteur par rapport à la règle de base sous dialog:not(.seamless)
*/
:where(.cadre_contenu) > dialog:not(.seamless):where(:has(> .dialog-content)) {
    overflow: visible;
    max-height: none;
    border: none;
    padding: 0;
}
/*
Note: le :has(...) redondant sert à exclure les navigateurs qui ne reconnaitront pas la règle précédente
*/
:where(.cadre_contenu) > dialog:not(.seamless):where(:has(> .dialog-content)) > :where(.dialog-content) {
    overflow: auto;
    max-height: calc(100vh - 8rem - 2px); /* 2px: largeur de la bordure de dialog (estimation) */
    border: thin solid var(--color-ultralight);
    border-radius: inherit;
    padding: var(--padding-dialog);
}

/* Les deux règles suivantes sont utilisées pour le bricolage
   sur <dialog> pour les navigateurs ne supportant pas
   width: fit-content, afin d'avoir le résultat désiré (centrage horizontal)
   lors d'une boite de dialogue modale et globale,
   TODO: Faut-il généraliser la bidouille pour faire fonctionner dans toutes les conditions?
*/
.cadre_contenu > .overDialog {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 90;
    text-align: center;
}
.cadre_contenu > .overDialog > dialog:not(.seamless) {
    position: relative;
}
@supports (width: fit-content) or (width: -webkit-fit-content) {
    /*
    Chrome ne semble pas calculer correctement height: (-webkit-)fit-content avec position: relative dans cette situation
    Safari ne semble pas calculer correctement width: -webkit-fit-content avec position: absolute et box-sizing: border-box
    */
    .cadre_contenu > .overDialog > dialog:not(.seamless) {
        position: absolute;
        box-sizing: content-box;
    }
}

dialog.seamless {
    position: relative;
    display: block;
    border: none;
    padding: 0;
    min-height: 1em;
    max-height: 100%;
    background-color: transparent;
    white-space: normal;
}

/* instructions supplementaires pour l'impression */
@media print {
    html { background-image: none }
    div.cadre_scroll { overflow: visible }
    #tabs { display: none } /* quasi-obsolète */
    #panneau_lien { display: none } /* quasi-obsolète */
    #icones_navigation { display: none }
    .no_print { display: none }
    .panneau_plein:last-child { border-bottom: none }
}



.aff_theme_fond { /* uniquement entete de table, à supprimer à terme */
    background-color: var(--background-color-theme-dark);
}


/* titre de l'application */
h1#app_titre {
    margin: 0 0 0.4em 0;
    font-size: 1.6em;
    white-space: pre-wrap;
}

/* cadre */
header:not(.entete_principal),
.entete_principal_inner {
    border-bottom: var(--border-theme-light);
}
header.no-border-bottom,
.entete_principal_inner.no-border-bottom {
    border-bottom: none;
}

main {
    clear: both;
    border: none;
}
main.cadre_contenu_inner {
    padding-top: var(--reserve-petit);
}

main + main {
    page-break-before: always;
}
main + main.cadre_contenu_inner,
main + main > .cadre_contenu_inner {
    border-top: var(--border-theme-large);
    margin-top: 2em;
    padding-top: 2em;
}


/* liens sous le menu */
#panneau_lien  { /* obsolète */
    clear: both;
    padding: 0.3em 0;
    min-height: 1.8em;
}


/* panneau principal */
.panneau_plein  {
    clear: both;
    display: inline-block;
    width: 100%;
    padding-top: 1.5rem;
}

/* barre de titre */
#pg_titre,
.pg_titre {
    clear: both;
}
#pg_titre  h2,
.pg_titre  h2 {
    font-family: var(--font-family-titre);
    font-size: var(--font-size-titre-1);
    font-weight: normal;
    color: var(--color-titre);
    padding: 0.5em 0 0.5em;
    margin: 0;
    border-bottom: var(--border-theme-light);
}
#pg_titre.no-border-bottom  h2,
.pg_titre.no-border-bottom  h2 {
    border-bottom: none;
}
body.dependent  #pg_titre  h2,
body.dependent  .pg_titre  h2 {
    font-size: var(--font-size-titre-2);
}
#pg_titre  h2 > span:not(.tag_wrapper),
.pg_titre  h2 > span:not(.tag_wrapper) {
    font-size: 0.8em;
    color: var(--color-titre-complement);
    padding-left: 2em;
}

.etapes {
    float: right;
    margin: 0.2em;
    margin-left: 1em;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--color-light);
}
.etapes  span       {
    color: var(--color-light);
}
.etapes  span.actif {
    color: var(--color);
}


.boutons_titre {
    clear: right;
    float: right;
    white-space: nowrap;
    padding-top: 0.5em;
}

.prefs_titre {
    clear: right;
    float: right;
    white-space: nowrap;
    padding-top: 0.5em;
}

/* liens sous le titre */
.pg_barre_btn {
    clear: both;
    margin: 0;
    padding-top: var(--reserve-petit);
    padding-bottom: var(--reserve-petit);
    border-bottom: var(--border-theme-light);
}
.pg_barre_btn > .droite {
    float: right;
    text-align: right;
    margin-left: 2em;
}
.pg_barre_btn > .gauche {
    float: left;
    text-align: left;
    margin-right: 2em;
}

/* sections */

section.structure:not(.dialog-content) {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
}
section.structure + section.structure {
    border-top: var(--border-theme-large);
}
section.structure + section.structure.interne {
    border-top: var(--border-theme-light);
}
section.structure:empty:not(.toujours_visible) {
    display: none;
}
.toujours_visible {
    min-height: 2.4rem;
}
section[data-sectionnement]  section.structure:first-child,
.pg_titre_2 + section.structure,
.pg_titre_2 + section > section.structure:first-child {
    /* à revoir */
    padding-top: 1.2rem;
}

/* barre recherche */
.pg_barre_recherche {
    display: table;
    width: 100%;
}
span.span_recherche_alphabetique {
    display: table-cell;
    white-space: pre;
    width: 2%;
    padding: 0.3em 0.6em 0.3em 0;
}
span.span_recherche_alphabetique > span.gras {
    background-color: var(--background-color-evidence);
    outline: thick solid var(--background-color-evidence);
}
span.span_recherche_simple {
    display: table-cell;
    white-space: nowrap;
    width: 98%;
    min-width: 10em;
    padding: 0.3em 0.6em;
    text-align: left;
}
span.span_recherche_simple:first-child {
    padding-left: 0;
}
span.span_recherche_simple > input {
    max-width: 50em;
    width: 100%;
}
span.span_recherche_simple_btn {
    display:table-cell;
    white-space:nowrap;
    width:2%;
    padding:0.3em 0.3em 0.3em 0.6em;
    text-align:right;
}

/* pied de page */
.panneau_pied {
    clear: both;
    margin-top: 2.5rem;
    bottom: 0;
    height: 100%;
    font-size: var(--font-size-pied);
    width: 100%;
    color: var(--color-pied);
    background-color: var(--background-color);
}
.panneau_pied_inner {
    padding: 1em;
}
.panneau_pied  a:link,
.panneau_pied  a:visited {
    color: var(--color-link-pied);
}


/* titres intérieurs */
.pg_titre_2,
.pg_titre_1,
.pg_titre_0 {
    clear: both;
    font-family: var(--font-family-titre);
    font-size: var(--font-size-titre-2);
    font-weight: normal;
    color: var(--color-titre);
}
.pg_titre_2,
.pg_titre_0 {
    padding: 0;
    padding-bottom: 0.5em;
    border-collapse: collapse;
    margin: 0;
    margin-bottom: 0.2em;
}

.pg_titre_2,
.pg_titre_1 {
    border-bottom: var(--border-theme-light);
}

.pg_titre_wrapper,
.pg_titre_2,
.pg_titre_1 {
    margin-bottom: 0.8em;
}
.pg_titre_wrapper > .pg_titre_2,
.pg_titre_wrapper > .pg_titre_1 {
    margin-bottom: 0.2em;

}

.pg_titre_2.titre_interne,
.pg_titre_1.titre_interne,
.pg_titre_0.titre_interne,
h4.pg_titre_2,
h4.pg_titre_1,
h4.pg_titre_0 {
    font-size: var(--font-size-titre-3);
}
.pg_titre_1.titre_interne,
.pg_titre_0.titre_interne,
h4.pg_titre_1,
h4.pg_titre_0 {
    color: var(--color-titre-sombre);
}
hr + .pg_titre_2,
hr + div[id^="section_"] > .pg_titre_2 {
    /* déprécié: formulaire::separateur() suivi de page::section() */
    margin-top: 0.7em;
}

/* titres sticky */
@supports (position: sticky) and (scroll-margin-top: 10px) {
    header.sticky {
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--background-color);
    }
    header.sticky.header_over_content {
        box-shadow: 0 0px 20px 0px var(--background-color-backdrop);
        /* étend la zone blanche à gauche et à droite jusqu’au bord */
        margin-left: calc(-1 * var(--padding-left-right-body));
        margin-right: calc(-1 * var(--padding-left-right-body));
        padding-left: var(--padding-left-right-body);
        padding-right: var(--padding-left-right-body);
    }
    /* :is(#pg_titre, :not(#pg_titre) sert à forcer une spécificité haute */
    header.sticky.header_over_content:is(#pg_titre, :not(#pg_titre)) > :is(h1, h2, h3, h4, h5, h6) {
        margin-left: calc(-1 * var(--padding-left-right-body));
        margin-right: calc(-1 * var(--padding-left-right-body));
        padding-left: var(--padding-left-right-body);
        padding-right: var(--padding-left-right-body);
    }
    header.sticky ~ *,
    header.sticky ~ *   * {
        /* --scroll-margin-top-after-header-sticky est réglé
           dynamiquement sur le parent de header.sticky
        */
        scroll-margin-top: var(--scroll-margin-top-after-header-sticky);
    }
}

/* overflow: auto doit annuler --scroll-margin-top-after-header-sticky */
/* utiliser la classe overflow-auto plutôt que de modifier directement le style */
.overflow-auto.overflow-auto.overflow-auto {
    overflow: auto;
    --scroll-margin-top-after-header-sticky: 0;
}


/* entêtes libellé/valeur */
.entete {
    margin: 0.3em 0;
    padding: 0;
}
.entete  .label  {
    font-size: 0.9em;
    color: var(--color-light);
}
.entete  .valeur {
    font-weight: bold;
}
.entete  .valeur + .inline_sep::before {
    white-space: pre-wrap;
    content: "  —  ";
}
.entete_hr {
    display: none;
}
div.entete {
    float: left;
    clear: left;
}
input.entete {
    display: block;
    float: right;
    margin-right: 4em;
}
span.entete {
    display: block;
    float: right;
}

/* formulaires, messages */
.star {
    color: var(--rouge);
}
.star_r {
    color: var(--rouge);
}
.star_b {
    color: var(--bleu);
}

.message_evidence {
    color: var(--rouge);
    font-weight: bold;
    white-space: pre-line;
}
a:any-link.message_evidence.message_evidence.message_evidence.message_evidence,
button.seamless.message_evidence.message_evidence.message_evidence.message_evidence {
    color: var(--rouge);
}
.message_evidence_positif {
    color: var(--vert);
    font-weight: bold;
    white-space: pre-line;
}
a:any-link.message_evidence_positif.message_evidence_positif.message_evidence_positif.message_evidence_positif,
button.seamless.message_evidence_positif.message_evidence_positif.message_evidence_positif.message_evidence_positif {
    color: var(--vert);
}

.vue_limitee_vertical {
    border-top: thin dotted var(--color-light);
    border-bottom: thin dotted var(--color-light);
    overflow: auto;
    --scroll-margin-top-after-header-sticky: 0;
    resize: vertical;

}

/* tri des lignes */
form.form_tri  .tbl_liste  td {
    color: var(--color-light);
}

/* couleurs des priorités. Utilisé uniquement dans crm_ticket_details.php */
.exemple {
    border: var(--border-input-field);
    visibility:hidden;
    margin:0.3em;
}
.exemple.priorite1 {
    background-color: var(--background-color-priorite-1-alt);
    visibility:visible;
}
.exemple.priorite2 {
    background-color: var(--background-color-priorite-2-alt);
    visibility:visible;
}
.exemple.priorite3 {
    background-color: var(--background-color-priorite-3-alt);
    visibility:visible;
}
.exemple.priorite4 {
    background-color: var(--background-color-priorite-4-alt);
    visibility:visible;
}
.exemple.priorite5 {
    background-color: var(--background-color-priorite-5-alt);
    visibility:visible;
}



/* traits horizontaux */
hr {
    margin: 0.5em 0;
    padding: 0;
    border: 0;
    border-top: var(--border-theme-light);
}

/* exemple couleur */
.sample_theme {
    color: var(--color-theme-sample);
}

/* tag */
.tag_wrapper {
    position: relative;
    margin: 0 0.4em;
    vertical-align: middle;
    padding: 1px;
    line-height: 0;
}

span.tag_wrapper {
    display: inline-block;
}

.tag_wrapper + .tag_wrapper {
    margin-left: 0em;
}

.tag_wrapper_inner {
    white-space: nowrap;
}

.tag_wrapper_inner,
.tag_wrapper  [data-tag] {
    display: inline-block;
    vertical-align: baseline;
}

.tag_wrapper  [data-tag],
.tag_wrapper_inner:empty {
    position: relative;
    width: 1em;
    height: 1em;
    min-width: 1.5rem;
    min-height: 1.5rem;
    border: thin solid var(--background-color);
    background-clip: content-box;
    forced-color-adjust: none;
}

.tag_wrapper_inner:empty,
.tag_wrapper  [data-tag=""] {
    border: thin dotted var(--color-light);
    border-radius: 50%;
}

.tag_wrapper  [data-tag="1"] {
    background-color: var(--color-tag-1);
    border-radius: var(--border-radius-tag-1);
    transform: var(--transform-tag-1);
}
.tag_wrapper  [data-tag="2"] {
    background-color: var(--color-tag-2);
    border-radius: var(--border-radius-tag-2);
    transform: var(--transform-tag-2);
}
.tag_wrapper  [data-tag="3"] {
    background-color: var(--color-tag-3);
    border-radius: var(--border-radius-tag-3);
    transform: var(--transform-tag-3);
}
.tag_wrapper  [data-tag="4"] {
    background-color: var(--color-tag-4);
    border-radius: var(--border-radius-tag-4);
    transform: var(--transform-tag-4);
}
.tag_wrapper  [data-tag="5"] {
    background-color: var(--color-tag-5);
    border-radius: var(--border-radius-tag-5);
    transform: var(--transform-tag-5);
}
.tag_wrapper  [data-tag="6"] {
    background-color: var(--color-tag-6);
    border-radius: var(--border-radius-tag-6);
    transform: var(--transform-tag-6);
}
.tag_wrapper  [data-tag="7"] {
    background-color: var(--color-tag-7);
    border-radius: var(--border-radius-tag-7);
    transform: var(--transform-tag-7);
}
.tag_wrapper  [data-tag="8"] {
    background-color: var(--color-tag-8);
    border-radius: var(--border-radius-tag-8);
    transform: var(--transform-tag-8);
}
.tag_wrapper  [data-tag="9"] {
    background-color: var(--color-tag-9);
    border-radius: var(--border-radius-tag-9);
    transform: var(--transform-tag-9);
}

.tag_wrapper [data-tag] + [data-tag] {
    margin-left: -0.4em;
}

.tag_modifier.tag_modifier {
    left: 4em;
    right: auto;
    white-space: nowrap;
    min-width: 2rem;
    /* Safari: width/height: -webkit-fit-content ne semble pas fonctionner correctement ici */
    width: auto;
    height: auto;
}
@supports (transform: translateX(4em)) {
    /*
    technique alternative empêchant la boite de dialogue
    d'être coupée par un parent avec overflow: hidden
    */
    .tag_wrapper {
        position: static;
    }
    .tag_modifier.tag_modifier {
        left: auto;
        right: auto;
        transform: translateX(4em);
    }
}
.tag_wrapper[data-selectionne][data-selectionne]:not(.tag_wrapper_multiple) {
    background-color: var(--background-color-evidence);
}
.tag_wrapper[data-selectionne][data-selectionne]  .tag_button_toggle {
    background: var(--background-button-active);
}

/* notifications */
.notifications.notifications {
    position: relative;
    cursor: pointer;
    padding: 0.2em 0.8em;
    border-radius: 0.4em;
    border: none; /* thin dotted var(--color-ultralight); */
    background-color: var(--background-color);
    color: var(--color-ultralight);
}
.notifications:not(.notifications_alerte) {
    /* visibility: hidden; */
    display: none;
}
.notifications.notifications_alerte {
    background-color: var(--rouge);
    color: var(--background-color);
}
.notifications  .liste_notifications {
    left: auto;
    right: 0;
    margin: 0;
    width: 45em;
    background-color: var(--background-color-alt);
    padding: 0;
}
.notifications  .liste_notifications[open] {
    display: block;
}
.notifications  .liste_notifications > ul {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}
.notifications  .liste_notifications > ul > li {
    display: block;
    width: 100%;
    padding: var(--padding-dialog);
    margin: 0;
    min-height: 3em;
}
.notifications  .liste_notifications > ul > li + li  {
    border-top: thin solid var(--color-ultralight);
}
.liste_notifications  .notification_action {
    float: right;
    margin-left: 0.4em;
}
.liste_notifications  .notification_date {
    float: right;
    font-weight: normal;
}
.liste_notifications  .notification_action div {
    display: inline-block;
}
.liste_notifications  .notification_objet,
.liste_notifications  .notification_titre {
    font-weight: bold;
}
.liste_notifications  .notification_titre:not(:last-child)::after {
    content: ": ";
}

.notifications  .liste_notifications > ul > li[data-notification-etat="nouveau"] {
    background-color: var(--background-color);
}
.notifications  .liste_notifications > ul > li[data-notification-etat="lu"] {
    display: none;
}
.notifications  .liste_notifications > ul
.notifications  .liste_notifications > ul > li:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit
}
.notifications  .liste_notifications > ul
.notifications  .liste_notifications > ul > li:last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}


/* onglets modifier/prévisualiser */
.modif_preview_wrapper {
    display: inline-block;
    isolation: isolate;
}
.modif_preview_tablist {
    display: block;
    margin-bottom: -3px;
}
.modif_preview_tablist > button {
    padding: 0.5em;
}
.modif_preview_tablist > button.active {
    position: relative;
    z-index: 2;
    border: var(--border-input);
    border-bottom: 0;
    background-color: var(--background-color);
}
.modif_preview_modif {
    display: block;
}
.modif_preview_preview,
.modif_preview_var {
    display: block;
    border: var(--border-input);
    overflow-y: auto;
    resize: vertical;
}


.formulaire_colonne_separateur {
    border-left: var(--border-theme-light);
    padding: 0 10px;
}

/* Element drag n drop
*/
.zone_dnd {
    /*display: table-cell;*/
    float: left;
    width: 50%;
    height: 100%;
    padding: 0 1px;
    border-radius: 0.4em;
    border: var(--border-theme-light);
    background-color: var(--background-color-theme-dark);
}
.drop_dnd {
    font-weight: bold;
    width: 100%;
    text-align: center;
    margin: 4px 0;
    padding: 0.6em 0;
    border-radius: 0.4em;
    border: 0;
}
.drop_dnd_over {
    margin: 1px 0px;
    border: var(--border-theme-large);
    border-style: dashed;
}
.elem_dnd {
    float: left;
    width: 100%;
    margin-bottom: 1px;
    padding: 0.3em;
    line-height: 1.4em;
    border-radius: 0.4em;
    border: var(--border-theme-light);
    background-color: var(--background-color);
}
.elem_dnd > hr {
    border: var(--border-theme-ultralight);
    border-bottom: 0;
}
.action_dnd {
    display: inline;
    padding: 0.3em;
    margin-right: 0.3em;
    border-radius: 0.4em;
    border: var(--border-input);
}
.placeholder_dnd {
    display: none;
}

/* en sursis */

/* utilisé dans catalogue.php */
.pg_titre2 { font-size: 1.2em; font-weight: bold; float: left; clear: left; width: 28%; margin: 0; padding-left: 0.8em; }
.pg_groupe { float: left; clear: left; width: 100%; margin: 0; padding: 0.8em 0 0 0; }
.pg_hr     { float: left; clear: left; width: 100%; margin: 0; padding: 0; height: 0.8em; border-bottom: var(--border-theme) }


/* utilisé dans client_edit.php */
.client_edit_sep_bottom:not(:last-child) {
    border-bottom: var(--border-theme);
}


/*** temporaire ***/

/* section */

section.structure > section.structure:first-child {
    padding-top: 0;
}
section.structure > section.structure:last-child {
    padding-bottom: 0;
}

/* table.tbl_stats comme table.tbl_liste.table_liste_naturel */

table.tbl_stats_outer {
    margin-bottom: 0.5em;
    margin:     1em auto 1em 0;
}

table.tbl_stats_outer .separateur_vertical_outer + .separateur_vertical_outer {
    padding-left: 4px;
}

table.tbl_stats {
    width:      auto;
    margin:     1em auto 1em 0;
    clear:      both;
    border-spacing:  0;
    border:     none;
    border-collapse: collapse;
}
table.tbl_stats caption {
    font-weight: bold;
    font-size:   larger;
    margin:      .5em auto;
}

table.tbl_stats th {
    vertical-align: bottom;
    text-align:     center;
}


table.tbl_stats th {
    font-family: var(--font-family-titre);
    font-weight: var(--font-weight-titre);
    font-size: var(--font-size-titre-table);
    background-color: var(--background-color-theme-dark);
    color: var(--color);
}
table.tbl_stats th,
table.tbl_stats td {
    border:   none;
    padding:  0.6em;
    margin:   0;
    resize:   none;
}


table.tbl_stats tr                      { background-color: var(--background-color); }
table.tbl_stats tr:nth-of-type(odd)     { background-color: var(--background-color); }
table.tbl_stats tr:nth-of-type(even)    { background-color: var(--background-color-alt); }

table.tbl_stats tr:hover > td { background-color: var(--background-color-hover); }

table.tbl_stats td.separateur_vertical,
table.tbl_stats th.separateur_vertical {
    border-right: thin solid var(--background-color);
}

/* Drag n Drop
*/
.dnd_compat {
    cursor: pointer;/*fallback if no grab cursor*/
    cursor: -webkit-grab; /* Ch -67, Saf -10 */
    cursor: grab;
}
.dnd_compat:active {
    cursor: -webkit-grabbing; /* Ch -67, Saf -10 */
    cursor: grabbing;
}

/* Icone
*/
.icone_menu_titre {
    position: absolute;
    width: 2em;
    height: auto;
    margin-top: -0.6em;
    margin-left: -2.8em;
}
.icone_listing {
    width: 2em;
    height: auto;
}
.icone_selection {
    width: 3em;
    height: auto;
    margin: 0.3em 0;
    padding: 0.3em;
}
.icone_selection.material-symbols-outlined {
    margin: 0;
    padding: 0;
    font-size: 2.4em;
}

input:checked + .icone_selection {
    background-color: var(--background-color-evidence);
}

div.alterne > div:nth-of-type(even)     { background-color: var(--background-color-alt); }
div.alterne > div:nth-of-type(odd)      { background-color: var(--background-color); }

/* temporaire, à supprimer après conversion complète des champs pour utiliser .menulist_wrapper et .textfield_wrapper */

@supports (-webkit-text-decoration: green) {
    /* Comme Safari ne rend pas box-shadow sur certains éléments au style natif, utilise outline en tant qu'ersatz. */
    /* Note: On utilise ici le sélecteur non-standard :matches() (supporté par Saf9+) plutôt que le standard :is() (supporté par Saf14+) */
    :not(.menulist_wrapper) > select:not([multiple]):matches(:not([size]),[size="1"],[size="0"]):focus,
    :not(.textfield_wrapper):not(.searchfield_wrapper) > input:matches([type=email], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=url], :not([type])):focus {
        outline: 3px solid var(--color-evidence);
        outline-offset: 0px;
    }
}