/*
 * HASIMONET — système visuel commun.
 *
 * Cette feuille est la source unique des couleurs, de la typographie, des
 * espacements, des rayons, des ombres et des composants du site public.
 * Elle ne charge aucune ressource extérieure.
 */

:root {
  color-scheme: light;

  /* Identité issue du logo final : marine, bordeaux et or ICALL. */
  --hsm-color-ink: #202641;
  --hsm-color-ink-soft: #3d4560;
  --hsm-color-primary: #840137;
  --hsm-color-primary-strong: #68002b;
  --hsm-color-primary-soft: #f6e9ef;
  --hsm-color-navy: #313967;
  --hsm-color-navy-soft: #ebedf5;
  --hsm-color-gold: #b39734;
  --hsm-color-gold-strong: #76621b;
  --hsm-color-gold-soft: #f5f0df;

  /* Surfaces claires et texte. */
  --hsm-color-canvas: #f8f7f3;
  --hsm-color-surface: #ffffff;
  --hsm-color-surface-soft: #f4f3ef;
  --hsm-color-text: #202641;
  --hsm-color-muted: #5d6378;
  --hsm-color-line: #e1dfd8;
  --hsm-color-line-strong: #cbc8be;

  /* États accessibles. */
  --hsm-color-success: #2f6b4e;
  --hsm-color-success-soft: #e5f1e9;
  --hsm-color-warning: #805f0b;
  --hsm-color-warning-soft: #fbf2d7;
  --hsm-color-danger: #9b4130;
  --hsm-color-danger-soft: #f9e9e4;
  --hsm-color-focus: #840137;

  /* Famille locale uniquement, optimisée pour l’hébreu. */
  --hsm-font-sans: system-ui, -apple-system, "Segoe UI", Arial, "Arial Hebrew", sans-serif;
  --hsm-font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

  /*
   * Échelle typographique — SEPT crans, et pas un de plus.
   *
   * ⛔ Aucune taille littérale (`font-size: .92rem`) ailleurs dans le site : le
   * défaut rapporté le 30/07 (« c'est emmêlé ») venait d'abord de là — les
   * quatre feuilles de l'époque portaient à elles seules 93 tailles distinctes,
   * dont une trentaine séparées par moins d'un point. Deux tailles qu'on ne
   * distingue pas ne font pas deux niveaux de lecture : elles font du bruit.
   * Chaque cran ci-dessous est franchement plus grand que le précédent.
   *
   * Le cran haut plafonnait à 4,75rem (76 px). C'est un titre qui crie, là où la
   * demande est « calme » — et en hébreu, dont les lettres n'ont ni capitales ni
   * jambages, une graisse pareille écrase tout le reste de l'écran.
   */
  --hsm-text-xs: 0.8rem;
  --hsm-text-sm: 0.9rem;
  --hsm-text-base: 1rem;
  --hsm-text-lg: 1.125rem;
  --hsm-text-xl: clamp(1.25rem, 1.6vw, 1.4rem);
  --hsm-text-2xl: clamp(1.6rem, 3vw, 2.1rem);
  --hsm-text-3xl: clamp(2.1rem, 5vw, 3.25rem);
  --hsm-leading-tight: 1.12;
  --hsm-leading-heading: 1.25;
  --hsm-leading-body: 1.7;
  --hsm-weight-regular: 400;
  --hsm-weight-medium: 550;
  --hsm-weight-bold: 700;

  /* Rythme de 4 px. */
  --hsm-space-1: 0.25rem;
  --hsm-space-2: 0.5rem;
  --hsm-space-3: 0.75rem;
  --hsm-space-4: 1rem;
  --hsm-space-5: 1.25rem;
  --hsm-space-6: 1.5rem;
  --hsm-space-8: 2rem;
  --hsm-space-10: 2.5rem;
  --hsm-space-12: 3rem;
  --hsm-space-16: 4rem;
  --hsm-space-20: 5rem;
  --hsm-space-24: 6rem;

  /* Cinq rayons. `xs` sert aux petits contrôles (cases, pastilles de moins de
     2 rem) : sans lui, tout ce qui est petit prenait un rayon inventé sur
     place — le séquenceur en portait dix, de 8 à 26 px. */
  --hsm-radius-xs: 0.5rem;
  --hsm-radius-sm: 0.75rem;
  --hsm-radius-md: 1rem;
  --hsm-radius-lg: 1.5rem;
  --hsm-radius-xl: 2rem;
  --hsm-radius-pill: 999px;

  --hsm-shadow-sm: 0 1px 2px rgb(14 20 32 / 0.05), 0 6px 18px rgb(14 20 32 / 0.06);
  --hsm-shadow-md: 0 18px 48px rgb(14 20 32 / 0.1);
  --hsm-shadow-float: 0 28px 80px rgb(14 20 32 / 0.14);
  --hsm-shadow-image: drop-shadow(0 1.25rem 2.5rem rgb(32 38 65 / 0.13));

  --hsm-container: 72rem;
  --hsm-reading: 42rem;
  --hsm-gutter: clamp(1.1rem, 4vw, 3rem);
  --hsm-control-height: 3.25rem;
  --hsm-transition: 160ms ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 20rem;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 85% 4%, rgb(179 151 52 / 0.1), transparent 30rem),
    radial-gradient(circle at 6% 30%, rgb(132 1 55 / 0.055), transparent 26rem),
    linear-gradient(180deg, var(--hsm-color-surface) 0, var(--hsm-color-canvas) 36rem);
  color: var(--hsm-color-text);
  font-family: var(--hsm-font-sans);
  font-size: var(--hsm-text-base);
  line-height: var(--hsm-leading-body);
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--hsm-color-primary);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--hsm-color-ink);
}

