/* Robotmeet · socle de la refonte (studio « Expérience », Système validé le 12 octobre 2026).
   Chargée par le gabarit après les feuilles historiques : à spécificité égale, ce qui est
   écrit ici l'emporte. Trois parties :
     1. le gabarit : zone du haut et onglets du téléphone (la barre est la coquille de la
        famille) ;
     2. le texte : l'échelle du Système ;
     3. les composants, sous des classes `rm-…` à employer telles quelles. Chaque composant
        est précédé de son HTML d'usage.
   Règles : valeurs par jetons de brand.css ; clair seulement ; aucune couleur d'erreur. Le
   violet (`--recording…`) ne sert qu'à l'admission et à l'enregistrement : il ne s'écrit
   que sous la classe d'état `is-live` (`.rm-chip.is-live`) et sur le point `.rm-dot`, un
   test le vérifie dans toutes les feuilles. Tout marche sans JavaScript.
   Les feuilles des lots (dossier `lots/`) sont servies à la suite de celle-ci, dans la même
   réponse (`socle.rs`) : un lot écrit dans la sienne, jamais ici.
   Convention de largeur : la requête « écran de 760 px au plus » (avec `screen and`) n'est
   écrite qu'une fois, pour le gabarit du téléphone ; les composants s'adaptent sous la
   requête de largeur seule, sans `screen and`. Un test s'appuie sur cette convention. */

/* ================================================================== 1. Gabarit */

/* ---------- Gabarit · la barre ---------- */
/* La barre de l'espace est la coquille de la famille Escouade (`graphite_shell::coquille`,
   dessinée par la bibliothèque `robotmeet_famille`, sa feuille `esf-` à `/assets/famille.css`) :
   aucune règle ici. Ce que l'espace lui doit est dans `escouade.css`. */

/* ---------- Gabarit · téléphone ---------- */
/* Sur un écran de 760 px au plus, dans tout navigateur comme dans l'application installée,
   la barre est un tiroir (la coquille de la famille, sous 768 px). En haut : la place de la
   tuile qui l'ouvre, et la cloche (<header class="site-header">).
   En bas : cinq onglets (<nav class="app-tabbar">, rendu par `installed_app::tabbar`) :
   Aujourd'hui, Réunions, « + » (nouvelle réunion), À faire, Chat. L'Agenda se range sous
   l'onglet Réunions, par le sélecteur <nav class="app-switch">. Ailleurs (bureau,
   impression), rien de cela n'apparaît. Les applications natives ont leurs propres
   onglets : `layout` ne leur rend pas ceux-ci. */
.app-tabbar{display:none}
.app-switch{display:none}
@media screen and (max-width:760px){
  body.workspace{padding-left:0;font-size:15px;line-height:1.45}
  .workspace main.shell{padding:16px 20px 32px}
  .workspace main.shell-wide{padding:0 0 24px}
  .workspace .site-footer{padding:20px}
  /* Zone du haut : 52 px, la tuile de la coquille à gauche, la cloche à droite. */
  .workspace .site-header{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--line);background:rgba(250,250,250,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .workspace .header-inner{width:100%;height:52px;min-height:52px;max-width:none;margin:0;padding:0 20px;justify-content:space-between}
  .workspace .app-header>.brand .brand-logotype{gap:9px;font-size:17px;font-weight:600;letter-spacing:-.03em}
  .workspace .app-header>.brand svg{width:24px!important;height:24px!important}
  /* Onglets : 78 px, libellés de 11 px comme sur les planches. */
  .app-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;align-items:center;justify-content:space-around;height:calc(78px + env(safe-area-inset-bottom));padding:0 6px env(safe-area-inset-bottom);border-top:1px solid var(--line);background:var(--surface)}
  .app-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:62px;min-height:48px;color:var(--muted);font:500 11px/1.2 var(--font-ui);text-decoration:none}
  .app-tab:hover{color:var(--ink);text-decoration:none}
  .app-tab.is-current{color:var(--ink)}
  .app-tab:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:8px}
  .app-tab svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .app-tab-new{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--white)}
  .app-tab-new:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
  .app-tab-new svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  /* La page se termine au-dessus de la barre ; le bandeau de consentement aussi. */
  .app-tabbar~.site-footer{padding-bottom:calc(98px + env(safe-area-inset-bottom))}
  .app-tabbar~.consent-banner{bottom:calc(90px + env(safe-area-inset-bottom))}
  html body:has(.app-tabbar~.consent-banner){padding-bottom:calc(320px + env(safe-area-inset-bottom))}
  /* Sélecteur Réunions · Agenda, en haut de ces deux pages. */
  .app-switch{display:flex;gap:2px;padding:3px;border-radius:12px;background:var(--tray)}
  .app-switch a{flex:1;display:flex;align-items:center;justify-content:center;min-height:var(--h-control);border-radius:10px;color:var(--muted);font:500 var(--fs-body)/1.2 var(--font-ui);text-decoration:none}
  .app-switch a[aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
  /* Champs en 16 px : le téléphone ne zoome pas sur la saisie. */
  html input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),html select,html textarea{min-height:var(--h-control);font-size:var(--fs-4)}
  /* Une page qui porte sa barre d'action (.rm-bottombar) se passe des onglets. Une sous-page
     qui porte sa barre de retour (.rm-backbar) garde la zone du haut : la tuile qui ouvre la
     barre y a sa place. */
  @supports selector(:has(*)){
    body:has(.rm-bottombar) .app-tabbar{display:none}
  }
}
@media print{.app-tabbar,.app-switch,.rm-backbar,.rm-bottombar{display:none}}

/* ---------- Gabarit · page ---------- */
/* Colonne de lecture d'une page : <div class="rm-page"> (1 060 px au plus), ou
   `is-narrow` (800 px) pour une fiche. Deux colonnes qui passent l'une sous l'autre :
   <div class="rm-cols"><div class="rm-col-main">…</div><div class="rm-col-side">…</div></div> */
.rm-page{max-width:1060px;min-width:0}
.rm-page.is-narrow{max-width:800px}
.rm-cols{display:flex;flex-wrap:wrap;align-items:flex-start;gap:28px}
.rm-page>.rm-cols{margin-top:26px}
.rm-col-main{flex:2 1 540px;min-width:0;display:flex;flex-direction:column;gap:20px}
.rm-col-side{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:20px}
/* Barre de retour d'une sous-page : <div class="rm-backbar"><a class="rm-back" href="/reunions">Aujourd’hui</a>
   <span class="rm-chip">…</span></div>. La flèche est posée par la feuille. */
.rm-backbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rm-back{display:inline-flex;align-items:center;gap:6px;min-height:var(--h-control);margin:-12px 0;color:var(--muted);font-size:var(--fs-note);font-weight:400;text-decoration:none}
.rm-back::before{content:"←"}
.rm-back:hover{color:var(--ink);text-decoration:none}
/* Barre d'action du bas : <div class="rm-bottombar">…</div>. Dans le flux sur un bureau ;
   fixée au bas de l'écran sur un téléphone, à la place des onglets. */
.rm-bottombar{display:flex;flex-direction:column;gap:6px}
@media (max-width:760px){
  .rm-back{margin:0;color:var(--ink);font-size:inherit;font-weight:500}
  .rm-back::before{content:"‹";font-size:22px;line-height:1}
  .rm-bottombar{position:fixed;left:0;right:0;bottom:0;z-index:16;padding:14px 20px calc(20px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface)}
}

/* ================================================================== 2. Texte */
/* Échelle du Système : titre de page 30, titre de carte 22, résumé d'un compte rendu 19,
   action ou décision 16, texte courant 14 (base de la page), précision 13, étiquette 12. */
.rm-title{font:600 var(--fs-title)/1.2 var(--font-display);letter-spacing:-.035em}
.rm-sub{margin-top:6px;color:var(--muted)}
.rm-card-title{font:600 var(--fs-card)/1.25 var(--font-display);letter-spacing:-.025em}
.rm-h2{font:600 15px/1.3 var(--font-display);letter-spacing:-.01em}
.rm-lead{max-width:62ch;font-size:var(--fs-lead);line-height:1.55;letter-spacing:-.01em}
.rm-strong{font-size:var(--fs-strong);font-weight:500}
.rm-note{font-size:var(--fs-note);color:var(--muted)}
/* Étiquette en capitales (« Étape 1 sur 3 », titre d'une section de compte rendu). */
.rm-caps{font:600 var(--fs-tag)/1.3 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
/* Lien d'action sous un texte (« Ouvrir la corbeille ») : 44 px de cible. */
.rm-link{display:inline-flex;align-items:center;min-height:var(--h-control);color:var(--ink);font-size:var(--fs-note);font-weight:600;text-decoration:none}
.rm-link:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){
  .rm-title{font-size:26px}
  .rm-card-title{font-size:20px}
}

/* ================================================================== 3. Composants */

/* ---------- Pastille d'état ---------- */
/* <span class="rm-chip">Planifiée</span>
   Variantes : `is-live` pour l'admission et l'enregistrement, avec le point devant le texte
   (<span class="rm-chip is-live"><span class="rm-dot"></span>À admettre</span>) ; `is-ok`,
   la seule pleine (« Compte rendu prêt », « Décision ») ; `is-ask`, en pointillé, quand il
   manque une information (« Responsable à préciser ») ; `is-outline` (« Sans Robotmeet »). */
.rm-chip{display:inline-flex;align-items:center;gap:7px;min-height:26px;padding:0 10px;border:1px solid transparent;border-radius:var(--r-pill);background:var(--sunken);color:var(--ink-soft);font:500 var(--fs-tag)/1.3 var(--font-ui);white-space:nowrap;text-decoration:none}
.rm-chip.is-live{background:var(--recording-soft);color:var(--recording-ink)}
.rm-chip.is-ok{background:var(--ink);color:var(--white)}
.rm-chip.is-ask{background:var(--surface);border:1px dashed var(--faint)}
.rm-chip.is-outline{background:var(--surface);border-color:var(--line-strong)}
.rm-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--recording)}

/* ---------- Carte ---------- */
/* <section class="rm-card">…</section> : fond blanc, filet, rayon 14. Les marges
   intérieures viennent de `is-pad` (26 × 28) ou du contenu (lignes, en-tête).
   En-tête d'une carte de liste : <div class="rm-card-head"><h2 class="rm-h2">Votre journée</h2><a href="…">Voir l’agenda</a></div> */
.rm-card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.rm-card.is-pad{padding:26px 28px}
.rm-card.is-clip{overflow:hidden}
.rm-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px}
@media (max-width:760px){
  .rm-card{border-radius:16px}
  .rm-card.is-pad{padding:20px}
  .rm-card-head{padding:16px 16px 12px}
}

/* ---------- Segments ---------- */
/* Trois choix au plus, un seul actif. `is-tray` : fond un peu plus soutenu.
   Dans un formulaire, des boutons radio :
   <div class="rm-seg" role="radiogroup" aria-label="Façon de chercher">
     <input type="radio" name="mode" id="m-sens" value="sens" checked><label for="m-sens">Par le sens</label>
     <input type="radio" name="mode" id="m-mot" value="exact"><label for="m-mot">Mot exact</label>
   </div>
   Pour passer d'une vue à l'autre, des liens :
   <nav class="rm-seg is-tray" aria-label="Sections de la réunion"><a href="…" aria-current="page">Compte rendu</a><a href="…">Transcription</a></nav> */
.rm-seg{position:relative;display:flex;gap:2px;padding:3px;border-radius:11px;background:var(--sunken)}
.rm-seg.is-tray{background:var(--tray)}
.rm-seg input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.rm-seg label,.rm-seg a{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:var(--h-control);padding:0 12px;border-radius:8px;color:var(--muted);font:500 var(--fs-note)/1.2 var(--font-ui);white-space:nowrap;text-decoration:none;cursor:pointer}
.rm-seg input:checked+label,.rm-seg a[aria-current]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.rm-seg input:focus-visible+label{outline:2px solid var(--focus);outline-offset:1px}

/* ---------- Interrupteur et case à cocher ---------- */
/* Une ligne de 44 px, qui se touche tout entière.
   Interrupteur : <div class="rm-line"><label for="auto">Envoyer Robotmeet à toutes mes réunions</label><input class="rm-toggle" type="checkbox" role="switch" id="auto" name="auto" checked></div>
   Case : <div class="rm-line"><input class="rm-box" type="checkbox" id="envoi" name="envoi"><label for="envoi">Envoyer le compte rendu aux participants</label></div>
   Sans JavaScript, l'interrupteur se valide avec le bouton de son formulaire. */
.rm-line{display:flex;align-items:center;gap:12px;min-height:var(--h-control)}
.rm-line label{flex:1;min-width:0;display:flex;align-items:center;min-height:var(--h-control);font:400 var(--fs-body)/1.4 var(--font-ui);cursor:pointer}
input.rm-toggle{flex:none;-webkit-appearance:none;appearance:none;width:44px;height:26px;margin:0;border:0;border-radius:var(--r-pill);background:var(--faint) radial-gradient(circle at 13px 13px,var(--white) 10px,transparent 10.5px);cursor:pointer}
input.rm-toggle:checked{background:var(--ink) radial-gradient(circle at 31px 13px,var(--white) 10px,transparent 10.5px)}
input.rm-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
input.rm-box{flex:none;width:22px;height:22px;margin:0;accent-color:var(--ink)}

/* ---------- Champ de recherche ---------- */
/* <form class="rm-find" role="search" method="get" action="/recherche">
     <label class="sr-only" for="q">Demander ou chercher dans vos réunions</label>
     <input class="rm-find-input" id="q" name="q" type="search" placeholder="Posez une question à vos réunions, ou cherchez un mot…">
     <div class="rm-seg" role="radiogroup" aria-label="Façon de chercher">…</div>
   </form>
   `is-large` : le champ de 52 px du haut d'Aujourd'hui. */
.rm-find{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:3px 3px 3px 14px;border:1px solid var(--line-strong);border-radius:var(--r-card);background:var(--surface)}
.rm-find:focus-within{border-color:var(--ink)}
.rm-find.is-large{min-height:52px;padding-inline:16px}
.rm-find .rm-find-input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]){flex:1 1 120px;width:auto;min-width:0;min-height:var(--h-control);padding:0;border:0;border-radius:0;background:transparent;font:400 15px/1.4 var(--font-ui)}
.rm-find .rm-find-input:focus{outline:0}
.rm-find.is-large .rm-find-input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]){font-size:var(--fs-strong)}
/* Téléphone : 16 px, pour que la saisie ne déclenche pas de zoom. */
@media (max-width:760px){.rm-find .rm-find-input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]){font-size:var(--fs-4)}}

/* ---------- Source citée ---------- */
/* Sous chaque réponse du Chat : le titre, la date, le moment et la phrase entendue.
   <a class="rm-source" href="/reunions/…#t=372"><b>Point de chantier · Lot B</b>
     <span class="rm-note">Jeudi 8 octobre · à 06:12</span>
     <span class="rm-source-quote">« On ne pourra pas livrer les garde-corps avant la semaine du 9 novembre. »</span>
     <span class="rm-note">Jules Perrin</span></a> */
.rm-source{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-tile);background:var(--surface);color:var(--ink);font-weight:400;line-height:1.45;text-decoration:none}
.rm-source:hover{border-color:var(--ink);text-decoration:none}
.rm-source b{font-weight:600}
.rm-source-quote{margin:6px 0 2px;padding-left:12px;border-left:2px solid var(--ink);text-wrap:pretty}

/* ---------- Citation ---------- */
/* Une phrase mot pour mot, son auteur, et le moment où l'écouter (une ancre `#t=`).
   <blockquote class="rm-quote"><p>« Si on décale la réception, on perd le créneau du carreleur. »</p>
     <footer>Thomas Leroy · <a href="#t=587">09:47</a></footer></blockquote> */
