/* -----------------------------------------------------------------------
   Mise en forme des éléments présents dans les articles du blog
   (listes, tableaux, mots en gras, liens) que la feuille de style
   d'origine ne prévoyait pas.

   Ce fichier N'AJOUTE QUE des règles portant sur .prose-content.
   La feuille de style principale du site n'est pas modifiée, et aucune
   autre page n'est touchée.
   ----------------------------------------------------------------------- */

.prose-content {
  color: #424245;
  font-size: 17px;
  line-height: 1.6;
}
.prose-content:is(.dark *) { color: #a1a1a6; }

.prose-content h3 {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "SF Pro Text",
               Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.6rem;
  margin: 2rem 0 .6rem;
  color: #1d1d1f;
}
.prose-content h3:is(.dark *) { color: #f5f5f7; }

.prose-content ul,
.prose-content ol {
  margin: 0 0 1.25rem;
  padding-left: 1.35rem;
}
.prose-content ul { list-style: disc; }
.prose-content ol { list-style: decimal; }
.prose-content li {
  margin-bottom: .5rem;
  padding-left: .2rem;
}
.prose-content li::marker { color: #86868b; }

.prose-content strong { font-weight: 600; color: #1d1d1f; }
.prose-content strong:is(.dark *) { color: #f5f5f7; }
.prose-content em { font-style: italic; }

.prose-content a {
  color: #0071e3;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose-content a:hover { text-decoration: none; }
.prose-content a:is(.dark *) { color: #6bb4ff; }

/* Les tableaux peuvent dépasser la largeur d'un téléphone :
   ils défilent dans leur propre cadre plutôt que d'élargir la page. */
.prose-content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 15px;
}
.prose-content thead th {
  text-align: left;
  font-weight: 600;
  color: #1d1d1f;
  white-space: nowrap;
}
.prose-content thead th:is(.dark *) { color: #f5f5f7; }
.prose-content th,
.prose-content td {
  border-bottom: 1px solid #e3e3e6;
  padding: .6rem .85rem;
  vertical-align: top;
}
.prose-content th:is(.dark *),
.prose-content td:is(.dark *) { border-bottom-color: #2a2a2e; }
.prose-content tbody tr:last-child th,
.prose-content tbody tr:last-child td { border-bottom: 0; }

.prose-content blockquote {
  margin: 0 0 1.25rem;
  padding: .2rem 0 .2rem 1rem;
  border-left: 3px solid #d2d2d7;
  color: #6e6e73;
}
.prose-content blockquote:is(.dark *) {
  border-left-color: #3a3a3e;
  color: #a1a1a6;
}

.prose-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: .5rem 0 1.25rem;
}

.prose-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  background: #f5f5f7;
  border-radius: 5px;
  padding: .12em .38em;
}
.prose-content code:is(.dark *) { background: #2a2a2e; }

.prose-content > :first-child { margin-top: 0; }
.prose-content > :last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------------
   Mention « services à la personne » sur la page Tarifs.

   L'arrêté du 17 mars 2015 impose que l'indication d'un avantage fiscal soit
   détachée du prix et écrite dans une police plus petite que l'information
   sur le prix. D'où le trait de séparation et la taille réduite ci-dessous :
   ces règles ne sont pas décoratives.
   ----------------------------------------------------------------------- */

.rs-sap {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #e3e3e6;
  font-size: 13.5px;
  line-height: 1.55;
  color: #6e6e73;
}
.rs-sap:is(.dark *) { border-top-color: #2a2a2e; color: #86868b; }
.rs-sap p { margin: 0 0 .55rem; }
.rs-sap p:last-child { margin-bottom: 0; }
.rs-sap .rs-sap-t {
  font-weight: 600;
  color: #1d1d1f;
  font-size: 14px;
}
.rs-sap .rs-sap-t:is(.dark *) { color: #f5f5f7; }

.rs-sap-tete {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: .7rem;
}
.rs-sap-tete .rs-sap-t { margin: 0; }

/* Le logo officiel a ses couleurs propres (bleu nuit et magenta) et ne doit
   pas être modifié. En thème sombre il est donc posé sur une pastille claire
   pour rester lisible sans le retoucher. */
.rs-sap-logo {
  display: block;
  width: 130px;
  height: auto;
  flex: 0 0 auto;
}
.rs-sap-logo:is(.dark *) {
  background: #fff;
  border-radius: 10px;
  padding: 6px 9px;
  box-sizing: content-box;
}

@media (max-width: 420px) {
  .rs-sap-logo { width: 108px; }
}

/* -----------------------------------------------------------------------
   Bande de filtres en haut du blog
   ----------------------------------------------------------------------- */

.rsf-bande {
  background: #f5f5f7;
  border: 1px solid #e3e3e6;
  border-radius: 16px;
  padding: 16px 18px;
  margin: 0 0 32px;
}
.rsf-bande:is(.dark *) { background: #161617; border-color: #2a2a2e; }

.rsf-titre {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #86868b;
}
.rsf-titre:is(.dark *) { color: #7d7d82; }

/* les pastilles sont déjà dans la bande : pas de marge en trop */
.rsf-bande .rsf { margin-bottom: 0; }


/* -----------------------------------------------------------------------
   Moyens de paiement, en pied de page.
   Texte uniquement : les logos de marque (Visa, Mastercard, CB) ne sont pas
   reproduits ici. Pour les afficher, il faut les fichiers officiels fournis
   par les réseaux ou par le prestataire de paiement.
   ----------------------------------------------------------------------- */

.rs-pay {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  padding: 18px 0 2px;
}
.rs-pay-t {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #1d1d1f;
}
.rs-pay-t:is(.dark *) { color: #f5f5f7; }

.rs-pay-l {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rs-pay-l li {
  background: #fff;
  border: 1px solid #e3e3e6;
  border-radius: 7px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 500;
  color: #424245;
  white-space: nowrap;
}
.rs-pay-l li:is(.dark *) {
  background: #141414;
  border-color: #2a2a2e;
  color: #a1a1a6;
}


/* ---------------------------------------------------------------------------
   Menu mobile (defaut du site d'origine)
   L'en-tete porte un flou d'arriere-plan (backdrop-filter). En CSS, cela fait
   de l'en-tete le cadre de reference des elements « fixed » qu'il contient :
   le panneau du menu, qui devrait occuper tout l'ecran, se retrouve enferme
   dans une bande de 32 px et n'affiche plus aucun lien.
   On lui redonne une hauteur explicite ; les liens redeviennent cliquables.
--------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  header > .fixed.inset-0 {
    height: calc(100vh - 3rem);
    height: calc(100dvh - 3rem);
  }
}


/* ---------------------------------------------------------------------------
   Accessibilite — points releves par Lighthouse
--------------------------------------------------------------------------- */

/* Le gris #86868b sur fond clair ne donne qu'un contraste de 3,62 : en dessous
   du minimum de 4,5 exige pour du texte. On le fonce juste assez. */
.text-\[\#86868b\] { color: #63636a; }
.dark .text-\[\#86868b\] { color: #9a9aa0; }

/* Les liens du pied de page ne faisaient que 15 px de haut : trop petits pour
   un doigt. On les epaissit sans changer l'apparence. */
footer a { display: inline-block; padding-block: 5px; }