/* ═══════════════════════════════════════════════════════════════════════════
 * `hidden` DOIT gagner
 * ═══════════════════════════════════════════════════════════════════════════
 * [hidden]{display:none} vient de la feuille du NAVIGATEUR (user-agent), donc
 * n'importe quelle règle auteur qui pose un display la bat — .search-box a
 * display:flex, et la boîte de recherche restait donc visible malgré son
 * attribut hidden. Le fichier corrigeait ça au cas par cas : VINGT-SIX règles
 * `.x[hidden]{display:none}`, ajoutées une par une au fil des symptômes, pour
 * un seul problème global. Une seule suffit.
 * `!important` est l'idiome standard ici (normalize.css fait pareil) : `hidden`
 * est une affirmation sur l'existence de l'élément, pas une suggestion de mise
 * en page — rien ne doit pouvoir la contredire.
 * ------------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
 * Lien d'évitement (« skip link »)
 * ═══════════════════════════════════════════════════════════════════════════
 * Hors écran, mais FOCALISABLE : c'est toute la subtilité. `display:none` ou
 * `visibility:hidden` le retireraient de l'ordre de tabulation, donc du seul
 * public qui s'en sert. On le déplace donc, sans le cacher.
 * ------------------------------------------------------------------------- */
.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-white);
  color: var(--content-base);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

/* <main> reçoit tabindex="-1" pour que le focus l'y suive vraiment ; on ne veut
   pas pour autant lui dessiner un anneau quand on l'atteint par ce biais. */
.app-main:focus { outline: none; }

/* ═══════════════════════════════════════════════════════════════════════════
 * Mouvement réduit — UNE garde, pas vingt-et-une
 * ═══════════════════════════════════════════════════════════════════════════
 * Le fichier déclare 21 transitions/animations et n'en gardait qu'UNE (les
 * barres de densité de la page de réservation) ; le design system vendu n'en
 * garde aucune. `prefers-reduced-motion: reduce` n'est pas une préférence
 * esthétique : elle est réglée par des gens que le mouvement rend malades.
 *
 * 0.01ms plutôt que `none` : avec `animation: none`, une animation qui pose son
 * état final via animation-fill-mode ne l'applique jamais — l'élément resterait
 * figé dans son état de DÉPART (invisible, pour une entrée en fondu). Une durée
 * quasi nulle saute l'animation en conservant son résultat.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* SyncHire — app styles. Consumes the GetPro design system tokens. */

body {
  background: var(--color-neutral-50);
  color: var(--content-base);
  margin: 0;
}

/* Composer layout: two columns, step cards left, sticky summary right */
.composer {
  max-width: 1400px;
  margin: 0 auto;
  padding: 36px 40px 28px;
}

.composer__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-6);
}

/* Picker section */
.picker {
  margin-bottom: var(--space-8);
}

.picker__label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--content-neutral);
  margin: 0 0 var(--space-3);
}

/* The list becomes a bordered card */
.picker__list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--color-white);
  border: 1px solid var(--border-base);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Each row */
.picker__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-base);
}
.picker__row:last-child {
  border-bottom: none;
}
.picker__row:hover {
  background: var(--color-neutral-50);
}

.picker__name {
  font-weight: var(--font-weight-bold);
}

.picker__meta {
  color: var(--content-neutral);
  font-size: var(--text-sm);
}

/* Push the status chip to the far right of the row */
.picker__row .gp-tag {
  margin-left: auto;
}

.field {
  margin-bottom: var(--space-5);
}

.field__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--content-neutral);
  margin-bottom: var(--space-2);
}

.input,
select.input {
  height: var(--control-h-large);
}

.segmented {
  flex-wrap: wrap;
  display: inline-flex;
  background: var(--color-neutral-100);
  border-radius: var(--radius);
  padding: var(--space-0_5);
  gap: var(--space-0_5);
  /* L'ANCRE des .segmented__radio masquées (position:absolute) — cf. §7 et la
     page blanche du 2026-08-05. Sur le CONTENEUR : la radio est le FRÈRE de son
     label (.segmented__radio:checked + .segmented__option), et un élément ne
     peut pas être le bloc conteneur de son propre frère. */
  position: relative;
}

.segmented__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented__option {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  /* PAS --content-neutral (neutral-400) : sur la piste neutral-100 le
     contraste tombe à 2.3:1 et les options non choisies (« 45 min »,
     « On-site ») se lisent comme DÉSACTIVÉES. neutral-600 donne 6.9:1.
     C'est la pastille blanche + l'ombre qui portent la sélection, pas la
     couleur — donc l'état choisi reste évident. */
  color: var(--color-neutral-600);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.segmented__option:hover {
  color: var(--content-base);
}

.segmented__radio:checked + .segmented__option {
  background: var(--color-white);
  color: var(--content-base);
  box-shadow: var(--shadow-sm);
}

/* Le radio est masqué (opacity:0) : sans ça le focus clavier n'affiche RIEN.
   APRÈS la règle :checked exprès — même spécificité (deux pseudo-classes),
   donc c'est l'ordre qui tranche, et l'anneau doit gagner sur l'ombre. */
.segmented__radio:focus-visible + .segmented__option {
  box-shadow: var(--ring);
}

/* Variante NAVIGATION du segmented (.segmented--nav) : mêmes segments, mais
   l'état actif vient de l'URL — ce sont des <a>, pas des <label> pilotés par
   un radio. Les règles ci-dessus ne pouvaient donc PAS s'appliquer : elles
   descendent toutes de `.segmented__radio:checked +`, et il n'y a pas de
   radio. D'où ces deux lignes, et elles seules — tout le reste (piste, taille,
   couleur au repos, hover) est déjà porté par les classes partagées. */
.segmented--nav .segmented__option {
  text-decoration: none;
}

.segmented--nav .segmented__option.is-active {
  background: var(--color-white);
  color: var(--content-base);
  box-shadow: var(--shadow-sm);
}

/* L'anneau de focus est porté par `a:focus-visible` du design system, de
   spécificité (0,1,1) : la règle ci-dessus, en (0,3,0), le remplaçait par son
   ombre — l'option ACTIVE n'avait alors plus AUCUN indicateur de focus, alors
   que l'inactive en avait un. Au clavier, le contrôle semblait à moitié cassé.
   Même remède et même raison d'ordre que la variante radio plus haut : après,
   pour que l'anneau gagne sur l'ombre. Le `.itw-tabs__tab` actif avait la même
   faille (0,2,0), pré-existante — les deux contrôles étant désormais l'un au-
   dessus de l'autre, on ne pouvait pas n'en réparer qu'un. */
.segmented--nav .segmented__option.is-active:focus-visible,
.itw-tabs__tab.is-active:focus-visible {
  box-shadow: var(--ring);
}

.panel-note {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--border-base);
  border-radius: var(--radius);
  color: var(--content-neutral);
  font-size: var(--text-sm);
}

.slot-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.slot-row__date { max-width: 180px; }
.slot-row__time { max-width: 130px; }

.day-group { margin-bottom: var(--space-3); }

.day-group__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--content-neutral);
  margin-bottom: var(--space-1);
}

.day-group__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.chip__box {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.chip {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 150ms ease;
}

.chip:hover { border-color: var(--hover-primary); }

.chip__box:checked + .chip {
  background: var(--button-primary);
  border-color: var(--button-primary);
  color: var(--content-base-reversed);
}

/* Page head */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}
.page-head .composer__title { margin: 0; }

/* Interviews table */
.itw-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border: 1px solid var(--border-base);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: var(--text-sm);
}

.itw-table th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--content-neutral);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-base);
}

.itw-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-base);
}

.itw-table tbody tr:last-child td { border-bottom: none; }
.itw-table tbody tr:hover { background: var(--color-neutral-50); }

.itw-table__name { font-weight: var(--font-weight-bold); }
.itw-table__meta { color: var(--content-neutral); }

/* Status badges */
.status--created   { background: var(--color-neutral-100); color: var(--color-neutral-600); }
.status--shared    { background: var(--color-primary-100); color: var(--content-primary); }
.status--paused    { background: var(--color-neutral-100); color: var(--color-neutral-600); }
.status--booked    { background: var(--color-success-100); color: var(--color-success-700); }
.status--completed { background: var(--color-success-50);  color: var(--color-success-600); }
.status--cancelled { background: var(--color-danger-100);  color: var(--content-danger); }

.grant--pending   { background: var(--color-neutral-100); color: var(--color-neutral-600); }
.grant--invited   { background: var(--color-primary-100); color: var(--content-primary); }
.grant--connected { background: var(--color-success-100); color: var(--color-success-700); }
.grant--expired   { background: var(--color-danger-50); color: var(--color-danger-500); }

/* Google (later Microsoft) badge next to a Connected chip. */
.provider-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--color-neutral-200);
  margin-left: 7px;
  vertical-align: middle;
  flex: none;
}

.hm-directory__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
}

.hm-directory__email {
  color: var(--content-neutral);
  font-size: var(--text-sm);
}

/* ÉCRAN VIDE — un seul composant (voir shared/_empty_state).
   Remplace `.empty-state` (carte pleine, une ligne en --content-neutral) ET
   `.dir-empty` (la bonne version, qui servait de modèle). Le corps de texte
   passe en neutral-500 : --content-neutral vaut neutral-400, soit 2,34:1 sur
   blanc, sous le 4,5:1 que WCAG demande pour du texte courant. */
.blank {
  background: var(--color-white);
  border: 1px dashed var(--color-neutral-300);
  border-radius: 14px;
  padding: 56px 24px;
  text-align: center;
}
.blank__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-100);
  color: var(--color-primary-500);
}
.blank__title {
  font-size: 15px;
  font-weight: var(--font-weight-extrabold);
  margin-bottom: 4px;
}
.blank__body {
  font-size: 13px;
  color: var(--color-neutral-500);
  max-width: 46ch;
  margin: 0 auto;
}
/* La marge vit sur le conteneur d'action, pas sous le texte : sans action, la
   carte ne garde pas un blanc de 16px en bas. */
.blank__action { margin-top: 16px; }
.blank__action .index-head__new { display: inline-flex; }

/* Public booking page */
.booking {
  max-width: 520px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

.booking__card {
  background: var(--color-white);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.booking__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-extrabold);
  margin: 0 0 var(--space-1);
}

.booking__meta {
  color: var(--content-neutral);
  margin: 0 0 var(--space-5);
}

.booking__slot-confirmed {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--content-primary);
  margin: 0 0 var(--space-4);
}

.booking__note {
  color: var(--content-neutral);
  font-size: var(--text-sm);
  margin: 0;
}

.chip--lg {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-base);
}

.booking__submit {
  width: 100%;
  margin-top: var(--space-4);
}

/* Persistent nudge until the recruiter connects their Google account */
.connect-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-4) auto 0;
  max-width: 920px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
}

/* ---- Settings page: four grouped cards (stg-*) ---- */
.stg {
  max-width: 880px;
  margin: 0 auto;
  padding: 36px 32px 48px;
}

.stg__title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}

.stg__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stg__cards + form .stg__cards,
.stg__cards + .stg__cards,
form + .stg__cards { margin-top: 16px; }

/* Carte "Email templates" (hors du form réglages — formulaires imbriqués
   interdits) */
.stg-templates__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.stg-templates__hint {
  font-size: var(--text-xs);
  color: var(--content-neutral);
}


.stg-card {
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 22px 28px;
}


.stg-card__title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.stg-card__title--spaced { margin-bottom: 20px; }

.stg-micro {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-neutral-400);
  margin-bottom: 8px;
}


.stg-note {
  font-size: 13px;
  color: var(--color-neutral-500);
  margin: 0 0 12px;
}

.stg-errors {
  padding: 12px 16px;
  border: 1px solid var(--color-danger-100);
  border-radius: 9px;
  background: var(--color-danger-50);
  color: var(--color-danger-700);
  font-size: 13px;
  font-weight: 700;
}

/* Card 1 — account row */
.stg-account {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stg-account__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-100);
  color: var(--color-primary-500);
}

.stg-account__text {
  flex: 1;
  min-width: 0;
}

.stg-account__meta {
  font-size: 13px;
  color: var(--color-neutral-500);
  /* Wraps (no ellipsis): with two connect buttons in the row there is no
     longer enough width to keep the copy on one line. */
}

.stg-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--color-success-100);
  color: var(--color-success-700);
}

.stg-pill__dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--color-success-500);
}

/* Shared small buttons/links */
.stg-danger-link {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-neutral-400);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 7px;
}

.stg-danger-link:hover {
  color: var(--color-danger-500);
  background: var(--color-danger-50);
}

/* Card 2 — booking-link hero */



/* Switch (checkbox stylée) — la piste suit l'état du input caché juste avant */
.stg-switch__box {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.stg-switch {
  display: inline-flex;
  align-items: center;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  padding: 2px;
  background: var(--color-neutral-300);
  transition: background 150ms ease;
  flex: none;
}


.stg-switch__knob {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: transform 150ms ease;
}

.stg-switch__box:checked + .stg-switch {
  background: var(--color-success-500);
}

.stg-switch__box:checked + .stg-switch .stg-switch__knob {
  transform: translateX(16px);
}

.stg-switchrow {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  /* L'ANCRE de la .stg-switch__box masquée qu'elle contient (cf. §7). Ici le
     label EST le conteneur — l'input est son enfant —, donc l'ancre tient sur
     lui, contrairement à .segmented. */
  position: relative;
}

.stg-switchrow__label {
  font-size: 13px;
  font-weight: 700;
}

/* `.stg-seg*` (l'autre famille de contrôles segmentés) a été SUPPRIMÉE le
   2026-08-10, son dernier client — le buffer de « Meeting defaults » — étant
   passé à `.segmented`. Deux familles cohabitaient dans la MÊME carte depuis
   l'arrivée du contrôle du téléphone : piste, padding et ancrage de radio
   différents, pour un contrôle que l'œil lit comme identique.
   Le savoir qui vivait ici n'est pas perdu : le commentaire de `.segmented`
   (« L'ANCRE des .segmented__radio masquées ») documente le même piège de la
   page blanche du 2026-08-05, et `hidden_input_anchor_test` le tient.
   Supprimé en LISANT les règles, jamais par regex : ces cinq-là étaient
   autonomes, mais une expression ancrée sur un sélecteur d'une LISTE emporte le
   corps que les autres partagent — c'est ainsi que tous les interrupteurs de
   Settings se sont affichés « off » le 2026-07-30, suite verte comprise. */

/* Card 3 — scheduling rules */
.stg-group { display: flex; flex-direction: column; gap: 12px; }

.stg-group--ruled {
  /* Le border-top vient de la liste de sélecteurs partagée ci-dessous. */
  margin-top: 18px;
  padding-top: 18px;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* LE filet séparateur de groupe — une seule déclaration pour ses trois
   porteurs (/code-review 2026-08-11 : le trait vivait déjà en trois copies,
   et le commentaire de .stg-form-override interdisait précisément ça — « deux
   filets différents dans deux panneaux de la même app se remarquent »).
   L'espacement, lui, reste propre à chacun. */
.stg-group--ruled, .stg-form-stack--ruled, .stg-form-override {
  border-top: 1px solid var(--color-neutral-100);
}

/* Les « champs » du groupe Candidate booking form (audit externe L2/L5) : pile
   label / contrôle / note à 8px, filet entre les piles. `width: 100%` n'est
   pas décoratif : le parent .stg-group--ruled est un flex ROW qui enveloppe,
   et une pile sans largeur partagerait sa ligne avec la suivante —
   .stg-group__lead donne la même protection au titre et à la phrase
   d'ouverture du groupe, qui ne sont pas des piles. Les marges propres de
   .stg-micro/.stg-note sont neutralisées ici : c'est le `gap` qui rythme la
   pile, deux sources d'espacement finiraient par se contredire. */
.stg-form-stack { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.stg-form-stack--ruled { padding-top: 18px; }
.stg-form-stack > .stg-micro { margin-bottom: 0; }
.stg-form-stack .stg-note { margin: 0; }
.stg-group__lead { width: 100%; }

.stg-cluster {
  display: flex;
  align-items: flex-start;
  gap: 36px;
  flex-wrap: wrap;
}

.stg-cluster--wide { gap: 48px; }

.stg-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stg-inline__sep {
  font-size: 13px;
  color: var(--color-neutral-400);
}

.stg-select {
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--color-neutral-200);
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-900);
  background: var(--color-white);
  outline: none;
}

.stg-days { display: flex; gap: 6px; }

.stg-day__box {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.stg-day__pill {
  display: inline-block;
  width: 46px;
  padding: 8px 0;
  text-align: center;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  color: var(--color-neutral-500);
  cursor: pointer;
  transition: all 120ms ease;
}

.stg-day__box:checked + .stg-day__pill {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

/* Card 4 — signature (Trix restyle; trix.css reste vendored, on surcharge) */
.stg-editor {
  border: 1px solid var(--color-neutral-200);
  border-radius: 9px;
  overflow: hidden;
}

.stg-editor trix-toolbar,
.emodal__editor trix-toolbar {
  padding: 6px 8px;
  background: var(--color-neutral-50);
  border-bottom: 1px solid var(--color-neutral-100);
}

.stg-editor trix-toolbar .trix-button-group,
.emodal__editor trix-toolbar .trix-button-group {
  border: none;
  margin-bottom: 0;
}

.stg-editor trix-toolbar .trix-button,
.emodal__editor trix-toolbar .trix-button {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 6px;
}

.stg-editor trix-toolbar .trix-button:hover,
.emodal__editor trix-toolbar .trix-button:hover {
  background: var(--color-neutral-100);
}

/* Le spec de la modale ne garde que gras, italique, lien et liste à puces —
   les autres boutons Trix (titre, citation, code…) n'ont pas leur place
   dans un email de recrutement. */
.emodal__editor trix-toolbar .trix-button--icon-strike,
.emodal__editor trix-toolbar .trix-button--icon-number-list,
.emodal__editor trix-toolbar .trix-button--icon-heading-1,
.emodal__editor trix-toolbar .trix-button--icon-quote,
.emodal__editor trix-toolbar .trix-button--icon-code,
.emodal__editor trix-toolbar .trix-button--icon-decrease-nesting-level,
.emodal__editor trix-toolbar .trix-button--icon-increase-nesting-level,
.emodal__editor trix-toolbar .trix-button-group--history-tools,
/* Éditeurs des réglages (signature, templates) : set un peu plus riche —
   gras, italique, barré, lien, listes — mais mêmes exclusions. */
.stg-editor trix-toolbar .trix-button--icon-heading-1,
.stg-editor trix-toolbar .trix-button--icon-quote,
.stg-editor trix-toolbar .trix-button--icon-code,
.stg-editor trix-toolbar .trix-button--icon-decrease-nesting-level,
.stg-editor trix-toolbar .trix-button--icon-increase-nesting-level,
.stg-editor trix-toolbar .trix-button-group--history-tools {
  display: none;
}

.stg-editor trix-editor {
  min-height: 76px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.45;
  border: none;
  outline: none;
  background: var(--color-white);
}

.stg-save {
  display: flex;
  justify-content: flex-end;
}

/* ---- Email composer modal (emodal) — over the interview show page ---- */
/* .modal.emodal (deux classes) : sans ça, le width:420px du .modal générique,
   défini plus bas dans le fichier, gagnerait à spécificité égale. */
.modal.emodal {
  width: 640px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
}

.emodal__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-neutral-100);
}

.emodal__title {
  font-size: 16px;
  font-weight: 800;
  flex: 1;
}

.emodal__select {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--color-neutral-200);
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-900);
  background: var(--color-white);
  outline: none;
}

.emodal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.emodal__note {
  font-size: 13px;
  color: var(--color-neutral-500);
  margin: 0;
}

.emodal__envelope {
  border: 1px solid var(--color-neutral-200);
  border-radius: 9px;
  overflow: hidden;
  margin-bottom: 14px;
}

.emodal__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--color-neutral-100);
}

.emodal__row--subject {
  padding: 4px 14px;
  border-bottom: none;
}

/* Comme --subject (input inline, padding réduit) mais GARDE le séparateur —
   pour une rangée qui n'est pas la dernière (Name au-dessus de Subject). */
.emodal__row--field { padding: 4px 14px; }

/* La modale template met tout dans UN form : il doit reproduire le rythme
   vertical que .emodal__body (gap 14px) donne aux blocs frères ailleurs. */
.emodal__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.emodal__form .emodal__envelope { margin-bottom: 0; }

.emodal__row-label {
  flex: 0 0 56px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-neutral-400);
}

.emodal__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 11px 3px 4px;
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: 999px;
  min-width: 0;
}

.emodal__chip-avatar {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
}

.emodal__chip-name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.emodal__chip-email {
  font-size: 12px;
  color: var(--color-neutral-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emodal__from { font-size: 13px; color: var(--color-primary-900); }
.emodal__from-note { font-size: 12px; color: var(--color-neutral-400); }

.emodal__subject {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-900);
  outline: none;
  background: transparent;
}

.emodal__editor {
  border: 1px solid var(--color-neutral-200);
  border-radius: 9px;
  overflow: hidden;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.emodal__editor:focus-within {
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

.emodal__editor trix-editor {
  min-height: 200px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-primary-900);
  border: none;
  outline: none;
  background: var(--color-white);
}

.emodal__vars {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: -4px;
}

.emodal__vars-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-neutral-400);
  margin-right: 4px;
}

.emodal__var {
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--color-neutral-100);
  color: var(--color-neutral-600);
  cursor: pointer;
}

.emodal__var:hover {
  background: var(--color-primary-100);
  color: var(--color-primary-500);
}

.emodal__save {
  border: 1px dashed var(--color-neutral-300);
  border-radius: 9px;
  padding: 12px;
}

.emodal__save-row {
  display: flex;
  gap: 8px;
}

.emodal__save-name {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--color-neutral-200);
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.emodal__save-name:focus {
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

.emodal__save-btn {
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--color-neutral-200);
  border-radius: 9px;
  background: var(--color-white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-500);
  cursor: pointer;
}

.emodal__save-btn:hover { border-color: var(--color-primary-400); }

.emodal__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--color-neutral-100);
  background: var(--color-neutral-50);
}

.emodal__savelink {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-500);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 7px;
}

.emodal__savelink:hover { background: var(--color-primary-50); }

.emodal__spacer { flex: 1; }

.emodal__cancel {
  height: 40px;
  padding: 0 15px;
  border: 1px solid var(--color-neutral-200);
  border-radius: 9px;
  background: var(--color-white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-neutral-600);
  cursor: pointer;
}

.emodal__cancel:hover { border-color: var(--color-neutral-400); }

.emodal__send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border: none;
  border-radius: 9px;
  background: var(--color-primary-500);
  color: var(--color-white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.emodal__send:hover { background: var(--color-primary-400); }

/* ---- Public /meet page: centered three-step booking card ---- */
.meet {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px 60px;
}

.meet__card {
  width: 100%;
  max-width: 640px;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.meet__head {
  padding: 32px 36px 8px;
  text-align: center;
}

.meet__avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
}

.meet__title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.meet__note {
  font-size: 13.5px;
  color: var(--color-neutral-500);
  margin: 0;
}

/* Actions sous la carte "You're booked" : Reschedule + Cancel, discrètes,
   côte à côte. Boutons/liens sans fond, soulignés au survol — présents sans
   crier. */
.meet__actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 18px;
}

.meet__reschedule,
.meet__cancel {
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  color: var(--color-neutral-500);
  cursor: pointer;
  text-decoration: none;
}

.meet__reschedule:hover {
  color: var(--color-primary-500);
  text-decoration: underline;
}

.meet__cancel:hover {
  color: var(--color-danger-500);
  text-decoration: underline;
}

/* Envoi d'invitation HM au répertoire : la case "partager avec l'équipe"
   (accès org-wide) empilée au-dessus du bouton Send, discrète. */
.hm-send {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.hm-send__share {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--color-neutral-500);
  cursor: pointer;
  white-space: nowrap;
}

/* Case "partager avec l'équipe" dans le bloc d'invitation du composeur. */
.hm-invite__share {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-neutral-600);
  cursor: pointer;
}

/* Le fait déjà acquis, à la place de la case : MÊME classe de base, pour
   hériter des trois placements de grille (ligne 2, puis pleine largeur en
   étroit) — un nouveau nom aurait obligé à les recopier, et à les garder en
   phase. Seul le curseur change : plus rien à cliquer. */
.hm-invite__share--set { cursor: default; font-weight: var(--font-weight-bold); }

/* Repli "garder mon créneau" sous le sélecteur de reprogrammation. */
.meet__back {
  margin-top: 18px;
  text-align: center;
}

.meet__back-link {
  font-size: 13px;
  color: var(--color-neutral-500);
  text-decoration: none;
}

.meet__back-link:hover {
  text-decoration: underline;
}

/* Bouton "Cancel interview" côté recruteur : espace au-dessus, dans la carte. */
.times-card__cancel {
  margin-top: 14px;
}