.rm-quote{margin:0;padding:24px 28px;border-radius:var(--r-card);background:var(--sunken)}
.rm-quote p{font-size:var(--fs-lead);line-height:1.5;letter-spacing:-.01em;text-wrap:balance}
.rm-quote footer{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:var(--fs-note);color:var(--muted)}
.rm-quote footer a{color:inherit;font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* ---------- Lecteur ---------- */
/* Lecteur compact : le temps écoulé à gauche, la durée à droite.
   Sans JavaScript, le lecteur du navigateur, dans le cadre :
   <div class="rm-player"><audio controls preload="none" src="/reunions/…/audio"></audio></div>
   Un module d'amélioration progressive peut le remplacer par les pièces ci-dessous : il les
   ajoute, pose `is-enhanced` (l'<audio> est alors masqué) puis `is-playing` pendant la lecture.
   <button class="rm-player-play" type="button" aria-label="Lire l’enregistrement"></button>
   <span class="rm-player-time">06:12</span><span class="rm-player-bar" aria-hidden="true"><i style="width:15%"></i></span>
   <span class="rm-player-time is-total">42:10</span><button class="rm-player-speed" type="button">Vitesse 1×</button> */
.rm-player{display:flex;align-items:center;gap:12px;padding:12px 8px 12px 16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.rm-player audio{flex:1;min-width:0;width:100%;height:44px}
.rm-player-play,.rm-player-time,.rm-player-bar,.rm-player-speed{display:none}
.rm-player.is-enhanced audio{display:none}
.rm-player.is-enhanced .rm-player-play{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--ink);color:var(--white);cursor:pointer}
.rm-player-play::before{content:"";margin-left:3px;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor}
.rm-player.is-playing .rm-player-play::before{width:4px;height:14px;margin-left:0;border-width:0 4px;border-color:currentColor}
.rm-player.is-enhanced .rm-player-time{display:inline;font-size:var(--fs-note);font-variant-numeric:tabular-nums}
.rm-player.is-enhanced .rm-player-time.is-total{color:var(--muted)}
.rm-player.is-enhanced .rm-player-bar{flex:1;display:block;position:relative;min-width:40px;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.rm-player-bar i{position:absolute;inset:0 auto 0 0;border-radius:4px;background:var(--ink)}
.rm-player.is-enhanced .rm-player-speed{display:inline-flex;align-items:center;min-height:var(--h-control);padding:0 10px;border:0;background:transparent;color:var(--muted);font:500 var(--fs-note)/1 var(--font-ui);white-space:nowrap;cursor:pointer}

/* ---------- Ligne de réunion ---------- */
/* <a class="rm-row" href="/reunions/…"><span class="rm-row-when">9 h</span>
     <span class="rm-row-what"><b>Point équipe</b><small>Teams · 5 participants</small></span>
     <span class="rm-chip is-live"><span class="rm-dot"></span>À admettre</span></a>
   `rm-row-when is-past` : une date passée (« ven. 9 »), en gris. Intertitre dans une liste :
   <p class="rm-row-sep">Prêts depuis votre dernière visite</p>. La première ligne d'une
   carte sans en-tête perd son filet. */
.rm-row{display:flex;align-items:center;gap:18px;padding:16px 22px;border-top:1px solid var(--line-soft);color:inherit;font-weight:400;text-decoration:none}
.rm-row:hover{background:var(--bg);text-decoration:none}
.rm-card>.rm-row:first-child{border-top:0}
.rm-row-when{flex:0 0 76px;font-weight:600;font-variant-numeric:tabular-nums}
.rm-row-when.is-past{font-weight:500;color:var(--muted)}
.rm-row-what{flex:1;min-width:0}
.rm-row-what b{display:block;font-weight:600}
.rm-row-what small{font-size:var(--fs-note);color:var(--muted)}
.rm-row-sep{padding:14px 22px 10px;border-top:1px solid var(--line-soft);font:600 var(--fs-tag)/1.3 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
@media (max-width:760px){
  .rm-row{align-items:flex-start;gap:12px;min-height:64px;padding:12px 16px}
  .rm-row-when{flex-basis:58px;white-space:nowrap}
  .rm-row-sep{padding-inline:16px}
}

/* ---------- État vide ---------- */
/* Ce qui manque, pourquoi, et le geste qui le remplit : un seul bouton plein.
   <section class="rm-empty" aria-labelledby="vide"><span class="rm-empty-icon" aria-hidden="true">(svg au trait, viewBox 0 0 24 24)</span>
     <div class="rm-empty-body"><h2 id="vide">Robotmeet ne connaît encore aucune de vos réunions.</h2>
       <p>Reliez votre agenda : il y retrouve vos visios à venir et s’y présente à l’heure.</p>
       <a class="button button-primary" href="/comptes">Relier mon agenda</a><p class="rm-note">…</p></div></section>
   Dessous, ce que la page montrera : <div class="rm-slots"><div class="rm-slot"><b>Votre journée</b><span>Les réunions du jour.</span></div>…</div> */
.rm-empty{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px 28px;padding:36px 40px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.rm-empty-icon{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:var(--sunken);color:var(--ink)}
.rm-empty-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rm-empty-body{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.rm-empty-body h2{font:600 var(--fs-card)/1.3 var(--font-display);letter-spacing:-.025em}
.rm-empty-body p{max-width:60ch;font-size:15px}
.rm-empty-body .rm-note{font-size:var(--fs-note)}
.rm-slots{display:flex;flex-wrap:wrap;gap:14px}
.rm-slot{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:4px;padding:18px 20px;border:1px dashed var(--faint);border-radius:var(--r-card)}
.rm-slot b{font-weight:600}
.rm-slot span{font-size:var(--fs-note);color:var(--muted)}
@media (max-width:760px){
  .rm-empty{flex-direction:column;gap:10px;padding:22px 20px 20px;border-radius:16px}
  .rm-empty-icon{width:52px;height:52px}
  .rm-empty-body{flex-basis:auto}
  .rm-empty-body h2{font-size:20px;line-height:1.25}
  .rm-slots{flex-direction:column;gap:10px}
  .rm-slot{flex-basis:auto;padding:14px 16px}
}

/* ---------- Alerte ---------- */
/* Ce qui empêche d'avancer, dit en une phrase, puis le geste qui répare. À l'encre : aucune
   couleur d'alerte, jamais de code.
   <div class="rm-alert" role="alert"><p class="rm-alert-title">Robotmeet ne pourra pas rejoindre cette réunion.</p>
     <p>Il ne vous reste plus de temps ce mois-ci, et cette réunion en demande 45 min.</p>
     <div class="rm-alert-actions"><a class="button button-primary" href="/abonnement">Ajouter du temps</a>
       <span class="rm-note">Sinon, le compteur repart le 1er novembre.</span></div></div>
   Sous un champ : <p class="rm-field-error" id="err-lien" role="alert">Ce lien n’est pas celui d’une réunion.</p>,
   le champ portant aria-invalid="true" et aria-describedby="err-lien" (filet de 2 px, style.css). */
.rm-alert{display:flex;flex-direction:column;gap:10px;padding:18px 20px;border:1.5px solid var(--ink);border-radius:var(--r-tile);background:var(--surface)}
.rm-alert-title{display:flex;align-items:flex-start;gap:12px;font-size:var(--fs-strong);font-weight:600;letter-spacing:-.01em;line-height:1.35}
.rm-alert-title::before,.rm-field-error::before{content:"!";flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--ink);color:var(--white);font:700 13px/1 var(--font-ui)}
.rm-alert-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:4px}
.rm-alert-actions .rm-note{flex:1 1 150px;min-width:0}
.rm-field-error{display:flex;align-items:flex-start;gap:8px;margin-top:8px;font-size:var(--fs-note);font-weight:500}
.rm-field-error::before{width:16px;height:16px;font-size:12px}

/* ---------- Menu « ··· » ---------- */
/* Ce qui n'est ni l'action de l'écran ni une action qui engage : exporter, renommer,
   déplacer, supprimer. En <details>, sans JavaScript.
   <details class="rm-more"><summary aria-label="Exporter, renommer, déplacer, supprimer"></summary>
     <div class="rm-more-panel"><a href="…">Exporter</a><form method="post" action="…"><button type="submit">Supprimer</button></form></div></details> */
.rm-more{position:relative}
.rm-more>summary{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-control);list-style:none;color:var(--ink-soft);cursor:pointer}
.rm-more>summary::-webkit-details-marker{display:none}
.rm-more>summary::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;box-shadow:-7px 0 0 currentColor,7px 0 0 currentColor}
.rm-more>summary:hover,.rm-more[open]>summary{margin-bottom:0;background:var(--sunken);color:var(--ink)}
.rm-more>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.rm-more-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:20;display:grid;gap:2px;min-width:240px;padding:6px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--sh-2)}
.rm-more-panel form{margin:0}
.rm-more-panel a,.rm-more-panel button{display:flex;align-items:center;width:100%;min-height:var(--h-control);padding:0 12px;border:0;border-radius:var(--r-nav);background:none;color:var(--ink);font:500 var(--fs-body)/1.2 var(--font-ui);text-align:left;text-decoration:none;cursor:pointer}
.rm-more-panel a:hover,.rm-more-panel button:hover{background:var(--sunken);text-decoration:none}

/* ---------- Page introuvable (repli du routeur, `socle.rs`) ---------- */
/* L'adresse demandée, telle quelle, dans un cartouche qui passe à la ligne. */
.rm-notfound{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px 24px}
.rm-addr{display:inline-block;max-width:100%;padding:8px 12px;border-radius:8px;background:var(--sunken);color:var(--ink);font:400 var(--fs-note)/1.5 var(--font-ui);overflow-wrap:anywhere}
.rm-aside-card{display:flex;flex-direction:column;gap:6px;padding:20px 22px}
.rm-aside-card p{font-size:var(--fs-note)}
/* Lot L1 · Aujourd'hui. Planches : Main, Vide-aujourdhui, Premiers-pas, Mobile-aujourdhui,
   Mobile-vide. Code : today.rs. Servie à la suite de rm.css, dans /assets/rm.css : ses
   règles l'emportent sur les feuilles historiques. Composants du socle : classes rm-…
   (rm.css) ; n'écrire ici que ce qui est propre à cette page. */

/* ---------- Aujourd'hui · bureau et téléphone ---------- */
/* Le même HTML sert les deux écrans. `rm-today-wide` : ce que la planche du téléphone ne
   montre pas (pastilles des lignes, comptes rendus prêts, cartes du côté, précisions).
   `rm-today-narrow` : ce qu'elle montre à la place (l'état en toutes lettres dans la
   ligne, « À faire » en une ligne). Chaque élément garde son affichage propre : la règle
   ne fait que masquer. */
@media (min-width:761px){.rm-today-narrow{display:none!important}}
@media (max-width:760px){.rm-today-wide{display:none!important}}

/* ---------- Aujourd'hui · page ---------- */
/* <div class="rm-today" data-live-state="journee">…</div> : le panneau « Nouvelle
   réunion », le champ « Demander », le titre, l'alerte de temps, la carte du moment
   présent, puis deux colonnes (.rm-cols du socle). */
.rm-today{min-width:0}
.rm-today .rm-cols{margin-top:28px}
.rm-today .rm-alert{margin-top:22px}
.rm-today .rm-empty{margin-top:26px}
.rm-today>.notice{margin-bottom:16px}
.rm-today-low{margin-top:14px}
.rm-today-low a{color:var(--ink);font-weight:600}
.rm-today .rm-card-head .rm-link,.rm-today-side-head .rm-link{margin:-12px 0}
@media (min-width:761px){
  .workspace main.shell:has(.rm-today-ask){padding-top:24px}
  .rm-today-ask+.rm-today-hello{margin-top:34px}
}
@media (max-width:760px){
  .rm-today .rm-cols{gap:16px;margin-top:16px}
  .rm-today .rm-alert,.rm-today .rm-empty{margin-top:16px}
  .rm-today-hello .rm-sub{margin-top:4px;font-size:var(--fs-note)}
}

/* ---------- Aujourd'hui · champ « Demander » ---------- */
/* <form class="rm-find is-large rm-today-ask" role="search" method="get" action="/recherche">
     (loupe) <input class="rm-find-input" name="q" type="search"> <kbd class="rm-today-key">Ctrl K</kbd></form>
   Le raccourci (palette de `graphite.mjs`) n'est annoncé que si les scripts tournent. */
.rm-today-ask{max-width:780px}
.rm-today-ask svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round}
.rm-today-key{flex:none;padding:2px 7px;border:1px solid var(--line);border-radius:6px;color:var(--muted);font:400 var(--fs-tag)/1.4 var(--font-ui)}
@media (scripting:none){.rm-today-key{display:none}}

/* ---------- Aujourd'hui · carte du moment présent ---------- */
/* <section class="rm-card is-pad rm-today-now"><div class="rm-today-now-text">(pastille)
     <h2 class="rm-card-title"><a>Point équipe</a></h2><p class="rm-today-when">9 h – 9 h 30 · Microsoft Teams</p>
     <p class="rm-today-say">Dans Teams, admettez « Robotmeet — Camille Martin ».</p></div>
     <div class="rm-today-now-actions">(bouton plein) (Retirer Robotmeet, discret)</div></section> */
.rm-today-now{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:26px}
.rm-today-now-text{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.rm-today-now-text .rm-card-title a{color:inherit;font-weight:inherit;text-decoration:none}
.rm-today-now-text .rm-card-title a:hover{text-decoration:underline;text-underline-offset:4px}
.rm-today-when{color:var(--muted)}
.rm-today-say{max-width:58ch}
.rm-today-now-actions{display:flex;flex-wrap:wrap;gap:10px}
.rm-today-now-actions form{margin:0}
@media (max-width:760px){
  .rm-today-now{flex-direction:column;align-items:stretch;gap:14px;margin-top:16px}
  .rm-today-now-text{flex:none}
  .rm-today-when{font-size:var(--fs-note)}
  .rm-today-now-actions .button{width:100%;min-height:var(--h-touch);border-radius:var(--r-tile);font-size:15px}
}

/* ---------- Aujourd'hui · journée ---------- */
/* Lignes .rm-row du socle. Sur un téléphone, l'état se lit dans la ligne du dessous
   (<span class="rm-today-is">Robotmeet y sera</span>), et la réunion de la carte du
   moment présent (`is-now`) n'est pas répétée. Sous la journée, les comptes rendus
   prêts : <div class="rm-today-ready"><p class="rm-row-sep">…</p>(lignes)</div>. */
.rm-today-is{font-weight:500;color:var(--ink)}
/* Visio que la règle « Robotmeet rejoint » écarte : la ligne porte le geste, hors du lien.
   <div class="rm-row rm-today-row is-split"><a class="rm-today-rowlink" href="/reunions/…">(heure, titre, lieu)</a>
     <span class="rm-chip is-outline rm-today-wide">Sans Robotmeet</span>
     <form class="rm-today-send" method="post" action="/reunions/…/demander-robot">(jeton)
       <button class="text-button" type="submit">Envoyer Robotmeet</button></form></div> */
.rm-today-row.is-split{flex-wrap:wrap}
.rm-today-row.is-split:hover{background:none}
.rm-today-rowlink{flex:1 1 240px;min-width:0;display:flex;align-items:center;gap:18px;color:inherit;font-weight:400;text-decoration:none}
.rm-today-rowlink:hover{text-decoration:none}
.rm-today-send{flex:none;margin:-12px 0}
.rm-today-send .text-button{padding:0;color:var(--ink);font-weight:600;white-space:nowrap}
.rm-today-ready .rm-row-sep+.rm-row{border-top:0;padding-top:8px}
.rm-today-none{padding:16px 22px 20px;border-top:1px solid var(--line-soft);color:var(--muted)}
.rm-today-none a{color:var(--ink)}
@media (max-width:760px){
  .rm-today-row.is-now{display:none}
  .rm-today-rowlink{align-items:flex-start;gap:12px}
  .rm-today-send{margin:-8px 0 -8px 70px}
  .rm-today-none{padding:12px 16px 16px}
}

/* ---------- Aujourd'hui · « À faire » et « À reprendre » ---------- */
/* <section class="rm-card rm-today-todo" id="a-faire"><div class="rm-today-side-head"><h2 class="rm-h2">À faire</h2><a class="rm-link">7 ouvertes</a></div>
     <ul><li class="rm-today-action"><form method="post" action="/reunions/…/actions/…"><button class="rm-today-check" type="submit" aria-label="…"></button></form>
       <div><a href="…">Relancer Métallerie Perrin.</a><small><b>Avant mercredi</b> · Point de chantier</small></div></li></ul></section>
   La case est un bouton d'envoi (aucun script) ; sa cible fait 44 px. */
.rm-today-todo{padding:18px 22px 8px}
.rm-today-side-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.rm-today-todo ul{margin:0;padding:0;list-style:none}
.rm-today-todo>.rm-note{padding-bottom:12px}
.rm-today-action{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line-soft)}
.rm-today-action form{margin:0}
.rm-today-action div{min-width:0}
.rm-today-check{appearance:none;position:relative;flex:none;display:block;width:22px;height:22px;margin:1px 0 0;padding:0;border:1.5px solid var(--faint);border-radius:6px;background:var(--surface);cursor:pointer}
.rm-today-check::after{content:"";position:absolute;inset:-11px}
.rm-today-check:hover{border-color:var(--ink)}
.rm-today-action a{display:block;color:var(--ink);font-weight:500;text-decoration:none}
.rm-today-action a:hover{text-decoration:underline;text-underline-offset:3px}
.rm-today-action small{font-size:var(--fs-note);color:var(--muted)}
.rm-today-action small b{font-weight:600;color:var(--ink)}
/* <section class="rm-card rm-today-resume"><h2 class="rm-h2">À reprendre</h2><p class="rm-note">…</p>
     <p class="rm-today-decided"><b>Décidé :</b> …</p><p class="rm-today-open"><b>Ouvert :</b> …</p><a class="rm-link">Lire le compte rendu</a></section> */
