/* Garde-robe — Durée de vie (htdocs/assets/garderobe/duree.css), lot D. Cahier des charges § 8.6.
   Racine .ec-duree (conteneur). Mobile : une rangée de 72 par pièce, la barre sur toute la largeur ; dès
   760 px de largeur (bureau) : colonne des noms de 220, barres, valeur à droite, rangées de 56.
   Le calque (.dv-calque) est posé exactement sur la colonne des barres (--dv-g, --dv-d) : graduations,
   repères verticaux et zones de mort traversent toutes les rangées. Couleurs : jetons seulement. */

.ec-duree { container-type: inline-size; padding-bottom: 8px; }
/* Les puces défilent (overflow-x : leur ::before de 44 px serait coupé en hauteur) : 4 px de marge dessus et
   dessous, retirés des marges voisines (la mise en page ne bouge pas). */
.ec-duree .dv-puces { margin-top: 12px; padding-top: 4px; padding-bottom: 4px; padding-left: var(--gr-marge); }
.ec-duree .dv-puces > .g-puce { text-decoration: none; }
/* Un nom de catégorie ou de pièce sans espace (60 caractères permis) ne fait jamais déborder la page. */
.ec-duree .t-affiche { overflow-wrap: anywhere; }

/* ---------------- La phrase du brief ---------------- */
.ec-duree .dv-histoire { margin: 24px var(--gr-marge) 0; }
.ec-duree .dv-puces + .dv-histoire { margin-top: 20px; }
.ec-duree .dv-phrase { margin: 0; font: 400 26px/30px var(--gr-serif); text-wrap: balance; overflow-wrap: anywhere; }
.ec-duree .dv-legende { margin: 8px 0 0; font: 500 15px/21px var(--gr-sans); color: var(--gr-texte-2); overflow-wrap: anywhere; }

/* ---------------- Chargement en échec ---------------- */
.ec-duree .dv-erreur { margin: 24px var(--gr-marge); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ec-duree .dv-erreur-texte { margin: 0; display: flex; gap: 8px; align-items: flex-start; color: var(--gr-danger); font: 500 15px/21px var(--gr-sans); overflow-wrap: anywhere; }
.ec-duree .dv-erreur-texte > .g-ic { flex: none; margin-top: 1px; }

/* ---------------- Lignes de vie ---------------- */
.ec-duree .dv-vies {
    position: relative; margin-top: 28px; padding-top: calc(var(--nz, 0) * 18px + 24px);
    --dv-g: var(--gr-marge); --dv-d: var(--gr-marge-d, var(--gr-marge));
}
.ec-duree .dv-calque { position: absolute; top: 0; bottom: 0; left: var(--dv-g); right: var(--dv-d); pointer-events: none; }
.ec-duree .dv-grad { position: absolute; top: calc(var(--nz, 0) * 18px); bottom: 0; left: calc(var(--a) / var(--max) * 100%); width: 0; }
.ec-duree .dv-grad::before { content: ''; position: absolute; top: 18px; bottom: 0; left: 0; border-left: 1px solid var(--gr-ligne); }
.ec-duree .dv-grad > span { position: absolute; top: 0; left: 0; transform: translateX(-50%); color: var(--gr-texte-3); }
.ec-duree .dv-grad:first-child > span { transform: none; }
.ec-duree .fin > span { transform: translateX(-100%); }
.ec-duree .dv-zone {
    position: absolute; top: calc(var(--i, 0) * 18px); bottom: 0; min-width: 2px;
    left: calc(var(--de) / var(--max) * 100%); width: calc((var(--a) - var(--de)) / var(--max) * 100%);
    animation: g-fondu var(--d-long) linear 120ms both;
}
.ec-duree .dv-zone::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: calc((var(--nz, 1) - var(--i, 0)) * 18px + 24px);
    border-left: 1px dashed var(--gr-accent); border-right: 1px dashed var(--gr-accent);
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--gr-accent) 9%, transparent) 0 2px, transparent 2px 5px);
}
/* L'étiquette « † 990v6 · 12–17 », posée sur le calque (pas dans la zone) : sa boîte va du début de la zone au
   bord droit du calque (ou, .droite, du bord gauche à la fin de la zone) ; elle n'en sort jamais, le nom se coupe. */