/* Fuseau figé sous la carte "You're booked" (fuseau stocké à la réservation). */
.meet__done-tz {
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--color-neutral-400);
}

/* Adresse d'un entretien sur place, sous l'heure de la carte bookée. */
.meet__done-where {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 13px; font-weight: var(--font-weight-semibold); color: var(--color-primary-900);
}
.meet__done-where svg { flex: none; color: var(--color-primary-500); }

/* Timezone bar — bandeau info + sélecteur de fuseau en tête des pages
   publiques de réservation. Volontairement calme (info, pas d'alerte) ;
   fonctionne sans JS (le bouton recharge la page avec ?tz=…). */
.timezone-bar {
  width: 100%;
  max-width: 640px;
  margin: 0 auto 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: 12px;
}

.timezone-bar__label {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
}

.timezone-bar__label strong {
  color: var(--color-neutral-800);
  font-weight: 700;
}

.timezone-bar__form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Étiquette du select accessible mais masquée visuellement (le bandeau
   annonce déjà le rôle du contrôle). */
.timezone-bar__form-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.timezone-bar__select {
  max-width: 220px;
  font-size: var(--text-sm);
  padding: 6px 10px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-neutral-700);
}

.timezone-bar__submit {
  font-size: var(--text-sm);
  padding: 6px 12px;
  border: 1px solid var(--color-primary-500);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-primary-500);
  cursor: pointer;
}

.timezone-bar__submit:hover {
  background: var(--color-primary-50);
}

.meet__body {
  padding: 24px 28px 0;
}

.meet__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-neutral-400);
  margin-bottom: 10px;
}

.meet__label--day { margin-top: 20px; }
.meet__label--time { margin-top: 18px; }

.meet__name-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.meet__input {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--color-neutral-200);
  border-radius: 9px;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-primary-900);
  background: var(--color-white);
  outline: none;
}

.meet__input:focus {
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

/* Questions du lien sur /meet : libellé VISIBLE au-dessus du champ (un
   placeholder disparaît dès la frappe — la question avec). */
.meet__question { margin-bottom: 10px; }
.meet__question-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-neutral-600);
  margin-bottom: 4px;
}

.meet__days {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.meet__arrow {
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-neutral-200);
  border-radius: 11px;
  background: var(--color-white);
  color: var(--color-primary-500);
  cursor: pointer;
}

.meet__arrow[disabled] {
  background: var(--color-neutral-50);
  border-color: transparent;
  color: var(--color-neutral-200);
  pointer-events: none;
}

.meet__days-pages {
  flex: 1;
  min-width: 0;
}

.meet__days-page {
  display: flex;
  gap: 6px;
}


.meet__day {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 0 8px;
  border: 1px solid var(--color-neutral-200);
  border-radius: 11px;
  background: var(--color-white);
  color: var(--color-primary-900);
  font-family: inherit;
  cursor: pointer;
  transition: all 120ms ease;
}

.meet__day[disabled] {
  background: var(--color-neutral-50);
  border-color: transparent;
  color: var(--color-neutral-300);
  cursor: default;
}

.meet__day--selected {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.meet__day-dow {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

.meet__day-num {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
}

.meet__day-sub {
  font-size: 10px;
  opacity: 0.65;
}

.meet__times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}


/* La radio reste dans le DOM (name/required intacts) mais invisible :
   le label stylé en pastille est la surface cliquable. */
.meet__time-box {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.meet__time {
  text-align: center;
  padding: 10px 0;
  border: 1px solid var(--color-neutral-200);
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 700;
  background: var(--color-white);
  color: var(--color-primary-900);
  cursor: pointer;
  transition: all 120ms ease;
}

.meet__time-box:checked + .meet__time {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.meet__foot {
  padding: 22px 28px 28px;
}

.meet__submit {
  width: 100%;
  height: 46px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  background: var(--color-primary-200);
  /* primary-100 on primary-200 was ~1.15:1 — the label was invisible until a
     time was picked. primary-600 on the same pale fill is ~6.5:1 (AA), and the
     button still reads as inert: the fill only turns solid brand blue, with a
     shadow, once --ready lands. */
  color: var(--color-primary-600);
  cursor: not-allowed;
  transition: all 120ms ease;
}

.meet__submit--ready {
  background: var(--color-primary-500);
  color: var(--color-white);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.meet__submit--ready:hover {
  background: var(--color-primary-400);
}

/* Confirmation ("You're booked") and edge states share the padded center */
.meet__done {
  padding: 48px 36px 44px;
  text-align: center;
}

.meet__done--slim {
  padding: 24px 36px 40px;
}

.meet__check {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-success-100);
}

/* Paused scheduling link: same circle as the success check, calm primary. */
.meet__pause {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-100);
}

/* Read-only promise under the public scheduling card. */
.meet__trust {
  margin-top: 16px;
  font-size: 12px;
  color: var(--color-neutral-400);
  text-align: center;
  text-wrap: pretty;
}

.meet__done-when {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.powered-by {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  color: var(--color-neutral-400);
  font-size: 12px;
  font-weight: 700;
}

.powered-by__logo {
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  width: 14px;
  height: 14px;
}

.powered-by__logo span { height: 48%; }
.powered-by__logo span:first-child { background: var(--color-neutral-400); border-radius: 999px 0 0 999px; }
.powered-by__logo span:last-child { background: var(--color-neutral-300); border-radius: 0 999px 999px 0; }

/* Interview show page: stepper, people & details, times offered, share panel */
.show-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 40px 28px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-400);
  margin-bottom: 14px;
}
.back-link:hover { color: var(--color-primary-500); }

.show-page__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}

.show-page__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.02em;
  margin: 0;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
}

/* Progress stepper */
.stepper-card { padding: 22px 32px; }
.stepper { display: flex; align-items: center; }
.stepper__step { display: flex; align-items: center; gap: 10px; flex: none; }
.stepper__line { flex: 1; height: 2px; background: var(--color-neutral-200); margin: 0 14px; }
.stepper__dot {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-extrabold);
  flex: none;
}
.stepper__dot--done { background: var(--color-success-500); color: var(--color-white); }
.stepper__dot--current { background: var(--color-primary-100); color: var(--color-primary-600); box-shadow: 0 0 0 4px var(--color-primary-50); }
.stepper__dot--upcoming { background: var(--color-neutral-100); color: var(--color-neutral-400); }
.stepper__label { font-size: 13px; font-weight: var(--font-weight-bold); }
.stepper__label--current { color: var(--color-primary-600); }
.stepper__label--upcoming { color: var(--color-neutral-400); }

/* People & details */
.people-card { padding: var(--space-6) var(--space-8); }
.people-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px 24px;
  align-items: center;
}
.person-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }
.person-cell__avatar { width: 38px; height: 38px; font-size: 13px; border-radius: var(--radius-full); }
.person-cell__text { min-width: 0; }
.person-cell__name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.person-cell__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--color-neutral-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.person-cell__dot { width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--color-success-500); flex: none; }
.person-cell__grant { color: var(--color-success-700); font-weight: var(--font-weight-bold); }
.person-cell__grant--invited { color: var(--color-primary-500); }
.person-cell__grant--expired { color: var(--color-danger-500); }

/* Show page: paused-link banner (calm, guidance-toned). */
.paused-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
}
.paused-banner__glyph {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-neutral-100);
  color: var(--color-neutral-500);
}
.paused-banner__text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--color-neutral-600);
  text-wrap: pretty;
}
.paused-banner__text b { color: var(--color-primary-900); }

/* Share panel (copy-first). */
.share-link--solo { margin-bottom: 10px; }
.share-panel__copy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.share-panel__hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--color-neutral-400);
  text-align: center;
  text-wrap: pretty;
}
.share-panel__preview {
  display: flex;
  justify-content: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-neutral-100);
  font-size: 13px;
  font-weight: 700;
}

/* Links list: per-row copy action. */
.itw-row__action { display: flex; justify-content: flex-end; }
.itw-row__copy {
  border: none;
  background: none;
  padding: 6px 10px;
  border-radius: 7px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-primary-500);
  cursor: pointer;
  white-space: nowrap;
}
.itw-row__copy:hover { background: var(--color-primary-50); }
.people-grid__facts {
  grid-column: 1 / -1;
  display: flex;
  /* wrap dès la base, plus seulement en étroit : les réponses aux questions
     du lien peuvent ajouter jusqu'à 10 cellules — une seule rangée débordait
     de la carte (audit 2026-08-04). */
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 36px;
  padding-top: 18px;
  border-top: 1px solid var(--color-neutral-100);
}
.people-grid__facts .field__label { margin-bottom: 3px; }
/* overflow-wrap + min-width : une URL LinkedIn de 300 caractères n'a aucun
   point de césure naturel et forçait sa cellule flex à sa largeur. */
.people-grid__value {
  font-size: var(--text-sm); font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere; min-width: 0;
}

/* Times offered */
.times-card { padding: var(--space-6) var(--space-8) 26px; }
.times-card__head { margin-bottom: var(--space-4); }
.times-card__tz { font-weight: var(--font-weight-normal); text-transform: none; letter-spacing: 0; }
.times-card__note { margin: 0; font-size: 13px; color: var(--color-neutral-500); text-wrap: pretty; }
/* Même rôle, autre carte : .slots-card__note n'avait AUCUNE règle — ces notes
   (« Pick a hiring manager… », « No free times… », « Reading the calendar… »,
   injectée par propose_slots_controller) sortaient donc en 16px encre quasi
   noire, plus fortes que le titre 12px de leur propre carte. */
.slots-card__note { margin: 0; font-size: 13px; color: var(--color-neutral-500); text-wrap: pretty; }
/* GROUPEMENT PAR PROXIMITÉ. L'espace entre deux jours doit être nettement plus
   grand que celui entre deux lignes de puces d'un même jour, sinon l'œil ne
   sait plus à qui appartient une ligne enroulée. C'était le cas : 7px entre les
   lignes de puces contre 10px (aperçu) ou 12px (cette liste) entre les jours —
   3 à 5px d'écart, indiscernables. Un 14e créneau qui débordait ("17:30")
   flottait donc comme une rangée à lui seul, sans étiquette, et en fin de carte
   se lisait comme un trou. 6px dedans contre 16px dehors : le rapport de 2,7
   rend l'appartenance évidente. */
.times-list { display: flex; flex-direction: column; gap: var(--space-4); }
.times-day { display: flex; align-items: baseline; gap: 14px; }
.times-day__label {
  flex: 0 0 74px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-neutral-500);
}
.times-day__chips { display: flex; flex-wrap: wrap; gap: 6px 7px; }
/* Ces pastilles sont TOUJOURS des <span> en lecture seule (aperçu du composeur,
   miroir de la page du lien, créneaux legacy) — le candidat choisit, jamais le
   recruteur. En pilule bleue bordée elles copiaient .btn-soft-primary : l'objet
   le plus « cliquable » de la page ne faisait rien au clic. Aplaties, elles se
   lisent comme des DONNÉES. Le bleu reste la couleur de l'interactif.
   neutral-700 sur neutral-100 = ~9:1 : plat, pas éteint (l'inverse du piège
   des segments, qui étaient en neutral-400 à 2.3:1).
   tabular-nums : les heures s'alignent en colonnes au lieu de danser. */
.times-chip {
  padding: 4px 10px;
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
  color: var(--color-neutral-700);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
/* La SEULE pastille colorée : elle porte un état réel (l'heure retenue). */
.times-chip--booked { background: var(--color-success-100); color: var(--color-success-700); }
.times-chip--expired { text-decoration: line-through; opacity: 0.5; }
.times-list__more {
  align-self: flex-start;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-500);
  cursor: pointer;
  padding: 4px 0;
}
.times-list__more:hover { color: var(--color-primary-400); }

/* Share panel (reuses the .summary shell) */
.summary__submit { gap: 8px; text-align: center; }
a.summary__submit { text-decoration: none; }
a.summary__submit:hover { color: var(--color-white); text-decoration: none; }
.share-panel__link-label { margin: 18px 0 7px; }
.share-link { display: flex; gap: 8px; }
.share-link__url {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--color-neutral-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-link__copy {
  flex: none;
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--color-neutral-200);
  border-radius: 9px;
  background: var(--color-white);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-500);
  cursor: pointer;
}
.share-link__copy:hover { border-color: var(--color-primary-400); }

/* Interviews index: page head, filter pills, card table */
.index-page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 24px 24px;
}

.index-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 22px;
}
.index-head__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.index-head__count { margin: 0; color: var(--color-neutral-500); font-size: var(--text-sm); }
.index-head__actions { display: flex; align-items: center; gap: 10px; }

.search-box {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 38px;
  padding: 0 12px;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
  color: var(--color-neutral-400);
  cursor: text;
}
.search-box:focus-within { border-color: var(--color-primary-400); box-shadow: 0 0 0 3px var(--color-primary-100); }
.search-box input {
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--content-base);
  width: 170px;
}
.search-box input::placeholder { color: var(--color-neutral-400); }

.index-head__new {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 15px;
  border-radius: 9px;
  background: var(--color-primary-800);
  color: var(--color-white);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.index-head__new:hover { background: var(--color-primary-600); color: var(--color-white); }

.itw-tabs { display: inline-flex; background: var(--color-neutral-100);
  border-radius: var(--radius); padding: 4px; gap: 4px; margin-bottom: var(--space-2); }
/* PAS --content-neutral (neutral-400) : sur la piste claire de .itw-tabs
   l'onglet inactif tombait à ~2.3:1 et « Booking links » se lisait comme
   DÉSACTIVÉ. Même correction que .segmented__option — plat ≠ éteint. */
.itw-tabs__tab { padding: 6px 14px; border-radius: var(--radius); font-size: var(--text-sm);
  font-weight: 700; color: var(--color-neutral-600); text-decoration: none; }
.itw-tabs__tab:hover { color: var(--content-base); }
.itw-tabs__tab.is-active { background: var(--color-white); color: var(--content-base);
  box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / .06)); }
.itw-tabs__hint { margin: 0 0 18px; color: var(--color-neutral-500); font-size: var(--text-sm); }

/* La rangée sous les onglets : période (à venir / passé) puis, quand elles
   existent, les pastilles de statut. `wrap` parce qu'en dessous de ~560px les
   deux contrôles ne tiennent plus côte à côte — la période passe alors seule
   au-dessus, ce qui garde la hiérarchie large → étroite. */
.itw-subbar { display: flex; align-items: center; gap: var(--space-4);
  flex-wrap: wrap; margin-bottom: 18px; }
/* Les pastilles portent leur propre marge basse pour l'usage hors subbar ;
   ici c'est la subbar qui la porte, sinon les deux s'additionnent. */
.itw-subbar .filter-pills { margin-bottom: 0; }

.filter-pills { display: flex; gap: var(--space-2); margin-bottom: 18px; }
.filter-pill {
  padding: 7px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  color: var(--color-neutral-600);
  cursor: pointer;
}
.filter-pill--active {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
  color: var(--color-white);
}

.itw-card {
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.itw-card__header,
.itw-row {
  display: grid;
  grid-template-columns: 2fr 1.6fr 0.9fr 1.3fr 1fr;
  gap: var(--space-4);
  align-items: center;
  padding: 14px 22px;
}
.itw-card__header { background: var(--color-neutral-50); border-bottom: 1px solid var(--color-neutral-100); }
.itw-card__header .field__label { margin-bottom: 0; }
.itw-row {
  padding: 15px 22px;
  border-bottom: 1px solid var(--color-neutral-100);
  text-decoration: none;
  color: var(--content-base);
  transition: background 120ms ease;
}
.itw-row:last-of-type { border-bottom: none; }
.itw-row:hover { background: var(--color-neutral-50); color: var(--content-base); }
.itw-row__candidate { display: flex; align-items: center; gap: 11px; min-width: 0; }
.itw-row__avatar { width: 34px; height: 34px; font-size: var(--text-xs); border-radius: var(--radius-full); }
/* Re-assert round: the later generic `.avatar { border-radius: var(--radius) }`
   (equal specificity, wins by order) was squaring row avatars. Compound
   selector outranks it. Affects HM + candidates + interviews lists. */
.avatar.itw-row__avatar { border-radius: var(--radius-full); }
.itw-row__candidate-text { min-width: 0; }
.itw-row__name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.itw-row__email {
  font-size: var(--text-xs);
  color: var(--color-neutral-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.itw-row__hm { display: flex; align-items: center; gap: 9px; min-width: 0; }
.itw-row__hm-avatar { width: 26px; height: 26px; font-size: var(--text-2xs); border-radius: var(--radius-full); }
.itw-row__hm-text { min-width: 0; }
.itw-row__hm-name { font-size: 13.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.itw-row__date { font-size: 13px; color: var(--color-neutral-500); }
.itw-row__dash { color: var(--color-neutral-300); }
.itw-card__nomatch { margin: 0; padding: var(--space-6); text-align: center; color: var(--content-neutral); font-size: var(--text-sm); }

/* Directory pages (candidates / hiring managers) */
.dir-row {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  padding: 15px 22px;
  border-bottom: 1px solid var(--color-neutral-100);
  transition: background 120ms ease;
}
.dir-row:last-of-type { border-bottom: none; }
.dir-row:hover { background: var(--color-neutral-50); }
.dir-row--cand { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) 60px; }

/* "Added by <recruiter>" cell shared by the candidate + HM directory rows. */
.dir-added-by {
  align-self: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
}
.dir-row--hm { grid-template-columns: 2.2fr 1.2fr 256px; }
.itw-card__header.dir-row--cand,
.itw-card__header.dir-row--hm { padding: 14px 22px; }

.grant-pill { gap: 6px; }
.grant-pill__dot { width: 5px; height: 5px; border-radius: var(--radius-full); background: currentColor; opacity: .8; flex: none; }

/* Fixed-width action grid so buttons align across rows */
.row-actions { display: grid; justify-content: flex-end; align-items: center; gap: 6px; }
.row-actions--cand { grid-template-columns: 30px; }
/* Send/Resend · Get link (label grows to "Copy invite link") · pencil */
.row-actions--hm { grid-template-columns: 180px 124px 30px; }
.row-actions__slot { display: flex; justify-content: center; }
/* All action forms flatten into the grid EXCEPT .hm-send, which owns its own
   flex layout (the "Share with my team" checkbox + Send). Without :not(),
   display:contents overrode .hm-send and glued the checkbox to the button. */
.row-actions__slot form:not(.hm-send) { display: contents; }

.action-chip {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: var(--font-weight-bold);
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.action-chip--send { color: var(--color-primary-500); background: var(--color-primary-100); }
.action-chip--send:hover { background: var(--color-primary-200); color: var(--color-primary-500); }
.action-chip--resend { color: var(--color-neutral-500); }
.action-chip--resend:hover { background: var(--color-neutral-100); color: var(--color-neutral-500); }
.action-chip--revoke { color: var(--color-neutral-400); }
.action-chip--revoke:hover { color: var(--color-danger-500); background: var(--color-danger-50); }
.action-chip--link { color: var(--color-neutral-500); }
.action-chip--link:hover { background: var(--color-neutral-100); color: var(--color-primary-500); }

.icon-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: var(--color-neutral-400);
}
.icon-btn:hover { color: var(--color-primary-500); background: var(--color-primary-50); }

.edit-field { flex: 1; min-width: 0; }

.chip--static { cursor: default; }
.chip--booked  { background: var(--color-success-100); border-color: var(--color-success-400); color: var(--color-success-700); }
.chip--expired { text-decoration: line-through; opacity: 0.5; }

/* Flash messages */
.flash {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 640px;
  margin: var(--space-4) auto 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--border-neutral);
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
}
.flash__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--radius-full);
}
.flash__text {
  color: var(--content-base);
  font-weight: var(--font-weight-semibold);
}

.flash--notice { border-color: var(--color-success-200); }
.flash--notice .flash__icon { background: var(--color-success-100); color: var(--color-success-700); }

.flash--alert { border-color: var(--color-danger-200); }
.flash--alert .flash__icon { background: var(--color-danger-100); color: var(--color-danger-700); }

.page-head__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hm-grants { display: flex; flex-direction: column; gap: var(--space-2); }
.hm-grants__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--border-base);
  border-radius: var(--radius);
}
.hm-grants__name { font-weight: var(--font-weight-bold); font-size: var(--text-sm); }
.hm-grants__row .btn { margin-left: auto; }

.hm-connect__reassure {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--background-success);
  border-radius: var(--radius);
}
.hm-connect__reassure p {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-success-700);
}
.hm-connect__reassure p:last-child { margin-bottom: 0; }

.combobox { position: relative; }

.combobox__input { width: 100%; }

/* The panel is anchored to the picker but NOT chained to its width. In the
   composer each picker column is only ~260px wide; once the avatar (31px) and
   the status chip (~90px for "Not connected") took their share, the name and
   email were left with ~90px and every real name truncated after 12 characters
   ("Bouchachia Z…", "zaia.b@outlook.co…"). The panel now STARTS at the input's
   width and grows to fit its content, capped so it can never leave the page. */
.combobox__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  min-width: 100%;
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  background: var(--color-white);
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-height: 340px;
  overflow-y: auto;
}

/* While the inline create form is open you are no longer picking from the
   list: hiding it stops the form being squeezed into a one-row scroll box. */
.combobox__panel:has(.combobox__create-form:not([hidden])) .combobox__list {
  display: none;
}

.combobox__list {
  list-style: none;
  margin: 0;
  padding: var(--space-1);
}

/* One option = avatar + (name over email) + status chip, on a single row. */
.combobox__option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  cursor: pointer;
}

.combobox__option:hover {
  background: var(--hover-neutral-light);
}

.combobox__option-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.combobox__option-name { font-weight: var(--font-weight-bold); font-size: var(--text-sm); }
.combobox__option-meta { font-size: var(--text-xs); color: var(--content-neutral); }

/* Long names/emails truncate instead of wrapping or painting under the chip. */
.combobox__option-name,
.combobox__option-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.combobox__option-chip { margin-left: auto; flex: none; }

/* Group headers of the composer HM combobox (Colleagues / Hiring managers) —
   rendered only when at least one colleague exists; combobox_controller's
   filter() hides a header whose whole group filtered down to empty. */
.combobox__group {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--content-neutral);
}

/* « Colleague » tag on a colleague option: sits before the grant chip, which
   then gives up its margin-left:auto to this tag. */
.combobox__option-colleague { margin-left: auto; flex: none; }
.combobox__option-colleague + .combobox__option-chip { margin-left: var(--space-2); }

/* Same taxonomy in the "New HM link" picker (reusable-links page): group
   headers + a right-aligned Colleague tag, visually twinned with the
   composer combobox above. */
.rl-hm-menu__group {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--content-neutral);
}
.rl-hm-menu__colltag { margin-left: auto; flex: none; }
/* La pastille de grant (étape 4b) pousse à droite comme le tag Colleague — mais
   les DEUX peuvent coexister sur une rangée de collègue. Deux `margin-left:auto`
   se battraient pour le même espace : seul le PREMIER en profite, le second se
   colle à lui. C'est exactement ce qu'on veut ici (le groupe reste à droite),
   d'où le petit écart explicite plutôt qu'un second auto. */
/* Silhouette `:box` (fusion 4d) — le composeur garde sa boîte de 48px, seule
   la mécanique dessous change. `.rl-hm-picker` est un <span> inline : sans
   `display:block` + `width:100%` la boîte se rétracterait sur son contenu au
   lieu de tenir la colonne, ce qui est exactement le rétrécissement que cette
   variante existe pour éviter. `position: relative` reste porté par
   `.rl-hm-picker` (le menu est absolu), donc rien à redéclarer. */
/* `.rl-hm-picker.rl-hm-picker--box` et non `.rl-hm-picker--box` seul : la règle
   de base (0,1,0) est déclarée PLUS BAS dans le fichier, donc à spécificité
   égale c'était elle qui gagnait et le `display:block` ne s'appliquait pas —
   une déclaration que le commit annonçait comme indispensable et qui ne faisait
   rien (audit 2026-08-07). Doubler la classe monte à (0,2,0) et tranche sans
   dépendre de l'ordre du fichier. */
.rl-hm-picker.rl-hm-picker--box { display: block; width: 100%; }
.rl-hm-picker--box .picker-box { width: 100%; }
/* Le menu du composeur doit pouvoir DÉBORDER de sa colonne (~260px) : les
   rangées portent avatar + nom + e-mail + pastilles, et l'e-mail est justement
   le discriminant de deux homonymes — le tronquer annule ce qu'on vient
   d'ajouter. `.combobox__panel` portait cette règle avec le même commentaire ;
   elle est morte avec lui, et la boîte l'a héritée sans le savoir. */
.rl-hm-picker--box .rl-hm-menu { width: max-content; max-width: min(420px, calc(100vw - 32px)); }
/* Ouvrir « créer un hiring manager » MASQUE la liste : sinon le formulaire
   s'ouvre sous 340px de liste défilante et sort du bas de l'écran. La règle
   existait sur `.combobox__panel:has(.combobox__create-form:not([hidden]))` et
   est devenue orpheline à la bascule — même intention, nouveaux noms. */
.rl-hm-menu:has(.combobox__create-form:not([hidden])) .rl-hm-menu__list { display: none; }
/* Le libellé AU REPOS n'est pas un nom choisi : il était rendu par l'attribut
   `placeholder` d'un <input> (gris, poids normal) et le devient à nouveau ici.
   Sans cette règle « Search a hiring manager… » s'affichait en gras encre,
   exactement comme un HM sélectionné — la boîte paraissait remplie alors
   qu'elle est vide. */
.rl-hm-picker--box .picker-box:not(.picker-box--filled) .picker-box__name {
  font-weight: var(--font-weight-normal); color: var(--color-neutral-500);
}
/* Le nom reprend la typo que `.picker-box .combobox__input` portait quand le
   contrôle était un <input> : la boîte affiche maintenant du TEXTE, plus un
   champ, donc la règle doit exister pour l'élément qui l'a remplacé — sinon le
   nom hérite du 12.5px gras de la pastille. */
.picker-box__name {
  display: block; font-size: var(--text-sm); line-height: 1.15;
  color: var(--content-base); font-weight: var(--font-weight-bold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rl-hm-menu__chip { margin-left: auto; flex: none; }
.rl-hm-menu__colltag + .rl-hm-menu__chip { margin-left: 6px; }

/* Bloc « connectez l'agenda » — DÉFINITION UNIQUE : le fichier en portait deux
   (celle-ci + une copie plus bas qui gagnait sur background/border/radius),
   donc éditer ici semblait sans effet. Les valeurs gagnantes sont reprises.

   GRILLE, plus flex : en flex, les quatre enfants (icône, texte, case
   « Share with my team », actions) se partageaient une seule ligne et la case
   — sans base de largeur — s'écrasait sur QUATRE lignes. Placement explicite :
   ligne 1 = icône | texte | actions, ligne 2 = la case sous le texte. */
.hm-invite {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-3);
  row-gap: 8px;
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  border-radius: 10px;
}


.hm-invite__icon { grid-column: 1; grid-row: 1; }

.hm-invite__text {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--text-sm);
  color: var(--content-base);
}

/* Placements de la ligne 2 : la case à cocher passe SOUS le texte, pleine
   largeur restante, au lieu de se battre pour la place sur la ligne 1. */
.hm-invite__actions { grid-column: 3; grid-row: 1; }
.hm-invite__share { grid-column: 2 / -1; grid-row: 2; margin-top: 0; }

/* Création inline dans le combobox — sticky : reste visible en bas du panneau
   pendant que la liste défile derrière (fond opaque obligatoire ; l'ombre
   vers le haut signale que les options passent dessous, pas "coupées"). */
.combobox__create {
  position: sticky;
  bottom: 0;
  background: var(--color-white);
  border-top: 1px solid var(--border-base);
  padding: var(--space-2);
  box-shadow: 0 -8px 10px -8px rgb(0 11 38 / 0.18);
}


.combobox__create-toggle {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius);
  color: var(--content-primary);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  text-align: left;
  cursor: pointer;
}

.combobox__create-toggle:hover {
  background: var(--hover-primary-light);
}

.combobox__create-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
}


.combobox__create-row {
  display: flex;
  gap: var(--space-2);
}

.combobox__create-error {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--content-danger);
}


/* Title + hint, like the invite popover: the share promise must be spelled out
   wherever the checkbox appears, never just labelled "Share with my team". */
.combobox__create-share {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--color-neutral-400);
  cursor: pointer;
}

.combobox__create-share .gp-checkbox { margin-top: 2px; flex: none; }
.combobox__create-share-title { display: block; color: var(--content-base); font-weight: var(--font-weight-bold); }
.combobox__create-share-hint { display: block; }

.combobox__create-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* The long "Create and request calendar access" label must never force the
   button wider than the popover: stretch, shrink, and wrap the text. */
.combobox__create-actions .btn {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
}

.nl-slots {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Récap de livraison enrichi */







.booking__video {
  margin: var(--space-5) 0;
}

.booking__video .btn {
  margin-top: var(--space-2);
}

.draft-card {
  background: var(--color-white);
  border: 1px solid var(--border-base);
  border-radius: var(--radius);
  padding: var(--space-6);
  max-width: 700px;
}

.draft-card__meta {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-base);
}

.draft-card__recipient {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--content-base);
}

.draft-card__body {
  min-height: 300px;
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}


.draft-card__template-row {
  margin-bottom: var(--space-4);
}

.draft-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.draft-card__save-form {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-base);
}


.draft-card__save-hint {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--content-neutral);
}

.draft-card__save-row {
  display: flex;
  gap: var(--space-2);
}

.draft-card__save-row .input {
  flex: 1;
}

.draft-card__manage {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-base);
  font-size: var(--text-sm);
}

.draft-card__manage > summary {
  cursor: pointer;
  color: var(--content-primary);
  font-weight: var(--font-weight-bold);
}

.tmpl-manage {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Rangée compacte (spec Settings) : nom + aperçu du sujet / Edit + Delete */
.tmpl-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 16px;
  align-items: center;
  padding: 13px 2px;
  border-bottom: 1px solid var(--color-neutral-100);
}

.tmpl-item:hover { background: var(--color-neutral-50); }

.tmpl-item__text { min-width: 0; }

.tmpl-item__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tmpl-item__name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tmpl-item__subject {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--content-neutral);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tmpl-item__actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.tmpl-item__edit,
.tmpl-item__delete {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  padding: 5px 9px;
  border-radius: 7px;
  cursor: pointer;
  text-decoration: none;
}

.tmpl-item__edit { color: var(--color-primary-500); }
.tmpl-item__edit:hover { background: var(--color-primary-50); }

.tmpl-item__delete { color: var(--color-neutral-400); }
.tmpl-item__delete:hover { color: var(--color-danger-500); background: var(--color-danger-50); }

.stg-templates__spacer { flex: 1; }

/* Modale d'édition de template (coquille emodal) */
.emodal__default {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.emodal__danger {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-400);
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
}

.emodal__danger:hover { color: var(--color-danger-500); background: var(--color-danger-50); }

.draft-card__variables {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-base);
  font-size: var(--text-sm);
}

.draft-card__variables summary {
  cursor: pointer;
  color: var(--content-primary);
  font-weight: var(--font-weight-bold);
}

.draft-card__variables ul {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.draft-card__variables code {
  padding: 2px var(--space-2);
  background: var(--color-neutral-100);
  border-radius: var(--radius);
  font-size: var(--text-xs);
}

.hm-invite__actions {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}

.settings__hint {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--content-neutral);
}

.settings__row {
  display: flex;
  gap: var(--space-3);
}

.settings__row--indent {
  margin-top: var(--space-3);
  padding-left: var(--space-6);
}

.settings__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.settings__label {
  font-size: var(--text-xs);
  color: var(--content-neutral);
}

.settings__narrow {
  max-width: 220px;
}

.settings__days {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.settings__day,
.settings__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}

/* Sous-option indentée sous « Request calendar access » dans le modal. */
.settings__toggle--nested {
  margin-left: calc(var(--space-5) + var(--space-1));
  align-items: flex-start;
  color: var(--color-neutral-400);
}

/* ============================================================
 * SyncHire redesign — additions (merged from redesign_additions.css)
 * Prototype-only .demo-jump / .scaf rules intentionally omitted.
 * ============================================================ */

/* App shell wrapper (nav + scrolling main) */
.app-shell{display:flex;flex-direction:column;height:100vh;width:100%;overflow:hidden}
.app-main{flex:1;min-height:0;overflow-y:auto;background:var(--color-neutral-50)}

/* ---- App shell: navy top nav ---- */
.app-nav{display:flex;align-items:center;gap:12px;height:56px;min-height:56px;padding:0 12px;background:linear-gradient(90deg,#000b26,#021b59);flex:none}
.app-nav__brand{display:flex;align-items:center;gap:10px;color:#fff;cursor:pointer;text-decoration:none}
.app-nav__logo{display:flex;flex-direction:column;gap:2px;width:20px;height:20px}
.app-nav__logo span{height:48%;background:#fff}
.app-nav__logo span:first-child{border-radius:999px 0 0 999px}
.app-nav__logo span:last-child{border-radius:0 999px 999px 0;background:var(--color-primary-300)}
.app-nav__name{font-size:15px;font-weight:800;letter-spacing:-.01em}
.app-nav__tabs{display:flex;align-items:center;height:100%}
.app-nav__tab{display:flex;align-items:center;height:100%;padding:0 11px;font-size:13.5px;font-weight:700;color:rgba(255,255,255,.68);cursor:pointer;border-top:3px solid transparent;border-bottom:3px solid transparent;transition:color .12s,border-color .12s;text-decoration:none}
.app-nav__tab:hover{color:#fff}
.app-nav__tab--active{color:#fff;border-bottom-color:var(--color-primary-300)}
.app-nav__right{margin-left:auto;display:flex;align-items:center;gap:10px}
.app-nav__quick{display:flex;align-items:center;gap:6px}
.app-nav__qbtn{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 10px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:background .12s;white-space:nowrap;text-decoration:none}
.app-nav__qbtn:hover{background:rgba(255,255,255,.18)}
.app-nav__qbtn--primary{background:var(--color-primary-500);border-color:var(--color-primary-500)}
.app-nav__qbtn--primary:hover{background:var(--color-primary-400)}
.app-nav__divider{width:1px;height:26px;background:rgba(255,255,255,.14)}

/* Profile avatar + dropdown menu (Settings / Disconnect) */
.app-nav__me{position:relative;display:flex;align-items:center;cursor:pointer}
.app-nav__menu{position:absolute;top:42px;right:0;z-index:96;background:#fff;border:1px solid var(--border-neutral);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-1);min-width:180px}
.app-nav__menu-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:var(--radius);font-size:13px;font-weight:600;color:var(--content-base);cursor:pointer;text-decoration:none}
.app-nav__menu-item:hover{background:var(--hover-neutral-light)}
.app-nav__menu-item--danger{color:var(--content-danger)}
.app-nav__menu-item--danger:hover{background:var(--hover-danger-light)}

/* Notification bell: badge on the button, dropdown panel fed by a lazy
   turbo-frame (NotificationsController#index). */
.nav-bell{position:relative;display:flex;align-items:center}
.nav-bell__btn{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:none;border-radius:var(--radius);background:transparent;color:rgba(255,255,255,.75);cursor:pointer}
.nav-bell__btn:hover{background:rgba(255,255,255,.12);color:#fff}
/* Le « ? » d'aide réutilise le style du bouton cloche ; c'est un <a>. */
.nav-help{text-decoration:none}
.nav-bell__badge{position:absolute;top:2px;right:1px;min-width:15px;height:15px;padding:0 4px;border-radius:999px;background:var(--color-danger-500);color:#fff;font-size:9.5px;font-weight:700;line-height:15px;text-align:center}
.nav-bell__panel{position:absolute;top:42px;right:0;z-index:96;width:330px;background:#fff;border:1px solid var(--border-neutral);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);overflow:hidden}
.nav-bell__head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--border-neutral)}
.nav-bell__title{font-size:13px;font-weight:700;color:var(--content-base)}
.nav-bell__mark-read{border:none;background:transparent;font-size:12px;font-weight:700;color:var(--color-primary-500);cursor:pointer;padding:4px 6px;border-radius:var(--radius)}
.nav-bell__mark-read:hover{background:var(--color-primary-50)}
.nav-bell__empty{margin:0;padding:18px 14px;font-size:12.5px;color:var(--content-neutral);text-wrap:pretty}
.nav-bell__list{list-style:none;margin:0;padding:0;max-height:330px;overflow-y:auto}
.nav-bell__item{padding:11px 14px;border-bottom:1px solid var(--border-neutral)}
.nav-bell__item:last-child{border-bottom:none}
.nav-bell__item--unread{background:var(--color-primary-50)}
.nav-bell__item-title{font-size:13px;font-weight:700;color:var(--content-base);line-height:1.3}
.nav-bell__item-body{font-size:12.5px;color:var(--content-base);line-height:1.4;margin-top:2px;text-wrap:pretty}
.nav-bell__item-time{font-size:11px;color:var(--content-neutral);margin-top:4px}

/* ---- Avatars (hashed pastel from name) ---- */
.avatar{border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex:none;line-height:1}
.avatar--nav{width:32px;height:32px;font-size:12px;background:var(--color-primary-400);color:#fff;border-radius:999px}
.avatar--sm{width:30px;height:30px;font-size:11px;border-radius:var(--radius-full)}
.avatar--row{width:32px;height:32px;font-size:11px}

/* ---- Composer ---- */
.composer__grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:var(--space-6);align-items:start}
.composer__col{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}

/* Step cards (left column) */
.card{background:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:14px;box-shadow:var(--shadow-sm)}
.card--step{padding:var(--space-6) var(--space-8) 28px}
.card__head{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-6)}
.card__badge{width:26px;height:26px;border-radius:var(--radius-full);display:inline-flex;align-items:center;justify-content:center;background:var(--color-primary-100);color:var(--color-primary-600);font-size:13px;font-weight:var(--font-weight-extrabold)}
.card__title{font-size:15px;font-weight:var(--font-weight-extrabold);letter-spacing:-.01em}
/* Expandable cards (Times to offer, later Meeting details) */
.card--collapsible{overflow:hidden}
.card__toggle{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);cursor:pointer;user-select:none}
.card__toggle:hover{background:var(--color-neutral-50)}
.card__toggle-text{flex:1;min-width:0}
.card__toggle-text .field__label{margin-bottom:0}
.card__toggle-summary{display:block;font-size:13px;color:var(--color-neutral-500);margin-top:3px}
.card__bulk{border:none;background:transparent;font-family:inherit;font-size:12.5px;font-weight:var(--font-weight-bold);color:var(--color-primary-500);padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);cursor:pointer;display:none}
.card--open .card__bulk{display:inline-block}
.card__bulk:hover{background:var(--color-primary-50)}
.card__chevron{color:var(--color-neutral-400);flex:none;transition:transform .18s ease}
.card--open .card__chevron{transform:rotate(180deg)}
/* Rembourrage SYMÉTRIQUE. Il valait space-4 en haut et space-5 en bas (16 vs
   20px) : mesuré, 17px au-dessus de la première puce contre 20px sous la
   dernière. Trois pixels, mais ils se voient — la carte respire plus serré à
   l'intérieur (10px entre les jours, 7px entre les puces), et la dernière
   rangée ne porte souvent qu'une puce, si bien que la bande du bas se confond
   avec le vide à sa droite et lit comme un trou. */
.card__collapse{border-top:1px solid var(--color-neutral-100);padding:var(--space-4) var(--space-5)}

/* Sticky live summary (right column) */
.summary{position:sticky;top:20px;background:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:14px;box-shadow:var(--shadow-md);overflow:hidden}
.summary__band{padding:18px 22px;background:linear-gradient(135deg,var(--color-primary-800),var(--color-primary-600))}
.summary__kicker{font-size:var(--text-xs);font-weight:var(--font-weight-bold);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:4px}
.summary__headline{font-size:17px;font-weight:var(--font-weight-extrabold);color:var(--color-white);letter-spacing:-.01em;line-height:1.3;text-wrap:pretty}
.summary__body{padding:20px 22px 22px}
.summary__person{display:flex;align-items:center;gap:11px;padding:13px 0}
.summary__person:first-child{padding-top:0}
.summary__person--hm{border-top:1px dashed var(--color-neutral-200)}
.summary__avatar{width:36px;height:36px;border-radius:var(--radius-full);font-size:12px}
.summary__avatar--empty{background:var(--color-neutral-100)}
.summary__person-text{min-width:0}
.summary__name{font-size:var(--text-sm);font-weight:var(--font-weight-bold);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.summary__name--empty{color:var(--content-neutral);font-weight:var(--font-weight-normal)}
.summary__role{display:flex;align-items:center;gap:5px;font-size:var(--text-xs);color:var(--color-neutral-400)}
.summary__grant{font-weight:var(--font-weight-bold)}
.summary__grant--connected{color:var(--color-success-700)}
.summary__grant--connected::before{content:"";display:inline-block;width:5px;height:5px;border-radius:var(--radius-full);background:var(--color-success-500);margin-right:4px}
.summary__grant--invited{color:var(--color-primary-500)}
.summary__grant--pending{color:var(--color-neutral-500)}
.summary__grant--expired{color:var(--color-danger-500)}

/* Under the disabled Create button: why it's disabled. */
.summary__wait{margin-top:12px;font-size:12px;color:var(--color-neutral-400);text-align:center;text-wrap:pretty}

/* Availability preview rows inside the collapsible card. */
.preview-days{display:flex;flex-direction:column;gap:16px}
.preview-days__foot{margin-top:12px}

/* Candidate quick-create: link-first hint (no email field anymore). */
.combobox__create-hint{margin:2px 0 0;font-size:12px;color:var(--color-neutral-400)}

/* Link-first invite-to-connect block: soft primary panel with a calendar
   glyph — it gates link creation, so it reads as guidance, not error. */
/* .hm-invite : définition unique remontée près de .hm-invite__text (elle était
   dupliquée ici et gagnait silencieusement sur background/border/radius). */
.hm-invite__icon{flex:none;color:var(--color-primary-500)}
.summary__extra{display:flex;align-items:center;gap:11px;padding:0 0 13px 47px}
.summary__extra .avatar{width:26px;height:26px;font-size:var(--text-2xs);border-radius:var(--radius-full)}
.summary__extra-name{font-size:13px;font-weight:var(--font-weight-bold);line-height:1.2}
.summary__extra-role{font-size:11.5px;color:var(--color-neutral-400)}
.summary__facts{border-top:1px solid var(--color-neutral-100);padding:14px 0 16px;display:flex;flex-direction:column;gap:9px}
.summary__fact{display:flex;justify-content:space-between;font-size:var(--text-sm)}
.summary__fact span{color:var(--color-neutral-400)}
.summary__fact b{font-weight:var(--font-weight-bold)}
.summary__submit{display:inline-flex;align-items:center;justify-content:center;width:100%;height:46px;border:none;border-radius:10px;font-size:15px;font-weight:var(--font-weight-bold);font-family:inherit;background:var(--color-primary-500);color:var(--color-white);cursor:pointer;box-shadow:var(--shadow-sm)}
.summary__submit:hover{background:var(--color-primary-400)}
.summary__submit:disabled{background:var(--color-primary-200);color:var(--color-primary-100);cursor:not-allowed}
/* L'état copié (2026-08-05) : un état du MÊME bouton, pas un bouton de plus —
   le vert et le libellé qui nomme le lien tombent ensemble au bout de 1,6 s. */
.summary__submit--copied,.summary__submit--copied:hover{background:var(--color-success-500)}
/* La pastille clavier « ⏎ Enter ». Le raccourci existe (composer#enterCopy) —
   la pastille se cache quand le bouton est gris, pour ne jamais annoncer une
   touche inopérante. */
.summary__kbd{margin-left:9px;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.2);font-size:11px;font-weight:var(--font-weight-bold);letter-spacing:.01em}

/* Copy + le signet Save (parité popup 0.7) : Copy garde toute la largeur
   restante, le signet est un carré à sa droite. `--on` remplit l'icône
   (fill suit currentColor, posé par le JS sur le svg). */
.summary__actions{display:flex;align-items:stretch;gap:8px}
.summary__actions .summary__submit{flex:1}
.summary__save{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;flex:none;border:1px solid var(--color-neutral-200);border-radius:10px;background:var(--color-white);color:var(--color-primary-500);cursor:pointer;transition:all 120ms ease}
.summary__save:hover{border-color:var(--color-primary-400);background:var(--color-primary-50)}
.summary__save:disabled{opacity:.6;cursor:default}
.summary__save--on{border-color:var(--color-primary-400);background:var(--color-primary-50)}

/* ---- L'aparté-lien du composeur HM-first (2026-08-01) ----
   Le bandeau porte la pastille d'état (Reusable / Tracked) et un gros
   titre en DEUX nœuds : le nom peut passer à la ligne, le suffixe
   (« · 30 min ») jamais — sinon « Marie-Astrid de La Rochefoucauld · 1 h »
   coupe au milieu de la durée. */
.summary__kicker-row{display:flex;align-items:center;gap:8px}
.summary__kicker-row .summary__kicker{flex:1;margin-bottom:0}
.summary__pill{flex:none;font-size:10px;font-weight:var(--font-weight-bold);letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.14);color:var(--color-white)}
.summary__headline-suffix{font-weight:var(--font-weight-bold);color:rgba(255,255,255,.6);white-space:nowrap}
.summary__hint{margin:11px 0 0;font-size:12px;color:var(--color-neutral-400);text-align:center;text-wrap:pretty}

/* « Copy message » (2026-08-01) : mini-bascule FR/EN + bouton doux, sous le
   Copy principal — même rangée dans le composeur et le panneau de partage. */
/* La rangée FR|EN + bouton ne survit que sur le share panel : côté composeur
   elle est devenue la zone message (divider + caption + aperçu, ci-dessous). */
.share-panel__message-row{display:flex;align-items:center;gap:8px;margin-top:10px}
.share-panel__message-row .summary__submit{flex:1;height:40px;font-size:13px;margin-top:0}

/* Zone message du composeur (handoff 2026-08-02). Le divider pleine largeur
   qui la séparait du bouton est mort avec les onglets (2026-08-05) : c'est la
   barre Link/Message qui sépare désormais les deux faces. */
.summary__msg-caption-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 7px}
.summary__msg-caption{font-size:11px;color:var(--color-neutral-400)}
.summary__msg-preview{padding:12px 13px;background:var(--color-neutral-50);border:1px solid var(--color-neutral-100);border-radius:10px;font-size:12px;line-height:1.55;color:var(--color-neutral-600);white-space:pre-wrap;max-height:190px;overflow-y:auto;transition:opacity 150ms ease}
.summary__msg-preview.is-composing{opacity:.55}
.summary__msg-preview--note{padding:18px 16px;font-size:13px;color:var(--color-neutral-500);text-align:center;white-space:normal}
.summary__msg-retry{border:0;background:none;font-family:inherit;font-size:inherit;font-weight:var(--font-weight-bold);color:var(--color-primary-500);cursor:pointer;padding:0 2px}
.summary__msg-copy{display:inline-flex;align-items:center;justify-content:center;width:100%;height:38px;margin-top:10px;border:1px solid var(--color-neutral-200);border-radius:9px;background:var(--color-white);font-family:inherit;font-size:13px;font-weight:var(--font-weight-bold);color:var(--color-primary-500);cursor:pointer;transition:all 120ms ease}
.summary__msg-copy:hover{border-color:var(--color-primary-400);background:var(--color-primary-50)}
.summary__msg-copy:disabled{opacity:.6;cursor:default;border-color:var(--color-neutral-200);background:var(--color-white)}
.seg-mini{flex:none;display:inline-flex;background:var(--color-neutral-100);border-radius:8px;padding:3px;gap:3px}
.seg-mini__opt{padding:4px 10px;border:0;background:none;border-radius:6px;font-size:11px;font-weight:var(--font-weight-bold);color:var(--color-neutral-400);cursor:pointer;font-family:inherit}
.seg-mini__opt.is-active{background:var(--color-white);color:var(--color-primary-600);box-shadow:var(--shadow-sm)}
/* Les onglets Link/Message de l'aparté (2026-08-05) : le MÊME composant que le
   segment FR/EN — piste grise, pastille blanche active — en pleine largeur.
   Une seule famille plutôt qu'un second segmented inventé pour l'occasion. */
.seg-mini--tabs{display:flex;width:100%;margin:2px 0 13px}
.seg-mini--tabs .seg-mini__opt{flex:1;padding:7px 10px;font-size:13px}
.seg-mini--tabs .seg-mini__opt:disabled{opacity:.5;cursor:not-allowed}
/* La note qui explique l'onglet gris, collée sous la barre. */
.summary__tabnote{margin:-7px 0 13px;font-size:11px;color:var(--color-neutral-400);text-align:center}
/* La phrase passe AU-DESSUS du bouton : elle décrit ce qu'on s'apprête à
   copier, elle se lit donc en drapeau, pas centrée comme une légende. */
.summary__hint--lede{margin:0 0 11px;font-size:13px;line-height:1.5;color:var(--color-neutral-500);text-align:left}
/* Avant qu'un HM soit choisi, la même phrase tient la ligne en PLACEHOLDER :
   plus claire que la vraie, qui la remplace mot pour mot. La carte vide est
   la carte pleine en moins d'encre, jamais une carte plus courte. */
.summary__hint--ghost{color:var(--color-neutral-400)}

/* Pastille « Adds tracking » du libellé Candidat (ex-« Optional », handoff
   2026-08-02 : la pastille répond « qu'est-ce que j'y gagne ? », pas « suis-je
   obligé ? » — teinte primaire, même géométrie). La boîte de nom vit dans le
   bloc composer, rev §11. */
.pill-track{font-size:10px;font-weight:var(--font-weight-bold);letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--color-primary-100);color:var(--color-primary-500)}

/* Faces du panneau de lien (show page). Ces règles DOIVENT rester APRÈS
   .summary__band / .summary__submit : même spécificité (une classe), donc
   c'est l'ordre du fichier qui tranche — placées plus haut, elles étaient
   silencieusement écrasées. */
/* Bandeau sourd quand « partager » n'est plus l'étape suivante
   (paused / cancelled / completed) : le navy est réservé aux liens vivants. */
.summary__band--muted{background:var(--color-neutral-100)}
.summary__band--muted .summary__kicker{color:var(--color-neutral-500)}
.summary__band--muted .summary__headline{color:var(--color-primary-900)}
.summary__band-note{margin-top:3px;font-size:var(--text-xs);color:rgba(255,255,255,.65)}
/* Copie secondaire : une fois booké, le lien reste utile (reprogrammation /
   annulation self-service) mais ce n'est plus l'action principale. */
.summary__submit--soft{background:var(--color-primary-100);color:var(--color-primary-600);box-shadow:none}
.summary__submit--soft:hover{background:var(--color-primary-200);color:var(--color-primary-600)}
/* États terminaux : la phrase précède le bouton (au lieu de le suivre), il lui
   faut donc l'air que .share-panel__hint ne met que AU-DESSUS d'elle. */
.share-panel__hint + .summary__submit{margin-top:14px}

/* Meeting details card (address / description / attachment presets) */
.meeting-details{display:flex;flex-direction:column;gap:var(--space-4)}
.meeting-details .field{margin-bottom:0}
.attach-row{display:flex;align-items:center;gap:10px;padding:13px 14px;border:1px dashed var(--color-neutral-300);border-radius:9px;color:var(--color-neutral-500);font-size:13px;cursor:pointer}
.attach-row:hover{border-color:var(--color-primary-400);color:var(--color-primary-500)}
.attach-row__remove{border:none;background:none;font-family:inherit;font-size:var(--text-xs);font-weight:var(--font-weight-bold);color:var(--color-neutral-400);cursor:pointer;padding:4px 0 0;text-align:left}
.attach-row__remove:hover{color:var(--color-danger-500)}
.meeting-details__status{margin:0;font-size:var(--text-xs);color:var(--color-success-700)}
.meeting-details__status--error{color:var(--color-danger-500)}

/* Single column below desktop: the summary follows the cards */
@media (max-width:1023px){
  .composer{padding:var(--space-6) var(--space-5)}
  .composer__grid{grid-template-columns:1fr}
  .summary{position:static}
}

/* Candidate + Hiring manager side by side */
/* .people-row / .people-col : morts avec le duo candidat+HM du composeur
   (HM-first, 2026-08-01) — supprimés en lisant leurs derniers usages. */
.field-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2)}
.field-label-row .field__label{margin-bottom:0}

