/* emileagent: the interface. emileagent's STYLE (tokens.css: black and white, Geist,
   sober radii, no pill, no shadow, hierarchy by value, short motion), in a
   SaaS layout of its own: navigation on the left, page header, centered
   content, nothing on the right. Every colour comes from a token. */

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--font-sans);
  font-size: var(--taille-corps);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" 0;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; }
a { color: inherit; }
img, svg, video { display: block; }
.ic { flex: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--texte); outline-offset: 2px; }
::selection { background: var(--choisi); }
.chiffres, time { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ligne-forte); border: 3px solid transparent; background-clip: padding-box; border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

.spinner {
  display: inline-block;
  flex: none;
  border-radius: var(--rayon-rond);
  border: 1.6px solid currentColor;
  border-right-color: transparent;
  opacity: 0.8;
  animation: tourne 700ms linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* ---------- buttons ---------- */

.btn {
  height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-6);
  border-radius: var(--rayon-7);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out), transform 120ms var(--ease-out), opacity 150ms;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn.petit { height: 30px; padding: 0 11px; font-size: 13px; }
.btn.mini { height: 26px; padding: 0 9px; font-size: 12px; gap: 5px; }
.btn.grand { height: 40px; padding: 0 18px; font-size: 14px; }
.btn.large { width: 100%; }
.btn-plein { background: var(--blanc); color: var(--noir); }
.btn-plein:hover:not(:disabled) { background: var(--texte); }
.btn-plein:disabled { background: var(--ligne-forte); color: var(--pale); }
.btn-contour { border-color: var(--ligne-forte); color: var(--texte); background: transparent; }
.btn-contour:hover:not(:disabled) { background: var(--survol); border-color: var(--ligne-active); }
.btn-contour:disabled, .btn-discret:disabled { color: var(--pale); border-color: var(--ligne); }
.btn-discret { color: var(--discret); }
.btn-discret:hover:not(:disabled) { background: var(--survol); color: var(--texte); }
.btn-critique { border-color: var(--ligne-forte); color: var(--critique); }
.btn-critique:hover:not(:disabled) { background: var(--critique-fond); border-color: var(--critique-fond); }
.btn-critique-plein { background: var(--critique); color: #ffffff; }
.btn-critique-plein:hover:not(:disabled) { opacity: 0.9; }
.btn-lien {
  height: auto;
  padding: 0;
  border: 0;
  color: var(--texte);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--ligne-survol);
  text-underline-offset: 3px;
}
.btn-lien:hover:not(:disabled) { text-decoration-color: currentColor; }
.btn-lien:disabled { color: var(--pale); }
.btn-icone {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--rayon-7);
  color: var(--discret);
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.btn-icone:hover:not(:disabled) { background: var(--survol); color: var(--texte); }
.btn-icone:disabled { color: var(--pale); opacity: 0.6; }
.btn-icone.contour { border: 1px solid var(--ligne-forte); width: 34px; height: 34px; }
.btn-icone.petit { width: 28px; height: 28px; }

/* ---------- fields ---------- */

.champ {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: var(--rayon-7);
  border: 1px solid var(--ligne-forte);
  background: var(--champ);
  color: var(--texte);
  font-size: 14px;
  line-height: 1.45;
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.champ::placeholder { color: var(--pale); }
.champ:hover:not(:disabled) { border-color: var(--ligne-active); }
.champ:focus { outline: none; border-color: var(--ligne-survol); box-shadow: var(--halo-saisie); }
.champ:disabled { color: var(--discret); opacity: 0.75; }
textarea.champ { resize: vertical; display: block; }
select.champ { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--discret) 50%), linear-gradient(135deg, var(--discret) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
input[type="time"].champ { font-variant-numeric: tabular-nums; }
.champ.invalide { border-color: var(--critique); }
.etiquette { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--texte); }
.etiquette .facultatif { color: var(--pale); font-weight: 400; }
.aide { font-size: 12px; color: var(--pale); margin-top: 6px; line-height: 1.5; }
.aide strong { color: var(--discret); font-weight: 500; }
.compteur { font-size: 12px; color: var(--pale); font-variant-numeric: tabular-nums; }
.compteur.depasse { color: var(--critique); }
.champ-groupe { display: grid; gap: 6px; }
.champ-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }

.case { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.case input { appearance: none; flex: none; width: 16px; height: 16px; margin: 2px 0 0; border-radius: 4px; border: 1px solid var(--ligne-survol); background: var(--champ); display: grid; place-items: center; transition: background-color 120ms, border-color 120ms; cursor: pointer; }
.case input::after { content: ""; width: 9px; height: 5px; border-left: 1.6px solid var(--noir); border-bottom: 1.6px solid var(--noir); transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.case input:checked { background: var(--blanc); border-color: var(--blanc); }
.case input:checked::after { opacity: 1; }
.case input:disabled { opacity: 0.5; cursor: default; }
.case-texte strong { display: block; font-size: 14px; font-weight: 500; }
.case-texte span { display: block; font-size: 12px; color: var(--pale); margin-top: 2px; line-height: 1.5; }

/* ---------- badges, points ---------- */

.badge {
  height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 5px;
  border: 1px solid var(--ligne-forte);
  color: var(--discret);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.badge-plein { background: var(--blanc); border-color: var(--blanc); color: var(--noir); font-weight: 600; }
.badge-contour { color: var(--texte); border-color: var(--ligne-survol); font-weight: 600; }
.badge-doux { background: var(--choisi); border-color: transparent; color: var(--texte); }
.badge-critique { background: var(--critique-fond); border-color: var(--critique-fond); color: var(--critique); }
.badge-guide { color: var(--discret); }
.point { width: 7px; height: 7px; flex: none; border-radius: var(--rayon-rond); background: var(--texte); display: inline-block; }
.point.pale { background: var(--pale); }
.point.anneau { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pale); }
.point.critique { background: var(--critique); }

/* ---------- tracks: tabs and segments (emileagent) ---------- */

.piste { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--rayon-7); background: var(--champ); max-width: 100%; }
.piste > button {
  height: 28px;
  padding: 0 12px;
  border-radius: 5px;
  color: var(--discret);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.piste > button:hover:not(:disabled) { color: var(--texte); }
.piste > button[aria-selected="true"], .piste > button[aria-checked="true"] { background: var(--choisi); color: var(--texte); }
.piste > button .compte { color: var(--pale); font-size: 12px; font-variant-numeric: tabular-nums; }
.piste.pleine { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.piste.pleine > button { justify-content: center; }

/* ---------- the shell ---------- */

.app { display: grid; grid-template-columns: var(--largeur-laterale) minmax(0, 1fr); min-height: 100dvh; }
.laterale { background: var(--panneau); border-right: 1px solid var(--ligne); min-width: 0; }
.laterale-corps {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 12px 10px;
  overflow-y: auto;
  scrollbar-width: none;
}
.marque { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.marque-signe { width: 24px; height: 24px; flex: none; border-radius: var(--rayon-7); background: var(--blanc); color: var(--noir); display: grid; place-items: center; }
.marque-signe .ic { fill: currentColor; stroke: none; }
.marque-signe { font-weight: 600; font-size: 15px; line-height: 1; }
.marque .espace { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--pale); letter-spacing: 0; }
.nav { display: grid; gap: 2px; }
.nav-lien {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  border-radius: var(--rayon-7);
  color: var(--discret);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.nav-lien:hover { background: var(--survol); color: var(--texte); }
.nav-lien[aria-current="page"] { background: var(--choisi); color: var(--texte); }
.nav-lien .compte { margin-left: auto; font-size: 12px; color: var(--pale); font-variant-numeric: tabular-nums; }
.nav-lien[aria-current="page"] .compte { color: var(--discret); }
.laterale-pied { margin-top: auto; display: grid; gap: 8px; }
.fermer-menu { display: none; }
.compte-ligne { display: flex; align-items: center; gap: 10px; padding: 6px 4px 2px 8px; }
.avatar {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--rayon-rond);
  background: linear-gradient(180deg, var(--avatar-haut), var(--avatar-bas));
  border: 1px solid var(--ligne-forte);
  display: grid;
  place-items: center;
  color: var(--texte);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.compte-ligne .qui { min-width: 0; display: grid; line-height: 1.3; }
.compte-ligne .qui strong { font-size: 13px; font-weight: 500; }
.compte-ligne .qui span { font-size: 12px; color: var(--pale); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compte-ligne .btn-icone { margin-left: auto; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--hauteur-tete);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  background: var(--fond);
  border-bottom: 1px solid var(--ligne);
}
.entete .menu { display: none; margin-left: -6px; }
.fil-ariane { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 500; color: var(--discret); }
.fil-ariane .ic { color: var(--pale); }
.fil-ariane a { text-decoration: none; white-space: nowrap; }
.fil-ariane a:hover { color: var(--texte); }
.fil-ariane strong { color: var(--texte); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fil-ariane .sep { color: var(--ligne-survol); }
.entete-droite { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.contenu { flex: 1; padding: 28px 32px 72px; min-width: 0; }
.page { max-width: 1120px; margin: 0 auto; animation: entree 200ms var(--ease-out); }
.page.etroite { max-width: 760px; }
@keyframes entree { from { opacity: 0; transform: translateY(6px); } }
.voile-nav { display: none; }

/* ---------- page header, toolbars, notices ---------- */

/* One page header everywhere: title and sentence on the left, the actions on
   the right, on the same bottom line. */
.page-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 24px; margin-bottom: 20px; }
.page-tete > div:first-child { min-width: 0; }
.page-tete h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; text-wrap: balance; }
.page-tete p { color: var(--discret); font-size: 14px; margin-top: 6px; max-width: 76ch; text-wrap: pretty; }
.page-tete .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
@media (max-width: 900px) {
  .page-tete { grid-template-columns: minmax(0, 1fr); }
  .page-tete .actions { justify-content: flex-start; }
}
.barre { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.barre-outils { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.reserve-compteur { font-size: 12px; color: var(--pale); font-variant-numeric: tabular-nums; margin-right: 4px; }

.avis {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--rayon-9);
  border: 1px solid var(--ligne-forte);
  background: var(--panneau);
  font-size: 13px;
  line-height: 1.5;
  color: var(--texte);
}
.avis .ic { margin-top: 2px; color: var(--discret); }
.avis > span, .avis > div { flex: 1; min-width: 0; }
.avis .btn-icone { margin: -6px -6px -6px 0; }
.avis-ok { border-color: var(--ligne-active); }
.avis-ok .ic { color: var(--texte); }
.avis-erreur { border-color: color-mix(in srgb, var(--critique) 45%, transparent); background: var(--critique-fond); color: var(--critique); }
.avis-erreur .ic { color: var(--critique); }
.avis-attention { border-style: dashed; border-color: var(--ligne-survol); }
.avis-doux { background: transparent; border-color: var(--ligne); color: var(--discret); }
.messages { display: grid; gap: 8px; margin-bottom: 16px; }
.messages:empty { display: none; }
.bandeaux { display: grid; }
.bandeau {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 20px;
  border-bottom: 1px solid var(--ligne);
  font-size: 13px;
  color: var(--discret);
}
.bandeau .ic { color: var(--pale); }
.bandeau strong { color: var(--texte); font-weight: 500; }
.bandeau .btn-icone { margin-left: auto; width: 28px; height: 28px; }
.bandeau.critique { color: var(--critique); background: var(--critique-fond); border-bottom-color: color-mix(in srgb, var(--critique) 30%, transparent); }
.bandeau.critique .ic { color: var(--critique); }

.vide {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--ligne-forte);
  border-radius: var(--rayon-16);
  color: var(--discret);
}
.vide strong { color: var(--texte); font-size: 14px; font-weight: 500; }
.vide .ic { color: var(--pale); margin-bottom: 6px; }
.chargement { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 64px 0; color: var(--pale); font-size: 13px; }
.vide-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }

/* Skeleton cards while the reserve loads (still under reduced motion). */
.squelette { display: grid; gap: 12px; padding: 14px 16px 16px; border-radius: var(--rayon-9); border: 1px solid var(--ligne-forte); background: var(--panneau); animation: squelette 1600ms ease-in-out infinite; }
.sq-ligne { height: 10px; border-radius: 4px; background: var(--ligne); }
.sq-auteur { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.sq-auteur > div { flex: 1; display: grid; gap: 8px; }
.sq-rond { width: 48px; height: 48px; flex: none; border-radius: var(--rayon-rond); background: var(--ligne); }
.sq-pied { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.sq-pied span { height: 40px; border-radius: var(--rayon-7); background: var(--ligne); }
@keyframes squelette { 50% { opacity: 0.55; } }

/* ---------- Posts LinkedIn: the column of cards ---------- */

.colonne { max-width: 680px; margin: 0 auto; display: grid; gap: 16px; }
/* Like Bruno: the queue line and the mode lines start on the column's left
   edge; the queue line keeps its height while the state loads. */
.bandeau-file { min-height: 18px; text-align: start; font-size: 12px; line-height: 18px; color: var(--pale); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.lignes-mode { display: grid; gap: 6px; justify-items: start; }
.lignes-mode:empty { display: none; }
/* The point hangs on the left, the sentence and its link wrap under it. */
.ligne-mode { position: relative; padding-left: 14px; font-size: 12px; line-height: 18px; color: var(--discret); text-wrap: pretty; }
.ligne-mode .point { position: absolute; left: 0; top: 6px; width: 6px; height: 6px; }
.ligne-mode .btn-lien { margin-left: 6px; font-size: 12px; line-height: 18px; vertical-align: baseline; }
.colonne-liste { display: grid; gap: inherit; }
.zone-recolte { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--rayon-9); border: 1px dashed var(--ligne-survol); font-size: 13px; }
.zone-recolte strong { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.zone-recolte span { color: var(--discret); font-size: 12px; padding-left: 22px; }

.carte-post {
  container-type: inline-size;
  border-radius: var(--rayon-9);
  border: 1px solid var(--ligne-forte);
  background: var(--panneau);
  overflow: hidden;
  transition: border-color 150ms var(--ease-out), opacity 150ms;
}
.carte-post:hover { border-color: var(--ligne-active); }
.carte-post.arrivee { animation: entree 240ms var(--ease-out); }
.carte-contexte { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 16px; padding: 12px 0 10px; border-bottom: 1px solid var(--ligne); font-size: 12px; color: var(--discret); }
.carte-contexte .score { color: var(--discret); font-variant-numeric: tabular-nums; }
.carte-contexte .juge { display: inline-flex; align-items: center; gap: 5px; color: var(--discret); font-variant-numeric: tabular-nums; }
.carte-contexte .juge strong { color: var(--texte); font-weight: 600; }
.carte-note { margin: 8px 16px 0; font-size: 12px; color: var(--discret); }
.replis { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 16px 0; }
.repli-bouton { display: inline-flex; align-items: center; gap: 5px; height: 24px; font-size: 12px; color: var(--pale); border-radius: 5px; transition: color 120ms; }
.repli-bouton:hover, .repli-bouton[aria-expanded="true"] { color: var(--texte); }
.repli-bouton .ic { transition: transform 200ms var(--ease-out); }
.repli-bouton[aria-expanded="true"] .ic:last-child { transform: rotate(180deg); }
.repli-contenu { margin: 6px 16px 0; padding: 12px 14px; border-radius: var(--rayon-7); background: var(--champ); font-size: 13px; display: grid; gap: 10px; animation: entree 180ms var(--ease-out); }
.repli-contenu .source-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--discret); font-size: 12px; }
.repli-contenu .source-tete strong { color: var(--texte); font-weight: 500; }
.repli-contenu .source-texte { white-space: pre-wrap; color: var(--discret); max-height: 220px; overflow: auto; line-height: 1.55; }
.chiffres-source { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--pale); font-variant-numeric: tabular-nums; }
.chiffres-source b { color: var(--texte); font-weight: 500; }
.liste-defauts { list-style: none; display: grid; gap: 6px; }
.liste-defauts li { display: flex; gap: 8px; color: var(--discret); }
.liste-defauts li::before { content: ""; width: 4px; height: 4px; margin-top: 8px; border-radius: 50%; background: var(--pale); flex: none; }
.criteres { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--pale); font-variant-numeric: tabular-nums; }
.criteres b { color: var(--texte); font-weight: 500; }
.versions { list-style: none; display: grid; gap: 2px; }
.versions li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--ligne); }
.versions li:first-child { border-top: 0; }
.versions .v-tete { font-size: 12px; color: var(--discret); }
.versions .v-tete strong { color: var(--texte); font-weight: 500; }
.versions .v-extrait { grid-column: 1; font-size: 12px; color: var(--pale); }
.versions li .btn { grid-row: 1 / span 2; grid-column: 2; }

