/* =============================================================================
   Mot de passe by Belentia — couche outil commune (DA v3.3, 24/09/2026)
   Jetons de l'outil + composants absents du kit : formulaire, page légale,
   en-tête de page secondaire, bouton « Gérer mes cookies » du pied.
   Orange vif #F97316 en touches, jamais assombri ; aucune ombre.
   ========================================================================== */
:root {
  --accent: #F97316;
  --accent-ink: #FFFFFF;
  --accent-hover: #EA580C;
  --accent-6: color-mix(in srgb, var(--accent) 6%, #FFF);
  --accent-line: color-mix(in srgb, var(--accent) 40%, #FFF);
  --mono: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
}
body { background: var(--canvas); }

/* Pied : bouton de consentement présenté comme un lien discret */
.footer__consent {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  /* 24/09/2026 : cible tactile de 24 px minimum (22 px avant) */
  display: inline-flex; align-items: center; min-height: 24px;
}
.footer__consent:hover { color: var(--ink); text-decoration-color: var(--accent); }

/* En-tête des pages secondaires : même rythme que .tar-head / .blog-head */
.page-head { padding-top: 64px; padding-bottom: 32px; max-width: 760px; }
.page-head .eyebrow { margin-bottom: 12px; }
.page-head h1 { margin-bottom: 16px; }
.page-head .lead { color: var(--text); }
@media (max-width: 720px) { .page-head { padding-top: 40px; padding-bottom: 24px; } }

/* Gabarit de lecture (légal, guide) : colonne de 68 caractères */
.ld-legal, .reading {
  max-width: 720px; margin: 0 auto; padding: 56px var(--gutter) 24px;
  color: var(--text); font-size: 17px; line-height: 1.7;
}
.ld-legal h1 { font-size: clamp(32px, 5vw, 44px); letter-spacing: -0.03em; margin-bottom: 16px; color: var(--ink); }
.ld-legal h2 { font-size: 22px; margin-top: 40px; margin-bottom: 12px; color: var(--ink); }
.ld-legal h3 { font-size: 18px; margin-top: 24px; margin-bottom: 8px; color: var(--ink); }
.ld-legal p, .ld-legal li { color: var(--text); }
.ld-legal p + p { margin-top: 12px; }
.ld-legal ul, .ld-legal ol { padding-left: 1.2em; margin: 12px 0; }
.ld-legal li + li { margin-top: 6px; }
.ld-legal a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* Formulaires (signalement, opposition) */
.ld-bug-form, .form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px; box-shadow: none;
}
.ld-bug-form label, .form-card label { font-weight: 600; color: var(--ink); font-size: 15px; }
.ld-bug-form input[type="text"], .ld-bug-form input[type="email"], .ld-bug-form input[type="url"],
.ld-bug-form textarea, .ld-bug-form select, .form-card input, .form-card textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.ld-bug-form input:focus, .ld-bug-form textarea:focus, .ld-bug-form select:focus,
.form-card input:focus, .form-card textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
.ld-severity-pill { border-color: var(--line); background: #fff; color: var(--ink); border-radius: var(--radius-pill); }
.ld-severity-pill:has(input:checked) { border-color: var(--accent); background: var(--accent-6); color: var(--ink); }
.ld-bug-alert { border-radius: var(--radius-sm); border: 1px solid var(--line); }
.ld-bug-alert.ok, .ld-bug-alert.success { background: #F0FBF4; border-color: #BFE8CD; color: #14532D; }
.ld-bug-alert.err, .ld-bug-alert.error { background: #FEF3F2; border-color: #F8C9C4; color: #7A1D14; }

/* Pastilles de réassurance au trait */
.ld-hero-checks span, .ld-hero-checks li { color: var(--text); }

/* Icônes Phosphor des anciennes pages : au trait, dans la couleur de l'outil */
.ld-feature-icon i, .ld-trust-card i, .ld-usecase i { color: var(--accent); }

/* CTA secondaire des anciennes pages : blanc, filet complet */
.ld-cta { border-radius: var(--radius); padding: 48px 32px; }
@media (max-width: 720px) { .ld-cta { padding: 32px 20px; } }

/* Correction après contrôle (24/09/2026) : sous « mouvement réduit », plus aucune animation
   en cours sur l'accueil — la barre de lecture pilotée par le défilement (scroll-read) s'arrête. */
@media (prefers-reduced-motion: reduce) {
  .read-progress, .has-sda .read-progress { animation: none !important; display: none; }
}

/* Bande « Les outils Belentia » du layout : ses styles vivaient seulement dans les feuilles
   des pages maquettées (accueil, tarifs, blog, article) ; elle était brute sur les autres pages. */
.tools { padding-block: var(--space-6); border-top: 1px solid var(--line); }
.tools__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.tools__list { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
.tools__list a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  background: var(--canvas, #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill, 999px);
  font-size: 15px; font-weight: 600; color: var(--text);
}
.tools__list a:hover { border-color: var(--accent-line, color-mix(in srgb, var(--accent) 35%, #fff)); color: var(--ink); text-decoration: none; }
.tools__list a[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent-line, color-mix(in srgb, var(--accent) 35%, #fff)); color: var(--accent); }
.tools__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 8px; }

/* Dernier tour (24/09) : panneau mobile — deux entrées principales en grand, le reste en liste plus légère. */
.mobile-panel__group {
  margin: var(--space-4) 0 var(--space-1);
  font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--muted);
}
.mobile-panel nav a.mobile-panel__sub { padding: 11px 0; font-family: var(--font-body, inherit); font-size: 17px; font-weight: 600; }
.page-head .actions { margin-top: var(--space-4); }