/* Progressive-disclosure hint */
.gate-hint{margin-top:var(--space-4);background:var(--color-primary-50);border:1px dashed var(--border-primary-light);border-radius:var(--radius-md);padding:var(--space-5);color:var(--content-neutral-reversed);font-size:var(--text-sm);text-align:center}

.field__label-optional{text-transform:none;font-weight:var(--font-weight-normal);color:var(--content-neutral)}
/* Ligne d'aide SOUS un champ (le libellé, lui, est au-dessus) : ce que devient
   le champ laissé vide, et où le régler. */

/* ── Éditeur de disponibilité — reprend le rythme de rangée des booking links ── */
.stg-avail__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.stg-avail__headtext { flex: 1; min-width: 0; }
.stg-avail__headtext .stg-note { margin: 2px 0 0; }
.stg-avail__status { flex: none; font-size: 12px; font-weight: 600; color: var(--color-neutral-400); padding-top: 3px; }
.stg-avail__status--saved { color: var(--color-success-700); }
.stg-avail__status--error { color: var(--color-danger-500); }

.stg-avail__day { border-top: 1px solid var(--color-neutral-100); margin: 0; padding: 0; }
.stg-avail__day:first-of-type { border-top: none; }
.stg-avail__fieldset { display: flex; gap: 14px; padding: 12px 0; border: none; margin: 0; }
.stg-avail__label { width: 92px; flex: none; font-size: 13.5px; font-weight: 800; padding: 7px 0 0; }
.stg-avail__day--off .stg-avail__label { color: var(--color-neutral-400); }
.stg-avail__ranges { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.stg-avail__range { display: flex; align-items: center; gap: 8px; }
.stg-avail__select { height: 34px; }
.stg-avail__off { font-size: 13px; color: var(--color-neutral-400); padding-top: 8px; }
.stg-avail__remove { width: 26px; height: 26px; flex: none; border: none; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; color: var(--color-neutral-400); }
.stg-avail__remove:hover { color: var(--color-danger-500); background: var(--color-danger-50); }
.stg-avail__tools { flex: none; display: flex; gap: 4px; padding-top: 3px; position: relative; }
.stg-avail__tool { width: 28px; height: 28px; border: none; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; color: var(--color-neutral-400); }
.stg-avail__tool:hover, .stg-avail__tool[aria-expanded="true"] { color: var(--color-primary-500); background: var(--color-primary-50); }

/* « Copier vers » — même famille de coquille que .stg-menu */
.stg-copy { position: absolute; top: 34px; right: 0; width: 238px; z-index: 20;
  background: var(--color-white); border: 1px solid var(--color-neutral-200);
  border-radius: 11px; box-shadow: var(--shadow-lg); padding: 14px; text-align: left; }
.stg-copy__title { font-size: 13px; font-weight: 800; margin-bottom: 10px; }
.stg-copy__days { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-bottom: 12px; }
.stg-copy__day { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.stg-copy__day input { margin: 0; accent-color: var(--color-primary-500); }
.stg-copy__hint { font-size: 11.5px; color: var(--color-neutral-500); line-height: 1.4; margin-bottom: 11px; }
.stg-copy__actions { display: flex; gap: 8px; }
.stg-copy__apply { flex: 1; height: 32px; border: none; border-radius: 8px; cursor: pointer;
  background: var(--color-primary-500); color: var(--color-white); font-family: inherit; font-size: 12.5px; font-weight: 700; }
.stg-copy__apply:hover { background: var(--color-primary-600); }
.stg-copy__cancel { flex: none; height: 32px; padding: 0 12px; border: none; border-radius: 8px; background: none;
  cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--color-neutral-500); }
.stg-copy__cancel:hover { background: var(--color-neutral-100); }

.stg-avail__empty { text-align: center; padding: 26px 12px 24px; }
.stg-avail__empty-icon { width: 48px; height: 48px; border-radius: 999px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary-100); color: var(--color-primary-500); }
.stg-avail__empty-title { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.stg-avail__empty-text { font-size: 13px; color: var(--color-neutral-500); max-width: 44ch; margin: 0 auto 18px; line-height: 1.5; }
.stg-avail__empty-form { display: inline-block; }
.stg-avail__empty-sub { font-size: 12px; color: var(--color-neutral-400); margin-top: 9px; }

/* ── Restructure /settings (2026-07-31) ── */
/* Deux groupes par CYCLE DE VIE : ce qu'on touche chaque semaine, puis ce qu'on
   règle une fois. */
.stg-heading { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-neutral-400); margin: 26px 2px 10px; }
.stg__subtitle { display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 13px; color: var(--color-neutral-500); margin: -8px 0 20px; }
.stg__subtitle b { color: var(--color-primary-900); font-weight: 700; }
/* Le fuseau se déplie depuis l'en-tête : il gouverne toute la page, il n'a rien
   à faire dans une carte parmi d'autres. */
/* Un vrai <button> depuis l'audit S5 (2026-08-11) : le reset ci-dessous retire
   le chrome navigateur. `font: inherit` AVANT la graisse — le raccourci `font`
   réinitialise font-weight, donc écrit après il l'écraserait. La case masquée
   .stg__tzbox est partie avec le motif, et son piège d'ancrage (§7) aussi. */
.stg__tzlink { display: inline-flex; align-items: center; cursor: pointer;
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--color-primary-500); font-weight: 700; }
.stg__tzlink span { text-decoration: underline; }
.stg__tzpanel { margin: -12px 0 20px; }
.stg__status { font-size: 12px; font-weight: 600; color: transparent; }
.stg__status--saved { color: var(--color-success-700); }
.stg__status--error { color: var(--color-danger-500); }

/* Carte « Account » : rangées compactes pour des réglages qu'on ne touche
   qu'une fois — mêmes faits, poids visuel plus faible. */
.stg-card--rows { padding: 14px 28px; }
.stg-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.stg-row + .stg-row { border-top: 1px solid var(--color-neutral-100); }
.stg-row__icon { width: 30px; height: 30px; border-radius: 8px; flex: none; display: flex;
  align-items: center; justify-content: center; background: var(--color-primary-100); color: var(--color-primary-500); }
.stg-row__text { flex: 1; min-width: 0; }
.stg-row__title { font-size: 13.5px; font-weight: 800; }
.stg-row__meta { font-size: 12.5px; color: var(--color-neutral-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.field__hint { display: block; font-size: 12px; color: var(--color-neutral-500); margin-top: 6px; }
/* Le lien y était rendu par le NAVIGATEUR : bleu, puis violet une fois visité,
   souligné. C'est le premier lien en ligne de l'app — partout ailleurs un lien
   porte une classe .btn — et la feuille de style ne définit aucune couleur pour
   `a` (la seule règle du design system est a:focus-visible). D'où une ligne
   d'aide en violet système au milieu d'une carte. */
.field__hint a { color: var(--color-primary-500); font-weight: 700; text-decoration: none; }
.field__hint a:hover { text-decoration: underline; }
/* ---- Organization page (org-*) — reuses the stg-* card system ---- */
.org-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 24px;
}

.org-head__title { margin: 0; }

.org-head__meta {
  font-size: 13px;
  color: var(--color-neutral-500);
}

.org-invite__title { margin-bottom: 14px; }

.org-invite {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Remplace le formulaire d'invitation quand le plan gratuit (1 siège) est
   plein — même ton que les autres notes de carte. */
.org-invite__note {
  margin: 0;
  font-size: 13px;
  color: var(--color-neutral-500);
  text-wrap: pretty;
}

.org-input {
  flex: 1;
  min-width: 220px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--color-neutral-200);
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  color: var(--color-primary-900);
  outline: none;
}

.org-input:focus {
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

.org-invite__send {
  height: 42px;
  padding: 0 18px;
}

.org-card--table {
  padding: 0;
  overflow: hidden;
}

.org-cardhead {
  padding: 16px 22px;
  background: var(--color-neutral-50);
  border-bottom: 1px solid var(--color-neutral-100);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-neutral-400);
}

.org-row {
  display: grid;
  gap: 16px;
  align-items: center;
  padding: 14px 22px;
  border-bottom: 1px solid var(--color-neutral-100);
}

.org-row:last-child { border-bottom: none; }
.org-row:not(.org-colheads):hover { background: var(--color-neutral-50); }

.org-row--invite {
  grid-template-columns: minmax(0, 1fr) 80px 200px;
  padding: 13px 22px;
}

.org-row--member {
  grid-template-columns: minmax(0, 1fr) 170px 110px 130px;
}

.org-colheads { background: var(--color-neutral-50); }

.org-colhead {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-neutral-400);
}

.org-row__email {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-person {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.org-person__avatar {
  width: 34px;
  height: 34px;
  flex: none;
}

.org-person__text { min-width: 0; }

.org-person__name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-person__email {
  font-size: 12px;
  color: var(--color-neutral-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-pill {
  display: inline-flex;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.org-pill--admin { background: var(--color-primary-100); color: var(--color-primary-500); }
.org-pill--ok { background: var(--color-success-100); color: var(--color-success-700); }
.org-pill--muted { background: var(--color-neutral-100); color: var(--color-neutral-500); }

/* Sélecteur de rôle : deux button_to (chacun son mini-form) dans une piste */
.org-roleseg {
  display: inline-flex;
  background: var(--color-neutral-100);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.org-roleseg__opt {
  border: none;
  background: none;
  font-family: inherit;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-neutral-500);
  cursor: pointer;
  transition: all 120ms ease;
}

.org-roleseg__opt--member {
  background: var(--color-white);
  color: var(--color-primary-900);
  box-shadow: var(--shadow-sm);
}

.org-roleseg__opt--admin {
  background: var(--color-primary-500);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.org-row__end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.org-row__end--invite {
  display: grid;
  grid-template-columns: 100px 80px;
  justify-content: flex-end;
  gap: 6px;
}

.org-you {
  font-size: 13px;
  color: var(--color-neutral-400);
  padding: 6px 10px;
}

.org-link {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-500);
  cursor: pointer;
  padding: 6px 0;
  border-radius: 7px;
  white-space: nowrap;
  width: 100%;
  text-align: center;
}

.org-link:hover { background: var(--color-primary-50); }

/* Désactiver un membre est destructif ET légitime : en texte gris ça ne se
   lisait pas comme un contrôle (même problème que « Cancel interview » avant
   son passage en btn-outline-danger). Contour, pas plein : visible sans
   attirer le clic accidentel. Troisième occurrence du même réflexe dans l'app
   — la règle est désormais : destructif-mais-attendu => contour danger. */
.org-link--danger {
  color: var(--content-danger);
  border: 1px solid var(--color-danger-200);
  /* La base .org-link est un lien-texte : width:100% + padding:6px 0 y sont
     invisibles. Un CONTOUR les révèle — pleine colonne, texte au bord. Même
     géométrie que le chip --solid (Reactivate) d'à côté. */
  padding: 6px 12px;
  width: auto;
}
.org-link--danger:hover { border-color: var(--color-danger-400); background: var(--color-danger-50); }

/* Carte Branding : aperçu du logo uploadé (l'affichage public a son propre
   clamp, .booking__orglogo — celui-ci n'habille que la page admin). */
.org-logo {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.org-logo__img {
  display: block;
  max-height: 40px;
  max-width: 200px;
  object-fit: contain;
}

.org-link--solid {
  color: var(--color-primary-500);
  background: var(--color-primary-100);
  padding: 6px 12px;
  width: auto;
}
.org-link--solid:hover { background: var(--color-primary-200); }

.org-link--sent {
  display: inline-block;
  color: var(--color-success-700);
  padding: 6px 0;
  width: 100%;
  text-align: center;
}

/* ---- Control refinements ---- */
/* The design system gives .gp-tag display:inline-flex, which overrides the
   UA's [hidden]{display:none}. Couvert désormais par la règle globale en
   tête de fichier. */
.input,select.input,.textarea{border-radius:var(--radius-md)}
.input:focus,.textarea:focus,select.input:focus{border-color:var(--color-primary-400);box-shadow:0 0 0 3px var(--color-primary-100)}
.segmented{padding:var(--space-1);gap:var(--space-1)}
.segmented__option{padding:var(--space-2) var(--space-5)}
.chip{border-radius:var(--radius-md);padding:var(--space-2) var(--space-3)}

/* ---- Elevated surfaces ---- */
/* .slots-card N'EST PAS une surface : ni fond, ni padding, ni bordure — seule
   cette règle la touchait. Une ombre se peint autour de la BOÎTE DE BORDURE, or
   sans padding cette boîte épouse le contenu : l'ombre suivait donc la dernière
   puce. Décalée de 1px vers le bas et floutée de 2px (--shadow-sm), ses bords
   gauche/droit/haut étaient invisibles — on ne voyait qu'un filet sous la
   dernière ligne. Inoffensif quand la carte contenait des .slot-row pleine
   largeur ; depuis le pivot elle contient .preview-days, dont le bas est
   DENTELÉ (une ligne enroulée à une seule puce), et le filet se lisait comme
   une rangée orpheline enfermée dans une boîte. Le conteneur vit déjà dans une
   vraie .card avec son .card__collapse (16/20) : une carte dans une carte.
   Le <div> reste — c'est la cible Stimulus propose-slots — il ne peint plus. */
.itw-table{box-shadow:var(--shadow-sm);border-radius:var(--radius-lg)}
.draft-card{box-shadow:var(--shadow-sm);border-radius:var(--radius-lg)}
.booking__card{box-shadow:var(--shadow-md);border-radius:var(--radius-lg)}
.btn-solid-base,.btn-solid-primary{box-shadow:var(--shadow-sm)}

/* ---- Table name cell with avatar ---- */
.itw-name-cell{display:flex;align-items:center;gap:10px}

/* ---- Public booking brand header ---- */
.booking{padding-top:var(--space-12)}
.booking__brand{display:flex;align-items:center;gap:8px;margin-bottom:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid var(--border-base)}
.booking__logo{width:18px;height:18px;border-radius:var(--radius);background:var(--color-primary-800)}
.booking__brandname{font-size:13px;font-weight:800}
/* Logo d'org (branding Pro) à la place de la marque SyncHire : clampé, jamais
   déformé — object-fit:contain absorbe logos larges ET carrés. */
.booking__orglogo{display:block;max-height:28px;max-width:180px;object-fit:contain}
/* Dans la carte candidat : .meet__card n'a AUCUN padding propre (ses sections
   internes se le donnent — .meet__head : 32px 36px), donc le bandeau de marque
   collait au coin arrondi, séparateur bord à bord (vu en prod 2026-08-03).
   On l'aligne sur la géométrie interne ; le border-bottom hérité de
   .booking__brand reste pleine largeur, façon en-tête. */
.meet__card .booking__brand{margin-bottom:0;padding:18px 36px 16px}
/* Le powered-by des pages .meet est centré par leur flex parent ; .booking est
   un bloc simple, sans ça il colle à gauche sous une carte centrée. Enfant
   DIRECT seulement — bookings/show le rend DANS la carte, à laisser en place. */
.booking > .powered-by{justify-content:center}

/* ---- Quick-add modal (+ Candidate / + Hiring manager) ---- */
.modal-scrim{position:fixed;inset:0;background:var(--overlay-scrim);z-index:100}
.modal{position:fixed;z-index:101;top:50%;left:50%;transform:translate(-50%,-50%);width:420px;max-width:calc(100vw - 32px);background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.modal__head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-base)}
.modal__title{font-size:var(--text-lg);font-weight:800}
.modal__x{border:none;background:transparent;font-size:16px;color:var(--content-neutral);cursor:pointer;line-height:1}
.modal__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.modal__foot{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-4) var(--space-5);border-top:1px solid var(--border-base);background:var(--color-neutral-50)}
/* Message of the branded Turbo confirm (confirm_dialog.js), which replaces the
   browser's own window.confirm on every data-turbo-confirm in the app. */
.confirm-dialog__message{margin:0;font-size:var(--text-sm);line-height:1.5;color:var(--content-base)}
/* Invitation-draft modal: wider than the quick-add one, and the body scrolls
   when the draft outgrows the viewport (the head stays pinned). */
.modal--draft{width:680px;display:flex;flex-direction:column;max-height:calc(100vh - 64px)}
.modal--draft .modal__body{overflow-y:auto}

/* ---- Auth (sign in / sign up / reset password) ---- */
.auth{position:fixed;inset:0;overflow-y:auto;display:flex;padding:var(--space-6);background:radial-gradient(120% 120% at 50% 0%, #0a1c52 0%, var(--color-primary-800) 55%, var(--color-primary-900) 100%)}
.auth__card{width:100%;max-width:400px;margin:auto;background:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:36px 34px}
.auth__brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:var(--space-6)}
.auth__logo{display:flex;flex-direction:column;gap:2px;width:22px;height:22px}
.auth__logo span{height:48%;background:var(--content-base)}
.auth__logo span:first-child{border-radius:999px 0 0 999px}
.auth__logo span:last-child{border-radius:0 999px 999px 0}
.auth__name{font-size:18px;font-weight:var(--font-weight-extrabold);letter-spacing:-.01em}
.auth__title{font-size:var(--text-2xl);font-weight:var(--font-weight-extrabold);letter-spacing:-.01em;text-align:center;margin:0 0 var(--space-2)}
.auth__subtitle{text-align:center;color:var(--content-neutral);font-size:var(--text-sm);margin:0 0 var(--space-6)}
.auth__field{margin-bottom:var(--space-4)}
.auth__names{display:flex;gap:12px}
.auth__names>div{flex:1;min-width:0}
.auth__hint{display:block;margin-top:var(--space-1);font-size:var(--text-xs);font-style:normal;color:var(--content-neutral)}
.auth__row{display:flex;align-items:center;justify-content:space-between;margin:0 0 var(--space-5);font-size:var(--text-sm)}
.auth__remember{display:flex;align-items:center;gap:8px;color:var(--content-neutral-reversed);cursor:pointer}
.auth__link{color:var(--content-primary);font-weight:var(--font-weight-bold);text-decoration:none}
.auth__link:hover{color:var(--hover-primary)}
.auth__submit{width:100%;height:44px;font-size:var(--text-base);margin-top:var(--space-1)}
.auth__foot{text-align:center;color:var(--content-neutral);font-size:var(--text-xs);margin-top:var(--space-5);line-height:1.5}
.auth__error{background:var(--color-danger-50);border:1px solid var(--border-danger);color:var(--content-danger);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);margin-bottom:var(--space-4)}
.auth__error ul{margin:0;padding-left:1.1em}
.auth__error li{margin:2px 0}
.auth__divider{display:flex;align-items:center;gap:var(--space-3);color:var(--content-neutral);font-size:var(--text-xs);margin:var(--space-4) 0}
.auth__divider::before,.auth__divider::after{content:"";flex:1;height:1px;background:var(--border-neutral)}
.auth__oauth-stack{display:flex;flex-direction:column;gap:var(--space-2)}
.auth__oauth{width:100%;height:44px;display:flex;align-items:center;justify-content:center;gap:var(--space-2);font-size:var(--text-base)}
.auth__oauth-icon{flex:none}
/* Password label + inline "Forgot?" link on one baseline. */
.auth__label-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
/* Password field with a show/hide eye button on the right. */
.auth__password{position:relative}
.auth__password .input{padding-right:42px}
.auth__password-eye{position:absolute;top:50%;right:8px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;background:transparent;color:var(--content-neutral);cursor:pointer;border-radius:var(--radius)}
.auth__password-eye:hover{color:var(--content-base)}
.auth__password-eye:focus-visible{outline:none;box-shadow:var(--ring)}
/* Author-origin rule so the inactive icon stays hidden even if some reset sets svg display. */

/* ---- 1c: verified-identity chip (OAuth completion) ---- */
.auth__identity{display:flex;align-items:center;gap:var(--space-2);padding:10px 12px;margin-bottom:var(--space-5);background:var(--color-neutral-50);border:1px solid var(--border-neutral);border-radius:var(--radius)}
.auth__identity-logo{flex:none}
.auth__identity-email{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--content-base)}
.auth__identity-verified{flex:none;font-size:var(--text-xs);font-weight:var(--font-weight-bold);color:var(--content-success);background:var(--color-success-100);padding:2px 8px;border-radius:var(--radius-full)}

/* ---- 1d: onboarding benefit panel + provider-tile connect buttons ---- */
.auth__benefits{list-style:none;margin:0 0 var(--space-5);padding:var(--space-4);background:var(--color-primary-50);border:1px solid var(--color-primary-100);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:var(--space-3)}
.auth__benefits li{display:flex;align-items:flex-start;gap:var(--space-3);font-size:var(--text-sm);color:var(--content-base);text-align:left}
.auth__benefit-icon{flex:none;color:var(--content-primary);margin-top:1px}
.auth__connect{position:relative}
.auth__connect-tile{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--color-white);border-radius:var(--radius)}
.auth__skip{color:var(--content-neutral)}

/* ---- 1e: invitation header (org avatar) + locked email box ---- */
.auth__invite-head{text-align:center;margin-bottom:var(--space-5)}
.auth__org-avatar{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:var(--space-3);border-radius:var(--radius-full);background:var(--color-primary-100);color:var(--color-primary-700);font-size:var(--text-lg);font-weight:var(--font-weight-bold)}
.auth__locked{display:flex;align-items:center;gap:var(--space-2);padding:10px 12px;background:var(--color-neutral-50);border:1px solid var(--border-neutral);border-radius:var(--radius);color:var(--content-neutral-reversed);font-size:var(--text-sm)}

/* ---- 1f: HM connect (requester block, read-only promises, success) ---- */
/* Handoff 2026-08-03 (fix 1) : le bloc identité rejoint la grille de gauche —
   centré entre un H1 et une phrase alignés à gauche, il flottait comme un
   accident. */
.hm-connect__requester{display:flex;align-items:center;gap:14px;margin:20px 0 0}
.hm-connect__avatar{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:var(--radius-full);background:var(--color-primary-100);color:var(--color-primary-700);font-size:var(--text-base);font-weight:var(--font-weight-bold)}
.hm-connect__requester-name{font-size:16px;font-weight:800;line-height:1.25;color:var(--content-base)}
.hm-connect__requester-role{font-size:13px;color:var(--color-neutral-500)}
.hm-connect__reassure{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);margin-bottom:var(--space-5);background:var(--color-primary-50);border:1px solid var(--color-primary-100);border-radius:var(--radius-lg);text-align:left}
.hm-connect__promise{display:flex;align-items:flex-start;gap:var(--space-3);font-size:var(--text-sm);color:var(--content-base)}
.hm-connect__promise svg{flex:none;color:var(--content-primary);margin-top:1px}
.hm-connect__helplink{margin:0;font-size:var(--text-sm)}
/* Handoff 2026-08-03 (fix 4) : traitement lien système, sans soulignement. */
.hm-connect__helplink a{font-size:14px;font-weight:700;color:var(--color-primary-500);text-decoration:none}
.hm-connect__helplink a:hover{color:var(--color-primary-400)}
.hm-connect__success{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:var(--space-3);border-radius:var(--radius-full);background:var(--color-success-100);color:var(--color-success-700)}

/* ---- 1h: extension connect (one card, spinner, status circles) ---- */
.ext-connect{display:flex;justify-content:center;padding:var(--space-8) var(--space-4)}
.ext-connect__card{width:100%;max-width:420px;padding:var(--space-8) var(--space-6);background:var(--color-white);border:1px solid var(--border-neutral);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);text-align:center}
.ext-connect__title{font-size:var(--text-xl);font-weight:var(--font-weight-bold);color:var(--content-base);margin:0 0 var(--space-2)}
.ext-connect__note{font-size:var(--text-sm);color:var(--content-neutral-reversed);margin:0 0 var(--space-2)}
.ext-connect__meta{font-size:var(--text-xs);color:var(--content-neutral);margin:var(--space-3) 0 0}
.ext-connect__cta{margin-top:var(--space-4)}
.ext-connect__tile{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:56px;height:56px;margin:0 auto var(--space-4);border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--color-primary-400),var(--color-primary-600))}
.ext-connect__tile span{display:block;width:22px;height:5px;border-radius:var(--radius-full);background:var(--color-white)}
.ext-connect__tile span:last-child{width:14px;opacity:.75}
.ext-connect__spinner{width:26px;height:26px;margin:0 auto var(--space-4);border:3px solid var(--color-primary-100);border-top-color:var(--color-primary-500);border-radius:var(--radius-full);animation:sh-spin .7s linear infinite}
.ext-connect__circle{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin:0 auto var(--space-4);border-radius:var(--radius-full)}
.ext-connect__circle--ok{background:var(--color-success-100);color:var(--color-success-700)}
.ext-connect__circle--warn{background:var(--background-warning);color:var(--content-warning)}
@keyframes sh-spin{to{transform:rotate(360deg)}}

