/* ============================================================================
   Vinted Tracker — Pages publiques (landing, tarifs, auth, légal)

   Chargé *en plus* de `app.css`, jamais à sa place : les tokens, boutons,
   badges et champs viennent de là. Ce fichier n'ajoute que ce qui n'existe
   pas dans l'application — une mise en page qui défile, une grille de tarifs,
   des sections de vente.
   ========================================================================= */

/* `app.css` verrouille le défilement pour l'app shell (la zone de contenu est
   le scroller). Une page de vente, elle, doit défiler normalement. */
body.public {
    overflow: auto;
    height: auto;
    min-height: 100%;
}

.pub-wrap {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.pub-narrow { max-width: 760px; }

/* ─── Barre de navigation ────────────────────────────────────────────────── */

.pub-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    height: 64px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
    background: rgba(10, 14, 20, 0.82);
    backdrop-filter: blur(12px);
}

.pub-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.pub-brand-name {
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--text);
}

.pub-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 18px;
}

.pub-links a {
    padding: 7px 11px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    color: var(--text-muted);
    transition: color .12s ease, background .12s ease;
}

.pub-links a:hover { color: var(--text); background: var(--surface-2); }
.pub-links a.on    { color: var(--text); }

/* ─── Sections ───────────────────────────────────────────────────────────── */

.section { padding: 84px 0; }
.section-sunk { background: var(--surface-sunk); border-block: 1px solid var(--border); }

.section-lede { max-width: 62ch; }

.h1 {
    font-size: clamp(34px, 5.2vw, 58px);
    line-height: 1.06;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: var(--text);
}

.h2 {
    font-size: clamp(26px, 3.4vw, 36px);
    line-height: 1.15;
    font-weight: 660;
    letter-spacing: -0.028em;
    color: var(--text);
}

.h3 {
    font-size: 17px;
    font-weight: 620;
    letter-spacing: -0.012em;
    color: var(--text);
}

.lede {
    font-size: clamp(15px, 1.5vw, 17.5px);
    line-height: 1.62;
    color: var(--text-muted);
}

.prose p { margin: 0 0 14px; color: var(--text-muted); line-height: 1.68; }
.prose h2 { font-size: 18px; font-weight: 640; color: var(--text); margin: 30px 0 10px; }
.prose h3 { font-size: 14.5px; font-weight: 620; color: var(--text); margin: 22px 0 8px; }
.prose ul { margin: 0 0 14px; padding-left: 18px; list-style: disc; }
.prose li { color: var(--text-muted); line-height: 1.68; margin-bottom: 5px; }
.prose a  { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--text); font-weight: 600; }

/* ─── Hero ───────────────────────────────────────────────────────────────── */

.hero {
    position: relative;
    padding: 96px 0 72px;
    overflow: hidden;
}

/* Halo très discret. Un dégradé agressif derrière un titre le rend illisible ;
   celui-ci reste sous 8 % d'opacité et ne traverse pas le texte. */
.hero::before {
    content: "";
    position: absolute;
    top: -340px;
    left: 50%;
    width: 900px;
    height: 620px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(20, 184, 166, 0.14), transparent);
    pointer-events: none;
}

.hero > * { position: relative; }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 8px;
    border-radius: 99px;
    border: 1px solid var(--border-strong);
    background: var(--surface-1);
    font-size: 12.5px;
    color: var(--text-muted);
}

.pill b { color: var(--accent-text); font-weight: 600; }

/* Le halo ci-dessus est centré (`left: 50%`) : un hero aligné à gauche le
   laissait flotter au-dessus d'un vide, et rompait avec /pricing qui est
   centrée. Les largeurs de ligne restent contraintes — c'est la mesure de
   lecture qui compte, pas l'alignement. */
.hero-inner { text-align: center; }
/* `balance` répartit les lignes du titre au lieu de laisser un mot orphelin
   sur la dernière. Ignoré silencieusement par les moteurs qui ne le gèrent
   pas : la contrainte de largeur suffit alors. */
.hero-title { max-width: 21ch; margin-inline: auto; text-wrap: balance; }
.hero-lede  { max-width: 56ch; margin-inline: auto; }

.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero-inner .hero-cta { justify-content: center; }

.btn-lg { height: 42px; padding: 0 20px; font-size: 14.5px; border-radius: var(--radius); }

/* ─── Aperçu du produit ──────────────────────────────────────────────────── */

.shot {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    background: var(--surface-1);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.shot-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.shot-dot { width: 9px; height: 9px; border-radius: 99px; background: var(--surface-3); }
.shot-body { padding: 18px; }

/* ─── Grilles ────────────────────────────────────────────────────────────── */

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.feature {
    padding: 20px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-1);
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 13px;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent-text);
}

.feature p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }

/* Étapes numérotées */
.step { position: relative; padding-left: 46px; }

.step-num {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    font-size: 13px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--accent-text);
}

.step p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }

/* ─── Tarifs ─────────────────────────────────────────────────────────────── */