.auteur { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px 0; }
.auteur .avatar { width: 48px; height: 48px; font-size: 15px; }
.auteur-qui { min-width: 0; flex: 1; display: grid; line-height: 1.35; }
.auteur-qui strong { font-size: 14px; font-weight: 600; }
.auteur-qui span { font-size: 12px; color: var(--discret); }
.auteur-qui .visibilite { display: inline-flex; align-items: center; gap: 4px; }
.original { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--discret); text-decoration: none; white-space: nowrap; padding: 2px 0; }
.original:hover { color: var(--texte); }
.texte-post { position: relative; margin: 10px 16px 0; font-size: 14px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; transition: opacity 150ms; }
.texte-post.replie { max-height: 60px; overflow: hidden; }
.texte-post.attenue { opacity: 0.6; }
.plus {
  position: absolute;
  right: 0;
  bottom: 0;
  padding-left: 48px;
  background: linear-gradient(90deg, transparent, var(--panneau) 40%);
  color: var(--discret);
  font-size: 14px;
  line-height: 20px;
}
.plus:hover { color: var(--texte); text-decoration: underline; text-underline-offset: 3px; }
/* The text box clips its overflow: the focus ring goes inside the button. */
.plus:focus-visible { outline-offset: -2px; border-radius: 4px; }
.reecriture-en-cours { display: flex; align-items: center; gap: 8px; margin: 8px 16px 0; font-size: 12px; color: var(--discret); }
.revenir { margin: 8px 16px 0; }
.carte-avis { margin: 10px 16px 0; }
.carte-avis .avis { padding: 8px 10px; font-size: 12px; }

.media { position: relative; margin-top: 12px; background: var(--champ); border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); }
/* Large, its ratio kept: the file's own size (width and height attributes)
   reserves the room, height follows the width, a very tall file is capped. */
