/* ---------- LE RYTHME D'UNE TÂCHE ----------
     Le dialogue « quand ça revient ». Il réutilise entièrement l'habillage des
     dialogues de date (.dt-dialog, .dt-field) : c'est le même geste, avec plus
     de réglages. Seuls les choix propres au rythme sont dessinés ici. */

  .rythme-dialog{max-width:360px;}

  /* Les quatre façons de revenir. Une ligne de deux par deux plutôt qu'une
     liste : le mode se choisit d'un coup d'œil, pas en lisant. */
  .ryt-modes{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:18px;}
  .ryt-mode{
    border:1px solid var(--border-soft); background:var(--bg); border-radius:11px;
    padding:10px 8px; font-size:12.5px; font-weight:600; color:var(--ink-soft);
    font-family:'Inter',sans-serif;
  }
  .ryt-mode:hover{border-color:var(--ink-soft); color:var(--ink);}
  .ryt-mode.on{background:var(--action); color:#fff; border-color:var(--action);}

  /* Les sept jours de la semaine, en pastilles. Deux M et deux D côte à côte
     se distinguent par la position, comme dans tous les calendriers. */
  .ryt-jours{display:flex; gap:5px;}
  .ryt-jour{
    flex:1; height:36px; border:1px solid var(--border-soft); background:var(--bg);
    border-radius:10px; font-family:'IBM Plex Mono',monospace; font-size:12px;
    font-weight:600; color:var(--ink-soft); padding:0;
  }
  .ryt-jour:hover{border-color:var(--ink-soft); color:var(--ink);}
  .ryt-jour.on{background:var(--action); color:#fff; border-color:var(--action);}

  .ryt-choix{display:flex; flex-wrap:wrap; gap:6px;}
  .ryt-opt{
    border:1px solid var(--border-soft); background:var(--bg); border-radius:999px;
    padding:8px 13px; font-size:12.5px; font-weight:600; color:var(--ink-soft);
    font-family:'Inter',sans-serif;
  }
  .ryt-opt:hover{border-color:var(--ink-soft); color:var(--ink);}
  .ryt-opt.on{background:var(--action); color:#fff; border-color:var(--action);}
  .ryt-num{width:86px !important; padding:8px 10px !important; font-size:12.5px !important;}

  /* Plusieurs dates : trois versements, trois lignes. */
  .ryt-dates{display:flex; flex-direction:column; gap:6px;}
  .ryt-date-ligne{display:flex; align-items:center; gap:6px;}
  .ryt-date-ligne input{flex:1;}
  .ryt-x{
    flex:0 0 auto; width:30px; height:30px; border-radius:50%; padding:0;
    border:1px solid var(--border-soft); background:var(--bg); color:var(--ink-soft);
    display:flex; align-items:center; justify-content:center;
  }
  .ryt-x:hover{border-color:#D6362C; color:#D6362C;}
  .ryt-x svg{width:12px; height:12px;}
  .ryt-ajout{
    align-self:flex-start; border:1px dashed var(--border); background:none;
    border-radius:999px; padding:8px 14px; font-size:12px; font-weight:600;
    color:var(--ink-soft); font-family:'Inter',sans-serif;
  }
  .ryt-ajout:hover{border-color:var(--ink-soft); color:var(--ink);}

  /* L'aperçu : les vraies dates qui vont se poser dans le calendrier. C'est lui
     qui rend le réglage vérifiable — sans ça, « une semaine sur trois » est une
     promesse qu'on ne peut pas relire. */
  .ryt-apercu{
    display:flex; flex-direction:column; gap:4px; margin:2px 0 16px;
    background:var(--bg); border:1px solid var(--border-soft); border-radius:12px;
    padding:11px 13px;
  }
  .ryt-apercu-titre{
    font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase;
    letter-spacing:.06em; color:var(--ink);
  }
  .ryt-apercu-dates{font-size:12px; line-height:1.45; color:var(--ink-soft);}

  .ryt-actions{flex-wrap:wrap;}
  .ryt-retirer{flex:1 1 100%; color:#D6362C; border-color:var(--border-soft); margin-bottom:6px;}
  .ryt-retirer:hover{border-color:#D6362C;}

  /* Sur la ligne d'une tâche de projet : le rythme sous le nom, la prochaine
     date dans la colonne des dates. Volontairement discret — on lit d'abord ce
     qu'il y a à faire, le rythme répond à la question d'après. */
  .ryt-chip{
    display:inline-flex; align-items:center; margin-top:3px; padding:2px 6px;
    border:1px dashed transparent; border-radius:6px; background:none;
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.02em;
    color:var(--ink-soft); text-align:left; line-height:1.3; cursor:pointer;
  }
  .ryt-chip:hover{border-color:var(--border-soft); color:var(--ink);}

  /* La date de fin en clair sous les durées : « 1 an » suffit dans presque tous
     les cas, mais quand ce n'est pas le cas il faut pouvoir la poser. */
  .ryt-fin{margin-top:7px;}

  /* Cinq façons de revenir : la grille passe à trois colonnes pour qu'aucun
     libellé ne se coupe. */
  .ryt-modes{grid-template-columns:repeat(3, 1fr);}

  /* Le mois en sept colonnes. On y lit « le 1er et le 15 » d'un regard, ce
     qu'une rangée de pastilles ne permet pas. */
  .ryt-mois-grille{display:grid; grid-template-columns:repeat(7, 1fr); gap:4px;}
  .ryt-case{
    aspect-ratio:1; padding:0; border:1px solid var(--border-soft); background:var(--bg);
    border-radius:8px; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
    font-weight:500; color:var(--ink-soft);
  }
  .ryt-case:hover{border-color:var(--ink-soft); color:var(--ink);}
  .ryt-case.on{background:var(--action); color:#fff; border-color:var(--action); font-weight:700;}
  .ryt-dernier{
    width:100%; margin-top:6px; border:1px solid var(--border-soft); background:var(--bg);
    border-radius:999px; padding:9px; font-size:12.5px; font-weight:600; color:var(--ink-soft);
    font-family:'Inter',sans-serif;
  }
  .ryt-dernier:hover{border-color:var(--ink-soft); color:var(--ink);}
  .ryt-dernier.on{background:var(--action); color:#fff; border-color:var(--action);}
  /* Le 29, le 30, le 31 n'existent pas tous les mois : on le dit là où la
     question se pose, pas dans une aide qu'on n'ouvrira jamais. */
  .ryt-note-mois{
    margin-top:7px; font-family:'IBM Plex Mono',monospace; font-size:9px;
    line-height:1.5; letter-spacing:.03em; color:var(--ink-soft);
  }

  /* ---------- LA PAGE « QUAND ÇA REVIENT » ----------
     C'était une fenêtre flottante. Elle passait derrière la page du back
     office — même famille de couches, un cran plus bas — et le clic ne
     produisait rien. Sur téléphone, une page vaut mieux de toute façon :
     cinq modes, sept jours et une liste de dates ne tiennent pas dans un
     cadre de 340 px posé au milieu de l'écran. */
  .ryt-page-corps{
    flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:16px 16px 8px;
  }
  .ryt-pied{
    display:flex; gap:8px; padding:12px 16px calc(16px + env(safe-area-inset-bottom));
    border-top:1px solid var(--border); background:var(--surface); flex-shrink:0;
  }
  .ryt-pied-btn{
    flex:1; border:1px solid var(--border); background:var(--surface); border-radius:12px;
    padding:13px; font-size:14px; font-weight:600; color:var(--ink); font-family:'Inter',sans-serif;
  }
  .ryt-pied-btn:hover{border-color:var(--ink-soft);}
  .ryt-pied-btn.principal{background:var(--action); color:#fff; border-color:var(--action);}
  .ryt-pied-btn.principal:hover{opacity:.9;}
  .ryt-pied-btn.danger{color:#D6362C; border-color:rgba(214,54,44,.35); flex:0 0 auto; padding-left:18px; padding-right:18px;}
  .ryt-pied-btn.danger:hover{border-color:#D6362C;}
  .ryt-reglages{margin-top:12px;}

  /* Le réglage ouvert sans mode choisi : on montre les cinq portes, pas un
     rythme inventé pour nous. */
  .ryt-invite{
    margin-top:12px; font-size:12.5px; line-height:1.5; color:var(--ink-soft);
  }

  /* La grille des jours du mois est en aspect-ratio:1 sur sept colonnes : dans
     un dialogue de 340 px, des cases de 45 px ; dans un panneau de back office
     large, des carrés de 250. On borne la grille — sa taille vient du contenu,
     pas de la place disponible. Idem pour les sept jours de semaine et les
     boutons de mode. */
  .ryt-mois-grille{max-width:322px;}
  .ryt-case{max-width:44px;}
  .ryt-dernier{max-width:322px;}
  .ryt-jours{max-width:322px;}
  .ryt-jour{max-width:44px;}