/* =============================================================================
   SEO by Belentia — composants de la DA v3.3 pour les pages sans maquette
   (légal, installation, signalement, authentification, erreurs, /en).
   Jetons de base.css ; accent violet vif, jamais assombri ; blanc pur ;
   ombres quasi nulles ; aucun filet latéral coloré. 24/09/2026.
   ========================================================================== */
:root {
  --accent: #7C3AED;
  --accent-ink: #FFFFFF;
  --accent-soft: #F3EEFE;
  --accent-6: #F6F2FE;
  --sev-crit-ink: #B42318; --sev-crit-bg: #FEF3F2;
  --sev-warn-ink: #B54708; --sev-warn-bg: #FFFAEB;
  --sev-info-ink: #5B6472; --sev-info-bg: #F2F4F7;
  --ok-ink: #067647; --ok-bg: #ECFDF3;
}
body.seo-vitrine { background: var(--canvas); }
.skip-link:focus { position: fixed; left: 16px; top: 16px; z-index: 200; width: auto; height: auto; clip: auto; padding: 10px 16px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* --- Messages ------------------------------------------------------------- */
.form-alert, .v-alert {
  margin-top: var(--space-2);
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--sev-crit-ink) 30%, #fff);
  background: var(--sev-crit-bg);
  color: var(--sev-crit-ink);
  border-radius: var(--radius-sm);
  font-size: 15px; line-height: 1.5;
}
.v-alert--ok { border-color: color-mix(in srgb, var(--ok-ink) 30%, #fff); background: var(--ok-bg); color: var(--ok-ink); }
.v-alert--info { border-color: var(--line); background: var(--soft); color: var(--text); }
.v-alert ul { margin: 6px 0 0 18px; }

/* --- En-tête de page simple ---------------------------------------------- */
.page-head { padding: var(--space-8) 0 var(--space-4); }
.page-head .eyebrow { margin-bottom: var(--space-2); }
.page-head .lead { margin-top: var(--space-2); color: var(--muted); max-width: 640px; }

/* --- Gabarit de lecture (légal, installation, /en) ------------------------ */
.lg-container, .doc { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.lg-legal { padding: var(--space-8) 0 var(--space-6); color: var(--text); }
.lg-legal h1 { font-family: var(--font-title); font-size: clamp(32px, 5vw, 44px); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 var(--space-1); }
.lg-legal-date { color: var(--muted); font-size: 15px; margin-bottom: var(--space-5); }
.lg-legal h2 { font-family: var(--font-title); font-size: 22px; line-height: 1.3; color: var(--ink); margin: var(--space-6) 0 var(--space-2); letter-spacing: -0.01em; }
.lg-legal h3 { font-family: var(--font-title); font-size: 18px; color: var(--ink); margin: var(--space-4) 0 var(--space-1); }
.lg-legal p, .lg-legal li { font-size: 17px; line-height: 1.7; margin-bottom: 12px; }
.lg-legal ul, .lg-legal ol { padding-left: 22px; margin-bottom: var(--space-2); }
.lg-legal a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.lg-legal code { font-size: .92em; background: var(--soft); padding: 1px 6px; border-radius: 6px; }
.lg-legal table { width: 100%; border-collapse: collapse; margin: var(--space-2) 0; font-size: 15px; display: block; overflow-x: auto; }
.lg-legal th, .lg-legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.lg-card { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); background: var(--canvas); margin-bottom: var(--space-2); }
.lg-card p:last-child, .lg-card li:last-child { margin-bottom: 0; }
.lg-card ul { list-style: none; padding: 0; margin: 0; }
.lg-card--accent { border-color: color-mix(in srgb, var(--accent) 28%, #fff); background: var(--accent-6); }
.lg-back, .lg-legal button.lg-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas);
  color: var(--ink); font: 600 15px/1.2 var(--font-body); text-decoration: none; cursor: pointer;
}
.lg-back:hover { border-color: var(--line-strong); }
.lg-legal form { margin: 0; }

/* --- Étapes (installation) ------------------------------------------------ */
.doc-steps li { position: relative; }

/* --- Formulaires (bug, authentification) ---------------------------------- */
.v-field { display: grid; gap: 6px; margin-bottom: var(--space-2); }
.v-field label, .v-label { font-weight: 600; color: var(--ink); font-size: 15px; }
.v-field .hint, .v-hint { color: var(--muted); font-size: 14px; }
.v-input, .v-field input[type="text"], .v-field input[type="email"], .v-field input[type="password"], .v-field input[type="url"], .v-field textarea, .v-field select,
.auth-card input[type="text"], .auth-card input[type="email"], .auth-card input[type="password"], .auth-card input[type="url"] {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--canvas); color: var(--ink); font: 400 16px/1.4 var(--font-body);
}
.v-field textarea { min-height: 140px; resize: vertical; }
.v-input:focus, .v-field input:focus, .v-field textarea:focus, .v-field select:focus, .auth-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.v-check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; cursor: pointer; color: var(--text); font-size: 15px; line-height: 1.5; }
.v-check input[type="checkbox"], .v-check input[type="radio"] { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--accent); flex: 0 0 auto; }
.v-error { color: var(--sev-crit-ink); font-size: 14px; }