.rm-today-resume{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:18px 22px 8px}
.rm-today-decided,.rm-today-open{padding-left:14px;border-left:2px solid var(--ink)}
.rm-today-open{border-left-color:var(--line-strong)}
.rm-today-decided b,.rm-today-open b{font-weight:600}
/* Téléphone : « À faire » en une ligne, qui mène à la page.
   <a class="rm-today-strip" href="/a-faire"><span><b>À faire :</b> <span class="rm-today-strip-text">…</span></span></a> */
.rm-today-strip{display:flex;align-items:center;min-height:var(--h-touch);padding:8px 14px;border:1px solid var(--line);border-radius:var(--r-tile);background:var(--sunken);color:var(--ink);font-size:var(--fs-note);font-weight:400;line-height:1.35;text-decoration:none}
.rm-today-strip b{font-weight:600}
.rm-today-strip-text{text-decoration:underline;text-underline-offset:3px}
.rm-today-sync{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:20px 0 0}

/* ---------- Aujourd'hui · compte vide ---------- */
/* État vide du socle (.rm-empty, .rm-slots), puis ce que la page montrera. */
.rm-today-soon{margin-top:32px}
.rm-today-soon .rm-slots{margin-top:12px}
.rm-today-headline{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.rm-today-after{margin-top:24px}
@media (max-width:760px){
  .rm-today .rm-empty-body .button{align-self:stretch;min-height:var(--h-touch);border-radius:var(--r-tile);font-size:15px}
  .rm-today-soon{margin-top:16px}
  .rm-today-soon .rm-slots{margin-top:0}
  .rm-today-after{margin-top:16px}
}

/* ---------- Aujourd'hui · premiers pas ---------- */
/* <ol class="rm-today-steps"><li class="rm-card rm-today-step is-now"><span class="rm-today-num">2</span>
     <div class="rm-today-step-text"><p class="rm-today-step-title"><b>Votre première réunion est offerte</b><span class="rm-chip is-todo">À faire</span></p><p>…</p></div>
     <a class="button button-primary" href="…">Nouvelle réunion</a></li></ol>
   `is-now` : l'étape à faire maintenant, cernée d'encre. `rm-today-num is-done` : étape faite.
   `.rm-chip.is-todo` : pastille « À faire », cernée d'encre (à proposer au socle). */
.rm-today-steps{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.rm-today-step{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:20px 24px}
.rm-today-step.is-now{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.rm-today-num{flex:none;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line-strong);border-radius:50%;font-size:var(--fs-note);font-weight:600}
.rm-today-num.is-done{background:var(--ink);border-color:var(--ink);color:var(--white)}
.rm-today-step-text{flex:1 1 300px;min-width:0}
.rm-today-step-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.rm-today-step-title b{font-size:var(--fs-strong);font-weight:600;letter-spacing:-.01em}
.rm-today-step-title+p{margin-top:4px;color:var(--muted)}
.rm-chip.is-todo{background:var(--surface);border-color:var(--ink);color:var(--ink)}
/* « Ce que vous recevrez » : le compte rendu d'exemple, en bref.
   <div class="rm-card rm-today-sample-card"><div class="rm-today-sample-top">(pastille) <b>titre</b></div>
     <h3 class="rm-caps">Décision</h3><p class="rm-today-it"><span class="rm-today-ts">10:05</span><span class="rm-today-it-text">…</span></p>
     <ul><li class="rm-today-it"><span class="rm-today-box"></span><span class="rm-today-it-text">…</span><span class="rm-chip">Léa</span></li></ul></div> */
.rm-today-sample{margin-top:12px}
.rm-today-sample-card{margin-top:12px;padding:22px 24px 12px}
.rm-today-sample-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.rm-today-sample-top b{font-weight:600}
.rm-today-sample-card .rm-caps{margin:16px 0 6px}
.rm-today-sample-card ul{margin:0;padding:0;list-style:none}
.rm-today-brief{font-size:15px}
.rm-today-it{display:flex;align-items:flex-start;gap:12px;padding:8px 0;border-top:1px solid var(--line-soft);font-weight:500}
.rm-today-it-text{flex:1;min-width:0}
.rm-today-ts{flex:none;min-width:58px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink-soft);font-size:var(--fs-tag);line-height:1.2;text-align:center;font-variant-numeric:tabular-nums}
.rm-today-box{flex:none;width:20px;height:20px;margin-top:1px;border:1.5px solid var(--faint);border-radius:6px;background:var(--surface)}
.rm-today-sample-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 16px;margin-top:6px;padding-top:4px;border-top:1px solid var(--line-soft)}
.rm-today-sample-foot .rm-note{flex:1 1 280px;min-width:0}
/* « Vos prochaines réunions » : le jour au-dessus de l'heure, l'état sous le titre.
   <a class="rm-row rm-today-next"><span class="rm-row-when">mar. 13<small>10 h</small></span>
     <span class="rm-row-what"><b>…</b><small>…</small><span class="rm-chip">Robotmeet y sera</span><span class="rm-today-offer">…</span></span></a> */
.rm-today-next{align-items:flex-start;gap:14px}
.rm-today-next .rm-row-when{flex-basis:64px}
.rm-today-next .rm-row-when small{display:block;font-size:var(--fs-note);font-weight:400;color:var(--muted)}
.rm-today-next .rm-row-what{display:flex;flex-direction:column;align-items:flex-start}
.rm-today-next .rm-chip{margin-top:8px}
.rm-today-offer{margin-top:6px;font-size:var(--fs-note)}
.rm-today-foot{padding:14px 22px;border-top:1px solid var(--line-soft);background:var(--bg);font-size:var(--fs-note);color:var(--muted)}
/* « Bon à savoir » : <p class="rm-today-tip">(icône au trait) <span>…</span></p> */
.rm-today-tips{display:flex;flex-direction:column;gap:12px;padding:18px 22px}
.rm-today-tip{display:flex;align-items:flex-start;gap:12px;font-size:var(--fs-note)}
.rm-today-tip svg{flex:none;width:16px;height:16px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){
  .rm-today-step{padding:16px}
  .rm-today-step-text{flex-basis:200px}
  .rm-today-step .button{width:100%;min-height:var(--h-touch)}
  .rm-today-sample-card{padding:16px 16px 8px}
  .rm-today-foot{padding-inline:16px}
}
/* Gestures and their keyboard/menu equivalent share the same protected forms. */
.rm-swipe{position:relative;min-width:0;touch-action:pan-y pinch-zoom}
.rm-swipe-content{position:relative;background:var(--surface);padding-right:44px;transition:transform .18s ease}
.rm-swipe-menu{position:absolute;right:0;top:0;z-index:3;margin:0}
.rm-swipe-menu>summary{display:grid;place-items:center;width:44px;min-height:52px;cursor:pointer;list-style:none;font-size:22px}
.rm-swipe-menu>summary::-webkit-details-marker{display:none}
.rm-swipe-actions{display:flex;gap:8px;padding:8px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);box-shadow:var(--sh-1)}
.rm-swipe-actions form{margin:0}
.rm-swipe[data-side]{overflow:hidden}
.rm-swipe[data-side] .rm-swipe-menu{inset:0 0 0 auto;width:110px}
.rm-swipe[data-side=archive] .rm-swipe-menu{inset:0 auto 0 0}
.rm-swipe[data-side] .rm-swipe-menu>summary{display:none}
.rm-swipe[data-side] .rm-swipe-actions{position:absolute;inset:0;padding:0;border:0;border-radius:0;box-shadow:none}
.rm-swipe[data-side] .rm-swipe-actions form,.rm-swipe[data-side] .rm-swipe-actions button{width:100%;height:100%;min-height:52px}
.rm-swipe[data-side] .rm-swipe-actions button{border-radius:0;background:var(--ink);color:var(--white)}
.rm-swipe[data-side=archive] [data-swipe-action=trash],.rm-swipe[data-side=trash] [data-swipe-action=archive]{display:none}
.rm-swipe[data-side=archive] .rm-swipe-content{transform:translateX(110px)}
.rm-swipe[data-side=trash] .rm-swipe-content{transform:translateX(-110px)}
@media(prefers-reduced-motion:reduce){.rm-swipe-content{transition:none}}
/* Lot L2 · Fiche de réunion. Planches : Reunion-avant, Reunion-direct, Reunion-apres,
   Reunion-transcription, Carte-mentale, Robot-refuse, Action-impossible, Mobile-reunion,
   Mobile-robot-refuse. Code : meeting_page.rs (la fiche), meeting_view.rs (compte rendu,
   transcription, carte). Servie à la suite de rm.css, dans /assets/rm.css : ses règles
   l'emportent sur les feuilles historiques. Composants du socle : classes rm-… (rm.css) ;
   n'écrire ici que ce qui est propre à la fiche.
   Les vues (Compte rendu, Transcription, Carte, Pièces, Détails) sont des ancres d'une même
   page : `:target` montre la vue visée, `is-default` celle qui s'ouvre sans ancre. Sans
   `:has()`, tout reste empilé et les ancres y mènent : les règles qui masquent sont toutes
   sous `@supports selector(:has(*))`. */

/* ---------- Cadre : la fiche à gauche, le Chat de la réunion à droite ---------- */
/* <div class="rm-mtg is-after" data-live-state="…"><div class="rm-mtg-main">…</div>
     <aside class="rm-mtg-ask"><div class="rm-mtg-ask-in">(Chat)</div></aside></div> */
.rm-mtg{display:flex;align-items:stretch;min-height:100dvh}
.rm-mtg-main{flex:1 1 0;min-width:0;display:flex;flex-direction:column;padding:32px 48px 64px}
.rm-mtg-main>*{width:100%;max-width:800px}
.rm-mtg-ask{flex:0 0 400px;min-width:0;background:var(--surface);border-left:1px solid var(--line)}
.rm-mtg-ask-in{position:sticky;top:0;display:flex;flex-direction:column;gap:18px;max-height:100dvh;overflow-y:auto;padding:28px 24px}
/* Le Chat (lot L3) garde ses pièces ; la colonne lui sert de cadre. */
.rm-mtg-ask .panel{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
/* Boutons du Système dans toute la fiche, panneaux des autres lots compris (classement en
   dossier : 11 px dans folders.css). */
.rm-mtg .button{font-size:var(--fs-body)}
.rm-ask-history>summary{display:flex;align-items:center;min-height:var(--h-control);font-size:var(--fs-note);font-weight:600;cursor:pointer}

/* ---------- En-tête : fil d'Ariane, titre, date, personnes, Partager et « ··· » ---------- */
.rm-mtg-back{display:none}
.rm-mtg-crumbs{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:var(--fs-note);color:var(--muted)}
.rm-mtg-crumbs a{color:var(--muted);font-weight:400;text-decoration:none}
.rm-mtg-crumbs a:hover{color:var(--ink)}
.rm-mtg-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px;margin-top:14px}
.rm-mtg-titles{flex:1 1 380px;min-width:0}
.rm-mtg-titles .rm-title{overflow-wrap:anywhere}
.rm-mtg-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;color:var(--muted)}
.rm-mtg-actions{display:flex;align-items:center;gap:6px}
.rm-more-panel .rm-more-phone{display:none}
.rm-av{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--sunken);border:1px solid var(--line);color:var(--ink);font:600 11px/1 var(--font-ui)}
.rm-mtg-people{display:inline-flex;padding-left:6px}
.rm-mtg-people .rm-av{margin-left:-6px}
/* Message d'une action, réunion d'exemple : une ligne posée, sans couleur d'alerte. */
.rm-mtg-info{margin-top:16px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-tile);background:var(--surface);font-size:var(--fs-note)}
.rm-mtg-info.is-error{border:1.5px solid var(--ink);font-weight:500}

/* ---------- Carte d'état (Reunion-direct, Robot-refuse, Reunion-avant) ---------- */
/* <section class="rm-card rm-state"><div class="rm-state-text">(pastille, titre, phrases)</div>
     <div class="rm-state-actions [rm-bottombar]">(gestes)</div></section> */
