/* ============================================================
   traak · Espace candidat · compte, profil, abonnement
   Surface éditoriale sombre (même atmosphère que les pages doc)
   S'appuie sur tokens.css + styles.css + legal.css
   ============================================================ */

/* L'attribut [hidden] doit toujours l'emporter sur display:flex/grid des classes */
[hidden] { display: none !important; }

/* ── Largeur de page un peu plus large que les pages doc ─────── */
.acc-shell { max-width: 1040px; }
.acc-shell--narrow { max-width: 760px; }

/* ── En-tête de compte (salutation + plan) ──────────────────── */
.acc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--brand-line);
}
.acc-head .acc-greeting {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--brand-paper-mute);
  max-width: 52ch;
  margin-top: 8px;
}
.acc-head .acc-greeting em {
  font-style: italic;
  color: var(--brand-paper);
  font-family: var(--font-display);
  font-size: 1.06em;
}

/* ── Badge de plan ──────────────────────────────────────────── */
.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--brand-line-strong);
  color: var(--brand-paper-mute);
  white-space: nowrap;
}
.plan-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-paper-whisper); }
.plan-badge.is-free .dot { background: var(--teal); }
.plan-badge.is-premium {
  color: #1A1404;
  border-color: transparent;
  background: var(--gradient-premium);
  font-weight: 500;
}
.plan-badge.is-premium .dot { background: #1A1404; }

/* ── Cartes / panneaux ──────────────────────────────────────── */
.acc-card {
  background: var(--brand-ink-raised);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-2xl);
  padding: clamp(22px, 3vw, 36px);
  margin-bottom: 24px;
}
.acc-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.acc-card-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--brand-paper);
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.acc-card-head h2 .num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--teal);
  text-transform: uppercase;
  flex-shrink: 0;
}
.acc-card-note {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: var(--brand-paper-mute);
  max-width: 60ch;
  margin: -8px 0 24px;
}
.acc-card-note a { color: var(--teal); border-bottom: 1px solid rgba(0,212,170,0.4); }

/* ── Formulaires ────────────────────────────────────────────── */
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-paper-whisper);
}
.field input,
.field select {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 15px;
  color: var(--brand-paper);
  background: var(--brand-ink);
  border: 1px solid var(--brand-line-strong);
  border-radius: var(--r-lg);
  padding: 13px 16px;
  transition: border-color var(--dur-fade), background var(--dur-fade);
  width: 100%;
}
.field input::placeholder { color: var(--brand-paper-whisper); }
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--teal);
  background: #0d1322;
}
.field input:disabled {
  color: var(--brand-paper-mute);
  cursor: not-allowed;
  opacity: 0.7;
}
.field .field-hint {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 12px;
  color: var(--brand-paper-whisper);
}
.field-static {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 15px;
  color: var(--brand-paper);
  background: var(--brand-ink);
  border: 1px solid var(--brand-line-strong);
  border-radius: var(--r-lg);
  padding: 13px 16px;
  opacity: 0.85;
}

/* ── Boutons ────────────────────────────────────────────────── */
.acc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fade), border-color var(--dur-fade), transform var(--dur-fade), color var(--dur-fade);
  text-align: center;
}
.acc-btn svg { width: 15px; height: 15px; }
.acc-btn--primary { background: var(--teal); color: #04231C; }
.acc-btn--primary:hover { background: #00E8BC; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,212,170,0.28); }
.acc-btn--primary:active { transform: translateY(0); }
.acc-btn--ghost { background: transparent; border-color: var(--brand-line-strong); color: var(--brand-paper); }
.acc-btn--ghost:hover { border-color: var(--brand-paper-mute); }
.acc-btn--premium { background: var(--gradient-premium); color: #1A1404; font-weight: 700; }
.acc-btn--premium:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255,170,0,0.32); }
.acc-btn--danger { background: transparent; border-color: rgba(229,62,62,0.4); color: #FF7A7A; }
.acc-btn--danger:hover { border-color: var(--error); background: rgba(229,62,62,0.08); }
.acc-btn--block { width: 100%; }
.acc-btn--lg { padding: 16px 28px; font-size: 15px; }

.acc-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* ── Ligne CV ───────────────────────────────────────────────── */
.cv-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--brand-ink);
  border: 1px solid var(--brand-line-strong);
  border-radius: var(--r-lg);
  flex-wrap: wrap;
}
.cv-icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: rgba(0,212,170,0.10);
  color: var(--teal);
}
.cv-icon svg { width: 20px; height: 20px; }
.cv-meta { flex: 1; min-width: 160px; }
.cv-meta .cv-name { font-family: var(--font-ui); font-weight: 500; font-size: 15px; color: var(--brand-paper); }
.cv-meta .cv-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--brand-paper-whisper); margin-top: 4px; }
.cv-row-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.cv-empty {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 15px;
  color: var(--brand-paper-mute);
}

