/* ==========================================================================
   OsmoTools : calculs de dates ([osmova_calcul_age], [osmova_calcul_date])
   Âge exact, jours entre deux dates, date + durée, jours ouvrés et échéance.
   ========================================================================== */

.odt {
    --odt-noir: #0A0A0A;
    --odt-gris: #6B6B6B;
    --odt-gris-bg: #F6F7F9;
    --odt-border: #E5E7EB;
    --odt-blue: #0064FF;
    --odt-blue-bg: color-mix(in srgb, var(--odt-blue) 6%, white);
    --odt-blue-line: color-mix(in srgb, var(--odt-blue) 18%, white);
    --odt-rouge: #B42318;
    --odt-orange: #B54708;
    --odt-vert: #067647;
    --odt-ferie: #D92D20;
    --odt-mono: 'JetBrains Mono', monospace;
    margin: 0 0 40px;
    padding: 28px;
    border: 1px solid var(--odt-border);
    border-radius: 16px;
    background: #fff;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--odt-noir);
}

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

.odt [hidden] {
    display: none !important;
}

.odt__badge {
    display: inline-block;
    margin: 0 0 12px;
    padding: 4px 10px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--odt-blue) 10%, white);
    color: var(--odt-blue);
    font: 700 11px/1.4 var(--odt-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.odt .odt__title {
    margin: 0 0 8px;
    font-size: 1.5rem;
    line-height: 1.25;
}

.odt__intro {
    margin: 0 0 18px;
    font-size: 15px;
    color: var(--odt-gris);
}

.odt :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--odt-blue) 45%, white);
    outline-offset: 2px;
}

/* ---------- Onglets ---------- */

.odt__tabs {
    display: flex;
    gap: 4px;
    margin: 16px 0 20px;
    padding: 4px;
    border-radius: 12px;
    background: var(--odt-gris-bg);
}

.odt__tab {
    flex: 1 1 0;
    padding: 11px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--odt-gris);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.odt__tab:hover {
    color: var(--odt-noir);
}

.odt__tab[aria-selected="true"] {
    background: #fff;
    color: var(--odt-blue);
    box-shadow: 0 1px 3px rgba(10, 10, 10, .08), 0 0 0 1px var(--odt-border);
}

.odt__panel:focus-visible {
    border-radius: 8px;
}

/* ---------- Champs ---------- */

.odt__grid {
    display: grid;
    gap: 14px;
    margin: 0 0 14px;
}

.odt__grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.odt__grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.odt__grid--echeance {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr) minmax(0, 1.2fr) minmax(0, .8fr);
}

.odt__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
}

.odt__field > label {
    font-size: 13px;
    font-weight: 600;
}

.odt__inline {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.odt__inline > input {
    flex: 1 1 auto;
}

.odt input[type="date"],
.odt input[type="text"],
.odt select {
    width: 100%;
    min-width: 0;
    height: 50px;
    padding: 0 14px;
    border: 1px solid var(--odt-border);
    border-radius: 10px;
    background: #fff;
    font: 700 17px/1.2 var(--odt-mono);
    color: var(--odt-noir);
}

.odt input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
}

.odt input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
}

.odt select {
    padding-right: 30px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.odt input:focus,
.odt select:focus {
    border-color: var(--odt-blue);
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--odt-blue) 15%, white);
}

.odt input.is-error {
    border-color: var(--odt-rouge);
    background: #FEF3F2;
}

.odt__num {
    text-align: left;
}

.odt__unit {
    font-weight: 700;
    color: var(--odt-gris);
}

.odt__hint {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--odt-gris);
}

.odt__check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.odt__check input,
.odt__radio input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--odt-blue);
}

.odt__f29-box {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--odt-orange) 30%, white);
    border-radius: 12px;
    background: #FFFAEB;
}

.odt__f29-box legend {
    float: left;
    width: 100%;
    margin: 0 0 8px;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
}

.odt__f29 {
    display: flex;
    clear: both;
    flex-wrap: wrap;
    gap: 8px 22px;
}

.odt__radio {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* ---------- Boutons et raccourcis ---------- */

.odt__btn {
    flex: 0 0 auto;
    padding: 10px 16px;
    border: 1px solid var(--odt-border);
    border-radius: 10px;
    background: #fff;
    color: var(--odt-noir);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.odt__btn:hover {
    border-color: var(--odt-noir);
}

.odt__btn--sm {
    height: 50px;
    padding: 0 12px;
    font-size: 13px;
}

.odt__btn--main {
    border-color: var(--odt-blue);
    color: var(--odt-blue);
}

.odt__btn--main:hover {
    background: var(--odt-blue);
    color: #fff;
}

.odt__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: -2px 0 16px;
}

.odt__pills-lab {
    margin-right: 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--odt-gris);
}

.odt__pill {
    padding: 6px 12px;
    border: 1px solid var(--odt-border);
    border-radius: 999px;
    background: #fff;
    color: var(--odt-noir);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.odt__pill:hover {
    border-color: var(--odt-blue);
    color: var(--odt-blue);
}

/* ---------- Résultat principal ---------- */

.odt__res {
    padding: 20px 22px;
    border: 1px solid var(--odt-blue-line);
    border-radius: 14px;
    background: var(--odt-blue-bg);
}

.odt__res:empty {
    display: none;
}

.odt__res-lab {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--odt-gris);
}

.odt__res-lab::first-letter {
    text-transform: uppercase;
}

.odt__big {
    display: block;
    font: 800 clamp(24px, 4.6vw, 34px)/1.18 var(--odt-mono);
    letter-spacing: -.01em;
    color: var(--odt-blue);
    overflow-wrap: anywhere;
}

