/* Site public logi·libre & vert : compléments propres au site.
   Les classes de la charte (llv-*) viennent de llv-theme.css ; celles-ci sont en anglais. */

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  background: var(--llv-blanc); color: var(--llv-vert-texte); font-weight: 700;
  padding: .6rem 1rem; border-radius: 999px; box-shadow: var(--llv-ombre);
}
.skip-link:focus { top: 12px; }

/* Langues : présent mais masqué tant qu'il n'y a que le français */
.lang-picker[hidden] { display: none; }

/* Sections du contenu */
.section { display: grid; gap: var(--llv-e4); }
.section-head { display: grid; gap: var(--llv-e2); }
.lead { font-size: var(--llv-t-l); font-weight: 300; line-height: 1.45; }
.prose { display: grid; gap: var(--llv-e4); }
.prose ul, .prose ol { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--llv-e2); max-width: 65ch; }
.slogan { font-size: var(--llv-t-l); }
.slogan strong { color: var(--llv-rose-fonce); }

/* Cartes de valeurs et d'outils */
.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--llv-e2); }
.software { font-size: var(--llv-t-xs); color: var(--llv-texte-doux); }
.tool-group { display: grid; gap: var(--llv-e4); }
.tool-group h2 { font-size: var(--llv-t-l); }

/* Appel à l'action */
.cta { background: var(--llv-vert-pale); border-color: transparent; }
.actions { display: flex; flex-wrap: wrap; gap: var(--llv-e3); }

/* FAQ sans script : <details> */
.faq { display: grid; gap: var(--llv-e3); }
.faq details { border: 1px solid var(--llv-trait); border-radius: var(--llv-rayon-s); padding: var(--llv-e4); background: var(--llv-fond); }
.faq summary { font-weight: 700; cursor: pointer; }
.faq details[open] summary { margin-bottom: var(--llv-e3); }
.faq details p + p { margin-top: var(--llv-e3); }

/* Coordonnées */
.contact { display: grid; gap: var(--llv-e1); font-style: normal; }

/* Pied de page */
.footer-links { display: flex; flex-wrap: wrap; gap: var(--llv-e4); }
.footer-slogan strong { font-weight: 700; }

/* Quatre valeurs : deux par ligne sur grand écran plutôt que 3 + 1 */
.values { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }