/* ==========================================================================
   IMPRA — PAGE AIDE
   Couche propre à /aide. Elle s'appuie sur essai.impra.css (champs, cartes,
   confirmation) et n'ajoute que ce qui lui est propre : les deux
   engagements de réponse, la priorité, le dépôt de fichiers.

   Registre : le même site que la homepage et le tunnel. Pas de centre de
   support générique, pas de casque audio, pas de bulle de chat.
   ========================================================================== */

/* ── Hero ─────────────────────────────────────────────────────────────── */
.aide__head { max-width: 62ch; margin-bottom: var(--space-40); }
.aide__titre { margin: 0; }
.aide__sous {
  margin: var(--space-16) 0 0;
  max-width: 58ch;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--impra-muted);
}

/* Les deux engagements de réponse. Ils annoncent un délai : ils doivent
   être lisibles d'un coup d'œil, sans crier. */
.delais {
  display: flex; flex-wrap: wrap; gap: var(--space-12);
  margin: var(--space-24) 0 0; padding: 0; list-style: none;
}
.delai {
  display: flex; align-items: flex-start; gap: var(--space-12);
  flex: 1 1 260px;
  padding: var(--space-16) var(--space-20);
  border-radius: 12px;
  background: var(--surface-1);
  border: var(--border-hairline);
}
.delai__ic {
  flex: 0 0 34px; width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--impra-blue) 9%, transparent);
  color: var(--impra-blue-text);
}
.delai__ic svg { width: 19px; height: 19px; display: block; }
.delai__texte {
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--impra-muted);
}
.delai__nom {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--impra-navy);
}
/* La valeur du délai est le mot qu'on doit retenir — dans la phrase, pas
   sur une ligne à elle. */
.delai__valeur {
  font-weight: var(--weight-bold);
  color: var(--impra-navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Deux colonnes : les repères à gauche, la demande à droite ───────── */
.aide-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
@media (min-width: 1024px) {
  .aide-grid {
    grid-template-columns: 330px minmax(0, 1fr);
    gap: var(--space-40);
    align-items: start;
  }
  /* Les repères restent sous les yeux pendant qu'on écrit. */
  .aide-cote { position: sticky; top: calc(72px + var(--space-24)); }
}

.aide-cote { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.aide-bloc {
  padding: var(--space-24);
  border-radius: var(--radius-cards);
  background: var(--surface-1);
  border: var(--border-hairline);
}
.aide-bloc__titre {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 var(--space-16);
  font-family: var(--font-geometric);
  font-size: 17px;
  font-weight: var(--weight-regular);
  letter-spacing: var(--ls-subheading);
  color: var(--impra-navy);
}
.aide-bloc__ic {
  flex: 0 0 30px; width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--impra-blue) 9%, transparent);
  color: var(--impra-blue-text);
}
.aide-bloc__ic svg { width: 17px; height: 17px; display: block; }

.conseils { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-12); }
.conseils li {
  position: relative;
  padding-left: 18px;
  font-size: var(--text-body-sm);
  line-height: 1.55;
  color: var(--impra-muted);
}
.conseils li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--impra-blue) 55%, transparent);
}
.aide-bloc__note {
  margin: var(--space-16) 0 0;
  padding-top: var(--space-16);
  border-top: var(--border-hairline);
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--impra-muted);
}

.ressources { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.ressources li + li { border-top: var(--border-hairline); }
.ressources a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
  min-height: 44px;                       /* cible tactile confortable */
  padding: var(--space-8) 0;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--impra-navy);
  text-decoration: none;
}
.ressources a::after {
  content: ""; flex: 0 0 15px; height: 15px;
  background: currentColor; color: var(--impra-muted-soft);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>') center / contain no-repeat;
}
.ressources a:hover { color: var(--impra-blue-text); }

/* ── Le formulaire ────────────────────────────────────────────────────── */
.aide-form {
  min-width: 0;
  padding: var(--space-32);
  border-radius: var(--radius-cards);
  background: var(--surface-1);
  border: 1px solid var(--impra-border-strong, rgba(15, 23, 46, .12));
  box-shadow: 0 1px 2px rgba(15, 23, 46, .04), 0 12px 32px rgba(15, 23, 46, .05);
}
.bloc { margin: 0; padding: 0; border: none; }
.bloc + .bloc { margin-top: var(--space-32); padding-top: var(--space-32); border-top: var(--border-hairline); }
.bloc__titre {
  display: block;
  margin: 0 0 var(--space-16); padding: 0;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--impra-muted);
}
.bloc__facultatif { font-weight: var(--weight-regular); text-transform: none; letter-spacing: 0; color: var(--impra-muted-soft); }
.champ__label {
  display: block; margin-bottom: 6px;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--impra-navy);
}

/* Deux réponses côte à côte : un segment, pas un menu déroulant. */
.segments { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.segment { flex: 1 1 180px; position: relative; cursor: pointer; }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment span {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 var(--space-16);
  border-radius: 10px;
  border: 1px solid var(--impra-border-strong, rgba(15, 23, 46, .18));
  background: var(--surface-1);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--impra-navy);
  text-align: center;
  transition: border-color 140ms var(--ease-standard), background-color 140ms var(--ease-standard);
}
.segment:has(input:checked) span {
  border-color: var(--impra-blue);
  box-shadow: 0 0 0 1px var(--impra-blue) inset;
  background: color-mix(in srgb, var(--impra-blue) 5%, var(--surface-1));
  color: var(--impra-blue-text);
}
.segment:has(input:focus-visible) span { outline: 2px solid var(--impra-blue); outline-offset: 2px; }
.segments--sm .segment { flex: 0 1 140px; }

/* ── La priorité ──────────────────────────────────────────────────────
   Trois états, distingués par le mot d'abord. La couleur n'est qu'un
   rappel : une pastille et une bordure, jamais une alarme — et rien qui
   ne se comprenne en noir et blanc.
   ---------------------------------------------------------------------- */
.prio { display: flex; flex-direction: column; gap: var(--space-8); }
.prio__choix {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border-radius: 10px;
  border: 1px solid var(--impra-border-strong, rgba(15, 23, 46, .16));
  background: var(--surface-1);
  cursor: pointer;
  transition: border-color 140ms var(--ease-standard), background-color 140ms var(--ease-standard);
}
.prio__choix input { position: absolute; opacity: 0; pointer-events: none; }
.prio__choix::before {
  content: ""; flex: 0 0 10px; width: 10px; height: 10px; margin-top: .3em;
  border-radius: 50%;
  border: 2px solid var(--teinte, var(--impra-border-strong, rgba(15, 23, 46, .3)));
  background: transparent;
  transition: background-color 140ms var(--ease-standard);
}
.prio__choix--standard { --teinte: #5B6478; }
.prio__choix--urgent   { --teinte: #B4740A; }
.prio__choix--bloquant { --teinte: #B3301B; }
.prio__nom {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--impra-navy);
}
.prio__desc { display: block; margin-top: 1px; font-size: var(--text-caption); line-height: 1.45; color: var(--impra-muted); }
.prio__choix:has(input:checked) {
  border-color: var(--teinte);
  background: color-mix(in srgb, var(--teinte) 5%, var(--surface-1));
}
.prio__choix:has(input:checked)::before { background: var(--teinte); }
.prio__choix:has(input:checked) .prio__nom { color: var(--teinte); }
.prio__choix:has(input:focus-visible) { outline: 2px solid var(--impra-blue); outline-offset: 2px; }

.prio__garde {
  display: flex; align-items: flex-start; gap: 9px;
  margin: var(--space-12) 0 0;
  padding: var(--space-12) var(--space-16);
  border-radius: 10px;
  background: color-mix(in srgb, #B3301B 6%, transparent);
  font-size: var(--text-caption);
  line-height: 1.5;
  color: #8F2413;
}
.prio__garde-ic { flex: 0 0 17px; width: 17px; height: 17px; margin-top: 1px; }
.prio__garde-ic svg { width: 100%; height: 100%; display: block; }

/* ── Le rappel de prudence, sous la description ──────────────────────── */
.champ__secret {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 6px;
  font-size: var(--text-caption);
  line-height: 1.45;
  color: var(--impra-muted);
}
.champ__secret-ic { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 1px; color: var(--impra-muted); }
.champ__secret-ic svg { width: 100%; height: 100%; display: block; }

/* ── Le dépôt de fichiers ─────────────────────────────────────────────
   Un vrai <input type="file"> dessous : le clavier, le lecteur d'écran et
   le sélecteur natif du téléphone continuent de fonctionner. Le glisser-
   déposer n'est qu'un raccourci en plus.
   ---------------------------------------------------------------------- */
.depot { position: relative; }
.depot input[type="file"] {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.depot__zone {
  display: flex; align-items: center; gap: var(--space-16);
  padding: var(--space-20) var(--space-24);
  border-radius: 12px;
  border: 1px dashed var(--impra-border-strong, rgba(15, 23, 46, .24));
  background: color-mix(in srgb, var(--impra-blue) 2.5%, var(--surface-1));
  cursor: pointer;
  transition: border-color 140ms var(--ease-standard), background-color 140ms var(--ease-standard);
}
.depot__zone:hover { border-color: var(--impra-blue); }
.depot input[type="file"]:focus-visible + .depot__zone { outline: 2px solid var(--impra-blue); outline-offset: 2px; }
.depot.is-survol .depot__zone {
  border-color: var(--impra-blue);
  border-style: solid;
  background: color-mix(in srgb, var(--impra-blue) 7%, var(--surface-1));
}
.depot__ic {
  flex: 0 0 38px; width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--impra-blue) 9%, transparent);
  color: var(--impra-blue-text);
}
.depot__ic svg { width: 20px; height: 20px; display: block; }
.depot__texte { font-size: var(--text-caption); line-height: 1.5; color: var(--impra-muted); }
.depot__texte b {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--impra-navy);
}
.depot__regles { margin: var(--space-12) 0 0; font-size: var(--text-caption); line-height: 1.5; color: var(--impra-muted); }

.depot__liste { margin: var(--space-12) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.depot__ligne {
  display: flex; align-items: center; gap: var(--space-12);
  padding: var(--space-8) var(--space-12);
  border-radius: 9px;
  border: var(--border-hairline);
  background: var(--surface-1);
  font-size: var(--text-caption);
}
.depot__nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--impra-navy); }
.depot__poids { margin-left: auto; flex: 0 0 auto; color: var(--impra-muted); font-variant-numeric: tabular-nums; }
.depot__ligne--refuse { border-color: color-mix(in srgb, #B3301B 40%, transparent); }
.depot__ligne--refuse .depot__nom { color: #8F2413; }
.depot__retirer {
  flex: 0 0 32px; width: 32px; height: 32px; margin: -6px -4px -6px 0;
  display: grid; place-items: center;
  border: none; background: none; cursor: pointer;
  border-radius: 8px;
  color: var(--impra-muted);
  font-size: 17px; line-height: 1;
}
.depot__retirer:hover { color: var(--impra-navy); background: color-mix(in srgb, var(--impra-navy) 6%, transparent); }
.depot__retirer:focus-visible { outline: 2px solid var(--impra-blue); outline-offset: 1px; }

/* ── L'envoi ──────────────────────────────────────────────────────────── */
.aide-envoi { margin-top: var(--space-32); padding-top: var(--space-24); border-top: var(--border-hairline); }
.aide-envoi__cta { width: 100%; min-height: 52px; }
.aide-envoi__note {
  margin: var(--space-12) 0 0;
  text-align: center;
  font-size: var(--text-caption);
  color: var(--impra-muted);
}
.aide-envoi__cta.is-occupe { opacity: .65; pointer-events: none; }

/* La réassurance accompagne le bouton — elle ne lui dispute pas la place. */
.assurances {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8) var(--space-20);
  margin: var(--space-20) 0 0; padding: 0; list-style: none;
}
.assurances li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--text-caption);
  color: var(--impra-muted);
}
.assurances__ic { flex: 0 0 16px; width: 16px; height: 16px; color: var(--impra-blue-text); }
.assurances__ic svg { width: 100%; height: 100%; display: block; }

