/* Le bloc de démonstration, à poser au milieu d'un article.
   Charte : noir, blanc, un gris. Il hérite des polices de la page qui l'accueille
   (variables --serif, --sans, --mono si elles existent). La page article du site
   reprend ces règles en ligne, à garder à l'identique. */
.da {
  --da-ink: var(--ink, #111);
  --da-paper: var(--paper, #fff);
  --da-grey: var(--grey, #767676);
  --da-rule: var(--rule, #d9d9d9);
  --da-serif: var(--serif, Georgia, "Times New Roman", serif);
  --da-sans: var(--sans, system-ui, -apple-system, "Segoe UI", sans-serif);
  --da-mono: var(--mono, ui-monospace, Consolas, monospace);
  color: var(--da-ink); background: var(--da-paper);
  font-family: var(--da-sans); font-size: 17px; line-height: 1.55;
  border: 1px solid var(--da-ink); padding: 1.75rem 1.25rem 1.25rem;
  margin: 2.5rem 0;
}
@media (min-width: 720px) { .da { padding: 2.25rem 2rem 1.5rem; } }
.da * { box-sizing: border-box; }
.da [hidden] { display: none !important; }
.da-label { display: block; font-family: var(--da-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--da-grey); margin: 0 0 .6rem; }
.da-title { font-family: var(--da-serif); font-weight: 500; font-size: clamp(1.7rem, 4.5vw, 2.4rem); line-height: 1.1; letter-spacing: -.01em; margin: 0 0 .75rem; font-variation-settings: "opsz" 28; }
.da-lead { margin: 0 0 1.25rem; }
.da-lead strong { font-weight: 700; }
.da-field { margin-bottom: .4rem; }

.da-form textarea {
  width: 100%; font: inherit; color: var(--da-ink); background: var(--da-paper);
  border: 1px solid var(--da-ink); border-radius: 0; padding: .75rem; resize: vertical; min-height: 5rem;
}
.da-form textarea::placeholder { color: var(--da-grey); opacity: 1; }
.da-form textarea:focus, .da button:focus-visible, .da a:focus-visible { outline: 2px solid var(--da-ink); outline-offset: 2px; }
/* Le bouton d'abord ; le motif et l'état se posent à sa droite, ou ensemble sur la ligne suivante quand la place manque. */
.da-row { display: flex; gap: .75rem 1rem; align-items: center; flex-wrap: wrap; margin-top: .75rem; }
.da-row .da-face { order: 2; width: 32px; height: 32px; }
.da-row .da-status-text { order: 3; flex: 1 1 10rem; min-width: 0; }
.da-submit {
  order: 1; min-height: 2.75rem; touch-action: manipulation;
  font: inherit; font-weight: 700; background: var(--da-ink); color: var(--da-paper);
  border: 1px solid var(--da-ink); border-radius: 0; padding: .65rem 1.2rem; cursor: pointer;
}
.da-submit:hover { background: var(--da-paper); color: var(--da-ink); }
.da-submit[aria-disabled="true"] { opacity: .45; cursor: wait; }

.da-examples-label { font-size: .95rem; color: var(--da-grey); margin: 1.25rem 0 0; }
.da-examples { list-style: none; padding: 0; margin: 0; font-size: .95rem; }
.da-ex { display: block; width: 100%; min-height: 2.75rem; touch-action: manipulation; font: inherit; text-align: left; background: none; border: 0; border-left: 2px solid var(--da-rule); color: var(--da-ink); padding: .4rem 0 .4rem .75rem; margin: .5rem 0 0; cursor: pointer; }
.da-ex:hover { border-left-color: var(--da-ink); }

/* La recherche en cours : le motif, et le texte avec ses trois points. */
.da-face { width: 64px; height: 64px; flex: none; }
.da-face .orbit { fill: none; stroke: var(--da-ink); stroke-width: 1.25; stroke-linecap: round; transform-origin: 50% 50%; }
.da-face .o2 { stroke: var(--da-grey); }
.da-face .dot, .da-face .core { fill: var(--da-ink); }
.da-face .sat, .da-face .core { transform-origin: 50% 50%; }
.da-status-text { font-weight: 700; font-size: 1rem; margin: 0; line-height: 1.25; }
.da-status-text a { font-weight: 400; text-underline-offset: .2em; }
.da-status-text small { display: block; font-weight: 400; font-size: .85rem; color: var(--da-grey); }
.da-dots::after { content: "…"; display: inline-block; width: 1.2em; text-align: left; animation: da-dots 1.5s steps(4, end) infinite; vertical-align: bottom; }
@keyframes da-dots { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .da-dots::after { animation: none; clip-path: none; }
}

/* La réponse. */
.da-answer { margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--da-ink); }
.da-answer:focus { outline: 0; }
.da-answer .da-label { margin-bottom: .75rem; }
.da-prose p { margin: 0 0 1rem; }
.da-prose h3, .da-prose h4 { font-family: var(--da-serif); font-weight: 500; font-size: 1.2rem; margin: 1.4rem 0 .5rem; }
.da-prose ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.da-prose li { margin: .25rem 0; }
.da-prose a { color: inherit; text-underline-offset: .15em; overflow-wrap: anywhere; }
.da-prose .sources { font-size: .9rem; border-top: 1px solid var(--da-rule); padding-top: .75rem; margin-top: 1.25rem; }
.da-prose .sources h3, .da-prose .sources h4 { font-family: var(--da-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--da-grey); margin: 0 0 .5rem; }
.da-prose .sources li { font-family: var(--da-mono); font-size: .78rem; word-break: break-word; }
.da-cursor::after { content: ""; display: inline-block; width: .45em; height: 1em; background: var(--da-grey); vertical-align: -.15em; }
.da-meta { font-family: var(--da-mono); font-size: .75rem; color: var(--da-grey); margin: 1rem 0 0; }
.da-note { font-size: .82rem; color: var(--da-grey); border-top: 1px solid var(--da-rule); padding-top: .75rem; margin: 1.5rem 0 0; }