/* `stretch` et non `start` : les cartes prennent toutes la hauteur de la plus
   haute. C'est ce qui donne au `flex-grow` de `.price-feats` le mou à absorber,
   et donc aux boutons de s'aligner sur une même ligne. Avec `start`, chaque
   carte s'arrêtait à son contenu et les boutons s'étageaient en escalier selon
   le nombre de fonctionnalités de l'offre. */
.price-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface-1);
}

/* L'offre mise en avant se distingue par une bordure teal et un léger
   décrochage — pas par une taille différente, qui casserait l'alignement des
   prix et rendrait la comparaison plus difficile. */
.price-card.featured {
    border-color: var(--accent);
    background: linear-gradient(180deg, var(--accent-soft), transparent 180px), var(--surface-1);
}

.price-flag {
    position: absolute;
    top: -11px;
    left: 24px;
    padding: 3px 10px;
    border-radius: 99px;
    background: var(--accent);
    color: #042f2a;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.01em;
}

.price-amount {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 14px 0 4px;
}

.price-amount b {
    font-size: 38px;
    font-weight: 680;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.price-amount span { font-size: 14px; color: var(--text-subtle); }

/* `flex-grow: 1` : la liste absorbe le mou de la carte, ce qui aligne les
   boutons d'appel à l'action sur une même ligne d'une offre à l'autre. Sans
   cela, les offres se distinguant par le nombre de fonctionnalités, les
   boutons s'étageaient en escalier — et l'œil lisait ce décalage comme un
   défaut de finition juste au moment de cliquer. */
.price-feats { margin: 18px 0 0; display: flex; flex-direction: column; gap: 9px; flex-grow: 1; }

.price-feats li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

.price-feats svg { margin-top: 2px; color: var(--accent); }

/* Réassurance sous le bouton — juste là où naît l'hésitation au clic. Elle
   reste collée au bouton (10px, pas `margin-top: auto`) : c'est le geste
   qu'elle rassure, pas la carte qu'elle conclut. La poussant en bas, elle se
   détacherait du bouton sur les offres qui ont peu de fonctionnalités. Petite
   et discrète, la coche teal porte le seul accent de couleur. */
.cta-reassure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--text-subtle);
    text-align: center;
}

.cta-reassure svg { flex: none; color: var(--accent); }

/* Bandeau de confiance sous la grille : rappelle sécurité du paiement, prix
   TTC et résiliation libre. Les puces s'enroulent proprement sur mobile. */
.trust-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 18px;
    margin: 22px auto 0;
    padding: 14px 20px;
    max-width: 720px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-1);
}

.trust-bar-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 550;
    color: var(--text-muted);
}

.trust-bar-item svg { flex: none; color: var(--accent); }

/* ─── Tableau comparatif ─────────────────────────────────────────────────── */

/*
  Chaque colonne représente une offre : tout se centre, sauf l'intitulé de
  ligne. Les sélecteurs sont volontairement qualifiés par `.table` — sinon
  `.table thead th` (0,1,2) et `.table .col-num` (0,2,0) d'app.css gagnent la
  cascade et l'on se retrouve avec des en-têtes à gauche, des prix à droite et
  des coches au centre, soit trois axes différents dans le même tableau.
*/
.table.compare th,
.table.compare td { text-align: center; font-variant-numeric: tabular-nums; }
.table.compare th:first-child,
.table.compare td:first-child { text-align: left; font-variant-numeric: normal; }
.compare .yes { color: var(--accent-text); }
.compare .no  { color: var(--text-faint); }

/*
  Le reset global `svg { display: block }` (app.css) rend les coches insensibles
  à `text-align` : elles se collaient au bord gauche de la cellule pendant que
  les valeurs texte des autres lignes restaient centrées. `margin-inline: auto`
  recentre la boîte de bloc.
*/
.table.compare td svg { margin-inline: auto; }

/* ─── Calculateur ────────────────────────────────────────────────────────── */

/* `.field-label` est `display: block` : la valeur du curseur se collait donc à
   la fin de l'intitulé. En la renvoyant au bout de la ligne, elle se lit au
   bout de son propre curseur pendant qu'on le déplace. */
.calc .field-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.calc {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 22px;
    padding: 24px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface-1);
}

.calc-out {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px;
    border-radius: var(--radius);
    background: var(--surface-sunk);
    border: 1px solid var(--border);
}

.calc-metric {
    font-size: 40px;
    font-weight: 680;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    color: var(--accent-text);
}

.range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    margin: 12px 0 2px;
    border-radius: 99px;
    background: var(--surface-3);
    cursor: pointer;
}

.range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    border-radius: 99px;
    background: var(--accent);
    border: 3px solid var(--bg);
    cursor: pointer;
}

.range::-moz-range-thumb {
    width: 17px;
    height: 17px;
    border: 3px solid var(--bg);
    border-radius: 99px;
    background: var(--accent);
    cursor: pointer;
}

/* ─── FAQ ────────────────────────────────────────────────────────────────── */

.faq-item {
    border-bottom: 1px solid var(--border);
}

