/* Accueil : carrousel « Saviez-vous que? » sur écran de moniteur (quadrillé marine). */
.saviez-zone {
  position: relative; overflow: hidden; color: var(--blanc); padding-block: 60px 52px;
  background-color: #0f2140;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}
.saviez-zone::after { /* sceau ATPH en filigrane, en bas à droite */
  content: ""; position: absolute; right: -40px; bottom: -50px; width: 300px; height: 300px; pointer-events: none;
  background: url("../../img/sceau-atph-192.png") no-repeat center / contain; opacity: .035; filter: grayscale(1) brightness(2.2);
}
.saviez-entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.saviez-entete h2 { color: var(--blanc); margin: 0; display: flex; align-items: center; gap: .45em; }

/* Le pouls : un battement double (lub-dub), puis repos */
.pouls { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 205, 0, .14); color: var(--jaune); font-size: 1.4rem; position: relative; }
.pouls::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--jaune); opacity: 0; }
.pouls .bi { animation: battement 1.6s cubic-bezier(.2, 0, 0, 1) infinite; }
.pouls::after { animation: onde 1.6s cubic-bezier(.2, 0, 0, 1) infinite; }
@keyframes battement { 0%, 40%, 100% { transform: scale(1); } 10% { transform: scale(1.22); } 24% { transform: scale(1.12); } }
@keyframes onde { 0% { transform: scale(.9); opacity: .6; } 45%, 100% { transform: scale(1.55); opacity: 0; } }

.saviez-nav { display: flex; gap: 8px; }
.saviez-bouton {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: var(--blanc);
  display: grid; place-items: center; font-size: 1.1rem; cursor: pointer;
  transition: background-color var(--d-rapide) var(--courbe), border-color var(--d-rapide) var(--courbe), color var(--d-rapide) var(--courbe);
}
.saviez-bouton:hover, .saviez-bouton:focus-visible { background: var(--jaune); border-color: var(--jaune); color: var(--marine); }

/* La piste : défilement natif avec aimantation (fonctionne aussi au doigt et sans JavaScript) */
.saviez-piste {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 18px) / 3); gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  padding: 6px 2px 14px; scrollbar-width: none;
}
.saviez-piste::-webkit-scrollbar { display: none; }
.saviez-piste:focus-visible { outline: 3px solid var(--jaune); outline-offset: 4px; border-radius: var(--r-2); }
.saviez-carte {
  scroll-snap-align: start; position: relative; display: flex; flex-direction: column; min-height: 230px;
  background: var(--blanc); color: var(--encre); border-radius: var(--r-2); padding: 18px 20px 18px; overflow: hidden;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); border-top: 3px solid var(--jaune);
  transform: translateY(6px) scale(.985); opacity: .82;
  transition: transform var(--d-lente) var(--courbe), opacity var(--d-lente) var(--courbe), box-shadow var(--d-lente) var(--courbe);
}
.saviez-carte.visible { transform: none; opacity: 1; }
.saviez-carte:hover { box-shadow: 0 16px 36px -12px rgba(0, 0, 0, .6); }
.saviez-carte::after { /* petit sceau dans le coin */
  content: ""; position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px;
  background: url("../../img/sceau-atph-192.png") no-repeat center / contain; opacity: .09;
}
/* Le tracé ECG s'écrit de gauche à droite quand la carte arrive à l'écran */
.saviez-trace { display: block; width: 120px; height: 18px; margin-bottom: 10px; }
.saviez-trace path { fill: none; stroke: var(--etoile); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 320; stroke-dashoffset: 320; }
.saviez-carte.visible .saviez-trace path { animation: tracer 1.4s cubic-bezier(.45, 0, .55, 1) .15s forwards; }
@keyframes tracer { to { stroke-dashoffset: 0; } }
.saviez-carte h3 { font-size: 1.18rem; line-height: 1.25; margin: 0 0 8px; }
.saviez-carte h3 a { color: var(--marine); text-decoration: none; }
.saviez-carte h3 a::after { content: ""; position: absolute; inset: 0; } /* toute la carte est cliquable */
.saviez-carte h3 a:hover { color: var(--etoile); }
.saviez-carte p { color: var(--gris); font-size: .97rem; margin: 0 0 12px; flex: 1; }
.saviez-lire { display: inline-flex; align-items: center; gap: .35em; font-weight: 600; font-size: .92rem; color: var(--etoile); text-decoration: none; margin-top: auto; }
.saviez-carte:hover .saviez-lire .bi { transform: translateX(3px); }
.saviez-lire .bi { transition: transform var(--d-rapide) var(--courbe); }

.saviez-pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.saviez-points { display: flex; gap: 6px; }
.saviez-points span { width: 8px; height: 8px; border-radius: var(--r-rond); background: rgba(255, 255, 255, .3); transition: width var(--d-standard) var(--courbe), background-color var(--d-standard) var(--courbe); }
.saviez-points span.actif { width: 26px; background: var(--jaune); }
.saviez-tous { color: var(--blanc); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .4em; }
.saviez-tous:hover { color: var(--jaune); text-decoration: underline; }

@media (max-width: 991.98px) { .saviez-piste { grid-auto-columns: calc((100% - 18px) / 2); } }
@media (max-width: 575.98px) {
  .saviez-zone { padding-block: 44px 40px; }
  .saviez-piste { grid-auto-columns: 86%; }
  .saviez-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pouls .bi, .pouls::after { animation: none; }
  .saviez-carte { transform: none; opacity: 1; }
  .saviez-trace path { stroke-dashoffset: 0; }
  .saviez-piste { scroll-behavior: auto; }
}