/* Écran de l'échéancier : mise en page de l'écran et feuille d'impression.
   Jetons dans ../commun/tokens.css, feuille d'outils dans ../commun/outils.css, chargées avant ce fichier.
   Tout passe par var(--…) : ni couleur, ni taille, ni espacement en px ici, y compris le filet (jeton --e-filet)
   et les conditions @media. Les 2px des traits sont des fractions de var(--e-1). */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { background: var(--fond); }
body { color: var(--encre); font: 400 var(--t-texte)/var(--interligne) var(--famille); -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums tabular-nums; }
a { color: inherit; }
.visuellement-cache { position: absolute; width: var(--e-filet); height: var(--e-filet); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.visuellement-cache:focus-visible + .lien-trait { outline: calc(var(--e-1) / 4) solid var(--or); outline-offset: calc(var(--e-1) / 2); border-radius: calc(var(--e-1) / 4); }
[hidden] { display: none !important; }

/* ===== En-tête : la marque, le nom de l'outil, le statut */
.entete, main, .pied-page { max-width: var(--largeur); margin: 0 auto; padding-left: var(--e-2); padding-right: var(--e-2); }
.entete { padding-top: var(--e-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); }
.marque { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-1); min-width: var(--cible); min-height: var(--cible); text-decoration: none; font-weight: 500; }
.rosace { fill: currentColor; }
.marque .rosace { width: var(--e-3); height: var(--e-3); flex: none; }
.outil { font-style: italic; color: var(--gris); }
.entete .place-statut { margin-left: auto; }

/* ===== Le bandeau du relevé : l'heure du départ, en tête */
.bandeau { margin-top: var(--e-4); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-4); }
.bandeau .jour { font-size: var(--t-sous); }
.bandeau .jour .etiquette { font-size: var(--t-texte); }
.bandeau b { font-weight: 600; }
.bandeau .lu { color: var(--gris); }

/* ===== Le verdict : la phrase du relevé, en tête du tableau */
.verdict-g { margin-top: var(--e-3); padding-top: var(--e-4); border-top: calc(var(--e-1) / 4) solid var(--encre);
  display: grid; grid-template-columns: 1fr auto; gap: var(--e-3) var(--e-6); align-items: end; }
.verdict { font-size: var(--t-verdict); font-weight: 400; line-height: 1; letter-spacing: -.02em; text-wrap: balance; max-width: 12em; }
.chute { display: block; margin-top: var(--e-2); font-size: var(--t-sous); line-height: 1.25; letter-spacing: 0; font-style: italic; }
.actions { display: flex; flex-wrap: wrap; gap: 0 var(--e-3); }
.sommaire { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-1); color: var(--gris); list-style: none; }
.sommaire a { color: var(--encre); text-decoration-line: underline; text-decoration-thickness: var(--e-filet); text-decoration-color: var(--filet);
  text-underline-offset: .3em; display: inline-flex; align-items: center; min-width: var(--cible); min-height: var(--cible); }
.sommaire .so-expire { color: var(--or); font-weight: 700; text-decoration-color: var(--or); }
.sommaire .so-date-inconnue { font-style: italic; font-weight: 600; }

/* ===== Le tableau des départs */
.tableau { margin-top: var(--e-6); }
.colonnes, summary { display: grid; grid-template-columns: 8em 9em minmax(0, 1fr) minmax(0, 1fr) var(--e-3); gap: var(--e-2); align-items: baseline; }
.colonnes { padding-bottom: var(--e-1); }
.colonnes .etiquette { font-size: var(--t-petit); }
.tableau .colonnes + .saison { margin-top: var(--e-1); }
.saison { margin-top: var(--e-4); }
.saison h2 { display: flex; align-items: baseline; gap: var(--e-1); font-size: var(--t-texte); font-weight: 600;
  padding-bottom: var(--e-1); border-bottom: calc(var(--e-1) / 4) solid var(--encre); }
