/*
 * Composants de l'interface de la doc (classes sp-), sur les jetons de
 * charte.css : site de lecture, aperçu et application d'édition. Les mêmes
 * classes servent aux gabarits Go et à React, pour un seul rendu. Sans
 * dépendance : <dialog> et popover natifs, icônes de icones.svg. Le tiroir de
 * Station Paye ne charge pas cette feuille.
 *
 * Accessibilité : focus visible (charte.css), commandes de 34 px (40 px au
 * doigt), contrastes AA,
 * mouvements coupés si le lecteur le demande (prefers-reduced-motion).
 */

/* Icônes : <svg class="sp-icone" aria-hidden="true"><use href="/statique/charte/icones.svg?v=…#search"/></svg>
   Le trait suit la couleur du texte. */
.sp-icone { width: 18px; height: 18px; flex: none; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sp-icone-s { width: 15px; height: 15px; }
.sp-icone-l { width: 22px; height: 22px; }

/* Texte lu par les lecteurs d'écran seulement */
.sp-cache { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Boutons : secondaire par défaut ; une seule action principale par écran. */
.sp-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
  min-height: var(--spdoc-cible); padding: 0 12px; border: 1px solid var(--spdoc-liseret-fort); border-radius: 8px;
  background: var(--spdoc-carte); color: var(--spdoc-texte); box-shadow: var(--spdoc-ombre-1);
  font: 600 var(--spdoc-taille-ui)/1.2 var(--spdoc-police); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--spdoc-duree), border-color var(--spdoc-duree), color var(--spdoc-duree), box-shadow var(--spdoc-duree); }
