/* Gradifon — site vitrine : styles des éléments de contenu ajoutés par la passe UX / rédaction.
   Chargé après style.css. Ne redéfinit pas les composants existants : uniquement les classes
   et éléments introduits dans les pages HTML. */

/* Texte réservé aux lecteurs d’écran */
.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;
}

/* Héros : note sous les boutons + ligne de chiffres passée en liste */
.hero__note { margin-top: 14px; font-size: 14px; color: #8b96ad; max-width: 54ch; }
ul.hero__meta { list-style: none; padding: 0; margin-bottom: 0; }

/* Blocs .feature : titre passé de h3 à h2 (même rendu que le h3 d’origine) */
.feature h2 { font-size: clamp(24px, 3vw, 32px); margin-top: 12px; }

/* Sommaire en tête de la page Fonctionnalités (sur fond sombre) */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.jump a {
  display: inline-block; padding: 7px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  color: #c7cfe0; background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.1);
}
.jump a:hover { color: #fff; background: rgb(255 255 255 / 0.12); }

/* Légende auto / interactif passée en liste de définitions */
dl.legend { margin-bottom: 0; }
.legend > div { display: flex; align-items: center; gap: 8px; }
.legend dt, .legend dd { margin: 0; display: inline; }

/* Téléchargement */
.note a { font-weight: 700; text-decoration: underline; }
.dl__all { margin-top: 18px; color: var(--muted); font-size: 14px; }
.dl__all a { color: var(--indigo); font-weight: 600; }
.release__title { font-size: 20px; letter-spacing: -0.02em; margin: 0; }
ol.dl__phone { list-style: none; padding: 0; margin-bottom: 0; }

/* Contact */
.aside-note { margin-top: 18px; font-size: 14px; color: var(--muted); }
.aside-list a, .form__ok a, .form__hint a { color: var(--indigo); font-weight: 600; }
.form__hint { color: var(--muted); margin-top: 8px; font-size: 14px; }
.field__hint { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); font-weight: 500; }
.field--check { display: flex; gap: 10px; align-items: flex-start; }
.field--check input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.field--check span { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.form__ok h2 { font-size: 24px; }

/* Mentions légales (styles déplacés depuis la page) */
.legal { max-width: 760px; }
.legal h2 { font-size: 22px; margin-top: 44px; }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { color: var(--muted); font-size: 15.5px; margin-top: 12px; }
.legal ul { padding-left: 20px; margin: 0; }
.legal li { margin-top: 6px; }
.legal strong { color: var(--text); }
.legal a { color: var(--indigo); font-weight: 600; }
.legal__toc { margin-bottom: 36px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.legal__toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 24px; }
.legal__toc li { margin-top: 4px; font-size: 14.5px; break-inside: avoid; }
@media (max-width: 560px) { .legal__toc ol { columns: 1; } }
.legal .todo { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; padding: 1px 8px; border-radius: 6px; font-weight: 700; font-size: 13px; white-space: nowrap; }