/* ---- 1g: billing (plan card + compact status rows) ---- */
.billing{max-width:440px}
/* Billing (paywall + confirmation) : une seule colonne étroite, centrée par le
   margin:auto de .stg — les max-width de .billing/.plan-card l'égalent. */
.stg--billing{max-width:440px}
.billing__status{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);background:var(--color-white);border:1px solid var(--border-neutral);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.billing__status-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:var(--radius-full);background:var(--color-neutral-100);color:var(--content-neutral-reversed)}
.billing__status-icon--ok{background:var(--color-success-100);color:var(--color-success-700)}
.billing__status-title{font-weight:var(--font-weight-bold);color:var(--content-base);margin-bottom:2px}
.billing__status-note{font-size:var(--text-sm);color:var(--content-neutral-reversed);margin:0}
.plan-card{max-width:440px;padding:var(--space-6);background:var(--color-white);border:1px solid var(--border-neutral);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.plan-card__head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.plan-card__tag{flex:none;font-size:var(--text-xs);font-weight:var(--font-weight-bold);color:var(--color-primary-700);background:var(--color-primary-100);padding:3px 10px;border-radius:var(--radius-full)}
.plan-card__pitch{margin:0;font-size:var(--text-sm);color:var(--content-neutral-reversed)}
.plan-card__price{margin-bottom:var(--space-4);color:var(--content-base)}
.plan-card__amount{font-size:34px;font-weight:var(--font-weight-extrabold);line-height:1}
.plan-card__per{font-size:var(--text-sm);color:var(--content-neutral)}
.plan-card__interval{margin-bottom:var(--space-4)}
.plan-card__save{display:inline-block;margin-left:6px;font-size:var(--text-2xs);font-weight:var(--font-weight-bold);color:var(--color-success-700);background:var(--color-success-100);padding:1px 6px;border-radius:var(--radius-full)}
/* Bandeau d'essai gratuit (2026-08-06) : même vert que la pastille « 2 months
   free », mais en bloc — c'est l'argument qui décide, pas une décoration. */
.plan-card__trial{margin:0 0 var(--space-4);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--color-success-100);color:var(--color-success-700);font-size:var(--text-sm)}
.plan-card__seatmath{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding-top:var(--space-3);margin-bottom:var(--space-4);border-top:1px solid var(--border-base);font-size:var(--text-sm);color:var(--content-neutral-reversed)}
.plan-card__seatmath b{color:var(--content-base)}
.plan-card__cta{width:100%}
.plan-card__lock{display:flex;align-items:center;justify-content:center;gap:6px;margin:var(--space-3) 0 0;font-size:var(--text-xs);color:var(--content-neutral)}
.plan-card__back{margin-top:var(--space-4)}
.plan-card__error{color:var(--color-danger-600);font-size:var(--text-sm);margin:var(--space-3) 0 0}

/* ---- HM-first composer header, rev §11 (2026-08-01) ----
   Les deux grands choix sont des PERSONNES : deux colonnes — HM (combobox +
   invités) à gauche, candidat (boîte de nom unifiée) à droite. Le connecteur
   décoratif du duo d'origine reste mort. */
.composer__meet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;max-width:760px}
.composer__meet-col{min-width:0}
/* La note qui remplace la colonne candidat sur la fourche « Me » : même
   gabarit, ton plus discret — elle explique, elle ne propose rien. */
.composer__meet-col--muted .composer__for-status{color:var(--color-neutral-600)}
.composer__meet .field-label-row{gap:var(--space-2)}

/* La « boîte personne » du candidat : hauteur et habillage du picker-box HM
   d'en face (48px, même bordure/ombre), pour que les deux colonnes se lisent
   comme deux réponses à la même question. Avatar : cercle pointillé vide →
   initiales (même pastel déterministe qu'avatar_style) dès le nom complet. */
.composer__for-names{display:flex;align-items:center;height:48px;border:1px solid var(--color-neutral-200);border-radius:11px;background:var(--color-white);box-shadow:var(--shadow-sm);overflow:hidden}
.composer__for-avatar{flex:none;display:flex;align-items:center;padding-left:11px}
.composer__for-avatar .avatar{width:28px;height:28px;font-size:10px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-bold)}
.composer__for-avatar--empty{width:28px;height:28px;border-radius:var(--radius-full);border:1.5px dashed var(--color-neutral-200);display:flex;align-items:center;justify-content:center;color:var(--color-neutral-300)}
.composer__for-names .input{flex:1;min-width:0;height:100%;padding:0 12px;border:none;font-size:var(--text-sm);color:var(--color-primary-900);background:transparent;outline:none;box-shadow:none;border-radius:0}
.composer__for-names .input:focus{background:var(--color-primary-50);box-shadow:none;border:none}
.composer__for-divider{flex:none;width:1px;align-self:stretch;margin:9px 0;background:var(--color-neutral-200)}
.composer__for-status{margin:7px 0 0;font-size:12px;color:var(--color-neutral-400);text-wrap:pretty}
/* État nominatif : le statut « Tracked — … » passe en ton primaire (handoff
   2026-08-02) ; la classe est posée/retirée par composer#refreshFor. */
.composer__for-status--track{color:var(--color-primary-600)}
/* Repliée par défaut : la rangée pointillée d'invitation, et l'action Clear
   sur la ligne de libellé (visible seulement une fois la boîte ouverte). */
.composer__for-add{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:6px 13px;border:1.5px dashed var(--color-neutral-200);border-radius:11px;background:var(--color-white);cursor:pointer;text-align:left;font-family:inherit}
.composer__for-add:hover{border-color:var(--color-primary-400)}
.composer__for-add-text{flex:1;font-size:12.5px;line-height:1.3;color:var(--color-neutral-400)}
.composer__for-add-cta{flex:none;white-space:nowrap;font-size:12.5px;font-weight:var(--font-weight-bold);color:var(--color-primary-500)}
.composer__for-clear{margin-left:auto;font-size:11.5px;font-weight:var(--font-weight-bold);color:var(--color-neutral-400);cursor:pointer;border:0;background:none;padding:0;font-family:inherit}
.composer__for-clear:hover{color:var(--color-primary-500)}

/* Rich picker shell: avatar + name/email + chevron around the combobox input */
.picker-box{display:flex;align-items:center;gap:10px;height:48px;padding:0 13px;border:1px solid var(--color-neutral-200);border-radius:11px;background:var(--color-white);box-shadow:var(--shadow-sm);cursor:text;text-align:left;transition:border-color .2s ease,box-shadow .2s ease}
.picker-box:hover{border-color:var(--color-primary-400);box-shadow:var(--shadow-md)}
.picker-box:focus-within{border-color:var(--color-primary-400);box-shadow:0 0 0 3px var(--color-primary-100);background:var(--color-white)}
.picker-box__avatar{width:31px;height:31px;font-size:11px;border-radius:var(--radius-full)}
.picker-box__text{flex:1;min-width:0}
.picker-box .combobox__input{display:block;width:100%;height:auto;padding:0;border:none;background:transparent;font-family:inherit;font-size:var(--text-sm);line-height:1.15;color:var(--content-base);outline:none;box-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picker-box--selected .combobox__input{font-weight:var(--font-weight-bold)}
.picker-box__email{font-size:var(--text-xs);color:var(--color-neutral-500);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picker-box__chevron{color:var(--color-neutral-400);flex:none}
.composer__details{display:flex;flex-direction:column;gap:var(--space-4)}
/* Invite block now sits under the centered people header */
/* Ancré à GAUCHE depuis le composeur HM-first : le centrage `auto` datait du
   duo de comboboxes — sans lui, un bloc centré sur 660px flottait dans le
   vide à côté d'une colonne de 460px alignée à gauche (vu 2026-08-01). */
#hm_invite_blocks .hm-invite{max-width:660px;margin:var(--space-3) 0 0}

/* Extra hiring managers: right-aligned chips under the people row */
/* Dans la colonne HM (rev §11) : chips + lien d'ajout, alignés à gauche sous
   le combobox qu'ils prolongent. */
.extra-hms{margin:10px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.extra-hms__chips{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2)}
.extra-hms__chips:empty{display:none}
.extra-hms__chip{display:flex;align-items:center;gap:9px;padding:6px 10px 6px 7px;border:1px solid var(--color-neutral-200);border-radius:var(--radius-full);background:var(--color-white)}
.extra-hms__chip .avatar{width:24px;height:24px;font-size:var(--text-2xs)}
.extra-hms__chip-name{font-size:13px;font-weight:var(--font-weight-bold)}
.extra-hms__remove{border:none;background:none;color:var(--color-neutral-400);font-size:var(--text-sm);line-height:1;padding:0 3px;cursor:pointer}
.extra-hms__remove:hover{color:var(--color-danger-500)}
.extra-hms__add{border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:var(--font-weight-bold);color:var(--color-primary-500);cursor:pointer;padding:0}
.extra-hms__add:hover{color:var(--color-primary-400)}
.extra-hms__add span{font-weight:var(--font-weight-normal);color:var(--color-neutral-400)}
/* .extra-hms__picker ne porte AUCUNE règle, et c'est voulu (2026-09-01).
   Avant la fusion 4e ce div ÉTAIT le menu — panneau blanc, bordure, ombre,
   et surtout `max-height: 280px; overflow-y: auto`. Depuis, il ne fait
   qu'HÉBERGER le sélecteur partagé, dont le menu est en position:absolute —
   et un menu absolu est ROGNÉ par tout ancêtre en overflow non-visible :
   le wrapper, haut comme sa pastille, rognait le menu entier. Focaliser le
   champ de recherche faisait alors défiler le WRAPPER (la pastille sortait
   par le haut), et il ne restait à l'écran qu'un ruban : le champ + deux
   barres de défilement (vu en production, capture du 2026-09-01 16:38 —
   la barre horizontale venait de la promotion d'axe, la même règle CSS que
   .rl-hm-menu__list le matin même, sur un AUTRE élément). Piège de mesure
   qui a retardé le diagnostic : getBoundingClientRect rend la GÉOMÉTRIE,
   pas le rognage — toutes les mesures étaient bonnes sur un menu invisible.
   Les règles .extra-hms__option* et __empty (les rangées de l'ancien menu)
   sont mortes du même coup — le balisage est .rl-hm-menu__item depuis la
   fusion — et partent avec. */

/* ---- Week strip (day columns, Google-appointment style) ---- */
/* Two-value gap: tight ROW gap when Format wraps under Duration, wide COLUMN
   gap side by side. Children's .field margins are disabled so the row's own
   margins control the vertical rhythm. */
.params-row{display:flex;align-items:flex-start;gap:var(--space-2) var(--space-10);flex-wrap:wrap;margin:0}
.params-row .field{margin-bottom:0}
.week-strip{display:flex;align-items:stretch;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-2)}
.week-strip__tz{float:right;font-size:var(--text-xs);font-weight:var(--font-weight-normal);color:var(--content-neutral)}
/* Week paging: all fetched weeks stay in the DOM, one visible at a time */
.week-pages{display:flex;flex:1;min-width:0}
.week-page{display:flex;gap:var(--space-2);flex:1}
.week-strip__nav{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;flex:none;border:none;background:var(--color-white);color:var(--color-primary-500);font-family:inherit;font-size:var(--text-xs);font-weight:var(--font-weight-bold);line-height:1.2;cursor:pointer}
.week-strip__nav:hover{color:var(--color-primary-400)}
.week-strip__nav--back{flex-basis:34px;border-right:1px solid var(--color-neutral-100);padding-right:var(--space-2);position:sticky;left:0}
.week-strip__nav--back:disabled{color:var(--color-neutral-200);cursor:default;pointer-events:none}
.week-strip__nav--next{flex-basis:72px;border-left:1px solid var(--color-neutral-100);padding-left:var(--space-2);position:sticky;right:0;box-shadow:-8px 0 8px -6px rgb(0 11 38 / .08)}
/* position:relative : ancre les .chip__box (checkbox masquées en absolute) à
   côté de leur label — sinon elles filent en haut du document et chaque clic
   sur une pastille fait SAUTER le scroll vers l'élément focalisé. */
.day-col{position:relative;display:flex;flex-direction:column;gap:var(--space-1);flex:1 1 0;min-width:62px}
.day-col__head{text-align:center;margin-bottom:var(--space-1)}
.day-col__dow{display:block;font-size:var(--text-2xs);font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:.05em;color:var(--content-neutral)}
.day-col__num{display:block;font-size:var(--text-xl);font-weight:var(--font-weight-bold)}
.day-col__dash{text-align:center;color:var(--content-neutral)}
.week-strip .chip{display:block;text-align:center;border-radius:var(--radius-full)}
.day-col__month{display:block;font-size:var(--text-2xs);color:var(--content-neutral);min-height:.875rem}
.booking--pick{max-width:820px}
.week-strip--booking{margin-top:var(--space-4)}

/* Auth flash — floats over the gradient (no app shell on these pages) */
/* Le flash des pages auth : MÊME composant que dans l'app (.flash), seulement
   décollé du flux. Il avait sa propre classe .auth-flash — une pilule colorée
   sans icône ni rôle ARIA — d'où deux langages de flash dans un seul produit.
   `inset-inline` + margin auto plutôt que left:50% + translateX : pas de
   transform, donc le box-shadow ne bave pas sur les demi-pixels. */
.flash--floating{position:fixed;top:var(--space-4);inset-inline:var(--space-4);margin-inline:auto;z-index:10;width:max-content;max-width:calc(100vw - 32px)}

/* ---------------------------------------------------------------------------
 * Trix rich-text editor — aligned with .textarea (trix.css loads before us,
 * so these override its defaults)
 * ------------------------------------------------------------------------- */
trix-editor {
  width: 100%;
  min-height: 160px;
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--content-base);
  padding: var(--space-2);
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  transition: border-color 150ms ease;
  outline: 0;
}
trix-editor:focus { border-color: var(--hover-base); }
trix-editor:empty::before { color: var(--content-neutral); }

trix-toolbar .trix-button-group { border-color: var(--border-neutral); }
trix-toolbar { margin-bottom: var(--space-1); }

/* Pas de pièces jointes : aucun stockage derrière (l'email part via Nylas). */
trix-toolbar .trix-button-group--file-tools { display: none; }

/* Un lien habillé en bouton (<a class="btn">) hérite du souligné navigateur :
   design_system.css ne le neutralise pas (ses .btn sont pensés <button>).
   Corrige tous les link_to ... class: "btn" présents et futurs. */
a.btn { text-decoration: none; }

/* Contact support (/support) — baseline sobre, repassé au design ensuite. */
.support-page { max-width: 620px; margin: 0 auto; padding: 36px 32px 48px; }
.support-page__title { font-size: var(--text-3xl); font-weight: var(--font-weight-extrabold); color: var(--content-base); margin-bottom: var(--space-2); }
.support-page__lead { max-width: 52ch; color: var(--content-neutral-reversed); margin-bottom: var(--space-6); }
.support-page__opt { color: var(--content-neutral); font-weight: var(--font-weight-normal); }
.support-page__message { min-height: 150px; resize: vertical; }
.support-page__alt { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--content-neutral); }
/* One card holding the form. */
.support-card { display: flex; flex-direction: column; gap: var(--space-4); padding: 24px 26px; background: var(--color-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.support-field { display: flex; flex-direction: column; gap: var(--space-1); }
/* Context chip: page_url made visible (source of truth stays the hidden field). */
.support-card__context { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.support-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 10px; background: var(--color-neutral-100); color: var(--content-neutral-reversed); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); border-radius: var(--radius-full); }
.support-card__context-note { font-size: var(--text-xs); color: var(--content-neutral); }
/* Footer row: reply promise left, submit right, ruled top. */
.support-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-neutral-100); }
.support-card__promise { font-size: var(--text-sm); color: var(--content-neutral); }

/* ---- Staff activation funnel ---- */
.funnel__sub { color: var(--content-neutral); margin-bottom: var(--space-6); }
.funnel__headline { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.funnel__metric { flex: 1; min-width: 200px; padding: var(--space-4); background: var(--color-white); border: 1px solid var(--border-neutral); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.funnel__metric--moat { border-color: var(--color-primary-200); background: var(--color-primary-50); }
.funnel__metric-label { display: block; font-size: var(--text-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--content-neutral); }
.funnel__metric-value { display: block; font-size: var(--text-4xl); font-weight: var(--font-weight-extrabold); color: var(--content-base); line-height: 1.1; margin: var(--space-1) 0; }
.funnel__metric--moat .funnel__metric-value { color: var(--color-primary-700); }
.funnel__metric-note { font-size: var(--text-xs); color: var(--content-neutral); }
.funnel__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.funnel__step { display: grid; grid-template-columns: 220px 1fr 60px; align-items: center; gap: var(--space-3); }
.funnel__step-label { font-size: var(--text-sm); color: var(--content-base); }
.funnel__bar { height: 22px; background: var(--color-neutral-100); border-radius: var(--radius-full); overflow: hidden; }
.funnel__bar-fill { display: block; height: 100%; background: var(--color-primary-400); border-radius: var(--radius-full); min-width: 2px; }
.funnel__step-count { text-align: right; font-weight: var(--font-weight-bold); color: var(--content-base); }
@media (max-width: 620px) { .funnel__step { grid-template-columns: 1fr 50px; } .funnel__bar { display: none; } }
.funnel__ranges { display: flex; gap: var(--space-1); margin-bottom: var(--space-6); }
.funnel__range { padding: 6px 12px; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--content-neutral-reversed); background: var(--color-neutral-100); border-radius: var(--radius-full); text-decoration: none; }
.funnel__range:hover { background: var(--color-neutral-200); }
.funnel__range--active { background: var(--color-primary-500); color: var(--color-white); }

/* Licence directory (the per-org table below the funnel bars). */
.funnel__orgs-title { margin: var(--space-8) 0 var(--space-3); font-size: var(--text-lg); font-weight: var(--font-weight-bold); color: var(--content-base); }
.funnel__orgs { width: 100%; border-collapse: collapse; background: var(--color-white); border: 1px solid var(--border-neutral); border-radius: var(--radius-lg); overflow: hidden; }
.funnel__orgs th { text-align: left; font-size: var(--text-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--content-neutral); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-neutral); }
.funnel__orgs td { font-size: var(--text-sm); color: var(--content-base); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-neutral); }
.funnel__orgs tr:last-child td { border-bottom: none; }
.funnel__orgs-num { text-align: right; }
.funnel__plan { display: inline-block; padding: 2px 10px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-weight-bold); }
.funnel__plan--pro { background: var(--color-primary-100); color: var(--color-primary-700); }
.funnel__plan--free { background: var(--color-neutral-100); color: var(--content-neutral); }

/* Bandeau d'installation de l'extension Chrome (haut de /links). */
.ext-banner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  background: var(--color-primary-50); border: 1px solid var(--color-primary-100);
  border-radius: var(--radius-md); }
.ext-banner__mark { display: flex; flex-direction: column; gap: 2px; width: 22px;
  height: 22px; flex: none; }
.ext-banner__mark span { height: 48%; border-radius: 999px; }
.ext-banner__mark span:first-child { background: var(--color-primary-700); border-radius: 999px 0 0 999px; }
.ext-banner__mark span:last-child { background: var(--color-primary-400); border-radius: 0 999px 999px 0; }
.ext-banner__text { flex: 1 1 300px; min-width: 0; }
.ext-banner__title { font-size: var(--text-sm); font-weight: 700; color: var(--content-base); }
.ext-banner__sub { font-size: var(--text-xs); color: var(--content-neutral); margin-top: 2px; }
.ext-banner__kbd { display: inline-block; }
.ext-banner__cta { flex: none; }
.ext-banner__dismiss { flex: none; width: 26px; height: 26px; border: 0; background: transparent;
  color: var(--content-neutral); font-size: 14px; cursor: pointer; border-radius: var(--radius); }
.ext-banner__dismiss:hover { background: var(--color-primary-100); color: var(--content-base); }
/* Le bandeau enroule quand le CONTENU le demande, pas à une largeur devinée :
   la règle à 620px laissait une bande ~620–900px où titre, sous-titre, CTA et
   ✕ se serraient sur une ligne (signalé 2026-07-31). */

/* ---------------------------------------------------------------------------
   Staff — rédaction du centre d'aide (/staff/help_articles), refonte
   2026-07-25. Outil interne : tokens du design system uniquement. */
.staff-help { max-width: 1180px; margin: 0 auto; padding: var(--space-6) var(--space-4); }
.staff-help__head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.staff-help__title { font-size: var(--text-xl); font-weight: 700; color: var(--content-base); margin: 0 0 4px; }
.staff-help__meta-line { margin: 0; font-size: var(--text-sm); color: var(--content-neutral); }
.staff-help__head .btn { display: inline-flex; align-items: center; gap: 7px; }
.staff-help__empty { color: var(--content-neutral); }

.staff-help__toolbar { display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-5); flex-wrap: wrap; }
.staff-help__searchform { position: relative; display: flex; align-items: center;
  flex: 1; min-width: 220px; max-width: 320px; }
.staff-help__searchform svg { position: absolute; left: 12px; color: var(--content-neutral); }
.staff-help__searchform input { width: 100%; height: 38px; padding: 0 var(--space-2) 0 34px;
  border: 1px solid var(--border-neutral); border-radius: var(--radius);
  font: inherit; font-size: var(--text-sm); }
.staff-help__searchform input:focus { outline: 0; border-color: var(--hover-base); }
.staff-help__chip { padding: 7px 13px; border-radius: var(--radius);
  font-size: var(--text-sm); font-weight: 700; text-decoration: none;
  border: 1px solid var(--border-neutral); color: var(--content-neutral); background: var(--color-white); }
.staff-help__chip--on { background: var(--color-primary-500); border-color: var(--color-primary-500); color: var(--color-white); }

