/* ════════════════════════════════
   BASE - socle commun au site public ET au back-office
   Chargé par base.html.twig hors des blocs front_* (comme flashes.css) :
   reset, typographie du body, accessibilité et états partagés par
   FormAjax (chargement, erreurs de champ, alerte de formulaire).
   Les styles propres au site public vivent dans style.css, nav.css, etc.
════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Cible du lien d'évitement « Aller au contenu principal » (tabindex="-1") :
   pas de cadre de focus sur toute la zone. */
main:focus { outline: none; }

/* ── Astérisque des champs obligatoires ── */
.required { color: var(--required); font-weight: 500; }

/* ── Accessibilité ── */
.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; }
.sr-only-focusable:focus { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: auto; height: auto; padding: 10px 18px; margin: 0; overflow: visible; clip: auto; white-space: normal; background: var(--ap-dark, #242323); color: var(--ap-white, #fff); z-index: 100000; border-radius: 0 0 10px 10px; font-size: .9rem; font-weight: 600; text-decoration: none; }

/* ── Bouton en cours d'envoi (FormAjax.setLoading) ── */
.btn--loading { cursor: wait !important; opacity: .75; }
.btn-icon-spin.spinning {
  display: inline-block !important;
  animation: spin .75s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Erreurs de champ (FormAjax.setErrors) ──
   Couleurs : jetons de la charte (variables.css, chargé partout, BO compris).
   --ap-error #b42318 : contraste 6,6:1 sur blanc et 5,5:1 sur crème (WCAG AA). */
.form-errors { list-style: none; margin: 4px 0 0; padding: 0; }
.form-errors li { font-size: .8rem; line-height: 1.4; color: var(--ap-error, #b42318); margin-top: 2px; }
.input--error { border-color: var(--ap-field-error, #d64545) !important; box-shadow: 0 0 0 3px var(--ap-field-error-ring, rgba(214, 69, 69, .14)) !important; }

/* ── Alerte de formulaire (FormAjax) ──
   Message qui reste affiché au-dessus du bouton d'envoi quand l'envoi
   échoue pour une raison générale : page expirée, session expirée, trop de
   tentatives, erreur serveur ou réseau. S'étend sur toute la largeur du
   formulaire, qu'il soit en bloc, en flex ou en grille. */
.fa-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  flex: 0 0 100%;
  grid-column: 1 / -1;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--ap-error-line, #f1b8b0);
  border-radius: 12px;
  background: var(--ap-error-bg, #fdeeec);
  color: var(--ap-error-ink, #8a1c0e);
  font-family: var(--ap-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
}
/* Formulaire en flux normal (sans gap de flex ou de grille, cas du
   back-office) : marge haute posée par FormAjax, sinon l'alerte touche le
   dernier champ. */
.fa-alert.fa-alert--block { margin-top: 16px; }
.fa-alert--warning { border-color: var(--ap-warning-line, #efcd8f); background: var(--ap-warning-bg, #fff5e3); color: var(--ap-warning-ink, #6b4200); }
.fa-alert-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fa-alert-body { flex: 1; min-width: 0; }
.fa-alert-text { margin: 0; overflow-wrap: anywhere; }
.fa-alert-action {
  display: inline-block;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.fa-alert-action:hover { text-decoration-thickness: 2px; }
.fa-alert-action:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 3px; }

/* ── Avertissement avant déconnexion pour inactivité (idle-logout.js) ──
   Au-dessus de tout, y compris des fenêtres du site et du back-office
   (--ap-z-critical). Jetons de la charte, mêmes valeurs sur le site et
   dans le BO. */
.idle-warn-overlay { position: fixed; inset: 0; z-index: var(--ap-z-critical, 2147483000); display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--ap-scrim-strong, rgba(20, 18, 16, .62)); }
.idle-warn-overlay[hidden] { display: none; }
.idle-warn-dialog { box-sizing: border-box; width: 100%; max-width: 420px; background: var(--ap-paper, #fffdf8); color: var(--ap-dark, #242323); border-radius: var(--ap-radius, 16px); padding: 24px; box-shadow: var(--ap-shadow-dialog, 0 24px 60px -20px rgba(0, 0, 0, .45)); font-family: var(--ap-font-body, 'DM Sans', system-ui, sans-serif); text-align: left; }
.idle-warn-title { margin: 0 0 8px; font-size: 20px; line-height: 1.25; font-weight: 700; }
.idle-warn-text { margin: 0 0 20px; font-size: 15px; line-height: 1.5; color: var(--ap-ink-soft, #3d3a36); }
.idle-warn-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.idle-warn-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.idle-warn-btn { min-height: var(--ap-tap, 44px); padding: 10px 18px; border-radius: var(--ap-radius-pill, 999px); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; border: 1.5px solid var(--ap-dark, #242323); }
.idle-warn-btn--primary { background: var(--ap-dark, #242323); color: var(--ap-white, #fff); }
.idle-warn-btn--ghost { background: transparent; color: var(--ap-dark, #242323); }
.idle-warn-btn:focus-visible { outline: 3px solid var(--ap-orange-2, #f3a63c); outline-offset: 2px; }
@media (max-width: 420px) {
  .idle-warn-actions { flex-direction: column-reverse; }
  .idle-warn-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-icon-spin.spinning { animation-duration: 1.6s; }
}