:focus-visible {
  outline: 3px solid var(--hsm-color-focus);
  outline-offset: 3px;
}

::selection {
  background: var(--hsm-color-primary-soft);
  color: var(--hsm-color-ink);
}

[hidden] {
  display: none !important;
}

.hsm-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.hsm-container {
  width: min(100% - (2 * var(--hsm-gutter)), var(--hsm-container));
  margin-inline: auto;
}

.hsm-reading {
  max-width: var(--hsm-reading);
}

.hsm-stack {
  display: grid;
  gap: var(--hsm-stack-space, var(--hsm-space-6));
}

.hsm-cluster {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--hsm-cluster-space, var(--hsm-space-3));
}

.hsm-main {
  flex: 1;
}

/* En-tête et marque. */
.hsm-header {
  position: relative;
  z-index: 10;
  padding-block: var(--hsm-space-5);
  border-bottom: 1px solid rgb(220 228 220 / 0.7);
  background: rgb(255 255 255 / 0.88);
  backdrop-filter: blur(14px);
}

.hsm-header__inner {
  display: flex;
  align-items: center;
  gap: var(--hsm-space-5);
}

/* ⛔ 10/08 — `flex: 0 0 auto` disait mot pour mot « ne retrecis JAMAIS ». Combine au plancher dur du
 * `clamp()` ci-dessous, le logo revendiquait une largeur incompressible : sur un ecran etroit, c'est
 * la PAGE qui cedait a sa place. `1 1 auto` + `min-width: 0` lui rendent le droit de se comprimer.
 * (`min-width: 0` est indispensable : la valeur par defaut `auto` empeche tout enfant flex de
 * descendre sous la taille de son contenu, et annulerait le `max-width` du logo.) */
.hsm-brand {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  border-radius: var(--hsm-radius-sm);
}

/*
 * ⭐ 31/07 — AGRANDI (demande Yossef : « en haut agrandis le logo »). Il montait a 3,35rem, ce qui
 * le laissait plus petit que le bouton d'a cote : la marque paraissait secondaire sur sa propre
 * page. Le plancher monte aussi, sinon il redevient minuscule sur telephone — c'est justement la
 * qu'il sert le plus, puisqu'il est le seul chemin de retour vers l'accueil.
 */
/* ⛔ 10/08 — LE PLANCHER DUR ETAIT LE DEFAUT (signale par Yossef sur un petit telephone :
 * « le logo dereglé la page »). `clamp()` garantit un MINIMUM : a 3.1rem, et avec le ratio reel de
 * l'image (645x256, soit 2,52), le logo revendique ~125 px de large QUOI QU'IL ARRIVE. Dans la
 * barre `flex` d'a cote, un enfant vaut `min-width: auto` par defaut, c'est-a-dire qu'il REFUSE de
 * se comprimer sous la taille de son contenu -> sur un ecran etroit, logo + bouton + marges
 * poussent la page et fabriquent un defilement horizontal.
 * ⭐ Le plancher reste (la demande du 31/07 « agrandis le logo » est toujours valable sur grand
 * ecran), mais il devient CONDITIONNEL : `max-width` le borne en part de l'ecran, et `min-width: 0`
 * rend la compression possible. Un plancher qui ne peut jamais ceder n'est pas une taille
 * minimale, c'est un debordement garanti. */
.hsm-brand img {
  width: auto;
  height: clamp(2.4rem, 7vw, 4.5rem);
  max-width: min(48vw, 260px);
  object-fit: contain;
}

/* Le logo n'etait qu'une MOITIE du probleme : a cote de lui, le bouton Google porte un libelle
 * entier. Deux blocs incompressibles cote a cote sur ~360 px de large, dans un `flex` sans retour a
 * la ligne, ne peuvent que deborder. On autorise donc le retour a la ligne, et on rend la barre
 * compressible elle aussi. ⭐ Corriger le seul logo aurait deplace le debordement, pas supprime. */
.hsm-header__inner {
  flex-wrap: wrap;
  row-gap: var(--hsm-space-3);
}

.hsm-nav {
  display: flex;
  align-items: center;
  gap: var(--hsm-space-2);
  margin-inline-start: auto;
  min-width: 0;
  flex-shrink: 1;
}

/* Le libelle du bouton se coupe proprement plutot que de pousser la page. */
.hsm-nav .hsm-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hsm-nav__link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--hsm-space-4);
  border-radius: var(--hsm-radius-pill);
  color: var(--hsm-color-muted);
  font-size: var(--hsm-text-sm);
  font-weight: var(--hsm-weight-medium);
  text-decoration: none;
}

.hsm-nav__link:hover,
.hsm-nav__link[aria-current="page"] {
  background: var(--hsm-color-surface-soft);
  color: var(--hsm-color-ink);
}

