/* Outil « Vérifier un composer » — Figma « Libwatch - New », desktop 122:8160,
   mobile 122:13189, états de l'outil 122:8436. Valeurs mesurées dans le
   Figma le 22/10/2026 ; couleurs par les tokens uniquement.

   Hors de la classe racine .page-composer, deux composants partagés que ce
   ticket introduit : la Zone de dépôt (components/_dropzone, Figma 122:6199)
   et le captcha (shared/_captcha) ; plus le message de la newsletter
   (newsletter_subscriptions/_result). */

/* ── Zone de dépôt (Vide / Survol / Fichier / Erreur) ────────────────────── */
.dropzone {
  padding: var(--space-8);
  background: var(--bg-surface);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  transition: background-color 120ms ease, border-color 120ms ease;
}

.dropzone[data-state="file"] {
  border-style: solid;
  border-color: var(--border-accent);
}

.dropzone[data-state="error"] {
  background: var(--critical-subtle);
  border-style: solid;
  border-color: var(--critical-fill);
}

/* Survol (fichier glissé au-dessus) : pas d'état dans le Figma, la couleur
   d'action du design system. */
.dropzone[data-dragging="true"] {
  background: var(--bg-accent-subtle);
  border-color: var(--border-accent);
}

.dropzone:focus-visible {
  outline: 2px solid var(--border-accent);
  outline-offset: 2px;
}

.dropzone__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}

.dropzone__empty[hidden],
.dropzone__file[hidden],
.dropzone__error[hidden] {
  display: none;
}

.dropzone__glyph {
  color: var(--text-accent);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 64px;
  line-height: 60px;
  letter-spacing: -0.03em;
}

.dropzone__file {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.dropzone__icon {
  flex: none;
  padding: var(--space-3) 10px;
  background: var(--bg-accent-subtle);
  border-radius: var(--radius-xs);
  color: var(--text-accent);
  white-space: nowrap;
}

.dropzone__meta {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  overflow-wrap: anywhere;
}

.dropzone__file .btn {
  flex: none;
}

.dropzone__error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.dropzone__error-title {
  color: var(--critical-text);
}

/* ── Captcha ALTCHA (widget en case à cocher, aux couleurs du site) ──────── */
.captcha {
  --altcha-color-base: var(--bg-surface);
  --altcha-color-base-content: var(--text-primary);
  --altcha-color-neutral: var(--border-default);
  --altcha-color-neutral-content: var(--text-secondary);
  --altcha-color-primary: var(--bg-accent);
  --altcha-color-primary-content: var(--text-on-accent);
  --altcha-color-success: var(--bg-accent);
  --altcha-color-success-content: var(--text-on-accent);
  --altcha-color-error: var(--critical-fill);
  --altcha-color-error-content: var(--text-on-accent);
  --altcha-border-color: var(--border-default);
  --altcha-border-width: 1px;
  --altcha-border-radius: var(--radius-sm);
  --altcha-checkbox-size: 18px;
  --altcha-checkbox-border-width: 1.5px;
  --altcha-checkbox-border-color: var(--border-strong);
  --altcha-checkbox-border-radius: var(--radius-xs);
  --altcha-checkbox-outline-color: var(--border-accent);
  --altcha-spinner-color: var(--text-accent);
  --altcha-max-width: 100%;
  --altcha-padding: var(--space-4) 14px;
  --altcha-shadow: none;
  --altcha-transition-duration: 0.3s;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 23px;
  color: var(--text-primary);
}

.captcha altcha-widget {
  display: block;
}

/* Le widget calcule les positions de ses bulles avec --altcha-padding :
   on garde une seule valeur pour elles. */
.captcha .altcha-popover {
  --altcha-padding: var(--space-4);
}

.captcha .altcha-main {
  padding: var(--space-4) 14px;
}

.captcha .altcha-checkbox-wrap label {
  cursor: pointer;
  font-size: 15px;
  line-height: 23px;
}

.captcha__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Message de la newsletter (interface : NewsletterSubscriptionsController) */
.newsletter-result:empty {
  display: none;
}

.newsletter-result__message {
  color: var(--text-secondary);
}

.newsletter-result--pending .newsletter-result__message {
  color: var(--success-text);
}

.newsletter-result--invalid .newsletter-result__message,
.newsletter-result--captcha .newsletter-result__message,
.newsletter-result--rate_limited .newsletter-result__message,
.newsletter-result--unavailable .newsletter-result__message {
  color: var(--critical-text);
}

/* ══ Page ════════════════════════════════════════════════════════════════ */

/* Interlettrage du Figma : Body/Lead −0,2 % (−0,04 px à 20 px) et Button/L
   −0,2 % (−0,034 px à 17 px). Le socle pose −0,2 px (lu comme des pixels) :
   surcharge locale, signalée au principal. */
.page-composer .t-lead { letter-spacing: -0.04px; }
.page-composer .btn--l { letter-spacing: -0.034px; }

/* ── Établi : explication à gauche (420), outil à droite (700), 80 d'écart ─ */
.page-composer .composer-bench {
  padding-top: var(--space-12);
  padding-bottom: var(--space-13);
}

.page-composer .composer-bench__grid {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "intro tool"
    "steps tool"
    "privacy tool";
  column-gap: var(--space-12);
  row-gap: 28px;
  align-items: start;
}

.page-composer .composer-bench__intro {
  grid-area: intro;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  padding-top: var(--space-7);
}

.page-composer .composer-steps {
  grid-area: steps;
}

.page-composer .composer-steps__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-default);
}

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

