/* ===============================
   FFF SIDE NOTE – petit bloc texte
   Appliquer la classe : fff-side-note
   =============================== */

.fff-side-note{
  border:1px solid #e5e7eb;
  border-radius:4px;
  padding:0.9rem 1.1rem 1rem;
  background:#ffffff;
  box-shadow:0 4px 14px rgba(15,23,42,.05);
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    transform .2s ease;
}

/* Hover: bordure et fond bleu léger */
.fff-side-note:hover{
  border-color:#4267b2;
  background:#f5f7ff;
  box-shadow:0 10px 22px rgba(15,23,42,.12);
  transform:translateY(-2px);
}

/* Titre H3 */
.fff-side-note h3{
  margin:0 0 .45rem;
  font-size:1.05rem;
  font-weight:600;
  color:#111827;
  line-height:1.35;
}

/* Texte paragraphe */
.fff-side-note p{
  margin:0 0 .4rem;
  font-size:.92rem;
  line-height:1.75;
  color:#4b5563;
  text-align:justify;
}

/* Eviter le gros trou sous le dernier paragraphe */
.fff-side-note p:last-child{
  margin-bottom:0;
}

/* Responsive léger */
@media (max-width:480px){
  .fff-side-note{
    padding:0.75rem 0.85rem 0.85rem;
  }

  .fff-side-note h3{
    font-size:1rem;
  }

  .fff-side-note p{
    font-size:.9rem;
  }
}

/* Réduction des animations si l’utilisateur le demande */
@media (prefers-reduced-motion:reduce){
  .fff-side-note{
    transition:none;
  }
}