/* Typographie. */
.hsm-eyebrow {
  margin: 0 0 var(--hsm-space-3);
  color: var(--hsm-color-primary);
  font-size: var(--hsm-text-sm);
  font-weight: var(--hsm-weight-bold);
}

.hsm-display,
.hsm-title:not(.hsm-installer *),
.hsm-heading,
.hsm-subheading {
  margin: 0;
  color: var(--hsm-color-ink);
  line-height: var(--hsm-leading-heading);
  text-wrap: balance;
}

.hsm-display {
  max-width: 13ch;
  font-size: var(--hsm-text-3xl);
  font-weight: var(--hsm-weight-bold);
  letter-spacing: -0.04em;
  line-height: var(--hsm-leading-tight);
}

.hsm-title:not(.hsm-installer *) {
  font-size: var(--hsm-text-2xl);
  font-weight: var(--hsm-weight-bold);
  letter-spacing: -0.025em;
}

.hsm-heading {
  font-size: var(--hsm-text-xl);
  font-weight: var(--hsm-weight-bold);
}

.hsm-subheading {
  font-size: var(--hsm-text-lg);
  font-weight: var(--hsm-weight-bold);
}

.hsm-lead {
  max-width: 38ch;
  margin: var(--hsm-space-5) 0 0;
  color: var(--hsm-color-muted);
  font-size: var(--hsm-text-lg);
  line-height: 1.75;
  text-wrap: pretty;
}

.hsm-muted {
  color: var(--hsm-color-muted);
}

/* Sections et cartes.
   ⚠️ Mesure du 30/07 sur la vitrine en ligne : ce reglage montait a 96 px EN HAUT
   ET EN BAS, donc 192 px de vide cumule a chaque jointure entre deux sections —
   c'est ce qui donnait l'impression de trous et allongeait la page a 2488 px pour
   trois sections. Ramene a 40-64 px : rien n'est retire du contenu, le blanc
   redevient une respiration au lieu d'un trou. */
.hsm-section {
  padding-block: clamp(var(--hsm-space-10), 5vw, var(--hsm-space-16));
}

.hsm-section--compact {
  padding-block: var(--hsm-space-10);
}

.hsm-section--tint {
  background: var(--hsm-color-gold-soft);
}

/*
 * Trois colonnes, puis deux, puis une. Le palier intermédiaire manquait : la
 * grille tombait de 3 à 1 d'un coup à 52rem, ce qui laissait sur tablette une
 * colonne unique très large avec des cartes de trois lignes perdues dedans.
 */
.hsm-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hsm-space-4);
}

.hsm-card:not(.hsm-installer *) {
  position: relative;
  padding: clamp(var(--hsm-space-5), 3vw, var(--hsm-space-8));
  border: 1px solid var(--hsm-color-line);
  border-radius: var(--hsm-radius-lg);
  background: var(--hsm-color-surface);
  box-shadow: var(--hsm-shadow-sm);
}

.hsm-card--raised {
  border-color: transparent;
  box-shadow: var(--hsm-shadow-md);
}

.hsm-card--quiet {
  background: var(--hsm-color-surface-soft);
  box-shadow: none;
}

.hsm-card__mark {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  margin-bottom: var(--hsm-space-5);
  border-radius: var(--hsm-radius-md);
  background: var(--hsm-color-navy-soft);
  color: var(--hsm-color-navy);
}

.hsm-card__mark svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.hsm-card__text {
  margin: var(--hsm-space-2) 0 0;
  color: var(--hsm-color-muted);
  font-size: var(--hsm-text-sm);
}

/* Boutons et actions. */
.hsm-actions:not(.hsm-installer *) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--hsm-space-3);
  margin-top: var(--hsm-space-8);
}

.hsm-button {
  min-height: var(--hsm-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hsm-space-2);
  padding: 0 var(--hsm-space-6);
  border: 1px solid transparent;
  border-radius: var(--hsm-radius-md);
  background: transparent;
  color: var(--hsm-color-ink);
  font-weight: var(--hsm-weight-bold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--hsm-transition),
    box-shadow var(--hsm-transition),
    border-color var(--hsm-transition),
    background var(--hsm-transition);
}

.hsm-button:hover {
  color: var(--hsm-color-ink);
  transform: translateY(-1px);
}

.hsm-button:active {
  transform: translateY(0);
}

.hsm-button:disabled,
.hsm-button[aria-disabled="true"] {
  opacity: 0.52;
  pointer-events: none;
}

.hsm-button--primary {
  background: var(--hsm-color-primary);
  color: var(--hsm-color-surface);
  box-shadow: 0 10px 26px rgb(132 1 55 / 0.2);
}

.hsm-button--primary:hover {
  background: var(--hsm-color-primary-strong);
  color: var(--hsm-color-surface);
  box-shadow: 0 14px 32px rgb(132 1 55 / 0.26);
}

.hsm-button--secondary {
  border-color: var(--hsm-color-line-strong);
  background: var(--hsm-color-surface);
}

.hsm-button--secondary:hover {
  border-color: var(--hsm-color-primary);
  background: var(--hsm-color-primary-soft);
}

.hsm-button--quiet {
  min-height: 2.75rem;
  padding-inline: var(--hsm-space-4);
  color: var(--hsm-color-muted);
}

.hsm-button--quiet:hover {
  background: var(--hsm-color-surface-soft);
}