.rm-state{display:flex;flex-wrap:wrap;align-items:center;gap:24px 28px;margin-top:24px;padding:30px 32px}
.rm-state-text{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.rm-state-text p{max-width:56ch}
.rm-state-text .rm-note{font-size:var(--fs-body)}
.rm-state-title{font:600 26px/1.25 var(--font-display);letter-spacing:-.03em}
.rm-state-clock{display:block;font:600 56px/1 var(--font-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.rm-state-actions{flex:0 1 232px;display:flex;flex-direction:column;gap:8px}
.rm-state-actions form{margin:0}
.rm-state-actions .button{width:100%}
/* Avant la réunion : « Robotmeet y sera », plus discrète. */
.rm-robot{gap:16px;padding:20px 24px}
.rm-robot .rm-state-text{flex-basis:320px;gap:6px}
.rm-robot .rm-state-actions{flex:0 0 auto}
.rm-mtg-onsite{margin-top:24px;padding:20px 24px}
.rm-mtg-onsite .mtg-status{margin:0;padding:0;border:0;background:none}
/* « Avant de le renvoyer » : trois étapes numérotées. */
.rm-steps{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.rm-steps ol{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.rm-steps li{display:flex;align-items:flex-start;gap:14px}
.rm-num{flex:none;display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--line-strong);border-radius:50%;font:600 12px/1 var(--font-ui)}
/* Action impossible : l'alerte du socle, la jauge du mois. */
.rm-mtg-alert{margin-top:24px}
.rm-mtg-after-alert{margin-top:10px}
.rm-gauge{display:flex;flex-direction:column;gap:8px;max-width:420px}
.rm-gauge-head{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-note)}
.rm-gauge-head b{font-weight:600}
.rm-bar{display:block;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.rm-bar i{display:block;height:100%;border-radius:4px;background:var(--ink)}

/* ---------- Avant et pendant : préparation, détails, pièces ---------- */
.rm-mtg-prep .rdv-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px;margin-top:14px}
.rm-mtg-prep .rdv-block{min-width:0;margin:0;padding:20px 24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.rm-mtg-main>.rm-mtg-details{margin-top:14px}
.rm-mtg-main>.graphite-pieces{margin-top:24px}
.rm-mtg-folder:empty{display:none}

/* ---------- Onglets (bureau) et sélecteur (téléphone) ---------- */
.rm-mtg-tabs{display:flex;gap:26px;margin-top:24px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.rm-mtg-tab{display:inline-flex;align-items:center;gap:6px;min-height:var(--h-control);margin-bottom:-1px;padding:0 2px;border-bottom:2px solid transparent;color:var(--muted);font-weight:500;white-space:nowrap;text-decoration:none}
.rm-mtg-tab:hover{color:var(--ink);text-decoration:none}
.rm-mtg-count{color:var(--muted);font-weight:400}
.rm-mtg-seg{display:none}
.rm-mtg-views{margin-top:34px}
@supports selector(:has(*)){
  /* Une vue à la fois : celle qui contient la cible, sinon celle du serveur. */
  .rm-mtg-views:has(.rm-view :target)>.rm-view:not(:has(:target)){display:none}
  .rm-mtg-views:not(:has(.rm-view :target))>.rm-view:not(.is-default){display:none}
  /* Onglet allumé. */
  .rm-mtg:has([data-view="compte-rendu"] :target) .rm-mtg-tab[data-tab="compte-rendu"],
  .rm-mtg:has([data-view="transcription"] :target) .rm-mtg-tab[data-tab="transcription"],
  .rm-mtg:has([data-view="carte"] :target) .rm-mtg-tab[data-tab="carte"],
  .rm-mtg:has([data-view="pieces"] :target) .rm-mtg-tab[data-tab="pieces"],
  .rm-mtg:not(:has(.rm-view :target)) .rm-mtg-tab.is-default{border-bottom-color:var(--ink);color:var(--ink)}
  .rm-mtg:has([data-view="compte-rendu"] :target) .rm-mtg-seg [data-tab="compte-rendu"],
  .rm-mtg:has([data-view="transcription"] :target) .rm-mtg-seg [data-tab="transcription"],
  .rm-mtg:has(.rm-mtg-ask :target) .rm-mtg-seg [data-tab="question"],
  .rm-mtg:not(:has(.rm-view :target,.rm-mtg-ask :target)) .rm-mtg-seg .is-default{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
  /* La transcription et la carte prennent la place du Chat. */
  .rm-mtg:has(.rm-view.is-wide :target) .rm-mtg-ask,
  .rm-mtg:not(:has(.rm-view :target,.rm-mtg-ask :target)):has(.rm-view.is-wide.is-default) .rm-mtg-ask{display:none}
  .rm-mtg:has(.rm-view.is-wide :target) .rm-mtg-main>*,
  .rm-mtg:not(:has(.rm-view :target,.rm-mtg-ask :target)):has(.rm-view.is-wide.is-default) .rm-mtg-main>*{max-width:1180px}
}

/* ---------- Compte rendu (Reunion-apres) ---------- */
.rm-cr{display:flex;flex-direction:column}
.rm-cr .rm-caps{font-size:var(--fs-note);letter-spacing:.02em}
.rm-cr-state{margin-bottom:14px}
.rm-cr-section{margin-top:44px}
.rm-cr-section.is-first{margin-top:0}
.rm-cr-lead{margin-top:12px}
.rm-cr-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-12px 0}
.rm-cr-none{margin-top:12px}
.rm-cr-foot{margin-top:28px}
.rm-cr-foot a{color:var(--ink);font-weight:500}
.rm-cr-empty{padding:24px 26px;border:1px dashed var(--faint);border-radius:var(--r-card);background:var(--surface);color:var(--muted)}
.rm-facts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.rm-fact{flex:1 1 140px;min-width:0;display:flex;flex-direction:column;gap:2px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-tile);background:var(--surface);color:var(--ink);font-weight:400;text-decoration:none}
.rm-fact:hover{border-color:var(--ink);text-decoration:none}
.rm-fact b{font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.rm-fact span{font-size:var(--fs-note);color:var(--muted)}
.rm-items{margin:12px 0 0;padding:0;list-style:none}
.rm-item{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-top:1px solid var(--line-soft)}
.rm-item-body{flex:1;min-width:0;display:flex;flex-direction:column}
.rm-item-text{font-size:var(--fs-strong);font-weight:500;line-height:1.45;overflow-wrap:anywhere}
.rm-item.is-point .rm-item-text{font-size:var(--fs-body);font-weight:400}
.rm-item-title{font-weight:600}
.rm-item-sub{color:var(--muted)}
.rm-item-who{flex:none;margin-top:2px;max-width:40%;overflow:hidden;text-overflow:ellipsis}
/* Horodatage : il fait sauter le lecteur (`meeting.mjs`) ; 44 px de cible au doigt. */
.rm-ts{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:58px;min-height:30px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink-soft);font:500 12px/1 var(--font-ui);font-variant-numeric:tabular-nums;text-decoration:none}
a.rm-ts::after{content:"";position:absolute;inset:-7px -2px}
a.rm-ts:hover{border-color:var(--ink);color:var(--ink);text-decoration:none}
/* Case d'une action : un bouton de formulaire dessiné en case, 44 px de cible. */
.rm-check-form{flex:none;margin:0}
.rm-check{position:relative;flex:none;display:grid;place-items:center;width:22px;height:22px;margin:2px 0 0;padding:0;border:1.5px solid var(--faint);border-radius:6px;background:var(--surface);cursor:pointer}
button.rm-check::after{content:"";position:absolute;inset:-11px}
button.rm-check:hover{border-color:var(--ink)}
.rm-check:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.rm-action.is-done .rm-check{border-color:var(--ink);background:var(--ink)}
.rm-action.is-done .rm-check::before{content:"";width:6px;height:11px;margin-top:-2px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg)}
.rm-action.is-done .rm-item-text{color:var(--muted);text-decoration:line-through}
/* Les formats du compte rendu (Paramètres) : le compte rendu sans cadre, les autres repliés. */
.rm-mtg .report-formats{display:flex;flex-direction:column;gap:14px;padding-top:0;border-top:0}
.rm-mtg .report-formats>details:first-child{border:0;border-radius:0;background:none;overflow:visible}
.rm-mtg .report-formats>details[open]:first-child>summary{display:none}
.rm-mtg .report-formats>details:nth-child(2){margin-top:30px}
.rm-view>.moments{margin-top:44px}
/* Un seul bouton plein par écran : « Partager » ; le montage des moments passe en contour. */
.rm-mtg .moments .button-primary{border-color:var(--line-strong);background:var(--surface);color:var(--ink)}
.rm-regen,.rm-view>.graphite-versions{margin-top:18px}
.rm-regen>summary{display:flex;align-items:center;min-height:var(--h-control);font-size:var(--fs-note);font-weight:600;cursor:pointer}
.rm-regen .regen{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-tile);background:var(--surface)}
/* Lecteur : en bas de la colonne, toujours à portée pendant la lecture. */
.rm-mtg-bar{position:sticky;bottom:16px;z-index:5;margin-top:44px}
.rm-mtg-bar.is-empty,.rm-mtg-ask-link{display:none}

/* ---------- Transcription (Reunion-transcription) ---------- */
.rm-tr{display:flex;flex-wrap:wrap;align-items:flex-start;gap:24px 40px}
.rm-tr-main{flex:1 1 520px;min-width:0;max-width:820px}
.rm-tr-side{position:sticky;top:24px;flex:0 1 300px;min-width:240px;display:flex;flex-direction:column;gap:28px;padding:24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.rm-tr-video{margin-bottom:16px}
.rm-tr-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.rm-tr-find{flex:1 1 280px;min-width:0}
.rm-tr-who{display:flex;flex-wrap:wrap;gap:6px}
.rm-tr-who a{position:relative;display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink-soft);font:500 var(--fs-note)/1 var(--font-ui);white-space:nowrap;text-decoration:none}
.rm-tr-who a::after{content:"";position:absolute;inset:-4px 0}
.rm-tr-who a:hover{border-color:var(--ink);text-decoration:none}
.rm-tr-who a[aria-current]{border-color:var(--ink);background:var(--ink);color:var(--white)}
.rm-tr-main>.rm-note{margin-top:10px}
.rm-tr-count{margin-top:12px}
.rm-tr-count:empty{display:none}
.rm-turns{margin-top:10px}
.rm-tr-chap{display:flex;align-items:baseline;gap:12px;padding:26px 16px 8px}
.rm-tr-chap h3{font:600 17px/1.3 var(--font-display);letter-spacing:-.015em}
/* Un passage garde la classe `segment` que lit `meeting.mjs` : ces règles passent devant
   celles de l'ancienne transcription (style.css). */
.segment.rm-turn{display:flex;gap:16px;padding:14px 16px;border-radius:var(--r-tile)}
.segment.rm-turn:hover{background:none}
.rm-turn .rm-av{width:34px;height:34px}
.segment.rm-turn.is-mark{background:var(--surface);box-shadow:0 0 0 1px var(--line-strong)}
.segment.rm-turn.is-playing,.segment.rm-turn:target{background:var(--surface);box-shadow:0 0 0 1px var(--ink)}
/* Le passage qu'une adresse demande (`?t=<secondes>#passage`) : le serveur le repère
   (`is-at`) et y pose l'ancre `#passage`, dans la transcription comme dans celle d'une
   partie d'enregistrement (vue Détails). Même trait que le tour visé ou en cours de
   lecture ; la marge laisse voir le titre du chapitre au-dessus. */
.rm-mtg .segment.is-at{background:var(--surface);box-shadow:0 0 0 1px var(--ink)}
#passage{scroll-margin-top:72px}
.segment.rm-turn[hidden]{display:none}
.rm-turn-body{flex:1;min-width:0}
.rm-turn .rm-turn-who{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--fs-note)}
.rm-turn .rm-turn-who strong{display:inline;margin:0;font:600 var(--fs-note)/1.4 var(--font-ui)}
.rm-turn .rm-turn-who time{font:500 12px/1.4 var(--font-ui);color:var(--muted)}
.rm-turn .rm-turn-text{max-width:none;margin-top:4px;font-size:var(--fs-strong);line-height:1.6;overflow-wrap:anywhere}
.rm-turn .rm-turn-text mark{padding:0 2px;border-radius:3px;background:var(--tray);color:inherit;box-shadow:none}
.rm-tr-t{color:var(--muted);font:500 12px/1.4 var(--font-ui);font-variant-numeric:tabular-nums}
a.rm-tr-t{text-decoration:underline;text-underline-offset:3px}
a.rm-tr-t:hover{color:var(--ink)}
.rm-tr-foot{padding:22px 16px 0}
.rm-rename{margin:10px 16px 0}
.rm-rename>summary{display:inline-flex;align-items:center;min-height:var(--h-control);font-size:var(--fs-note);font-weight:600;cursor:pointer}
.rm-rename form{display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:420px}
.rm-tr-jumps{display:flex;flex-direction:column;margin-top:8px}
.rm-tr-jumps a{display:flex;align-items:center;gap:12px;min-height:var(--h-control);border-top:1px solid var(--line-soft);color:var(--ink);font-weight:400;text-decoration:none}
.rm-tr-jumps a:first-child{border-top:0}
.rm-tr-jumps a:hover{text-decoration:underline;text-underline-offset:3px}
.rm-tr-jumps .rm-tr-t{flex:0 0 44px}
.rm-tr-speak{display:flex;flex-direction:column;gap:14px;margin:14px 0 0;padding:0;list-style:none}
.rm-tr-speak-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}
.rm-tr-speak .rm-bar{height:6px}

/* ---------- Carte (Carte-mentale) ---------- */
/* La réunion, quatre branches (décisions, actions, questions ouvertes, chapitres) et leurs
   cases ; une case ouvre son encart « Sélection » par son ancre. */
