/*
 * Charte de la doc Station Paye : jetons (couleurs, typographie, espacements,
 * rayons, ombres) et styles du contenu des pages (classes spdoc-, produites par
 * internal/markdown). Commune au site, à l'aperçu, au tiroir et à l'édition
 * (§6.4) ; les composants de l'interface (classes sp-) sont dans
 * composants.css, que le tiroir ne charge pas.
 *
 * Le tiroir d'aide de Station Paye charge cette feuille dans un Shadow DOM : les
 * jetons valent donc aussi pour :host, et rien ici ne dépend d'un fichier de la
 * doc autre que les polices (que Station Paye charge déjà).
 *
 * Palette reprise du thème MUI de station-p (front-end/src/layout/palette.ts,
 * commit f560bd129). Indigo en couleur de marque, comme la vitrine, la
 * connexion et le menu de l'application ; mint en accent. Accessibilité (WCAG
 * AA), contrastes mesurés : blanc sur indigo 500 6,4:1 ; liens indigo 600 sur
 * blanc 7:1 ; texte foncé sur mint 200 10:1 (jamais de blanc sur mint 200,
 * 1,7:1) ; texte secondaire #646668 sur blanc 5,8:1 ; bordure des champs 3,1:1.
 */

@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(polices/inter-400.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(polices/inter-500.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(polices/inter-600.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(polices/inter-700.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url(polices/plus-jakarta-sans-600.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url(polices/plus-jakarta-sans-700.woff2) format("woff2"); }

:root, :host {
  /* Palette de Station Paye (teintes utilisées) */
  --spdoc-indigo-50: #eee8fd;
  --spdoc-indigo-100: #d1c6fa;
  --spdoc-indigo-200: #b2a1f8;
  --spdoc-indigo-400: #725bf5;
  --spdoc-indigo-500: #4f3ef2;
  --spdoc-indigo-600: #3f39eb;
  --spdoc-indigo-700: #2031e2;
  --spdoc-nightblue-900: #28228a;
  --spdoc-mint-50: #dbf7f0;
  --spdoc-mint-100: #a5ead8;
  --spdoc-mint-200: #5fdcbf;
  --spdoc-mint-700: #008f64;
  --spdoc-mint-800: #007e56;
  --spdoc-mint-900: #006139;
  --spdoc-lucidyellow-500: #f6e856;
  --spdoc-butterfly-50: #e2f2fe;
  --spdoc-butterfly-500: #0093fe;
  --spdoc-butterfly-800: #0061cb;
  --spdoc-orange-50: #fff3e0;
  --spdoc-orange-500: #ff9800;
  --spdoc-orange-800: #ef6c00;
  --spdoc-orange-900: #e65100;
  --spdoc-coral-50: #fbeae7;
  --spdoc-coral-900: #bf3e0c;
  --spdoc-leaf-50: #ebfae8;
  --spdoc-leaf-600: #28bd32;
  --spdoc-leaf-900: #007205;
  --spdoc-comet-500: #604d73; /* aide (--stationp-helpColor) */

  /* Rôles */
  --spdoc-texte: #162017;          /* black de Station Paye : titres, texte fort */
  --spdoc-texte-doux: #344c45;     /* dark : texte courant des pages, 9,3:1 */
  --spdoc-gris: #646668;           /* softHaze 700 : texte secondaire, 5,8:1 */
  --spdoc-decor: #a1a3a6;          /* softHaze 500 : chevrons, jamais du texte */
  --spdoc-fond: #fafaf9;
  --spdoc-fond-gris: #f5f6f4;
  --spdoc-carte: #ffffff;
  --spdoc-aide-fond: #fdfcff;      /* aide (--stationp-helpBackgroundColor) */
  --spdoc-liseret: rgba(106, 153, 147, 0.2);
  --spdoc-liseret-fort: rgba(106, 153, 147, 0.38);
  --spdoc-bordure-champ: #839591;  /* contour d'un champ : 3,1:1 sur blanc */
  --spdoc-entete-tableau: #f1f4f3;
  --spdoc-marque: var(--spdoc-indigo-500);        /* action principale */
  --spdoc-marque-survol: var(--spdoc-indigo-600);
  --spdoc-marque-doux: var(--spdoc-indigo-50);     /* état actif, puces */
  --spdoc-marque-texte: var(--spdoc-indigo-700);   /* texte sur marque-doux, 6,8:1 */
  --spdoc-accent: var(--spdoc-mint-200);           /* étapes, progression : texte foncé seulement */
  --spdoc-accent-doux: var(--spdoc-mint-50);
  --spdoc-accent-texte: var(--spdoc-mint-900);     /* texte sur accent-doux, 6,7:1 */
  --spdoc-sur-accent: #162017;                    /* texte sur l'accent, 10:1, même dans le tiroir */
  --spdoc-lien: var(--spdoc-indigo-600);
  --spdoc-lien-survol: var(--spdoc-indigo-700);
  --spdoc-focus: var(--spdoc-indigo-500);
  --spdoc-degrade-marque: radial-gradient(900px 420px at 88% -12%, rgba(95, 220, 191, 0.42), transparent 62%),
    radial-gradient(700px 380px at -8% 112%, rgba(95, 220, 191, 0.22), transparent 60%),
    linear-gradient(140deg, var(--spdoc-indigo-400) 0%, var(--spdoc-indigo-500) 46%, var(--spdoc-nightblue-900) 100%);

  /* Typographie */
  --spdoc-police: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --spdoc-police-titre: "Plus Jakarta Sans", var(--spdoc-police);
  --spdoc-police-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --spdoc-taille: 14.5px;          /* contenu ; Inter, à grand œil, se lit bien à cette taille */
  --spdoc-taille-ui: 13.5px;       /* boutons, champs, listes */
  --spdoc-taille-petite: 12.5px;   /* informations, puces */
  --spdoc-taille-h1: 26px;
  --spdoc-taille-h2: 19px;
  --spdoc-taille-h3: 15.5px;

  /* Espacements, rayons, ombres, mouvement */
  --spdoc-espace-1: 4px;
  --spdoc-espace-2: 8px;
  --spdoc-espace-3: 12px;
  --spdoc-espace-4: 16px;
  --spdoc-espace-5: 24px;
  --spdoc-espace-6: 32px;
  --spdoc-espace-7: 48px;
  --spdoc-espace-8: 64px;
  --spdoc-cible: 34px;             /* hauteur d'une commande ; 40 px au doigt */
  --spdoc-rayon-s: 6px;
  --spdoc-rayon: 10px;
  --spdoc-rayon-l: 12px;
  --spdoc-rayon-xl: 16px;
  --spdoc-ombre-1: 0 1px 2px rgba(22, 32, 23, 0.05), 0 1px 3px rgba(22, 32, 23, 0.04);
  --spdoc-ombre-2: 0 2px 6px rgba(40, 34, 138, 0.05), 0 16px 40px rgba(40, 34, 138, 0.1);
  --spdoc-ombre-3: 0 2px 8px rgba(22, 32, 23, 0.08), 0 24px 64px rgba(40, 34, 138, 0.22);
  --spdoc-duree: 160ms;
}

@media (max-width: 600px) {
  :root, :host { --spdoc-taille-h1: 22px; --spdoc-taille-h2: 17.5px; --spdoc-taille-h3: 15px; }
}
@media (pointer: coarse) {
  :root, :host { --spdoc-cible: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  :root, :host { --spdoc-duree: 0ms; }
}

:focus-visible { outline: 2px solid var(--spdoc-focus); outline-offset: 2px; }

/* Contenu d'une page */
.spdoc-contenu { color: var(--spdoc-texte-doux); font-family: var(--spdoc-police); font-size: var(--spdoc-taille); line-height: 1.75; overflow-wrap: break-word; }
.spdoc-contenu p { margin: 0 0 1.15em; }
.spdoc-contenu > :first-child { margin-top: 0; }
.spdoc-contenu strong { color: var(--spdoc-texte); font-weight: 600; }
.spdoc-contenu h1, .spdoc-contenu h2, .spdoc-contenu h3 { font-family: var(--spdoc-police-titre); color: var(--spdoc-texte); letter-spacing: -0.015em; }
.spdoc-contenu h1 { font-size: var(--spdoc-taille-h1); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; }
.spdoc-contenu h2 { font-size: var(--spdoc-taille-h2); font-weight: 700; line-height: 1.3; margin: 2.4em 0 .7em; scroll-margin-top: 72px; }
.spdoc-contenu h3 { font-size: var(--spdoc-taille-h3); font-weight: 600; line-height: 1.4; margin: 1.9em 0 .5em; scroll-margin-top: 72px; }
.spdoc-contenu h4 { font-size: var(--spdoc-taille); font-weight: 600; color: var(--spdoc-texte); margin: 1.2em 0 .3em; }
.spdoc-contenu a { color: var(--spdoc-lien); text-decoration: underline; text-decoration-color: var(--spdoc-indigo-200);
  text-decoration-thickness: 1px; text-underline-offset: 3px; }
.spdoc-contenu a:hover { color: var(--spdoc-lien-survol); text-decoration-color: currentColor; }
.spdoc-contenu ol, .spdoc-contenu ul { padding-left: 1.4em; margin: 0 0 1em; }
.spdoc-contenu li { margin: .35em 0; }
.spdoc-contenu li > p { margin: 0; }
.spdoc-contenu li::marker { color: var(--spdoc-indigo-400); font-weight: 600; }
.spdoc-contenu img, .spdoc-contenu video { max-width: 100%; height: auto; border-radius: var(--spdoc-rayon); }
.spdoc-contenu code { font-family: var(--spdoc-police-code); font-size: .88em; background: var(--spdoc-fond-gris); border: 1px solid var(--spdoc-liseret);
  border-radius: var(--spdoc-rayon-s); padding: .1em .35em; }
.spdoc-contenu blockquote { margin: 1.2em 0; padding: .2em 0 .2em 1.1em; border-left: 3px solid var(--spdoc-indigo-200); color: var(--spdoc-gris); }
.spdoc-contenu hr { border: 0; border-top: 1px solid var(--spdoc-liseret); margin: 2.4em 0; }
.spdoc-code { background: var(--spdoc-fond-gris); border: 1px solid var(--spdoc-liseret); border-radius: var(--spdoc-rayon); padding: 1em 1.2em; overflow-x: auto; line-height: 1.55; }
.spdoc-code code { background: none; border: 0; padding: 0; }
.spdoc-tableau { border-collapse: separate; border-spacing: 0; width: 100%; margin: 1.2em 0; font-size: .94em; line-height: 1.5;
  border: 1px solid var(--spdoc-liseret); border-radius: var(--spdoc-rayon); overflow: hidden; }
.spdoc-tableau th, .spdoc-tableau td { padding: .6em .85em; text-align: left; vertical-align: top; border-bottom: 1px solid var(--spdoc-liseret); }
.spdoc-tableau tr:last-child td { border-bottom: 0; }
.spdoc-tableau th + th, .spdoc-tableau td + td { border-left: 1px solid var(--spdoc-liseret); }
.spdoc-tableau th { background: var(--spdoc-entete-tableau); color: var(--spdoc-texte); font-weight: 600; }
@media (max-width: 600px) { .spdoc-tableau { display: block; overflow-x: auto; } }
.spdoc-gauche { text-align: left !important; }
.spdoc-centre { text-align: center !important; }
.spdoc-droite { text-align: right !important; }
.spdoc-tache { list-style: none; }
.spdoc-tache input { margin-right: .5em; accent-color: var(--spdoc-mint-700); }

/* Encadrés : fond à peine teinté, contour fin, et l'icône de leur nature (Lucide, ISC) en masque.
   L'icône est dans la feuille même : elle s'affiche aussi dans le tiroir de Station Paye. */
.spdoc-encadre { --encadre-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); --encadre-couleur: var(--spdoc-indigo-500); --encadre-titre: var(--spdoc-indigo-700);
  --encadre-fond: #f7f6ff; --encadre-bord: #e6e1fd;
  margin: 1.7em 0; padding: 14px 18px; border: 1px solid var(--encadre-bord); border-radius: var(--spdoc-rayon-l); background: var(--encadre-fond); }
.spdoc-encadre > :last-child { margin-bottom: 0; }
.spdoc-encadre-titre { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--encadre-titre); margin: 0 0 .25em !important; }
.spdoc-encadre-titre::before { content: ""; flex: none; width: 17px; height: 17px; background: var(--encadre-couleur);
  -webkit-mask: var(--encadre-icone) center / contain no-repeat; mask: var(--encadre-icone) center / contain no-repeat; }
.spdoc-encadre-astuce { --encadre-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); --encadre-couleur: var(--spdoc-mint-800); --encadre-titre: var(--spdoc-mint-900);
  --encadre-fond: #f2fbf8; --encadre-bord: #cfeee4; }
.spdoc-encadre-attention { --encadre-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); --encadre-couleur: var(--spdoc-orange-800); --encadre-titre: #a04800;
  --encadre-fond: #fff8ee; --encadre-bord: #fbe3bf; }

/* Tutoriel : étapes numérotées en tuiles mint, reliées par un trait */
.spdoc-etapes { counter-reset: etape; list-style: none; padding: 0 !important; margin: 1.2em 0; }
.spdoc-etape { counter-increment: etape; position: relative; padding: 2px 0 1.4em 46px; margin: 0 !important; }
.spdoc-etape::before { content: counter(etape); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; font: 700 14px/1 var(--spdoc-police-titre); color: var(--spdoc-sur-accent); background: var(--spdoc-accent);
  box-shadow: 0 0 0 4px var(--spdoc-fond), 0 4px 12px rgba(0, 174, 129, 0.24); }
.spdoc-etape::after { content: ""; position: absolute; left: 14px; top: 38px; bottom: 6px; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--spdoc-mint-100), rgba(165, 234, 216, 0.2)); }
.spdoc-etape:last-child::after { display: none; }
.spdoc-contenu .spdoc-etape > h3:first-child { margin-top: 0; padding-top: 4px; }
.spdoc-etape li::marker { color: var(--spdoc-gris); }

/* Processus : étapes fléchées */
.spdoc-processus { display: flex; flex-wrap: wrap; gap: .6em; list-style: none; padding: 0 !important; margin: 1.2em 0; counter-reset: etape; }
.spdoc-processus-etape { counter-increment: etape; flex: 1 1 10em; position: relative; background: var(--spdoc-accent-doux);
  border-radius: var(--spdoc-rayon-l); padding: .9em 1.6em .9em 1em; margin: 0 !important; }
.spdoc-processus-etape:not(:last-child)::after { content: "→"; position: absolute; right: .45em; top: 50%; transform: translateY(-50%);
  color: var(--spdoc-mint-800); font-weight: 700; }
.spdoc-contenu .spdoc-processus-etape > h3 { margin-top: 0; font-size: var(--spdoc-taille); }
.spdoc-processus-etape > h3::before { content: counter(etape) ". "; color: var(--spdoc-mint-800); }
/* Sur une colonne étroite, une étape par ligne, fléchée vers la suivante */
@media (max-width: 600px) {
  .spdoc-processus { flex-direction: column; gap: 1.1em; }
  .spdoc-processus-etape { flex: none; }
  .spdoc-processus-etape:not(:last-child)::after { content: "↓"; right: auto; top: auto; left: 50%; bottom: -1.2em; transform: translateX(-50%); }
}

/* Chronologie */
.spdoc-chronologie { list-style: none; padding: 0 !important; margin: 1.2em 0 1.2em .4em; border-left: 2px solid var(--spdoc-indigo-100); }
.spdoc-periode { padding: 0 0 .9em 1.4em; position: relative; margin: 0 !important; }
.spdoc-periode::before { content: ""; position: absolute; left: -7px; top: .5em; width: 12px; height: 12px; border-radius: 50%;
  background: var(--spdoc-indigo-500); box-shadow: 0 0 0 3px var(--spdoc-fond); }
.spdoc-contenu .spdoc-periode > h3 { margin-top: 0; }

/* Captures annotées : dans un cadre ; les repères se placent sur l'image */
.spdoc-capture { width: fit-content; max-width: 100%; margin: 1.2em 0; padding: 8px; background: var(--spdoc-carte);
  border: 1px solid var(--spdoc-liseret); border-radius: 14px; box-shadow: var(--spdoc-ombre-2); }
.spdoc-capture-image { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.spdoc-contenu .spdoc-capture-image img { display: block; border-radius: 8px; }
.spdoc-repere { position: absolute; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 50%;
  background: var(--spdoc-indigo-500); color: #fff; font: 700 12px/1 var(--spdoc-police); display: grid; place-items: center;
  box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(40, 34, 138, 0.35); }

/* Onglets, volets, cartes, avant / après */
.spdoc-onglets { border: 1px solid var(--spdoc-liseret); border-radius: var(--spdoc-rayon-l); margin: 1.2em 0; background: var(--spdoc-carte); }
.spdoc-onglet { padding: .2em 1.2em .6em; }
.spdoc-onglet + .spdoc-onglet { border-top: 1px solid var(--spdoc-liseret); }
.spdoc-contenu .spdoc-onglet > h3 { color: var(--spdoc-marque-texte); margin-top: .8em; }
.spdoc-accordeon { margin: 1.2em 0; }
.spdoc-volet { border: 1px solid var(--spdoc-liseret); border-radius: var(--spdoc-rayon); padding: 0 1.1em; margin: .5em 0; background: var(--spdoc-carte); }
.spdoc-volet summary { cursor: pointer; font-weight: 600; color: var(--spdoc-texte); padding: .7em 0; min-height: var(--spdoc-cible); box-sizing: border-box; }
.spdoc-volet[open] summary { border-bottom: 1px solid var(--spdoc-liseret); margin-bottom: .7em; }
.spdoc-volet summary::marker { color: var(--spdoc-indigo-400); }
.spdoc-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); gap: 1em; margin: 1.2em 0; }
.spdoc-carte { background: var(--spdoc-carte); border: 1px solid var(--spdoc-liseret); border-radius: var(--spdoc-rayon-l); padding: .3em 1.1em .9em;
  box-shadow: var(--spdoc-ombre-1); }