.media img, .media video { width: 100%; height: auto; max-height: 576px; object-fit: contain; }
.media.non-joint::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.4); pointer-events: none; }
.pastille-media {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 20px);
  padding: 4px 4px 4px 10px;
  border-radius: var(--rayon-7);
  background: rgb(0 0 0 / 0.78);
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  backdrop-filter: blur(6px);
}
.pastille-media .etat { display: inline-flex; align-items: center; gap: 5px; }
.pastille-media button { height: 24px; padding: 0 9px; border-radius: 5px; font-size: 12px; font-weight: 600; color: #ffffff; transition: background-color 120ms; }
.pastille-media button:hover:not(:disabled) { background: rgb(255 255 255 / 0.14); }
.pastille-media button.joindre { background: #ffffff; color: #0a0a0a; }
.pastille-media button.joindre:hover:not(:disabled) { background: #e6e6e6; }
.plus-medias { position: absolute; right: 10px; bottom: 10px; z-index: 2; height: 24px; padding: 0 8px; display: grid; place-items: center; border-radius: 5px; background: rgb(0 0 0 / 0.78); color: #ffffff; font-size: 12px; font-weight: 600; }
.media-document { display: flex; align-items: center; gap: 12px; padding: 18px 16px; }
.media-document .ic { color: var(--discret); }
.media-document div { display: grid; flex: 1; }
.media-document strong { font-size: 13px; font-weight: 500; }
.media-document span { font-size: 12px; color: var(--pale); }
.media-document.avec-pastille { padding-top: 52px; }
.media-indispo { margin: 10px 16px 0; font-size: 12px; color: var(--discret); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.media-indispo .btn-lien { font-size: 12px; }
/* Under the media (section 23): where it comes from, « Personne visible »,
   what the check saw. Small grey labels, never a colour. */
.media-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 16px 0; font-size: 12px; color: var(--discret); min-width: 0; }
.media-etiquette { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; border-radius: 5px; border: 1px solid var(--ligne-forte); color: var(--discret); font-size: 11.5px; font-weight: 500; white-space: nowrap; letter-spacing: 0.01em; }
.media-etiquette .ic { color: var(--pale); }
.media-etiquette.personne { color: var(--texte); border-color: var(--ligne-survol); }
.media-description { flex: 1 1 100%; min-width: 0; color: var(--pale); line-height: 1.45; overflow-wrap: anywhere; }
/* A post without media: said plainly, the import right there (dashed, dark:
   no flat white zone). */
.media-absent { display: grid; gap: 10px; margin: 12px 16px 0; padding: 14px; border-radius: var(--rayon-9); border: 1px dashed var(--ligne-survol); background: var(--champ); min-width: 0; }
.media-absent.obligatoire { border-color: var(--ligne-active); }
.media-absent-texte { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.media-absent-texte > .ic { margin-top: 1px; color: var(--discret); }
.media-absent-texte p { display: grid; gap: 3px; min-width: 0; }
.media-absent-texte strong { font-size: 13px; font-weight: 500; color: var(--texte); line-height: 1.45; overflow-wrap: anywhere; }
.media-absent-texte span { font-size: 12px; color: var(--pale); line-height: 1.45; }
.media-absent-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding-left: 28px; }
.media-absent-actions .aide { margin: 0; }
.infos-sans-media { display: inline-flex; align-items: center; gap: 4px; }

/* Wide card (640 px and more): the six actions on one line, icon beside the
   label. Narrower: icon above the label, the long ones on two lines. */
.actions-carte { display: grid; grid-template-columns: repeat(6, auto); justify-content: space-between; gap: 0; margin: 12px 4px 0; padding: 4px 0; border-top: 1px solid var(--ligne); }
.action {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 5px;
  border-radius: var(--rayon-7);
  color: var(--discret);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.action:hover:not(:disabled) { background: var(--survol); color: var(--texte); }
.action[aria-pressed="true"] { background: var(--choisi); color: var(--texte); }
.action:disabled { opacity: 0.45; }
.action .ic { flex: none; width: 16px; height: 16px; }
.action .long { text-align: left; white-space: nowrap; }
.action .court { display: none; }
@container (max-width: 639px) {
  .action .ic { width: 18px; height: 18px; }
  .actions-carte { grid-template-columns: repeat(6, auto); justify-content: space-between; margin-inline: 4px; }
  .action { flex-direction: column; gap: 4px; min-height: 52px; padding: 6px 3px; font-size: 11px; font-weight: 600; }
  .action .long { display: none; }
  .action .court { display: inline; white-space: nowrap; }
}
@container (max-width: 350px) {
  .actions-carte { margin-inline: 2px; }
  .action { padding: 6px 1px; font-size: 10.5px; letter-spacing: -0.01em; }
}
.pied-carte { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 16px 16px; }
.pied-carte .btn { height: 40px; font-size: 14px; }
body.action-en-cours .actions-carte .action:not(.occupe), body.action-en-cours .pied-carte .btn { opacity: 0.45; pointer-events: none; }

.edition { margin: 10px 16px 0; display: grid; gap: 8px; }
.edition textarea { min-height: 120px; line-height: 20px; }
.edition .champ-ligne { margin-top: 0; flex-wrap: wrap; }
.edition .champ-ligne .btn-lien, .edition .compteur { white-space: nowrap; }
.edition .droite { display: flex; gap: 8px; align-items: center; }
.reprompt { margin: 10px 16px 0; padding: 12px; border-radius: var(--rayon-9); border: 1px solid var(--ligne-forte); background: var(--champ); display: grid; gap: 8px; animation: entree 180ms var(--ease-out); }
.reprompt label { font-size: 12px; font-weight: 600; }
.reprompt textarea { background: var(--fond); min-height: 60px; }
.reprompt .champ-ligne { margin-top: 0; }
.reprompt .droite { display: flex; gap: 8px; }

.ligne-decision {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--rayon-9);
  border: 1px solid var(--ligne-forte);
  background: var(--panneau);
  font-size: 13px;
  animation: entree 200ms var(--ease-out);
}
.ligne-decision .ic, .ligne-decision .spinner { color: var(--discret); }
.ligne-decision .quoi { flex: 1; min-width: 0; color: var(--discret); }
.ligne-decision .quoi strong { color: var(--texte); font-weight: 600; }
.ligne-decision.validee { border-color: var(--ligne-active); }
.ligne-decision .btn { flex: none; }
.bas-liste { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bas-liste .ecartes { margin-left: auto; }
.liste-ecartes { display: grid; gap: 8px; }
.ligne-ecarte { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--rayon-9); border: 1px solid var(--ligne-forte); background: var(--panneau); font-size: 12px; color: var(--discret); }
.ligne-ecarte p { flex: 1; min-width: 0; }
.ligne-ecarte strong { color: var(--texte); font-weight: 600; }

/* ---------- calendar ---------- */

.cal-barre { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 8px; }
.cal-barre .cal-mode { flex: 1 1 320px; }
.cal-barre .droite { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-maj { font-size: 12px; color: var(--pale); font-variant-numeric: tabular-nums; }
.cal-aide { font-size: 12px; color: var(--pale); margin-bottom: 18px; }
.semaine { container-type: inline-size; margin-bottom: 24px; }
/* emileagent's group title: 12 px, 500, normal case, --pale. */
.semaine-titre { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12px; font-weight: 500; color: var(--pale); }
.semaine-titre::after { content: ""; flex: 1; height: 1px; background: var(--ligne); }
/* A dense week: every day spans the header row and one row per slot of the
   week's grid (subgrid), so mornings and afternoons line up across the days,
   and a row is only as tall as its fullest slot. */
.jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
@container (max-width: 980px) { .jours { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 640px) { .jours { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 420px) { .jours { grid-template-columns: minmax(0, 1fr); } }
.jour { grid-row: span var(--rangs, 3); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; row-gap: 4px; padding: 6px; border-radius: var(--rayon-9); border: 1px solid var(--ligne); background: var(--panneau); min-width: 0; }
.jour.aujourdhui { border-color: var(--ligne-survol); }
.jour-tete { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 2px 6px; padding: 2px 3px 2px; font-size: 12px; line-height: 18px; color: var(--discret); min-width: 0; }
.jour-date strong { color: var(--texte); font-weight: 600; }
.jour-date .mois { color: var(--pale); }
.jour-tete .badge { margin-left: auto; height: 18px; font-size: 10.5px; padding: 0 5px; }
/* Today: a filled dot after the date, and the day's brighter border. */
.repere-jour { width: 6px; height: 6px; margin-top: 6px; border-radius: var(--rayon-rond); background: var(--texte); flex: none; }
.jour.passe .jour-tete, .jour.ferie .jour-tete { opacity: 0.6; }
.creneau { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; padding: 5px; border-radius: var(--rayon-7); background: var(--champ); min-width: 0; transition: background-color 120ms, outline-color 120ms; outline: 1px dashed transparent; outline-offset: -1px; }
/* An empty slot keeps its small height, even beside a full one. */
.creneau.libre, .demi-journee.libre { align-self: start; }
.creneau-tete { display: flex; justify-content: space-between; gap: 6px; padding: 0 2px; font-size: 12px; font-weight: 500; line-height: 18px; color: var(--pale); }
.creneau-tete time { font-weight: 400; font-variant-numeric: tabular-nums; }
.creneau-vide { display: grid; place-items: center; min-height: 34px; font-size: 12px; color: var(--pale); border-radius: 5px; }
.creneau.passe .creneau-vide, .creneau.ferie .creneau-vide { opacity: 0.6; }
/* Narrow week (phone): a free slot is one line of 36 px. */
@container (max-width: 640px) {
  .creneau.libre { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 9px; }
  .creneau-tete { justify-content: flex-start; gap: 8px; }
  .creneau.libre .creneau-vide { min-height: 0; margin-left: auto; }
}
body.glisse .demi-journee.depot { outline-color: var(--ligne-survol); }
body.glisse .demi-journee.depot .creneau-vide { color: var(--discret); }
body.glisse .demi-journee.depot.survol { background: var(--choisi); outline-color: var(--texte); }
body.glisse .demi-journee.depot.survol .creneau-vide { color: var(--texte); }
body.glisse, body.glisse * { cursor: grabbing !important; user-select: none; }
.vignette {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 6px 7px;
  border-radius: var(--rayon-7);
  border: 1px solid var(--ligne-forte);
  background: var(--panneau);
  min-width: 0;
  cursor: pointer;
  touch-action: pan-y;
  transition: border-color 120ms, opacity 150ms;
}
.vignette:hover { border-color: var(--ligne-active); }
.vignette.passee { opacity: 0.55; cursor: default; }
.vignette.passee:hover { border-color: var(--ligne-forte); }
.vignette { position: relative; }
.vignette.en-glisse { opacity: 0.35; }
.vignette.a-regler { border-color: color-mix(in srgb, var(--critique) 50%, transparent); }
.vignette-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 5px; min-width: 0; }
.vignette-tete .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; height: 18px; font-size: 10.5px; padding: 0 5px; }
.vignette-tete time { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* The grip sits in the top right corner, never on a line of its own. */
.vignette-tete:has(.poignee) { padding-right: 20px; }
.vignette-tete .poignee { position: absolute; top: 5px; right: 4px; color: var(--pale); cursor: grab; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; }
.vignette-tete .poignee:hover { color: var(--texte); background: var(--survol); }
.vignette-image { height: 64px; border-radius: 5px; overflow: hidden; background: var(--champ); }
.vignette-image img { width: 100%; height: 100%; object-fit: cover; }
.vignette-tuile { height: 40px; border-radius: 5px; background: var(--champ); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--discret); }
.vignette-texte { font-size: 12px; line-height: 1.45; color: var(--discret); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
/* One line of small icons (media, guide plan); their words show when the
   thumbnail is wide enough, and stay readable by a screen reader otherwise. */
.vignette-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; font-size: 11.5px; color: var(--discret); }
.vignette-meta .meta { position: relative; display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.vignette-meta .meta.pale { color: var(--pale); }
.vignette-meta .meta.alerte { color: var(--critique); font-weight: 500; }
.vignette-meta .meta-texte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 199px) {
  .vignette-meta .meta-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .vignette-actions .btn .ic { display: none; }
}
.vignette-note { font-size: 11px; line-height: 1.45; color: var(--critique); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Bruno's actions, written out: two lines in a narrow day if needed. */
.vignette-actions { display: flex; flex-wrap: wrap; gap: 0 2px; margin: 0 -5px -3px; }
.vignette-actions .btn { height: 24px; padding: 0 5px; font-size: 12px; gap: 4px; }
.fantome {
  position: fixed;
  z-index: 100;
  width: 220px;
  padding: 10px;
  border-radius: var(--rayon-9);
  border: 1px solid var(--ligne-survol);
  background: var(--panneau);
  pointer-events: none;
  font-size: 12px;
  color: var(--discret);
  display: grid;
  gap: 6px;
  transform: rotate(-1.5deg);
}
.attente { margin-top: 8px; }
.attente-liste { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.attente .vignette { grid-template-columns: 112px minmax(0, 1fr); align-items: start; column-gap: 10px; }
.attente .vignette > :not(.vignette-image):not(.vignette-tuile) { grid-column: 2; }
.attente .vignette-image, .attente .vignette-tuile { grid-column: 1; grid-row: 1 / span 4; height: 72px; }
.attente .vignette-texte { -webkit-line-clamp: 3; }

/* ---------- dialogs, toast ---------- */

.voile {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--voile);
  animation: fondu 160ms var(--ease-out);
  overflow-y: auto;
}
.voile.sortie { opacity: 0; transition: opacity 140ms; }
@keyframes fondu { from { opacity: 0; } }
.fenetre {
  width: min(672px, 100%);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  border-radius: var(--rayon-16);
  border: 1px solid var(--ligne-forte);
  background: var(--panneau);
  animation: arrivee 200ms var(--ease-out);
}
.fenetre.etroite { width: min(480px, 100%); }
.fenetre.large { width: min(860px, 100%); }
@keyframes arrivee { from { opacity: 0; transform: scale(0.97); } }
.fenetre-tete { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 0; }
.fenetre-tete > div { flex: 1; min-width: 0; }
.fenetre-tete h2 { font-size: var(--taille-titre-carte); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.fenetre-sous-titre { margin-top: 4px; font-size: 13px; color: var(--discret); }
.fenetre-fermer { margin: -6px -8px 0 0; }
.fenetre-erreur { margin: 14px 20px 0; }
.fenetre-corps { padding: 18px 20px; overflow-y: auto; display: grid; gap: 18px; }
.fenetre-pied { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--ligne); flex-wrap: wrap; }
.fenetre-pied .gauche { margin-right: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.fenetre.occupe .fenetre-corps { opacity: 0.75; pointer-events: none; }
.confirmation .fenetre-corps { gap: 12px; }
.confirmation-raison { padding: 12px 14px; border-radius: var(--rayon-9); background: var(--champ); font-size: 13px; color: var(--texte); line-height: 1.55; }
.confirmation-consequence { font-size: 13px; color: var(--discret); }
body.fenetre-ouverte { overflow: hidden; }

/* Bottom center of the content area (never over a section's buttons on the
   right): the sidebar's width is skipped while it is shown. */
#toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 80;
  width: max-content;
  max-width: min(440px, calc(100vw - 32px));
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--rayon-9);
  border: 1px solid var(--ligne-forte);
  background: var(--panneau);
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transform: translate(-50%, 6px);
  pointer-events: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
#toast .ic { margin-top: 2px; }
#toast.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
@media (min-width: 720px) {
  body:has(.app:not(.laterale-repliee)) #toast { left: calc(50% + var(--largeur-laterale) / 2); }
}
#toast.mauvais { color: var(--critique); border-color: color-mix(in srgb, var(--critique) 40%, transparent); }

/* ---------- editor ---------- */

.editeur-texte { min-height: 192px; max-height: 45dvh; line-height: 20px; }
.editeur-juge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--discret); }
.editeur-juge strong { color: var(--texte); font-weight: 600; }
.editeur-juge .defauts { flex-basis: 100%; }
.section-titre { font-size: 13px; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.section-titre .aide { margin: 0 0 0 auto; font-weight: 400; }
.medias-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.medias-grille .tuile { position: relative; height: 96px; border-radius: var(--rayon-7); overflow: hidden; background: var(--champ); border: 1px solid var(--ligne); display: grid; place-items: center; font-size: 12px; color: var(--discret); text-align: center; padding: 6px; }
.medias-grille img, .medias-grille video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.medias-grille .tuile .etiquette-tuile { position: absolute; left: 6px; bottom: 6px; z-index: 1; padding: 1px 6px; border-radius: 4px; background: rgb(0 0 0 / 0.7); color: #fff; font-size: 11px; }
.medias-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.creneau-champs { display: grid; grid-template-columns: 1.6fr 1fr 0.9fr; gap: 8px; }

/* ---------- guide plan ---------- */

.guide-panneau { max-width: 672px; margin: 0 auto; display: grid; gap: 16px; }
.guide-tete h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.guide-tete p { margin-top: 6px; color: var(--discret); text-wrap: pretty; }
.guide-etat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--pale); }
.guide-etat strong { color: var(--texte); font-weight: 600; }
.etape { padding: 18px; border-radius: var(--rayon-16); border: 1px solid var(--ligne-forte); background: var(--panneau); display: grid; gap: 14px; }
.etape.inactive { opacity: 0.75; }
.etape-titre { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.etape-numero { width: 22px; height: 22px; border-radius: var(--rayon-rond); display: grid; place-items: center; border: 1px solid var(--ligne-survol); font-size: 11px; font-weight: 600; color: var(--discret); font-variant-numeric: tabular-nums; }
.etape.faite .etape-numero { background: var(--blanc); border-color: var(--blanc); color: var(--noir); }
.etape-titre .badge { margin-left: auto; }
.rangee-boutons { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.rangee-boutons .aide { margin: 0; }
.apercu-guide { padding: 14px; border-radius: var(--rayon-9); background: var(--champ); display: grid; gap: 10px; font-size: 13px; }
.apercu-guide h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.apercu-guide .sous { color: var(--discret); margin-top: -6px; }
.apercu-guide .liste-titre { font-size: 12px; font-weight: 500; color: var(--pale); }
.apercu-guide ol { padding-left: 20px; display: grid; gap: 2px; color: var(--texte); }
.etapes-activation { list-style: none; display: grid; gap: 6px; }
.etapes-activation li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.etapes-activation li .ic { color: var(--texte); }
.etapes-activation li.a-faire { color: var(--pale); }
.etapes-activation li.en-cours { color: var(--discret); }
.etapes-activation li.erreur, .etapes-activation li.erreur .ic { color: var(--critique); }
.rond-vide { width: 13px; height: 13px; margin: 1px; flex: none; border-radius: var(--rayon-rond); border: 1.5px solid var(--ligne-survol); }
.compteurs-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.tuile-chiffre { padding: 12px; border-radius: var(--rayon-9); background: var(--champ); display: grid; gap: 2px; }
.tuile-chiffre b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tuile-chiffre span { font-size: 12px; color: var(--discret); }
.lien-page { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; text-decoration: underline; text-decoration-color: var(--ligne-survol); text-underline-offset: 3px; overflow-wrap: anywhere; }
.resultat-test { list-style: none; padding: 12px 14px; border-radius: var(--rayon-9); background: var(--champ); display: grid; gap: 4px; font-size: 12px; color: var(--discret); }

/* ---------- lists, tables, figures ---------- */

.chiffres-cles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 20px; }
.chiffre-cle { padding: 14px 16px; border-radius: var(--rayon-9); border: 1px solid var(--ligne-forte); background: var(--panneau); display: grid; gap: 4px; min-width: 0; }
.chiffre-cle span { font-size: 12px; color: var(--discret); }
.chiffre-cle b { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.chiffre-cle small { font-size: 12px; color: var(--pale); overflow-wrap: anywhere; }
.filtres { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filtres .recherche { position: relative; flex: 1 1 220px; max-width: 320px; }
.filtres .recherche .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--pale); }
.filtres .recherche .champ { padding-left: 34px; min-height: 34px; height: 34px; }
.tableau-cadre { border: 1px solid var(--ligne-forte); border-radius: var(--rayon-9); background: var(--panneau); overflow: hidden; }
.tableau { width: 100%; border-collapse: collapse; font-size: 13px; }
.tableau th { text-align: left; font-size: 12px; font-weight: 500; color: var(--pale); padding: 10px 14px; border-bottom: 1px solid var(--ligne); white-space: nowrap; background: var(--panneau); }
.tableau td { padding: 12px 14px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau tbody tr { transition: background-color 120ms; }
.tableau tbody tr:hover { background: var(--panneau-survol); }
.tableau .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau .discret { color: var(--discret); }
.tableau .pale { color: var(--pale); font-size: 12px; }
.tableau .actions-ligne { display: flex; justify-content: flex-end; gap: 2px; white-space: nowrap; }
.tableau tr.coupee td > :not(.actions-ligne) { opacity: 0.55; }
.qui-cible { display: flex; align-items: center; gap: 10px; min-width: 0; }
.qui-cible > div { min-width: 0; display: grid; line-height: 1.35; }
.qui-cible strong { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qui-cible a { font-size: 12px; color: var(--pale); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qui-cible a:hover { color: var(--texte); }
.theme-cible { max-width: 340px; }
.theme-cible span { display: block; font-size: 12px; color: var(--pale); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.etat-cible { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
/* Phone (judges of 16/10): one compact line per target, the detail in a sheet. */
.cibles-compactes { list-style: none; display: grid; border: 1px solid var(--ligne-forte); border-radius: var(--rayon-9); background: var(--panneau); overflow: hidden; }
.cibles-compactes li + li { border-top: 1px solid var(--ligne); }
.cible-compacte {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px 14px;
  text-align: left;
  color: var(--texte);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms var(--ease-out);
}
.cible-compacte:active { background: var(--survol); }
@media (hover: hover) { .cible-compacte:hover { background: var(--survol); } }
.cible-compacte .avatar { width: 36px; height: 36px; font-size: 12px; }
.cible-compacte-texte { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.cible-compacte-texte strong { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cible-compacte-texte small { font-size: 12.5px; color: var(--pale); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cible-compacte.coupee .avatar, .cible-compacte.coupee .cible-compacte-texte { opacity: 0.55; }
.cible-detail { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; padding: 4px 12px 12px; font-size: 14px; line-height: 1.4; }
.cible-detail dt { color: var(--pale); }
.cible-detail dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.erreurs-ligne td { padding-top: 0; }
.erreurs-ligne p { font-size: 12px; color: var(--critique); display: flex; gap: 6px; align-items: flex-start; }
.erreurs-ligne.medias-ligne p { color: var(--discret); }
.erreurs-ligne p > span { min-width: 0; overflow-wrap: anywhere; }
.resultat-lot { display: grid; gap: 8px; font-size: 13px; }
.resultat-lot ul { list-style: none; display: grid; gap: 4px; font-size: 12px; color: var(--discret); max-height: 160px; overflow: auto; }

.liste-guides { display: grid; gap: 12px; }
.carte-guide { border: 1px solid var(--ligne-forte); border-radius: var(--rayon-9); background: var(--panneau); padding: 16px; display: grid; gap: 12px; }
.carte-guide-tete { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.carte-guide-tete > div:first-child { flex: 1; min-width: 220px; display: grid; gap: 6px; }
.carte-guide-tete > .rangee-boutons { flex: none; margin-left: auto; }
.carte-guide-tete h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.carte-guide-tete p { font-size: 12px; color: var(--pale); }
.carte-guide-tete .badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.carte-guide .compteurs { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 12px; color: var(--discret); font-variant-numeric: tabular-nums; }
.carte-guide .compteurs b { color: var(--texte); font-weight: 600; }
.carte-guide .rangee-boutons { justify-content: flex-start; }
.contacts { border-top: 1px solid var(--ligne); padding-top: 10px; }
.contacts .tableau td, .contacts .tableau th { padding: 8px 6px; }

/* ---------- settings ---------- */

.reglages { display: grid; gap: 14px; }
.section-reglage { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px 32px; padding: 22px; border: 1px solid var(--ligne-forte); border-radius: var(--rayon-16); background: var(--panneau); }
.section-reglage > header h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.section-reglage > header h2 .ic { color: var(--discret); }
.section-reglage > header p { margin-top: 6px; font-size: 13px; color: var(--discret); text-wrap: pretty; }
.section-reglage .controles { display: grid; gap: 18px; align-content: start; min-width: 0; }
.section-reglage .pied-section { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding-top: 4px; }
.section-reglage .pied-section .aide { margin: 0 auto 0 0; }
.section-reglage input[type="password"].champ { max-width: 420px; }
.fenetres-horaires { display: grid; gap: 8px; }
.fenetre-horaire { display: grid; grid-template-columns: 110px 1fr auto 1fr; align-items: center; gap: 8px; font-size: 13px; color: var(--discret); }
.fenetre-horaire.inutilisee { opacity: 0.5; }
.jours-choix { display: flex; flex-wrap: wrap; gap: 6px; }
.jour-choix { height: 32px; min-width: 52px; padding: 0 10px; border-radius: var(--rayon-7); border: 1px solid var(--ligne-forte); font-size: 13px; font-weight: 500; color: var(--discret); transition: background-color 120ms, color 120ms, border-color 120ms; }
.jour-choix:hover { border-color: var(--ligne-active); color: var(--texte); }
.jour-choix { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.jour-choix .ic { display: none; }
.jour-choix[aria-pressed="true"] { background: var(--choisi); border-color: var(--ligne-active); color: var(--texte); }
.jour-choix[aria-pressed="true"] .ic { display: block; }
.nombre-champ { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--ligne-forte); border-radius: var(--rayon-7); background: var(--champ); overflow: hidden; }
.nombre-champ button { width: 34px; height: 34px; display: grid; place-items: center; color: var(--discret); }
.nombre-champ button:hover { background: var(--survol); color: var(--texte); }
.nombre-champ input { width: 56px; height: 34px; border: 0; background: transparent; text-align: center; font-variant-numeric: tabular-nums; font-weight: 500; }
.nombre-champ input:focus { outline: none; }
.ligne-reglage { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ligne-reglage > div:first-child { display: grid; gap: 2px; }
.ligne-reglage strong { font-size: 14px; font-weight: 500; }
.ligne-reglage span { font-size: 12px; color: var(--pale); }
.confirmation-reel { display: grid; gap: 10px; padding: 14px; border-radius: var(--rayon-9); border: 1px solid var(--ligne-survol); background: var(--champ); animation: entree 180ms var(--ease-out); }
.confirmation-reel p { font-size: 13px; }
.confirmation-reel .phrase { font-family: var(--font-mono); font-size: 12px; padding: 1px 6px; border-radius: 4px; background: var(--fond); border: 1px solid var(--ligne-forte); }
.connexions { display: grid; }
.connexion { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: start; padding: 14px 0; border-top: 1px solid var(--ligne); }
.connexion:first-child { border-top: 0; padding-top: 0; }
.connexion-nom { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.connexion-role { grid-column: 1; font-size: 12px; color: var(--pale); }
.connexion-detail { grid-column: 1; font-size: 12px; color: var(--discret); }
.connexion > .badge { grid-column: 2; grid-row: 1; }
.connexion > .badge .point { width: 6px; height: 6px; }

/* ---------- login ---------- */

.ecran-connexion { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; padding: 18px 20px; }
.ecran-connexion .marque { padding: 0; }
.connexion-centre { display: grid; place-items: center; padding: 24px 0 10vh; }
.connexion-boite { width: min(380px, 100%); display: grid; gap: 22px; }
.connexion-boite h1 { font-size: 32px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.15; text-align: center; }
.connexion-boite > p { color: var(--discret); text-align: center; margin-top: -12px; font-size: 15px; }
.connexion-carte { display: grid; gap: 14px; padding: 22px; border-radius: var(--rayon-16); border: 1px solid var(--ligne-forte); background: var(--panneau); }
.connexion-apparence { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 13px; color: var(--discret); }
.connexion-bas { text-align: center; font-size: 12px; color: var(--pale); }

/* ---------- phones and narrow windows ---------- */

@media (max-width: 1100px) {
  .section-reglage { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 719.98px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  /* Closed, the menu is also inert (app.js): Tab never reaches it. */
  .laterale {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: min(280px, 84vw);
    transform: translateX(-102%);
    transition: transform 240ms var(--ease-out);
  }
  .laterale-corps { height: 100%; }
  .app.nav-ouverte .laterale { transform: none; }
  .fermer-menu { display: inline-grid; }
  .voile-nav { display: block; position: fixed; inset: 0; z-index: 45; background: var(--voile); opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease-out); }
  .app.nav-ouverte .voile-nav { opacity: 1; pointer-events: auto; }
  .entete { padding: 0 14px; }
  .entete .menu { display: inline-grid; }
  .fil-ariane a, .fil-ariane .sep { display: none; }
  .contenu { padding: 18px 12px 64px; }
  .page-tete { margin-bottom: 14px; }
  .page-tete h1 { font-size: 22px; }
  .page-tete p { font-size: 13.5px; }
  .barre { gap: 10px; }
  .barre .piste { order: 0; }
  .barre-outils { justify-content: flex-end; width: 100%; }
  .barre-outils .reserve-compteur { width: 100%; text-align: right; margin: 0; }
  .colonne { gap: 12px; }
  .bandeau { padding: 6px 14px; }
  .pastille-media { font-size: 11px; gap: 6px; }
  .chiffres-cles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
  .chiffre-cle { padding: 12px; }
  .chiffre-cle b { font-size: 18px; }
  .tableau-cadre.empile { border: 0; background: none; overflow: visible; }
  .tableau-cadre.empile .tableau thead { display: none; }
  .tableau-cadre.empile .tableau, .tableau-cadre.empile .tableau tbody, .tableau-cadre.empile .tableau tr, .tableau-cadre.empile .tableau td { display: block; width: 100%; }
  .tableau-cadre.empile .tableau tr { border: 1px solid var(--ligne-forte); border-radius: var(--rayon-9); background: var(--panneau); padding: 6px 0; margin-bottom: 8px; }
  .tableau-cadre.empile .tableau td { border: 0; padding: 6px 14px; }
  .tableau-cadre.empile .tableau td[data-titre]::before { content: attr(data-titre); display: block; font-size: 11px; color: var(--pale); margin-bottom: 2px; }
  .tableau-cadre.empile .tableau .num { text-align: left; }
  .tableau-cadre.empile .tableau .actions-ligne { justify-content: flex-start; }
  .tableau-cadre.empile .erreurs-ligne { margin-top: -8px; }
  .section-reglage { padding: 16px; }
  .fenetre-horaire { grid-template-columns: 1fr 1fr auto 1fr; }
  .fenetre-horaire > span:first-child { grid-column: 1 / -1; }
  .creneau-champs { grid-template-columns: minmax(0, 1fr); }
  .fenetre { max-height: calc(100dvh - 16px); }
  .voile { padding: 8px; align-items: end; }
  .fenetre-corps { padding: 16px; }
  .fenetre-tete { padding: 16px 16px 0; }
  .fenetre-pied { padding: 12px 16px; }
  .fenetre-pied .gauche { flex-basis: 100%; }
  .medias-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #toast { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; transform: translateY(6px); }
  #toast.visible { transform: none; }
  /* Récoltes: two lines per harvest (date and status, then the figures). */
  .tableau-cadre.empile.journal .tableau tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 14px; }
  .tableau-cadre.empile.journal .tableau td { padding: 0; width: auto; }
  .tableau-cadre.empile.journal .tableau td::before { display: none; }
  .tableau-cadre.empile.journal .c-detail, .tableau-cadre.empile.journal .c-date .pale { display: none; }
  .tableau-cadre.empile.journal .c-date { grid-column: 1; grid-row: 1; font-weight: 500; }
  .tableau-cadre.empile.journal .c-statut { grid-column: 2; grid-row: 1; }
  .tableau-cadre.empile.journal .c-resume { grid-column: 1 / -1; font-size: 12px; color: var(--discret); }
  .tableau-cadre.empile.journal .erreurs-ligne td { grid-column: 1 / -1; }
  .etape { padding: 14px; }
  .ligne-decision { flex-wrap: wrap; }
  .ligne-ecarte { flex-direction: column; align-items: stretch; }
}

@media (min-width: 720px) { .journal .c-resume { display: none; } }

/* Phones: the key figures in one compact list (label left, value right), the
   search on its own line, the guide's button at the bottom of its card. */
@media (max-width: 480px) {
  .chiffres-cles { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--ligne-forte); border-radius: var(--rayon-9); background: var(--panneau); overflow: hidden; }
  .chiffre-cle { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 12px; padding: 10px 14px; border: 0; border-top: 1px solid var(--ligne); border-radius: 0; background: none; }
  .chiffre-cle:first-child { border-top: 0; }
  .chiffre-cle span { grid-column: 1; grid-row: 1; font-size: 13px; color: var(--texte); }
  .chiffre-cle b { grid-column: 2; grid-row: 1; font-size: 15px; text-align: right; }
  .chiffre-cle small { grid-column: 1 / -1; }
  .filtres .recherche { flex-basis: 100%; max-width: none; }
  .carte-guide-tete { display: contents; }
  .carte-guide-tete > .rangee-boutons { order: 10; margin-left: 0; }
  .carte-guide-tete > .rangee-boutons .btn { width: 100%; }
}

/* ---------- public guide page (/g/:slug) ---------- */

.page-publique { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; padding: 18px 20px; }
.publique-haut { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; }
.publique-centre { display: grid; place-items: start center; padding: 6vh 0 8vh; }
.publique-boite { width: min(520px, 100%); display: grid; gap: 24px; }
.publique-boite .surtitre { font-size: 12px; font-weight: 500; color: var(--pale); }
.publique-boite h1 { font-size: 34px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.12; text-wrap: balance; }
.publique-boite .promesse { font-size: 16px; color: var(--discret); line-height: 1.55; text-wrap: pretty; }
.publique-sommaire { display: grid; gap: 8px; padding: 16px 18px; border-radius: var(--rayon-9); background: var(--panneau); border: 1px solid var(--ligne); }
.publique-sommaire ol { padding-left: 20px; display: grid; gap: 3px; font-size: 14px; }
.publique-formulaire { display: grid; gap: 14px; padding: 22px; border-radius: var(--rayon-16); border: 1px solid var(--ligne-forte); background: var(--panneau); }
.publique-formulaire .case-texte span { font-size: 12px; }
.publique-intro { display: grid; gap: 12px; }
.publique-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.publique-apres { margin-top: -4px; text-align: center; }
@media (max-width: 480px) { .publique-champs { grid-template-columns: minmax(0, 1fr); } }
.publique-merci { display: grid; gap: 14px; justify-items: start; padding: 22px; border-radius: var(--rayon-16); border: 1px solid var(--ligne-active); background: var(--panneau); }
.publique-merci h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.publique-merci p { color: var(--discret); }
.publique-bas { text-align: center; font-size: 12px; color: var(--pale); }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .spinner { animation-duration: 900ms !important; animation-iteration-count: infinite !important; }
}

/* emileagent brand: the « e » and its « éclat » motion, as in emileagent's
   composants.js (track 3). Always animated, even under reduced motion: it is the
   brand and a status indicator (Emile's choice). */
.marque-signe { background: none; color: var(--texte); width: auto; height: auto; border-radius: 0; }
.e-eclat { --e-courbe: cubic-bezier(0.23, 1, 0.32, 1); --e-epaisseur: 34px; --e-fond: 0.3; display: block; }
.e-eclat.taille-petite { --e-epaisseur: 60px; --e-fond: 0.45; }
.e-eclat path { stroke-width: var(--e-epaisseur); }
.e-eclat .fond-trait { opacity: var(--e-fond); }
.e-eclat .trait { stroke-dasharray: 250 1750; animation: e-eclat-circule 2.6s var(--e-courbe) infinite; }
@keyframes e-eclat-circule { 0% { stroke-dashoffset: 250; } 50% { stroke-dashoffset: -480; } 100% { stroke-dashoffset: -1000; } }
@media (prefers-reduced-motion: reduce) { .e-eclat .trait { animation: e-eclat-circule 2.6s var(--e-courbe) infinite !important; } }
.e-fixe { display: block; }
.spinner-e { display: inline-flex; vertical-align: middle; color: currentColor; }

/* Folding sidebar, as in emileagent: the « panneau » button or Ctrl B. */
.laterale-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.laterale-tete .marque { min-width: 0; }
.replier { color: var(--discret); }
.replier:hover { color: var(--texte); }
.rouvrir { display: none; align-items: center; gap: 2px; margin-left: -6px; margin-right: 4px; }
.rouvrir-marque { color: var(--texte); }
.app { transition: grid-template-columns 240ms var(--ease-out); }
@media (min-width: 720px) {
  .app.laterale-repliee { grid-template-columns: 0px minmax(0, 1fr); }
  .app.laterale-repliee .laterale { visibility: hidden; overflow: hidden; border-right: 0; }
  .app.laterale-repliee .rouvrir { display: inline-flex; }
}
@media (max-width: 719.98px) { .replier { display: none; } }
@media (prefers-reduced-motion: reduce) { .app { transition: none; } }

/* =====================================================================
   Modules (section 21): one sidebar entry per automation, a module header
   (name, state point, next event), a row of sub-tabs, then the screen.
   ===================================================================== */

.nav-titre { padding: 0 8px; margin-bottom: -10px; font-size: 12px; font-weight: 500; color: var(--pale); }
.laterale-pied { gap: 6px; }
.laterale-pied > .nav { padding-bottom: 6px; border-bottom: 1px solid var(--ligne); }

.module { max-width: 1120px; margin: 0 auto; }
.module.etroit { max-width: 860px; }
.module-tete { display: grid; gap: 6px; margin-bottom: 14px; }
.module-titre { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-width: 0; }
.module-titre h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; }
.module-aide { color: var(--discret); font-size: 14px; max-width: 76ch; }
.module-etat { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; min-width: 0; font-size: 12px; color: var(--discret); }
/* The mode, never as a white block (section 18): the panel background, a thin
   line, and only the point says it. */
.etat-mode { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 10px; border-radius: var(--rayon-7); border: 1px solid var(--ligne-forte); background: var(--panneau); color: var(--discret); text-decoration: none; font-size: 12px; transition: border-color 150ms var(--ease-out); }
.etat-mode:hover { border-color: var(--ligne-active); }
.etat-mode strong { color: var(--texte); font-weight: 600; }
.etat-mode span:last-child { margin-left: -4px; }
.etat-mode.reel strong { color: var(--critique); }
.point.vif { background: var(--texte); box-shadow: 0 0 0 3px var(--choisi); }
.module-info { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.module-info .ic { color: var(--pale); }

.sous-onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--ligne); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.sous-onglets::-webkit-scrollbar { display: none; }
.sous-onglet { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; color: var(--discret); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; border-radius: var(--rayon-7) var(--rayon-7) 0 0; transition: color 120ms var(--ease-out), background-color 120ms var(--ease-out); }
.sous-onglet:hover { color: var(--texte); background: var(--survol); }
.sous-onglet[aria-current="page"] { color: var(--texte); }
.sous-onglet[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--texte); }
.sous-onglet .compte { font-size: 12px; color: var(--pale); font-variant-numeric: tabular-nums; }
.sous-onglet:focus-visible { outline-offset: -2px; }
.module-corps { min-width: 0; animation: entree 200ms var(--ease-out); }
.module-corps .page { animation: none; }
/* Inside a module the sub-tab already names the screen: its title stays for
   screen readers only. */
.module-corps .page-tete h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.module-corps .page-tete p { margin-top: 0; }
.fil-ariane .fil-module, .fil-ariane .fil-onglet { color: var(--discret); }

/* ---------- À valider: the toolbar ---------- */

.barre-a-valider { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; margin-bottom: 16px; }
.ecran-aide { flex: 1 1 320px; max-width: 64ch; color: var(--discret); font-size: 14px; text-wrap: pretty; }
.barre-a-valider .barre-outils { margin-left: auto; }
.btn .court { display: none; }
.ecran-a-valider > .lignes-mode { margin-bottom: 12px; }

/* ---------- À valider on a phone: the pile of cards (section 18) ---------- */

.pile { max-width: 560px; margin: 0 auto; display: grid; gap: 10px; }
.pile-scene { position: relative; height: clamp(360px, calc(100dvh - 330px), 640px); }
.pile-carte { position: absolute; inset: 0; display: grid; }
.pile-carte > .carte-post { height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 12px; }
.pile-carte.devant { z-index: 2; touch-action: pan-y; will-change: transform; transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out); }
.pile-carte.devant.suit { transition: none; cursor: grabbing; user-select: none; }
.pile-carte.devant > .carte-post { border-color: var(--ligne-active); }
.pile-carte.derriere { z-index: 1; pointer-events: none; transform: translateY(calc(10px * (1 - var(--monte, 0)))) scale(calc(0.96 + 0.04 * var(--monte, 0))); opacity: calc(0.55 + 0.45 * var(--monte, 0)); transform-origin: 50% 100%; }
.pile-carte.derriere > .carte-post { overflow: hidden; }
/* In the pile the card scrolls by itself: the media shows large under the text. */
.pile-carte .media img, .pile-carte .media video { max-height: min(60dvh, 520px); }
.pile-tampon { position: absolute; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--rayon-7); border: 1.5px solid currentColor; background: var(--panneau); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; pointer-events: none; opacity: 0; transition: opacity 80ms linear; }
.tampon-valider { left: 14px; color: var(--texte); opacity: var(--valider, 0); transform: rotate(-8deg); }
.tampon-ecarter { right: 14px; color: var(--critique); opacity: var(--ecarter, 0); transform: rotate(8deg); }
.pile-carte.devant.suit .pile-tampon { transition: none; }
.squelette-pile { place-items: center; border: 1px dashed var(--ligne-forte); border-radius: var(--rayon-9); }
.pile-vide { position: absolute; inset: 0; align-content: center; }
.pile-bandeau:empty { display: none; }
.pile-bandeau-ligne { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 6px 4px 14px; border-radius: var(--rayon-9); border: 1px solid var(--ligne-forte); background: var(--panneau); font-size: 13px; color: var(--discret); animation: entree 180ms var(--ease-out); }
.pile-bandeau-ligne > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pile-bandeau-ligne strong { color: var(--texte); font-weight: 600; }
.pile-bandeau-ligne.validee { border-color: var(--ligne-active); }
.pile-bandeau-ligne .btn { flex: none; min-height: 40px; }
.pile-bandeau-extrait { color: var(--pale); }
.pile-commandes { display: grid; gap: 8px; }
.pile-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pile-decision { height: 48px; font-size: 15px; }
.pile-retouches { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; overscroll-behavior-x: contain; }
.pile-retouches::-webkit-scrollbar { display: none; }
.pile-retouche { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: var(--rayon-7); border: 1px solid var(--ligne-forte); color: var(--discret); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background-color 120ms, color 120ms; }
.pile-retouche:hover:not(:disabled) { background: var(--survol); color: var(--texte); }
.pile-retouche:disabled { opacity: 0.45; }
.pile-retouche.occupe { color: var(--texte); border-color: var(--ligne-active); }
.pile-aide { text-align: center; font-size: 12px; color: var(--pale); }
@media (prefers-reduced-motion: reduce) {
  .pile-carte.devant { transition: none; }
}

/* ---------- the free calendar: half-days with all their posts (section 16) ---------- */

.cal-barre { justify-content: flex-end; }
.cal-barre .droite { margin-left: 0; }
.semaine-titre > span { min-width: 0; }
.semaine-fleches { display: inline-flex; gap: 4px; order: 2; }
.demi-journee { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; padding: 5px; border-radius: var(--rayon-7); background: var(--champ); min-width: 0; transition: background-color 120ms, outline-color 120ms; outline: 1px dashed transparent; outline-offset: -1px; }
.demi-tete { display: flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 0 0 2px; font-size: 12px; font-weight: 500; line-height: 18px; color: var(--pale); }
.demi-tete .demi-fenetre { font-weight: 400; font-variant-numeric: tabular-nums; }
.demi-tete .ajout { margin-left: auto; width: 24px; height: 24px; color: var(--pale); }
.demi-tete .ajout:hover { color: var(--texte); }
.demi-journee.passe .creneau-vide, .demi-journee.ferie .creneau-vide { opacity: 0.6; }
.demi-journee.passe .creneau-vide:empty { display: none; }
@container semaine (max-width: 640px) {
  .demi-journee.libre { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; min-height: 44px; padding: 0 52px 0 9px; }
  .demi-journee.libre .creneau-vide { min-height: 0; justify-self: start; }
  .demi-journee.libre .demi-tete .ajout { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
}
.heures-libres { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--pale); }
.creneau-champs { grid-template-columns: 1.6fr 1fr; }
.creneau-alerte { display: flex; align-items: flex-start; gap: 6px; margin-top: 0; }
.creneau-alerte:empty { display: none; }
.creneau-alerte.mauvais { color: var(--critique); }

/* ---------- settings pieces ---------- */

.nombre-champ .unite { padding-right: 6px; font-size: 12px; color: var(--pale); }
.montant-champ { display: inline-flex; align-items: center; gap: 6px; }
.montant-champ .champ { width: 96px; min-height: 34px; height: 34px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.montant-champ span { font-size: 13px; color: var(--discret); }
.heure-courte { width: 116px; min-height: 34px; height: 34px; }
.plage-heures { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--discret); }
.plage-heures .champ { width: 108px; min-height: 34px; height: 34px; }
.etat-ligne { display: inline-flex; align-items: center; gap: 8px; }
.message-section:empty { display: none; }
.interrupteur { position: relative; flex: none; width: 40px; height: 24px; border-radius: 12px; border: 1px solid var(--ligne-survol); background: var(--champ); transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out); }
.interrupteur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--pale); transition: transform 150ms var(--ease-out), background-color 150ms var(--ease-out); }
.interrupteur[aria-checked="true"] { background: var(--choisi); border-color: var(--texte); }
.interrupteur[aria-checked="true"]::after { transform: translateX(16px); background: var(--texte); }
.budget-ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.budget-mois { margin-bottom: 20px; }
.jauge { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--rayon-9); border: 1px solid var(--ligne-forte); background: var(--panneau); }
.jauge-tete { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.jauge-tete strong { font-weight: 500; }
.jauge-tete span { color: var(--discret); font-variant-numeric: tabular-nums; }
.jauge-barre { height: 6px; border-radius: 3px; background: var(--champ); overflow: hidden; }
.jauge-barre span { display: block; height: 100%; border-radius: 3px; background: var(--texte); }
.jauge.pleine .jauge-barre span { background: var(--critique); }
.jauge-reste { font-size: 12px; color: var(--pale); font-variant-numeric: tabular-nums; }

/* ---------- Radar ---------- */

.radar-filtres .choix-famille { width: auto; min-height: 34px; height: 34px; padding-top: 4px; padding-bottom: 4px; font-size: 13px; }
.radar-resume { margin-bottom: 14px; }
.radar-liste { display: grid; gap: 12px; }
.radar-carte { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 16px; border-radius: var(--rayon-9); border: 1px solid var(--ligne-forte); background: var(--panneau); transition: border-color 150ms var(--ease-out); }
.radar-carte:hover { border-color: var(--ligne-active); }
.radar-carte.ignoree { opacity: 0.6; }
.radar-carte.en-avant { border-color: var(--texte); }
.radar-note { display: grid; align-content: start; justify-items: start; gap: 2px; }
.radar-note b { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.radar-note > span { font-size: 12px; color: var(--pale); }
.radar-jauge { width: 64px; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--champ); overflow: hidden; }
.radar-jauge span { display: block; height: 100%; background: var(--pale); }
.radar-carte.fort .radar-jauge span { background: var(--texte); }
.radar-corps { display: grid; gap: 10px; min-width: 0; }
.radar-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 12px; color: var(--discret); }
.radar-meta .pale { color: var(--pale); }
.radar-titre { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; text-wrap: pretty; }
.radar-titre a { text-decoration: none; overflow-wrap: anywhere; }
.radar-titre a:hover { text-decoration: underline; text-decoration-color: var(--ligne-survol); text-underline-offset: 3px; }
.radar-titre .ic { display: inline; margin-left: 4px; vertical-align: -1px; color: var(--pale); }
.radar-pourquoi { color: var(--discret); font-size: 14px; line-height: 1.55; }
.radar-angles { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; padding: 12px 14px; border-radius: var(--rayon-7); background: var(--champ); font-size: 13px; }
.radar-angles dt { color: var(--pale); font-size: 12px; font-weight: 500; padding-top: 1px; }
.radar-angles dd { margin: 0; color: var(--texte); line-height: 1.5; }
.radar-angles q { quotes: "« " " »"; font-weight: 500; }
.radar-angles .a-montrer { color: var(--discret); }
.radar-signaux { display: flex; flex-wrap: wrap; gap: 6px; }
.signal { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 5px; border: 1px solid var(--ligne); font-size: 12px; color: var(--discret); font-variant-numeric: tabular-nums; }
.radar-criteres { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--pale); font-variant-numeric: tabular-nums; }
.radar-criteres b { color: var(--texte); font-weight: 500; }
.radar-post { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--discret); }
.radar-post.pale { color: var(--pale); }
.radar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.script-rendu { display: grid; gap: 16px; }
.script-bloc h3 { font-size: 12px; font-weight: 500; color: var(--pale); margin-bottom: 6px; }
.script-bloc ol { padding-left: 20px; display: grid; gap: 4px; }
.script-accroche { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.4; }
.script-texte { white-space: pre-wrap; font: inherit; margin: 0; }
.script-attente { display: flex; align-items: center; gap: 10px; color: var(--discret); }
.liste-alertes { display: grid; gap: 8px; }
.alerte-ligne { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--rayon-9); border: 1px solid var(--ligne-forte); background: var(--panneau); }
.alerte-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 12px; }
.alerte-tete time { margin-left: auto; color: var(--pale); font-variant-numeric: tabular-nums; }
.alerte-titre { font-size: 14px; font-weight: 600; }
.alerte-titre a { text-decoration: none; }
.alerte-texte { font-size: 13px; color: var(--discret); overflow-wrap: anywhere; }
.alerte-erreur { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--critique); }
.alerte-lien { justify-self: start; font-size: 12px; }
.groupe-sources { margin-bottom: 22px; }
.liste-sources { display: grid; border: 1px solid var(--ligne-forte); border-radius: var(--rayon-9); background: var(--panneau); overflow: hidden; }
.source-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--ligne); }
.source-ligne:first-child { border-top: 0; }
.source-ligne.coupee .source-qui { opacity: 0.6; }
.source-qui { display: grid; gap: 2px; min-width: 0; }
.source-qui strong { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.source-qui .pale { font-size: 12px; color: var(--pale); }
.source-erreur { display: flex; align-items: flex-start; gap: 5px; font-size: 12px; color: var(--critique); overflow-wrap: anywhere; }
.comptes-x { display: flex; flex-wrap: wrap; gap: 8px; }
.compte-x { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: var(--rayon-7); border: 1px solid var(--ligne-forte); background: var(--panneau); text-decoration: none; font-size: 13px; }
.compte-x:hover { border-color: var(--ligne-active); }
.compte-x span { color: var(--discret); }
.compte-x .pale { color: var(--pale); font-size: 12px; }

/* ---------- phones: menu, full screen windows, 44 px targets (section 18) ---------- */

@media (max-width: 719.98px) {
  .module-tete { margin-bottom: 10px; }
  .module-titre { gap: 6px 10px; }
  .module-titre h1 { font-size: 20px; }
  .module-etat { gap: 6px 12px; }
  .etat-mode { min-height: 32px; }
  .etat-mode span:last-child { display: none; }
  .sous-onglets { margin: 0 -12px 16px; padding: 0 8px; }
  .sous-onglet { height: 44px; padding: 0 12px; }
  .contenu { padding-top: 14px; }
  /* Every tap target reaches 44 px. */
  .btn, .btn.petit { min-height: 44px; }
  .btn.mini { min-height: 36px; }
  .btn-icone, .btn-icone.petit, .btn-icone.contour { width: 44px; height: 44px; }
  .piste > button { height: 38px; }
  .nav-lien { height: 44px; }
  .repli-bouton { min-height: 44px; }
  .jour-choix { height: 44px; min-width: 44px; }
  .nombre-champ button { width: 44px; height: 44px; }
  .nombre-champ input { height: 44px; }
  .montant-champ .champ, .heure-courte, .plage-heures .champ { min-height: 44px; height: 44px; }
  .champ { min-height: 44px; font-size: 16px; }
  .filtres .recherche .champ { min-height: 44px; height: 44px; }
  .radar-filtres .choix-famille { min-height: 44px; height: 44px; }
  .interrupteur { width: 52px; height: 32px; border-radius: 16px; }
  .interrupteur::after { top: 4px; left: 4px; width: 22px; height: 22px; }
  .interrupteur[aria-checked="true"]::after { transform: translateX(20px); }
  .pastille-media button { min-height: 36px; padding: 0 12px; }
  .vignette-actions .btn { min-height: 44px; height: 44px; padding: 0 10px; }
  .demi-tete .ajout { width: 44px; height: 44px; }
  .case { min-height: 44px; align-items: center; }
  .case input { width: 22px; height: 22px; margin-top: 0; }
  .compte-x { min-height: 44px; }
  /* The À valider toolbar: the counter, then three equal buttons and refresh. */
  .barre-a-valider { gap: 8px; margin-bottom: 12px; }
  .ecran-aide { flex-basis: 100%; font-size: 13px; }
  .barre-a-valider .barre-outils { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 44px; width: 100%; gap: 6px; }
  .barre-a-valider .reserve-compteur { grid-column: 1 / -1; text-align: left; margin: 0; }
  .barre-a-valider .btn { padding: 0 8px; min-width: 0; }
  .barre-a-valider .barre-outils .btn-icone { order: 4; }
  .btn .long { display: none; }
  .btn .court { display: inline; }
  /* Windows (Modifier, Nouveau post, script) take the whole screen. */
  .voile { padding: 0; align-items: stretch; }
  .fenetre, .fenetre.etroite, .fenetre.large { width: 100%; max-height: none; height: 100dvh; border-radius: 0; border: 0; }
  .fenetre.confirmation { height: auto; max-height: 100dvh; margin-top: auto; border-radius: var(--rayon-16) var(--rayon-16) 0 0; border-top: 1px solid var(--ligne-forte); }
  .fenetre-corps { flex: 1; }
  .fenetre-pied { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .fenetre-pied .btn { flex: 1 1 auto; }
  .creneau-champs { grid-template-columns: minmax(0, 1fr) 132px; }
  /* Radar */
  .radar-carte { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; }
  .radar-note { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 6px; }
  .radar-note b { font-size: 24px; }
  .radar-jauge { align-self: center; margin-top: 0; }
  .radar-angles { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .radar-angles dd + dt { margin-top: 8px; }
  .radar-actions .btn { flex: 1 1 auto; }
  .source-ligne { grid-template-columns: minmax(0, 1fr) auto; }
  .source-ligne .badge { grid-column: 1; grid-row: 2; justify-self: start; }
  .source-ligne .interrupteur { grid-column: 2; grid-row: 1 / span 2; }
  .alerte-tete time { margin-left: 0; flex-basis: 100%; }
}

/* The free calendar: a day is a column of its two half-days, each as tall as
   its posts (no row alignment across days: a busy morning never stretches an
   empty one). */
.semaine { container-name: semaine; }
.jour { container: jour / inline-size; grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; gap: 4px; }
.demi-nom { white-space: nowrap; }
@container jour (max-width: 150px) { .demi-tete .demi-fenetre { display: none; } }

/* The pile's bottom line: the help, replaced by the band after a decision. */
.pile-bas { min-height: 48px; display: grid; align-items: center; }
.pile-bas:has(.pile-bandeau:not(:empty)) .pile-aide { display: none; }
.ecran-a-valider.mode-pile .ecran-aide, .ecran-a-valider.mode-pile > .lignes-mode { display: none; }
@media (max-width: 719.98px) {
  .module-etat .module-info { display: none; }
  .module-titre { flex-wrap: nowrap; justify-content: space-between; }
  .module-titre h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .module-etat { flex: none; }
}
.jour > .demi-journee, .jour > .demi-journee.libre { align-self: stretch; }
/* A past day with nothing on it: its header only. */
.jour.passe.vide > .demi-journee { display: none; }
.jour.passe.vide .jour-tete::after { content: "Rien de publié"; margin-left: auto; color: var(--pale); font-size: 11.5px; }
@media (max-width: 719.98px) {
  .cal-barre .cal-maj { display: none; }
  .cal-barre .droite { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 6px; }
  .cal-barre .droite > .btn-contour { width: 44px; padding: 0; font-size: 0; gap: 0; }
  .cal-barre .droite > .btn-contour .ic { width: 16px; height: 16px; }
  .cal-barre .piste { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .cal-barre .piste > button { justify-content: center; height: 38px; }
}
.page > .budget-ligne, .page > div > .budget-ligne { margin-bottom: 20px; }
/* The card scrolls by itself: its own touch-action must say « vertical only »
   too, or the browser claims the horizontal swipe. */
.pile-carte.devant > .carte-post { touch-action: pan-y; }
/* The next card is guessed by its frame; its content shows as the top card leaves. */
.pile-carte.derriere > .carte-post > * { opacity: var(--monte, 0); }
/* The pile is one column: a long band never widens it. */
.pile { grid-template-columns: minmax(0, 1fr); }
.pile-bas { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 719.98px) {
  .bandeau .btn-icone { flex: none; width: 44px; height: 44px; margin-right: -10px; }
  .etat-mode { min-height: 44px; min-width: 44px; }
  .piste { padding: 2px; }
  .piste > button { height: 44px; }
  /* The switch: a 44 px tall target, the track drawn inside it. */
  .interrupteur { width: 56px; height: 44px; border: 0; border-radius: 0; background: none; }
  .interrupteur::before { content: ""; position: absolute; left: 2px; right: 2px; top: 6px; bottom: 6px; border-radius: 16px; border: 1px solid var(--ligne-survol); background: var(--champ); transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out); }
  .interrupteur[aria-checked="true"] { background: none; }
  .interrupteur[aria-checked="true"]::before { background: var(--choisi); border-color: var(--texte); }
  .interrupteur::after { top: 11px; left: 7px; width: 22px; height: 22px; z-index: 1; }
  .interrupteur[aria-checked="true"]::after { transform: translateX(20px); }
}
@media (max-width: 719.98px) {
  .cal-barre .piste > button { height: 44px; }
  .btn.mini { min-height: 44px; }
}
@media (max-width: 719.98px) {
  .piste > button { min-width: 44px; justify-content: center; }
}
/* Windows: rows keep their own height (a full screen window never spreads them). */
.fenetre-corps { align-content: start; }
.budget-ligne > .aide { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 719.98px) {
  textarea.champ.editeur-texte { min-height: 38dvh; max-height: 60dvh; }
  .pile-bandeau-extrait { display: none; }
}
@media (max-width: 719.98px) {
  .pastille-media { padding: 4px 4px 4px 12px; }
  .pastille-media button { min-height: 44px; min-width: 44px; padding: 0 14px; }
}

/* =====================================================================
   The phone app (section 22, primes on 18 for the phone). Under 720 px:
   a thin top bar (title, mode point, the screen's buttons), a tab bar at
   the bottom (À valider, Calendrier, Radar, Plus) instead of the sidebar
   and the sub-tabs, compact alert lines, sheets from the bottom, À valider
   full screen, safe areas. From 720 px nothing here shows.
   ===================================================================== */

:root {
  --h-tete-tel: 48px;
  --h-onglets: 56px;
  --sure-haut: env(safe-area-inset-top, 0px);
  --sure-bas: env(safe-area-inset-bottom, 0px);
  --sure-gauche: env(safe-area-inset-left, 0px);
  --sure-droite: env(safe-area-inset-right, 0px);
}

/* What only the phone shows. */
.titre-tel, .puce-zone, .actions-tel, .retour-tel, .onglets-bas, .filtres-tel, .poignee-feuille { display: none; }
.filtres-choix { display: contents; }

/* ---------- sheets from the bottom (also usable on a computer, centered) ---------- */

.voile.voile-feuille { padding: 0; align-items: end; justify-items: stretch; overflow: hidden; }
.feuille {
  width: 100%;
  max-height: calc(100dvh - var(--sure-haut) - 24px);
  display: flex;
  flex-direction: column;
  background: var(--panneau);
  border: 1px solid var(--ligne-forte);
  border-bottom: 0;
  border-radius: var(--rayon-16) var(--rayon-16) 0 0;
  padding-bottom: var(--sure-bas);
  animation: feuille-monte 240ms var(--ease-out);
}
@keyframes feuille-monte { from { transform: translateY(100%); } }
.voile-feuille.sortie { transition: opacity 180ms var(--ease-out); }
.feuille .poignee-feuille, .fenetre.en-feuille .poignee-feuille { flex: none; display: grid; place-items: center; height: 22px; touch-action: none; cursor: grab; }
.poignee-feuille span { width: 36px; height: 4px; border-radius: 2px; background: var(--ligne-survol); }
.feuille-tete { flex: none; display: flex; align-items: flex-start; gap: 8px; padding: 0 8px 6px 20px; touch-action: none; }
.feuille-tete > div { flex: 1; min-width: 0; padding-top: 9px; }
.feuille-tete h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.feuille-tete p { margin-top: 2px; font-size: 13px; color: var(--discret); overflow-wrap: anywhere; }
.feuille-fermer { flex: none; width: 44px; height: 44px; }
.feuille-corps { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 12px; display: grid; align-content: start; gap: 2px; }
.feuille-groupe { display: grid; }
.feuille-groupe + .feuille-groupe, .feuille-groupe + .feuille-formulaire { border-top: 1px solid var(--ligne); margin-top: 6px; padding-top: 6px; }
.feuille-groupe-titre { padding: 8px 12px 4px; font-size: 12px; font-weight: 500; color: var(--pale); }
.feuille-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: var(--rayon-9);
  color: var(--texte);
  text-align: left;
  font-size: 15px;
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 120ms var(--ease-out);
}
a.feuille-item { text-decoration: none; }
.feuille-item:active:not(:disabled) { background: var(--survol); }
@media (hover: hover) { .feuille-item:hover:not(:disabled) { background: var(--survol); } }
.feuille-item > .ic:first-child { color: var(--discret); }
.feuille-item[aria-current="page"], .feuille-item[aria-checked="true"] { background: var(--choisi); }
.feuille-item[aria-current="page"] > .ic:first-child, .feuille-item[aria-checked="true"] > .ic:first-child { color: var(--texte); }
.feuille-item.critique, .feuille-item.critique > .ic:first-child { color: var(--critique); }
.feuille-item:disabled { opacity: 0.45; }
.feuille-libelle { flex: 1; min-width: 0; display: grid; gap: 1px; }
.feuille-libelle small { font-size: 12.5px; color: var(--pale); overflow-wrap: anywhere; }
.feuille-compte { display: flex; align-items: center; gap: 12px; padding: 2px 12px 10px; }
.feuille-compte .avatar { width: 36px; height: 36px; font-size: 12px; }
.feuille-compte div { display: grid; line-height: 1.3; }
.feuille-compte strong { font-size: 15px; font-weight: 600; }
.feuille-compte span { font-size: 12px; color: var(--pale); }
.feuille-formulaire { display: grid; gap: 10px; padding: 4px 12px 8px; }
.feuille-formulaire .feuille-groupe-titre { padding: 4px 0 0; }
.feuille-formulaire textarea.champ { min-height: 96px; }
.feuille-formulaire .champ-ligne { margin-top: 0; }
.feuille-formulaire .piste { width: 100%; }
.feuille-pied { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 8px; }
@media (min-width: 720px) {
  .voile.voile-feuille { place-items: center; padding: 16px; }
  .feuille { width: min(480px, 100%); border-bottom: 1px solid var(--ligne-forte); border-radius: var(--rayon-16); padding-bottom: 0; }
}

/* ---------- the info line of a card in the pile ---------- */

.carte-infos { display: flex; align-items: center; gap: 8px; width: calc(100% - 16px); min-height: 44px; margin: 2px 8px 0; padding: 0 8px; border-bottom: 1px solid var(--ligne); font-size: 12.5px; color: var(--discret); text-align: left; }
.carte-infos > .ic { color: var(--pale); }
.infos-ligne { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; }
.infos-ligne > * { flex: none; }
.infos-ligne .sep { color: var(--ligne-survol); }
.infos-ligne .juge { display: inline-flex; align-items: center; gap: 4px; }
.infos-ligne .juge strong { color: var(--texte); font-weight: 600; font-variant-numeric: tabular-nums; }
.infos-ligne .infos-source { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.infos-ligne > span:has(> .ic) { display: inline-flex; align-items: center; gap: 4px; }
.infos-details { display: grid; gap: 0; }

@media (max-width: 719.98px) {
  html { -webkit-tap-highlight-color: transparent; }
  button, a, .vignette, label { touch-action: manipulation; }

  /* ---- the shell: no sidebar, a thin top bar, the tab bar ---- */
  .app { display: block; min-height: 100dvh; }
  .laterale, .voile-nav, .module-tete, .sous-onglets { display: none !important; }
  .entete .menu, .entete .rouvrir, .entete .fil-ariane, .entete .bouton-theme { display: none !important; }
  .entete {
    height: calc(var(--h-tete-tel) + var(--sure-haut));
    padding: var(--sure-haut) max(4px, var(--sure-droite)) 0 max(16px, var(--sure-gauche));
    gap: 4px;
  }
  .retour-tel { display: inline-grid; margin: 0 -2px 0 -12px; color: var(--texte); }
  .titre-tel { display: grid; min-width: 0; line-height: 1.2; }
  .titre-module { font-size: 11px; font-weight: 500; color: var(--pale); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .titre-tel strong { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .entete-droite { gap: 0; flex: none; }
  .puce-zone, .actions-tel { display: flex; align-items: center; }
  .puce-zone:empty, .actions-tel:empty { display: none; }
  .puce-tel { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; min-width: 44px; padding: 0 10px; border-radius: var(--rayon-7); font-size: 12.5px; font-weight: 500; color: var(--discret); text-decoration: none; white-space: nowrap; }
  .puce-tel.reel { color: var(--critique); }
  .puce-tel .point { width: 8px; height: 8px; }
  .action-tel { color: var(--texte); }
  .contenu { padding: 14px max(12px, var(--sure-droite)) calc(var(--h-onglets) + var(--sure-bas) + 28px) max(12px, var(--sure-gauche)); }

  .onglets-bas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 0 var(--sure-droite) var(--sure-bas) var(--sure-gauche);
    background: var(--fond);
    border-top: 1px solid var(--ligne);
    user-select: none;
    -webkit-user-select: none;
  }
  .onglet-bas { height: var(--h-onglets); display: grid; justify-items: center; align-content: center; gap: 3px; color: var(--pale); text-decoration: none; font-size: 11px; font-weight: 500; letter-spacing: 0.005em; transition: color 120ms var(--ease-out); }
  .onglet-bas[aria-current="page"] { color: var(--texte); }
  .onglet-bas[aria-current="page"] .ic { stroke-width: 2; }
  .onglet-bas:focus-visible { outline-offset: -4px; border-radius: var(--rayon-9); }
  .onglet-icone { position: relative; display: grid; place-items: center; height: 24px; }
  .onglet-compte { position: absolute; top: -6px; left: calc(100% - 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 5px; background: var(--texte); color: var(--fond); outline: 2px solid var(--fond); font-size: 10.5px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }

  /* A note from the app: at the top, under the bar (never over the buttons). */
  #toast { top: calc(var(--sure-haut) + var(--h-tete-tel) + 8px); bottom: auto; left: 12px; right: 12px; transform: translateY(-6px); }
  #toast.visible { transform: none; }

  /* ---- alerts: one line, opened at a touch ---- */
  .bandeaux { grid-template-columns: minmax(0, 1fr); }
  .bandeau.compact { min-height: 44px; gap: 0; align-items: flex-start; padding: 0 max(4px, var(--sure-droite)) 0 max(6px, var(--sure-gauche)); background: var(--fond); color: var(--discret); border-bottom: 1px solid var(--ligne); }
  .bandeau-texte { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 10px; text-align: left; font-size: 13px; color: var(--discret); }
  .bandeau-texte > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bandeau-texte > .ic:last-child { color: var(--pale); }
  .bandeau.compact.critique .bandeau-texte > .ic:first-child { color: var(--critique); }
  .bandeau.compact.critique .bandeau-texte > span { color: var(--texte); }
  .bandeau.compact.deplie .bandeau-texte { align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
  .bandeau.compact.deplie .bandeau-texte > .ic { margin-top: 2px; }
  .bandeau.compact.deplie .bandeau-texte > span { white-space: normal; overflow: visible; }
  .bandeau.compact .bandeau-fermer { flex: none; margin: 0; }

  /* ---- windows become sheets: grip, drag down to close ---- */
  .fenetre.en-feuille, .fenetre.en-feuille.etroite, .fenetre.en-feuille.large, .fenetre.en-feuille.confirmation {
    width: 100%;
    height: auto;
    max-height: calc(100dvh - var(--sure-haut) - 12px);
    margin-top: 0;
    border: 1px solid var(--ligne-forte);
    border-bottom: 0;
    border-radius: var(--rayon-16) var(--rayon-16) 0 0;
    animation: feuille-monte 240ms var(--ease-out);
  }
  .fenetre.en-feuille.editeur, .fenetre.en-feuille.script-video, .fenetre.en-feuille.large { height: calc(100dvh - var(--sure-haut) - 12px); }
  .fenetre.en-feuille .fenetre-tete { padding: 0 6px 0 16px; touch-action: none; }
  .fenetre.en-feuille .fenetre-tete > div { padding-top: 8px; }
  .fenetre.en-feuille .fenetre-fermer { margin: 0; }
  .fenetre.en-feuille .fenetre-corps { padding-top: 14px; overscroll-behavior: contain; }

  /* ---- À valider, full screen: the pile fills what the bars leave ---- */
  body.pile-plein-ecran { overflow: hidden; overscroll-behavior: none; }
  body.pile-plein-ecran .app { height: 100dvh; min-height: 0; overflow: hidden; }
  body.pile-plein-ecran .principal { height: 100dvh; min-height: 0; }
  body.pile-plein-ecran .contenu { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px max(10px, var(--sure-droite)) calc(var(--h-onglets) + var(--sure-bas) + 10px) max(10px, var(--sure-gauche)); }
  body.pile-plein-ecran .module, body.pile-plein-ecran .module-corps, body.pile-plein-ecran .ecran-a-valider, body.pile-plein-ecran .corps-onglet {
    flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column;
  }
  body.pile-plein-ecran .barre-a-valider, body.pile-plein-ecran .ecran-a-valider > .messages { display: none; }
  body.pile-plein-ecran .pile { flex: 1; min-height: 0; width: 100%; max-width: none; display: flex; flex-direction: column; gap: 8px; }
  body.pile-plein-ecran .pile-scene { flex: 1; min-height: 0; height: auto; margin-bottom: 4px; }
  .pile-carte .texte-post { font-size: 15px; line-height: 22px; }
  .pile-carte > .carte-post { padding-bottom: 16px; }
  .pile-bas { min-height: 44px; }
  .pile-aide { font-size: 12px; }
  .pile-bandeau-ligne { min-height: 44px; }
  .pile-boutons { grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); gap: 8px; user-select: none; -webkit-user-select: none; }
  .pile-decision { height: 60px; min-height: 60px; gap: 8px; border-radius: var(--rayon-9); font-size: 16px; font-weight: 600; }
  .pile-retouches-bouton { width: 60px; height: 60px; min-height: 60px; padding: 0; border-radius: var(--rayon-9); color: var(--texte); }
  .pile-retouches-bouton.occupe { border-color: var(--ligne-active); }

  /* ---- each screen: what moved to the top bar or into a sheet ---- */
  .cal-barre .droite { grid-template-columns: minmax(0, 1fr); }
  .cal-barre .droite > .btn-contour, .cal-barre [data-bouton="nouveau"] { display: none; }
  .module-corps[data-onglet="fil"] .page-tete .actions { display: none; }
  .retour-page { display: none; }
  .radar-filtres { flex-wrap: nowrap; }
  .radar-filtres .recherche { flex: 1 1 0; min-width: 0; max-width: none; }
  .radar-filtres .filtres-choix { display: none; }
  .radar-filtres .filtres-tel { display: inline-flex; flex: none; }
  .filtres-tel .compte { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 5px; background: var(--texte); color: var(--fond); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
  .ecran-connexion { padding: max(18px, var(--sure-haut)) max(20px, var(--sure-droite)) max(18px, var(--sure-bas)) max(20px, var(--sure-gauche)); }
  /* A screen's help sentence: two lines at most (an app, not a page). */
  .module-corps .page-tete p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; }
  /* The media pill (44 px buttons) never covers the document's name. */
  .media-document.avec-pastille { padding-top: 66px; }
  /* « 650 / 3000 » stays on one line beside the judge. */
  .champ-ligne > .compteur { flex: none; white-space: nowrap; }
}

/* =====================================================================
   Phamtom (section 24, L): its header line, the pile of
   proposed comments (the post entire facing the comment), the session's
   timeline (horizontal on a computer, vertical on a phone), people,
   journal and settings. Same tokens as the rest: black and white, Geist,
   no pill, no shadow, no large white area, red only for a real error.
   ===================================================================== */

.lien-discret { text-decoration: none; color: var(--discret); }
.lien-discret:hover { color: var(--texte); }
.etat-mode.mode-inconnu strong { color: var(--discret); font-weight: 500; }
.com-sous { color: var(--pale); font-weight: 400; }
.com-titre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.com-texte { font-size: 13px; color: var(--texte); text-wrap: pretty; }
.com-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.com-bloc { display: grid; gap: 12px; align-content: start; padding: 18px; border: 1px solid var(--ligne-forte); border-radius: var(--rayon-16); background: var(--panneau); min-width: 0; }
.com-bloc-titre { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; }
.com-lignes { list-style: none; display: grid; }
.com-ligne { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ligne); min-width: 0; }
.com-ligne:first-child { border-top: 0; padding-top: 0; }
.com-ligne-texte { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.4; }
.com-ligne-texte strong { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.com-ligne-texte > span { font-size: 12px; color: var(--pale); overflow-wrap: anywhere; }
.com-ligne .btn { flex: none; }
.vide-ligne { font-size: 12px; color: var(--pale); }

/* ---- À valider: no session, preparation, running ---- */

.com-vide .com-duree { width: min(420px, 100%); justify-self: center; text-align: left; margin-top: 8px; }
.com-vide .com-arrets { display: grid; gap: 6px; justify-items: center; }
.com-vide .com-arrets:empty { display: none; }
.com-auto { margin-top: 4px; }
.com-auto:empty { display: none; }
.com-attente { display: grid; place-items: center; height: 28px; color: var(--texte); }
.com-progression { color: var(--discret); font-variant-numeric: tabular-nums; }
.com-durees { width: 100%; }

/* ---- the pile: one card at a time, a centered column of about 600 px ---- */

.com-pile { max-width: 600px; }
.com-pile-tete { text-align: center; font-size: 12px; color: var(--pale); font-variant-numeric: tabular-nums; min-height: 18px; }
/* The card holds the author, then the post that scrolls in its OWN zone, then « Ton
   commentaire », always in view at the bottom of the card: a comment is never validated
   (and in Réel published) without being seen, however long the post. */
.pile-carte > .com-carte { height: 100%; display: flex; flex-direction: column; overflow: hidden; touch-action: pan-y; padding-bottom: 14px; border-radius: var(--rayon-9); border: 1px solid var(--ligne-forte); background: var(--panneau); min-width: 0; }
.pile-carte > .com-carte > .com-auteur, .pile-carte > .com-carte > .com-carte-avis { flex: none; }
.pile-carte > .com-carte > .com-post-texte { flex: 0 1 auto; min-height: 72px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; touch-action: pan-y; }
.pile-carte > .com-carte > .com-propose { flex: none; max-height: 60%; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.pile-carte > .com-carte > .com-post-texte.com-post-suite { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent); }
.pile-carte.devant > .com-carte { border-color: var(--ligne-active); }
.pile-carte.derriere > .com-carte { overflow: hidden; }
.pile-carte.derriere > .com-carte > * { opacity: var(--monte, 0); }
.com-auteur { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px 0 16px; }
.com-auteur .avatar { width: 40px; height: 40px; font-size: 13px; }
.com-auteur .auteur-qui span { overflow-wrap: anywhere; }
.com-auteur .original { flex: none; margin-left: auto; padding-top: 2px; }
.com-post-texte { margin: 10px 16px 0; font-size: 14px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--texte); }
.com-propose { margin: 14px 12px 0; padding: 12px 14px; border-radius: var(--rayon-9); border: 1px solid var(--ligne-survol); background: var(--champ); display: grid; gap: 6px; }
.com-propose-titre { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--discret); }
.com-propose-texte { font-size: 15px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--texte); }
.com-propose-infos { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--pale); font-variant-numeric: tabular-nums; }
.com-carte-avis { margin: 10px 12px 0; }
.com-carte-avis:empty { display: none; }
.com-carte-avis .avis { padding: 8px 10px; font-size: 12px; }
.pile-boutons.com-boutons { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.com-corriger .ic { flex: none; }
.com-refus-porte { white-space: pre-line; overflow-wrap: anywhere; }
.feuille-corriger textarea.champ { min-height: 150px; line-height: 21px; }

/* ---- empty pile: « Séance prête » ---- */

.com-prete { max-width: 640px; margin: 0 auto; display: grid; gap: 14px; }
.com-prete > .pile-bandeau { margin: 0; }
.com-prete-titre { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.com-resume { font-size: 14px; font-variant-numeric: tabular-nums; }
.com-expire { font-size: 13px; color: var(--discret); }
.com-prete-tete .com-duree { max-width: 420px; }
.com-erreur-lancer:empty { display: none; }
.com-estimation { display: grid; gap: 4px; }
/* What the plan and the preparation left aside (plan_ecartes, erreurs), and how many
   validated comments found a place: small lines, never a big block. */
.com-notes { display: grid; gap: 4px; font-size: 12px; line-height: 18px; color: var(--discret); min-width: 0; overflow-wrap: anywhere; }
.com-notes-titre { font-weight: 600; color: var(--texte); }
.com-notes ul { display: grid; gap: 2px; padding-left: 16px; }
.com-seance-notes { display: grid; gap: 10px; margin: -4px 0 14px; min-width: 0; }
.com-seance-notes:empty { display: none; }
.com-planifies { font-size: 13px; color: var(--texte); font-variant-numeric: tabular-nums; }
.com-non-planifies { margin-top: 10px; }

/* ---- the session ---- */

.com-seance-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 14px; min-width: 0; }
.com-seance-titre { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.com-seance-titre h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.com-lien-page { font-size: 12px; }
.com-compteurs { display: flex; flex-wrap: wrap; gap: 6px; }
.com-compteur { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 5px; border: 1px solid var(--ligne); font-size: 12px; color: var(--discret); font-variant-numeric: tabular-nums; white-space: nowrap; }
.com-seance-actions { margin-left: auto; }
.com-seance-bandeau { margin-bottom: 12px; }
.com-seance-bandeau:empty { display: none; }
.com-frise-cadre { padding: 16px; border: 1px solid var(--ligne-forte); border-radius: var(--rayon-16); background: var(--panneau); min-width: 0; }
.com-frise-vide { margin-top: 4px; }
.com-motif-fin { margin: 14px 0 10px; }
.com-bilan { margin-top: 14px; }
.com-bilan:empty { display: none; }
.com-bilan-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.com-bilan-bloc { display: grid; align-content: start; gap: 6px; padding: 12px 14px; border-radius: var(--rayon-9); border: 1px solid var(--ligne-forte); background: var(--panneau); min-width: 0; }
.com-bilan-bloc h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 500; color: var(--discret); }
.com-bilan-bloc h3 b { font-size: 20px; font-weight: 600; color: var(--texte); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.com-bilan-bloc > p { font-size: 12px; color: var(--pale); }
.com-bilan-liste { list-style: none; display: grid; gap: 4px; max-height: 180px; overflow: auto; font-size: 12px; color: var(--discret); overflow-wrap: anywhere; }
.com-bilan-liste strong { color: var(--texte); font-weight: 500; }

/* ---- the timeline: the states (prévu pale outline, en cours ring, parti
   filled, simulé filled grey, refused in red, inconnu outline with « ? »,
   annulé crossed and pale) ---- */

.frise-marque, .frise-point { box-sizing: border-box; border-radius: var(--rayon-rond); border: 1.5px solid var(--ligne-survol); background: transparent; color: var(--texte); }
.frise-marque.etat-en-cours, .frise-etat.etat-en-cours .frise-point { border: 2.5px solid var(--texte); }
.frise-marque.etat-parti, .frise-etat.etat-parti .frise-point { background: var(--texte); border-color: var(--texte); }
.frise-marque.etat-simule, .frise-etat.etat-simule .frise-point { background: var(--pale); border-color: var(--pale); }
.frise-marque.etat-refuse, .frise-etat.etat-refuse .frise-point { background: var(--critique); border-color: var(--critique); }
.frise-marque.etat-inconnu, .frise-etat.etat-inconnu .frise-point { border-color: var(--texte); }
.frise-marque.etat-annule, .frise-etat.etat-annule .frise-point { border-color: var(--ligne-forte); opacity: 0.7; background: linear-gradient(135deg, transparent 44%, var(--pale) 44%, var(--pale) 56%, transparent 56%); }
.frise-etat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--discret); white-space: nowrap; }
.frise-etat.etat-refuse { color: var(--critique); }
.frise-etat.etat-annule { color: var(--pale); text-decoration: line-through; }
.frise-point { width: 10px; height: 10px; flex: none; display: inline-grid; place-items: center; font-size: 8px; font-weight: 700; line-height: 1; }
.frise-etat.etat-inconnu .frise-point { width: 13px; height: 13px; }

/* Horizontal (computer): names on the left, the time to the right. */
.frise-horizontale { display: grid; grid-template-columns: 104px minmax(0, 1fr); overflow-x: clip; }
.frise-noms, .frise-zone { display: grid; grid-template-rows: 30px repeat(3, 48px); }
.frise-nom { display: flex; align-items: center; font-size: 12px; font-weight: 500; color: var(--discret); }
.frise-zone { position: relative; min-width: 0; }
.frise-axe { position: relative; border-bottom: 1px solid var(--ligne-forte); }
.frise-graduation { position: absolute; bottom: 0; width: 0; height: 5px; border-left: 1px solid var(--ligne-forte); }
.frise-graduation.etiquetee { height: 9px; border-left-color: var(--ligne-survol); }
.frise-graduation time { position: absolute; bottom: 11px; left: 0; transform: translateX(-50%); font-size: 11px; color: var(--pale); white-space: nowrap; }
.frise-piste { position: relative; border-bottom: 1px dashed var(--ligne); }
.frise-plage { position: absolute; top: 30px; bottom: 0; background: var(--champ); border-radius: 4px; pointer-events: none; }
.frise-marque { position: absolute; top: 50%; z-index: 2; width: 16px; height: 16px; margin: -8px 0 0 -8px; display: grid; place-items: center; padding: 0; font-size: 10px; font-weight: 700; line-height: 1; transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out); }
.frise-marque:hover, .frise-marque:focus-visible { outline: 2px solid var(--ligne-survol); outline-offset: 2px; z-index: 4; }
.frise-trait { position: absolute; top: 50%; z-index: 1; height: 2px; margin-top: -1px; background: var(--ligne-survol); border-radius: 1px; pointer-events: none; }
.frise-trait.etat-parti { background: var(--texte); }
.frise-trait.etat-simule { background: var(--pale); }
.frise-trait.etat-refuse { background: var(--critique); }
.frise-maintenant { position: absolute; top: 0; bottom: 0; z-index: 3; width: 0; border-left: 1.5px solid var(--texte); pointer-events: none; transition: left 1s linear; }
.frise-maintenant > span { position: absolute; top: 2px; left: 5px; padding: 0 4px; border-radius: 4px; background: var(--panneau); font-size: 11px; font-weight: 600; color: var(--texte); white-space: nowrap; }
.frise-fiche { position: absolute; z-index: 5; width: min(340px, 100%); padding: 12px 14px; border-radius: var(--rayon-9); border: 1px solid var(--ligne-active); background: var(--bulle); }
.frise-fiche-corps { display: grid; gap: 8px; min-width: 0; }
.frise-fiche-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 13px; }
.frise-fiche-tete > .ic { color: var(--discret); }
.frise-fiche-liste { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13px; line-height: 1.45; }
.frise-fiche-liste dt { color: var(--pale); font-size: 12px; padding-top: 1px; }
.frise-fiche-liste dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.frise-fiche-texte { white-space: pre-wrap; }
.frise-lien { justify-self: start; }