.rm-map-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px}
.rm-map-keys{display:flex;flex-wrap:wrap;gap:8px 20px}
.rm-map-key{display:inline-flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:var(--fs-note)}
.rm-map-key i{flex:none;width:14px;height:14px;border:1px solid var(--ink);border-radius:4px}
.rm-map-key.is-decision i{background:var(--ink)}
.rm-map-key.is-action i{border-width:1.5px;background:var(--surface)}
.rm-map-key.is-question i{border-color:var(--faint);background:var(--line)}
.rm-map-key.is-chapter i{border-color:var(--faint);background:var(--surface)}
.rm-map{margin-top:12px;padding:16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);overflow-x:auto}
.rm-map-tree{display:flex;align-items:center;min-width:860px}
.rm-map-root{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:184px;min-height:88px;padding:8px 12px;border-radius:14px;background:var(--ink);color:var(--white);text-align:center;line-height:1.3}
.rm-map-root b{font-weight:600;overflow-wrap:anywhere}
.rm-map-root span{color:var(--line-strong);font-size:var(--fs-tag)}
.rm-map-branches{position:relative;flex:1;min-width:0;margin:0 0 0 48px;padding:0;list-style:none}
.rm-map-branches::before{content:"";position:absolute;left:-48px;top:50%;width:24px;border-top:1.5px solid var(--faint)}
.rm-map-branch{position:relative;display:flex;align-items:center;gap:48px;padding:9px 0}
.rm-map-branch::before{content:"";position:absolute;left:-24px;top:50%;width:24px;border-top:1.5px solid var(--faint)}
.rm-map-branch::after{content:"";position:absolute;left:-24px;top:0;bottom:0;border-left:1.5px solid var(--faint)}
.rm-map-branch:first-child::after{top:50%}
.rm-map-branch:last-child::after{bottom:50%}
.rm-map-branch:only-child::after{display:none}
.rm-map-node{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:200px;min-height:48px;padding:8px 10px;border-radius:12px;font-weight:600;text-align:center}
.rm-map-node::after{content:"";position:absolute;right:-25px;top:50%;width:24px;border-top:1.5px solid var(--faint)}
.is-decision>.rm-map-node{background:var(--ink);color:var(--white)}
.is-action>.rm-map-node{border:1.5px solid var(--ink);background:var(--surface)}
.is-question>.rm-map-node{border:1px solid var(--faint);background:var(--line)}
.is-chapter>.rm-map-node{border:1px solid var(--faint);background:var(--surface)}
.rm-map-leaves{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.rm-map-leaves>li{position:relative;min-width:0}
.rm-map-leaves>li::before{content:"";position:absolute;left:-24px;top:50%;width:24px;border-top:1.5px solid var(--faint)}
.rm-map-leaves>li::after{content:"";position:absolute;left:-24px;top:-3px;bottom:-3px;border-left:1.5px solid var(--faint)}
.rm-map-leaves>li:first-child::after{top:50%}
.rm-map-leaves>li:last-child::after{bottom:50%}
.rm-map-leaves>li:only-child::after{display:none}
.rm-map-leaf{display:block;min-height:40px;padding:11px 14px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);font-size:var(--fs-note);font-weight:400;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.rm-map-leaf b{font-weight:600}
.rm-map-time{color:var(--muted);font-variant-numeric:tabular-nums}
.is-decision .rm-map-leaf .rm-map-time{color:var(--ink);font-weight:600}
.is-question .rm-map-leaf{background:var(--sunken)}
.is-chapter .rm-map-leaf{border-color:var(--line)}
.rm-map-leaf.is-ask{border-style:dashed;border-color:var(--faint)}
.rm-map-leaf.is-done{border-color:var(--line);background:var(--bg);color:var(--muted)}
.rm-map-leaf:hover{border-color:var(--ink);text-decoration:none}
.rm-map-leaf:focus,.rm-map-leaf:focus-visible{border-color:var(--ink);outline:0;box-shadow:0 0 0 3px var(--line)}
.rm-map-sel{display:none;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:14px;padding:18px 22px}
.rm-map-sel:target{display:flex}
.rm-map-sel-body{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:2px}
.rm-map-sel-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.rm-map-sel .rm-strong{margin-top:6px}
@supports selector(:has(*)){
  .rm-map-sels:not(:has(.rm-map-sel:target)) .rm-map-sel.is-first{display:flex}
  .rm-map-view:not(:has(.rm-map-sel:target)) .rm-map-leaf.is-first{border-color:var(--ink);box-shadow:0 0 0 3px var(--line)}
}

/* ---------- Détails, fichiers, question ---------- */
.rm-mtg-details{display:flex;flex-direction:column;gap:14px}
.rm-mtg-files .rm-files{columns:2 220px;column-gap:24px;margin:10px 0 0;padding:0;list-style:none}
.rm-files li{break-inside:avoid}
.rm-files a{display:flex;align-items:center;min-height:40px;color:var(--ink);font-weight:400}
.rm-ask{display:flex;flex-direction:column;gap:14px}
.rm-qa{display:flex;flex-direction:column;gap:10px}
.rm-bubble{align-self:flex-end;max-width:90%;padding:11px 14px;border-radius:14px 14px 4px 14px;background:var(--sunken)}
.rm-qa-answer{display:flex;flex-direction:column;gap:8px}
.rm-qa-answer.is-unknown{color:var(--muted)}
.rm-qa-refs{display:flex;flex-wrap:wrap;gap:8px}
.rm-ask-form{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.rm-ask-form label{font-size:var(--fs-note);font-weight:600}
.rm-ask-form .button{align-self:flex-start}

/* ---------- Écrans moyens : le Chat passe sous la fiche ---------- */
@media (max-width:1100px){
  .rm-mtg{flex-direction:column;min-height:0}
  .rm-mtg-main{padding:28px 32px 48px}
  .rm-mtg-ask{flex:none;border-left:0;border-top:1px solid var(--line)}
  .rm-mtg-ask-in{position:static;max-height:none;max-width:800px;padding:28px 32px}
  .rm-tr-side{position:static}
}

/* ---------- Téléphone (Mobile-reunion, Mobile-robot-refuse) ---------- */
/* Barre de retour avec le menu, titre de 24 px, sélecteur Compte rendu · Transcription ·
   Chat, et en bas le lecteur fixe avec « Demander » (ou les gestes de la carte d'état). */
@media (max-width:760px){
  .rm-mtg{display:block}
  .rm-mtg-main{padding:10px 20px 24px}
  .rm-mtg-main>*{max-width:none}
  .rm-mtg-back{display:flex}
  .rm-mtg-crumbs,.rm-mtg-tabs,.rm-mtg-actions{display:none}
  .rm-more-panel .rm-more-phone{display:flex}
  .rm-mtg-head{margin-top:16px}
  .rm-mtg-titles .rm-title{font-size:24px;letter-spacing:-.03em}
  .rm-mtg-meta{margin-top:6px;font-size:var(--fs-note)}
  .rm-mtg-people{display:none}
  .rm-mtg-seg{display:flex;margin-top:18px}
  .rm-mtg-views{margin-top:22px}
  .rm-mtg-ask-in{padding:24px 20px}
  .rm-state{gap:14px;margin-top:18px;padding:20px}
  .rm-state-title{font-size:22px;letter-spacing:-.025em}
  .rm-state-clock{font-size:44px}
  .rm-state-actions{flex-basis:100%}
  .rm-state-actions.rm-bottombar .button{min-height:var(--h-touch)}
  .rm-mtg:has(.rm-bottombar) .rm-mtg-main{padding-bottom:150px}
  /* Le compte rendu, resserré : sans les chiffres, horodatages en tête de ligne. */
  .rm-facts{display:none}
  .rm-cr-section{margin-top:28px}
  .rm-item{gap:12px;padding:12px 0}
  .rm-item-text{font-size:var(--fs-body)}
  .rm-item-who{max-width:45%}
  .rm-ts{min-width:44px;min-height:28px;padding:0 4px;border:0;background:none;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
  /* Lecteur fixe et « Demander ». */
  .rm-mtg-bar.rm-bottombar{flex-direction:row;align-items:center;gap:12px;margin:0;padding:12px 16px calc(16px + env(safe-area-inset-bottom))}
  .rm-mtg-bar.rm-bottombar.is-empty{display:flex;justify-content:flex-end}
  .rm-mtg-bar .rm-player{flex:1;min-width:0;padding:0;border:0}
  .rm-mtg-bar .rm-mtg-ask-link{display:inline-flex;flex:none;min-height:var(--h-touch)}
  .rm-tr-side{display:none}
  .segment.rm-turn{gap:12px;padding:12px 0}
  .segment.rm-turn.is-mark,.segment.rm-turn.is-playing,.segment.rm-turn:target,.segment.rm-turn.is-at{padding-inline:12px}
  .rm-tr-chap{padding:20px 0 6px}
  .rm-tr-foot{padding-inline:0}
  .rm-rename{margin-inline:0}
  .rm-map{padding:12px;overflow:visible}
  .rm-map-tree{display:block;min-width:0}
  .rm-map-root{width:auto;min-height:0;padding:14px}
  .rm-map-branches{margin:14px 0 0}
  .rm-map-branches::before,.rm-map-branch::before,.rm-map-branch::after,.rm-map-node::after,.rm-map-leaves>li::before,.rm-map-leaves>li::after{display:none}
  .rm-map-branch{display:block;padding:8px 0}
  .rm-map-node{width:auto;min-height:40px;margin-bottom:8px}
  .rm-map-leaf{white-space:normal}
  @supports selector(:has(*)){
    /* Après la réunion, le Chat est une vue : on y va par « Chat » ou « Demander ». */
    .rm-mtg.is-after:not(:has(.rm-mtg-ask :target)) .rm-mtg-ask{display:none}
    .rm-mtg.is-after:has(.rm-mtg-ask :target) .rm-mtg-views,
    .rm-mtg.is-after:has(.rm-mtg-ask :target) .rm-state,
    .rm-mtg.is-after:has(.rm-mtg-ask :target) .rm-steps{display:none}
    .rm-mtg.is-after .rm-mtg-ask{border-top:0}
  }
}

@media print{
  .rm-mtg{display:block;min-height:0}
  .rm-mtg-main{padding:0}
  .rm-mtg-main>*{max-width:none}
  .rm-mtg-ask,.rm-mtg-tabs,.rm-mtg-seg,.rm-mtg-bar,.rm-mtg-back,.rm-mtg-crumbs,.rm-state-actions,.rm-check-form{display:none!important}
}
/* Lot L4 · Recherche. Planches : Recherche, Vide-recherche. Code : graphite.rs, semantic.rs.
   Servie à la suite de rm.css, dans /assets/rm.css : ses règles l'emportent sur les
   feuilles historiques. Composants du socle : classes rm-… (rm.css) ; n'écrire ici que ce
   qui est propre à cette page. */

/* ---------- Recherche · page ---------- */
/* <div class="rm-page is-narrow rm-search">
     <div class="rm-search-head"><h1 class="rm-title">Recherche</h1><a class="button button-quiet" href="/bibliotheque">Toutes les réunions</a></div>
     <form class="rm-find is-large rm-search-find" role="search" method="get" action="/recherche">(loupe)
       <input class="rm-find-input" name="q" type="search"><div class="rm-seg" role="radiogroup">(Par le sens · Mot exact)</div>
       <button class="button button-quiet rm-search-go" type="submit">Chercher</button></form>
     (mode d'emploi, alerte, ou décompte puis résultats)</div>
   Sans les filtres de la planche (décision D10), la page tient dans la colonne de lecture. */
.rm-search{min-width:0}
.rm-search-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.rm-find.is-large.rm-search-find{gap:4px 12px;min-height:60px;margin-top:18px;padding:4px 4px 4px 18px}
.rm-search-find>svg{flex:none;width:19px;height:19px;fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round}
.rm-search-find .rm-seg{flex:none}
.rm-search-go{flex:none}
.rm-search-hint{margin-top:14px;max-width:74ch}
.rm-search .rm-alert{margin-top:16px}
/* Décompte : <p class="rm-search-status" role="status"><b>6 passages dans 3 réunions</b><span class="rm-note"> · regroupés…</span></p>
   Sans résultat (`is-none`), la façon de chercher suit en pastille ; dans l'état vide,
   <p class="rm-search-why"> dit pourquoi rien n'en sort peut-être. */
.rm-search-status{margin-top:16px}
.rm-search-status b{font-weight:600}
.rm-search-status .rm-note{font-size:inherit}
.rm-search-status.is-none{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.rm-search-capped{margin-top:4px}
.rm-search-results{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.rm-search-empty{margin-top:20px}
.rm-search-empty .button{margin-top:8px}
.rm-empty-body .rm-search-why{font-size:var(--fs-body);color:var(--muted)}

/* ---------- Recherche · carte « Réponse » ---------- */
/* <section class="rm-card rm-search-answer"><h2 class="rm-caps">Réponse</h2><p>Pour une réponse rédigée, demandez au Chat…</p>
     <form method="post" action="/chat">(champs cachés)<button class="rm-link rm-search-ask" type="submit">Demander au Chat (flèche)</button></form></section>
   Le bouton a l'allure d'un lien d'action : le seul bouton plein de l'écran reste « Nouvelle réunion ». */
.rm-search-answer{padding:18px 24px 8px}
.rm-search-answer p{margin-top:8px;max-width:74ch;font-size:var(--fs-strong);line-height:1.6}
.rm-search-answer form{margin:2px 0 0}
.rm-search-ask{gap:6px;padding:0;border:0;background:none;font-family:var(--font-ui);font-size:var(--fs-body);cursor:pointer}
.rm-search-ask svg{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Recherche · passages d'une réunion ---------- */
/* <section class="rm-card is-clip rm-hits"><div class="rm-hits-head"><div class="rm-hits-title"><h2 class="rm-h2">Atelier client · Maison Alba</h2>
       <p class="rm-note">Vendredi 9 octobre · 10 h · 38 min · Teams · 2 passages</p></div><a class="rm-link" href="/reunions/…">Ouvrir la fiche</a></div>
     <ol class="rm-hits-list"><li class="rm-hit"><a class="rm-hit-ts" href="/reunions/…#s12">(lecture) 14:20</a>
       <div class="rm-hit-body"><p class="rm-hit-who"><b>Noé Garnier</b><span class="rm-chip is-ok">Décision</span></p>
         <p class="rm-hit-quote">« Je <mark>signe la réception</mark> si la date de pose est dans le PV. »</p></div></li></ol></section>
   Le moment mène au tour de parole dans la transcription de la fiche ; ce qui correspond à
   la recherche ressort en gras, à l'encre. */
.rm-hits-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;padding:8px 22px}
.rm-hits-title{flex:1 1 320px;min-width:0}
.rm-hits-title .rm-h2{overflow-wrap:anywhere}
.rm-hits-list{margin:0;padding:0;list-style:none}
.rm-hit{display:flex;align-items:flex-start;gap:16px;padding:10px 22px;border-top:1px solid var(--line-soft)}
.rm-hit-ts{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:80px;min-height:var(--h-control);padding:0 10px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);color:var(--ink);font:500 var(--fs-note)/1 var(--font-ui);font-variant-numeric:tabular-nums;text-decoration:none}
.rm-hit-ts:hover{border-color:var(--ink);text-decoration:none}
.rm-hit-ts svg{flex:none;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.rm-hit-body{flex:1;min-width:0}
.rm-hit-who{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:26px;font-size:var(--fs-note)}
.rm-hit-who b{font-weight:600}
.rm-hit-quote{font-size:15px;line-height:1.5;text-wrap:pretty;overflow-wrap:anywhere}
.rm-hit-who+.rm-hit-quote{margin-top:4px}
/* Sans intervenant connu, la citation s'aligne sur le moment. */
.rm-hit-quote:first-child{padding-top:11px}
.rm-hit-quote mark{padding:0;border-radius:0;background:none;color:inherit;font-weight:700;box-shadow:none}
@media (max-width:760px){
  .rm-find.is-large.rm-search-find{margin-top:12px;padding:4px 4px 4px 14px}
  .rm-search-find .rm-seg{flex:1 1 auto}
  .rm-search-answer{padding:16px 16px 6px}
  .rm-hits-head{padding:10px 16px 4px}
  .rm-hits-title{flex-basis:100%}
  .rm-hit{gap:12px;padding:10px 16px}
  .rm-hit-ts{min-width:72px;padding:0 8px}
}
/* Lot L6 · À faire et Agenda. Planches : A-faire, Vide-a-faire, Agenda. Code : rendezvous.rs.
   Servie à la suite de rm.css, dans /assets/rm.css : ses règles l'emportent sur les
   feuilles historiques. Composants du socle : classes rm-… (rm.css) ; n'écrire ici que ce
   qui est propre à ces pages. */

/* ---------- À faire · page ---------- */
/* <div class="rm-todo rm-todo-page"><h1 class="rm-title">À faire</h1><p class="rm-sub">…</p>
     <div class="rm-todo-bar"><nav class="rm-seg">(Toutes · Faites)</nav><p class="rm-note">Lundi 12 octobre · …</p></div>
     <div class="rm-cols">(sections, puis « Par personne » et Google Tasks)</div></div>
   Toute la largeur, la colonne de côté à 300 px au plus (planche) ; un compte sans action
   garde la colonne de lecture du socle (`rm-page rm-todo`). */
.rm-todo{min-width:0}
.rm-todo-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.rm-todo-bar .rm-seg{flex:none}
.rm-todo-bar .rm-seg a{padding:0 16px;font-size:var(--fs-body)}
.rm-todo-bar+.rm-cols{margin-top:22px}
.rm-todo .rm-col-main{gap:18px}
.rm-todo .rm-col-side{gap:18px}
.rm-todo-page .rm-col-main{flex:999 1 560px}
.rm-todo-page .rm-col-side{flex:1 1 280px;max-width:300px}
@media (max-width:1199px){.rm-todo-page .rm-col-side{max-width:none}}
.rm-todo-none p{margin-top:6px;color:var(--muted)}

/* ---------- À faire · une action ---------- */
/* <li class="rm-todo-item" id="a-…"><div class="rm-todo-what">
     <div class="rm-todo-tick"><form class="rm-todo-form" method="post" action="/reunions/…/actions/…">(champs cachés)
       <button class="rm-todo-check" type="submit" aria-label="Marquer « … » comme faite"></button></form>
       <p class="rm-todo-text">Envoyer au client les photos de la terrasse protégée.</p></div>
     <p class="rm-todo-from"><span class="rm-chip">Thomas Leroy</span><a href="/reunions/…#a-…">Atelier client · Maison Alba, 9 octobre</a></p></div>
     <span class="rm-todo-due"><b>Aujourd’hui</b></span>
     <a class="rm-todo-listen" href="/reunions/…?t=660#passage">(lecture) Écouter le passage</a></li>
   La case est un bouton d'envoi, sans script ; sa cible fait 44 px. `is-done` : cochée. */
.rm-todo-list{margin:0;padding:0;list-style:none}
.rm-todo-item{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 22px 14px;border-top:1px solid var(--line-soft)}
.rm-todo-what{flex:1 1 300px;min-width:0}
.rm-todo-tick{display:flex;align-items:flex-start;gap:14px;padding:10px 0 6px}
.rm-todo-form{flex:none;margin:0}
.rm-todo-check{appearance:none;position:relative;display:block;width:24px;height:24px;min-height:0;margin:0;padding:0;border:1.5px solid var(--faint);border-radius:6px;background:var(--surface);cursor:pointer}
.rm-todo-check::after{content:"";position:absolute;inset:-11px}
.rm-todo-check:hover{border-color:var(--ink)}
.rm-todo-check:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.rm-todo-check.is-done{background:var(--ink);border-color:var(--ink)}
.rm-todo-check.is-done::before{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg)}
.rm-todo-text{min-width:0;font-size:var(--fs-strong);font-weight:500;line-height:1.35;overflow-wrap:anywhere}
.rm-todo-item.is-done .rm-todo-text{color:var(--muted)}
.rm-todo-from{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding-left:38px;font-size:var(--fs-note)}
.rm-todo-from a{display:inline-flex;align-items:center;min-width:0;min-height:var(--h-control);margin:-9px 0;color:var(--ink);font-weight:400;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;overflow-wrap:anywhere}
.rm-todo-from a:hover{text-decoration-color:currentColor}
.rm-todo-due{flex:0 0 124px;font-size:var(--fs-note);color:var(--muted)}
.rm-todo-due b{font-weight:600;color:var(--ink)}
.rm-todo-listen{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:var(--h-control);padding:0 10px;border-radius:var(--r-nav);color:var(--ink-soft);font:500 var(--fs-note)/1 var(--font-ui);text-decoration:none}
.rm-todo-listen:hover{background:var(--sunken);color:var(--ink);text-decoration:none}
.rm-todo-listen svg{flex:none;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
@media (max-width:760px){
  .rm-todo-bar{margin-top:16px}
  .rm-todo-bar .rm-seg{flex:1 1 100%}
  .rm-todo-item{gap:2px 10px;padding:8px 16px 12px}
  .rm-todo-what{flex-basis:100%}
  .rm-todo-due{flex:1 1 auto;padding-left:38px}
  .rm-todo-listen{margin-right:-10px}
}

/* ---------- À faire · « Par personne » ---------- */
/* <section class="rm-card rm-todo-people"><h2 class="rm-h2">Par personne</h2>
     <ul><li><span class="rm-todo-person"><span>Camille Martin</span><b>3</b></span>
       <span class="rm-todo-meter" aria-hidden="true"><i style="width:100%"></i></span></li></ul>
     <p class="rm-note">7 actions ouvertes, 1 faite.</p></section>
   `is-nobody` : les actions sans responsable, en gris. */
.rm-todo-people{padding:18px 22px 20px}
.rm-todo-people ul{display:flex;flex-direction:column;gap:14px;margin:14px 0 0;padding:0;list-style:none}
.rm-todo-person{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}
.rm-todo-person>span{min-width:0;overflow-wrap:anywhere}
.rm-todo-person b{font-weight:600;font-variant-numeric:tabular-nums}
.rm-todo-nobody{color:var(--muted)}
.rm-todo-meter{display:block;height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.rm-todo-meter i{display:block;height:6px;border-radius:6px;background:var(--ink)}
.rm-todo-meter.is-nobody i{background:var(--faint)}
.rm-todo-people>.rm-note{margin-top:16px}

/* ---------- À faire · aucune action ---------- */
/* L'état vide du socle (.rm-empty), et à côté « À quoi ressemble une action » :
   <section class="rm-todo-shape"><h2 class="rm-h2">…</h2><ul><li class="rm-todo-ghost">
     <span class="rm-todo-ghost-box"></span><span class="rm-todo-ghost-text"><b>…</b><span class="rm-note">…</span></span>
     <span class="rm-chip">Responsable</span></li></ul></section> */
.rm-todo-shape ul{margin:12px 0 0;padding:0;list-style:none}
.rm-todo-ghost{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-top:1px dashed var(--line-strong)}
.rm-todo-ghost:last-child{border-bottom:1px dashed var(--line-strong)}
.rm-todo-ghost-box{flex:none;width:22px;height:22px;margin-top:1px;border:1.5px dashed var(--faint);border-radius:6px}
.rm-todo-ghost-text{flex:1;min-width:0}
.rm-todo-ghost-text b{display:block;font-weight:500}
.rm-todo-tasks{margin-top:28px;max-width:720px}
@media (max-width:760px){
  .rm-todo .rm-empty-body .button{align-self:stretch;min-height:var(--h-touch);border-radius:var(--r-tile);font-size:15px}
  .rm-todo-tasks{margin-top:16px}
}

/* ---------- Agenda · en-tête et bandeau ---------- */
/* <div class="rm-agenda"><div class="rm-agenda-head"><div><h1 class="rm-title">Agenda</h1><p class="rm-sub">Semaine du lundi 12 au vendredi 16 octobre</p></div>
     <nav class="rm-agenda-nav">(trois boutons discrets)</nav></div>
     <div class="rm-card rm-agenda-sum"><p>8 réunions cette semaine · … : <b>il manquera environ 1 h 35</b></p><a class="rm-link">Ajouter du temps</a></div> */
.rm-agenda{min-width:0}
.rm-agenda-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px}
.rm-agenda-nav{display:flex;flex-wrap:wrap;gap:4px}
.rm-agenda-nav .button{padding:0 12px}
.rm-agenda-nav svg{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rm-agenda-sum{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 20px;min-height:58px;margin-top:20px;padding:6px 20px}
.rm-agenda-sum p{padding:8px 0}
.rm-agenda-sum b{font-weight:600}

/* ---------- Agenda · la semaine ---------- */
/* <div class="rm-agenda-week"><section class="rm-agenda-day is-today"><div class="rm-agenda-dhead">
       <h2 class="rm-agenda-dname">Lundi 12</h2><span class="rm-chip is-ok">Aujourd’hui</span></div>
     <a class="rm-agenda-ev" href="/reunions/…"><span class="rm-agenda-in"><span class="rm-agenda-hr">9 h – 9 h 30</span>
       <span class="rm-agenda-tt">Point équipe</span><small>Microsoft Teams</small></span>
       <span class="rm-agenda-state is-live"><span class="rm-dot"></span>À admettre</span></a>
     <p class="rm-agenda-foot">2 h 15 à enregistrer</p></section>…</div>
   Du lundi au vendredi ; `is-long` quand le week-end s'ajoute. Le violet ne vient qu'avec
   `is-live` (admission, enregistrement). */
.rm-agenda-week{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-top:20px}
.rm-agenda-day{flex:1 1 190px;min-width:0;display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:var(--r-card);background:var(--sunken)}
.rm-agenda-week.is-long .rm-agenda-day{flex-basis:130px}
.rm-agenda-day.is-today{background:var(--surface);box-shadow:0 0 0 1px var(--ink)}
.rm-agenda-dhead{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:0 6px}
.rm-agenda-dname{font:600 15px/1.3 var(--font-display);letter-spacing:-.01em}
.rm-agenda-ev{display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--ink);font-weight:400;text-decoration:none}
.rm-agenda-ev:hover{border-color:var(--ink);text-decoration:none}
.rm-agenda-in{display:flex;flex-direction:column;gap:3px;padding:12px 12px 10px}
.rm-agenda-hr{font-size:var(--fs-note);font-weight:600;font-variant-numeric:tabular-nums}
.rm-agenda-tt{font:600 15px/1.35 var(--font-display);letter-spacing:-.01em;overflow-wrap:anywhere}
.rm-agenda-in small{font-size:var(--fs-note);line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.rm-agenda-state{display:flex;align-items:center;gap:7px;min-height:34px;padding:7px 12px;border-top:1px solid var(--line-soft);color:var(--ink-soft);font:500 12.5px/1.3 var(--font-ui)}
.rm-agenda-state.is-live{background:var(--recording-soft);border-top-color:var(--recording-soft);color:var(--recording-ink)}
.rm-agenda-state svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rm-agenda-none{padding:4px 6px;font-size:var(--fs-note);color:var(--muted)}
/* Visio que la règle « Robotmeet rejoint » écarte : sa carte porte le geste, hors du lien.
   <div class="rm-agenda-ev is-split"><a class="rm-agenda-in" href="/reunions/…">(heure, titre, lieu, raison)</a>
     <div class="rm-agenda-state"><span class="rm-agenda-state-label">(picto) Sans Robotmeet</span>
       <form method="post" action="/reunions/…/demander-robot">(jeton)
         <button class="text-button rm-agenda-send" type="submit">Envoyer Robotmeet</button></form></div></div> */
.rm-agenda-ev.is-split .rm-agenda-in{color:var(--ink);font-weight:400;text-decoration:none}
.rm-agenda-ev.is-split .rm-agenda-in:hover{text-decoration:none}
.rm-agenda-ev.is-split .rm-agenda-state{flex-wrap:wrap;gap:0 10px;padding-block:0}
.rm-agenda-state-label{display:flex;align-items:center;gap:7px;min-height:34px}
.rm-agenda-ev.is-split form{margin:0 0 0 auto}
.rm-agenda-send.text-button{padding:0;color:var(--ink);font-weight:600;white-space:nowrap}
.rm-agenda-foot{margin-top:auto;padding:4px 6px 0;font-size:var(--fs-note);color:var(--muted)}
.rm-agenda-later{margin-top:12px}
@media (max-width:760px){
  .rm-agenda-head{align-items:flex-start}
  .rm-agenda-nav{margin:0 -12px}
  /* Les flèches seules, de 44 px ; le libellé reste lu par les lecteurs d'écran. */
  .rm-agenda-nav-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .rm-agenda-sum{margin-top:16px;padding:6px 16px}
  .rm-agenda-week{gap:10px;margin-top:16px}
  .rm-agenda-day{flex-basis:100%}
  .rm-agenda-week.is-long .rm-agenda-day{flex-basis:100%}
}

/* ---------- Agenda · agendas reliés, règle, retrouver un rendez-vous ---------- */
/* <div class="rm-agenda-bottom"><section class="rm-card rm-agenda-cals">…</section>
     <section class="rm-card rm-agenda-rule">…</section><section class="rm-card rm-agenda-find">…</section></div> */
.rm-agenda-bottom{display:flex;flex-wrap:wrap;align-items:flex-start;gap:24px;margin-top:24px}
.rm-agenda-bottom>.rm-card{flex:1 1 400px;min-width:0}
.rm-agenda-cals{padding:16px 22px 6px}
.rm-agenda-cals-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;padding-bottom:10px}
.rm-agenda-cals-none{padding-bottom:6px}
.rm-agenda-cals-list{margin:0;padding:0;list-style:none}
.rm-agenda-cal{display:flex;align-items:center;gap:12px;min-height:58px;border-top:1px solid var(--line-soft)}
.rm-agenda-cal-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);font-size:var(--fs-note);font-weight:600}
.rm-agenda-cal-who{flex:1;min-width:0}
.rm-agenda-cal-who b{display:block;font-weight:600}
.rm-agenda-cal-who .rm-note{display:block;overflow-wrap:anywhere}
.rm-agenda-more.button{margin-left:-12px;padding:0 12px}
/* La règle « Robotmeet rejoint » (planche Agenda) : trois choix, un bouton d'enregistrement.
   <section class="rm-card rm-agenda-rule" id="robotmeet-rejoint"><h2 class="rm-h2">Robotmeet rejoint</h2>
     <form method="post" action="/rendez-vous/regle">(jeton)<div class="rm-agenda-opts" role="radiogroup">
       <label class="rm-agenda-opt"><input class="rm-agenda-rad" type="radio" name="regle" value="all" checked>
         <span><b>Toutes mes visios</b><span class="rm-note">Dès qu’une invitation contient un lien Meet, Teams ou Zoom.</span></span></label>…</div>
       <div class="rm-agenda-rule-foot"><button class="button button-subtle" type="submit">Enregistrer la règle</button>
         <span class="rm-note">Elle vaut pour vos réunions à venir…</span></div></form></section> */
.rm-agenda-rule{padding:16px 22px}
.rm-agenda-rule .notice{margin-top:10px}
.rm-agenda-opts{margin-top:4px}
.rm-agenda-opt{display:flex;align-items:flex-start;gap:12px;min-height:var(--h-control);padding:8px 0;font:400 var(--fs-body)/1.5 var(--font-ui);cursor:pointer}
.rm-agenda-opt b{display:block;font-weight:500}
.rm-agenda-opt .rm-note{display:block}
input.rm-agenda-rad{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--ink)}
.rm-agenda-rule-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line-soft)}
.rm-agenda-rule-foot .rm-note{flex:1 1 220px;min-width:0}
.rm-agenda-find{display:flex;flex-direction:column;gap:12px;padding:16px 22px 10px}
.rm-agenda-find .rm-find .button{flex:none}
.rm-agenda-links{display:flex;flex-wrap:wrap;gap:0 20px}