.hsm-button--danger {
  border-color: #d9aca3;
  background: var(--hsm-color-surface);
  color: var(--hsm-color-danger);
}

.hsm-button--danger:hover {
  border-color: var(--hsm-color-danger);
  background: var(--hsm-color-danger-soft);
  color: var(--hsm-color-danger);
}

.hsm-button--wide {
  min-width: min(100%, 18rem);
}

/*
 * Le bouton de גוגל. Son emblème est dessiné dans la page (⛔ aucune ressource
 * extérieure sur ce site) et garde ses couleurs propres : ce sont celles d'une
 * marque tierce, elles ne suivent pas notre palette.
 */
.hsm-button--google {
  border-color: var(--hsm-color-line-strong);
  background: var(--hsm-color-surface);
  color: var(--hsm-color-ink);
}

.hsm-button--google:hover {
  border-color: var(--hsm-color-line-strong);
  background: var(--hsm-color-surface-soft);
}

.hsm-button--google svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 1.15rem;
}

/* Champs. */
.hsm-form {
  display: grid;
  gap: var(--hsm-space-5);
}

.hsm-field {
  display: grid;
  gap: var(--hsm-space-2);
}

.hsm-label {
  color: var(--hsm-color-ink);
  font-size: var(--hsm-text-sm);
  font-weight: var(--hsm-weight-bold);
}

.hsm-field__hint {
  color: var(--hsm-color-muted);
  font-size: var(--hsm-text-xs);
  font-weight: var(--hsm-weight-regular);
}

.hsm-input:not(.hsm-installer *),
.hsm-select,
.hsm-textarea {
  width: 100%;
  min-height: var(--hsm-control-height);
  padding-inline: var(--hsm-space-4);
  border: 1px solid var(--hsm-color-line-strong);
  border-radius: var(--hsm-radius-md);
  background: var(--hsm-color-surface);
  color: var(--hsm-color-text);
  caret-color: var(--hsm-color-primary);
  transition:
    border-color var(--hsm-transition),
    box-shadow var(--hsm-transition);
}

.hsm-textarea {
  min-height: 8rem;
  padding-block: var(--hsm-space-3);
  resize: vertical;
}

.hsm-input::placeholder,
.hsm-textarea::placeholder {
  color: #74808b;
  opacity: 1;
}

.hsm-input:hover,
.hsm-select:hover,
.hsm-textarea:hover {
  border-color: var(--hsm-color-primary);
}

.hsm-input:focus,
.hsm-select:focus,
.hsm-textarea:focus {
  border-color: var(--hsm-color-focus);
  outline: 3px solid rgb(132 1 55 / 0.16);
  outline-offset: 1px;
}

.hsm-field[data-invalid="true"] .hsm-input {
  border-color: var(--hsm-color-danger);
}

.hsm-field__error {
  color: var(--hsm-color-danger);
  font-size: var(--hsm-text-sm);
}

/* Messages. */
.hsm-notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--hsm-space-3);
  align-items: start;
  padding: var(--hsm-space-4) var(--hsm-space-5);
  border: 1px solid var(--hsm-color-line);
  border-radius: var(--hsm-radius-md);
  background: var(--hsm-color-surface-soft);
  color: var(--hsm-color-text);
}

.hsm-notice::before {
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.52rem;
  border-radius: 50%;
  background: var(--hsm-color-muted);
  content: "";
}

.hsm-notice--success {
  border-color: #b9d6c4;
  background: var(--hsm-color-success-soft);
}

.hsm-notice--success::before {
  background: var(--hsm-color-success);
}

.hsm-notice--warning {
  border-color: #e4cf90;
  background: var(--hsm-color-warning-soft);
}

.hsm-notice--warning::before {
  background: var(--hsm-color-warning);
}

.hsm-notice--danger {
  border-color: #e1b7ae;
  background: var(--hsm-color-danger-soft);
}

.hsm-notice--danger::before {
  background: var(--hsm-color-danger);
}

/* États d’appareil. */
.hsm-device:not(.hsm-installer *) {
  display: grid;
  gap: var(--hsm-space-5);
}

.hsm-device__head {
  display: flex;
  align-items: flex-start;
  gap: var(--hsm-space-4);
}

.hsm-device__icon {
  width: 3.25rem;
  height: 3.25rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--hsm-radius-md);
  background: var(--hsm-color-navy-soft);
  color: var(--hsm-color-navy);
}

.hsm-device__name {
  margin: 0;
  color: var(--hsm-color-ink);
  font-size: var(--hsm-text-xl);
  font-weight: var(--hsm-weight-bold);
  line-height: var(--hsm-leading-heading);
  overflow-wrap: anywhere;
}

.hsm-device__meta {
  margin: var(--hsm-space-1) 0 0;
  color: var(--hsm-color-muted);
  font-size: var(--hsm-text-sm);
}

.hsm-status:not(.hsm-installer *) {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: var(--hsm-space-2);
  min-height: 2rem;
  padding-inline: var(--hsm-space-3);
  border-radius: var(--hsm-radius-pill);
  background: var(--hsm-color-surface-soft);
  color: var(--hsm-color-muted);
  font-size: var(--hsm-text-xs);
  font-weight: var(--hsm-weight-bold);
}