/* Vertical (phone): one line per gesture, « maintenant » between two lines. */
.frise-verticale { position: relative; }
.frise-lignes { position: relative; list-style: none; display: grid; gap: 12px; padding: 14px 0 12px; }
.frise-ligne-bouton { display: grid; grid-template-columns: 42px 22px minmax(0, 1fr); grid-template-areas: "heure icone quoi" ". . etat"; align-items: center; gap: 2px 8px; width: 100%; min-height: 52px; padding: 8px 10px; border-radius: var(--rayon-9); border: 1px solid var(--ligne-forte); background: var(--panneau); text-align: left; color: var(--texte); -webkit-tap-highlight-color: transparent; transition: border-color 150ms var(--ease-out); }
.frise-ligne-bouton:active { background: var(--survol); }
.frise-heure { grid-area: heure; font-size: 13px; font-weight: 500; color: var(--discret); }
.frise-icone { grid-area: icone; display: grid; place-items: center; color: var(--discret); }
.frise-icone.etat-parti, .frise-icone.etat-en-cours { color: var(--texte); }
.frise-icone.etat-refuse { color: var(--critique); }
.frise-quoi { grid-area: quoi; min-width: 0; display: grid; line-height: 1.35; }
.frise-quoi strong { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frise-quoi small { font-size: 12px; color: var(--pale); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frise-ligne-bouton > .frise-etat { grid-area: etat; white-space: normal; }
.frise-ligne.etat-en-cours .frise-ligne-bouton { border-color: var(--texte); }
.frise-ligne.etat-refuse .frise-ligne-bouton { border-color: color-mix(in srgb, var(--critique) 45%, transparent); }
.frise-ligne.etat-annule .frise-ligne-bouton { opacity: 0.6; }
.frise-ligne.etat-annule .frise-quoi strong { text-decoration: line-through; }
.frise-maintenant-v { position: absolute; left: 0; right: 0; z-index: 2; height: 0; border-top: 1.5px solid var(--texte); pointer-events: none; transition: top 1s linear; }
.frise-maintenant-v > span { position: absolute; right: 0; top: -9px; padding: 0 6px; border-radius: 4px; background: var(--fond); font-size: 11px; font-weight: 600; color: var(--texte); }
@media (prefers-reduced-motion: reduce) {
  .frise-maintenant, .frise-maintenant-v, .frise-marque { transition: none; }
}

/* ---- people ---- */

.com-compteur-personnes { margin-bottom: 12px; font-size: 12px; color: var(--pale); font-variant-numeric: tabular-nums; }
.com-personnes-grille { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 14px; align-items: start; }
.com-personnes-cote { display: grid; gap: 14px; align-content: start; min-width: 0; }
.com-personnes-liste { list-style: none; display: grid; }
.com-personne { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ligne); min-width: 0; }
.com-personne:first-child { border-top: 0; padding-top: 0; }
.com-personne .avatar { width: 36px; height: 36px; font-size: 12px; }
.com-personne.coupee .avatar, .com-personne.coupee .com-personne-texte { opacity: 0.55; }
.com-personne-texte { flex: 1; min-width: 0; display: grid; gap: 1px; line-height: 1.4; }
.com-personne-nom { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.com-personne-nom a { font-size: 14px; font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.com-personne-nom a:hover { text-decoration: underline; text-decoration-color: var(--ligne-survol); text-underline-offset: 3px; }
.com-personne-texte .com-titre { font-size: 12px; color: var(--discret); }
.com-personne-lecture { font-size: 12px; color: var(--pale); font-variant-numeric: tabular-nums; }
.com-personne-erreur { display: flex; align-items: flex-start; gap: 5px; font-size: 12px; color: var(--critique); overflow-wrap: anywhere; }
.com-personne-erreur .ic { margin-top: 2px; }
.com-personne-actions { flex: none; display: flex; align-items: center; gap: 6px; }
.com-interrupteur { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--discret); cursor: pointer; }
.com-phare-court { color: var(--pale); font-weight: 400; }
.com-ajout-theme { display: flex; gap: 8px; }
.com-ajout-theme .champ { flex: 1; min-width: 0; }
.com-ajout-theme .btn { flex: none; }

/* ---- journal ---- */

.com-journal > .com-bloc { margin-bottom: 14px; }
.com-aujourdhui .chiffres-cles { margin-bottom: 0; }
.com-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.com-deux > div { display: grid; gap: 6px; align-content: start; }
.com-valeur { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.com-gestes-tete { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.com-jour-nav { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.com-gestes-liste { list-style: none; display: grid; }
.com-geste { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--ligne); min-width: 0; }
.com-geste:first-child { border-top: 0; }
.com-geste > .frise-icone { padding-top: 2px; }
.com-geste-texte { flex: 1; min-width: 0; display: grid; gap: 4px; }
.com-geste-ligne { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px; }
.com-geste-ligne time { color: var(--discret); font-variant-numeric: tabular-nums; }
.com-geste-ligne strong { font-weight: 500; }
.com-geste-commentaire { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.com-geste-extrait, .com-geste-motif { font-size: 12px; color: var(--pale); overflow-wrap: anywhere; }
.com-retombees { font-size: 12px; color: var(--discret); }
.com-rien { margin: 0; }
.com-seances-liste { list-style: none; display: grid; gap: 8px; }
.com-seance-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 12px 14px; border-radius: var(--rayon-9); border: 1px solid var(--ligne-forte); background: var(--panneau); text-decoration: none; color: var(--texte); transition: border-color 150ms var(--ease-out); }
.com-seance-ligne:hover { border-color: var(--ligne-active); }
.com-seance-ligne-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 13px; min-width: 0; }
.com-seance-ligne-tete strong { font-weight: 500; }
.com-seance-bilan { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--discret); font-variant-numeric: tabular-nums; }
.com-seance-bilan b { color: var(--texte); font-weight: 600; }
.com-seance-ligne > .ic { grid-column: 2; grid-row: 1 / span 2; color: var(--pale); }

/* ---- settings ---- */

.com-phrase-mode { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--rayon-9); border: 1px dashed var(--ligne-survol); font-size: 12.5px; line-height: 1.5; color: var(--discret); text-wrap: pretty; }
.com-phrase-mode .ic { margin-top: 2px; color: var(--discret); }
.com-commande { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: var(--rayon-7); border: 1px solid var(--ligne-forte); background: var(--champ); min-width: 0; }
.com-commande code { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; user-select: all; }
.com-commande .btn { flex: none; }
.case.figee { cursor: default; opacity: 0.85; }

@media (max-width: 1100px) {
  .com-personnes-grille { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 719.98px) {
  .pile-boutons.com-boutons { grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); }
  .com-corriger { width: 60px; padding: 0; }
  .com-corriger .com-corriger-texte { display: none; }
  .com-auteur .original { min-height: 44px; display: inline-flex; align-items: center; padding-top: 0; margin-top: -10px; }
  .com-pile-tete { min-height: 16px; }
  .com-bloc { padding: 14px; }
  .com-seance-actions { width: 100%; margin-left: 0; }
  .com-seance-actions .btn { width: 100%; }
  .com-frise-cadre { padding: 0; border: 0; background: none; }
  .com-deux { grid-template-columns: minmax(0, 1fr); }
  .com-actions .btn.grand { flex: 1 1 auto; }
  .com-prete .com-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .com-bilan-grille { grid-template-columns: minmax(0, 1fr); }
}
/* The pile of comments on a computer: the buttons stay in the window. */
@media (min-width: 720px) {
  .com-pile .pile-scene { height: clamp(320px, calc(100dvh - 400px), 640px); }
}

/* =====================================================================
   Phamtom, section 26 (O): the live chase. The page of a flash card
   (countdown, the post or the conversation, the variants as a radio group,
   « Passer » and « Publier » fixed at the bottom), the sub-tabs « Cartes
   éclair » and « Ce qui marche », the vivier in Personnes, the new blocks of
   Réglages. Same tokens: black and white, no pill, no shadow, no large white
   area, red only for a real error; the countdown changes its text, it never
   moves.
   ===================================================================== */

.com-propose-forme { font-size: 12px; font-weight: 600; color: var(--texte); }
.com-bloc-tete { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }

/* ---- the page of a card: one centered column of about 600 px ---- */

.com-carte-page { max-width: 600px; margin: 0 auto; display: grid; gap: 14px; min-width: 0; }
.com-carte-tete { position: sticky; top: var(--hauteur-tete); z-index: 6; display: grid; gap: 6px; padding: 10px 0; background: var(--fond); border-bottom: 1px solid var(--ligne); }
.com-carte-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; min-width: 0; }
.com-carte-titre h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.com-rebours { font-size: 15px; font-weight: 500; color: var(--discret); font-variant-numeric: tabular-nums; white-space: nowrap; }
.com-rebours.urgent { color: var(--texte); font-weight: 600; }
.com-rebours.passe { color: var(--pale); }
.com-carte-mode { margin: 0; }
.com-carte-avis-page { display: grid; gap: 8px; }
.com-carte-avis-page:empty { display: none; }
.com-carte-statut a.btn-lien { display: inline-flex; align-items: center; gap: 3px; }
.com-carte-contexte:empty { display: none; }
.com-carte-post { gap: 10px; }
.com-carte-post .com-auteur { padding: 0; }
.com-carte-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 12.5px; color: var(--discret); font-variant-numeric: tabular-nums; }
.com-carte-chiffres { font-size: 13px; color: var(--texte); font-variant-numeric: tabular-nums; }
.com-carte-lus { margin-top: -6px; font-size: 12px; color: var(--pale); font-variant-numeric: tabular-nums; }
/* Folded at 6 lines (6 x 20 px), the end fading when the text goes on; unfolded, it scrolls in the card. */
.com-carte-texte { font-size: 14px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--texte); max-height: 120px; overflow: hidden; }
.com-carte-texte.tronque:not(.deplie) { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.com-carte-texte.deplie { max-height: min(50dvh, 420px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 4px; }
.com-plus { justify-self: start; font-size: 13px; color: var(--discret); }
.com-texte-coupe { margin-top: 0; }

/* The conversation of a reply: the post in short, Emile's comment, the answer. */
.com-carte-conversation { gap: 12px; }
.com-conv-post { display: grid; gap: 4px; min-width: 0; }
.com-conv-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.com-conv-titre { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--discret); }
.com-conv-titre strong { color: var(--texte); font-weight: 600; }
.com-conv-extrait { font-size: 13px; line-height: 19px; color: var(--discret); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.com-conv-bloc { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--rayon-9); border: 1px solid var(--ligne-forte); background: var(--champ); min-width: 0; }
.com-conv-reponse { border-color: var(--ligne-active); }
.com-conv-qui { font-size: 12px; color: var(--discret); }
.com-conv-texte { font-size: 14px; line-height: 21px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--texte); }
.com-conv-quand { font-size: 12px; color: var(--pale); font-variant-numeric: tabular-nums; }