.page-composer .composer-privacy {
  grid-area: privacy;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--bg-accent-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

.page-composer .composer-tool {
  grid-area: tool;
}

/* ── Carte de l'outil ─────────────────────────────────────────────────────── */
.page-composer .composer-tool {
  min-width: 0;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.page-composer .composer-tool__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 14px var(--space-7);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}

.page-composer .composer-tool__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  padding: 28px;
}

.page-composer .composer-tool__content > [hidden] {
  display: none;
}

/* Aperçu : bandeau Label/S + deux mesures côte à côte */
.page-composer .composer-preview {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}

.page-composer .composer-preview__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-subtle);
}

.page-composer .composer-preview__safe {
  color: var(--success-text);
}

.page-composer .composer-preview__measures {
  display: flex;
}

.page-composer .composer-preview__measure {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: var(--space-6);
}

.page-composer .composer-preview__measure + .composer-preview__measure {
  border-left: 1px solid var(--border-default);
}

/* LW Site/Data/XL ; rouge = fin de support, orange = sécurité seulement */
.page-composer .composer-preview__value {
  max-width: 100%;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 64px;
  line-height: 60px;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.page-composer .composer-preview__value--long {
  font-size: 40px;
  line-height: 44px;
}

.page-composer .composer-preview__value[data-tone="critical"] { color: var(--critical-text); }
.page-composer .composer-preview__value[data-tone="warning"] { color: var(--warning-text); }

/* Formulaire : filet haut, H4, champ + bouton, case, captcha, mention */
.page-composer .composer-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-default);
}

.page-composer .composer-form[hidden] {
  display: none;
}

.page-composer .composer-form__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.page-composer .composer-form__field {
  flex: 1 1 0;
}

/* Le bouton s'aligne sur le champ (libellé 23 + écart 8). */
.page-composer .composer-form__submit {
  flex: none;
  padding-top: 31px;
}

.page-composer .composer-form__button[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}

.page-composer .composer-form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 23px;
  cursor: pointer;
}

/* Case 18 px, contour 1,5 px border/strong (non précochée : consentement
   RGPD distinct de l'envoi du rapport). */
.page-composer .composer-form__checkbox {
  appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  width: 18px;
  height: 18px;
  margin-top: 2.5px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-xs);
  cursor: pointer;
}

.page-composer .composer-form__checkbox::before {
  content: "";
  width: 10px;
  height: 6px;
  margin-top: -2px;
  border-left: 2px solid var(--text-on-accent);
  border-bottom: 2px solid var(--text-on-accent);
  transform: rotate(-45deg) scale(0);
  transition: transform 120ms ease;
}

.page-composer .composer-form__checkbox:checked {
  background: var(--bg-accent);
  border-color: var(--bg-accent);
}

.page-composer .composer-form__checkbox:checked::before {
  transform: rotate(-45deg) scale(1);
}

.page-composer .composer-form__error {
  color: var(--critical-text);
}

.page-composer .composer-form__error[hidden] {
  display: none;
}