.ec-duree .dv-zone-etiquette {
    position: absolute; top: calc(var(--i, 0) * 18px); left: calc(var(--de) / var(--max) * 100% - 1px); right: 0;
    display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden;
    font: 600 12px/16px var(--gr-sans); color: var(--gr-accent); white-space: nowrap; font-variant-numeric: tabular-nums;
    animation: g-fondu var(--d-long) linear 120ms both;
}
.ec-duree .dv-zone-etiquette.droite { left: 0; right: calc((1 - var(--a) / var(--max)) * 100% - 1px); justify-content: flex-end; }
.ec-duree .dv-zone-etiquette > .g-ic, .ec-duree .dv-ze-val { flex: none; }
.ec-duree .dv-ze-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.ec-duree .dv-rangees { position: relative; list-style: none; margin: 0; padding: 0; }
.ec-duree .dv-rangee {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "ident valeur" "barre barre" "etiq etiq"; align-items: center; gap: 8px 12px;
    min-height: 72px; padding: 10px var(--gr-marge-d, var(--gr-marge)) 10px var(--gr-marge);
    color: var(--gr-texte); text-decoration: none;
}
.ec-duree .dv-rangee:active { background: var(--gr-presse); }
.ec-duree .dv-rangee:focus-visible { outline: 2px solid var(--gr-focus); outline-offset: -2px; border-radius: var(--r-ctrl); }
@media (hover: hover) { .ec-duree .dv-rangee:hover { background: var(--gr-survol); } }
.ec-duree .dv-ident { grid-area: ident; display: flex; align-items: center; gap: 10px; min-width: 0; --vg: 32px; }
.ec-duree .dv-nom { min-width: 0; display: inline-flex; align-items: center; gap: 4px; font: 600 15px/20px var(--gr-sans); white-space: nowrap; }
/* Un texte nu dans un conteneur flex ne prend pas l'ellipse : le nom a son span, la dague ne rétrécit pas. */
.ec-duree .dv-nom-texte { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ec-duree .dv-nom > .g-ic { flex: none; }
.ec-duree .morte .dv-nom { color: var(--gr-texte-2); }
.ec-duree .dv-valeur { grid-area: valeur; font: 600 17px/22px var(--gr-sans); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.ec-duree .dv-valeur small { font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); }
.ec-duree .dv-rangee .g-vie { grid-area: barre; padding-top: 0; }
.ec-duree .dv-etiquettes { grid-area: etiq; min-width: 0; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Une pièce jetée garde sa couleur ici : la dague et le mot « rebut » disent sa mort. */
.ec-duree .dv-ident .g-vg { filter: none; opacity: 1; }

/* ---------------- Rodage (chaussures, cahier quantités § 7.5) ----------------
   Une rangée par paire : vignette de 32, nom (la matière dessous, texte-3), valeur à droite ; toute la rangée mène à
   la fiche. Le repère « en rodage » (.g-ic.g-rodage) est celui du socle. */
.ec-duree .dv-rodage { margin-top: 40px; }
.ec-duree .dv-rodage > h2 { margin: 0 var(--gr-marge) 8px; }
.ec-duree .dv-rd-phrase { margin: 0 var(--gr-marge) 12px; overflow-wrap: anywhere; }
.ec-duree .dv-rd-rangees { list-style: none; margin: 0; padding: 0; }
.ec-duree .dv-rd-rangee {
    display: flex; align-items: center; gap: 12px; min-height: 56px;
    padding: 8px var(--gr-marge-d, var(--gr-marge)) 8px var(--gr-marge); color: var(--gr-texte); text-decoration: none;
}
.ec-duree .dv-rd-rangee:active { background: var(--gr-presse); }
.ec-duree .dv-rd-rangee:focus-visible { outline: 2px solid var(--gr-focus); outline-offset: -2px; border-radius: var(--r-ctrl); }
@media (hover: hover) { .ec-duree .dv-rd-rangee:hover { background: var(--gr-survol); } }
.ec-duree .dv-rd-ident { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; --vg: 32px; }
.ec-duree .dv-rd-ident .g-vg { filter: none; opacity: 1; }
.ec-duree .dv-rd-nom { min-width: 0; display: flex; flex-direction: column; font: 600 15px/20px var(--gr-sans); }
/* Le nom n'est jamais coupé : il passe à la ligne (la valeur aussi, plus étroite). */
.ec-duree .dv-rd-nom-texte { overflow-wrap: anywhere; }
.ec-duree .dv-rd-nom > small { font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-3); overflow-wrap: anywhere; }
.ec-duree .dv-rd-valeur {
    flex: 0 1 auto; max-width: 45%; text-align: right; font: 500 15px/20px var(--gr-sans);
    color: var(--gr-texte-2); font-variant-numeric: tabular-nums;
}

/* ---------------- Paire par paire ---------------- */
.ec-duree .dv-tableau { margin-top: 40px; }
.ec-duree .dv-tableau > h2 { margin: 0 var(--gr-marge) 12px; }
.ec-duree .dv-table-boite { overflow-x: auto; padding: 0 var(--gr-marge); }
.ec-duree .dv-table { width: 100%; border-collapse: collapse; font: 500 15px/20px var(--gr-sans); font-variant-numeric: tabular-nums; }
.ec-duree .dv-table th, .ec-duree .dv-table td { height: 44px; padding: 10px 0 10px 12px; text-align: right; vertical-align: top; border-bottom: 1px solid var(--gr-ligne); }
.ec-duree .dv-table th:first-child { padding-left: 0; text-align: left; }
.ec-duree .dv-table thead th { font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); vertical-align: bottom; white-space: nowrap; }
/* Le nom tient sur une ligne tant que le tableau tient dans l'écran ; un nom très long sans espace se coupe
   (sinon il élargirait le tableau, ses autres colonnes hors de vue). */