/* The variants: big radio cards; the chosen one has its line and its check. */
.com-variantes-liste { display: grid; gap: 10px; }
.com-variante-bloc { display: grid; gap: 8px; min-width: 0; }
.com-variante { display: grid; gap: 6px; width: 100%; padding: 12px 14px; border-radius: var(--rayon-9); border: 1px solid var(--ligne-forte); background: var(--champ); text-align: left; color: var(--texte); -webkit-tap-highlight-color: transparent; transition: border-color 150ms var(--ease-out), background-color 150ms var(--ease-out); }
.com-variante:hover:not(:disabled) { border-color: var(--ligne-active); }
.com-variante.choisie { border-color: var(--texte); background: var(--panneau); }
.com-variante:disabled { cursor: default; }
.com-variante:disabled:not(.choisie) { opacity: 0.6; }
.com-variante-tete { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; }
.com-variante-forme { font-weight: 600; color: var(--texte); }
.com-variante-signes { color: var(--pale); font-variant-numeric: tabular-nums; }
.com-variante-coche { margin-left: auto; width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: var(--rayon-rond); border: 1.5px solid var(--ligne-survol); color: transparent; }
.com-variante.choisie .com-variante-coche { background: var(--texte); border-color: var(--texte); color: var(--fond); }
.com-variante-texte { display: block; font-size: 15px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
.com-variante-corrige { font-size: 12px; color: var(--discret); }
.com-variante-actions { display: flex; gap: 8px; }
.com-feuille-carte textarea.champ { min-height: 170px; line-height: 21px; }

/* « Passer » and « Publier »: at the bottom of the column, always in view. */
.com-carte-actions { position: sticky; bottom: 0; z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px; padding: 12px 0; background: var(--fond); border-top: 1px solid var(--ligne); }
.com-carte-actions .btn { height: 44px; font-size: 14px; }
.com-carte-introuvable { max-width: 600px; margin: 0 auto; }

/* ---- Cartes éclair ---- */

.com-eclair { display: grid; gap: 14px; }
.com-chasse-etat { margin: 0; }
.com-cartes-liste { list-style: none; display: grid; }
.com-cartes-liste > li + li { border-top: 1px solid var(--ligne); }
.com-carte-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; grid-template-areas: "tete delai chevron" "extrait extrait chevron"; align-items: center; gap: 4px 12px; min-height: 56px; padding: 10px 2px; text-decoration: none; color: var(--texte); border-radius: var(--rayon-7); transition: background-color 120ms var(--ease-out); -webkit-tap-highlight-color: transparent; }
.com-carte-ligne:active { background: var(--survol); }
@media (hover: hover) { .com-carte-ligne:hover { background: var(--survol); } }
.com-carte-ligne-tete { grid-area: tete; display: flex; align-items: center; gap: 8px; min-width: 0; }
.com-carte-ligne-tete strong { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.com-carte-ligne-extrait { grid-area: extrait; font-size: 12.5px; color: var(--pale); min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.com-carte-ligne-delai { grid-area: delai; font-size: 12.5px; color: var(--discret); font-variant-numeric: tabular-nums; white-space: nowrap; }
.com-carte-ligne-statut { grid-area: delai; justify-self: end; }
.com-carte-ligne-chevron { grid-area: chevron; color: var(--pale); display: grid; place-items: center; }
.com-eclair-chiffres { font-size: 14px; }

/* ---- Ce qui marche ---- */

.com-cqm { display: grid; gap: 14px; }
.com-cqm-periode { max-width: 420px; }
.com-cqm-periode .piste { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.com-cqm-periode .piste > button { justify-content: center; }
.com-objectif-cadre { min-width: 0; overflow-x: auto; }
.com-objectif-tableau { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.com-objectif-tableau th, .com-objectif-tableau td { padding: 8px 10px; border-top: 1px solid var(--ligne); text-align: right; vertical-align: top; }
.com-objectif-tableau thead th { border-top: 0; padding-top: 0; font-weight: 400; }
.com-objectif-tableau th:first-child { width: 40%; padding-left: 0; text-align: left; font-weight: 400; color: var(--discret); }
.com-objectif-tableau td:last-child, .com-objectif-tableau thead th:last-child { padding-right: 0; }
.com-objectif-tableau thead strong { display: block; font-size: 13px; font-weight: 600; color: var(--texte); }
.com-objectif-sous { display: block; font-size: 12px; color: var(--pale); }
.com-non-mesure { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 600; color: var(--discret); text-wrap: pretty; }
.com-phrase-analyse { margin-top: 0; }
.com-realiste { margin: 0; }
.com-cqm-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 1040px) { .com-cqm-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.com-cqm-unite { margin-top: -6px; }
.com-poids-cadre { min-width: 0; overflow-x: auto; }
.com-poids-tableau { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; font-variant-numeric: tabular-nums; }
.com-poids-tableau th, .com-poids-tableau td { padding: 7px 6px; border-top: 1px solid var(--ligne); text-align: center; }
.com-poids-tableau thead th { border-top: 0; font-size: 12px; font-weight: 500; color: var(--pale); }
.com-poids-tableau th:first-child { width: 34%; padding-left: 0; text-align: left; font-weight: 400; color: var(--texte); overflow-wrap: anywhere; }
.com-poids-tableau td strong { font-weight: 600; }
.com-poids-tableau td small { display: block; font-size: 11px; color: var(--pale); }
.com-poids-vide { color: var(--ligne-survol); }
.com-poids-semaine { margin-top: -6px; }
.com-cqm-pied { display: grid; gap: 2px; }
.com-cqm-pied .aide { margin-top: 0; }

/* ---- Personnes: the vivier ---- */

.com-personnes-principal { display: grid; gap: 14px; align-content: start; min-width: 0; }
.com-personnes-filtres .piste > button { min-width: 64px; justify-content: center; }
.com-personne-vivier { font-size: 12px; color: var(--pale); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.com-replie { border: 1px solid var(--ligne-forte); border-radius: var(--rayon-16); background: var(--panneau); min-width: 0; }
.com-replie > summary { display: flex; align-items: center; gap: 2px; min-height: 48px; padding: 0 18px; cursor: pointer; font-size: 13px; font-weight: 600; list-style: none; border-radius: var(--rayon-16); }
.com-replie > summary::-webkit-details-marker { display: none; }
.com-replie > summary::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 1.5px solid var(--pale); border-bottom: 1.5px solid var(--pale); transform: rotate(45deg) translateY(-2px); transition: transform 150ms var(--ease-out); }
.com-replie[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.com-replie > summary:hover { background: var(--survol); }
.com-replie > summary:focus-visible { outline-offset: -2px; }
.com-replie > :not(summary) { margin: 0 18px 16px; }
.com-replie-chargement { padding: 12px 0; }

/* ---- Réglages: the windows of the chase, the vivier's queries, a refusal under its field ---- */

.com-erreur-champ:empty { display: none; }
.com-fenetres, .com-requetes { display: grid; gap: 10px; min-width: 0; }
.com-fenetre { display: grid; gap: 6px; min-width: 0; }
.com-fenetre-heures { display: grid; grid-template-columns: minmax(0, 132px) auto minmax(0, 132px) auto; justify-content: start; align-items: center; gap: 8px; font-size: 13px; color: var(--discret); }
.com-fenetre-heures input.champ { min-width: 0; width: 100%; padding-left: 10px; padding-right: 8px; }
.com-requete { display: grid; grid-template-columns: minmax(0, 360px) auto; justify-content: start; align-items: center; gap: 8px; }
.com-ajouter { justify-self: start; }
.com-avertissement { display: flex; align-items: flex-start; gap: 7px; padding: 8px 10px; border-radius: var(--rayon-7); border: 1px dashed var(--ligne-survol); font-size: 12.5px; line-height: 1.45; color: var(--texte); }
.com-avertissement .ic { margin-top: 2px; color: var(--discret); }

@media (max-width: 719.98px) {
  /* The page of a card: the title is the top bar's; the countdown and the mode stick under it. */
  .com-carte-page { gap: 12px; padding-bottom: 76px; }
  .com-carte-tete { top: calc(var(--h-tete-tel) + var(--sure-haut)); margin: -14px -12px 0; padding: 8px 12px 10px; }
  .com-carte-titre h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .com-rebours { font-size: 16px; }
  .com-carte-actions { position: fixed; left: 0; right: 0; bottom: calc(var(--h-onglets) + var(--sure-bas)); z-index: 35; padding: 8px max(12px, var(--sure-droite)) 8px max(12px, var(--sure-gauche)); }
  .com-carte-actions .btn { height: 48px; min-height: 48px; font-size: 15px; }
  .com-plus { min-height: 44px; }
  .com-conv-ligne .original, .com-carte-post .original { min-height: 44px; display: inline-flex; align-items: center; }
  .com-carte-post .com-auteur .original { margin-top: -10px; }
  .com-carte-ligne { grid-template-columns: minmax(0, 1fr) 16px; grid-template-areas: "tete chevron" "extrait chevron" "delai chevron"; min-height: 64px; }
  .com-carte-ligne-delai, .com-carte-ligne-statut { justify-self: start; }
  .com-objectif-tableau th, .com-objectif-tableau td { padding: 8px 6px; font-size: 12.5px; }
  .com-replie > summary { padding: 0 14px; }
  .com-replie > :not(summary) { margin: 0 14px 14px; }
  .com-fenetre-heures { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; }
  .com-requete { grid-template-columns: minmax(0, 1fr) auto; }
  .com-personnes-filtres { width: 100%; }
  .com-personnes-filtres .piste { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}