/* --- Carte centrée (authentification) ------------------------------------- */
.auth-shell { padding: var(--space-8) var(--gutter) var(--space-8); display: flex; justify-content: center; }
.auth-card { width: 100%; max-width: 440px; border: 1px solid var(--line); border-radius: 20px; padding: var(--space-5) var(--space-4); background: var(--canvas); }
.auth-card__mark { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: var(--space-3); }
.auth-card__mark svg { width: 22px; height: 22px; }
.auth-card h1, .auth-card .auth-title { font-family: var(--font-title); font-size: 28px; line-height: 1.2; color: var(--ink); letter-spacing: -0.02em; margin: 0 0 6px; }
.auth-card .auth-subtitle, .auth-card > p { color: var(--muted); font-size: 16px; line-height: 1.55; }
.auth-card form { margin-top: var(--space-3); }
.auth-card .form-group { display: grid; gap: 6px; margin-bottom: var(--space-2); }
.auth-card label { font-weight: 600; color: var(--ink); font-size: 15px; }
.auth-card .btn, .auth-card button[type="submit"] { width: 100%; justify-content: center; }
.auth-card button[type="submit"]:not(.btn) { min-height: 48px; border: 0; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); font: 600 16px/1 var(--font-body); cursor: pointer; }
.auth-card a { color: var(--accent); font-weight: 600; }
.auth-card .auth-footer, .auth-card .auth-links { margin-top: var(--space-3); text-align: center; color: var(--muted); font-size: 15px; }
.auth-card .alert, .auth-card .alert-error, .auth-card .alert-success { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 15px; margin-bottom: var(--space-2); border: 1px solid var(--line); background: var(--soft); color: var(--text); }
.auth-card .alert-error, .auth-card .alert.error { border-color: color-mix(in srgb, var(--sev-crit-ink) 30%, #fff); background: var(--sev-crit-bg); color: var(--sev-crit-ink); }
.auth-card .alert-success, .auth-card .alert.success { border-color: color-mix(in srgb, var(--ok-ink) 30%, #fff); background: var(--ok-bg); color: var(--ok-ink); }
.auth-card .error-text, .auth-card .field-error, .auth-card .invalid-feedback { color: var(--sev-crit-ink); font-size: 14px; }
.auth-card .checkbox-row, .auth-card .remember { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.auth-card input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); }
.auth-card .password-field, .auth-card .password-wrapper { position: relative; }
.auth-legal { max-width: 440px; margin: var(--space-2) auto 0; text-align: center; color: var(--muted); font-size: 14px; }
.auth-legal a { color: inherit; }

/* --- Erreurs --------------------------------------------------------------- */
.error-page { padding: var(--space-8) var(--gutter); display: flex; justify-content: center; text-align: center; }
.error-page__inner { max-width: 560px; }
.error-page__code { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 14px; }
.error-page__code svg { width: 16px; height: 16px; }
.error-page h1 { font-family: var(--font-title); font-size: clamp(30px, 5vw, 40px); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: var(--space-3) 0 var(--space-2); }
.error-page__msg { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0 auto var(--space-4); max-width: 460px; }
.error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.error-page__extra { margin-top: var(--space-5); text-align: left; }
.error-page__report { margin-top: var(--space-5); color: var(--muted); font-size: 14px; }
.error-page__report a { color: inherit; }
.error-page .btn-primary, .error-page a.btn-primary { background: var(--accent); color: var(--accent-ink); }

/* Anciennes classes de l'app présentes dans les vues d'erreur et d'auth. */
.btn.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.btn-secondary, .btn.btn-outline { background: var(--canvas); color: var(--ink); border: 1px solid var(--line); }

@media (max-width: 720px) {
  .page-head { padding-top: var(--space-6); }
  .lg-legal { padding-top: var(--space-6); }
  .auth-shell { padding-top: var(--space-5); }
  .auth-card { padding: var(--space-4) var(--space-3); border-radius: 16px; }
}

/* Actions des pages d'erreur (classes historiques des vues). */
.error-page__actions .btn-primary, .error-page__actions .btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px;
  border-radius: var(--radius-sm); font: 600 16px/1 var(--font-body); text-decoration: none; cursor: pointer;
}
.error-page__actions .btn-primary { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); }
.error-page__actions .btn-outline { background: var(--canvas); color: var(--ink); border: 1px solid var(--line); }
.error-page__actions .btn-outline:hover { border-color: var(--line-strong); }
.error-page__extra .v-label { margin-bottom: var(--space-1); }

/* Authentification : classes des vues auth/*. */
.auth-header h1 { font-family: var(--font-title); font-size: 28px; line-height: 1.2; color: var(--ink); letter-spacing: -0.02em; margin: 0 0 6px; }
.auth-header p { color: var(--muted); font-size: 16px; line-height: 1.55; }
.auth-form { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.auth-field { display: grid; gap: 6px; }
.auth-field label { font-weight: 600; color: var(--ink); font-size: 15px; }
.auth-field input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas); color: var(--ink); font: 400 16px/1.4 var(--font-body); }
.auth-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.auth-field .field-error, .field-error { color: var(--sev-crit-ink); font-size: 14px; }
.auth-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.auth-row label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); font-size: 15px; cursor: pointer; }
.auth-row input[type="checkbox"], .auth-form input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); }
.auth-forgot { color: var(--accent); font-weight: 600; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }
.auth-submit, .auth-secondary-action {
  width: 100%; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-sm); font: 600 16px/1 var(--font-body); cursor: pointer;
}
.auth-submit { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); }
.auth-submit:hover { background: var(--accent-hover); }
.auth-secondary-action { border: 1px solid var(--line); background: var(--canvas); color: var(--ink); }
.auth-banner { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--space-2); padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 25%, #fff); background: var(--accent-6); color: var(--ink); border-radius: var(--radius-sm); font-size: 15px; line-height: 1.5; }
.auth-banner.warn { border-color: color-mix(in srgb, var(--sev-warn-ink) 30%, #fff); background: var(--sev-warn-bg); color: var(--sev-warn-ink); }
.auth-banner .ph, .auth-banner .ph-fill { font-size: 18px; flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.auth-banner.warn .ph, .auth-banner.warn .ph-fill { color: var(--sev-warn-ink); }
.auth-alt { margin-top: var(--space-3); text-align: center; color: var(--muted); font-size: 15px; }
.auth-alt a { color: var(--accent); font-weight: 600; }
.password-visibility-toggle { color: var(--muted) !important; }
.password-visibility-toggle:hover { color: var(--accent) !important; background: var(--accent-6) !important; }

/* --- Tarifs (/app/upgrade) : état du compte, formulaire de paiement --------- */
.v-alert--warn { border-color: color-mix(in srgb, var(--sev-warn-ink) 30%, #fff); background: #FFFFFF; color: var(--text); }
.v-alert--warn p { margin: 0 0 var(--space-2); }
.v-alert--warn strong { color: var(--ink); }
.tarif-state { display: grid; gap: var(--space-2); margin-top: var(--space-4); max-width: 760px; }
.tarif-state .v-alert { margin: 0; }
.tarif-status { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); }
.tarif-status p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text); }
.tarif-status strong { color: var(--ink); }
.tarif-status__ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.tarif-status__ico svg { width: 20px; height: 20px; }
.tarif-status--full .tarif-status__ico { background: var(--sev-warn-bg); color: var(--sev-warn-ink); }
.plan--current { position: relative; }
.plan--current .plan__flag { position: absolute; top: 0; left: var(--space-4); translate: 0 -50%; margin: 0; background: var(--canvas); border: 1px solid var(--line); color: var(--muted); }
.plans .plan--current { margin-top: 0; }
@media (max-width: 720px) {
  .plan--current .plan__flag { left: 20px; }
  .plans .plan--current { margin-top: 10px; }
}
.plan__form { display: grid; gap: 4px; align-self: end; }
.plan__form .v-check { font-size: 14px; min-height: 44px; padding: 6px 0; }
.plan__form .v-check a { color: var(--accent); font-weight: 600; }
.plan__form .btn { margin-top: var(--space-1); }
.notice a { color: var(--accent); font-weight: 600; }

/* --- Notification (même contrat .toast que l'espace) ------------------------ */
.toast-container { position: fixed; z-index: 120; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); left: auto; max-width: min(420px, calc(100vw - 32px)); }
.toast { display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); box-shadow: 0 8px 24px rgba(15, 23, 42, .08); }
.toast__ico { flex: 0 0 auto; width: 22px; height: 22px; color: var(--ok-ink); }
.toast--error .toast__ico { color: var(--sev-crit-ink); }
.toast__ico svg { width: 22px; height: 22px; }
.toast__body { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.toast__body strong { display: block; color: var(--ink); }
.toast__close { flex: 0 0 auto; width: 44px; height: 44px; margin: -10px -8px -10px 0; display: grid; place-items: center; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: var(--radius-sm); }
.toast__close svg { width: 18px; height: 18px; }
.toast__close:hover { color: var(--ink); background: var(--soft); }

/* --- Pages /en ------------------------------------------------------------- */
.en-head { max-width: 780px; }
.en-hero .section-head { margin-bottom: 0; }
.en-hero .h1 { font-size: clamp(34px, 4.6vw, 52px); }
.en-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-4); }
.en-caption { margin-top: var(--space-3); text-align: center; font-size: 15px; color: var(--muted); }
.en-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.en-card .card__icon { margin-bottom: 0; }
.en-card p { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .en-actions .btn { flex: 1 1 100%; justify-content: center; }
}
.en-hero .head-vis__device { display: flex; flex-direction: column; align-items: center; }
.en-hero .head-vis__device .dv--laptop { margin-inline: auto; }