.staff-help__group { margin-bottom: var(--space-6); }
.staff-help__grouphead { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.staff-help__caticon { width: 24px; height: 24px; flex: none; border-radius: var(--radius);
  background: var(--color-primary-100); color: var(--color-primary-600);
  display: flex; align-items: center; justify-content: center; }
.staff-help__catname { font-size: var(--text-sm); font-weight: 700; }
.staff-help__count { font-size: var(--text-xs); font-weight: 700; padding: 1px 7px;
  border-radius: 999px; background: var(--color-neutral-100); color: var(--content-neutral); }
.staff-help__cardlist { border: 1px solid var(--border-neutral); border-radius: var(--radius);
  overflow: hidden; background: var(--color-white); }
.staff-help__row { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-neutral-100); }
.staff-help__row:last-child { border-bottom: none; }
.staff-help__rowmain { flex: 1; min-width: 0; }
.staff-help__rowtitle { font-size: var(--text-sm); font-weight: 700; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staff-help__rowslug { font-size: 11.5px; color: var(--color-neutral-400);
  font-family: var(--font-mono, monospace); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staff-help__status { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 96px;
  justify-content: center; padding: 3px 10px; border-radius: 999px;
  font-size: var(--text-xs); font-weight: 700; }
.staff-help__status span { width: 5px; height: 5px; border-radius: 999px; }
.staff-help__status--published { background: var(--color-success-100); color: var(--color-success-700); }
.staff-help__status--published span { background: var(--color-success-500); }
.staff-help__status--draft { background: var(--color-neutral-100); color: var(--color-neutral-600); }
.staff-help__status--draft span { background: var(--color-neutral-400); }
.staff-help__lang { flex: 0 0 66px; text-align: center; font-size: var(--text-xs);
  font-weight: 700; color: var(--color-neutral-600); }
.staff-help__lang--missing { color: var(--color-neutral-300); }
.staff-help__updated { flex: 0 0 110px; font-size: var(--text-xs);
  color: var(--color-neutral-400); text-align: right; }
.staff-help__actions { flex: 0 0 196px; display: flex; justify-content: flex-end;
  align-items: center; gap: 4px; }
.staff-help__act { font-size: var(--text-xs); font-weight: 700; color: var(--content-neutral);
  padding: 5px 9px; border-radius: var(--radius); white-space: nowrap; text-decoration: none; }
.staff-help__act:hover { background: var(--color-neutral-100); }
.staff-help__act--edit { color: var(--color-primary-500); }
.staff-help__act--edit:hover { background: var(--color-primary-50); }
.staff-help__trash { width: 26px; height: 26px; display: flex; align-items: center;
  justify-content: center; border: 0; border-radius: var(--radius); background: transparent;
  color: var(--color-neutral-300); cursor: pointer; }
.staff-help__trash:hover { background: var(--color-danger-50); color: var(--color-danger-500); }

/* --- Éditeur (staff-ed) --------------------------------------------------- */
.staff-ed__bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center;
  gap: var(--space-3); height: 60px; margin: 0 calc(-1 * var(--space-4)) var(--space-5);
  padding: 0 var(--space-4); background: var(--color-white);
  border-bottom: 1px solid var(--border-neutral); }
.staff-ed { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-4) var(--space-8); }
.staff-ed__backlink { display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: 700; color: var(--content-neutral); text-decoration: none; }
.staff-ed__backlink:hover { color: var(--color-primary-500); }
.staff-ed__sep { width: 1px; height: 22px; background: var(--border-neutral); }
.staff-ed__name { font-size: var(--text-sm); font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.staff-ed__spacer { flex: 1; }
.staff-ed__previewbtn { height: 36px; padding: 0 14px; border-radius: var(--radius);
  border: 1px solid var(--color-primary-200); background: var(--color-primary-50);
  color: var(--color-primary-600); font: inherit; font-size: var(--text-sm);
  font-weight: 700; cursor: pointer; }
.staff-ed.preview-off .staff-ed__previewbtn { background: var(--color-white);
  border-color: var(--border-neutral); color: var(--content-neutral); }

.staff-ed__layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--space-5); align-items: start; }
.staff-ed__tabs { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.staff-ed__tabset { display: inline-flex; background: var(--color-neutral-100);
  border-radius: var(--radius); padding: 4px; gap: 4px; }
.staff-ed__tab { padding: 6px 14px; border-radius: var(--radius); border: 0;
  background: transparent; font: inherit; font-size: var(--text-sm); font-weight: 700;
  color: var(--content-neutral); cursor: pointer; }
.staff-ed__tab.is-active { background: var(--color-white); color: var(--content-base);
  box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / .06)); }
.staff-ed__transline { font-size: var(--text-xs); font-weight: 700; color: var(--color-neutral-400); }
.staff-ed__transline.is-en { color: var(--color-primary-500); }

.staff-ed__panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4); align-items: start; }
.staff-ed.preview-off .staff-ed__panes { grid-template-columns: minmax(0, 1fr); }
.staff-ed__pane { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.staff-ed__title { font-weight: 700; }
.staff-ed__bodylabel { display: flex; align-items: center; justify-content: space-between; }
.staff-ed__mdhint { font-size: var(--text-xs); color: var(--color-neutral-400); }
.staff-ed__body { min-height: 420px; font-family: var(--font-mono, monospace);
  font-size: 13px; line-height: 1.65; resize: vertical; }

.staff-ed__preview { border: 1px solid var(--border-neutral); border-radius: var(--radius);
  overflow: hidden; align-self: stretch; }
.staff-ed__previewhead { display: flex; align-items: center; gap: var(--space-2);
  padding: 9px 14px; border-bottom: 1px solid var(--border-neutral);
  background: var(--color-white); font-size: var(--text-xs); font-weight: 700;
  color: var(--content-neutral); }
.staff-ed__previewdot { width: 6px; height: 6px; border-radius: 999px;
  background: var(--color-success-500); }
.staff-ed__fallback { margin-left: auto; font-size: var(--text-xs); font-weight: 700;
  padding: 2px 8px; border-radius: 999px; background: var(--color-primary-50);
  color: var(--color-primary-500); }
.staff-ed__previewbody { padding: var(--space-5); background: var(--color-white);
  max-height: 640px; overflow-y: auto; }
.staff-ed__previewbody h1 { margin: 0 0 var(--space-4); font-size: var(--text-xl);
  font-weight: 700; line-height: 1.2; }
.sh-doc-preview { color: var(--content-base); font-size: var(--text-sm); line-height: 1.65; }
.sh-doc-preview h2 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-base); font-weight: 700; }
.sh-doc-preview h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); font-weight: 700; }
.sh-doc-preview p { margin: 0 0 var(--space-3); }
.sh-doc-preview ul, .sh-doc-preview ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.sh-doc-preview li { margin-bottom: var(--space-1); }
.sh-doc-preview code { background: var(--color-neutral-100); padding: 1px 5px; border-radius: 4px; }
.sh-doc-preview img { max-width: 100%; height: auto; border: 1px solid var(--border-neutral);
  border-radius: var(--radius); margin: var(--space-1) 0 var(--space-3); }

/* Rail éditeur — captures d'écran attachées. */
.staff-ed__filefield { font-size: var(--text-xs); }
.staff-ed__images { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.staff-ed__image { display: flex; align-items: center; gap: var(--space-2); }
.staff-ed__thumb { width: 44px; height: 32px; object-fit: cover; flex: none;
  border: 1px solid var(--border-neutral); border-radius: var(--radius); }
.staff-ed__snippet { flex: 1; min-width: 0; font-family: var(--font-mono, monospace);
  font-size: 11px; height: 30px; }

.staff-ed__rail { position: sticky; top: 76px; display: flex; flex-direction: column;
  gap: var(--space-4); border: 1px solid var(--border-neutral);
  border-radius: var(--radius); padding: var(--space-4); }
.staff-ed__cats { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-1); }
.staff-ed__cat { display: flex; align-items: center; gap: var(--space-2);
  padding: 7px 10px; border-radius: var(--radius); font-size: var(--text-sm);
  color: var(--content-neutral); cursor: pointer; }
.staff-ed__cat:has(input:checked) { background: var(--color-primary-50);
  color: var(--color-primary-600); font-weight: 700; }
.staff-ed__slug { font-family: var(--font-mono, monospace); font-size: var(--text-xs); }
.staff-ed__warn { margin: 5px 0 0; font-size: var(--text-xs); color: var(--color-neutral-400); }
.staff-ed__pos { width: 90px; }
.staff-ed__facts { border-top: 1px solid var(--color-neutral-100); padding-top: var(--space-3);
  display: flex; flex-direction: column; gap: 6px; font-size: var(--text-xs);
  color: var(--color-neutral-400); }
.staff-ed__facts div { display: flex; justify-content: space-between; }
.staff-ed__facts strong { color: var(--content-neutral); font-weight: 600; }

@media (max-width: 900px) {
  .staff-ed__layout, .staff-ed__panes { grid-template-columns: 1fr; }
  .staff-ed__rail { position: static; }
  .staff-help__lang, .staff-help__updated { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Booking links list (inside .stg-card--hero) — plusieurs liens « event types »,
   une rangée par lien (chaque lien EST sa durée). Aucune couleur nouvelle.
   ───────────────────────────────────────────────────────────────────────── */
.stg-links { padding: 8px 22px; }
/* Les retraits appartenaient à la carte héro ; sans elle, la carte porte déjà
   son propre padding. */
.stg-links--flat { padding: 0; }
.stg-links > .stg-note { margin: 8px 0 6px; }

/* La rangée est désormais enveloppée (#booking_link_<id>) pour que l'éditeur de
   titre puisse se déplier DESSOUS : le filet de séparation passe donc sur
   l'enveloppe, sinon il se glisserait entre la rangée et son propre panneau. */
.stg-link { border-top: 1px solid var(--color-neutral-100); }
.stg-link:first-child { border-top: none; }

.stg-link-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: none;
}

.stg-link-item__badge {
  width: 44px; height: 44px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em;
  background: var(--color-primary-100); color: var(--color-primary-600);
}
.stg-link-item--off .stg-link-item__badge,
.stg-link-item--inert .stg-link-item__badge { background: var(--color-neutral-100); color: var(--color-neutral-400); }

/* Colonne d'identité : le nom au-dessus, l'URL en dessous. C'est elle qui
   occupe l'espace libre de la rangée — d'où le flex:1 déplacé ici depuis
   __url : dans un conteneur en COLONNE, un flex:1 sur l'URL l'aurait étirée en
   hauteur au lieu de la laisser sur sa ligne. */
.stg-link-item__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.stg-link-item__nameform { margin: 0; display: flex; }

/* Champ « sans couture » : invisible au repos, il ne se signale qu'au survol et
   au focus. Un nom vide doit rester silencieux — la plupart des liens n'en ont
   pas — sans pour autant laisser un input nu dans la rangée. */
.stg-link-item__name-input {
  width: 100%; min-width: 0; box-sizing: border-box;
  border: none; background: transparent; padding: 2px 6px; margin-left: -6px; border-radius: 6px;
  font-family: inherit; font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--color-primary-900);
}
.stg-link-item__name-input::placeholder { color: var(--color-neutral-300); font-weight: 700; }
.stg-link-item__name-input:hover { background: var(--color-neutral-50); }
.stg-link-item__name-input:focus { background: var(--color-white); outline: 2px solid var(--color-primary-300); outline-offset: 0; }
.stg-link-item__name { font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em; padding: 2px 0; }
.stg-link-item--off .stg-link-item__name-input,
.stg-link-item--inert .stg-link-item__name { color: var(--color-neutral-400); }

.stg-link-item__url {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--color-neutral-600);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stg-link-item--off .stg-link-item__url,
.stg-link-item--inert .stg-link-item__url { color: var(--color-neutral-300); text-decoration: line-through; }

/* Panneau de réglages du lien, déplié sous la rangée. Le retrait de
   56px (badge 44 + gap 12) l'aligne sous la colonne d'identité. */
.stg-link-item__extra { padding: 2px 0 14px 56px; }
.stg-link-item__extra .stg-micro { margin-bottom: 6px; }

/* Bloc « Meeting details » : format + adresse + description, un Save explicite.
   L'adresse n'existe visuellement que quand « On-site » est coché — CSS pur,
   :has() est acquis (allow_browser :modern). */
.stg-link-details { margin-bottom: 14px; }
/* Sélecteurs joints (/code-review 2026-08-11) : le rythme vertical des deux
   formulaires — panneau d'un lien et piles de Settings — est UN fait, pas
   deux copies qui dériveraient sans témoin. */
.stg-link-details__form, .stg-form-stack form { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; }
.stg-link-details__address { display: none; width: 100%; }
.stg-link-details__form:has(.stg-format-onsite:checked) .stg-link-details__address { display: block; }
.stg-link-details__address .input, .stg-link-details__description { width: 100%; box-sizing: border-box; }
.stg-link-details__description { resize: vertical; font-family: inherit; }
/* La fenêtre de réservation du lien : libellé, select, phrase d'aide empilés,
   comme le reste du formulaire (qui est un flex column). `width: 100%` sur le
   bloc et non sur le select — un <select> à 100% dans un panneau étroit devient
   illisible, et il se dimensionne très bien sur son option la plus longue. */
.stg-link-details__horizon { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.stg-link-details__horizon .stg-note { margin: 0; }

/* Bloc « Booking questions » du panneau Meeting details : une rangée =
   question + case Required + retrait. Tout en tokens/classes existants. */
.stg-questions { width: 100%; margin-top: 4px; }
.stg-questions__hint { font-size: 12px; color: var(--color-neutral-500); margin: 0 0 8px; line-height: 1.45; }
.stg-questions__row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.stg-questions__row .input { flex: 1; min-width: 0; }
.stg-questions__req {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 12px; color: var(--color-neutral-600); cursor: pointer;
}
.stg-questions__remove {
  flex: none; width: 28px; height: 28px; border: 0; border-radius: var(--radius-sm, 6px);
  background: transparent; color: var(--color-neutral-400); font-size: 18px; line-height: 1;
  cursor: pointer;
}
.stg-questions__remove:hover { background: var(--color-neutral-100); color: var(--color-neutral-600); }

/* État vide (audit externe L4) : un encadré pointillé qui DIT le résultat,
   pas seulement l'absence — sans lui le bouton Add flottait sous une phrase
   et le Save était un no-op dans l'état où naît chaque compte. */
.stg-questions__empty {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; margin-bottom: 8px;
  border: 1px dashed var(--color-neutral-300); border-radius: var(--radius);
  background: var(--color-neutral-50);
  font-size: 13px; color: var(--color-neutral-500); line-height: 1.5;
}

/* Rangées d'actions (L3) : Add + sa limite, puis Save + sa pastille — même
   déclaration, sélecteurs joints. L'arête visible du bouton Add vient de sa
   propre classe (`btn-outline-primary`, design system), pas d'une règle de
   conteneur qui contredirait la classe écrite dans le markup
   (/code-review 2026-08-11). */
.stg-questions__actions, .stg-questions-form__save { display: flex; align-items: center; gap: 10px; }
.stg-questions-form__save { margin-top: 10px; }
.stg-questions__limit { font-size: 12px; color: var(--color-neutral-400); }

/* Aperçu du formulaire candidat (Settings + panneau d'un lien). Une LISTE de
   rangées « champ / règle », pas une imitation du formulaire réel : imiter
   inviterait à taper dedans, et un aperçu dans lequel on tape est un bug.
   Les champs fixes (nom, prénom, e-mail) sont volontairement montrés, d'où la
   variante --fixed qui les distingue sans les effacer. */
.stg-questions-form { width: 100%; }

/* Le bloc « Booking form » du panneau d'un lien. `width: 100%` n'est PAS
   décoratif : le parent .stg-link-details__form est un flex column avec
   `align-items: flex-start`, où un enfant sans largeur déclarée se rétracte sur
   son contenu. Tous ses frères la déclarent (adresse, description, fenêtre,
   questions) ; celui-ci ne l'a jamais fait, et le `width: 100%` de
   .stg-questions se résolvait alors contre une boîte déjà rétrécie — rangées de
   questions, contrôle segmenté et aperçu tous dimensionnés sur la mauvaise
   largeur, colonne du panneau en dents de scie à cet endroit précis.
   Séparateur : le border-top vient de la liste de sélecteurs partagée avec
   .stg-group--ruled / .stg-form-stack--ruled (~l.712) — UN filet, une seule
   déclaration, comme ce commentaire l'exigeait déjà (« deux filets différents
   dans deux panneaux de la même app se remarquent »). */
.stg-form-override {
  width: 100%;
  margin-top: 10px;
  padding-top: 12px;
}

/* « Pas encore enregistré » : l'aperçu juste en dessous décrit le formulaire
   ENREGISTRÉ, et cette ligne le date dès que l'interrupteur s'en écarte.
   warning-700 et non danger : rien n'est cassé, il manque un Save. */
/* Compteur des éditeurs à pastilles : muet tant qu'on est loin de la borne,
   rouge une fois dépassée. Le contenteditable n'hérite pas du `maxlength` du
   champ qu'il recouvre — sans lui, rien ne disait qu'on écrivait un titre que
   le serveur allait refuser. */
.stg-count {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-neutral-500);
}
.stg-count--over { color: var(--color-danger-500); }

.stg-form-override__pending {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-warning-700);
}

.form-preview {
  width: 100%;
  /* Plafonné (audit externe L6) : en pleine largeur de carte, « First name »
     et « Always asked » finissaient à ~1300px l'un de l'autre et cessaient de
     se lire comme UNE rangée — une liste de quatre lignes dans une boîte de
     1500px. Le plafond vaut aussi pour le panneau d'un lien, plus étroit. */
  max-width: 560px;
  /* Avec bordure ET padding, `width: 100%` seul déborde du parent : la boîte de
     contenu ferait 100% et les 26px de chrome s'ajouteraient par-dessus. */
  box-sizing: border-box;
  margin-top: 6px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius);
  background: var(--color-neutral-50);
  padding: var(--space-1) var(--space-3);
}
.form-preview__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 7px 0;
  border-bottom: 1px solid var(--color-neutral-200);
}
.form-preview__row:last-of-type { border-bottom: 0; }
.form-preview__field {
  font-size: var(--text-sm);
  color: var(--color-neutral-700);
  min-width: 0;
  overflow-wrap: anywhere;
}
.form-preview__row--custom .form-preview__field { font-weight: var(--font-weight-bold); }
.form-preview__rule {
  font-size: 12px;
  color: var(--color-neutral-600);
  white-space: nowrap;
}
.form-preview__rule--fixed { color: var(--color-neutral-400); }
.form-preview__source {
  margin: 0;
  padding: 7px 0 2px;
  font-size: 12px;
  color: var(--color-neutral-500);
}

/* Bloc « Also attending » : pastilles retirables + sélecteur d'ajout. */
.stg-link-parts { margin-bottom: 14px; }
.stg-link-parts__hint { font-size: 12px; color: var(--color-neutral-500); margin: 0 0 8px; line-height: 1.45; }
.stg-link-parts__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.stg-link-parts__chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 11px;
  border-radius: 999px; background: var(--color-primary-100); color: var(--color-primary-600);
  font-size: 12px; font-weight: 700;
}
.stg-link-parts__remove-form { display: inline-flex; margin: 0; }
.stg-link-parts__remove {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border: none; border-radius: 999px; background: transparent; color: var(--color-primary-500);
  cursor: pointer; padding: 0;
}
.stg-link-parts__remove:hover { background: var(--color-primary-200); }
.stg-link-parts__add { display: flex; align-items: center; gap: 8px; margin: 0; }
/* Le sélecteur partagé remplace le <select> natif (2026-09-01) : il hérite du
   plafond de largeur que portait .stg-link-parts__select — supprimée dans le
   même commit, sinon quatrième classe morte de la feuille. Le variant `:pill`
   reste inline-flex — c'est le MENU qui s'élargit à son contenu (.rl-hm-menu,
   width: max-content), pas le déclencheur, donc plafonner la pastille ne
   tronque aucun nom dans la liste. */
.stg-link-parts__add .rl-hm-picker { max-width: 280px; }
.stg-link-item__extra-form { display: flex; align-items: center; gap: 8px; margin: 0; }
.stg-link-item__title-input { flex: 1; min-width: 0; }

/* Champ à jetons : même peau que .input, mais il héberge des pastilles inline.
   La syntaxe %{…} n'atteint jamais l'œil du recruteur — il voit « Candidate »,
   le formulaire envoie « %{candidate} ». */
.stg-token-field {
  flex: 1; min-width: 0; min-height: 36px; padding: 5px 11px; box-sizing: border-box;
  border: 1px solid var(--color-neutral-200); border-radius: 9px; background: var(--color-white);
  font-size: 13px; color: var(--color-primary-900); line-height: 24px; cursor: text;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.stg-token-field:focus { outline: none; border-color: var(--color-primary-400); }
/* Variante multi-lignes (modèle de message) : les "\n" des nœuds texte font
   les retours — pre-wrap, hauteur de paragraphe. */
.stg-token-field--area { min-height: 132px; white-space: pre-wrap; line-height: 1.55; }
/* Aperçu du message complet, texte exact (pre-wrap) — le pendant bloc du
   « On the calendar: » une-ligne du titre. */
.stg-msg-preview { margin-top: 6px; padding: 10px 12px; background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-100); border-radius: 9px;
  font-size: 12.5px; line-height: 1.55; color: var(--color-neutral-600); white-space: pre-wrap; }
/* Un contenteditable n'a pas de ::placeholder : on emprunte son aria-label. */
.stg-token-field:empty::before { content: attr(aria-label); color: var(--color-neutral-300); }
.stg-token {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin: 0 1px;
  border-radius: 6px; background: var(--color-primary-100); color: var(--color-primary-600);
  font-size: 12px; font-weight: 700; white-space: nowrap; vertical-align: middle; user-select: none;
}
/* Les noms génériques (stg-tokenrow__*) servent PARTOUT où l'on édite un
   modèle de titre — la rangée d'un booking link comme la carte Settings des
   scheduling links. Les noms en stg-link-item__* restent pour la rangée, qui
   les portait déjà ; même règle, deux contextes. */
.stg-link-item__extra-chips, .stg-tokenrow__chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.stg-link-item__extra-label, .stg-tokenrow__label { font-size: 12px; color: var(--color-neutral-500); }
.stg-var-chip {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border: 1px solid var(--color-neutral-200); border-radius: 999px; background: var(--color-white);
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--color-primary-900); cursor: pointer;
}
.stg-var-chip:hover { border-color: var(--color-primary-400); color: var(--color-primary-500); }
/* « Translate from French/English » (2026-08-02) : une action texte discrète
   sous les chips — un brouillon à la demande, pas un réglage. */
.stg-translate { border: none; background: none; padding: 0; margin-top: 8px;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--color-primary-500); cursor: pointer; }
.stg-translate:hover { text-decoration: underline; }
.stg-translate:disabled { color: var(--color-neutral-400); cursor: default; text-decoration: none; }
.stg-link-item__extra-hint, .stg-tokenrow__hint { font-size: 12px; color: var(--color-neutral-500); margin-top: 8px; line-height: 1.45; }
.stg-link-item__extra-hint b, .stg-tokenrow__hint b { color: var(--color-primary-900); font-weight: 700; }
/* Dans Settings le champ à jetons n'est pas dans une rangée flex : il doit
   donc occuper toute la largeur, alors que .stg-token-field ne pose que flex:1. */
.stg-tokenrow__chips + .stg-tokenrow__hint { margin-top: 8px; }
[data-controller~="event-title"] > .stg-token-field { width: 100%; margin-top: 2px; }

.stg-link-item__chips { flex: none; display: flex; align-items: center; gap: 6px; }
.stg-chip {
  flex: none; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  background: var(--color-neutral-100); color: var(--color-neutral-500);
}
.stg-chip--default { background: var(--color-primary-100); color: var(--color-primary-500); }
/* Lien HM : la puce nomme la personne dont le calendrier est réservé. */
.stg-chip--hm { background: var(--color-primary-100); color: var(--color-primary-600); }
.stg-link-item--inert .stg-chip { color: var(--color-neutral-400); }

.stg-link-item__actions { flex: none; display: flex; align-items: center; gap: 8px; }
/* `position: relative` : l'ANCRE de la .stg-switch__box masquée qu'il contient
   (cf. §7). Le second porteur de cet interrupteur, avec .stg-switchrow. */
.stg-link-item__toggle { display: inline-flex; align-items: center; cursor: pointer; position: relative; }

/* ⋯ menu */
.stg-link-item__menu { position: relative; flex: none; }
.stg-link-item__more {
  width: 28px; height: 28px; flex: none; border: none; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; color: var(--color-neutral-400);
}
.stg-link-item__more:hover,
.stg-link-item__more[aria-expanded="true"] { color: var(--color-primary-500); background: var(--color-primary-50); }

.stg-menu {
  position: absolute; right: 0; top: calc(100% - 6px); width: 216px; z-index: 20;
  background: var(--color-white); border: 1px solid var(--color-neutral-200);
  border-radius: 8px; box-shadow: var(--shadow-lg); padding: 5px;
}
.stg-menu__form { margin: 0; }
.stg-menu__item {
  display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  padding: 8px 11px; border-radius: 6px;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--color-primary-900);
}
.stg-menu__item:hover { background: var(--color-primary-50); color: var(--color-primary-500); }
.stg-menu__item--danger { color: var(--color-neutral-600); }
.stg-menu__item--delete { color: var(--color-danger-500); }
.stg-menu__item--danger:hover, .stg-menu__item--delete:hover { background: var(--color-danger-50); color: var(--color-danger-500); }
.stg-menu__rule { height: 1px; background: var(--color-neutral-100); margin: 4px 6px; }