.ec-duree .dv-table tbody th { font-weight: 600; overflow-wrap: anywhere; }
.ec-duree .dv-table tbody th .g-ic { margin-left: 4px; vertical-align: -2px; }
.ec-duree .dv-table td > small { display: block; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); white-space: nowrap; }
.ec-duree .dv-table td > span { white-space: nowrap; }
.ec-duree .dv-table abbr { text-decoration: none; }
.ec-duree .morte > th { color: var(--gr-texte-2); }
.ec-duree .dv-encours { color: var(--gr-texte-2); }
.ec-duree .dv-large { display: none; }

/* ---------------- Squelette ---------------- */
.ec-duree .dv-squelette { margin: 24px var(--gr-marge) 0; display: flex; flex-direction: column; gap: 12px; }
.ec-duree .dv-sq-barre { height: 8px; margin-top: 24px; }

/* ---------------- Bureau : la largeur de l'écran décide ---------------- */
@container (min-width: 760px) {
    .ec-duree .dv-phrase { font-size: 30px; line-height: 36px; max-width: 32ch; }
    .ec-duree .dv-vies { --dv-g: calc(var(--gr-marge) + 236px); --dv-d: calc(var(--gr-marge-d, var(--gr-marge)) + 80px); }
    .ec-duree .dv-rangee {
        grid-template-columns: 220px minmax(0, 1fr) 64px; grid-template-areas: "ident barre valeur" "ident etiq etiq";
        gap: 4px 16px; min-height: 56px; padding-top: 8px; padding-bottom: 8px;
    }
    .ec-duree .dv-etiquettes { grid-column: 2 / 3; }
    .ec-duree .dv-large { display: table-cell; }
    .ec-duree .dv-rodage { max-width: 720px; }
}