/* ── Proposition "aussi mettre à jour sur ReKrute" ─────────────── */
.rekrute-cv-offer {
  margin-bottom: 16px;
  padding: 16px 18px;
  background: var(--brand-ink-raised);
  border: 1px solid var(--teal);
  border-radius: var(--r-lg);
}
.rekrute-cv-offer-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.rekrute-cv-offer-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: rgba(0, 212, 170, 0.14);
  color: var(--teal);
}
.rekrute-cv-offer-icon svg { width: 18px; height: 18px; }
.rekrute-cv-offer-title {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  color: var(--brand-paper);
}
.rekrute-cv-offer-text {
  margin-top: 4px;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.45;
  color: var(--brand-paper-mute);
}
.rekrute-cv-picker {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--brand-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rekrute-cv-picker .field-hint { margin-bottom: 2px; }
.rekrute-cv-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--brand-line-strong);
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  color: var(--brand-paper-mute);
  cursor: pointer;
  transition: border-color var(--dur-fade), background var(--dur-fade), color var(--dur-fade);
}
.rekrute-cv-option:has(input:checked) {
  border-color: var(--teal);
  background: rgba(0, 212, 170, 0.06);
  color: var(--brand-paper);
}
.rekrute-cv-option input[type="radio"] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--teal);
  cursor: pointer;
}

/* ── Bandeau abonnement dans le compte ──────────────────────── */
.sub-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 24px;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(255,215,0,0.10), rgba(255,170,0,0.04));
  border: 1px solid rgba(255,200,58,0.22);
}
.sub-banner .sub-copy { max-width: 52ch; }
.sub-banner .sub-copy strong { color: var(--brand-paper); font-weight: 600; font-family: var(--font-ui); font-size: 16px; }
.sub-banner .sub-copy p {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: var(--brand-paper-mute);
  margin-top: 4px;
}

/* ── Zone sensible ──────────────────────────────────────────── */
.danger-card { border-color: rgba(229,62,62,0.22); }
.danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.danger-row + .danger-row { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--brand-line); }
.danger-row .d-copy strong { font-family: var(--font-ui); font-weight: 500; font-size: 15px; color: var(--brand-paper); }
.danger-row .d-copy p { font-family: var(--font-ui); font-weight: 300; font-size: 13px; color: var(--brand-paper-mute); margin-top: 3px; max-width: 48ch; }

/* ════════════════════════════════════════════════════════════
   PREMIUM · tarification
═══════════════════════════════════════════════════════════════ */