/* ── La confirmation ──────────────────────────────────────────────────── */
.aide-succes { max-width: 640px; }
.aide-succes .succes__fiche dd { font-variant-numeric: tabular-nums; }
#a-reference { font-family: var(--font-geometric); letter-spacing: .04em; }

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* Les repères passent APRÈS le formulaire : on vient écrire, pas lire. */
  .aide-grid { display: flex; flex-direction: column; }
  .aide-form { order: 1; }
  .aide-cote { order: 2; }
}
@media (max-width: 620px) {
  .aide__head { margin-bottom: var(--space-32); }
  .aide__sous { font-size: var(--text-body-sm); }
  .delais { gap: var(--space-8); }
  .delai { flex: 1 1 100%; padding: var(--space-12) var(--space-16); }
  .aide-form { padding: var(--space-20); border-radius: 14px; }
  .aide-bloc { padding: var(--space-20); }
  .bloc + .bloc { margin-top: var(--space-24); padding-top: var(--space-24); }
  .segment { flex: 1 1 100%; }
  .segments--sm .segment { flex: 1 1 calc(50% - var(--space-8)); }
  .depot__zone { flex-direction: column; align-items: flex-start; gap: var(--space-12); padding: var(--space-16); }
  .assurances { flex-direction: column; align-items: flex-start; gap: var(--space-8); }
}
@media (max-width: 380px) {
  .aide-form, .aide-bloc { padding: var(--space-16); }
  .prio__choix { padding: var(--space-12); }
}

@media (prefers-reduced-motion: reduce) {
  .segment span, .prio__choix, .depot__zone { transition: none; }
}