.hsm-status::before {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.hsm-status--success {
  background: var(--hsm-color-success-soft);
  color: var(--hsm-color-success);
}

.hsm-status--waiting {
  background: var(--hsm-color-warning-soft);
  color: var(--hsm-color-warning);
}

.hsm-status--muted {
  background: #edf0ee;
  color: var(--hsm-color-muted);
}

/* État vide. */
.hsm-empty {
  display: grid;
  justify-items: center;
  padding: clamp(var(--hsm-space-10), 8vw, var(--hsm-space-20));
  border: 1px dashed var(--hsm-color-line-strong);
  border-radius: var(--hsm-radius-xl);
  background: linear-gradient(180deg, var(--hsm-color-surface), var(--hsm-color-surface-soft));
  text-align: center;
}

.hsm-empty__mark {
  width: 4.5rem;
  height: 4.5rem;
  display: grid;
  place-items: center;
  margin-bottom: var(--hsm-space-6);
  border-radius: 50%;
  background: var(--hsm-color-gold-soft);
  color: var(--hsm-color-gold-strong);
}

.hsm-empty__text {
  max-width: 32rem;
  margin: var(--hsm-space-3) 0 0;
  color: var(--hsm-color-muted);
}

/* Étapes orientées geste, pas mécanisme. */
.hsm-steps {
  display: grid;
  gap: var(--hsm-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: hsm-step;
}

.hsm-step:not(.hsm-installer *) {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--hsm-space-4);
  align-items: start;
  min-height: 4rem;
  counter-increment: hsm-step;
}

.hsm-step::before {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  border: 1px solid var(--hsm-color-line-strong);
  border-radius: 50%;
  background: var(--hsm-color-surface);
  color: var(--hsm-color-muted);
  font-weight: var(--hsm-weight-bold);
  content: counter(hsm-step);
}

.hsm-step::after {
  width: 1px;
  position: absolute;
  inset-block: 2.5rem -0.25rem;
  inset-inline-start: 1.25rem;
  background: var(--hsm-color-line);
  content: "";
}

.hsm-step:last-child::after {
  display: none;
}

.hsm-step[data-state="active"]::before {
  border-color: var(--hsm-color-primary);
  background: var(--hsm-color-primary);
  color: var(--hsm-color-surface);
  box-shadow: 0 0 0 0.35rem var(--hsm-color-primary-soft);
}

.hsm-step[data-state="done"]::before {
  border-color: var(--hsm-color-success);
  background: var(--hsm-color-success);
  color: var(--hsm-color-surface);
  content: "";
}

.hsm-step[data-state="done"]::after {
  background: var(--hsm-color-success);
}

.hsm-step[data-state="done"] .hsm-step__copy::before {
  width: 0.7rem;
  height: 0.38rem;
  position: absolute;
  inset-block-start: 1.02rem;
  inset-inline-start: 0.88rem;
  z-index: 2;
  border-block-end: 2px solid var(--hsm-color-surface);
  border-inline-start: 2px solid var(--hsm-color-surface);
  content: "";
  transform: rotate(-45deg);
}

.hsm-step__copy {
  position: relative;
  padding-top: var(--hsm-space-1);
}

.hsm-step__title {
  margin: 0;
  color: var(--hsm-color-ink);
  font-weight: var(--hsm-weight-bold);
}

.hsm-step__text {
  margin: var(--hsm-space-1) 0 0;
  color: var(--hsm-color-muted);
  font-size: var(--hsm-text-sm);
}

/* Détail brut, replié et visuellement secondaire. */
.hsm-details {
  border-top: 1px solid var(--hsm-color-line);
  padding-top: var(--hsm-space-4);
}

.hsm-details summary {
  width: fit-content;
  color: var(--hsm-color-muted);
  font-size: var(--hsm-text-sm);
  cursor: pointer;
}

.hsm-details__raw {
  max-height: 16rem;
  overflow: auto;
  margin: var(--hsm-space-3) 0 0;
  padding: var(--hsm-space-4);
  border-radius: var(--hsm-radius-sm);
  background: var(--hsm-color-ink);
  color: #dce5df;
  font-family: var(--hsm-font-mono);
  font-size: var(--hsm-text-xs);
  line-height: 1.6;
  direction: ltr;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ===========================================================================
   Composants partagés par les quatre pages publiques.
   Ils vivaient auparavant en quatre exemplaires divergents, un par page, dans
   des blocs <style> recopiés d'une page à l'autre. Une seule définition ici.
   =========================================================================== */

/* Bandeau d'ouverture : le propos à gauche (à droite en RTL), le signe à côté. */
.hsm-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--hsm-space-8), 6vw, var(--hsm-space-16));
  align-items: center;
}

/* Titre de section centré et sa phrase d'appui. */
.hsm-section-head {
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: var(--hsm-space-10);
  text-align: center;
}

.hsm-section-head .hsm-lead {
  max-width: none;
  margin-top: var(--hsm-space-3);
  font-size: var(--hsm-text-base);
}

/*
 * « Ce qu'il faut avoir sous la main » — des objets, pas des explications.
 * Une seule ligne de trois repères, qui passe en pile sur téléphone.
 */
.hsm-needs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hsm-space-3);
}

.hsm-need {
  display: flex;
  align-items: center;
  gap: var(--hsm-space-3);
  padding: var(--hsm-space-4) var(--hsm-space-5);
  border: 1px solid var(--hsm-color-line);
  border-radius: var(--hsm-radius-md);
  background: var(--hsm-color-surface);
  font-size: var(--hsm-text-sm);
  text-align: start;
}

