/* ============================================================
   Sophos PropheTikos — feuille de style du site public
   ------------------------------------------------------------
   L'identité vient du logo du ministère : un livre ouvert aux
   pages ivoire, un soleil doré, une croix d'encre marine, sur un
   fond partagé entre brun chaud et sarcelle. Le site reprend ce
   partage : des bandes d'encre profonde pour la parole qui
   frappe, des bandes ivoire — les pages du livre — pour la
   parole qui se lit.
   ============================================================ */

/* ---------- Polices, servies par ce site (aucun appel externe) ---------- */
@font-face {
  font-family: 'Anton';
  src: url('fonts/anton-400-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anton';
  src: url('fonts/anton-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-400-latin-ext.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-400-latin.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Jetons ---------- */
:root {
  /* Couleurs tirées du logo */
  --nuit:      #0a0f1c;   /* fond des bandes sombres */
  --encre:     #101a2e;   /* surfaces sombres, cartes */
  --encre-2:   #1a2640;   /* traits sur fond sombre */
  --ivoire:    #f7f2e7;   /* les pages du livre */
  --parchemin: #eee5d3;   /* surfaces sur fond clair */
  --trait-clair:#ddd2ba;
  --or:        #c98a1e;   /* le soleil : aplats et traits sur fond clair */
  --or-texte:  #8a5d0a;   /* le même, assombri pour rester LISIBLE en texte
                             sur ivoire (5,2:1 ; #c98a1e ne donnait que 2,6) */
  --or-clair:  #f0c46a;   /* le soleil, sur fond sombre */
  --sarcelle:  #2f7f96;
  --sarcelle-texte: #1f5b6c;  /* idem pour le petit texte sur fond clair */
  --sarcelle-clair: #6fb7cb;
  --brun:      #4a3a33;

  /* Encres */
  --texte-clair:  #f2ede2;   /* sur fond sombre */
  --doux-clair:   #9aa6bb;
  --texte-sombre: #241f18;   /* sur fond ivoire */
  --doux-sombre:  #6b6156;

  /* Mesures */
  --large: 1180px;
  --etroit: 720px;
  --r: 4px;
  --ombre: 0 1px 2px rgba(10,15,28,.08), 0 10px 30px rgba(10,15,28,.10);
  --ombre-forte: 0 20px 60px rgba(10,15,28,.45);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  background: var(--ivoire);
  color: var(--texte-sombre);
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: .18em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; border-radius: 2px; }

/* ---------- Rythme typographique ---------- */
.titre-geant, .oeil, .stat b, .bouton, .bouton-fantome, .marque-nom, .badge {
  font-family: 'Anton', 'Arial Narrow', system-ui, sans-serif;
  font-weight: 400;
}
.titre-geant {
  font-size: clamp(2.6rem, 7.2vw, 5.4rem);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1, h2, h3 { font-weight: 600; line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: -.005em; }
h3 { font-size: 1.2rem; }
p { max-width: 68ch; }
p + p { margin-top: 1.05rem; }
.plomb { font-size: 1.24rem; line-height: 1.6; color: var(--doux-sombre); max-width: 60ch; }
.oeil {
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--or-texte); display: block; margin-bottom: .8rem;
}
/* Toutes les bandes sombres, pas seulement `.sombre` : `.encre` et le hero
   en font partie. L'oubli passait inaperçu tant que l'œil utilisait l'or
   clair ; il est devenu illisible en passant à l'or foncé. */
.sombre .oeil, .encre .oeil, .hero .oeil { color: var(--or-clair); }
.menu-mesure { font-variant-numeric: tabular-nums; }

/* ---------- Structure ---------- */
.bande { padding: clamp(3.5rem, 8vw, 6.5rem) 1.5rem; }
.bande.sombre { background: var(--nuit); color: var(--texte-clair); }
.bande.encre  { background: var(--encre); color: var(--texte-clair); }
.bande.claire { background: var(--ivoire); color: var(--texte-sombre); }
.bande.parchemin { background: var(--parchemin); }
/* Bandeau de titre : plus ramasse qu'une vraie section de contenu. */
.bande.titre-page { padding-block: clamp(2.4rem, 5vw, 3.6rem); }
.dedans { max-width: var(--large); margin: 0 auto; }
.dedans.etroit { max-width: var(--etroit); }
/* Le hero est une bande sombre lui aussi : sans lui dans ces sélecteurs,
   son chapô restait en encre brune sur fond marine (3,2:1). */
.sombre p, .encre p, .hero p { color: #d8dbe4; }
.sombre .plomb, .encre .plomb, .hero .plomb { color: var(--doux-clair); }
.sombre a, .encre a, .hero a { color: var(--or-clair); }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,15,28,.92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--encre-2);
  color: var(--texte-clair);
}
.entete .dedans {
  display: flex; align-items: center; gap: 1.25rem;
  padding: .7rem 1.5rem; flex-wrap: wrap;
}
.marque { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.marque img { width: 38px; height: 38px; border-radius: 7px; }
.marque-nom { font-size: 1.02rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.marque-sous { display: block; font-family: 'Newsreader', serif; font-size: .72rem;
               letter-spacing: .16em; text-transform: uppercase; color: var(--doux-clair); }
.menu { margin-left: auto; display: flex; gap: 1.35rem; flex-wrap: wrap;
        font-size: .94rem; align-items: center; }
.menu a { color: #c8cfdd; text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; }
.menu a:hover { color: #fff; border-bottom-color: var(--or-clair); }
.menu a[aria-current="page"] { color: var(--or-clair); border-bottom-color: var(--or-clair); }

/* ---------- Boutons ---------- */
.bouton, .bouton-fantome {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .72rem 1.4rem; border-radius: 999px; text-decoration: none;
  font-size: .92rem; letter-spacing: .06em; text-transform: uppercase;
  border: 2px solid transparent; transition: transform .15s ease, background .15s ease;
}
.bouton { background: var(--or-clair); color: #1b1405; }
.bouton:hover { background: #ffd684; transform: translateY(-1px); }
.claire .bouton { background: var(--or); color: #1b1405; }
.claire .bouton:hover { background: #b0770f; }
.bouton-fantome { border-color: currentColor; color: inherit; }
.bouton-fantome:hover { background: rgba(255,255,255,.08); }
.claire .bouton-fantome:hover { background: rgba(0,0,0,.05); }
.actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(47,127,150,.35), transparent 62%),
    radial-gradient(90% 70% at 12% 88%, rgba(201,138,30,.20), transparent 60%),
    var(--nuit);
  color: var(--texte-clair);
  padding: clamp(4rem, 11vw, 8.5rem) 1.5rem clamp(3.5rem, 8vw, 6rem);
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 90px;
  background: linear-gradient(180deg, transparent, rgba(247,242,231,.10));
  pointer-events: none;
}
.hero .dedans { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .hero .dedans { grid-template-columns: 1.15fr .85fr; } }
.hero-texte p.plomb { margin-top: 1.4rem; }
.hero-marque { display: grid; place-items: center; }
.hero-marque img {
  width: min(320px, 76%); border-radius: 22px;
  box-shadow: var(--ombre-forte); border: 1px solid rgba(240,196,106,.28);
}

/* ---------- Chiffres ---------- */
.stats { display: grid; gap: 1px; background: var(--encre-2);
         grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
         border: 1px solid var(--encre-2); border-radius: var(--r); overflow: hidden;
         margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.stat { background: var(--encre); padding: 1.4rem 1.2rem; }
.stat b { display: block; font-size: 2.6rem; line-height: 1; color: var(--or-clair);
          font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: .35rem; font-size: .86rem; color: var(--doux-clair);
             letter-spacing: .04em; }

/* ---------- Cartes vidéo ---------- */
.grille-videos {
  display: grid; gap: 1.6rem; margin-top: 2.2rem;
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
}
.carte { display: flex; flex-direction: column; text-decoration: none; }
.carte[hidden] { display: none; }
.carte .cadre {
  position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--r);
  background: #05070d; box-shadow: var(--ombre);
}
.carte .cadre img { width: 100%; height: 100%; object-fit: cover;
                    transition: transform .4s cubic-bezier(.2,.7,.3,1); }
.carte:hover .cadre img { transform: scale(1.045); }
.carte .lire {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(10,15,28,0) 45%, rgba(10,15,28,.55));
  opacity: 0; transition: opacity .25s ease;
}
.carte:hover .lire, .carte:focus-within .lire { opacity: 1; }
.carte .lire span {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--or-clair); color: #1b1405; font-size: 1.1rem; padding-left: 4px;
}
.carte h3 { margin-top: .85rem; font-size: 1.04rem; line-height: 1.35; }
.claire .carte h3 { color: var(--texte-sombre); }
.sombre .carte h3, .encre .carte h3 { color: var(--texte-clair); }
.carte:hover h3 { color: var(--or-texte); }
.sombre .carte:hover h3, .encre .carte:hover h3 { color: var(--or-clair); }
.carte .infos {
  margin-top: .3rem; font-family: system-ui, -apple-system, sans-serif;
  font-size: .8rem; letter-spacing: .02em; color: var(--doux-sombre);
}
.sombre .carte .infos, .encre .carte .infos { color: var(--doux-clair); }
.carte .extrait { margin-top: .55rem; font-size: .95rem; color: var(--doux-sombre); }
.sombre .carte .extrait, .encre .carte .extrait { color: #b9c1d1; }

/* ---------- Filtres du catalogue ---------- */
.filtres {
  position: sticky; top: 58px; z-index: 20;
  background: color-mix(in srgb, var(--ivoire) 94%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--trait-clair); border-bottom: 1px solid var(--trait-clair);
  padding: .9rem 1.5rem; margin-bottom: .5rem;
}
.filtres .dedans { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }
.filtres label { font-family: system-ui, sans-serif; font-size: .8rem;
                 letter-spacing: .1em; text-transform: uppercase; color: var(--doux-sombre); }
.filtres input, .filtres select {
  font: inherit; font-size: .98rem; padding: .5rem .75rem;
  border: 1px solid var(--trait-clair); border-radius: var(--r);
  background: #fffdf8; color: var(--texte-sombre);
}
.filtres input { flex: 1 1 240px; min-width: 190px; }
.filtres .resultat { margin-left: auto; font-family: system-ui, sans-serif;
                     font-size: .88rem; color: var(--or-texte);
                     font-variant-numeric: tabular-nums; }

/* ---------- Prédicateurs ---------- */
.predicateurs { display: grid; gap: 1.4rem; margin-top: 2.2rem;
                grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.predicateur { background: #fffdf8; border: 1px solid var(--trait-clair);
               border-radius: var(--r); padding: 1.5rem 1.5rem 1.3rem;
               border-top: 3px solid var(--or); }
.sombre .predicateur, .encre .predicateur {
  background: var(--encre); border-color: var(--encre-2); border-top-color: var(--or-clair); }
.predicateur h3 { font-size: 1.22rem; }
.predicateur .eglise { font-family: system-ui, sans-serif; font-size: .82rem;
                       letter-spacing: .08em; text-transform: uppercase;
                       color: var(--sarcelle-texte); margin-top: .2rem; }
.predicateur .compte { font-family: 'Anton', sans-serif; font-size: 1.8rem;
                       color: var(--or-texte); line-height: 1; margin: .9rem 0 .2rem; }
.predicateur ul { list-style: none; margin-top: .9rem; display: grid; gap: .5rem; }
.predicateur li { font-size: .96rem; line-height: 1.4; padding-left: 1rem; position: relative; }
.predicateur li::before { content: "—"; position: absolute; left: 0; color: var(--or); }
.predicateur li a { text-decoration: none; }
.predicateur li a:hover { text-decoration: underline; text-decoration-color: var(--or); }

/* ---------- Étapes numérotées ---------- */
.etapes { counter-reset: e; display: grid; gap: 1.6rem; margin-top: 2.2rem;
          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.etape { counter-increment: e; padding-top: 2.6rem; position: relative; }
.etape::before {
  content: counter(e, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: 'Anton', sans-serif; font-size: 1.5rem; color: var(--or-texte);
  letter-spacing: .04em;
}
.sombre .etape::before, .encre .etape::before { color: var(--or-clair); }
.etape h3 { margin-bottom: .35rem; }

/* ---------- Citation ---------- */
.citation {
  margin: clamp(2.5rem, 6vw, 4rem) 0; padding-left: 1.6rem;
  border-left: 3px solid var(--or);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.4; font-weight: 500;
  max-width: 52ch;
}
.citation cite { display: block; margin-top: .8rem; font-size: .9rem; font-style: normal;
                 font-family: system-ui, sans-serif; letter-spacing: .1em;
                 text-transform: uppercase; color: var(--doux-sombre); }
.sombre .citation cite, .encre .citation cite { color: var(--doux-clair); }

/* ---------- Contenu long (pages légales, textes) ---------- */
.prose h2 { margin: 2.6rem 0 .8rem; padding-bottom: .5rem;
            border-bottom: 1px solid var(--trait-clair); }
.prose h3 { margin: 1.8rem 0 .5rem; color: var(--brun); }
.prose p, .prose li { margin-top: .8rem; }
.prose ul, .prose ol { margin-left: 1.4rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .97rem; }
.prose th, .prose td { text-align: left; padding: .7rem .8rem;
                       border-bottom: 1px solid var(--trait-clair); vertical-align: top; }
.prose th { font-family: system-ui, sans-serif; font-size: .78rem; letter-spacing: .1em;
            text-transform: uppercase; color: var(--brun); }
.prose code { font-size: .92em; background: var(--parchemin); border-radius: 3px;
              padding: .1em .4em; }
.encart { background: var(--parchemin); border-radius: var(--r); padding: 1.5rem 1.6rem;
          margin: 2rem 0; border-left: 3px solid var(--sarcelle); }
.encart h3 { margin-top: 0; color: var(--brun); }
.sombre .encart, .encre .encart { background: var(--encre); border-left-color: var(--sarcelle-clair); }
.entete-legale { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 2rem; }
.entete-legale img { width: 70px; height: 70px; border-radius: 12px; flex: none; }
.maj { font-family: system-ui, sans-serif; font-size: .84rem; color: var(--doux-sombre);
       letter-spacing: .04em; }

/* ---------- Pied de page ---------- */
.pied { background: var(--nuit); color: var(--texte-clair); padding: 3.5rem 1.5rem 2rem; }
.pied .dedans { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .pied .dedans { grid-template-columns: 1.4fr 1fr 1fr; } }
.pied h4 { font-family: system-ui, sans-serif; font-size: .78rem; letter-spacing: .18em;
           text-transform: uppercase; color: var(--or-clair); margin-bottom: .9rem; }
.pied ul { list-style: none; display: grid; gap: .5rem; }
.pied a { color: #c8cfdd; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied .fin { grid-column: 1 / -1; border-top: 1px solid var(--encre-2); padding-top: 1.4rem;
             font-size: .84rem; color: var(--doux-clair);
             display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------- Petits écrans ---------- */
@media (max-width: 700px) {
  .entete .dedans { padding: .6rem 1rem; }
  .menu { width: 100%; margin-left: 0; gap: 1rem; font-size: .88rem;
          overflow-x: auto; padding-bottom: .2rem; }
  .menu a { white-space: nowrap; }
  .filtres { top: 92px; }
  .filtres .resultat { margin-left: 0; width: 100%; }
  .hero-marque { order: -1; }
  .hero-marque img { width: min(190px, 55%); }
}

/* ============================================================
   Corrections de contraste sur fond sombre
   ------------------------------------------------------------
   Signalé par Michel le 03/08 : le texte du bouton « S'abonner à
   la chaîne » et celui des <code> étaient invisibles.

   Cause commune : `.sombre a` (spécificité 0-1-1) l'emporte sur
   `.bouton` (0-1-0), donc le libellé du bouton repassait en doré
   sur fond doré. Et les règles pensées pour les pages ivoire —
   fond parchemin des <code>, titres et en-têtes de tableau en
   brun — restaient appliquées telles quelles sur l'encre.

   Ces règles doivent donc être plus spécifiques que `.sombre a`
   et venir après elle.
   ============================================================ */
.sombre .bouton, .encre .bouton, .hero .bouton {
  color: #1b1405;                    /* encre sombre sur l'or : lisible */
  background: var(--or-clair);
}
.sombre .bouton:hover, .encre .bouton:hover, .hero .bouton:hover { background: #ffd684; }
.sombre .bouton-fantome, .encre .bouton-fantome, .hero .bouton-fantome {
  color: var(--texte-clair);         /* et non l'or : le contour suffit */
  border-color: var(--texte-clair);
}

.sombre .prose code, .encre .prose code, .sombre code, .encre code {
  background: rgba(240,196,106,.12);
  color: var(--or-clair);
  border: 1px solid rgba(240,196,106,.28);
}
.sombre .prose h3, .encre .prose h3,
.sombre .encart h3, .encre .encart h3 { color: var(--or-clair); }
.sombre .prose th, .encre .prose th { color: var(--sarcelle-clair); }
.sombre .prose th, .sombre .prose td,
.encre .prose th, .encre .prose td { border-bottom-color: var(--encre-2); }
.sombre .predicateur .eglise, .encre .predicateur .eglise { color: var(--sarcelle-clair); }
.sombre .predicateur .compte, .encre .predicateur .compte { color: var(--or-clair); }
.sombre .maj, .encre .maj { color: var(--doux-clair); }

/* ============================================================
   Page privée « Mes extraits à publier »
   ------------------------------------------------------------
   Conçue pour le pouce : une carte par extrait, des boutons qui
   prennent toute la largeur sur téléphone, et la légende visible
   sans avoir à la dérouler. Michel s'en sert debout, en 3G.
   ============================================================ */
.page-extraits .plomb { max-width: 68ch; }
.rappel {
  background: var(--parchemin); border-left: 3px solid var(--sarcelle-texte);
  border-radius: var(--r); padding: 1rem 1.2rem; margin: 1.8rem 0 2.4rem;
  font-size: 1rem;
}
.extrait {
  background: #fffdf8; border: 1px solid var(--trait-clair);
  border-radius: var(--r); padding: 1.4rem 1.4rem 1.2rem; margin-bottom: 1.6rem;
  box-shadow: var(--ombre);
}
.extrait-tete { display: flex; gap: 1rem; align-items: flex-start;
                justify-content: space-between; flex-wrap: wrap; }
.extrait-tete h2 { font-size: 1.24rem; line-height: 1.25; margin: 0; }
.extrait-meta { font-family: system-ui, -apple-system, sans-serif; font-size: .84rem;
                color: var(--doux-sombre); margin-top: .3rem; }
.reco { font-family: system-ui, sans-serif; font-size: .72rem; letter-spacing: .1em;
        text-transform: uppercase; color: #6f4a06; background: rgba(201,138,30,.16);
        border: 1px solid rgba(201,138,30,.4); border-radius: 999px;
        padding: .25rem .7rem; white-space: nowrap; }
.actions-extrait { display: flex; gap: .8rem; margin: 1.2rem 0 1rem; flex-wrap: wrap; }
.bouton-copier {
  font-family: 'Anton', 'Arial Narrow', system-ui, sans-serif; font-weight: 400;
  display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
  padding: .72rem 1.4rem; border-radius: 999px; font-size: .92rem;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--nuit); color: var(--ivoire); border: 2px solid var(--nuit);
  transition: background .15s ease, transform .15s ease;
}
.bouton-copier:hover { background: var(--encre); transform: translateY(-1px); }
.bouton-copier.copie { background: #1f6b3d; border-color: #1f6b3d; }
.bouton-copier.echec { background: #8c2f22; border-color: #8c2f22; }
.bloc-legende { border-top: 1px solid var(--trait-clair); padding-top: .9rem; }
.bloc-legende summary { font-family: system-ui, sans-serif; font-size: .78rem;
                        letter-spacing: .12em; text-transform: uppercase;
                        color: var(--doux-sombre); cursor: pointer; }
.legende {
  font-family: 'Newsreader', Georgia, serif; font-size: 1rem; line-height: 1.6;
  white-space: pre-wrap; word-wrap: break-word; margin-top: .8rem;
  background: var(--parchemin); border-radius: var(--r); padding: 1rem 1.1rem;
  color: var(--texte-sombre);
}
.extrait-liens { margin-top: .9rem; font-size: .86rem; }
.lien-discret { color: var(--sarcelle-texte); }
@media (max-width: 620px) {
  .extrait { padding: 1.1rem 1rem 1rem; }
  .actions-extrait { gap: .6rem; }
  .actions-extrait .bouton, .actions-extrait .bouton-copier {
    flex: 1 1 100%; justify-content: center; padding: .95rem 1rem; font-size: 1rem;
  }
  .extrait-tete h2 { font-size: 1.12rem; }
}
.avis-attente {
  background: rgba(201,138,30,.12); border: 1px solid rgba(201,138,30,.35);
  border-radius: var(--r); padding: .8rem 1.1rem; margin: 1.2rem 0 0;
  font-size: .96rem; color: #6f4a06; max-width: none;
}


/* Page de travail : numéro et durée en tête de chaque extrait. Michel les
   utilise pour se repérer d'un coup d'œil entre deux extraits du même sermon. */
.extrait-rang{display:flex;align-items:center;gap:.6rem;margin:0 0 .35rem}
.extrait-rang .numero{font-family:var(--titre,inherit);font-size:1.35rem;
  line-height:1;letter-spacing:.02em;color:var(--or,#c9a227)}
.extrait-rang .duree{font-size:.95rem;font-weight:600;padding:.15rem .55rem;
  border-radius:999px;background:rgba(0,0,0,.06);color:inherit}
@media (prefers-color-scheme:dark){.extrait-rang .duree{background:rgba(255,255,255,.1)}}