/* ── Bascule mensuel / annuel ───────────────────────────────── */
.bill-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--brand-line-strong);
  background: var(--brand-ink-raised);
  margin: 0 auto 44px;
}
.bill-toggle button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-paper-mute);
  padding: 9px 18px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--dur-fade), color var(--dur-fade);
  white-space: nowrap;
}
.bill-toggle button.is-active { background: var(--teal); color: #04231C; font-weight: 500; }
.bill-toggle .save-tag { color: var(--teal); margin-left: 6px; }
.bill-toggle button.is-active .save-tag { color: #04231C; }

/* Téléphone : la bascule doit tenir dans la largeur.
   Le bénéfice « 2 mois offerts » reste affiché sous le prix de chaque offre. */
@media (max-width: 560px) {
  .bill-toggle { max-width: 100%; }
  .bill-toggle button { padding: 10px 12px; letter-spacing: 0.06em; }
  .bill-toggle .save-tag { display: none; }
}

/* ── Grille des plans ───────────────────────────────────────── */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 820px;
  margin-inline: auto;
}
.plans--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 100%;
}
.plan {
  background: var(--brand-ink-raised);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-2xl);
  padding: clamp(26px, 3vw, 38px);
  display: flex;
  flex-direction: column;
}
.plan--featured {
  border-color: rgba(255,200,58,0.35);
  background: linear-gradient(180deg, rgba(255,215,0,0.06), var(--brand-ink-raised) 40%);
  position: relative;
}
.plan-flag {
  position: absolute;
  top: -12px;
  left: clamp(26px, 3vw, 38px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--gradient-premium);
  color: #1A1404;
  font-weight: 600;
}
.plan-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--brand-paper);
}
.plan-name .it { font-style: italic; color: var(--teal); }
.plan-tagline {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--brand-paper-mute);
  margin: 8px 0 22px;
  min-height: 42px;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--brand-line);
}
.plan-price .amount {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand-paper);
}
.plan-price .period { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--brand-paper-whisper); }
.plan-price .amount .cur { font-size: 26px; }

.plan-features { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--brand-paper-mute);
}
.plan-features li strong { color: var(--brand-paper); font-weight: 500; }
.plan-features .tick {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 1px;
  color: var(--teal);
}
.plan-features li.muted { color: var(--brand-paper-whisper); }
.plan-features li.muted .tick { color: var(--brand-paper-whisper); }

/* Prix exprimé en mot (palier traak) */
.plan-price .amount--word { font-size: 40px; }

/* CTA à deux niveaux : action, puis montant engagé */
.acc-btn.js-pay {
  flex-direction: column;
  gap: 3px;
  line-height: 1.2;
  padding-block: 13px;
}
.js-pay .btn-main { font-size: 15px; font-weight: 700; }
.js-pay .btn-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.72;
}

/* Déclencheur de conversion : questions personnalisées visibles, grisées, cliquables */
.plan-features li.locked { padding: 0; }
.plan-features li.locked .lock-link {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--brand-paper-whisper);
  transition: color var(--dur-fade);
}
.plan-features li.locked .lock-link:hover { color: var(--teal); }
.plan-features li.locked .lock-link em { font-style: italic; }
.plan-features li.locked .tick { color: inherit; }

.matrix td.is-teaser { padding: 0; }
.matrix .teaser-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 15px 14px;
  width: 100%;
  color: var(--brand-paper-whisper);
  transition: color var(--dur-fade), background var(--dur-fade);
}
.matrix .teaser-link { white-space: nowrap; }
.matrix .teaser-link:hover { color: var(--teal); background: rgba(0, 212, 170, 0.06); }
.matrix .teaser-link svg { width: 14px; height: 14px; flex-shrink: 0; }

/* 3 colonnes : compacter légèrement */
.plans--3 .plan { padding: clamp(20px, 2.2vw, 30px); }
.plans--3 .plan-flag { left: clamp(20px, 2.2vw, 30px); }
.plans--3 .plan-price .amount { font-size: 42px; }
.plans--3 .plan-price .amount .cur { font-size: 20px; }
.plans--3 .plan-tagline { min-height: 54px; }

/* Note sous le prix (ex. « 2 mois offerts ») */
.plan-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--teal);
  margin: -14px 0 20px;
  min-height: 15px;
}

/* Premium+ */
.plan-name .plus { color: var(--teal); font-style: italic; }
.plan--plus { border-color: rgba(0, 212, 170, 0.28); }