/* Correction après contrôle (24/09/2026) : pictos au trait des pages légales
   (ex-Phosphor rempli, non chargé par le layout vitrine → largeur 0). */
.lg-card li > svg.lg-li-ico { color: var(--accent); vertical-align: -4px; margin-right: 4px; }

/* Correction après contrôle (24/09/2026) : sur téléphone, l'état du compte
   tient sur une ligne sous les trois puces, pour que la première offre entre
   dans le premier écran comme sur la maquette tarifs v3.3. Le détail (quota
   utilisé, compte gratuit) reste sur ordinateur et dans les cartes d'offre. */
@media (max-width: 720px) {
  .tarif-state { margin-top: var(--space-3); }
  .tarif-status { align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; }
  .tarif-status p { font-size: 15px; line-height: 1.4; }
  .tarif-status__ico { width: 28px; height: 28px; border-radius: 8px; }
  .tarif-status__ico svg { width: 16px; height: 16px; }
  .tarif-status__more { display: none; }
}

/* Dernier tour (24/09) : retour vers l'espace pour un connecté (Tarifs, bug). */
.back-space { padding-top: 14px; }
.back-space__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--ink-2, #4B5563); font-size: .9rem; font-weight: 500; text-decoration: none;
}
.back-space__link:hover { color: var(--accent, #7C3AED); }

/* Retour Kylian (24/09) : liens de la barre au milieu exact, comme Mot de passe
   et Transcriptor. Dès 901 px, trois colonnes : marque à gauche, liens centrés,
   bouton à droite ; les deux côtés ont la même largeur, donc le centre des liens
   est le centre de la barre. Sous 900 px, rien ne change (burger). */
@media (min-width: 901px) {
  .nav__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .nav__inner > .brand { justify-self: start; }
  .nav__links { margin-left: 0; justify-content: center; }
  .nav__spacer { display: none; }
  .nav__actions { justify-self: end; }
}