/* Page Reusable links (REV 2, 2026-08-02) : la carte-liste pleine largeur,
   la ligne vide en place, et la bande « New link » toujours visible. */
/* JAMAIS overflow:hidden ici : le menu ⋯ des rangées est en absolu DANS la
   carte, le rogner le coupe au bord (dropdown_controller documente cette
   hypothèse). Les coins du bandeau bas sont arrondis par le bandeau lui-même. */
.stg-card--links { padding: 0; }
/* La carte a perdu son padding pour que la bande et l'avis courent bord à
   bord — les RANGÉES, elles, doivent retrouver leur retrait (audit : elles
   touchaient l'arrondi de la carte, et l'anneau --flash collait au bord). */
.stg-card--links .stg-links--flat { padding: 0 22px; }
.rl-empty-inline { margin: 0; padding: 14px 0 16px; font-size: 13.5px; color: var(--color-neutral-500); }
/* Le traitement de BANDE, partagé par les quatre onglets : trois l'obtiennent
   via .rl-addrow, External via .rl-extadd — qui EMPILE un bouton et un
   panneau au lieu d'aligner des chips, d'où deux sélecteurs et un seul corps.
   Une liste de sélecteurs, jamais une copie : les deux bandes ne sont jamais à
   l'écran ensemble, une copie divergerait sans que personne le voie. External
   avait justement été livré sans rien de tout ceci (2026-08-05) — champs
   collés au bord et coins carrés traversant l'arrondi 14px de la carte. */
.rl-addrow, .rl-extadd {
  padding: 13px 22px; background: var(--color-neutral-50);
  border-top: 1px solid var(--color-neutral-100);
  /* Dernier enfant d'une carte à coins 14px : il porte son propre arrondi
     (13 = 14 − 1px de bordure), au lieu de se faire rogner par la carte. */
  border-radius: 0 0 13px 13px;
}
/* Propre à .rl-addrow : la mise en ligne de ses chips. */
.rl-addrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rl-addrow__label {
  font-size: 11px; font-weight: var(--font-weight-bold);
  letter-spacing: .05em; text-transform: uppercase; color: var(--color-neutral-400);
}
/* La bande porte déjà le fond et l'espacement : le picker y perd son cadre. */
.rl-addrow .stg-picker__custom { flex-basis: 100%; margin-top: 0; }
.rl-addrow__chip {
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--color-neutral-200); background: var(--color-white);
  font-family: inherit; font-size: 12px; font-weight: var(--font-weight-bold);
  color: var(--color-primary-500); cursor: pointer;
}
.rl-addrow__chip:hover { border-color: var(--color-primary-400); background: var(--color-primary-50); }
/* Sélecteur de HM de la bande : pastille + menu qui ouvre vers le HAUT. */
.rl-hm-picker { position: relative; display: inline-flex; }
.rl-hm-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px; border-radius: 999px;
  border: 1px solid var(--color-neutral-200); background: var(--color-white);
  font-family: inherit; font-size: 12.5px; font-weight: var(--font-weight-bold);
  color: var(--color-primary-900); cursor: pointer;
}
.rl-hm-pill:hover { border-color: var(--color-primary-400); }
.rl-hm-pill__avatar {
  width: 20px; height: 20px; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: var(--font-weight-bold);
}
.rl-hm-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 240px;
  /* Rembourrage VERTICAL seulement : l'horizontal est descendu dans le champ
     et dans la liste (voir .rl-hm-menu__list — le conteneur de défilement rogne
     à son bord de padding, donc c'est lui qui doit offrir sa marge à l'anneau
     de focus). */
  padding: 5px 0;
  background: var(--color-white); border: 1px solid var(--color-neutral-200);
  border-radius: 11px; box-shadow: var(--shadow-lg, 0 8px 24px rgb(2 27 89 / .14));
  /* Le plafond et le défilement ont MIGRÉ sur .rl-hm-menu__list quand le champ
     de recherche est arrivé (2026-08-05) : laissés ici, le champ aurait défilé
     avec la liste et disparu au moment précis où il sert. La coquille se
     contente d'empiler champ / liste / état vide. */
  display: flex; flex-direction: column;
}
.rl-hm-menu__search { padding: 0 7px 6px; }
.rl-hm-menu__searchinput {
  /* border-box explicite : contrairement à site.css, la feuille de l'app ne le
     pose pas globalement — sans lui, width:100% + padding déborderait des 5px
     de padding du menu. */
  width: 100%; box-sizing: border-box;
  padding: 6px 9px; border-radius: 8px;
  border: 1px solid var(--color-neutral-200); background: var(--color-white);
  font-family: inherit; font-size: 13px; color: var(--color-primary-900);
}
.rl-hm-menu__searchinput:focus-visible {
  outline: 0; border-color: var(--color-primary-400); box-shadow: var(--ring);
}
.rl-hm-menu__list {
  /* Plafond + défilement interne : sans eux, la liste allongée par les
     collègues débordait l'écran (constaté 2026-08-04). min-height:0 est
     indispensable ici : un enfant flex vaut min-height:auto par défaut, refuse
     donc de descendre sous la hauteur de son contenu, et overflow-y ne
     déclencherait jamais rien.
     Le rembourrage vit ICI et pas sur la coquille : un conteneur de défilement
     rogne à son bord de PADDING, donc une liste à zéro rembourrage couperait
     l'anneau de focus de 3px des items sur les côtés et au-dessus du premier —
     l'anneau posé le 2026-08-05 précisément pour que le focus clavier se voie
     (revue de code, même jour). 3px verticaux = la largeur exacte de l'anneau. */
  padding: 3px 5px;
  max-height: min(340px, 60vh);
  /* `hidden auto` et non `overflow-y: auto` seul : quand UN axe est `auto`,
     la spec promeut l'autre de `visible` à `auto` en silence — le menu gagnait
     donc une barre de défilement HORIZONTALE dès qu'une rangée débordait d'un
     pixel (fenêtre étroite, zoom), précisément ce que l'ellipsis des rangées
     existe pour éviter. Vu en production le 2026-09-01 : le picker des invités
     réduit à deux barres grises. L'axe X se dit donc explicitement. */
  overflow: hidden auto; min-height: 0;
}
/* 14px = 5px (liste) + 9px (item) : l'état vide s'aligne sur le texte des
   rangées qu'il remplace. */
.rl-hm-menu__empty {
  margin: 0; padding: 9px 14px;
  font-size: 13px; color: var(--content-neutral);
}
/* Vers le bas PAR DÉFAUT, vers le haut seulement quand le bas de fenêtre
   manque — mesuré à l'ouverture (même motif que dropdown-menu--up) : le
   « toujours vers le haut » supposait la bande en pied d'écran, faux dès que
   la carte vit en haut d'une page vide (2026-08-04). */
.rl-hm-menu--up { top: auto; bottom: calc(100% + 6px); }
.rl-hm-menu__item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; border: none; border-radius: 8px; background: none;
  font-family: inherit; font-size: 13px; font-weight: 600; text-align: left;
  color: var(--color-primary-900); cursor: pointer;
}
.rl-hm-menu__item:hover { background: var(--color-primary-50); }
/* Nom + e-mail sur deux lignes (2026-08-07) : l'e-mail est le discriminant de
   deux homonymes. `min-width: 0` sur le conteneur flex — sans lui, l'ellipsis
   ne se déclenche jamais, un enfant flex refusant par défaut de passer sous sa
   largeur de contenu, et une longue adresse pousserait la pastille Colleague
   hors de la carte. */
.rl-hm-menu__text { display: flex; flex-direction: column; min-width: 0; }
.rl-hm-menu__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-hm-menu__sub {
  font-size: 11px; font-weight: 500; color: var(--color-neutral-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Le clavier ouvre désormais ce menu (hm_picker_controller) : sans anneau, la
   flèche déplacerait un focus invisible. Placée APRÈS :hover — à spécificité
   égale c'est la dernière qui gagne, et un item à la fois survolé et focalisé
   doit garder son anneau. */
.rl-hm-menu__item:focus-visible {
  outline: 0; background: var(--color-primary-50); box-shadow: var(--ring);
}
/* Dépingler (signet plein) — voisin du Copy, même gabarit que les boutons. */
.stg-link-item__unsave {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--color-neutral-200); background: var(--color-white);
  color: var(--color-primary-500); cursor: pointer;
}
.stg-link-item__unsave:hover { border-color: var(--color-primary-400); background: var(--color-primary-50); }
/* « Pas de doublon » doit se voir : anneau d'1,6 s sur la rangée retrouvée. */
.stg-link-item--flash { animation: rl-flash 1.6s ease-out 1; }
@keyframes rl-flash {
  0%, 70% { box-shadow: inset 0 0 0 2px var(--color-primary-400); }
  100% { box-shadow: none; }
}
/* Avis Undo posé au-dessus de la liste après un dépinglage. */
.rl-notice {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 22px; font-size: 13px; color: var(--color-primary-900);
  background: var(--color-primary-50); border-bottom: 1px solid var(--color-neutral-100);
  /* Premier élément de la carte : même logique que la bande du bas. */
  border-radius: 13px 13px 0 0;
}
.rl-notice__undo {
  border: none; background: none; padding: 2px 6px; border-radius: 6px;
  font-family: inherit; font-size: 13px; font-weight: var(--font-weight-bold);
  color: var(--color-primary-500); cursor: pointer;
}
.rl-notice__undo:hover { background: var(--color-primary-100); }
.rl-notice__dismiss {
  margin-left: auto; border: none; background: none; padding: 4px;
  border-radius: 6px; color: var(--color-neutral-400); cursor: pointer;
  display: inline-flex;
}
.rl-notice__dismiss:hover { background: var(--color-neutral-100); }
.rl-below-hint { margin: 10px 2px 0; font-size: 12.5px; color: var(--color-neutral-400); }

/* ---- Onglet External : signets vers des liens qu'on ne possède pas ----
   Le badge ↗ et la pastille « External » sont les deux seuls signaux qui
   distinguent une rangée externe de ses voisines : elles portent une durée,
   celle-ci n'en a pas. Teinte neutre exprès — rien ici ne promet un
   calendrier vivant, donc rien ne doit porter la couleur primaire. */
.stg-link-item__badge--ext {
  background: var(--color-neutral-100); color: var(--color-neutral-500);
  font-size: 15px; line-height: 1;
}
.stg-chip--ext { background: var(--color-neutral-100); color: var(--color-neutral-500); }
/* Rangée dont l'URL n'est pas ouvrable (schéma hors liste blanche) : Copy et
   Open ont disparu, la pastille dit pourquoi. Elle remplace deux boutons —
   sans elle la rangée paraîtrait simplement cassée. */
.stg-chip--warn { background: var(--color-warning-100); color: var(--color-warning-600); }
/* (Pas de variante « personne » ici : le créneau porte le ↗ sur toutes les
   rangées — voir external_links/_item. Une rangée à HM y avait un temps
   l'avatar 20px de la pastille du picker, qui raccourcissait la rangée et
   faisait rater au panneau Edit son retrait de 56px — lequel vaut 44 + 12 et
   n'a jamais eu tort, c'est le badge qui mentait sur sa largeur.) */
/* (La bande de .rl-extadd est déclarée plus haut, avec .rl-addrow.) */
.rl-extadd__open {
  border: 1px dashed var(--color-neutral-300); background: none; cursor: pointer;
  border-radius: 8px; padding: 7px 12px; font-size: 13.5px;
  color: var(--color-neutral-600); font-weight: var(--font-weight-medium);
}
.rl-extadd__open:hover { border-color: var(--color-primary-400); background: var(--color-primary-50); }
/* Le retrait horizontal appartient désormais à ce qui CONTIENT le formulaire —
   la bande (22px) en création, .stg-link-item__extra (56px) en correction : il
   ne garde que son air vertical. */
.rl-extform { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 2px; }
.rl-extform__row { display: flex; gap: 12px; flex-wrap: wrap; }
.rl-extform__row .field { flex: 1 1 200px; min-width: 0; }
/* L'URL et la note méritent plus de place que le nom et le select. */
.rl-extform__url { flex: 2 1 320px; }
.rl-extform__actions { display: flex; justify-content: flex-end; }
.stg-note--pad { padding: 14px 0 16px; }
/* Les règles .stg-pointer (pointeur de transition, une release) sont parties le
   2026-08-11 : la carte qu'elles habillaient a été retirée la veille, et une
   règle sans marquage est un piège en préparation — le miroir exact de la
   classe sans règle de l'audit R1. */

.stg-picker__options { display: flex; gap: 10px; flex-wrap: wrap; }
.stg-picker__optform { margin: 0; }
.stg-picker__opt {
  height: 44px; padding: 0 22px;
  border: 1px solid var(--color-neutral-200); border-radius: 9px; background: var(--color-white);
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--color-primary-900); cursor: pointer;
}
.stg-picker__opt:hover { border-color: var(--color-primary-400); background: var(--color-primary-50); }
.stg-picker__hint {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 10px;
  font-size: 12px; line-height: 1.4; color: var(--color-warning-700);
}
.stg-picker__hint svg { flex: none; margin-top: 2px; }

/* Duration picker: Custom… option, custom minutes input */
.stg-picker__opt--custom { color: var(--color-primary-500); border-style: dashed; }

.stg-picker__custom { margin-top: 12px; }
.stg-picker__custom-form { display: flex; align-items: center; gap: 8px; }
.stg-picker__custom-input { width: 120px; }
.stg-picker__custom .stg-picker__hint { margin-top: 8px; }

/* ── Hiring managers directory redesign ──────────────────────────────────── */
/* Grid variants: flat (identity·company·calendar·actions) / grouped (no company) */
.dir-row--hm-all,
.itw-card__header.dir-row--hm-all { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1fr) 1.25fr 176px; }
.dir-row--hm-grouped { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) 1.25fr 176px; }

.dir-hm__company { font-size: 13px; font-weight: var(--font-weight-semibold); color: var(--color-neutral-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── Page /notifications (l'HISTORIQUE, pas le menu de la cloche). Réutilise
   .index-page / .index-head / .itw-card comme toutes les autres listes : le
   défaut de cette page était justement de n'avoir AUCUN de ces conteneurs. ── */
/* La phrase « pourquoi vous êtes ici » de /hm/connect : 2.57:1 en
   --content-neutral, ~6.9:1 en neutral-600. Portée à cette page seulement —
   .booking__meta sert aussi les pages candidat. */
.hm-connect__intro {
  color: var(--color-neutral-600);
  /* Handoff 2026-08-03 (fix 2) : la phrase porte l'essentiel de la demande —
     un cran au-dessus du meta partagé, et un margin-top aligné sur le bloc
     identité désormais collé à gauche. */
  font-size: 19px;
  line-height: 1.45;
  text-wrap: pretty;
  margin-top: 16px;
}

.notif-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--color-neutral-100);
}
.notif-row:first-child { border-top: none; }
/* La pastille EST le marqueur non-lu : pas de fond coloré sur la ligne, sinon
   une boîte pleine de non-lus devient un mur de couleur. */
.notif-row__dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: transparent; }
.notif-row--unread .notif-row__dot { background: var(--color-primary-500); }
.notif-row__title { font-size: var(--text-sm); font-weight: var(--font-weight-bold); }
.notif-row--unread .notif-row__title { color: var(--content-base); }
.notif-row__body { margin-top: 2px; font-size: 13px; color: var(--color-neutral-500); text-wrap: pretty; }
.notif-row__time { font-size: var(--text-xs); color: var(--color-neutral-400); white-space: nowrap; }

.notif-empty { padding: 32px 20px; text-align: center; }
.notif-empty__title { margin: 0 0 4px; font-size: var(--text-sm); font-weight: var(--font-weight-bold); }
.notif-empty__body { margin: 0; font-size: 13px; color: var(--color-neutral-500); }

.dir-hm__company--none { color: var(--color-neutral-300); }
/* Même « valeur absente » que la colonne société, pour que les deux tirets se
   lisent pareil. */
.dir-row__none { color: var(--color-neutral-300); }

.dir-hm__calendar { display: flex; align-items: center; gap: 7px; }

.dir-hm__actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.dir-hm__chipform { margin: 0; display: inline-flex; }
.dir-hm__drop { position: relative; display: inline-flex; }

.action-chip--invite { color: var(--color-primary-500); background: var(--color-primary-100); }
.action-chip--invite:hover { background: var(--color-primary-200); color: var(--color-primary-500); }
.dir-hm__actions .action-chip--resend { box-shadow: inset 0 0 0 1px var(--color-neutral-200); }

.dir-hm__more {
  width: 28px; height: 28px; flex: none; border: none; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--color-neutral-400);
}
.dir-hm__more:hover,
.dir-hm__more[aria-expanded="true"] { background: var(--color-primary-50); color: var(--color-primary-500); }

/* Invite popover + ⋯ menu — absolute, drop-down default, flip up via --up */
.hm-pop, .hm-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  background: var(--color-white); border: 1px solid var(--color-neutral-200);
  box-shadow: var(--shadow-lg); text-align: left;
}
.hm-pop.dropdown-menu--up,
.hm-menu.dropdown-menu--up { top: auto; bottom: calc(100% + 8px); }
.hm-pop { width: 288px; border-radius: 12px; padding: 16px; }
.hm-menu { width: 196px; border-radius: 11px; padding: 5px; }

.hm-pop__title { font-size: 13.5px; font-weight: var(--font-weight-extrabold); margin-bottom: 3px; }
.hm-pop__sub { font-size: 12px; color: var(--color-neutral-500); line-height: 1.45; margin-bottom: 12px; }
.hm-pop__form { margin: 0; }
.hm-pop__share { display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px; border: 1px solid var(--color-neutral-200); border-radius: 9px; cursor: pointer; margin-bottom: 12px; }
.hm-pop__share:hover { border-color: var(--color-primary-300); }
.hm-pop__share input { margin: 2px 0 0; accent-color: var(--color-primary-500); }
.hm-pop__share-title { display: block; font-size: 12.5px; font-weight: var(--font-weight-bold); }
.hm-pop__share-hint { display: block; font-size: 11.5px; color: var(--color-neutral-500); line-height: 1.4; }
.hm-pop__share--set { cursor: default; }
.hm-pop__share--set:hover { border-color: var(--color-neutral-200); }
.hm-pop__actions { display: flex; align-items: center; gap: 8px; }
.hm-pop__send { flex: 1; height: 32px; border: none; border-radius: 8px; background: var(--color-primary-500); color: var(--color-white); font-family: inherit; font-size: 12.5px; font-weight: var(--font-weight-bold); cursor: pointer; }
.hm-pop__send:hover { background: var(--color-primary-400); }
.hm-pop__copy { height: 32px; padding: 0 11px; border: 1px solid var(--color-neutral-200); border-radius: 8px; background: var(--color-white); color: var(--color-neutral-600); font-family: inherit; font-size: 12.5px; font-weight: var(--font-weight-bold); cursor: pointer; white-space: nowrap; }
.hm-pop__copy:hover { border-color: var(--color-primary-300); color: var(--color-primary-500); }

.hm-menu__form { margin: 0; }
.hm-menu__item { display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 8px 11px; border-radius: 7px; font-family: inherit; font-size: 13px; font-weight: var(--font-weight-semibold); color: var(--color-neutral-700); text-decoration: none; }
.hm-menu__item:hover { background: var(--color-neutral-50); color: var(--color-neutral-700); }
.hm-menu__item--danger { color: var(--color-danger-500); }
.hm-menu__item--danger:hover { background: var(--color-danger-50); color: var(--color-danger-500); }

/* View toggle */
.hm-viewtoggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; height: 38px; border: 1px solid var(--color-neutral-200); border-radius: 9px; background: var(--color-white); }
.hm-viewtoggle__opt { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: none; border-radius: 7px; background: transparent; font-family: inherit; font-size: 12.5px; font-weight: var(--font-weight-bold); color: var(--color-neutral-500); cursor: pointer; }
.hm-viewtoggle__opt:hover { background: var(--color-neutral-100); }
.hm-viewtoggle__opt--on,
.hm-viewtoggle__opt--on:hover { background: var(--color-primary-800); color: var(--color-white); }

/* Group headers (By company) */
.hm-group__header { display: flex; align-items: baseline; gap: 8px; padding: 11px 22px; background: var(--color-neutral-50); border-top: 1px solid var(--color-neutral-100); border-bottom: 1px solid var(--color-neutral-100); }
.hm-group:first-child .hm-group__header { border-top: none; }
.hm-group__name { font-size: 12.5px; font-weight: var(--font-weight-extrabold); }
.hm-group__sub { font-size: 11.5px; font-weight: var(--font-weight-semibold); color: var(--color-neutral-400); }

/* Empty state (dashed card) */

/* Directory card must let the Invite popover / ⋯ menu escape (they'd be clipped
   by the base .itw-card overflow:hidden — same fix as .stg-card--hero). The
   header keeps rounded top corners since the card no longer clips them. */
.itw-card--dir { overflow: visible; }
.itw-card--dir .itw-card__header { border-radius: 14px 14px 0 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive — composeur & page d'un lien (2026-07-29).

   Le vrai bug : .app-nav est UNE ligne flex de ~900px « naturellement »
   (white-space:nowrap sur chaque bouton, aucun wrap), donc sous 900px elle
   ne rétrécit pas — elle débordait, et TOUTE la page scrollait
   horizontalement sur un téléphone. .composer__meet n'avait par ailleurs
   AUCUN breakpoint : deux comboboxes de ~140px côte à côte à 390px.

   Les deux paliers réutilisent des breakpoints déjà présents dans ce fichier
   (900 / 620) : chacun est l'endroit où un composant casse réellement, pas
   une largeur d'appareil. Bloc placé en FIN de fichier pour gagner la
   cascade sur les règles de base (même spécificité).
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Boutons d'ajout en icône seule : ~300px récupérés sur la première ligne.
     Le nom reste lisible par les lecteurs d'écran via aria-label. */
  .app-nav__qbtn-label { display: none; }
  .app-nav__qbtn { padding: 0 9px; }
}