.spdoc-contenu .spdoc-carte > h3 { margin-top: .7em; font-size: var(--spdoc-taille); }
.spdoc-avant-apres { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; margin: 1.2em 0; }
.spdoc-cote { background: var(--spdoc-fond-gris); border: 1px solid var(--spdoc-liseret); border-radius: var(--spdoc-rayon-l); padding: .3em 1.1em .9em; }
.spdoc-contenu .spdoc-cote > h3 { margin-top: .7em; font-size: var(--spdoc-taille); }
@media (max-width: 600px) { .spdoc-avant-apres { grid-template-columns: 1fr; } }

/* Vidéos et animations */
.spdoc-video { margin: 1.4em 0; }
.spdoc-video figure { margin: 0; }
.spdoc-video video { display: block; width: 100%; background: #000; border-radius: var(--spdoc-rayon-l); box-shadow: var(--spdoc-ombre-2); }
.spdoc-video figcaption { color: var(--spdoc-gris); font-size: var(--spdoc-taille-petite); margin-top: .6em; }
.spdoc-contenu .spdoc-chapitres h3 { font-size: var(--spdoc-taille); margin-top: 1em; }
.spdoc-transcription { margin-top: .6em; }
.spdoc-transcription summary { cursor: pointer; color: var(--spdoc-lien); font-weight: 600; padding: .4em 0; }
.spdoc-animation { display: block; max-width: 100%; margin: 1.2em 0; }

/* Check-list, glossaire, FAQ, pages mises à jour */
.spdoc-checklist { background: var(--spdoc-accent-doux); border-radius: var(--spdoc-rayon-l); padding: .7em 1.2em; margin: 1.2em 0; }
.spdoc-checklist-titre { font-weight: 700; color: var(--spdoc-texte); }
.spdoc-checklist ul { padding-left: 0; }
.spdoc-glossaire dt { font-weight: 700; color: var(--spdoc-texte); margin-top: .9em; }
.spdoc-glossaire dd { margin: .2em 0 0 1em; }
.spdoc-faq { margin: 1.2em 0; }
.spdoc-question { border-bottom: 1px solid var(--spdoc-liseret); padding-bottom: .6em; }
.spdoc-pages-mises-a-jour { padding-left: 1.2em; }
.spdoc-repli a { font-weight: 600; }

/*
 * Tiroir d'aide de Station Paye (§8.2) : présentation compacte, aux tailles et
 * aux couleurs de l'aide de Station Paye (body1 de 14 px, --stationp-helpColor,
 * --stationp-helpBackgroundColor), dans 236 à 370 px de large.
 */
.spdoc-tiroir { --spdoc-taille: 14px; --spdoc-taille-h1: 18px; --spdoc-taille-h2: 16px; --spdoc-taille-h3: 15px;
  --spdoc-texte: var(--spdoc-comet-500); --spdoc-texte-doux: var(--spdoc-comet-500); --spdoc-fond: var(--spdoc-aide-fond);
  background: var(--spdoc-aide-fond); line-height: 1.6; }
.spdoc-tiroir > :first-child { margin-top: 0; }
.spdoc-tiroir h2 { margin-top: 1.4em; }
.spdoc-resume { color: var(--spdoc-gris); margin: 0 0 1em; }
.spdoc-tiroir .spdoc-avant-apres { grid-template-columns: 1fr; }
.spdoc-tiroir .spdoc-etape { padding-left: 40px; padding-bottom: 1.1em; }
.spdoc-tiroir .spdoc-etape::before { width: 28px; height: 28px; border-radius: 9px; font-size: 13px; box-shadow: 0 0 0 4px var(--spdoc-fond); }
.spdoc-tiroir .spdoc-etape::after { left: 13px; top: 34px; }
.spdoc-tiroir .spdoc-etape > h3:first-child { padding-top: 3px; }
.spdoc-tiroir .spdoc-capture { padding: 4px; box-shadow: none; border-radius: var(--spdoc-rayon); }
.spdoc-tiroir .spdoc-encadre { padding: 11px 13px; }
.spdoc-tiroir .spdoc-video video { box-shadow: none; border-radius: var(--spdoc-rayon); }
.spdoc-tiroir .spdoc-tableau { display: block; overflow-x: auto; }
.spdoc-tiroir .spdoc-processus { flex-direction: column; gap: 1.1em; }
.spdoc-tiroir .spdoc-processus-etape { flex: none; }
.spdoc-tiroir .spdoc-processus-etape:not(:last-child)::after { content: "↓"; right: auto; top: auto; left: 50%; bottom: -1.2em; transform: translateX(-50%); }
/* « Ouvrir dans la doc » et « Contacter le support » : les actions du tiroir, en boutons */
.spdoc-tiroir-liens { display: flex; flex-wrap: wrap; gap: 8px; margin: 2em 0 0; padding-top: 1.2em; border-top: 1px solid var(--spdoc-liseret); }
.spdoc-tiroir .spdoc-tiroir-liens a { display: inline-flex; align-items: center; box-sizing: border-box; min-height: var(--spdoc-cible); padding: 0 14px;
  border: 1px solid var(--spdoc-liseret-fort); border-radius: var(--spdoc-rayon); background: var(--spdoc-carte); color: var(--spdoc-lien);
  font-size: 13.5px; font-weight: 600; line-height: 1.2; text-decoration: none; }
.spdoc-tiroir .spdoc-tiroir-liens a:first-child { background: var(--spdoc-marque); border-color: var(--spdoc-marque); color: #fff; }
.spdoc-tiroir .spdoc-tiroir-liens a:hover { border-color: var(--spdoc-lien); color: var(--spdoc-lien-survol); }
.spdoc-tiroir .spdoc-tiroir-liens a:first-child:hover { background: var(--spdoc-marque-survol); border-color: var(--spdoc-marque-survol); color: #fff; }