.saison h2 .num { font-weight: 400; color: var(--gris); }
.saison ul { list-style: none; }
.l { position: relative; border-bottom: var(--e-filet) solid var(--filet); }
summary { list-style: none; cursor: pointer; min-height: var(--cible); padding: var(--e-1) 0; }
summary::-webkit-details-marker { display: none; }
summary .fin { font-size: var(--t-sous); line-height: 1.1; letter-spacing: .01em; }
summary .app { font-weight: 600; overflow-wrap: anywhere; }
summary .qui { display: contents; }
summary .ver { color: var(--gris); }
summary .ouvrir { justify-self: end; width: var(--e-1); height: var(--e-1); border-right: var(--e-filet) solid var(--gris); border-bottom: var(--e-filet) solid var(--gris);
  transform: translateY(-25%) rotate(45deg); transition: transform var(--d-ui) var(--courbe); }
details[open] > summary .ouvrir { transform: translateY(25%) rotate(-135deg); }
@media (hover: hover) and (pointer: fine) { summary:hover .app { text-decoration: underline; text-decoration-thickness: var(--e-filet); text-underline-offset: .3em; } }
.v-expire::before { content: ""; position: absolute; left: calc(-1 * var(--e-2) + var(--e-1) / 4); top: 0; bottom: 0; width: calc(var(--e-1) / 4); background: var(--or); }
.v-expire .verdict-l, .v-expire .fin { color: var(--or); font-weight: 700; }
.v-expire .fin { font-size: var(--t-texte); font-style: italic; }
.v-date-inconnue .verdict-l { font-style: italic; font-weight: 600; }
.v-date-inconnue .fin { color: var(--gris); }
.ouvert { padding: 0 0 var(--e-2) calc(17em + 2 * var(--e-2)); color: var(--gris); font-size: var(--t-petit); display: grid; gap: calc(var(--e-1) / 2); max-width: 60em; }
.ouvert .motif { color: var(--encre); font-size: var(--t-texte); }
.ouvert a { color: var(--encre); text-decoration-color: var(--or); text-underline-offset: .3em; }
.ouvert .src a { display: inline-flex; align-items: center; min-height: var(--cible); overflow-wrap: anywhere; }

/* ===== Pied du relevé */
.notes { margin-top: var(--e-6); padding-top: var(--e-2); border-top: var(--e-filet) solid var(--filet); color: var(--gris); max-width: 46em; display: grid; gap: var(--e-1); font-size: var(--t-petit); }
.pied-page { margin-top: var(--e-4); margin-bottom: var(--e-6); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-1) var(--e-3); color: var(--gris); font-size: var(--t-petit); }
.pied-releve .rosace { width: var(--e-6); height: var(--e-6); vertical-align: middle; margin-right: var(--e-2); color: var(--encre); }

/* ===== États : dépôt, attente, résultat (un seul visible à la fois, selon html[data-etat]) */
.depot-g { margin-top: var(--e-4); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-6); align-items: start; }
.depot-g h1 { font-size: var(--t-face); font-weight: 400; line-height: var(--interligne-titre); letter-spacing: -.012em; }
.depot { margin-top: var(--e-3); padding: var(--e-3); border: var(--e-filet) dashed var(--trait); border-radius: calc(var(--e-1) / 4); display: grid; gap: var(--e-1); }
.depot[data-etat="erreur"] { border-style: solid; border-color: var(--or); }
.depot .message { font-size: var(--t-sous); line-height: 1.25; }
.depot .aide { color: var(--gris); font-size: var(--t-petit); }
.seuil { margin-top: var(--e-3); display: grid; gap: calc(var(--e-1) / 2); }
.seuil select { justify-self: start; min-height: var(--cible); padding: 0 var(--e-4) 0 var(--e-1); font: inherit; color: var(--encre);
  background-color: var(--fond); border: var(--e-filet) solid var(--trait); border-radius: calc(var(--e-1) / 4);
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%), linear-gradient(135deg, var(--gris) 50%, transparent 50%);
  background-position: calc(100% - 1.1em) 55%, calc(100% - .8em) 55%; background-size: .3em .3em; background-repeat: no-repeat; }
