/*
 * Habillage propre au relevé de temps. Ce qui vient de la charte
 * rétrofuturisme, et qui se transpose ailleurs, vit dans charte.css.
 *
 * Mobile d'abord : le CSS de base décrit le téléphone tenu à une main,
 * les media queries n'ajoutent que l'aisance des écrans larges.
 */

/* ---------- Gabarit commun ---------- */

/*
 * L'attribut `hidden` doit gagner contre nos propres règles : la feuille du
 * navigateur ne pose que `display: block` sur `[hidden]`, qu'un `display: flex`
 * de classe écrase sans un mot. Sans cette ligne, un bloc caché par le script
 * resterait à l'écran, ce qui s'est vu sur l'adresse publique des réglages.
 */
[hidden] {
  display: none !important;
}

.ecran {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
}

@media (min-width: 640px) {
  .ecran {
    gap: var(--space-lg);
    padding: var(--space-lg);
    max-width: 900px;
    margin: 0 auto;
  }
}

.bloc-titre {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--retro-teal);
  margin: 0 0 var(--space-sm);
}

/* ---------- En-tête de saisie : projet et total de la semaine ---------- */

.entete-saisie {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.selecteur-projet {
  font-family: 'Oswald', sans-serif;
  font-size: var(--text-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/*
 * Le total de la semaine est le détecteur d'anomalie du quotidien : il se lit
 * d'un coup d'œil, sans graphique. Chiffre héros, pas de série, pas de couleur
 * qui porterait une information à elle seule.
 */
.total-semaine {
  font-family: 'Anton', 'Oswald', sans-serif;
  font-size: clamp(2.5rem, 12vw, 3.5rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--retro-ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.total-semaine-legende {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  color: var(--retro-teal);
  margin: var(--space-xs) 0 0;
}

/* ---------- En-tête de l'historique : projet, filtre par mois, total ---------- */

.entete-historique {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.filtres {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

@media (min-width: 640px) {
  .filtres { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
}

/* ---------- Grille des tâches ---------- */

.grille-taches {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .grille-taches { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grille-taches { grid-template-columns: repeat(3, 1fr); }
}

/*
 * Une tuile est une cible de pouce : au moins 88 pixels de haut, soit deux fois
 * le plancher tactile, parce qu'on la vise en marchant, d'une main.
 */
.tuile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 88px;
  width: 100%;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: var(--text-md);
  color: var(--retro-ink);
  background: var(--retro-paper);
  border: 2px solid var(--retro-teal);
  border-radius: var(--radius-card-sm);
  box-shadow: inset 0 0 0 1px var(--retro-orange);
  padding: var(--space-md);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tuile:active { transform: scale(0.99); }

.tuile-nom {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tuile-total {
  font-size: var(--text-sm);
  color: var(--retro-teal);
  font-variant-numeric: tabular-nums;
}

/*
 * Tuile dont le chrono tourne. Inversion franche des couleurs, plus le mot
 * « en cours » : l'état ne tient jamais à la seule couleur.
 */
.tuile.active {
  background: var(--retro-ink);
  color: var(--retro-paper);
  border-color: var(--retro-jaune);
  box-shadow: inset 0 0 0 2px var(--retro-orange), var(--ombre-flottante);
}

.tuile.active .tuile-total { color: var(--retro-jaune); }

.tuile-etat {
  font-family: 'Oswald', sans-serif;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--retro-jaune);
}

/* Compteur rafraîchi à la seconde : chasse fixe, sans quoi les chiffres dansent */
.chrono {
  font-family: 'Anton', 'Oswald', sans-serif;
  font-size: var(--text-2xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ---------- Barres ---------- */

/*
 * Une seule échelle par graphique, valeur écrite à côté de chaque barre.
 * Les couleurs de séries viennent de --serie-1 à --serie-3, mesurées par le
 * validateur de la skill dataviz (voir charte.css) ; elles ne portent jamais
 * seules une information.
 */
.graphique {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
}

/*
 * Au téléphone, le libellé et sa mesure tiennent la première ligne, la barre
 * occupe la seconde sur toute la largeur : un nom de tâche entier vaut mieux
 * qu'un « Accomp… » posé devant une barre de deux centimètres. À partir des
 * écrans larges, les trois pièces s'alignent.
 */
.ligne-barre {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
}

/*
 * Les pièces sont placées à la main, et non laissées à l'auto-placement de la
 * grille : une piste qui occupe les deux colonnes ne tient pas sur la ligne du
 * libellé, elle descend d'un cran, et le placement automatique envoie alors la
 * mesure sur une troisième ligne, sous la barre, loin du libellé qu'elle
 * chiffre. Les positions explicites rendent aussi la disposition indifférente
 * à l'ordre du HTML, que la page de charte et barres.js n'ont aucune raison
 * d'écrire pareil.
 */
.ligne-barre-libelle { grid-column: 1; grid-row: 1; }
.ligne-barre-mesure { grid-column: 2; grid-row: 1; }
.ligne-barre-piste { grid-column: 1 / -1; grid-row: 2; }
.ligne-barre-description { grid-column: 1 / -1; grid-row: 3; }

@media (min-width: 640px) {
  .ligne-barre {
    grid-template-columns: 9rem 1fr auto;
    align-items: center;
    gap: var(--space-sm);
  }

  .ligne-barre-libelle { grid-column: 1; grid-row: 1; }
  .ligne-barre-piste { grid-column: 2; grid-row: 1; }
  .ligne-barre-mesure { grid-column: 3; grid-row: 1; }
  .ligne-barre-description { grid-column: 1 / -1; grid-row: 2; }
}

.ligne-barre-libelle {
  font-size: var(--text-sm);
  color: var(--retro-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ligne-barre-piste {
  display: block;
  position: relative;
  height: 14px;
  background: rgba(18, 118, 118, 0.12);
  border-radius: 4px;
}

/*
 * Extrémité arrondie du côté de la valeur, ancrée à la ligne de base à gauche.
 * Le `display` est dit plutôt que déduit de la balise : dans une piste, un
 * `span` resterait en ligne, donc large de rien, et la barre ne se verrait pas.
 *
 * Le remplissage est aussi le rail des segments, quand la barre porte sa
 * composition : ils s'y mesurent en pour cent de lui, jamais de la piste, ce
 * qui garde leurs proportions quand la barre grandit. Sans segments, il reste
 * l'aplat de sa série.
 */
.ligne-barre-valeur {
  display: flex;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--serie-1);
  min-width: 2px;
  overflow: hidden;
}

.ligne-barre-serie-2 .ligne-barre-valeur { background: var(--serie-2); }
.ligne-barre-serie-3 .ligne-barre-valeur { background: var(--serie-3); }

.ligne-barre-mesure {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--retro-ink);
  white-space: nowrap;
}

/*
 * La description d'une tâche, sur le tableau de bord public : elle explique
 * l'intitulé à qui ne l'a pas choisi. Elle prend toute la largeur et se lit un
 * cran plus bas que la barre, sans jamais rogner le nom au-dessus.
 */
.ligne-barre-description {
  font-size: var(--text-sm);
  color: var(--retro-teal);
  line-height: 1.35;
  text-wrap: pretty;
}

/*
 * Bâtonnet mensuel cliquable : il ouvre son mois. Ce qui l'annonce est le
 * bâtonnet lui-même, coloré par la composition du mois, et non un chevron
 * ajouté ; le survol et le focus ne font que confirmer ce qui est déjà là.
 */
button.ligne-barre {
  width: 100%;
  background: none;
  border: none;
  padding: var(--space-xs) var(--space-xs) var(--space-xs) 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  border-radius: var(--radius-sm);
  transition: background-color 120ms ease;
}

button.ligne-barre:hover {
  background-color: rgba(18, 118, 118, 0.08);
}

/*
 * La marque du focus ne tient pas à la couleur seule : un contour de deux
 * pixels décollé de la ligne, qui se voit en niveaux de gris comme au soleil.
 */
button.ligne-barre:focus-visible {
  outline: 2px solid var(--retro-ink);
  outline-offset: 2px;
}

button.ligne-barre[aria-pressed="true"] .ligne-barre-piste {
  box-shadow: 0 0 0 2px var(--retro-jaune);
}

/* ---------- Tableau de bord public ---------- */

/*
 * Le titre d'un bloc et l'action qui le concerne sur la même ligne, le bouton
 * repassant sous le titre quand la largeur manque. Les deux se posent sur la
 * ligne de base du titre, jamais centrés l'un sur l'autre.
 */
.entete-bloc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

.entete-bloc .retro-btn-ghost {
  min-height: 44px;
  font-size: var(--text-sm);
}

/*
 * L'heure de génération, en pied de page publique : elle dit que la page est
 * un état à un instant, pas un direct. Posée hors carte, donc sur le cadre
 * sombre, elle prend l'encre claire.
 */
.mention-mise-a-jour {
  font-size: var(--text-sm);
  color: rgba(242, 239, 230, 0.7);
  text-align: center;
  margin: 0;
}

/* ---------- Segments d'une tâche, partagés par les deux faces ---------- */

/*
 * Un segment porte une tâche, dans un bâtonnet mensuel comme dans la barre
 * empilée, et c'est la même pièce des deux côtés : c'est ce qui rend le zoom
 * exact, les deux objets ayant alors les mêmes proportions.
 *
 * La palette compte quatre couleurs mesurées et pas cinq (voir charte.css).
 * Toutes les tâches ayant leur part, la distinction au-delà de quatre passe
 * par la trame : les couleurs cyclent, et chaque tour ajoute un motif. Neuf
 * tâches font trois tours, douze combinaisons se distinguent en vision
 * déficiente comme en noir et blanc.
 *
 * Le filet qui sépare deux parts est peint à l'intérieur du segment, en ombre
 * portée et non en bordure : une bordure mangerait deux pixels de la largeur
 * et fausserait la proportion qu'elle est censée montrer.
 */
.segment-tache {
  display: block;
  height: 100%;
  flex: 0 0 auto;
  background-color: var(--serie-1);
  background-repeat: repeat;
  position: relative;
  /* Chaque segment se mesure lui-même : voir `.segment-tache-valeur`. */
  container-type: inline-size;
}

.segment-tache:not(:last-child) {
  box-shadow: inset -2px 0 0 var(--retro-paper);
}

.segment-tache.serie-1 { background-color: var(--serie-1); }
.segment-tache.serie-2 { background-color: var(--serie-2); }
.segment-tache.serie-3 { background-color: var(--serie-3); }
.segment-tache.serie-4 { background-color: var(--serie-4); }

/* Premier tour : l'aplat. Deuxième : les hachures. Troisième : le pointillé. */
.segment-tache.trame-1 {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(242, 239, 230, 0) 0 4px,
    rgba(242, 239, 230, 0.55) 4px 7px
  );
}

.segment-tache.trame-2 {
  background-image: radial-gradient(
    circle at center,
    rgba(242, 239, 230, 0.7) 1.3px,
    rgba(242, 239, 230, 0) 1.5px
  );
  background-size: 7px 7px;
}

/* ---------- Répartition par tâche : la barre empilée ---------- */

.repartition {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.repartition-bloc {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.repartition-barre {
  display: flex;
  width: 100%;
  height: 34px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(18, 118, 118, 0.12);
}

/*
 * Le pourcentage écrit dans un segment tient dans un cartouche de papier, et
 * non en couleur posée sur l'aplat. Mesure du 2026-09-02 : sur les quatre
 * séries, aucune encre ne passe partout le plancher de 4,5:1 du texte, le
 * violet #7A5CD0 rendant 3,73 avec l'encre et 4,28 avec le papier. Le cartouche
 * rend le même texte lisible sur les quatre teintes et sur les trois trames.
 *
 * Il ne se montre que dans un segment assez large pour lui, mesuré par une
 * requête de conteneur et non par un seuil en pour cent : la même part vaut
 * cent pixels sur un écran d'ordinateur et trente sur un téléphone, et le seuil
 * suivrait alors le mauvais nombre. Soixante-six pixels, le cartouche le plus
 * large, « 43,6 % », en demandant une soixantaine.
 */
.segment-tache-valeur {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--retro-paper);
  color: var(--retro-ink);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 3px;
  white-space: nowrap;
}

@container (min-width: 66px) {
  .segment-tache-valeur { display: block; }
}

/* La graduation situe un segment sans qu'on ait à mesurer à l'œil. */
.repartition-graduation {
  position: relative;
  height: 1.1rem;
  font-size: var(--text-sm);
  color: var(--retro-teal);
}

.repartition-repere {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
  /* Sans quoi le dernier repère se casse en deux lignes, « 100 » puis « % ». */
  white-space: nowrap;
}

.repartition-repere:first-child { transform: none; }
.repartition-repere:last-child { transform: translateX(-100%); }

/*
 * La légende porte l'information complète, et c'est elle qui rend la barre
 * lisible : le nom, la durée et le pourcentage y sont écrits, la couleur ne
 * fait que rappeler quel segment est lequel.
 */
.repartition-legende {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.repartition-entree {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid rgba(18, 118, 118, 0.2);
}

.repartition-entree:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.repartition-pastille {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  align-self: center;
  box-shadow: none;
}

/* Une tâche sans une seule heure n'a pas de segment : sa pastille est un vide */
.repartition-pastille-vide {
  background: transparent;
  border: 2px solid rgba(18, 118, 118, 0.35);
}

/* Le texte porte l'encre, jamais la couleur de sa série : elle ne passerait
   pas le contraste, et l'identité est déjà portée par la pastille. */
.repartition-nom {
  color: var(--retro-ink);
  min-width: 0;
}

.repartition-mesure {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--retro-ink);
}

.repartition-description {
  grid-column: 1 / -1;
  font-size: var(--text-sm);
  color: var(--retro-teal);
  line-height: 1.35;
  text-wrap: pretty;
}

/* ---------- Le bloc à deux faces, et son mouvement ---------- */

/*
 * Le temps de la bascule, le bloc coupe ce qui dépasse : la face qui arrive
 * n'a pas la hauteur de celle qui part, et sa légende déborderait de la carte
 * pendant que la hauteur rattrape. Hors bascule, rien n'est coupé.
 */
.bloc-repartition.en-bascule {
  overflow: hidden;
}

.face-repartition {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Le titre d'une face prend le focus à l'arrivée, sans en porter le contour :
   il n'est pas une commande, il annonce seulement où l'on est. */
.face-repartition .bloc-titre:focus {
  outline: none;
}

/*
 * Le clone qui vole du bâtonnet vers la barre. Il est posé sur la page, hors
 * de tout flux : sa place est donnée en pixels par le script, qui l'anime
 * ensuite vers le rectangle d'arrivée.
 */
.vol-batonnet {
  position: fixed;
  margin: 0;
  transform-origin: top left;
  pointer-events: none;
  z-index: 50;
  border-radius: 4px;
}

/*
 * Remonter n'est pas le zoom joué à l'envers : les douze lignes reviennent
 * l'une après l'autre. Le rang de chaque ligne est posé par le script.
 */
.graphique-entrant .ligne-barre {
  animation: ligne-revient 240ms both;
  animation-delay: calc(var(--rang, 0) * 20ms);
}

@keyframes ligne-revient {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Progression vers l'objectif ---------- */

.progression-piste {
  position: relative;
  height: 28px;
  background: rgba(18, 118, 118, 0.12);
  border: 2px solid var(--retro-teal);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.progression-valeur {
  display: block;
  height: 100%;
  background: var(--serie-1);
}

/* Objectif dépassé : la barre est pleine, le dépassement est dit en clair */
.progression-piste.depassee .progression-valeur { background: var(--serie-2); }

.progression-legende {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-xs);
}

/* Repère du mois de fin de mission, posé sur la piste */
.progression-repere {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--retro-ink);
}

/* ---------- Historique ---------- */

.jour {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  font-family: 'Oswald', sans-serif;
  /* « mercredi 30 septembre 2026 » en capitales déborde de 360 pixels au corps
     du texte : l'en-tête de jour se lit un cran plus petit. */
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--retro-teal);
  border-bottom: 2px solid rgba(18, 118, 118, 0.3);
  padding-bottom: var(--space-xs);
  margin-top: var(--space-md);
}

.liste-seances {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.seance {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  width: 100%;
  padding: var(--space-sm) 0;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(18, 118, 118, 0.2);
  font: inherit;
  color: var(--retro-ink);
  text-align: left;
  cursor: pointer;
}

.seance-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.seance-intitule {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seance-repere {
  font-size: var(--text-sm);
  color: var(--retro-teal);
  font-variant-numeric: tabular-nums;
}

.seance-duree {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-lg);
}

/*
 * Ligne qui vient d'être enregistrée : elle se retrouve d'un coup d'œil dans
 * une liste longue. L'effet s'efface tout seul, et le bloc « mouvement réduit »
 * de la charte le réduit à rien pour qui l'a demandé.
 */
.seance.recente {
  animation: retour-de-saisie 2.5s ease-out;
}

@keyframes retour-de-saisie {
  from { background: rgba(18, 118, 118, 0.25); }
  to { background: none; }
}

/* Séance coupée par le plafond : marque, mot et icône, jamais la couleur seule */
.seance.a-verifier {
  background: rgba(227, 165, 53, 0.15);
  border-left: 4px solid var(--retro-jaune);
  padding-left: var(--space-sm);
}

.marque-verifier {
  font-family: 'Oswald', sans-serif;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--retro-ink);
}

/* ---------- Bandeaux et états vides ---------- */

.bandeau {
  font-size: var(--text-sm);
  margin: 0;
}

/*
 * Les bandeaux se posent entre deux cartes, donc sur le cadre de page, qui est
 * sombre : c'est leur conteneur qui apporte le fond clair, la teinte du
 * feedback venant se poser dessus. Vide, il disparaît entièrement plutôt que
 * de laisser une bande de papier sans texte.
 */
.zone-bandeaux {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--retro-paper);
  border-radius: var(--radius-card-sm);
  padding: var(--space-sm);
}

.zone-bandeaux:empty {
  display: none;
}

/*
 * La barre de boutons d'un bandeau : réessayer ou abandonner l'action qui
 * bloque la file. Elle se replie sur un téléphone étroit plutôt que de rogner
 * les intitulés.
 */
.bandeau-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.etat-vide {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  color: var(--retro-ink);
}

.etat-vide p { margin: 0 0 var(--space-md); }

/* ---------- Pied de navigation privée ---------- */

.pied-nav {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  padding: var(--space-md) 0;
}

/*
 * Les entrées du pied sont des liens, pas des boutons : le bouton fantôme de
 * la charte est dessiné pour un <button>, il lui manque de quoi tenir la cible
 * tactile de 44 pixels et de quoi perdre son soulignement.
 */
.pied-nav a.retro-btn-ghost {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

/* ---------- Formulaire d'édition d'une séance ---------- */

/*
 * Une <dialog> native plutôt qu'un calque bricolé : le navigateur y enferme le
 * clavier, ferme sur Échap et empile la fenêtre au-dessus de tout sans qu'un
 * z-index ait à être inventé. La charte habille déjà .retro-modal ; il ne reste
 * que le voile, qui n'est pas un élément mais un pseudo-élément.
 */
dialog.retro-modal {
  border: 3px solid var(--retro-teal);
  color: var(--retro-ink);
  max-height: 90vh;
  overflow-y: auto;
}

dialog.retro-modal::backdrop {
  background: rgba(13, 22, 23, 0.85);
  backdrop-filter: blur(4px);
}

dialog.retro-modal .retro-label { margin-top: var(--space-md); }

.champs-cote-a-cote {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.champs-cote-a-cote .retro-label { margin-top: var(--space-sm); }

/*
 * Les deux champs s'alignent sur leur bas et non sur leur haut : « Plafond du
 * chrono, en minutes » tient sur deux lignes quand « Objectif, en heures » n'en
 * prend qu'une, et les cadres se décaleraient d'une ligne entière.
 */
.champs-cote-a-cote > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Le cadre du navigateur autour d'un fieldset ferait un second cadre dans la carte. */
.duree {
  border: none;
  padding: 0;
  margin: var(--space-md) 0 0;
}

.duree legend { padding: 0; }

.actions-edition {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Le bouton fantôme de la charte tient la cible tactile de 44 pixels. */
.actions-edition .retro-btn-ghost,
.actions-destructives .retro-btn-ghost {
  min-height: 44px;
}

/*
 * Enregistrer est la seule action qui écrit : elle porte le teal que la charte
 * nomme succès, à la place du jaune de la pilule ordinaire. Encre sur teal
 * mesure 4,71 contre 1 sur le papier de la carte, au-dessus du plancher de 4,5
 * pour du texte ordinaire (mesuré le 2026-09-02).
 */
.retro-btn-pill.confirmation .label {
  background: var(--retro-success);
  color: var(--retro-paper);
}

/*
 * Bloc de la suppression, seul geste irréversible de l'écran. Un filet et un
 * bloc à part : au doigt, la main ne doit pas le trouver là où elle cherche
 * Enregistrer ou Fermer.
 */
.actions-destructives {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(18, 118, 118, 0.3);
}

/*
 * L'orange de la charte ne peut pas servir de couleur de texte : posé sur le
 * papier, il ne mesure que 2,98 contre 1. Il est donc porté en fond, avec le
 * texte en encre (5,35 contre 1) et une bordure d'encre, la bordure orange
 * tombant elle aussi sous le plancher de 3 pour un élément non textuel.
 */
.retro-btn-ghost.alerte {
  background: var(--retro-error);
  border-color: var(--retro-ink);
  color: var(--retro-ink);
  font-size: var(--text-sm);
  padding: 0.6rem 1.2rem;
}

.retro-btn-ghost.alerte:hover {
  background: var(--retro-ink);
  color: var(--retro-error);
}

/* ---------- Réglages ---------- */

/*
 * Le texte d'aide sous un champ dit la conséquence du réglage, pas son mode
 * d'emploi : « un objectif vide retire la barre » se lit une fois et évite
 * d'aller vérifier sur le tableau de bord.
 */
.aide-champ {
  font-size: var(--text-sm);
  color: var(--retro-teal);
  margin: var(--space-xs) 0 var(--space-md);
}

/*
 * Case à cocher et son intitulé sur une même cible tactile : au doigt, le
 * texte doit cocher aussi bien que le carré, qui fait moins de 20 pixels.
 */
.interrupteur {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  font-size: var(--text-md);
  color: var(--retro-ink);
  cursor: pointer;
}

.interrupteur input {
  width: 22px;
  height: 22px;
  accent-color: var(--retro-teal);
  flex: none;
}

/*
 * L'adresse publique : elle se lit et se copie, elle ne se modifie pas. Le
 * `word-break` évite qu'une adresse longue ne déborde d'un écran de 360 pixels.
 */
.adresse-publique {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
  background: rgba(18, 118, 118, 0.08);
  border-left: 4px solid var(--retro-teal);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}

.adresse-publique code {
  font-size: var(--text-sm);
  word-break: break-all;
  color: var(--retro-ink);
}

.adresse-publique .retro-btn-ghost { min-height: 44px; }

/* ---------- Liste des tâches réglables ---------- */

.liste-taches {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  display: flex;
  flex-direction: column;
}

/*
 * Une tâche, deux cibles : la ligne ouvre l'édition, les deux flèches
 * déplacent d'un rang. Les flèches sont posées à côté et non dans la ligne,
 * un bouton ne pouvant pas en contenir un autre.
 */
.tache {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-sm);
  border-bottom: 1px solid rgba(18, 118, 118, 0.2);
}

.tache-ligne {
  display: block;
  min-height: 44px;
  width: 100%;
  padding: var(--space-sm) 0;
  background: none;
  border: none;
  font: inherit;
  color: var(--retro-ink);
  text-align: left;
  cursor: pointer;
}

.tache-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tache-nom {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tache-description {
  font-size: var(--text-sm);
  color: var(--retro-teal);
}

/* Une tâche masquée le dit en toutes lettres : la couleur ne porte rien seule */
.marque-masquee {
  font-family: 'Oswald', sans-serif;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--retro-ink);
  background: rgba(227, 165, 53, 0.3);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-xs);
  align-self: flex-start;
}

.tache-rangs {
  display: flex;
  gap: var(--space-xs);
}

.rang {
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 2px solid var(--retro-teal);
  border-radius: var(--radius-sm);
  color: var(--retro-teal);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
}

.rang:hover { background: var(--retro-teal); color: var(--retro-paper); }

.rang:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/*
 * L'export du tableau de bord public, sous le total de l'année. Le paragraphe
 * ne sert qu'à porter le lien : sa marge le décolle du chiffre héros, qui
 * reste ce qu'on lit en premier.
 */
.zone-export {
  margin: var(--space-md) 0 0;
}

/* ---------- Années enregistrées ---------- */

#bloc-annee h3.retro-label { margin-top: var(--space-lg); }

.liste-annees {
  list-style: none;
  margin: var(--space-xs) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.annee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(18, 118, 118, 0.2);
  font-variant-numeric: tabular-nums;
}

/*
 * Le libellé et sa mesure forment un bloc qui se replie ; le bouton d'export
 * reste à droite de toutes les lignes. Sans ce groupe, chaque ligne se repliait
 * selon la longueur de sa propre mesure, mesuré le 2026-09-02 à 360 pixels, et
 * les boutons ne s'alignaient plus d'une année à l'autre.
 */
.annee-infos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-sm);
  flex: 1 1 auto;
  min-width: 0;
}

.annee-mesure {
  color: var(--retro-teal);
}

/*
 * Le lien d'export est dessiné comme un bouton fantôme, mais reste un lien :
 * il lui manque, comme à ceux du pied de page, de quoi tenir la cible tactile
 * de 44 pixels et de quoi perdre son soulignement. Son texte est court, son
 * rembourrage l'est aussi : trois éléments sur une ligne de 360 pixels ne
 * laissent pas la place d'un bouton pleine largeur.
 */
a.lien-export {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.4rem 1rem;
  font-size: var(--text-sm);
  text-decoration: none;
  flex: 0 0 auto;
}

/*
 * Les deux boutons d'une année restent ensemble et dans cet ordre : emporter le
 * fichier, puis l'effacer. Le groupe passe à la ligne entier plutôt que de se
 * couper en deux, un « Supprimer » orphelin sous une autre année étant le pire
 * endroit où poser ce bouton.
 */
.annee-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 0 0 auto;
}

/* Même gabarit que le lien d'export, à côté duquel il se pose. */
.bouton-supprimer-annee {
  min-height: 44px;
  padding: 0.4rem 1rem;
  font-size: var(--text-sm);
}

/*
 * Le bouton de la liste n'ouvre qu'une confirmation : il reste un bouton
 * fantôme. C'est dans la boîte que le geste porte l'orange, une fois. Trois
 * boutons d'alerte alignés dans une liste ne préviennent plus de rien.
 */
.mesure-suppression {
  font-size: var(--text-md);
  margin-bottom: var(--space-md);
}

/*
 * Dans la boîte, le fichier est proposé sur toute la largeur : c'est une issue
 * offerte, pas une commande de coin de ligne.
 */
.lien-export-large {
  width: 100%;
  margin-top: var(--space-xs);
}

.annee-vide {
  padding: var(--space-sm) 0;
  color: var(--retro-teal);
  font-size: var(--text-sm);
}