.hsm-need svg {
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 1.2rem;
  fill: none;
  stroke: var(--hsm-color-primary);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * Étape numérotée dont le numéro est ÉCRIT dans la page (א׳, ב׳, ג׳) et non
 * produit par un compteur CSS : ce sont des lettres hébraïques, pas des
 * chiffres, et `counter()` ne sait pas les rendre.
 *
 * ⚠️ La pastille se pose au DÉBUT de la ligne, donc côté `inline-start` : à
 * droite en lecture de droite à gauche. Le trait de liaison suit la même règle,
 * sans quoi il descend le long du mauvais bord.
 */
.hsm-stages {
  display: grid;
}

.hsm-stage:not(.hsm-installer *) {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--hsm-space-5);
  align-items: start;
  padding-block: var(--hsm-space-8);
}

.hsm-stage + .hsm-stage:not(.hsm-installer *) {
  border-top: 1px solid var(--hsm-color-line);
}

.hsm-stage__num {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--hsm-color-line);
  border-radius: var(--hsm-radius-md);
  background: var(--hsm-color-navy-soft);
  color: var(--hsm-color-navy);
  font-size: var(--hsm-text-base);
  font-weight: var(--hsm-weight-bold);
}

.hsm-stage__body {
  min-width: 0;
}

.hsm-stage__body > * + * {
  margin-top: var(--hsm-space-3);
}

.hsm-stage__body p {
  max-width: 56ch;
  margin-block: 0;
  color: var(--hsm-color-muted);
  font-size: var(--hsm-text-sm);
}

/* Faits énumérés sous une étape : un par ligne, cochés. */
.hsm-facts {
  display: grid;
  gap: var(--hsm-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hsm-facts li {
  display: flex;
  gap: var(--hsm-space-3);
  align-items: flex-start;
  color: var(--hsm-color-muted);
  font-size: var(--hsm-text-sm);
}

.hsm-facts svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 1.05rem;
  margin-top: 0.32rem;
  fill: none;
  stroke: var(--hsm-color-primary);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hsm-facts b {
  color: var(--hsm-color-ink);
  font-weight: var(--hsm-weight-medium);
}

/* Jeu de portes vers le guide : de simples pastilles cliquables. */
.hsm-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hsm-space-2);
}

.hsm-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding-inline: var(--hsm-space-4);
  border: 1px solid var(--hsm-color-line-strong);
  border-radius: var(--hsm-radius-pill);
  background: var(--hsm-color-surface);
  color: var(--hsm-color-ink);
  font-size: var(--hsm-text-sm);
  font-weight: var(--hsm-weight-medium);
  text-decoration: none;
  /* ⛔ PAS de curseur main, PAS de reaction au survol par defaut : mesure du
     30/07 — `hsm-pill` n'existe qu'a 4 endroits, TOUS des <span> (aucun <a>,
     aucun <button>). Le survol colore promettait donc un clic qui n'existe
     nulle part : le visiteur essaie de cliquer sur « טלפון », « טאבלט »… et
     rien ne se passe. Ces pastilles NOMMENT ce que l'image montre, elles ne
     mènent nulle part. */
  cursor: default;
}

/* Si un jour une pastille devient un vrai lien ou un vrai bouton, elle
   retrouve son comportement — et seulement dans ce cas. */
a.hsm-pill,
button.hsm-pill {
  cursor: pointer;
  transition:
    border-color var(--hsm-transition),
    background var(--hsm-transition);
}

a.hsm-pill:hover,
button.hsm-pill:hover {
  border-color: var(--hsm-color-primary);
  background: var(--hsm-color-primary-soft);
  color: var(--hsm-color-primary);
}

/*
 * Note titrée (mise en garde, piège fréquent). Le signe d'alerte est décoratif
 * et prend la couleur de la note ; c'est le liseré de début de ligne qui porte
 * l'essentiel, parce qu'il reste lisible même quand les couleurs ne le sont pas.
 */
.hsm-note:not(.hsm-installer *) {
  display: flex;
  align-items: flex-start;
  gap: var(--hsm-space-3);
  padding: var(--hsm-space-4) var(--hsm-space-5);
  border: 1px solid var(--hsm-color-line);
  border-inline-start: 3px solid var(--hsm-color-line-strong);
  border-radius: var(--hsm-radius-md);
  background: var(--hsm-color-surface-soft);
  font-size: var(--hsm-text-sm);
}

.hsm-note:not(.hsm-installer *) > svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 1.1rem;
  margin-top: 0.3rem;
  color: var(--hsm-color-muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hsm-note__title {
  margin: 0;
  color: var(--hsm-color-ink);
  font-weight: var(--hsm-weight-bold);
}

.hsm-note:not(.hsm-installer *) p {
  margin: var(--hsm-space-1) 0 0;
  color: var(--hsm-color-muted);
}

.hsm-note:not(.hsm-installer *) strong {
  color: var(--hsm-color-ink);
  font-weight: var(--hsm-weight-medium);
}

.hsm-note--warning {
  border-color: #e4cf90;
  border-inline-start-color: var(--hsm-color-warning);
  background: var(--hsm-color-warning-soft);
}

.hsm-note--warning .hsm-note__title {
  color: var(--hsm-color-warning);
}

.hsm-note--danger {
  border-color: #e1b7ae;
  border-inline-start-color: var(--hsm-color-danger);
  background: var(--hsm-color-danger-soft);
}

.hsm-note--danger .hsm-note__title {
  color: var(--hsm-color-danger);
}

/* Bande de fin de page : ce qu'on fait maintenant. */
.hsm-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--hsm-space-5);
  padding: var(--hsm-space-6) var(--hsm-space-8);
  border: 1px solid var(--hsm-color-line);
  border-radius: var(--hsm-radius-lg);
  background: var(--hsm-color-gold-soft);
}