.faq-q {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 17px 2px;
    text-align: left;
    font-size: 14.5px;
    font-weight: 560;
    color: var(--text);
}

.faq-q svg { flex: none; color: var(--text-subtle); transition: transform .16s ease; }
.faq-q[aria-expanded="true"] svg { transform: rotate(90deg); }
.faq-a { padding: 0 34px 18px 2px; font-size: 13.5px; line-height: 1.68; color: var(--text-muted); }

/* ─── Bloc créateur ──────────────────────────────────────────────────────── */

.creator {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 26px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface-1);
}

.creator-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex: none;
    border-radius: 14px;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: 19px;
    font-weight: 680;
}

/* ─── Textes légaux ──────────────────────────────────────────────────────── */

/* Les trois documents se répondent : on garde un passage direct de l'un à
   l'autre plutôt que d'obliger à remonter jusqu'au pied de page. */
.legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    font-size: 13px;
}

.legal-nav a { color: var(--text-muted); }
.legal-nav a:hover { color: var(--text); text-decoration: underline; }

/* ─── Écrans d'authentification ──────────────────────────────────────────── */

.auth-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 64px);
    padding: 44px 20px 72px;
}

.auth-card {
    width: 100%;
    max-width: 404px;
}

.auth-box {
    padding: 28px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface-1);
    box-shadow: var(--shadow);
}

.auth-field { display: block; margin-bottom: 14px; }
.auth-field > .field-label { display: block; margin-bottom: 6px; }

/* Un écran d'authentification n'a que deux ou trois champs : ils peuvent
   respirer. La hauteur de 34 px des formulaires denses de l'app y aurait
   l'air étriquée, et 14 px de texte évitent le zoom automatique sur iOS. */
.auth-box .input { height: 40px; font-size: 14px; }

/* Le message d'erreur d'un champ est annoncé par `aria-describedby` côté HTML ;
   la couleur seule ne porte jamais l'information. */
.field-error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--danger-text);
}

.auth-sep {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.auth-sep::before, .auth-sep::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.auth-alt { margin-top: 18px; text-align: center; font-size: 13px; color: var(--text-muted); }
.auth-alt a { color: var(--accent-text); font-weight: 550; }
.auth-alt a:hover { text-decoration: underline; }

/* Jauge de robustesse du mot de passe */
.pw-meter { display: flex; gap: 4px; margin-top: 7px; }

.pw-seg {
    flex: 1;
    height: 3px;
    border-radius: 99px;
    background: var(--surface-3);
    transition: background .18s ease;
}

.pw-seg.on-weak   { background: var(--danger); }
.pw-seg.on-medium { background: var(--warn); }
.pw-seg.on-strong { background: var(--accent); }

/* Les règles sont listées en permanence, pas révélées après un échec : on
   n'apprend pas ses contraintes en se les prenant dans la figure. */
.pw-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 9px;
    padding: 0;
    list-style: none;
}

.pw-rule {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-subtle);
}

.pw-rule.done { color: var(--accent-text); }

/* Le glyphe change en même temps que la couleur : daltonien ou non, l'état
   d'une règle reste lisible. */
.pw-rule::before {
    content: "○";
    font-size: 10px;
    line-height: 1;
}
.pw-rule.done::before { content: "✓"; font-size: 11px; }

/* ─── Pied de page ───────────────────────────────────────────────────────── */

.pub-foot {
    padding: 52px 0 32px;
    border-top: 1px solid var(--border);
    background: var(--surface-sunk);
}

.foot-cols {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
    padding-bottom: 34px;
}

.foot-title {
    margin-bottom: 11px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.foot-cols a {
    display: block;
    margin-bottom: 8px;
    font-size: 13.5px;
    color: var(--text-muted);
}

.foot-cols a:hover { color: var(--text); }
.foot-cols .pub-brand { margin-bottom: 12px; }

.foot-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    justify-content: space-between;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.foot-bottom p { margin: 0; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
    .grid-3, .price-grid { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calc { grid-template-columns: 1fr; }
    .foot-cols { grid-template-columns: 1fr 1fr; gap: 26px; }
    .section { padding: 64px 0; }
    .hero { padding: 68px 0 56px; }

    /* Les trois ancres de la page d'accueil sortent de la barre, mais pas
       « Tarifs » : c'est la seule vraie page du lot, et la masquer rendait
       /pricing inatteignable depuis la navigation de toutes les pages
       publiques dès 960 px — footer mis à part. */
    .pub-links a:not(.nav-key) { display: none; }
}

@media (max-width: 640px) {
    .pub-wrap { padding: 0 16px; }
    .grid-2, .grid-4 { grid-template-columns: 1fr; }
    .foot-cols { grid-template-columns: 1fr; }
    .creator { flex-direction: column; gap: 14px; }
    .hero-cta .btn { width: 100%; justify-content: center; }
    .section { padding: 52px 0; }

    /* Sous 640 px, « Se connecter » suffit : le CTA principal est déjà dans le
       hero, le répéter dans une barre étroite pousse le logo hors de l'écran. */
    .pub-nav-cta .btn-primary { display: none; }
}