/* ---------- Agenda · recherche et rendez-vous passés ---------- */
/* Lignes .rm-row du socle : la date au-dessus du jour et de l'heure.
   <a class="rm-row rm-agenda-line"><span class="rm-row-when">13 oct.<small>mar. 10 h</small></span>…</a> */
.rm-agenda-list,.rm-agenda-nothing{margin-top:20px}
.rm-agenda-nothing p{margin-top:6px;color:var(--muted)}
.rm-agenda-line{align-items:flex-start}
.rm-agenda-line .rm-row-when{flex-basis:84px}
.rm-agenda-line .rm-row-when small{display:block;font-size:var(--fs-note);font-weight:400;color:var(--muted)}
.rm-agenda-pages{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:16px}
@media (max-width:760px){
  .rm-agenda-bottom{gap:16px;margin-top:16px}
  .rm-agenda-bottom>.rm-card{flex-basis:100%}
  .rm-agenda-cals,.rm-agenda-rule,.rm-agenda-find{padding-inline:16px}
  .rm-agenda-rule-foot .button{flex:1 1 100%}
  /* L'état passe sous le titre, aligné sur lui : il reste dit en mots. */
  .rm-agenda-line{flex-wrap:wrap;row-gap:6px}
  .rm-agenda-line .rm-row-when{flex-basis:64px}
  .rm-agenda-line .rm-row-what{flex:1 1 200px}
  .rm-agenda-line .rm-chip{margin-left:76px}
}
/* Lot L9 · Relier un agenda. Planches : Relier-agenda, Relier-agenda-choix,
   Relier-agenda-retour, Relier-agenda-refus, Mobile-relier-agenda. Code : onboarding.rs.
   Servie à la suite de rm.css, dans /assets/rm.css : ses règles l'emportent sur les
   feuilles historiques. Composants du socle : classes rm-… (rm.css) ; n'écrire ici que ce
   qui est propre à ce parcours. */

/* ---------- Relier un agenda · bureau et téléphone ---------- */
/* Le même HTML sert les deux écrans. `rm-relier-wide` : ce que la planche du téléphone ne
   montre pas (précisions, pastille d'une ligne). `rm-relier-narrow` : ce qu'elle montre à
   la place (liste resserrée, plateforme dans la ligne). La règle ne fait que masquer. */
@media (min-width:761px){.rm-relier-narrow{display:none!important}}
@media (max-width:760px){.rm-relier-wide{display:none!important}}

/* ---------- Relier un agenda · page ---------- */
/* <div class="rm-page rm-relier"><div class="rm-backbar">…</div><p class="rm-caps rm-relier-step">Étape 1 sur 3</p>
     <h1 class="rm-title">Relier votre agenda</h1><p class="rm-sub">…</p><div class="rm-cols">…</div></div>
   Au retour du fournisseur, le titre porte sa pastille :
   <div class="rm-relier-headline"><h1 class="rm-title">3 réunions à venir trouvées</h1><span class="rm-chip is-ok">(coche) Agenda relié</span></div> */
.rm-relier{min-width:0}
.rm-relier-step{margin-top:14px}
.rm-relier>.rm-relier-step:first-child{margin-top:0}
.rm-relier-step+.rm-title,.rm-relier-step+.live-region{margin-top:6px}
.rm-relier>.rm-backbar+.rm-title{margin-top:14px}
.rm-relier .rm-sub{max-width:66ch}
.rm-relier-headline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.rm-relier-headline .rm-chip svg{flex:none;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.rm-relier>.notice,.rm-relier>.rm-alert{margin-top:20px}
.rm-relier-region{display:flex;flex-direction:column;gap:20px}
.rm-relier .rm-aside-card:has(>.rm-link:last-child){padding-bottom:12px}

/* ---------- Relier un agenda · le choix ---------- */
/* <nav class="rm-relier-opts" aria-label="Votre agenda">
     <a class="rm-relier-opt" href="/comptes" aria-current="true"><span class="rm-relier-tile" aria-hidden="true">G</span>
       <span class="rm-relier-opt-text"><b>Google Agenda</b><span class="rm-note">Compte Google, personnel ou professionnel</span></span>
       <span class="rm-relier-radio" aria-hidden="true"></span></a>…</nav>
   Des liens, pas des boutons radio, comme les choix de « Nouvelle réunion » : le choix
   recharge la page, sans JavaScript. Le choix en cours porte le filet à l'encre et la
   pastille pleine. `.rm-relier-tile` : la tuile d'un fournisseur (proposée pour rm.css,
   avec la carte de choix : trois lots écrivent la leur). */
.rm-relier-opts{display:flex;flex-wrap:wrap;gap:14px}
.rm-relier-opt{flex:1 1 260px;min-width:0;display:flex;align-items:center;gap:14px;min-height:76px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);color:var(--ink);font-weight:400;text-decoration:none}
.rm-relier-opt:hover{border-color:var(--ink);text-decoration:none}
.rm-relier-opt[aria-current]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.rm-relier-opt:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.rm-relier-opt-text{flex:1;min-width:0}
.rm-relier-opt-text b{display:block;font-size:15px;font-weight:600}
.rm-relier-opt-text .rm-note{display:block}
.rm-relier-tile{flex:none;display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line-strong);border-radius:var(--r-control);background:var(--surface);color:var(--ink);font:600 15px/1 var(--font-ui)}
.rm-relier-radio{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--faint);background:var(--surface)}
.rm-relier-opt[aria-current] .rm-relier-radio{border:5px solid var(--ink)}