.dresser { margin-top: var(--e-2); display: flex; flex-wrap: wrap; gap: 0 var(--e-3); }
button.lien-trait { font: inherit; background: none; border: 0; cursor: pointer; }
.depart-vide { border-top: calc(var(--e-1) / 4) solid var(--encre); }
.depart-vide .colonnes { padding-top: var(--e-1); border-bottom: var(--e-filet) solid var(--filet); }
.depart-vide .attente { padding: var(--e-4) 0; font-size: var(--t-sous); line-height: 1.3; color: var(--gris); max-width: 30ch; }
.lecture { list-style: none; margin-top: var(--e-3); border-top: calc(var(--e-1) / 4) solid var(--encre); }
.lecture li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-2); min-height: var(--cible); align-items: center; border-bottom: var(--e-filet) solid var(--filet); }
.lecture .fich { color: var(--gris); }
.lecture .lu { font-style: italic; color: var(--encre); }
.lecture li[data-lu="non"] { color: var(--gris); }
.lecture li[data-lu="non"] .lu { visibility: hidden; }

/* Dépôt et seuil seuls à l'écran : la colonne d'attente est absente, le dépôt prend toute la largeur */
html[data-etat="en-cours"] .depot-g, html[data-etat="resultat"] .depot-g { grid-template-columns: minmax(0, 1fr); }

/* Résultat : le dépôt n'est plus qu'une rangée (lien, seuil, « Dresser ») ; la zone pointillée et son message n'occupent plus de place */
html[data-etat="resultat"] .depot-g { margin-top: var(--e-3); }
html[data-etat="resultat"] .depot-g > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
html[data-etat="resultat"] .depot-g h1 { position: absolute; width: var(--e-filet); height: var(--e-filet); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[data-etat="resultat"] .depot { display: none; }
html[data-etat="resultat"] .seuil, html[data-etat="resultat"] .dresser { margin-top: 0; }

[data-vue] { display: none; }
html[data-etat="vide"] [data-vue~="vide"], html[data-etat="erreur"] [data-vue~="erreur"],
html[data-etat="en-cours"] [data-vue~="en-cours"], html[data-etat="resultat"] [data-vue~="resultat"] { display: revert; }

@media (max-width: 860px) {
  .verdict-g, .depot-g { grid-template-columns: 1fr; }
  .colonnes { display: none; }
  summary { grid-template-columns: auto 1fr var(--e-3); column-gap: var(--e-2); row-gap: 0; }
  summary .verdict-l { grid-column: 1; grid-row: 1; }
  summary .fin { grid-column: 2; grid-row: 1; }
  summary .ouvrir { grid-column: 3; grid-row: 1; }
  summary .qui { display: block; grid-column: 1 / -1; }
  summary .qui .tech::before { content: " · "; color: var(--gris); }
  .ouvert { padding-left: 0; }
  .depart-vide .colonnes { display: none; }
}
@media (max-width: 600px) {
  .entete { gap: var(--e-1); }
  .bandeau { margin-top: var(--e-1); gap: 0 var(--e-2); }
  .entete { padding-top: var(--e-2); }
  .verdict-g { margin-top: var(--e-1); padding-top: var(--e-1); gap: 0 var(--e-2); }
  .chute { margin-top: 0; }
  .actions { order: 3; }
  .tableau { margin-top: var(--e-1); }
  .saison { margin-top: var(--e-3); }
  .outil .long { display: none; }
}
@media (prefers-reduced-motion: reduce) { summary .ouvrir { transition: none; } }
@media print {
  .entete, .pied-page, .depot-g, .place-statut, .actions, .sommaire, .hors-impression, [data-col="fichier"] { display: none; }
  details > .ouvert { display: grid; }
}