.odt__big::first-letter {
    text-transform: uppercase;
}

.odt__chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.odt__chips li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--odt-blue-line);
    border-radius: 10px;
    background: #fff;
}

.odt__chips span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--odt-gris);
}

.odt__chips b {
    font: 700 15px/1.3 var(--odt-mono);
    overflow-wrap: anywhere;
}

.odt__note {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.odt__note.is-warn {
    color: var(--odt-orange);
    font-weight: 600;
}

.odt__note.is-ok {
    color: var(--odt-vert);
    font-weight: 700;
}

.odt__res.is-error {
    border-color: #FECDCA;
    background: #FEF3F2;
}

.odt__err {
    margin: 0;
    color: var(--odt-rouge);
    font-weight: 600;
}

/* ---------- Cartes (âge) ---------- */

.odt__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0 0;
}

.odt__cards:empty {
    display: none;
}

.odt__card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--odt-border);
    border-radius: 12px;
}

.odt__card-t {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--odt-gris);
}

.odt__card-v {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
}

.odt__card-d {
    font-size: 13px;
    line-height: 1.45;
    color: var(--odt-gris);
}

.odt__bar {
    display: block;
    height: 6px;
    margin-top: 6px;
    border-radius: 99px;
    background: var(--odt-gris-bg);
    overflow: hidden;
}

.odt__bar i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--odt-blue);
}

/* ---------- Encadrés secondaires ---------- */

.odt__extras {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 12px;
    margin: 12px 0 0;
}

.odt__box {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--odt-border);
    border-radius: 14px;
}

.odt .odt__h3 {
    margin: 0 0 12px;
    font-size: 1.02rem;
    line-height: 1.3;
}

.odt .odt__h3--sep {
    margin: 26px 0 12px;
    padding-top: 22px;
    border-top: 1px solid var(--odt-border);
}

.odt__box .odt__inline input {
    flex: 0 0 96px;
    width: 96px;
}

.odt__box .odt__pills {
    margin: 10px 0 0;
}

.odt__mini {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 12px 0 0;
    font-size: 14px;
}

.odt__mini:empty {
    display: none;
}

.odt__mini strong {
    font-size: 16px;
    color: var(--odt-blue);
}

.odt__mini strong::first-letter {
    text-transform: uppercase;
}

.odt__etapes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.odt__etapes li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 10px;
    margin: 0;
    padding: 7px 0;
    border-bottom: 1px solid var(--odt-border);
    font-size: 14px;
}

.odt__etapes li:last-child {
    border-bottom: 0;
}

.odt__et-l {
    font-weight: 700;
}

.odt__et-d {
    font-family: var(--odt-mono);
    font-size: 13px;
    text-align: right;
}

.odt__et-s {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--odt-blue);
}

.odt__etapes li.is-past .odt__et-l,
.odt__etapes li.is-past .odt__et-d,
.odt__etapes li.is-past .odt__et-s {
    color: var(--odt-gris);
}

.odt__compare,
.odt__year {
    margin: 12px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--odt-border);
    border-radius: 14px;
}

.odt__compare summary,
.odt__year summary {
    font-weight: 700;
    cursor: pointer;
}

.odt__compare[open] summary,
.odt__year[open] summary {
    margin-bottom: 12px;
}

/* ---------- Jours ouvrés ---------- */

.odt__defs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 14px;
}

.odt__defs p {
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--odt-gris-bg);
    font-size: 13px;
    line-height: 1.5;
}

.odt__feries {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    margin: 12px 0 0;
    padding: 6px 16px;
    border: 1px solid var(--odt-border);
    border-radius: 14px;
    list-style: none;
}

.odt__feries li {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    justify-content: space-between;
    margin: 0;
    padding: 6px 0;
    font-size: 14px;
}

.odt__f-d {
    font-weight: 700;
}

.odt__f-d::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--odt-ferie);
    vertical-align: 1px;
}

.odt__feries li.is-we .odt__f-d::before {
    background: #D0D5DD;
}

.odt__f-n {
    color: var(--odt-gris);
}

.odt__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--odt-border);
    border-radius: 12px;
}

.odt__table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 14px;
}

.odt__table th,
.odt__table td {
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--odt-border);
    text-align: right;
    white-space: nowrap;
}

.odt__table th:first-child {
    text-align: left;
}

.odt__table thead th {
    background: var(--odt-gris-bg);
    font-size: 12px;
    font-weight: 700;
}

.odt__table td {
    font-family: var(--odt-mono);
}

.odt__table td:nth-child(3) {
    font-weight: 700;
    color: var(--odt-blue);
}

.odt__table tr.is-current {
    background: var(--odt-blue-bg);
}

.odt__table tr.is-total th,
.odt__table tr.is-total td {
    border-bottom: 0;
    font-weight: 800;
}

/* ---------- Bas de l'outil ---------- */

.odt__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    margin: 18px 0 0;
}

.odt__status {
    margin: 0;
    font-size: 13px;
    color: var(--odt-gris);
}

.odt__more {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--odt-gris);
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
    .odt__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .odt__grid--echeance {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .odt {
        padding: 18px;
    }

    .odt__grid--2,
    .odt__extras,
    .odt__defs,
    .odt__feries {
        grid-template-columns: 1fr;
    }

    .odt__grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .odt__tabs {
        flex-direction: column;
    }

    .odt__tab {
        text-align: left;
    }

    .odt__res {
        padding: 16px;
    }

    .odt__chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .odt__cards {
        grid-template-columns: 1fr;
    }

    .odt__grid--echeance > :first-child,
    .odt__grid--echeance > :last-child {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .odt__tab {
        transition: none;
    }
}