/** Les règles ci-dessous sont déplacées dans root.css; conservés temporairement ici pour rétrocompatibilité */

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

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

/* valeurs pouvant être surchargées dans une customisation de l’habillage */
:root {
    --border-separateur-section-structure: var(--border-theme-large);
    --border-bottom-titre-principal: var(--border-theme-light);
    --border-bottom-entete: var(--border-theme-light);
    --padding-titre-principal: 0.5em 0;
}

/** fin des règles déplacées dans root.css */

/* 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: var(--border-radius-input);
}
@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: var(--border-radius-input);
    }
}
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),
details > summary {
    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);
    border-radius: var(--border-radius-fieldset);
}
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: var(--border-radius-input);
}
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: var(--border-radius-search-fallback);
}
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: var(--border-textfield-full-border);
    border-radius: var(--border-radius-input-field);
    margin-bottom: 0;
}
.textfield_wrapper.textfield_wrapper > input {
    padding-left: var(--padding-input-field);
    padding-right: var(--padding-input-field);
}
.searchfield_wrapper.searchfield_wrapper > input {
    font-size: var(--font-size-input-xlarge);
    padding-left: var(--padding-left-search-field);
    padding-right: var(--padding-input-field);
    height: var(--height-search);
}
.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: var(--display-textfield-bottom-border);
    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 var(--border-radius-input-field) var(--border-radius-input-field);
    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: var(--border-radius-input-field);
    padding: var(--padding-input-field);
}

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;
}

/*
    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: var(--height-input);
    min-width: var(--height-input);
    margin-top: 0.2rem;
    font-size: var(--font-size-input-large);
}
button:not(.seamless),
.btn_large {
    min-height: var(--height-button);
    min-width: var(--height-button);
    margin-top: 0.2rem;
}
input[type=file]::file-selector-button {
    min-height: var(--height-button);
    outline: none;
}
input[type=file]::-webkit-file-upload-button { /* Saf -14.0, Ch -88 */
    min-height: var(--height-button);
    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;
}
details > summary.buttonlike {
    border: var(--border-input);
}



/* checkbox, radio button */
input[type=checkbox] {
    border-radius: var(--border-radius-checkbox);
}

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 {
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
}

.menulist_wrapper > select {
    -webkit-appearance: none; /* Ch -83, Saf -15.3 */
    -moz-appearance: none; /* FF -79 */
    appearance: none;
    margin: 0;
    padding: 0 var(--padding-right-select) 0 var(--padding-select);
}

.menulist_wrapper,
.menulist_wrapper > select,
input[type=color],
details > summary.buttonlike {
    border-radius: var(--border-radius-menulist);
}

/* menulist arrow */
.menulist_wrapper > .menulist_button {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    flex: none;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: currentColor;
    transform: translate(-1.7rem, -0.1rem) rotate(45deg);
    pointer-events: none;
}

/* details summary */
details > summary.buttonlike {
    width: fit-content;
    padding: 0.2em 0.5em;
    border-width: thin;
}
details > summary.buttonlike::after {
    content: "..."
}
details[open] > summary.buttonlike {
    color: var(--color-button-active);
    background: var(--background-buttonlike-active);
}


/* 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,
details > summary.buttonlike {
    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,
details > summary.buttonlike: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);
    color: var(--color);
}
button:not(.seamless) {
    border-radius: var(--border-radius-button);
}
input[type=file] {
    border-radius: var(--border-radius-input-field);
}
.btn_large.btn_large {
    border-radius: var(--border-radius-button-large);
}

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

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

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

/*
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,
.btn_large.nosubmit_evidence,
button:not(.seamless).nosubmit_evidence,
.submit.submit,
form[data-dirty]  .submitifdirty,
form:valid  .submitifvalid {
    color: var(--color-button-evidence);
    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,
.btn_large.nosubmit_evidence:hover,
button:not(.seamless).nosubmit_evidence:hover,
.submit.submit:hover,
form[data-dirty]  .submitifdirty:hover,
form:valid  .submitifvalid:hover {
    color: var(--color-button-evidence-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,
.btn_large.nosubmit_evidence:active,
button:not(.seamless).nosubmit_evidence:active,
.submit.submit:active,
form[data-dirty]  .submitifdirty:active,
form:valid  .submitifvalid:active {
    color: var(--color-button-evidence-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,
.btn_large.nosubmit_evidence:disabled,
button:not(.seamless).nosubmit_evidence:disabled,
.submit.submit:disabled,
form[data-dirty]  .submitifdirty:disabled,
form:valid  .submitifvalid:disabled {
    color: var(--color-button-evidence-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,
form.icone_wrapper {
    display: inline-block;
    border: 0;
    vertical-align: middle;
}
.icone > svg,
.icone_btn > svg,
.icone_selection > svg {
    display: block;
    white-space: pre;
    height: 100%;
}
.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,
form.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: 1em;
}
th.proprietes_cle {
    text-align: left;
    padding-right: 1em;
    font-weight: normal;
    color: var(--color-light);
}
th.proprietes_cle_right {
    text-align: right;
    padding-left: 1em;
    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;
}

.photo-root {
    float:left;
    border: thin solid black;
    border:thin solid black;
    padding: 0.8rem;
    margin: 0.8rem;
    max-width: calc(100% - 1.6rem);
    text-align: center;
    border-radius: var(--border-radius-fieldset);
}


/* 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;
}

code.select_block {
    display: inline-block;
    white-space: pre-wrap;
    padding: 2px;
    margin: 1px;
    background-color: var(--background-color-alt);
    border: var(--border-input);
    border-radius: var(--border-radius-input);
    -webkit-user-select: all;
    user-select: all;
}

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


/* 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: var(--border-radius-dialog);
    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;
    font-size: 1.6em;
    white-space: pre-wrap;
}

/* cadre */
header:not(.entete_principal),
.entete_principal_inner {
    border-bottom: var(--border-bottom-entete);
}
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: var(--font-weight-titre);
    color: var(--color-titre);
    padding: var(--padding-titre-principal);
    margin: 0;
    border-bottom: var(--border-bottom-titre-principal);
}
#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-separateur-section-structure);
}
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: var(--font-weight-titre);
    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;

}

h4.pg_titre_2,
h4.pg_titre_1,
h4.pg_titre_0 {
    font-size: var(--font-size-titre-3);
}
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_inner:empty,
.tag_wrapper  [data-tag] {
    position: relative;
    width: 1em;
    height: 1em;
    min-width: 1.5rem;
    min-height: 1.5rem;
    background-clip: content-box;
    forced-color-adjust: none;
}

.tag_wrapper  [data-tag] {
    border: thin solid var(--background-color);
    background-color: var(--color-tag-fallback);
    border-radius: var(--border-radius-tag-fallback);
    transform: var(--transform-tag-fallback);
}

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

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

.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 {
    color: var(--color-button-active);
    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;
    }
}