/* ---------- Relier un agenda · ce qui est lu ---------- */
/* <section class="rm-card rm-relier-reads"><div class="rm-relier-head"><h2 class="rm-h2">Ce que Robotmeet lira</h2><span class="rm-chip">Lecture seule</span></div>
     <ul class="rm-relier-list"><li>(coche) <span>Le titre, la date…</span></li>…</ul>
     <h3 class="rm-caps rm-relier-not">Ce qu’il ne fait pas</h3><ul class="rm-relier-list"><li>(croix) <span>…</span></li></ul>
     <p class="rm-note rm-relier-fine">…</p></section>
   `is-compact` : la même liste en deux lignes, dans la colonne de droite (`is-side`). */
.rm-relier-reads{padding:22px 24px 14px}
.rm-relier-reads.is-side{padding:20px 22px 14px}
.rm-relier-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.rm-relier-list{margin:8px 0 0;padding:0;list-style:none}
.rm-relier-list li{display:flex;align-items:flex-start;gap:12px;padding:9px 0}
.rm-relier-list li+li{border-top:1px solid var(--line-soft)}
.rm-relier-list svg,.rm-relier-tip svg{flex:none;width:16px;height:16px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rm-relier-list.is-compact li{padding:7px 0;font-size:var(--fs-note)}
.rm-relier-not{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.rm-relier-not+.rm-relier-list{margin-top:6px}
.rm-relier-fine{margin-top:8px;padding:12px 0 6px;border-top:1px solid var(--line-soft)}
.rm-relier-fine a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- Relier un agenda · le départ et la suite ---------- */
/* <div class="rm-bottombar rm-relier-go"><a class="button button-primary" href="/comptes/google/relier">Continuer avec Google</a>
     <a class="button button-quiet rm-relier-later" href="/reunions">Plus tard</a><span class="rm-note rm-relier-hint">…</span></div>
   En ligne sur un bureau ; avec `.rm-bottombar`, fixée au bas de l'écran d'un téléphone. */
.rm-relier-go{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
.rm-relier-hint{flex:1 1 240px;min-width:0}
/* <section class="rm-card rm-relier-next"><h2 class="rm-h2">Ensuite</h2>
     <ol class="rm-relier-steps"><li><span class="rm-relier-num" aria-hidden="true">1</span><span>…</span></li>…</ol></section> */
.rm-relier-next{display:flex;flex-direction:column;gap:16px;padding:22px}
.rm-relier-steps{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.rm-relier-steps li{display:flex;align-items:flex-start;gap:14px}
.rm-relier-num{flex:none;display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--line-strong);border-radius:50%;font-size:var(--fs-tag);font-weight:600}
/* « Bon à savoir » : <p class="rm-relier-tip">(icône au trait) <span>…</span></p> */
.rm-relier-tips{display:flex;flex-direction:column;gap:12px;padding:18px 22px}
.rm-relier-tip{display:flex;align-items:flex-start;gap:12px;font-size:var(--fs-note)}
.rm-relier-tip svg{stroke-width:1.6}

/* ---------- Relier un agenda · agendas reliés ---------- */
/* <article class="rm-relier-account"><div class="rm-relier-id"><span class="rm-relier-tile">G</span>
       <span class="rm-relier-who"><b>Google</b><span class="rm-note">alex@exemple.test</span></span><span class="rm-chip">Relié</span></div>
     <p class="rm-relier-follow">2 agendas suivis, dont votre agenda principal.</p><p class="rm-note">Lecture seule, relu à l’instant.</p>
     <div class="rm-relier-acts"><a class="rm-link" href="…">Modifier les agendas suivis</a>
       <details class="rm-relier-remove"><summary>Retirer cet agenda</summary>
         <div class="rm-relier-confirm"><p>…</p><form method="post" action="…"><button class="button button-subtle">Confirmer le retrait</button></form></div></details></div></article>
   Le retrait se confirme d'abord, en <details>, sans JavaScript. */
.rm-relier-accounts .rm-card-head{flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding-bottom:14px}
.rm-relier-account{padding:16px 22px 6px;border-top:1px solid var(--line-soft)}
.rm-relier-id{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.rm-relier-who{flex:1 1 170px;min-width:0}
.rm-relier-who b{display:block;font-weight:600}
.rm-relier-who .rm-note{display:block;overflow-wrap:anywhere}
.rm-relier-follow{margin-top:14px;font-size:var(--fs-note)}
.rm-relier-follow~.rm-note{margin-top:2px}
.rm-relier-acts{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 22px;margin-top:2px}
.rm-relier-remove>summary{display:inline-flex;align-items:center;min-height:var(--h-control);list-style:none;color:var(--ink-soft);font-size:var(--fs-note);font-weight:600;cursor:pointer}
.rm-relier-remove>summary::-webkit-details-marker{display:none}
.rm-relier-remove>summary:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.rm-relier-remove>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
.rm-relier-remove[open]{flex-basis:100%}
.rm-relier-remove[open]>summary{margin-bottom:0;color:var(--ink)}
.rm-relier-confirm{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:2px 0 10px;padding:14px 16px;border-radius:var(--r-control);background:var(--sunken);font-size:var(--fs-note)}
.rm-relier-confirm form{margin:0}
.rm-relier-add{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.rm-relier-add>.rm-note{margin-top:-8px}
/* La carte « Agenda relié » de la colonne de droite, au retour du fournisseur. */
.rm-relier-linked{padding:20px 22px 12px}
.rm-relier-linked .rm-relier-id{margin-top:14px}

/* ---------- Relier un agenda · agendas suivis ---------- */
/* Planche Relier-agenda-choix, l'étape 2. La page est rendue par le binaire
   (calendar_selection_api.rs, route « /comptes/calendriers/ » suivie du compte) :
   <form class="rm-col-main" method="post" action="…"><section class="rm-card is-clip rm-relier-cals">
       <div class="rm-card-head"><h2 class="rm-h2">Agendas du compte</h2><span class="rm-note">2 suivis sur 5</span></div>
       <div class="rm-line rm-relier-cal"><input class="rm-box" type="checkbox" id="agenda-0" name="calendar_0" value="primary" checked>
         <label for="agenda-0"><span class="rm-relier-cal-text"><b>Alex Morel</b><span class="rm-note">Votre agenda principal</span></span></label></div>…
       <p class="rm-note rm-relier-cals-foot">Un agenda non coché n’est jamais lu. …</p></section>
     <div class="rm-relier-go">(bouton plein) (bouton discret) <span class="rm-note rm-relier-hint">…</span></div></form>
   La ligne à cocher du socle (.rm-line), à la mesure de la planche : 64 px, le nom au-dessus
   de ce qu'on sait de l'agenda. Toute la ligne se touche. La colonne de droite reprend
   .rm-relier-linked, .rm-relier-id et .rm-aside-card. */
.rm-relier-cals .rm-card-head{flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding-bottom:14px}
.rm-line.rm-relier-cal{gap:14px;min-height:64px;padding:10px 22px;border-top:1px solid var(--line-soft)}
.rm-line.rm-relier-cal label{align-self:stretch}
.rm-relier-cal-text{min-width:0}
.rm-relier-cal-text b{display:block;font-size:15px;font-weight:600;overflow-wrap:anywhere}
.rm-relier-cal-text .rm-note{display:block;overflow-wrap:anywhere}
.rm-relier-cals-foot{padding:14px 22px;border-top:1px solid var(--line-soft);background:var(--bg)}

/* ---------- Relier un agenda · réunions trouvées ---------- */
/* Lignes .rm-row du socle, le jour au-dessus de l'heure :
   <a class="rm-row rm-relier-found" href="/reunions/…"><span class="rm-row-when">mar. 13<small>10 h</small></span>
     <span class="rm-row-what"><b>Point hebdomadaire</b><small>4 participants · vous l’organisez</small></span>
     <span class="rm-chip rm-relier-wide">Google Meet</span></a>
   `is-aside` : un événement sans visio reconnue, en retrait. */
.rm-relier-found-head{flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding-bottom:14px}
.rm-relier-found{flex-wrap:wrap;gap:8px 16px}
.rm-relier-found .rm-row-when{flex-basis:72px}
.rm-relier-found .rm-row-when small{display:block;font-size:var(--fs-note);font-weight:400;color:var(--muted)}
.rm-relier-found .rm-row-what{flex:1 1 260px}
.rm-relier-found.is-aside{background:var(--bg)}
.rm-relier-found.is-aside .rm-row-when{font-weight:500;color:var(--muted)}
.rm-relier-found.is-aside .rm-row-what b{font-weight:500}
.rm-relier-none{padding:14px 22px 20px;border-top:1px solid var(--line-soft);color:var(--muted)}
.rm-relier-none a{color:var(--ink);font-weight:600;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.rm-relier-rest{padding:0 22px;border-top:1px solid var(--line-soft)}

/* ---------- Relier un agenda · de retour sans agenda ---------- */
/* L'alerte du socle, à la taille de la planche : <section class="rm-alert rm-relier-alert" role="alert">
     <h2 class="rm-alert-title">L’autorisation est incomplète : aucun agenda n’est relié.</h2><p>…</p>
     <div class="rm-relier-id rm-relier-strip">(tuile) <span class="rm-relier-who"><b>Google</b><span class="rm-note">…</span></span></div>
     <div class="rm-alert-actions">(bouton plein) (bouton discret) <span class="rm-note">…</span></div></section> */
.rm-relier-alert{padding:22px 24px;border-radius:var(--r-card)}
.rm-relier-alert .rm-alert-title{gap:14px;font-size:var(--fs-lead);letter-spacing:-.02em;line-height:1.3}
.rm-relier-alert .rm-alert-title::before{width:22px;height:22px;margin-top:2px}
.rm-relier-alert>:not(.rm-alert-title){margin-left:36px}
.rm-relier-alert>p{max-width:62ch}
.rm-relier-strip{padding:12px 14px;border-radius:var(--r-control);background:var(--sunken)}
.rm-relier-alert .rm-alert-actions{gap:10px}
.rm-relier-alert .rm-alert-actions .rm-note{flex:1 1 240px}

/* ---------- Relier un agenda · aussi sur cette page ---------- */
/* Google Tasks (bloc de google_tasks.rs), l'e-mail « compte rendu prêt », l'export et la
   fermeture du compte : <section class="rm-relier-more"><h2 class="rm-caps">Aussi sur cette page</h2>
     <section class="rm-card rm-relier-extra"><h2 class="rm-h2">E-mails</h2><p>…</p><form>…</form></section>…</section>
   Sous les deux colonnes, à la largeur de la première. Un libellé long passe à la ligne
   plutôt que de sortir de sa carte. */
.rm-relier-more{display:flex;flex-direction:column;align-items:stretch;gap:16px;max-width:668px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.rm-relier-more>.rm-link{align-self:flex-start}
.rm-relier-more .panel{box-shadow:none}
.rm-relier-extra{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px 22px}
.rm-relier-extra p{max-width:66ch}
.rm-relier-extra form{margin:0;max-width:100%}
.rm-relier-extra-acts{display:flex;flex-wrap:wrap;gap:10px;max-width:100%}
.rm-relier-more .button{max-width:100%;padding-block:8px;line-height:1.25;white-space:normal;text-align:center}

/* ---------- Relier un agenda · dans la fenêtre Paramètres ---------- */
/* Ouverte par workspace-modal.mjs depuis une autre page : ni retour, ni étape, ni « Plus
   tard », ni barre fixée ; les titres gardent l'échelle du socle. */
.workspace-modal-view .rm-relier>.rm-backbar,.workspace-modal-view .rm-relier-step,.workspace-modal-view .rm-relier-later{display:none}
.workspace-modal-view .rm-relier .rm-bottombar{position:static;padding:0;border:0;background:none}
.workspace-modal-view .rm-relier{padding-bottom:0}
.workspace-modal-view .rm-relier .rm-h2{font-size:15px}
.workspace-modal-view .rm-relier .rm-caps{font-size:var(--fs-tag)}

@media (max-width:760px){
  /* La barre du bas est fixée : la page se termine au-dessus d'elle. */
  .rm-relier:has(.rm-bottombar){padding-bottom:64px}
  .rm-relier>.rm-backbar+.rm-relier-step{margin-top:6px}
  .rm-relier>.rm-backbar+.rm-title{margin-top:10px}
  .rm-relier .rm-sub{text-wrap:pretty}
  .rm-relier>.rm-cols{gap:16px;margin-top:16px}
  .rm-relier .rm-col-main,.rm-relier .rm-col-side,.rm-relier-region{gap:16px}
  .rm-relier-opts{flex-direction:column;gap:10px}
  .rm-relier-opt{flex:none;min-height:64px;padding:10px 16px}
  .rm-relier-reads,.rm-relier-reads.is-side{padding:16px 18px 10px}
  .rm-relier-list li,.rm-relier-list.is-compact li{gap:10px;padding:6px 0;font-size:14px}
  .rm-relier-list li+li{border-top:0}
  .rm-relier-list .rm-relier-no,.rm-relier-list.is-compact li+li{margin-top:6px;padding-top:12px;border-top:1px solid var(--line-soft)}
  .rm-relier-list svg{width:15px;height:15px;margin-top:3px;stroke-width:2.2}
  .rm-relier-go.rm-bottombar{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:6px}
  .rm-relier-go.rm-bottombar .button-primary{min-height:52px;font-size:var(--fs-strong)}
  .rm-relier-go.rm-bottombar .button-quiet{min-height:var(--h-control)}
  .rm-relier-go.rm-bottombar .rm-relier-hint{display:none}
  .rm-relier-go:not(.rm-bottombar)>.button{flex:1 1 auto}
  .rm-relier-go:not(.rm-bottombar)>.rm-relier-hint{flex-basis:100%}
  .rm-relier-next,.rm-relier-tips{padding:16px 18px}
  .rm-relier-account{padding:14px 16px 4px}
  .rm-line.rm-relier-cal,.rm-relier-cals-foot{padding-inline:16px}
  .rm-relier-linked{padding:16px 18px 8px}
  .rm-relier-found{flex-wrap:nowrap}
  .rm-relier-found .rm-row-when{flex-basis:58px}
  .rm-relier-found .rm-row-what{flex:1 1 0}
  .rm-relier-none{padding:12px 16px 16px}
  .rm-relier-rest{padding-inline:16px}
  .rm-relier-alert{padding:18px}
  .rm-relier-alert .rm-alert-title{gap:12px;font-size:17px}
  .rm-relier-alert>:not(.rm-alert-title){margin-left:0}
  .rm-relier-alert .rm-alert-actions .button{flex:1 1 100%}
  .rm-relier-more{max-width:none;margin-top:20px;padding-top:20px}
  .rm-relier-extra{padding:16px 18px}
  .rm-relier-extra form,.rm-relier-extra .button,.rm-relier-extra-acts{width:100%}
}
/* Lot L10 · Nouvelle réunion et erreurs. Planches : Nouvelle-reunion, Erreur-saisie,
   Erreur-introuvable, Session-expiree. Code : new_meeting.rs, errors.rs. Servie à la suite
   de rm.css, dans /assets/rm.css : ses règles l'emportent sur les feuilles historiques.
   Composants du socle : classes rm-… (rm.css) ; n'écrire ici que ce qui est propre à ces
   pages. La page des adresses inconnues (errors.rs) emploie .rm-notfound, .rm-addr et
   .rm-aside-card, définies dans rm.css. */

/* ---------- Nouvelle réunion · les choix ---------- */
/* <nav class="rm-new-choices" aria-label="Type de réunion">
     <a class="rm-new-choice" href="/reunions/nouvelle" aria-current="page">
       <span class="rm-new-choice-head"><b>J’ai déjà un lien</b><span class="rm-new-radio" aria-hidden="true"></span></span>
       <span class="rm-note">Collez un lien Meet, Teams, Zoom, Webex ou GoTo : Robotmeet le rejoint.</span></a>…</nav>
   Des liens, pas des boutons radio : le choix recharge la page avec son formulaire, sans
   JavaScript. Le choix en cours porte le filet à l'encre et la pastille pleine. */
.rm-new>.rm-title{margin-top:14px}
.rm-new-choices{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px}
.rm-new-choice{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);color:var(--ink);font-weight:400;text-decoration:none}
.rm-new-choice:hover{border-color:var(--ink);text-decoration:none}
.rm-new-choice[aria-current]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.rm-new-choice:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.rm-new-choice-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rm-new-choice-head b{font-size:15px;font-weight:600}
.rm-new-radio{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--faint);background:var(--surface)}
.rm-new-choice[aria-current] .rm-new-radio{border:5px solid var(--ink)}

/* ---------- Nouvelle réunion · le formulaire et la colonne de droite ---------- */
/* <form class="rm-card rm-new-form" method="post" action="/reunions/nouvelle">
     <div class="rm-new-field"><div class="rm-new-label"><label for="nouvelle-lien">Lien de la réunion</label><span class="rm-chip">Zoom reconnu</span></div>
       <input id="nouvelle-lien" …><p class="rm-note" id="nouvelle-lien-aide">…</p><p class="rm-field-error" id="err-nouvelle-lien">…</p></div>
     <div class="rm-new-consent"><p>…</p><div class="rm-line"><input class="rm-box" …><label>…</label></div></div>
     <div class="rm-new-actions"><button class="button button-primary">Envoyer Robotmeet</button><a class="button button-quiet">Annuler</a><span class="rm-note">…</span></div></form> */
.rm-new>.rm-cols{margin-top:22px;gap:24px}
.rm-new-form{display:flex;flex-direction:column;gap:20px;padding:26px}
.rm-new-label{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;min-height:26px;margin-bottom:8px}
.rm-new-optional{font-weight:400;color:var(--muted)}
.rm-new-field>.rm-note{margin-top:6px}
.rm-new-consent{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:var(--r-tile);background:var(--sunken)}
.rm-new-consent b{font-weight:600}
.rm-new-consent .rm-line{align-items:flex-start}
.rm-new-consent .rm-line input.rm-box{margin-top:11px}
.rm-new-consent .rm-field-error{margin-top:0}
input.rm-box[aria-invalid="true"]{outline:2px solid var(--ink);outline-offset:2px}
.rm-new-intro{max-width:62ch;font-size:15px}
.rm-new-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rm-new-actions>.rm-note{flex:1 1 180px;min-width:0;text-align:right}
.rm-new-actions>.rm-note b{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.rm-new-later{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-top:20px;border-top:1px solid var(--line-soft)}
.rm-new-later .rm-note{max-width:62ch}
/* <section class="rm-card rm-new-next"><h2 class="rm-h2">Ce qui se passe ensuite</h2>
     <ol class="rm-new-steps"><li><span class="rm-new-num" aria-hidden="true">1</span><span>…</span></li>…</ol>
     <p class="rm-note rm-new-time">Il vous reste 3 h 40 de réunion ce mois-ci.</p></section> */
.rm-new-next{display:flex;flex-direction:column;gap:16px;padding:22px}
.rm-new-steps{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.rm-new-steps li{display:flex;align-items:flex-start;gap:14px}
.rm-new-num{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-strong);font-size:var(--fs-tag);font-weight:600}
.rm-new-time{padding-top:14px;border-top:1px solid var(--line-soft)}
/* Ce que Robotmeet écrit dans la conversation de la réunion, mot pour mot. */
.rm-new-said{padding:22px}
.rm-new-quote{margin:12px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--bg);font-size:var(--fs-note);line-height:1.5}
.rm-new-said>.rm-note{margin-top:12px}
@media (max-width:760px){
  .rm-new>.rm-title{margin-top:10px}
  .rm-new-choices{gap:10px;margin-top:16px}
  .rm-new-choice{flex-basis:100%;padding:14px 16px}
  .rm-new>.rm-cols{margin-top:16px;gap:16px}
  .rm-new-form{gap:18px;padding:20px}
  .rm-new-actions>.button{flex:1 1 auto;min-height:var(--h-touch)}
  .rm-new-actions>.rm-note{flex-basis:100%;text-align:left}
  .rm-new-actions>.rm-new-wide{display:none}
  .rm-new-later>.button{align-self:stretch;min-height:var(--h-touch)}
  .rm-new-next,.rm-new-said{padding:20px}
}

/* ---------- Erreur de saisie ---------- */
/* En haut du formulaire revenu avec ses erreurs (`errors::summary`) :
   <div class="rm-alert rm-form-alert" role="alert"><p class="rm-alert-title">Deux champs sont à corriger avant d’envoyer Robotmeet.</p>
     <p>Robotmeet n’est pas parti, et ce que vous avez saisi est resté en place.</p>
     <p class="rm-form-alert-links"><a href="#nouvelle-lien">Lien de la réunion : non reconnu</a>…</p></div>
   Sous chaque champ en cause, la phrase du socle (.rm-field-error, rm.css) ; le champ porte
   aria-invalid (filet de 2 px, style.css). Proposé pour rm.css : .rm-form-alert-links. */
.rm-form-alert{gap:4px}
.rm-form-alert>p:not(.rm-alert-title){padding-left:32px;font-size:var(--fs-note)}
.rm-form-alert-links{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:4px}
.rm-form-alert-links a{display:inline-flex;align-items:center;min-height:var(--h-control);margin:-8px 0;color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* Formulaire du rendez-vous (rendezvous.rs) : la phrase se range sous son champ, dans la
   grille du formulaire ; l'ancre de l'alerte s'arrête un peu au-dessus du champ. */
.rdv-fieldset>.rm-field-error{margin-top:-4px}
.rdv-grid label>.rm-field-error{margin-top:0;font-weight:500}
.rdv-form>.rm-form-alert{max-width:none}
/* « Nouveau rendez-vous » : la tête de page du socle, puis le formulaire. */
.rm-rdv-new>.rm-title{margin-top:14px}
.rm-rdv-new>.rdv-form{margin-top:22px}
@media (max-width:760px){
  .rm-rdv-new>.rm-title{margin-top:10px}
  .rm-rdv-new>.rdv-form{margin-top:16px}
}
.rm-new-form input,.rdv-form input,.rdv-form textarea{scroll-margin-top:96px}

/* ---------- Session expirée (connexion après une page privée, `errors::session_card`) ---------- */
/* <div class="rm-session-page"><section class="rm-card rm-session"><span class="rm-chip">Session expirée</span>
     <h1 class="rm-session-title">Reconnectez-vous pour reprendre où vous en étiez.</h1><p class="rm-session-lead">…</p>
     <div class="rm-session-back"><span class="rm-note">Après la connexion, vous reviendrez à</span>
       <span class="rm-session-where">(svg)<b>la page que vous avez demandée</b></span></div>
     <div class="rm-session-buttons">(boutons de connexion)</div></section></div>
   Une carte seule, au milieu : la navigation du site public s'efface, il ne reste que la
   marque. */
.rm-session-page{display:flex;justify-content:center;padding:72px 0 64px}
.rm-session{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:36px 40px;border-radius:16px}
.rm-session-title{font:600 26px/1.25 var(--font-display);letter-spacing:-.03em}
.rm-session-lead{font-size:15px}
.rm-session-back{width:100%;display:flex;flex-direction:column;gap:8px;margin-top:4px;padding:14px 16px;border-radius:var(--r-tile);background:var(--sunken)}
.rm-session-where{display:flex;align-items:flex-start;gap:12px}
.rm-session-where svg{flex:none;width:18px;height:18px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rm-session-where b{font-weight:600}
.rm-session-buttons{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:6px}
.rm-session-buttons .button{width:100%;min-height:var(--h-touch);gap:10px;font-size:15px;white-space:normal}
.rm-session .notice{width:100%}
@supports selector(:has(*)){
  body:has(.rm-session-page) .site-header .public-nav,
  body:has(.rm-session-page) .site-header .header-actions,
  body:has(.rm-session-page) .site-header .menu-toggle{display:none}
}
@media (max-width:760px){
  .rm-session-page{padding:24px 0 32px}
  .rm-session{padding:24px 20px}
  .rm-session-title{font-size:22px}
}

/* ---------- Page introuvable ---------- */
/* Le bouton du retour se détache de l'adresse, comme sur la planche. */
.rm-missing .rm-notfound .button{margin-top:6px}
/* Une carte qui finit par un lien de 44 px se passe d'une partie de sa marge du bas. */
.rm-missing .rm-aside-card:has(>.rm-link:last-child){padding-bottom:12px}
@media (max-width:760px){
  .rm-missing .rm-notfound{padding:20px}
  .rm-missing .rm-notfound .button{align-self:stretch;min-height:var(--h-touch)}
}
/* Lot Notifications (décision D3 du plan). Planche : Notifications ; la cloche vient de
   Main, Mobile-aujourdhui et Mobile-vide. Code : notifications.rs. Servie à la suite de
   rm.css, dans /assets/rm.css : ses règles l'emportent sur les feuilles historiques.
   Composants du socle : classes rm-… (rm.css) ; n'écrire ici que ce qui est propre à cette
   page et à sa cloche. Le point de l'admission est le .rm-dot du socle : aucune couleur
   ne s'écrit ici. */

/* ---------- Cloche ---------- */
/* <a class="rm-bell" href="/notifications" aria-label="Notifications">(cloche au trait)</a>
   Un lien de 44 px vers la page, sans pastille ni compteur : rien n'est « non lu ».
   Sur un téléphone, à droite de la zone du haut (`layout`), la tuile de la barre à gauche. Sur un
   bureau, à droite du champ « Demander » d'Aujourd'hui :
   <div class="rm-today-top">(form.rm-today-ask) (a.rm-bell)</div> */
.rm-bell{flex:none;display:grid;place-items:center;width:var(--h-control);height:var(--h-control);border-radius:var(--r-control);color:var(--ink-soft);text-decoration:none}
.rm-bell:hover{background:var(--sunken);color:var(--ink);text-decoration:none}
.rm-bell:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.rm-bell[aria-current]{background:var(--sunken);color:var(--ink)}
.rm-bell svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.workspace .app-header>.rm-bell{margin-left:auto;color:var(--ink)}
.workspace .app-header>.rm-bell svg{width:21px;height:21px}
.rm-today-top{display:flex;align-items:center;gap:14px}
.rm-today-top .rm-today-ask{flex:1;min-width:0}
.rm-today-top .rm-bell{margin-left:auto}
@media (min-width:761px){.rm-today-top+.rm-today-hello{margin-top:34px}}

/* ---------- Notifications · page ---------- */
/* <div class="rm-notifs"><div class="rm-backbar"><a class="rm-back" href="/reunions">Aujourd’hui</a></div>
     <h1 class="rm-title">Notifications</h1><p class="rm-sub">…</p>
     <div class="rm-cols"><div class="rm-col-main" data-live="notifications-liste">(cartes de lignes)</div>
       <aside class="rm-col-side">(réglages, en lecture)</aside></div></div>
   Le retour ne se montre que sur un téléphone, où il remplace la zone du haut (socle). */
.rm-notifs{min-width:0;max-width:1200px}
.rm-notifs>.rm-cols{margin-top:24px}
.rm-notifs .rm-col-main{flex:1.6 1 560px}
.rm-notifs .rm-col-side{flex:1 1 380px}
.rm-notifs .rm-card-head{flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:16px 22px 14px}
.rm-notifs .rm-card-head .rm-h2{white-space:nowrap}
@media (min-width:761px){.rm-notifs>.rm-backbar{display:none}}
@media (max-width:760px){
  .rm-notifs>.rm-backbar+.rm-title{margin-top:2px}
  .rm-notifs>.rm-sub{font-size:var(--fs-note)}
  .rm-notifs>.rm-cols{gap:16px;margin-top:16px}
  .rm-notifs .rm-col-main,.rm-notifs .rm-col-side{gap:16px}
  .rm-notifs .rm-card-head{padding:16px 16px 12px}
}

/* ---------- Notifications · lignes ---------- */
/* <ul class="rm-notifs-list is-marked"><li class="rm-notif"><span class="rm-notif-mark"><span class="rm-dot"></span></span>
     <div class="rm-notif-text"><p class="rm-notif-title" id="maintenant-0">Robotmeet attend d’être admis dans « Point équipe »</p>
       <p class="rm-note">Microsoft Teams · la réunion a commencé à 9 h</p></div>
     <a class="rm-link" href="…" aria-describedby="maintenant-0">Ouvrir Teams</a></li></ul>
   `is-marked` : la liste porte une admission et réserve la place de son point sur chaque
   ligne (.rm-notif-mark, vide sur les autres) ; sans admission, ni l'un ni l'autre. Le
   geste est un lien, ou le bouton « Renvoyer Robotmeet » dans son formulaire. Sur un
   téléphone, il passe sous le texte. */
.rm-notifs-list{margin:0;padding:0;list-style:none}
.rm-notif{display:flex;align-items:flex-start;gap:14px;padding:14px 22px;border-top:1px solid var(--line-soft)}
.rm-notif-mark{flex:none;display:grid;place-items:center;width:8px;height:8px;margin-top:7px}
.rm-notif-text{flex:1;min-width:0}
.rm-notif-title{font-weight:600;overflow-wrap:anywhere}
.rm-notif-text .rm-note{margin-top:2px;overflow-wrap:anywhere}
.rm-notif>.rm-link{flex:none}
.rm-notif>form{flex:none;margin:0}
.rm-notifs-none{padding:14px 22px 18px;border-top:1px solid var(--line-soft);color:var(--muted)}
.rm-notifs-foot{font-size:var(--fs-note);color:var(--muted)}
.rm-notifs-foot a{color:var(--ink);font-weight:600}
.rm-notifs-soon .rm-slots{margin-top:12px}
@media (min-width:761px){.rm-notifs-soon .rm-slot{flex-basis:180px}}
@media (max-width:760px){
  .rm-notif{flex-wrap:wrap;gap:0 12px;padding:12px 16px 4px}
  .rm-notif>.rm-link{flex:1 1 100%}
  .rm-notif>form{flex:1 1 100%;padding:6px 0 10px}
  .rm-notifs-list.is-marked .rm-notif>.rm-link,.rm-notifs-list.is-marked .rm-notif>form{padding-left:20px}
  .rm-notifs-none{padding:12px 16px 16px}
}

/* ---------- Notifications · réglages, en lecture ---------- */
/* <section class="rm-card rm-notifs-side"><h2 class="rm-h2">Me prévenir</h2>
     <ul class="rm-notifs-sets"><li class="rm-notifs-set"><span class="rm-notifs-set-text"><b>Le compte rendu est prêt</b>
       <span class="rm-note">Un e-mail avec la synthèse, les décisions et les actions.</span></span>
       <span class="rm-chip">E-mail activé</span></li></ul>
     <a class="rm-link" href="/parametres#notifications">Régler dans Paramètres</a>
     <p class="rm-note">(ce que le produit ne fait pas, en une phrase)</p></section>
   Un réglage éteint porte la pastille `is-outline`. Rien ne se change ici. */
.rm-notifs-side{padding:16px 22px 14px}
.rm-notifs-sets{margin:12px 0 0;padding:0;list-style:none}
.rm-notifs-set{display:flex;align-items:flex-start;gap:16px;padding:14px 0;border-top:1px solid var(--line-soft)}
.rm-notifs-set-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rm-notifs-set-text b{font-weight:500}
.rm-notifs-set .rm-chip{flex:none}
.rm-notifs-off{margin-top:12px}
.rm-notifs-side>.rm-link{margin-top:-4px}
.rm-notifs-side>.rm-note{margin-top:4px;padding-top:12px;border-top:1px solid var(--line-soft)}
@media (max-width:760px){
  .rm-notifs-side{padding:16px 16px 12px}
  .rm-notifs-set{flex-wrap:wrap;gap:8px 16px}
  .rm-notifs-set-text{flex-basis:100%}
}
