/* variables */
:root {
    --info: lightblue;
    --infoHover: darkblue;
    --success: lightgreen;
    --successLight: #e5f8e5;
    --warning: orange;
    --danger: tomato;
    --warningLight: lightyellow;
    --duration: 0.3s;
}

/* menu de navigation */
.navbar {
    display: flex;
    padding: 10px 0 10px 1em;
    border-bottom: 1px solid lightgray;
    margin-bottom: 1em;
    background-color: #F4F9FD;
}
.navbar a {
    text-decoration: none;
    color: black;
}
.navbar ul {
    display: flex;
    margin: 0;
    gap: 1em;
}
.navbar li, .navbar-brand {
    list-style: none;
    padding: 15px;
}
.navbar li:hover, .navbar li.current, a.btn {
    background-color: lightgray;
    border-radius: 1em;
}
.navbar li.current:hover, a.btn:hover {
    background-color: darkgray;
}

a.btn {
    padding: 7px 15px;
}


/* alertes */
.alert {
    padding: 1em 2em;
    width: 30rem;
    border-radius: 1em;
    margin: 0 0 2em 1em;
}
.alert-info {
    background: var(--info);
}
.alert-success {
    background: var(--success);
}
.alert-warning {
    background: var(--warning);
}
.alert-danger {
    background: var(--danger);
}

/* généralités sur contenu */
body {
    background: linear-gradient(#f3f9fd, white);
    min-height: 100vh;
}

body > div {
    padding: 1em;
}

.align-right {
    text-align: end;
}

.col-2 {
    columns: 2;
}
.col-3 {
    columns: 3;
}

.mt-2 {
    margin-top: 2em;
}

.mt-3 {
    margin-top: 3em;
}

.money {
    text-align: end;
}

a {
    text-decoration: none;
    color: black;
}

a:hover {
    text-decoration: underline;
}

details {
    margin-top: 1em;
}
summary {
    transition: font-weight var(--duration), font-size var(--duration);
    cursor: pointer;
}
details[open] summary {
    font-size: 1.2em;
    font-weight: bold;
}
details summary:after {
    content: ' (afficher les détails)';
}
details[open] summary:after {
    content: ' (masquer les détails)';
}

.flex-container {
    display: flex;
    gap: 2em;
    justify-content: space-around;
    flex-flow: row wrap;
}
.tooltip {
    border-bottom: 1px dashed #aaa;
}
.tooltip:after {
    content: ' ⍰';
}

/* formulaires */
form {
    width: clamp(300px, 60em, 960px);
}
.container-large form {
    width: clamp(300px, 90em, 1480px);
}
.fit-content {
    width: fit-content;
}
fieldset {
    margin-bottom: 2em;
}
legend {
    font-weight: bold;
    font-size: 1.5em;
    margin-bottom: 0;
}
form legend {
    margin-bottom: 1em;
}
div:has(> label) {
    margin-bottom: 1.5em;
}

label {
    display: block;
    margin-bottom: 0.5em;
}

label.required::after {
    content: " *";
    color: var(--danger);
}

label:has( + input[type="checkbox"]) {
    display: inline;
}

input[type="checkbox"] {
    width: auto;
    margin-left: 1em;
}

form .help-text {
    font-style: italic;
    margin-top: 0.2em;
}

input, textarea {
    display: inline-block;
    width: calc(100% - 3em);
}

textarea {
    min-height: 10em;
}
li {
    margin-bottom: 1em;
}

div:has(> button[type="submit"]) {
    text-align: right;
    padding-right: 0.5em;
}

button[type="submit"] {
    background: var(--info);
    border: none;
    padding: 0.5em;
    border-radius: 0.5em;
    cursor: pointer;
    transition: background-color var(--duration) ease-in-out, color var(--duration) ease-in-out;
}

button[type="submit"]:hover {
    background: var(--infoHover);
    color: white;
}

.bien-annexe-form {
    padding: 0;
}

.bien-annexe-form li {
    list-style: none;
    margin: 0 0 1em 0;
    border: 1px solid var(--infoHover);
    border-radius: 0.5em;
    padding: 1em 0.5em 0 0.5em;
}

[data-form-collection-target] li {
    position: relative;
}

[data-form-collection-target] li button {
    position: absolute;
    bottom: 0;
    right: 0;
    background: none;
    color: transparent;
    text-shadow: 0 0 0 var(--danger);
    border: none;
    cursor: pointer;
    transition: transform var(--duration) ease-in-out;
}

[data-form-collection-target] li button:hover {
    transform: scale(1.4);
}

/* table */
table, tr, td, th {
    border: 1px solid lightgray;
    border-collapse: collapse;
    font-size: 95%;
    white-space: nowrap;
}

td, th {
    padding: 0.5em;
}

caption {
    margin-top: 1em;
    text-align: left;
    font-size: 1.2em;
    font-weight: bold;
    white-space: nowrap;
}

[data-hover] {
    cursor: pointer;
}

tr:nth-child(even) {
    background: lightgray;
}

.hover {
    background: blue;
    color: white;
}

.zebra-hover {
    cursor: pointer;
}

.zebra-hover tr:hover {
    background: darkgray;
}