.page-composer .composer-form__note a:hover {
  color: var(--text-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Envoyé : encart succès + « Vérifier un autre projet → » */
.page-composer .composer-sent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-7);
}

.page-composer .composer-sent[hidden] {
  display: none;
}

.page-composer .composer-sent__box,
.page-composer .composer-confirm__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-6);
  background: var(--success-subtle);
  border-radius: var(--radius-sm);
}

.page-composer .composer-sent__box:focus {
  outline: none;
}

/* ── Ce que vous recevrez / FAQ : titre 420 à gauche, contenu à droite ───── */
.page-composer .composer-after {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}

.page-composer .composer-split {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}

.page-composer .composer-split__head {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  width: 420px;
}

.page-composer .composer-timeline {
  flex: 1 1 0;
  min-width: 0;
}

.page-composer .composer-timeline__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-6) 0;
}

.page-composer .composer-timeline__item + .composer-timeline__item {
  border-top: 1px solid var(--border-default);
}

.page-composer .composer-timeline__when {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 150px;
}

/* « Chaque nuit, 14 jours » dépasse 150 px d'un rien dans le Figma (texte
   sans retour à la ligne). */
.page-composer .composer-timeline__when > span {
  white-space: nowrap;
}

.page-composer .composer-timeline__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

/* ── Vos données : trois colonnes sous un filet 2 px border/strong ───────── */
.page-composer .composer-data__head {
  margin-bottom: var(--space-9);
}

.page-composer .composer-data__columns {
  display: flex;
  border-top: 2px solid var(--border-strong);
}

.page-composer .composer-data__column {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  min-width: 0;
  padding: var(--space-7) var(--space-8) 0;
}

.page-composer .composer-data__column:first-child {
  padding-left: 0;
}

.page-composer .composer-data__column:last-child {
  padding-right: 0;
}

.page-composer .composer-data__column + .composer-data__column {
  border-left: 1px solid var(--border-default);
}

/* Le titre de colonne n'est visible que sur mobile (Figma 390) ; sur
   desktop l'étiquette suffit à l'œil, le titre reste pour les lecteurs
   d'écran. */
.page-composer .composer-data__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.page-composer .composer-data__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  color: var(--text-primary);
}

/* ── FAQ : 64 d'écart, réponses limitées à 680 px ────────────────────────── */
.page-composer .composer-faq {
  padding-top: var(--space-11);
  border-top: 1px solid var(--border-default);
}

.page-composer .composer-faq .composer-split {
  gap: var(--space-11);
}

.page-composer .composer-faq__questions {
  flex: 1 1 0;
  min-width: 0;
}

.page-composer .composer-faq__questions .faq:last-child {
  border-bottom: 0;
}

.page-composer .composer-faq .faq__answer {
  max-width: 680px;
}

/* ── Page de confirmation (lien du mail) ─────────────────────────────────── */
.page-composer .composer-confirm .container {
  max-width: 700px;
}

.page-composer .composer-confirm__box {
  background: var(--bg-accent-subtle);
}

.page-composer .composer-confirm__box--success {
  background: var(--success-subtle);
}

.page-composer .composer-confirm__box--problem {
  background: var(--bg-subtle);
}

.page-composer .composer-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-7);
}

.page-composer .composer-confirm__actions form {
  display: contents;
}

/* ── Entre 768 et 1099 px : l'outil passe sous l'explication ─────────────── */
@media (max-width: 1099px) {
  .page-composer .composer-bench__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "intro" "tool" "steps" "privacy";
  }

  .page-composer .composer-bench__intro {
    max-width: 700px;
    padding-top: 0;
  }

  .page-composer .composer-split {
    flex-direction: column;
    gap: var(--space-9);
  }

  .page-composer .composer-faq .composer-split {
    gap: var(--space-9);
  }

  .page-composer .composer-split__head {
    width: auto;
    max-width: 700px;
  }

  .page-composer .composer-timeline,
  .page-composer .composer-faq__questions {
    width: 100%;
  }
}

