/* =============================================================================
 * Page d'étape « Postuler » (visiteur sans compte, /offres/postuler/{id}).
 * Mobile : titre → offre → pourquoi → compte → ce que fait le compte ; le formulaire
 * arrive avant la liste, l'action reste proche du haut. Desktop : le compte en colonne
 * de droite, le reste à gauche. Aplats seulement (pierre → papier → blanc), ni filet
 * ni ombre. Les champs et le bouton Google viennent d'auth.css / _kmenu.scss.
 * ============================================================================= */
.ag {
  --ag-width: min(calc(100vw - 2 * var(--space-6)), 64rem);
  width: var(--ag-width);
  margin: var(--space-6) 0 var(--space-12) calc(50% - var(--ag-width) / 2);
  color: var(--color-text);
}
@media (max-width: 720px) { .ag { --ag-width: calc(100vw - 2 * var(--space-4)); margin-top: var(--space-4); } }

.ag-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "offer" "why" "account" "perks";
  gap: var(--space-6);
}
.ag-title   { grid-area: title; }
.ag-offer   { grid-area: offer; }
.ag-why     { grid-area: why; }
.ag-account { grid-area: account; }
.ag-perks   { grid-area: perks; }

/* La dernière rangée (1fr) absorbe la hauteur du formulaire : pas de trou entre les blocs
 * de gauche quand la colonne de droite est plus haute. */
@media (min-width: 60rem) {
  .ag-layout {
    grid-template-columns: minmax(0, 1fr) 26rem;
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas:
      "title   account"
      "offer   account"
      "why     account"
      "perks   account"
      ".       account";
    column-gap: var(--space-12);
  }
  .ag-account { align-self: start; }
}

.ag .ag-title {
  margin: 0;
  padding: 0;
  max-width: 18ch;
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-align: left;
  text-wrap: balance;
  color: var(--color-text-strong);
}

/* -- Rappel de l'offre : papier sur pierre -- */
.ag-offer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-6);
  border-radius: var(--radius-control);
  background: var(--color-paper);
}
.ag-offer__logo { --company-logo-size: var(--space-12); }
.ag-offer__body { display: grid; gap: var(--space-1); justify-items: start; min-width: 0; }
.ag .ag-offer__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text-strong);
  overflow-wrap: anywhere;
}
.ag .ag-offer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text);
}
/* Séparateur « · » en contenu CSS, muet pour les lecteurs d'écran ; après l'élément, pour
 * qu'un retour à la ligne ne commence jamais par lui. */
.ag-offer__meta span:not(:last-child)::after {
  content: "·";
  content: "·" / "";
  margin-left: var(--space-2);
  color: var(--color-text-muted);
}
.ag .ag-offer__next {
  margin: var(--space-2) 0 0;
  max-width: var(--measure-prose);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text);
}
.ag-offer__back { font-size: var(--text-sm); }
@media (pointer: coarse) {
  .ag-offer__back { display: inline-flex; align-items: center; min-height: var(--touch-target); }
}

/* -- Pourquoi -- */
.ag .ag-why {
  margin: 0;
  max-width: var(--measure-prose);
  font-size: var(--text-role-lead);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

/* -- Ce que fait le compte -- */
.ag .ag-perks__title {
  margin: 0 0 var(--space-3);
  padding: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text-strong);
}
.ag-perks__list {
  display: grid;
  gap: var(--space-3);
  max-width: var(--measure-prose);
  margin: 0;
  padding-left: var(--space-6);
  line-height: var(--leading-normal);
}
.ag-perks__list li { padding-left: var(--space-1); }
.ag-perks__list li::marker { color: var(--color-surface-brand); }
.ag-perks__list strong { color: var(--color-text-strong); }
/* Pass Sprint : une ligne de note, pas un encart ; l'or reste à la page /pass-sprint. */
.ag .ag-perks__sprint {
  margin: var(--space-4) 0 0;
  max-width: var(--measure-prose);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}
@media (pointer: coarse) {
  .ag-perks__sprint .ar-link { display: inline-flex; align-items: center; min-height: var(--touch-target); }
}

/* -- Compte : carte blanche, la seule de la page -- */
.ag-account { padding: var(--space-8); }
.ag .ag-account__title {
  margin: 0 0 var(--space-6);
  padding: 0;                   /* h2 legacy : padding-top 20px */
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text-strong);
}
.ag-account .ar-auth-form .ar-btn-primary { margin-top: var(--space-2); }
.ag-account__login { margin-top: var(--space-3); }

@media (max-width: 480px) {
  /* Chapô à 18px au téléphone : le bouton Google remonte dans le premier écran. */
  .ag .ag-why { font-size: var(--text-md); }
  .ag-offer { padding: var(--space-4); }
  .ag-account { padding: var(--space-6) var(--space-4); }
}