.sp-bouton:not(:disabled):hover { background: var(--spdoc-fond-gris); border-color: var(--spdoc-bordure-champ); color: var(--spdoc-texte); }
.sp-bouton-principal { background: var(--spdoc-marque); border-color: var(--spdoc-marque); color: #fff;
  box-shadow: 0 1px 2px rgba(40, 34, 138, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
.sp-bouton-principal:not(:disabled):hover { background: var(--spdoc-marque-survol); border-color: var(--spdoc-marque-survol); color: #fff; }
.sp-bouton-discret { background: transparent; border-color: transparent; box-shadow: none; color: var(--spdoc-texte-doux); }
.sp-bouton-discret:not(:disabled):hover { background: var(--spdoc-fond-gris); border-color: transparent; }
.sp-bouton-danger { background: var(--spdoc-coral-900); border-color: var(--spdoc-coral-900); color: #fff; }
.sp-bouton-danger:not(:disabled):hover { background: #a33409; border-color: #a33409; color: #fff; }
.sp-bouton-grand { min-height: 40px; padding: 0 16px; border-radius: 10px; font-size: 14px; }
.sp-bouton-icone { width: var(--spdoc-cible); padding: 0; } /* avec aria-label */
.sp-bouton:disabled, .sp-bouton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* Lien d'action (« Tout voir → ») */
.sp-lien { display: inline-flex; align-items: center; gap: 6px; color: var(--spdoc-lien); font-weight: 600; text-decoration: none; }
.sp-lien:hover { color: var(--spdoc-lien-survol); text-decoration: underline; text-underline-offset: 3px; }

/* Raccourci clavier */
.sp-touche { display: inline-block; font: 500 11px/1 var(--spdoc-police); color: var(--spdoc-gris); background: var(--spdoc-carte);
  border: 1px solid var(--spdoc-liseret-fort); border-bottom-width: 2px; border-radius: 5px; padding: 2px 5px; }

/* Puces, points d'état, compteurs */
.sp-puce { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; max-width: 100%; padding: 2px 8px; border-radius: 11px; box-sizing: border-box;
  background: var(--spdoc-fond-gris); color: var(--spdoc-texte-doux); font: 600 12px/1.2 var(--spdoc-police); }
.sp-puce-marque { background: var(--spdoc-marque-doux); color: var(--spdoc-marque-texte); }
.sp-puce-accent { background: var(--spdoc-accent-doux); color: var(--spdoc-accent-texte); }
.sp-puce-info { background: var(--spdoc-butterfly-50); color: var(--spdoc-butterfly-800); }
.sp-puce-danger { background: var(--spdoc-coral-50); color: var(--spdoc-coral-900); }
.sp-puce-alerte { background: var(--spdoc-orange-50); color: var(--spdoc-texte); box-shadow: inset 0 0 0 1px rgba(255, 152, 0, 0.45); }
.sp-puce-alerte .sp-icone { color: var(--spdoc-orange-900); }
.sp-point { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--spdoc-decor); }
.sp-point-en-ligne { background: var(--spdoc-leaf-600); box-shadow: 0 0 0 3px rgba(40, 189, 50, 0.18); }
.sp-point-attente { background: var(--spdoc-orange-500); }
.sp-point-brouillon { background: var(--spdoc-butterfly-500); }
.sp-compteur { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; box-sizing: border-box;
  background: var(--spdoc-marque); color: #fff; font: 700 11.5px/1 var(--spdoc-police); }
.sp-compteur-doux { background: var(--spdoc-fond-gris); color: var(--spdoc-texte-doux); }

/* Avatars et tuiles */
.sp-avatar { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--spdoc-marque-doux); color: var(--spdoc-marque-texte); font: 700 11px/1 var(--spdoc-police); }
.sp-avatar-s { width: 22px; height: 22px; font-size: 9.5px; }
.sp-avatar-agent { background: linear-gradient(135deg, var(--spdoc-indigo-400), var(--spdoc-mint-700)); color: #fff; }
.sp-tuile { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px;
  background: var(--spdoc-marque-doux); color: var(--spdoc-indigo-600); font: 700 15px/1 var(--spdoc-police-titre); }
.sp-tuile-s { width: 28px; height: 28px; border-radius: 8px; font-size: 13px; }
.sp-tuile-accent { background: var(--spdoc-accent-doux); color: var(--spdoc-mint-800); }
.sp-tuile-info { background: var(--spdoc-butterfly-50); color: var(--spdoc-butterfly-800); }
.sp-tuile-danger { background: var(--spdoc-coral-50); color: var(--spdoc-coral-900); }
.sp-tuile-alerte { background: var(--spdoc-orange-50); color: var(--spdoc-orange-900); }

/* Champs : <label class="sp-champ"><span class="sp-etiquette">…</span><input class="sp-saisie">…</label> */
.sp-champ { display: grid; gap: 5px; min-width: 0; }
.sp-etiquette { font: 600 var(--spdoc-taille-petite)/1.3 var(--spdoc-police); color: var(--spdoc-texte); }
.sp-aide { font-size: var(--spdoc-taille-petite); line-height: 1.45; color: var(--spdoc-gris); margin: 0; }
.sp-erreur { font-size: var(--spdoc-taille-petite); line-height: 1.45; font-weight: 600; color: var(--spdoc-coral-900); margin: 0; }
.sp-saisie { box-sizing: border-box; width: 100%; min-height: var(--spdoc-cible); padding: 5px 10px; margin: 0;
  border: 1px solid var(--spdoc-bordure-champ); border-radius: 8px; background: var(--spdoc-carte); color: var(--spdoc-texte);
  font: 400 var(--spdoc-taille-ui)/1.4 var(--spdoc-police); transition: border-color var(--spdoc-duree); }
.sp-saisie::placeholder { color: var(--spdoc-gris); opacity: 1; }
.sp-saisie:hover { border-color: var(--spdoc-texte-doux); }
.sp-saisie:focus-visible { outline: 2px solid var(--spdoc-focus); outline-offset: -1px; border-color: var(--spdoc-focus); }
.sp-saisie[aria-invalid="true"] { border-color: var(--spdoc-coral-900); }
.sp-saisie:disabled { background: var(--spdoc-fond-gris); color: var(--spdoc-gris); cursor: not-allowed; }
textarea.sp-saisie { min-height: 6em; resize: vertical; line-height: 1.5; }
select.sp-saisie { appearance: none; padding-right: 32px; cursor: pointer;
  background: var(--spdoc-carte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646668' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 15px no-repeat; }
/* Saisie avec préfixe (« /paie/ » devant une adresse) */
.sp-groupe-saisie { display: flex; align-items: center; min-height: var(--spdoc-cible); padding: 0 0 0 10px; box-sizing: border-box;
  border: 1px solid var(--spdoc-bordure-champ); border-radius: 8px; background: var(--spdoc-carte); font-size: var(--spdoc-taille-ui); }
.sp-groupe-saisie > span { color: var(--spdoc-gris); white-space: nowrap; }
.sp-groupe-saisie > .sp-saisie { border: 0; min-width: 0; padding-left: 2px; }
.sp-groupe-saisie > .sp-saisie:focus-visible { outline: 0; }
.sp-groupe-saisie:focus-within { outline: 2px solid var(--spdoc-focus); outline-offset: -1px; border-color: var(--spdoc-focus); }
/* Cases et boutons radio : <label class="sp-case"><input type="checkbox"> Libellé</label> */
.sp-case { display: inline-flex; align-items: center; gap: 8px; min-height: var(--spdoc-cible); font-size: var(--spdoc-taille-ui); color: var(--spdoc-texte); cursor: pointer; }
.sp-case input { width: 16px; height: 16px; margin: 0; accent-color: var(--spdoc-marque); cursor: pointer; flex: none; }
/* Interrupteur : <input type="checkbox" role="switch" class="sp-interrupteur"> */
input.sp-interrupteur { appearance: none; position: relative; flex: none; width: 34px; height: 20px; margin: 0; border-radius: 999px; cursor: pointer;
  background: var(--spdoc-bordure-champ); transition: background-color var(--spdoc-duree); }
.sp-interrupteur::before { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform var(--spdoc-duree); }
.sp-interrupteur:checked { background: var(--spdoc-mint-700); }
.sp-interrupteur:checked::before { transform: translateX(14px); }
.sp-interrupteur:disabled { opacity: .5; cursor: not-allowed; }
/* Champ de recherche (en-tête du site, barre du haut de l'édition) */
.sp-recherche { display: flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: var(--spdoc-cible); padding: 0 6px 0 10px;
  border: 1px solid var(--spdoc-liseret-fort); border-radius: 8px; background: var(--spdoc-fond-gris); color: var(--spdoc-gris);
  transition: border-color var(--spdoc-duree), background-color var(--spdoc-duree); }
.sp-recherche:focus-within { background: var(--spdoc-carte); border-color: var(--spdoc-focus); outline: 2px solid var(--spdoc-focus); outline-offset: -1px; }
.sp-recherche input { flex: 1; min-width: 0; height: calc(var(--spdoc-cible) - 2px); border: 0; padding: 0; background: transparent; color: var(--spdoc-texte);
  font: 400 var(--spdoc-taille-ui)/1 var(--spdoc-police); outline: 0; }
.sp-recherche input::placeholder { color: var(--spdoc-gris); opacity: 1; }
.sp-recherche input::-webkit-search-cancel-button { display: none; }

/* Cartes */
.sp-carte { display: block; box-sizing: border-box; background: var(--spdoc-carte); border: 1px solid var(--spdoc-liseret);
  border-radius: var(--spdoc-rayon-l); padding: 16px; box-shadow: var(--spdoc-ombre-1); color: inherit; }
.sp-carte-relief { border-color: rgba(255, 255, 255, 0.6); border-radius: 14px; box-shadow: var(--spdoc-ombre-2); }
a.sp-carte { text-decoration: none; transition: border-color var(--spdoc-duree), box-shadow var(--spdoc-duree); }
a.sp-carte:hover { border-color: var(--spdoc-indigo-100); box-shadow: var(--spdoc-ombre-2); }
.sp-carte-alerte { border-color: rgba(255, 152, 0, 0.45); box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.08), var(--spdoc-ombre-1); }
.sp-carte-titre { margin: 0; font: 600 14.5px/1.35 var(--spdoc-police); color: var(--spdoc-texte); }

/* Onglets : <nav class="sp-onglets"><a aria-current="page">…</a></nav>, ou role="tablist" et aria-selected */
.sp-onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--spdoc-liseret); overflow-x: auto; scrollbar-width: none; }
.sp-onglets > a, .sp-onglets > button { display: inline-flex; align-items: center; gap: 8px; min-height: var(--spdoc-cible); padding: 0 12px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none; color: var(--spdoc-gris); white-space: nowrap; cursor: pointer;
  font: 600 var(--spdoc-taille-ui)/1 var(--spdoc-police); text-decoration: none; transition: color var(--spdoc-duree), border-color var(--spdoc-duree); }
.sp-onglets > :hover { color: var(--spdoc-texte); }
.sp-onglets > [aria-current="page"], .sp-onglets > [aria-selected="true"] { color: var(--spdoc-marque-texte); border-bottom-color: var(--spdoc-marque); }
.sp-onglets > :focus-visible { outline-offset: -2px; }

/* Segments : un choix parmi quelques-uns (aria-pressed, aria-checked, aria-selected ou aria-current) */
.sp-segments { display: inline-flex; gap: 2px; max-width: 100%; box-sizing: border-box; padding: 2px; overflow-x: auto; scrollbar-width: none;
  border: 1px solid var(--spdoc-liseret); border-radius: 9px; background: var(--spdoc-fond-gris); }
.sp-segments > a, .sp-segments > button { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; flex: none;
  border: 0; border-radius: 7px; background: none; color: var(--spdoc-gris); white-space: nowrap; cursor: pointer;
  font: 600 var(--spdoc-taille-ui)/1 var(--spdoc-police); text-decoration: none; transition: background-color var(--spdoc-duree), color var(--spdoc-duree); }
.sp-segments > :hover { color: var(--spdoc-texte); }
.sp-segments > [aria-pressed="true"], .sp-segments > [aria-checked="true"], .sp-segments > [aria-selected="true"], .sp-segments > [aria-current="page"] {
  background: var(--spdoc-carte); color: var(--spdoc-texte); box-shadow: var(--spdoc-ombre-1); }

/* Listes : lignes dans une carte (pages, clés d'aide, retours, membres) */
.sp-liste { list-style: none; margin: 0; padding: 0; background: var(--spdoc-carte); border: 1px solid var(--spdoc-liseret);
  border-radius: var(--spdoc-rayon-l); box-shadow: var(--spdoc-ombre-1); overflow: hidden; }
.sp-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; box-sizing: border-box; color: inherit; text-decoration: none; }
.sp-liste > li + li, .sp-liste > .sp-ligne + .sp-ligne { border-top: 1px solid var(--spdoc-liseret); }
a.sp-ligne, .sp-liste a.sp-ligne { transition: background-color var(--spdoc-duree); }
a.sp-ligne:hover { background: var(--spdoc-fond); }
a.sp-ligne:focus-visible { outline-offset: -2px; }
.sp-ligne-corps { flex: 1 1 12em; min-width: 0; } /* les actions passent dessous s'il n'y a pas la place */
.sp-ligne-titre { display: block; font: 600 13.5px/1.35 var(--spdoc-police); color: var(--spdoc-texte); }
.sp-ligne-info { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 1px; font-size: 12px; color: var(--spdoc-gris); }
.sp-ligne-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* Fil d'Ariane */
.sp-ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0;
  font-size: var(--spdoc-taille-petite); color: var(--spdoc-gris); }
.sp-ariane li + li::before { content: "›"; margin-right: 6px; color: var(--spdoc-decor); }
.sp-ariane a { color: var(--spdoc-gris); text-decoration: none; }
.sp-ariane a:hover { color: var(--spdoc-texte); text-decoration: underline; }

/* Barre de progression : <div class="sp-progression" role="progressbar" aria-valuenow="2" aria-valuemax="3"><span style="width:66%"></span></div> */
.sp-progression { height: 6px; border-radius: 6px; background: var(--spdoc-fond-gris); overflow: hidden; }
.sp-progression > span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--spdoc-mint-200), var(--spdoc-mint-700)); }