/* ── Mobile (cadre 390) ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Héro 40/48, outil, encart confidentialité 88 plus bas ; les étapes du
     desktop n'existent pas dans le cadre mobile. */
  .page-composer .composer-bench {
    padding-top: var(--space-9);
    padding-bottom: 0;
  }

  .page-composer .composer-bench__grid {
    grid-template-areas: "intro" "tool" "privacy";
    row-gap: 0;
  }

  .page-composer .composer-bench__intro {
    gap: var(--space-6);
    margin-bottom: var(--space-10);
  }

  .page-composer .composer-steps {
    display: none;
  }

  .page-composer .composer-tool {
    margin-bottom: 88px;
  }

  .page-composer .composer-tool__bar {
    padding: var(--space-4) var(--space-5);
  }

  .page-composer .composer-tool__content {
    gap: var(--space-6);
    padding: var(--space-6) var(--space-5);
  }

  .page-composer .dropzone {
    padding: var(--space-5);
  }

  .page-composer .dropzone[data-state="empty"] {
    padding: var(--space-7) var(--space-5);
  }

  .page-composer .composer-preview__title {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 10px 14px;
  }

  .page-composer .composer-preview__measures {
    flex-direction: column;
  }

  .page-composer .composer-preview__measure {
    gap: var(--space-3);
    padding: var(--space-5) 14px;
  }

  .page-composer .composer-preview__measure + .composer-preview__measure {
    border-left: 0;
    border-top: 1px solid var(--border-default);
  }

  .page-composer .composer-preview__value {
    font-weight: 700;
    font-size: 40px;
    line-height: 44px;
    letter-spacing: -0.02em;
  }

  .page-composer .composer-form {
    gap: 14px;
    padding-top: var(--space-5);
  }

  .page-composer .composer-form__row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .page-composer .composer-form__field {
    flex: none;
  }

  /* Bouton M pleine largeur (« CTA Recevoir le rapport » du cadre mobile). */
  .page-composer .composer-form__submit {
    padding-top: 0;
  }

  .page-composer .composer-form__button {
    justify-content: center;
    width: 100%;
    padding: 10px var(--space-5);
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0;
  }

  .page-composer .composer-form__consent {
    gap: 10px;
    font-weight: 500;
    font-size: 13px;
    line-height: 19px;
  }

  .page-composer .composer-form__checkbox {
    margin-top: 0.5px;
  }

  .page-composer .composer-sent {
    gap: var(--space-6);
  }

  /* Après l'envoi : fond de page, étapes empilées, échéance en Label/M. */
  .page-composer .composer-after {
    background: transparent;
    border: 0;
  }

  .page-composer .composer-split,
  .page-composer .composer-faq .composer-split {
    gap: var(--space-7);
  }

  .page-composer .composer-split__head {
    gap: var(--space-4);
  }

  .page-composer .composer-split__head .t-body-m {
    font-size: 15px;
    line-height: 23px;
  }

  .page-composer .composer-timeline__item {
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-7) 0;
  }

  .page-composer .composer-timeline__item:first-child {
    padding-top: 0;
  }

  .page-composer .composer-timeline__item + .composer-timeline__item {
    border-top: 0;
  }

  .page-composer .composer-timeline__item:not(:last-child) {
    border-bottom: 1px solid var(--border-default);
  }

  .page-composer .composer-timeline__when {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    width: auto;
  }

  .page-composer .composer-timeline__when > .t-label-s {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.04em;
  }

  .page-composer .composer-timeline__body {
    gap: var(--space-4);
  }

  /* Vos données : une carte surface, trois blocs empilés, puces « — ». */
  .page-composer .composer-data {
    border-top: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
  }

  .page-composer .composer-data__head {
    gap: var(--space-4);
    margin-bottom: var(--space-8);
  }

  .page-composer .composer-data__columns {
    flex-direction: column;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }

  .page-composer .composer-data__column,
  .page-composer .composer-data__column:first-child,
  .page-composer .composer-data__column:last-child {
    padding: var(--space-7) var(--space-6);
  }

  .page-composer .composer-data__column + .composer-data__column {
    border-left: 0;
    border-top: 1px solid var(--border-default);
  }

  .page-composer .composer-data__title {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .page-composer .composer-data__items {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 23px;
  }

  .page-composer .composer-data__items li::before {
    content: "— ";
  }

  .page-composer .composer-faq {
    padding-top: 56px;
    border-top: 0;
  }

  .page-composer .composer-confirm__actions {
    flex-direction: column;
    align-items: stretch;
  }
}