/* ------------------------------------------------------------------ *
 *  Sas de validation légale — section « Déverrouiller l'audit profond »
 *  Feuille propre à rapport.html (chargée après rapport.css), sur le
 *  modèle de contact.css / legal.css : seuls des jetons du design
 *  system, aucune couleur inventée.
 * ------------------------------------------------------------------ */

.sas {
  position: relative;
  margin-top: clamp(34px, 4.4vw, 52px);
  padding: clamp(22px, 3.4vw, 40px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(120% 132% at 6% -12%, rgba(194, 84, 43, 0.1), transparent 58%),
    linear-gradient(180deg, #fff, var(--bg-soft));
  box-shadow: var(--shadow-md);
}

.sas__head {
  max-width: 78ch;
}

.sas__title {
  margin-top: 12px;
  font-size: clamp(1.55rem, 3vw, 2.05rem);
  letter-spacing: -0.032em;
}

.sas__free {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--jade-100);
  background: var(--jade-50);
  color: var(--jade-700);
  font-size: 0.58em;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
  white-space: nowrap;
}

.sas__lede {
  margin-top: 14px;
  color: var(--ink-500);
  font-size: clamp(0.95rem, 1.3vw, 1.02rem);
  line-height: 1.64;
}

/* Encadré de réassurance : rappelle que l'audit est gratuit et qu'aucun
   moyen de paiement n'est demandé. Placé juste après le chapeau, avant
   les onglets, pour lever le frein au moment du choix de la voie. */
.sas__offer {
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--jade-100);
  background: var(--jade-50);
  color: var(--jade-700);
  font-size: clamp(0.88rem, 1.2vw, 0.95rem);
  line-height: 1.58;
}

.sas__offer strong {
  color: inherit;
}

/* --- Onglets -------------------------------------------------------- */

.sas__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: clamp(22px, 3vw, 30px);
  padding: 6px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--bg-pearl);
}

.sas__tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  color: var(--ink-500);
  text-align: left;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
    box-shadow 0.24s var(--ease);
}

.sas__tab:hover {
  background: var(--bg);
  color: var(--ink-800);
}

.sas__tab[aria-selected="true"] {
  background: var(--bg);
  color: var(--ink-900);
  box-shadow: inset 3px 0 0 var(--terracotta-600), var(--shadow-sm);
}

.sas__tab-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink-800);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

.sas__tab[aria-selected="true"] .sas__tab-num {
  background: var(--terracotta-600);
}

.sas__tab-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sas__tab-title {
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

.sas__tab-hint {
  color: var(--ink-400);
  font-size: 0.76rem;
  line-height: 1.35;
}

/* --- Panneaux ------------------------------------------------------- */

.sas__panels {
  margin-top: clamp(20px, 2.6vw, 28px);
}

/* Sans cet !important, une règle de classe l'emporterait sur le
   display:none implicite de l'attribut `hidden`. */
.sas [hidden] {
  display: none !important;
}

.sas__panel:focus-visible {
  outline-offset: 8px;
}

.sas__step {
  max-width: 88ch;
  color: var(--ink-500);
  font-size: 0.94rem;
  line-height: 1.62;
}

/* --- Formulaire (voie 1) -------------------------------------------- */

.sas__form {
  display: grid;
  gap: 18px;
}

.sas__row {
  display: grid;
  gap: 9px;
}

.sas__label {
  color: var(--ink-800);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.sas__hint {
  color: var(--ink-400);
  font-size: 0.8rem;
  line-height: 1.55;
}

.sas__hint strong {
  color: var(--ink-800);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.sas__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* --- Mandat (case à cocher obligatoire) ----------------------------- */

.sas__mandate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--line-strong);
  background: var(--bg-soft);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.sas__mandate:hover {
  border-color: var(--ink-300);
}

.sas__mandate.is-checked {
  border-style: solid;
  border-color: var(--jade-100);
  background: var(--jade-50);
}

.sas__check {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--terracotta-600);
}

.sas__mandate-text {
  color: var(--ink-500);
  font-size: 0.87rem;
  line-height: 1.55;
}

/* --- Actions -------------------------------------------------------- */

.sas__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.sas__actions .btn {
  height: auto;
  min-height: var(--control-h);
  padding-block: 10px;
  white-space: normal;
  text-align: center;
}

/* Le bouton de reprise reste volontairement plus discret que l'action
   principale : deux boutons de même poids rendraient la hiérarchie
   illisible au moment précis où le visiteur est en échec. */
.sas__actions .btn--sm {
  min-height: 0;
  padding-block: 8px;
  font-size: 0.875rem;
}

.sas__note {
  flex: 1 1 240px;
  min-width: 0;
  color: var(--ink-400);
  font-size: 0.81rem;
  line-height: 1.55;
}

.sas__note strong {
  color: var(--ink-500);
}

.sas__status {
  margin-top: 16px;
  /* La précision technique (« HTTP 500 ») doit passer à la ligne : elle
     s'ajoute au message sans le pousser hors du cadre sur mobile. */
  flex-wrap: wrap;
}

.sas__hint--tech {
  margin-top: 10px;
}

/* --- Preuves techniques (voie 2) ------------------------------------ */

.sas__recipes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 18px);
  margin-top: 18px;
  transition: opacity 0.2s var(--ease);
}