/* ── Matrice comparative ────────────────────────────────────── */
.matrix-section { margin-top: 72px; }
.matrix-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.018em;
  color: var(--brand-paper);
  text-align: center;
  margin-bottom: 32px;
}
.matrix-title .it { font-style: italic; color: var(--teal); }
.matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.matrix {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  /* Largeurs imposees. En layout auto, c'est la valeur la plus longue de la
     grille qui dicte tout : premium+ s'elargissait, traak et premium se
     retrouvaient a l'etroit et leurs valeurs cassaient en deux. Trois
     colonnes d'offres de meme largeur, c'est la condition pour comparer. */
  table-layout: fixed;
}
.matrix thead th:first-child { width: 31%; }
.matrix thead th + th { width: 23%; }
.matrix th, .matrix td {
  padding: 15px 14px;
  text-align: center;
  border-bottom: 1px solid var(--brand-line);
  vertical-align: middle;
}
.matrix thead th {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--brand-paper);
  padding-bottom: 18px;
}
.matrix tbody th[scope="row"] {
  text-align: left;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  color: var(--brand-paper-mute);
}
.matrix tbody td {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  color: var(--brand-paper);
  text-wrap: balance;
  hyphens: none;
}
.matrix td.none, .matrix .none { color: var(--brand-paper-whisper); }
.matrix .is-reco { background: rgba(0, 212, 170, 0.05); }
.matrix thead th.is-reco { color: var(--teal); border-radius: 8px 8px 0 0; }
.matrix .m-ok { width: 18px; height: 18px; color: var(--teal); vertical-align: middle; }
.matrix .fn { color: var(--teal); }
/* Libelle d'offre porte par chaque cellule : inutile tant que les en-tetes
   de colonnes sont la, indispensable des que le tableau se deplie. */
.m-plan,
.m-all { display: none; }
.matrix-foot {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--brand-paper-whisper);
  margin-top: 16px;
}
.matrix-foot .fn { color: var(--teal); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 900px) {
  .plans--3 { grid-template-columns: 1fr; }
  .plans--3 .plan-tagline { min-height: 0; }
}

/* ── Matrice · sur telephone, le tableau se deplie ───────────────────────────
   La matrice demande 640 px de large : sur un telephone elle se lisait par
   defilement horizontal, un geste que personne ne devine et que rien
   n'annonce. En dessous de 720 px chaque ligne devient un bloc autonome, les
   trois offres l'une sous l'autre. Plus rien a faire glisser : tout se lit
   avec le pouce, vers le bas.
   Chaque cellule porte son libelle d'offre en clair (.m-plan), donc la
   lecture reste juste meme sans les en-tetes de colonnes, a l'oeil comme au
   lecteur d'ecran.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .matrix-scroll { overflow-x: visible; }
  .matrix {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
  }
  .matrix,
  .matrix tbody,
  .matrix tbody tr,
  .matrix tbody th,
  .matrix tbody td { display: block; width: auto; }
  .matrix thead { display: none; }

  .matrix tbody tr {
    border: 1px solid var(--brand-line);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    background: rgba(244, 241, 234, 0.015);
  }

  .matrix tbody th[scope="row"] {
    min-width: 0;
    padding: 0 0 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--brand-line);
    font-size: 15px;
    line-height: 1.4;
    color: var(--brand-paper);
    text-align: left;
  }

  .matrix tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    text-align: right;
    font-size: 14px;
  }
  .matrix tbody td + td { margin-top: 2px; }

  .m-plan,
  .matrix tbody tr.is-uniform .m-all {
    display: inline;
    flex: none;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-paper-whisper);
    text-align: left;
  }

  .matrix tbody td.is-reco { background: rgba(0, 212, 170, 0.07); }
  .matrix tbody td.is-reco .m-plan { color: var(--teal); }

  /* Une ligne qui vaut pareil pour les trois offres n'a pas besoin de trois
     lignes pour le dire : on garde la premiere cellule et on renomme. */
  .matrix tbody tr.is-uniform td + td { display: none; }
  .matrix tbody tr.is-uniform .m-plan { display: none; }
  .matrix tbody tr.is-uniform .m-all { display: inline; }

  /* la cellule teaser reprend le rythme des autres */
  .matrix tbody td.is-teaser { padding: 9px 12px; }
  .matrix .teaser-link { width: auto; padding: 0; justify-content: flex-end; }

  .matrix-title { text-align: left; }
  .matrix-foot { text-align: left; }
}

