/* Ajustements propres à l'intégration Grav, communs aux deux habillages (chargé après le skin) */

/* Bouton burger : <button> accessible à la place de l'<img role="button"> d'origine */
.nav__toggle { padding: 6px; cursor: pointer; }
.nav__toggle img { width: 32px; height: auto; }
.nav__toggle:focus-visible,
.nav__link:focus-visible,
.grid3[tabindex]:focus-visible { outline: 3px solid #FFB114; outline-offset: 4px; }
.btn:focus-visible,
.btn-secondary:focus-visible,
.link-secondary:focus-visible,
.demo__link a:focus-visible,
.way a:focus-visible { outline: 3px solid #FFB114; outline-offset: 2px; }

.hero__bg picture, .hero__bg img { width: 100%; }

/* Animations d'apparition désactivées si l'utilisateur réduit les animations */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Formulaire du plugin Form de Grav, habillé comme le formulaire d'origine */
.contact .form-wrapper { max-width: 640px; margin: 40px auto 0; position: relative; z-index: 10; }
.contact .form-wrapper .form { width: 100%; margin: 0; text-align: left; }
.form .form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.form .form-label label { font-weight: 700; }
.form .form-label .required { color: #DC2752; margin-left: 2px; }
.form .form-data, .form .form-input-wrapper, .form .form-textarea-wrapper { width: 100%; }
.form textarea { min-height: 8em; }
.form .form-errors, .form .form-error { color: #DC2752; font-size: .9em; margin-top: 4px; }
.form .buttons, .form .button-wrapper { margin-top: 8px; }
.contact .notices { max-width: 640px; margin: 0 auto 16px; padding: 14px 18px; border-radius: 14px; font-weight: 700; }
.contact .notices.green, .contact .notices.success { background: #ffffff; color: #0E6B2F; }
.contact .notices.red, .contact .notices.error { background: #ffffff; color: #B42318; }

/* Image manquante : aide à la mise en place */
.bk-placeholder {
  display: grid; place-items: center; min-height: 180px; width: 100%; padding: 1em;
  border: 2px dashed rgba(18, 115, 234, .35); border-radius: 1em;
  background: repeating-linear-gradient(45deg, transparent 0 12px, rgba(18,115,234,.06) 12px 24px);
  color: #1273ea; font-size: 14px; text-align: center;
}

/* Pages intérieures (mentions légales…) */
.page-default { padding: 60px 0 80px; color: #000; }
.page-default .container { max-width: 800px; }
.page-default h1 { font-size: 2.5em; }
.header--inner { background: #fff; }
.header--inner .brand__logo, .header--inner .nav__toggle { filter: none; }
.header--inner .nav__link { color: #000; }
.hero__subtitle p { margin: 0; }
.section__head p + p { margin-top: .6em; }
/* Les images reçoivent width/height (évite les sauts de mise en page) : on garde leurs proportions */
.section img[height] { height: auto; }

button { font-family: inherit; font-size: inherit; }

/* ---------- Sommaire de la page (« Sur cette page ») ----------
   Structure commune aux habillages ; l'apparence est dans le fichier de l'habillage.
   Le sommaire est posé en tête de <main>, collant sous l'en-tête, SANS hauteur propre (il ne déplace
   aucune section) ; la barre est dessinée en absolu. Il reste masqué (visibility) tant que script.js
   n'a pas constaté que le hero est dépassé : masqué, ses liens ne sont pas dans l'ordre de tabulation. */
.toc { position: sticky; top: var(--bk-header-h, 0px); height: 0; z-index: 40;
  visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility 0s linear .25s; }
.toc.is-visible { visibility: visible; opacity: 1; transition: opacity .25s ease; }
.toc__bar { position: absolute; top: 0; left: 0; right: 0; }
.toc__inner { display: flex; align-items: center; height: var(--bk-toc-h, 48px); }
.toc__list { position: relative; display: flex; align-items: stretch; min-width: 0; margin: 0; padding: 0;
  list-style: none; overflow-x: auto; scrollbar-width: none; }
.toc__list::-webkit-scrollbar { display: none; }
.toc__list li { flex: none; }
.toc__link { display: flex; align-items: center; height: var(--bk-toc-h, 48px); white-space: nowrap; }
.toc__link:focus-visible { outline: 3px solid #FFB114; outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .toc, .toc.is-visible { transition: none; } }

/* Un clic sur une ancre ne doit pas cacher le titre de la section sous l'en-tête et le sommaire */
main [id] { scroll-margin-top: calc(var(--bk-header-h, 0px) + 12px); }
.is-landing main [id] { scroll-margin-top: calc(var(--bk-header-h, 0px) + var(--bk-toc-h, 48px) + 12px); }