.sas__recipes[aria-busy="true"] {
  opacity: 0.55;
}

.sas__recipe {
  padding: 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: var(--shadow-xs);
}

.sas__recipe-kicker {
  color: var(--ink-400);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sas__recipe-title {
  margin-top: 8px;
  font-size: 1.06rem;
  letter-spacing: -0.022em;
  line-height: 1.3;
}

.sas__recipe-text {
  margin-top: 10px;
  max-width: 62ch;
  color: var(--ink-500);
  font-size: 0.89rem;
  line-height: 1.58;
}

.sas__recipe-text code {
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg-pearl);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.84em;
  overflow-wrap: anywhere;
}

.sas__value {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 14px;
}

.sas__value-code {
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ink-800);
  background: var(--ink-900);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sas__copy {
  flex: none;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink-800);
  box-shadow: var(--shadow-xs);
  font-size: 0.82rem;
  font-weight: 600;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease),
    color 0.18s var(--ease);
}

.sas__copy:hover {
  border-color: var(--ink-300);
}

.sas__copy.is-done {
  border-color: var(--jade-100);
  background: var(--jade-50);
  color: var(--jade-700);
}

.sas__recipe-foot {
  margin-top: 10px;
  color: var(--ink-400);
  font-size: 0.78rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* --- Accompagnement (voie 3) ---------------------------------------- */

.sas__help-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.sas__help-list li {
  position: relative;
  padding-left: 22px;
  color: var(--ink-500);
  font-size: 0.9rem;
  line-height: 1.58;
}

.sas__help-list li::before {
  content: "";
  position: absolute;
  top: 0.58em;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--terracotta-500);
}

/* --- État déverrouillé ---------------------------------------------- */

.sas__unlocked {
  padding: clamp(20px, 2.8vw, 28px);
  border-radius: var(--radius-md);
  border: 1px solid var(--jade-100);
  background: linear-gradient(180deg, var(--jade-50), var(--bg) 72%);
}

.sas__unlocked-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--jade-600);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sas__unlocked-kicker svg {
  width: 15px;
  height: 15px;
}

.sas__unlocked-title {
  margin-top: 16px;
  font-size: clamp(1.28rem, 2.4vw, 1.6rem);
  letter-spacing: -0.028em;
  overflow-wrap: anywhere;
}

.sas__unlocked-text {
  margin-top: 12px;
  max-width: 78ch;
  color: var(--ink-500);
  font-size: 0.95rem;
  line-height: 1.62;
}

.sas__unlocked-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.sas__fact {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg);
}

.sas__fact dt {
  color: var(--ink-400);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sas__fact dd {
  margin-top: 6px;
  color: var(--ink-900);
  font-size: 0.9rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.sas__unlocked-note {
  margin-top: 16px;
  max-width: 78ch;
  color: var(--ink-400);
  font-size: 0.83rem;
  line-height: 1.55;
}

/* --- Reprise après validation (rapport absent de l'onglet) ---------- */

.sas__resume {
  margin-top: 22px;
  padding: clamp(18px, 2.6vw, 26px);
  border-radius: var(--radius-md);
  border: 1px solid var(--jade-100);
  background: linear-gradient(180deg, var(--jade-50), var(--bg) 72%);
  text-align: left;
}

/* --- Responsive ----------------------------------------------------- */

@media (max-width: 900px) {
  .sas__tabs {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

@media (max-width: 720px) {
  .sas__recipes {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .sas__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .sas__actions .btn {
    width: 100%;
  }

  .sas__value {
    flex-direction: column;
  }

  .sas__copy {
    min-height: 42px;
  }
}