.hsm-band__title {
  margin: 0;
  color: var(--hsm-color-ink);
  font-size: var(--hsm-text-lg);
  font-weight: var(--hsm-weight-bold);
}

.hsm-band__text {
  margin: var(--hsm-space-1) 0 0;
  color: var(--hsm-color-muted);
  font-size: var(--hsm-text-sm);
}

.hsm-footer {
  padding-block: var(--hsm-space-8);
  border-top: 1px solid var(--hsm-color-line);
  color: var(--hsm-color-muted);
  font-size: var(--hsm-text-sm);
}

.hsm-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--hsm-space-4);
}

.hsm-footer a {
  color: var(--hsm-color-muted);
  text-decoration: none;
}

.hsm-footer a:hover {
  color: var(--hsm-color-primary);
  text-decoration: underline;
}

.hsm-ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

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

@media (max-width: 60rem) {
  .hsm-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 52rem) {
  .hsm-display {
    max-width: 15ch;
  }

  /* Le bandeau d'ouverture passe en pile, le propos d'abord, le signe ensuite. */
  .hsm-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hsm-hero .hsm-display,
  .hsm-hero .hsm-lead {
    max-width: none;
    margin-inline: auto;
  }

  .hsm-hero .hsm-actions {
    justify-content: center;
  }
}

@media (max-width: 40rem) {
  .hsm-needs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 36rem) {
  .hsm-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 38rem) {
  :root {
    --hsm-gutter: 1rem;
  }

  .hsm-header {
    padding-block: var(--hsm-space-3);
  }

  .hsm-header__inner {
    gap: var(--hsm-space-2);
  }

  .hsm-nav__link {
    padding-inline: var(--hsm-space-3);
  }

  .hsm-section {
    padding-block: var(--hsm-space-16);
  }

  .hsm-card:not(.hsm-installer *) {
    border-radius: var(--hsm-radius-md);
  }

  .hsm-actions:not(.hsm-installer *) {
    align-items: stretch;
    flex-direction: column;
  }

  .hsm-actions:not(.hsm-installer *) .hsm-button {
    width: 100%;
  }

  .hsm-device__head {
    align-items: center;
  }

  /* La pastille d'étape rétrécit, la gouttière avec elle. */
  .hsm-stage:not(.hsm-installer *) {
    grid-template-columns: 2.25rem 1fr;
    gap: var(--hsm-space-4);
    padding-block: var(--hsm-space-6);
  }

  .hsm-stage__num {
    width: 2.25rem;
    height: 2.25rem;
    font-size: var(--hsm-text-sm);
  }

  .hsm-band {
    padding: var(--hsm-space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --hsm-color-muted: #3f4b57;
    --hsm-color-line: #aeb9af;
    --hsm-color-line-strong: #879689;
  }

  .hsm-card:not(.hsm-installer *),
  .hsm-button,
  .hsm-input:not(.hsm-installer *),
  .hsm-select,
  .hsm-textarea {
    box-shadow: none;
  }
}

@media (forced-colors: active) {
  .hsm-button,
  .hsm-card:not(.hsm-installer *),
  .hsm-notice,
  .hsm-status:not(.hsm-installer *),
  .hsm-empty {
    forced-color-adjust: auto;
  }
}

/* =============================================================================================
 * REPLI POUR LES NAVIGATEURS D'AVANT 2020  (ajoute le 2026-08-10)
 *
 * ⛔ POURQUOI CE BLOC EXISTE — mesure, pas supposition. Le telephone de Yossef s'est annonce
 * `Chrome/77.0.3865.92` (septembre 2019) avec un ecran utile de 303 px. Or `clamp()` et `min()`
 * n'arrivent qu'avec Chrome 79, et `gap` en flexbox avec Chrome 84. Toute la mise en page du site
 * repose sur ces trois-la : chez lui, ces declarations sont simplement JETEES.
 * Consequence exacte de sa plainte « c'est collé aux bords » : `.hsm-container` vaut
 * `width: min(100% - 2*gutter, 72rem)` -> declaration invalide -> largeur par defaut, donc 100 %,
 * donc plus aucune marge laterale. Ce n'etait pas un defaut de design, c'etait une page moderne
 * servie a un navigateur qui en jette la moitie.
 *
 * ⭐ POURQUOI `@supports not` ET PAS UNE VALEUR DE REPLI. Ecrire
 *     --hsm-gutter: 1.15rem;  puis  --hsm-gutter: clamp(...);
 * NE marche pas : une propriete personnalisee accepte presque toute valeur a l'analyse, donc la
 * seconde ecrase toujours la premiere et n'echoue qu'au CALCUL — ou la propriete prend sa valeur
 * INITIALE, jamais le repli qu'on croyait avoir pose. `@supports not` est la seule forme dont le
 * navigateur ancien tire la bonne branche.
 *
 * ⛔ Ce bloc ne doit RIEN changer sur un navigateur moderne : il est entierement enferme dans la
 *    condition. Si un jour on retire les `clamp()`, il devient inutile — pas faux.
 * ============================================================================================= */
@supports not (width: clamp(1rem, 2vw, 3rem)) {
  :root {
    --hsm-gutter: 1.15rem;
    --hsm-text-xl: 1.2rem;
    --hsm-text-2xl: 1.5rem;
    --hsm-text-3xl: 1.85rem;
  }

  /* La marge laterale revient par le REMPLISSAGE, qui lui est compris partout, au lieu d'une
   * largeur calculee. C'est aussi la forme la plus robuste : elle ne peut pas devenir invalide. */
  .hsm-container {
    width: 100%;
    max-width: var(--hsm-container);
    padding-left: var(--hsm-gutter);
    padding-right: var(--hsm-gutter);
    box-sizing: border-box;
  }

  /* Le remplissage des cartes etait lui aussi en `clamp()` : sans repli, le texte touche le bord
   * interieur de la carte. Ici une simple declaration suffit (propriete ordinaire, pas variable). */
  .hsm-card:not(.hsm-installer *) {
    padding: 1.25rem;
  }

  /* Le titre d'ouverture etait dimensionne en `clamp()` : sans repli il herite d'une taille qui
   * n'a rien a voir avec un ecran de 303 px. */
  .hsm-display {
    font-size: var(--hsm-text-3xl);
    max-width: 18ch;
  }
}

/* ⛔ Filet de securite, valable PARTOUT et pas seulement sur les vieux navigateurs : rien ne doit
 * pouvoir depasser la largeur utile. Mesure du 10/08 : 17 px de debordement horizontal, et aucun
 * bloc coupable identifie — ce qui deborde n'est donc pas un element unique mais une accumulation.
 * Une image ou un mot long suffit a la produire. */
video,
table,
pre {
  max-width: 100%;
}

/* ⛔ PAS de `body { overflow-x: hidden }` ici, et c'est deliberé. Ca ferait DISPARAITRE les 17 px
 * de debordement de l'ecran sans les supprimer du document — donc ca masquerait exactement ce que
 * la sonde vient d'etre reparee pour trouver, et le vrai coupable ne serait plus jamais identifie.
 * On corrige la cause au prochain releve, une fois le bloc fautif NOMME. */

/* =============================================================================================
 * REPLI N°2 — LES PROPRIETES LOGIQUES  (mesure du 10/08, 2e releve)
 *
 * ⛔ LA PREMIERE CORRECTION AVAIT LE DEFAUT QU'ELLE CORRIGEAIT : son `.hsm-container` de repli
 * etait ecrit en `padding-inline`, qui n'arrive qu'avec Chrome 87. Sur le Chrome 77 mesure, ce
 * repli etait donc jete exactement comme la regle qu'il remplacait — et les 25 blocs de la page
 * sont restes a 320 px pour une largeur utile de 303. Corrige : formes physiques uniquement.
 *
 * ⭐ CE QUE LA SONDE A REELLEMENT MESURE (et non deduit d'un numero de version) :
 *     clamp=0  min=0  gapflex=1  grid=1  var=1
 *   Donc `gap` en flexbox FONCTIONNE chez lui : mon repli de marges du 1er jet etait inutile, il a
 *   ete retire. C'est precisement pourquoi on mesure au lieu de lire une table de compatibilite —
 *   j'avais annonce `gap` non supporte, et c'etait faux.
 *
 * La feuille compte 25 declarations logiques (`margin-inline`, `padding-block`, `padding-inline`).
 * Ce sont elles qui portent le centrage du conteneur ET tout le rythme vertical : sans elles la
 * page n'a ni marge laterale ni respiration, ce qui decrit mot pour mot « collé aux bords » et
 * « trop chargé ».
 * ============================================================================================= */
@supports not (padding-inline: 1rem) {
  .hsm-container {
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--hsm-gutter);
    padding-right: var(--hsm-gutter);
  }

  /* Le rythme vertical : sans lui, les sections se touchent et la page parait un mur. */
  .hsm-header {
    padding-top: var(--hsm-space-5);
    padding-bottom: var(--hsm-space-5);
  }

  .hsm-section {
    padding-top: var(--hsm-space-10);
    padding-bottom: var(--hsm-space-10);
  }

  /* `dir="rtl"` : le debut de ligne est a DROITE, donc `margin-inline-start` vaut ici `margin-right`. */
  .hsm-nav {
    margin-right: auto;
  }

  .hsm-button,
  .hsm-nav__link {
    padding-left: var(--hsm-space-4);
    padding-right: var(--hsm-space-4);
  }
}

/* `dvh` n'arrive qu'avec Chrome 108. Ici une simple declaration de repli suffit : ce sont des
 * proprietes ORDINAIRES, dont la valeur invalide est ecartee des l'analyse — contrairement aux
 * variables, ou seul `@supports` fonctionne (cf le bloc precedent). */
body,
.hsm-page {
  min-height: 100vh;
}