@media (max-width: 620px) {
  /* Nav sur deux lignes : marque + actions, puis les onglets pleine largeur.
     Pas de menu burger — trois onglets ne valent pas un contrôleur JS, une
     surcouche, un piège à focus et une touche Échap. */
  .app-nav { flex-wrap: wrap; height: auto; min-height: 0; padding: 0 10px; row-gap: 0; }
  .app-nav__tabs { order: 3; flex-basis: 100%; height: 44px; }
  .app-nav__tab { height: 44px; padding: 0 10px; }
  /* Libèrent la première ligne ; le centre d'aide reste dans le menu avatar. */
  .app-nav__divider,
  .nav-help { display: none; }

  /* Les deux colonnes de personnes (HM / candidat) s'empilent : deux boîtes
     de ~140px côte à côte à 390px seraient illisibles. */
  .composer__meet { grid-template-columns: 1fr; }

  /* Le bloc d'invitation passe en pile : à 390px, texte + case + deux boutons
     sur trois colonnes ne tiennent pas. */
  .hm-invite { grid-template-columns: 1fr; }
  .hm-invite__icon,
  .hm-invite__text,
  .hm-invite__actions,
  .hm-invite__share { grid-column: 1; grid-row: auto; }
  .hm-invite__icon { display: none; }

  /* Une personne par ligne : à deux colonnes le texte se coupait
     (« Candidate · contact a… », « Hiring manager ● Co »). */
  .people-grid { grid-template-columns: 1fr; }
  .people-grid__facts { flex-wrap: wrap; gap: 18px 28px; }

  /* 80px de padding latéral sur un écran de 390px, c'est un cinquième. */
  .composer,
  .show-page { padding: var(--space-5) var(--space-4) var(--space-6); }
  .card--step { padding: var(--space-5) var(--space-4) var(--space-5); }
  .people-card,
  .times-card { padding: var(--space-5) var(--space-4); }
  .show-page__head { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE CANDIDAT — refonte « la semaine honnête » (2026-07-29).

   Avant : la page ouvrait sur le bandeau de fuseau (un réglage machine), la
   phrase de confiance était le texte le plus pâle sous le bouton, le formulaire
   de contact venait AVANT les horaires, et la bande de jours ne montrait que les
   jours ouverts — un jour absent pouvait aussi bien être complet que non
   consulté.

   Signature : chaque jour de la plage garde sa colonne, avec une barre de
   densité en trois crans. Le candidat lit la vraie forme de la quinzaine, trous
   compris — ce qu'aucun concurrent ne peut afficher, faute de lire l'agenda.

   Bloc en FIN de fichier volontairement : mêmes spécificités que les règles
   .meet__* d'origine, donc c'est l'ordre du fichier qui tranche.
   ═══════════════════════════════════════════════════════════════════════════ */

/* En-tête : la personne à gauche, la preuve à droite. */
.meet__head { text-align: left; padding: 26px 28px 6px; }
.meet__who { display: flex; align-items: center; gap: 14px; }
.meet__who-text { min-width: 0; }
.meet__avatar { margin: 0; flex: none; width: 46px; height: 46px; font-size: 15px; }
.meet__head .meet__title { font-size: 21px; letter-spacing: -0.02em; }
.meet__head .meet__note { margin-top: 2px; }

/* La preuve. Le vert est réservé à CE signal : nulle part ailleurs sur la page. */
.meet__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 5px 11px 5px 9px;
  border-radius: var(--radius-full);
  background: var(--color-success-50);
  color: var(--color-success-700);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
}
.meet__live-dot {
  width: 7px; height: 7px; flex: none;
  border-radius: var(--radius-full);
  background: var(--color-success-500);
}
.meet__live time { font-weight: var(--font-weight-bold); }

/* Bloc « à propos » du lien : adresse (onsite) + description réglées par le
   recruteur. pre-line : la description est du texte brut, ses retours à la
   ligne sont l'unique mise en forme dont dispose l'auteur. */
.meet__about { padding: 12px 28px 0; }
.meet__about-location {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: var(--font-weight-semibold); color: var(--color-primary-900);
}
.meet__about-location svg { flex: none; color: var(--color-primary-500); }
.meet__about-text {
  margin: 6px 0 0; font-size: 13px; line-height: 1.55;
  color: var(--color-neutral-500); white-space: pre-line;
}

.meet__label--week { margin-top: 4px; }

/* ── La semaine honnête ─────────────────────────────────────────────────── */
/* Un jour COMPLET garde sa colonne : creusé, non cliquable, jamais absent. */
.meet__day--full {
  background: var(--color-neutral-50);
  border-color: transparent;
  color: var(--color-neutral-400);
  cursor: default;
}
.meet__day-sub { font-size: 10px; opacity: 0.7; }

/* Un jour FERMÉ n'est pas un jour épuisé, et ne doit pas s'y ressembler :
   « complet » se lit comme une place qui pourrait se libérer, « fermé » comme
   une porte qui ne s'ouvrira pas. Il RECULE donc au lieu d'être creusé — fond
   transparent, texte plus clair — pendant que .meet__day--full garde son
   remplissage.

   Sélecteur `[disabled]` OBLIGATOIRE : .meet__day[disabled] juste au-dessus
   vaut (0,2,0) et l'emporterait sur un .meet__day--closed nu (0,1,0), qui
   n'aurait alors aucun effet visible — la règle des anneaux de focus du §7,
   dans l'autre sens. */
.meet__day--closed[disabled] {
  background: transparent;
  border-color: transparent;
  color: var(--color-neutral-300);
}
.meet__day--closed[disabled] .meet__day-sub { opacity: 0.55; }

/* La barre de densité : trois crans, pas un compte à lire. */
.meet__day-bar {
  width: 18px;
  height: 3px;
  margin: 3px 0 1px;
  border-radius: 999px;
  background: var(--color-neutral-200);
  transform-origin: center;
}
.meet__day-bar[data-level="1"] { background: var(--color-primary-200); width: 10px; }
.meet__day-bar[data-level="2"] { background: var(--color-primary-300); width: 16px; }
.meet__day-bar[data-level="3"] { background: var(--color-primary-500); width: 22px; }
.meet__day--selected .meet__day-bar { background: rgb(255 255 255 / 0.85); }

/* Le SEUL moment animé de la page : les barres se tracent à l'arrivée, ce qui
   « joue » la lecture d'agenda qui vient d'avoir lieu. Décalage par colonne via
   --reveal-index. Rien d'autre ne bouge. */
@media (prefers-reduced-motion: no-preference) {
  .meet__day-bar { animation: meet-bar-draw 380ms ease-out backwards; animation-delay: calc(var(--reveal-index, 0) * 45ms); }
  @keyframes meet-bar-draw { from { transform: scaleX(0.15); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
}

/* ── Horaires groupés par moment de la journée ──────────────────────────── */
.meet__times-day {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--content-base);
  margin-bottom: 10px;
}
.meet__period { display: flex; align-items: baseline; gap: 12px; margin-bottom: 9px; }
.meet__period-name {
  flex: 0 0 62px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-neutral-500);
}
/* `position: relative` : l'ANCRE des radios masquées de .meet__time-box, qui
   sont en position:absolute. Sans ancêtre positionné elles se rattachent au
   document, donc elles ne suivent PAS le défilement de .app-main et divergent
   de leur label d'exactement son scrollTop ; cliquer le label donne le focus à
   la radio, le navigateur défile le DOCUMENT jusqu'à elle, et .app-shell
   (height:100vh; overflow:hidden) quitte l'écran — la page blanche du
   2026-08-05, ici sur le choix d'un créneau par le CANDIDAT (§7).
   L'ancre est sur le CONTENEUR et non sur le label : la
   radio est ici le FRÈRE du label (.meet__time-box:checked + .meet__time), et
   un élément ne peut pas être le bloc conteneur de son propre frère.
   Les pages publiques passent par le layout application : le shell enveloppe
   AUSSI les visiteurs anonymes, seule la nav est conditionnée. */
.meet__period-times { display: flex; flex-wrap: wrap; gap: 7px; position: relative; }
/* Les heures sont des DONNÉES : mono système (aucun téléchargement sur une page
   qu'un inconnu ouvre en 4G) + chiffres tabulaires, donc les colonnes alignent. */
.meet__time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Contact révélé après le choix de l'heure. */
.meet__contact { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--color-neutral-100); }

/* Le fuseau, désormais SOUS la carte : une note, plus un en-tête. */
.meet .timezone-bar {
  margin-top: 14px;
  background: transparent;
  border: none;
  padding: 0;
  justify-content: center;
  font-size: 12px;
}

@media (max-width: 620px) {
  .meet__head { padding: 20px 18px 4px; }
  /* Même gouttière que l'en-tête au-dessus : sans elle, adresse et
     description s'indentaient 10px plus loin que le titre sur téléphone. */
  .meet__about { padding: 10px 18px 0; }
  .meet__period { flex-direction: column; gap: 5px; }
  .meet__period-name { flex: none; }
}

/* CORRECTIFS de la refonte candidat (mêmes 30 minutes — captures à l'appui).

   1. .meet__times était une GRILLE de colonnes de 88px, taillée pour une rangée
      plate de pastilles. Mes nouveaux enfants (titre du jour, rangées de
      moments) atterrissaient dans ces cellules : « 09:30 » chevauchait
      « AFTERNOON ». La grille redevient un bloc, et les rangées de moments
      gèrent leur propre disposition. ([hidden] garde la priorité :
      un sélecteur d'attribut est plus spécifique qu'une classe seule.) */
.meet__times { display: block; }

/* 2. Le compte par jour est masqué visuellement mais reste dans l'arbre
      d'accessibilité : la barre de densité est aria-hidden, donc sans ça un
      lecteur d'écran n'entendrait QUE « Thu 30 » et perdrait l'information que
      la barre transmet à l'œil. Visible sur les jours complets (« full »), où
      c'est le seul indice. */
.meet__day-count {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.meet__day { position: relative; padding: 10px 0 9px; }
.meet__day--full .meet__day-sub { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; }

/* Carte « You're booked » : Reschedule et Cancel n'étaient pas alignés.
   DEUX causes cumulées, aucune évidente à la lecture du gabarit :

   1. Reschedule est un <a> (link_to), Cancel un <button> DANS UN <form>
      (button_to). Le formulaire est donc un item flex intermédiaire : son
      bouton ne partage pas la ligne de base de l'ancre. `display: contents`
      fait disparaître la boîte du formulaire de la mise en page — le bouton
      devient un enfant flex direct — sans rien changer à la soumission.

   2. La règle partagée posait font-size mais PAS font-family. Un <button>
      n'hérite pas de la police de la page : Cancel sortait dans la police
      système, Reschedule en Bricolage. D'où deux tailles apparentes et deux
      lignes de base. C'est la cause du décalage visible, pas le flex.

   align-items: baseline (et non center) : ce sont deux libellés texte, c'est
   leur ligne de base qui doit s'aligner. */
.meet__actions { align-items: baseline; }
.meet__actions form { display: contents; }
.meet__reschedule,
.meet__cancel {
  font-family: inherit;
  line-height: 1.3;
}

/* Horaires : alignement des rangées de moments, deuxième passe.

   `display: block` (correctif précédent) réglait le chevauchement mais laissait
   chaque rangée gérer sa propre largeur de libellé : .meet__period-name en
   `flex: 0 0 62px` ne descend jamais sous la largeur de son contenu (taille
   minimale automatique d'un item flex), donc « AFTERNOON » (~78px) était plus
   large que « MORNING » et poussait SES pastilles vers la droite. Deux rangées,
   deux points de départ.

   Une GRILLE partagée règle ça par construction : les deux colonnes sont
   communes à toutes les rangées, `display: contents` sur .meet__period y verse
   directement le libellé et les pastilles. Plus aucune rangée ne peut décaler
   les autres. */
.meet__times {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 12px 14px;
  align-items: baseline;
}
.meet__times-day { grid-column: 1 / -1; margin-bottom: 0; }
.meet__period { display: contents; }
.meet__period-name { flex: none; }

/* Les pastilles n'avaient AUCUN padding horizontal : elles remplissaient
   autrefois une cellule de grille de 88px. Dans une rangée qui s'enroule, leur
   largeur retombait sur celle du texte — d'où des pastilles étriquées et de
   largeurs inégales. */
.meet__time { padding: 9px 14px; }

@media (max-width: 620px) {
  /* Libellé au-dessus de ses horaires : deux colonnes ne tiennent pas à 390px. */
  .meet__times { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .meet__period-name { margin-top: 6px; }
}

/* Le bloc horaires touchait la bande de jours : son espacement venait de
   .meet__label--time (« 3 · Pick a time », margin-top 18px), supprimé avec la
   numérotation. Le `gap` de la grille ne joue QU'ENTRE ses items, jamais
   au-dessus d'elle — il ne pouvait pas remplacer cette marge. */
.meet__times { margin-top: 22px; }

/* Bande de jours : rythme régulier.

   Les jours complets passent par .meet__day[disabled] (règle préexistante) sur
   un vrai <button disabled>, plus par un --full sur un <div> : deux types
   d'éléments dans la même rangée flex ne partagent pas la même géométrie.
   Reste le bord — [disabled] le rendait transparent, donc un jour complet
   paraissait plus petit et plus enfoncé que ses voisins bordés, et la rangée
   semblait ébréchée. Un bord de la couleur du fond garde la MÊME boîte tout en
   restant discret. */
.meet__day[disabled] {
  border-color: var(--color-neutral-100);
  color: var(--color-neutral-400);
}
.meet__day[disabled] .meet__day-sub {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* « ← Keep my current time » flottait à ~46px du bouton (28px de padding bas de
   .meet__foot + 18px de marge) : un trou qui le détachait de la carte. */
.meet__back { margin-top: 0; }

/* Reprogrammation : « ← Keep my current time » est le REPLI du bouton, pas une
   légende de bas de carte. Les deux répondent à la même question, ils doivent
   donc former un bloc — or le lien se retrouvait à 28px sous le bouton ET collé
   au bord inférieur de la carte (le padding de .meet__foot tombe au-dessus de
   lui, rien ne fermait la carte en dessous).

   :has() ne vise QUE la carte qui porte un repli : /book et /meet conservent
   leurs 28px de fermeture, où le bouton est bien le dernier élément. */
.meet__card:has(.meet__back) .meet__foot { padding-bottom: 14px; }
.meet__back { padding-bottom: 26px; }

/* Pages d'authentification : lisibilité du texte explicatif (2026-07-30).

   --content-neutral (neutral-400) sur blanc = 2.57:1, sous le 4.5:1 exigé pour
   du texte courant. Or ces phrases-là portent l'explication de pages qui
   décident si quelqu'un devient utilisateur (« Log in to schedule and track your
   interviews », « Camille Laurent invited you to join Acme Talent »).
   neutral-600 = ~6.9:1.

   CINQUIÈME occurrence du même réflexe dans cette session (segments de durée,
   onglets de la liste, intro de /hm/connect, pastilles d'horaires) : gris clair
   utilisé pour « secondaire » là où il fallait un gris FONCÉ. Plat ≠ éteint. */
.auth__subtitle,
.auth__hint { color: var(--color-neutral-600); }

/* « Skip for now » est une SORTIE, pas une note de bas de carte : en gris clair
   souligné elle ressemblait à un lien par défaut du navigateur. */
.auth__skip { color: var(--color-neutral-600); font-weight: var(--font-weight-semibold); text-decoration: none; }
.auth__skip:hover { color: var(--color-primary-500); text-decoration: underline; }

/* Modales & dialogues (TRANCHE B, 2026-07-30) : surfaces qui n'apparaissent
   qu'après un geste, donc jamais photographiées par une revue de pages.

   1. Champs de la modale d'ajout rapide : ils passent de placeholder-seul à
      label + champ, d'où un conteneur pour l'espacement. */
.modal__field { flex: 1; min-width: 0; }
.modal__field .field__label { margin-bottom: 5px; }
.modal__field + .modal__field,
.combobox__create-row + .modal__field { margin-top: 0; }
.modal__body .modal__field { margin-bottom: var(--space-3); }

/* 2. Le bouton destructif du dialogue de confirmation sortait en danger-400
      (--button-danger), un rouge pastel : sous-vendu pour l'action irréversible
      du produit, et plus pâle que le bouton contour de la page qui l'a ouvert.
      On ne touche pas au token (design_system.css est vendoré) — on le renforce
      DANS le dialogue, là où la fermeté compte. */
.modal[role="alertdialog"] .btn-solid-danger { background: var(--color-danger-600); }
.modal[role="alertdialog"] .btn-solid-danger:hover { background: var(--color-danger-700); }

/* ═══════════════════════════════════════════════════════════════════════════
   TRANCHE C — l'app recruteur sur un téléphone (2026-07-30).

   Le clipping de la nav avait été corrigé globalement, mais le CONTENU n'avait
   été empilé que sur le composeur, la page d'un lien et les pages candidat. Ces
   quatre listes sont des GRILLES à colonnes fixes qui gardaient leur nombre de
   colonnes à 390px. Conséquence mesurée sur captures :

     • liste des liens  : la colonne CANDIDAT tombe à ~36px après l'avatar, donc
       le NOM du candidat et son e-mail sont entièrement rognés — une liste
       d'entretiens sans aucun nom.
     • annuaire HM      : idem, plus les libellés d'en-tête imprimés LES UNS SUR
       LES AUTRES (« HIRINGMANAGER », « ADDEDCOMPANY »).
     • membres de l'org : noms rognés, en-têtes superposés, sélecteur de rôle
       par-dessus l'avatar.
     • réglages         : l'e-mail connecté cassé en plein mot et entrelacé avec
       la pastille (« ca • Connected talent.test »).

   Le remède est le même partout : à ≤620px une rangée de tableau n'est plus une
   rangée, c'est un BLOC. On masque la ligne d'en-tête (des libellés de colonnes
   ne veulent rien dire quand les cellules s'empilent) et chaque cellule reprend
   la largeur. Aucune donnée n'est cachée : tout ce qui était rogné redevient
   lisible.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 620px) {
  /* Les en-têtes de colonnes disparaissent : ils ne décrivent plus rien. */
  .itw-card__header,
  .org-colheads { display: none; }

  /* Une rangée = un bloc empilé. */
  .itw-row,
  .dir-row,
  .org-row--member,
  .org-row--invite {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 16px 18px;
  }

  /* La personne d'abord, en pleine largeur : c'est ce qu'on cherche du regard. */
  .itw-row__candidate,
  .itw-row__hm { width: 100%; }
  .itw-row__name,
  .itw-row__hm-name,
  .itw-row__email { white-space: normal; }

  /* Les actions ne se serrent plus à droite d'une colonne inexistante. */
  .itw-row__action,
  .dir-hm__actions,
  .row-actions { justify-content: flex-start; }

  /* En pile, la cellule d'action VIDE de l'historique (pas de « Copy link »
     sur un entretien passé) reste un élément de grille et ajoute le `gap` de
     10px sous chaque ligne. Sur desktop elle est au contraire nécessaire :
     la grille a cinq colonnes fixes. */
  .itw-row__action:empty { display: none; }

  /* Colonnes vides de l'annuaire : à 390px un tiret sur sa propre ligne n'est
     que du bruit. Les valeurs réelles restent affichées. */
  .dir-hm__company--none,
  .dir-row__none { display: none; }

  /* Réglages : icône + texte + action s'empilent au lieu de s'écraser. */
  .stg-account { flex-wrap: wrap; }
  .stg-account__text { flex: 1 1 100%; order: 2; }
  .stg-account__meta { white-space: normal; word-break: break-word; }

  /* Bandeau d'invitation : le champ e-mail prend la largeur. */
  .org-input { min-width: 0; }
}

/* Champ de capture d'écran de /support : c'était le SEUL contrôle non habillé du
   produit — le bouton natif du navigateur, dans la langue de l'OS
   (« Sélect. fichiers · Aucun fichier choisi »), au milieu d'un formulaire
   soigné.

   ::file-selector-button habille le BOUTON en gardant le texte natif qui liste
   les fichiers choisis. Le composeur, lui, masque l'input derrière un <label>
   stylé (.attach-row) — mais il a un contrôleur Stimulus qui réécrit le nom du
   fichier ; ici, sans ce retour, masquer l'input ferait PERDRE l'information
   « 2 fichiers sélectionnés ». On habille donc au lieu de masquer. */
.support-field input[type="file"],
.staff-ed__filefield input[type="file"],
.staff-ed__rail input[type="file"],
input.filefield {
  padding: 8px 10px;
  font-size: 13px;
  color: var(--color-neutral-600);
  cursor: pointer;
}
.support-field input[type="file"]::file-selector-button,
.staff-ed__filefield input[type="file"]::file-selector-button,
.staff-ed__rail input[type="file"]::file-selector-button,
input.filefield::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-primary-500);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}
.support-field input[type="file"]::file-selector-button:hover,
.staff-ed__rail input[type="file"]::file-selector-button:hover,
input.filefield::file-selector-button:hover {
  border-color: var(--color-primary-400);
  background: var(--color-primary-50);
}

/* Suite de la TRANCHE C — deux défauts que ma propre correction avait laissés,
   trouvés en OUVRANT enfin les captures phone-01/02/03 (2026-07-30).

   1. .index-head reste une rangée flex `space-between` à 390px : le titre garde
      sa largeur et la boîte de recherche déborde du bord droit, rognée, sur les
      TROIS pages d'index. J'avais empilé les RANGÉES du tableau sans toucher à
      l'en-tête de page.

   2. Conséquence directe de l'autre moitié de ce correctif : masquer la ligne
      d'en-tête était juste quand les cellules s'empilent, mais du coup une
      valeur seule n'est plus nommée — « Camille Laurent » sous un nom de
      candidat ne dit pas qu'il s'agit de QUI L'A AJOUTÉ, et « Rivertown » ne dit
      pas « société ». On renomme donc la valeur au lieu de la laisser muette. */
@media (max-width: 620px) {
  .index-head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .index-head__actions { flex-wrap: wrap; gap: var(--space-2); }
  .search-box { flex: 1 1 100%; min-width: 0; }
  .index-head__count { text-wrap: pretty; }

  .dir-added-by::before,
  .dir-hm__company::before {
    color: var(--color-neutral-400);
    font-size: var(--text-xs);
  }
  .dir-added-by::before { content: "Added by "; }
  .dir-hm__company::before { content: "Company "; }
}

/* ---------------------------------------------------------------------------
 * Booking window (shared/_booking_window_field) — 2026-08-07
 *
 * Le popover qui remplace les <select> natifs du composeur et du panneau
 * « Link settings… ». `.dropdown-menu` n'est PAS une base visuelle dans ce
 * dépôt : c'est seulement le crochet du flip (`.dropdown-menu--up`, posé par
 * dropdown_controller#flipIfNeeded). Chaque menu apporte donc sa propre boîte,
 * comme .hm-menu et .rl-hm-menu au-dessus — d'où la règle --up rédigée ici.
 * ------------------------------------------------------------------------- */
.bw-field { display: flex; flex-direction: column; gap: var(--space-1); }
/* L'ANCRE du menu, et c'est bien le déclencheur qu'elle entoure, PAS le champ :
   sur `.bw-field`, `top: calc(100% + 6px)` se mesurait depuis le bas du bloc
   entier — phrase d'aide comprise — et le menu s'ouvrait ~40px trop bas, le
   texte d'aide pris entre le bouton et sa propre liste. */
.bw-field__control { position: relative; }

.bw-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  width: 100%; box-sizing: border-box; height: var(--control-h-large);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-neutral); border-radius: var(--radius);
  background: var(--color-white); color: var(--content-base);
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--font-weight-bold);
  text-align: left; cursor: pointer;
}
.bw-trigger:hover { border-color: var(--hover-base); }
.bw-trigger[aria-expanded="true"] { border-color: var(--hover-base); }
/* L'anneau du design system est porté par .btn / .gp-checkbox / a — dont ce
   déclencheur n'est aucun. Sans cette règle il retombait sur le contour de
   l'UA pendant que ses PROPRES options portaient var(--ring) : un seul
   contrôle, deux traitements du focus. */
.bw-trigger:focus-visible { box-shadow: var(--ring); outline: none; }
/* Le libellé au repos est le plus long de la liste (il nomme le plafond) :
   sans ellipse il pousserait le chevron hors de la boîte. */
.bw-trigger > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-trigger__chevron { flex: none; color: var(--color-neutral-400); font-size: 10px; }

.bw-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  width: 100%; box-sizing: border-box; padding: 5px;
  background: var(--color-white); border: 1px solid var(--color-neutral-200);
  border-radius: 11px; box-shadow: var(--shadow-lg); text-align: left;
}
.bw-menu.dropdown-menu--up { top: auto; bottom: calc(100% + 6px); }

/* Le plafond de hauteur vit sur la LISTE et non sur la coquille : sur la
   coquille, le pied « A link can shorten… » défilerait avec les options et
   disparaîtrait au moment même où il sert (même arbitrage que le champ de
   recherche de .rl-hm-menu). */
/* 240 et non 300 : dropdown_controller#flipIfNeeded n'ouvre vers le haut qu'en
   dessous de 320px de place, donc le popover ENTIER doit tenir dans ce budget —
   liste + 10px de coquille + le pied de deux lignes (~50px). À 300 il mesurait
   ~360px, et avec 330px sous le champ il s'ouvrait vers le bas en laissant ses
   dernières rangées hors écran : .app-shell est `height:100vh; overflow:hidden`
   (§7), il n'y a donc aucun défilement de page pour aller les chercher. */
.bw-menu__list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }

.bw-menu__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: none; border-radius: 8px; background: none;
  font-family: inherit; font-size: 13px; font-weight: var(--font-weight-semibold);
  color: var(--content-base); text-align: left; cursor: pointer;
}
.bw-menu__item:hover { background: var(--color-primary-50); }
.bw-menu__item:focus-visible { box-shadow: var(--ring); outline: none; }
/* L'option « suivre Settings » est ÉPINGLÉE en tête et se lit comme le défaut
   qu'elle est — pas comme l'option zéro d'une liste plate. */
.bw-menu__item--default { font-weight: var(--font-weight-bold); }
.bw-menu__item[aria-selected="true"] { background: var(--color-primary-50); color: var(--color-primary-500); }
.bw-menu__check { flex: none; }
/* LA coche, dérivée de l'attribut — surlignage et glyphe ne peuvent donc plus
   se contredire. Rendue en ERB, elle restait sur la rangée d'ORIGINE après un
   choix (le serveur ne repasse pas). aria-hidden sur le porteur : c'est un
   doublon visuel d'aria-selected, qu'un lecteur d'écran annonce déjà. */
.bw-menu__item[aria-selected="true"] .bw-menu__check::after { content: "✓"; }
/* Le libellé apporte sa propre marge basse (.field__label, .stg-micro) : avec
   le `gap` du champ, l'écart doublait. */
.bw-field .field__label,
.bw-field .stg-micro { margin-bottom: 0; }

.bw-menu__group {
  padding: 9px 11px 4px;
  font-size: var(--text-xs); font-weight: var(--font-weight-extrabold);
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-400);
}

.bw-menu__foot {
  margin: 3px 0 0; padding: 8px 11px 6px;
  border-top: 1px solid var(--color-neutral-100);
  font-size: 12px; line-height: 1.45; color: var(--color-neutral-500);
}

/* Variante DENSE — panneau « Link settings… », dont tous les contrôles font
   32px (cf. .stg-select, remplacé ici). Rien d'autre ne change. */
.bw-field--dense .bw-trigger { height: 32px; padding: 0 10px; font-size: 13px; }
.bw-field--dense .bw-menu__item { font-size: 12.5px; padding: 7px 10px; }