/* Messages dans la page : <div class="sp-message sp-message-alerte" role="note"><svg class="sp-icone">…</svg><div>…</div></div> */
.sp-message { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--spdoc-indigo-100); border-radius: 10px;
  background: var(--spdoc-marque-doux); color: var(--spdoc-texte); font-size: var(--spdoc-taille-ui); line-height: 1.5; }
.sp-message > .sp-icone { margin-top: 1px; color: var(--spdoc-marque-texte); }
.sp-message p { margin: 0; }
.sp-message p + p { margin-top: 4px; }
.sp-message-info { background: var(--spdoc-butterfly-50); border-color: rgba(0, 97, 203, 0.25); }
.sp-message-info > .sp-icone { color: var(--spdoc-butterfly-800); }
.sp-message-succes { background: var(--spdoc-leaf-50); border-color: rgba(0, 114, 5, 0.22); }
.sp-message-succes > .sp-icone { color: var(--spdoc-leaf-900); }
.sp-message-alerte { background: var(--spdoc-orange-50); border-color: rgba(255, 152, 0, 0.45); }
.sp-message-alerte > .sp-icone { color: var(--spdoc-orange-900); }
.sp-message-erreur { background: var(--spdoc-coral-50); border-color: rgba(191, 62, 12, 0.3); }
.sp-message-erreur > .sp-icone { color: var(--spdoc-coral-900); }