/* ── Réassurance paiement ───────────────────────────────────── */
.pay-reassure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-paper-whisper);
}
.pay-reassure .item { display: inline-flex; align-items: center; gap: 7px; }
.pay-reassure svg { width: 13px; height: 13px; color: var(--teal); }
.pay-method {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-paper-mute);
}
.pay-method strong { color: var(--brand-paper); font-weight: 600; letter-spacing: 0; text-transform: none; font-family: var(--font-ui); font-size: 13px; }

/* ════════════════════════════════════════════════════════════
   CONNEXION
═══════════════════════════════════════════════════════════════ */
.auth-card {
  max-width: 440px;
  margin-inline: auto;
  background: var(--brand-ink-raised);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-2xl);
  padding: clamp(28px, 4vw, 44px);
}
.auth-tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); border: 1px solid var(--brand-line-strong); margin-bottom: 28px; }
.auth-tabs button {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-paper-mute);
  padding: 10px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--dur-fade), color var(--dur-fade);
}
.auth-tabs button.is-active { background: var(--teal); color: #04231C; font-weight: 500; }
/* ── SSO ReKrute ────────────────────────────────────────────── */
.sso-group { margin-bottom: 18px; }
.rekrute-btn {
  background: var(--brand-paper);
  color: var(--brand-ink);
  font-weight: 600;
  border: 1px solid rgba(10, 14, 26, 0.07);
  gap: 12px;
}
.rekrute-btn:hover {
  background: #fff;
  border-color: rgba(10, 14, 26, 0.12);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.rekrute-btn:active { transform: translateY(0); }
/* Le logo porte la couleur de marque ReKrute — le texte reste sobre, une
   seule couleur, pour éviter le clash "deux styles dans la même phrase". */
.rekrute-btn .rk { font-weight: 700; }
.rekrute-mark {
  width: 24px; height: 24px;
  flex-shrink: 0;
  border-radius: 7px;
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1px rgba(10, 14, 26, 0.06);
}
.rekrute-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-paper-whisper);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--brand-line);
}

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-foot { text-align: center; margin-top: 22px; font-family: var(--font-ui); font-weight: 300; font-size: 13px; color: var(--brand-paper-whisper); }
.auth-foot a { color: var(--teal); }

/* ── Toast de confirmation ──────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(16px);
  z-index: 999;
  max-width: min(90vw, 440px);
  padding: 14px 20px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: var(--brand-paper);
  background: var(--brand-ink);
  border: 1px solid var(--brand-line-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fade), transform var(--dur-fade);
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.is-success { border-color: var(--teal); }
.toast.is-error { border-color: #ff6b6b; color: #ffc7c7; }

/* ── Bandeau application (le produit, c'est l'app) ─────────────
   Ajouté le 2026-09-17 d'après GUIDE-COMPTE-APP.md fourni par un
   collègue : sur compte.html, un candidat ne trouve ni coach ni
   entraînement — ce bandeau le redirige vers l'app dès l'arrivée. */
.app-card {
  background: linear-gradient(135deg, rgba(0,212,170,0.11), rgba(0,212,170,0.02));
  border: 1px solid rgba(0,212,170,0.32);
}
.app-card-grid { display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; }
.app-card-eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--teal);
}
.app-card-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.app-card-title {
  margin: 0 0 10px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 3.4vw, 42px); line-height: 1.05; letter-spacing: -.02em; color: var(--brand-paper);
}
.app-card-title .it { font-style: italic; color: var(--teal); }
.app-card-text {
  margin: 0 0 22px; max-width: 54ch; font-family: var(--font-ui); font-weight: 300;
  font-size: 16px; line-height: 1.55; color: var(--brand-paper-mute);
}
.app-card-text strong { color: var(--brand-paper); font-weight: 500; }
.app-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 24px; }
.app-split > div { padding: 14px 16px; border-radius: 10px; border: 1px solid var(--brand-line-strong); background: rgba(10,14,26,.45); }
.app-split > div.is-app { border-color: rgba(0,212,170,.35); }
.app-split-h { margin: 0 0 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-paper-whisper); }
.is-app .app-split-h { color: var(--teal); }
.app-split ul { list-style: none; margin: 0; padding: 0; }
.app-split li { position: relative; padding-left: 18px; margin: 5px 0; font-family: var(--font-ui); font-size: 14px; color: var(--brand-paper-mute); }
.app-split li::before { content: "·"; position: absolute; left: 4px; color: var(--brand-paper-whisper); }
.is-app li { color: var(--brand-paper); }
.is-app li::before { content: "✓"; left: 0; color: var(--teal); font-size: 12px; }
.app-card .store-buttons { margin: 0; }
.app-card .store-primary { display: none; }
.app-qr { width: 190px; text-align: center; }
.app-qr img { width: 190px; height: 190px; border-radius: 14px; background: var(--brand-paper); padding: 10px; }
.app-qr p { margin: 12px 0 0; font-family: var(--font-ui); font-size: 13px; line-height: 1.4; color: var(--brand-paper-mute); }
@media (max-width: 760px) {
  .app-card-grid { grid-template-columns: 1fr; gap: 0; }
  .app-qr { display: none; }
  .app-split { grid-template-columns: 1fr; gap: 10px; }
  .app-card .store-primary { display: flex; }
  .app-card .store-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .app-card .store-btn { min-height: 56px; padding: 8px 10px; gap: 8px; justify-content: center; }
  .app-card .store-btn .lbl b { font-size: 14px; }
  .app-card .store-btn .lbl small { font-size: 8.5px; }
}

/* ── Modal de confirmation (suppression de compte) ─────────────────────── */
.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10,14,26,0.72);
  backdrop-filter: blur(4px);
  padding: 20px;
}
.confirm-modal-overlay.is-open { display: flex; }
.confirm-modal {
  width: 100%;
  max-width: 380px;
  background: var(--brand-ink-raised);
  border: 1px solid var(--brand-line-strong);
  border-radius: var(--r-lg);
  padding: 24px;
}
.confirm-modal h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 17px;
  color: var(--brand-paper);
  margin: 0 0 8px;
}
.confirm-modal p {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 14px;
  color: var(--brand-paper-mute);
  margin: 0 0 16px;
}
.confirm-modal input[type="password"] {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--brand-paper);
  background: var(--brand-ink);
  border: 1px solid var(--brand-line-strong);
  border-radius: var(--r-lg);
  padding: 13px 16px;
}
.confirm-modal input[type="password"]:focus { outline: none; border-color: var(--teal); }
.confirm-modal .acc-actions { margin-top: 16px; }

/* ── Code à 6 chiffres (mot de passe oublié) ───────────────────────────── */
.code-boxes { display: flex; gap: 8px; }
.code-boxes .code-box {
  width: 44px;
  height: 52px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  color: var(--brand-paper);
  background: var(--brand-ink);
  border: 1px solid var(--brand-line-strong);
  border-radius: var(--r-lg);
  padding: 0;
  transition: border-color var(--dur-fade), background var(--dur-fade);
}
.code-boxes .code-box:focus {
  outline: none;
  border-color: var(--teal);
  background: #0d1322;
}
#resendCodeWrap { display: flex; align-items: center; gap: 6px; }
#resendCodeWrap a { color: var(--teal); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 720px) {
  .field-grid { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .acc-head { flex-direction: column; }
}