/* État vide : <div class="sp-vide"><span class="sp-tuile">…</span><p class="sp-vide-titre">…</p><p>…</p>[action]</div> */
.sp-vide { display: grid; justify-items: center; gap: 8px; padding: 24px 20px; text-align: center; border: 1.5px dashed var(--spdoc-liseret-fort);
  border-radius: 12px; color: var(--spdoc-gris); font-size: var(--spdoc-taille-ui); }
.sp-vide p { margin: 0; max-width: 36em; }
.sp-vide .sp-vide-titre { font: 600 14.5px/1.35 var(--spdoc-police); color: var(--spdoc-texte); }

/* Dialogue : <dialog class="sp-dialogue"> ouvert par showModal() (Échap ferme, focus gardé).
   Sur mobile, une feuille posée en bas de l'écran. */
.sp-dialogue { box-sizing: border-box; width: min(520px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 20px;
  border: 0; border-radius: 14px; background: var(--spdoc-carte); color: var(--spdoc-texte-doux); box-shadow: var(--spdoc-ombre-3);
  font: 400 var(--spdoc-taille-ui)/1.55 var(--spdoc-police); }
.sp-dialogue[open] { animation: sp-apparition var(--spdoc-duree) ease-out; }
.sp-dialogue::backdrop { background: rgba(22, 20, 60, 0.45); }
.sp-dialogue > h2 { margin: 0 36px 8px 0; font: 700 17px/1.3 var(--spdoc-police-titre); color: var(--spdoc-texte); }
.sp-dialogue p { margin: 0 0 12px; }
.sp-dialogue-fermer { position: absolute; top: 12px; right: 12px; }
.sp-dialogue-pied { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
@media (max-width: 600px) {
  .sp-dialogue { width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 14px 14px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); }
  .sp-dialogue[open] { animation-name: sp-feuille; }
  .sp-dialogue-pied { flex-direction: column-reverse; }
  .sp-dialogue-pied > * { width: 100%; }
}

/* Menu : <button popovertarget="m">…</button><div id="m" popover class="sp-menu">…</div>.
   Placé sous son bouton là où le navigateur sait ancrer un popover ; sinon au centre. */
.sp-menu { box-sizing: border-box; min-width: 200px; max-width: min(320px, calc(100vw - 16px)); padding: 4px; margin: 0;
  border: 1px solid var(--spdoc-liseret); border-radius: 10px; background: var(--spdoc-carte); color: var(--spdoc-texte); box-shadow: var(--spdoc-ombre-3);
  font: 400 var(--spdoc-taille-ui)/1.4 var(--spdoc-police); }
@supports (position-area: block-end) {
  .sp-menu { inset: auto; margin: 6px 0; position-area: block-end span-inline-start; position-try-fallbacks: flip-block, flip-inline; }
}
.sp-menu-item { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; min-height: var(--spdoc-cible); padding: 0 8px;
  border: 0; border-radius: 6px; background: none; color: var(--spdoc-texte-doux); text-align: left; text-decoration: none; cursor: pointer;
  font: 500 var(--spdoc-taille-ui)/1.3 var(--spdoc-police); }
.sp-menu-item:hover, .sp-menu-item:focus-visible { background: var(--spdoc-fond-gris); color: var(--spdoc-texte); }
.sp-menu-item:focus-visible { outline-offset: -2px; }
.sp-menu-item .sp-icone { color: var(--spdoc-gris); }
.sp-menu-item-danger, .sp-menu-item-danger .sp-icone { color: var(--spdoc-coral-900); }
.sp-menu-titre { margin: 0; padding: 8px 8px 4px; font: 600 11px/1.2 var(--spdoc-police); letter-spacing: .06em; text-transform: uppercase; color: var(--spdoc-gris); }
.sp-menu-separateur { border: 0; border-top: 1px solid var(--spdoc-liseret); margin: 4px -4px; }

/* Notifications : <div class="sp-notifications" role="status" aria-live="polite"><div class="sp-notification sp-notification-succes">…</div></div> */
.sp-notifications { position: fixed; z-index: 50; right: 24px; bottom: 24px; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.sp-notification { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; pointer-events: auto;
  border: 1px solid var(--spdoc-liseret); border-radius: 10px; background: var(--spdoc-carte); color: var(--spdoc-texte); box-shadow: var(--spdoc-ombre-3);
  font: 500 var(--spdoc-taille-ui)/1.45 var(--spdoc-police); animation: sp-apparition var(--spdoc-duree) ease-out; }
.sp-notification > .sp-icone { margin-top: 1px; color: var(--spdoc-marque-texte); }
.sp-notification p { margin: 0; flex: 1; }
.sp-notification .sp-bouton-icone { margin: -8px -8px -8px 0; }
.sp-notification-succes > .sp-icone { color: var(--spdoc-leaf-900); }
.sp-notification-erreur { border-color: rgba(191, 62, 12, 0.3); }
.sp-notification-erreur > .sp-icone { color: var(--spdoc-coral-900); }
@media (max-width: 600px) {
  .sp-notifications { left: 16px; right: 16px; bottom: 16px; width: auto; }
  .sp-notifications > :not(:last-child) { display: none; } /* sur un téléphone, la dernière seulement */
}

@keyframes sp-apparition { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes sp-feuille { from { transform: translateY(100%); } }

/* Au doigt, les commandes compactes passent à 40 px (--spdoc-cible aussi, charte.css) */
@media (pointer: coarse) {
  .sp-segments > a, .sp-segments > button { min-height: var(--spdoc-cible); }
}

/* Mouvements coupés à la demande du lecteur (les durées de la charte sont déjà à 0) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}