/* --- WIDGET COHÉRENCE CARDIAQUE & CARTES --- */

.resources-container {
  max-width: 1100px; margin: 2rem auto 4rem; padding: 0 1.5rem;
}
.resources-container h1 {
  font-family: 'Lexend', sans-serif; font-size: 2.2rem; font-weight: 700;
  color: var(--heading-color); /* Utilise la couleur adaptative */
  margin-bottom: 2rem;
}

.resources-intro-wrapper {
  display: flex; gap: 2rem; align-items: stretch; margin-bottom: 3rem;
}

.breathing-widget-square {
  flex: 0 0 200px; height: 200px; background-color: var(--primary-color);
  border-radius: 16px; display: flex; flex-direction: column;
  justify-content: center; align-items: center; padding: 1rem;
  box-shadow: 0 8px 20px var(--shadow);
  position: relative; overflow: hidden; color: white; cursor: pointer; z-index: 1; 
}

.gargantua-container-square {
  position: relative; width: 120px; height: 120px;
  display: flex; justify-content: center; align-items: center; margin-bottom: 1.8rem;
}

.bio-disk-light {
  position: absolute; width: 40px; height: 40px; border-radius: 50%;
  background-color: #FAFAF7; opacity: 0.3; transform: scale(1); transition: all 0.5s ease;
}
.bio-disk-light.active { animation: bioBreatheLight 10s ease-in-out infinite; opacity: 0.8; }

.timer-display-light { position: relative; z-index: 10; font-size: 1.8rem; font-weight: 300; color: #FFFFFF; pointer-events: none; }
.instruction-text-light { position: absolute; bottom: -25px; width: 100%; text-align: center; font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-color); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.instruction-text-light.active { opacity: 1; }
.widget-caption { font-size: 0.8rem; color: var(--accent-color); text-align: center; opacity: 0.8; margin-top: 0; }

.play-btn-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%; background-color: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3); color: #FFFFFF; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 20; transition: all 0.3s; backdrop-filter: blur(4px);
}
.play-btn-center:hover { background-color: var(--accent-color); border-color: var(--accent-color); color: var(--primary-color); transform: translate(-50%, -50%) scale(1.1); }
.play-btn-center svg { fill: currentColor; width: 20px; height: 20px; margin-left: 3px; }

.resources-intro-text {
  flex: 1; font-family: 'Lexend', sans-serif; font-size: 1.1rem; line-height: 1.6;
  color: var(--text-color); background: var(--card-bg); padding: 2rem; border-left: 5px solid var(--primary-color);
  border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); display: flex; align-items: center;
}

@keyframes bioBreatheLight {
   0% { transform: scale(1); background-color: #FAFAF7; box-shadow: 0 0 0 0 rgba(250, 250, 247, 0.2); }
   50% { transform: scale(2.8); background-color: var(--accent-color); box-shadow: 0 0 25px 5px rgba(167, 196, 160, 0.4); }
   100% { transform: scale(1); background-color: #FAFAF7; box-shadow: 0 0 0 0 rgba(250, 250, 247, 0.2); }
}

#resourcesList {
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
  gap: 2rem; 
  padding-bottom: 1rem; 
  /* ANCIEN : align-items: start; */
  align-items: stretch; /* MODIFIÉ */ /**
}
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2rem; padding-bottom: 1rem; align-items: start;**/
}
.resource-item {
  background: var(--card-bg); border-radius: 12px; overflow: hidden; border: 1px solid var(--light-border);
  box-shadow: 0 4px 12px var(--shadow); display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.resource-item:hover { transform: translateY(-5px); box-shadow: 0 10px 20px var(--shadow); }
.resource-thumb { width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-bottom: 1px solid var(--light-border); background: var(--bg-color); }
.resource-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.3s ease; }
.resource-item:hover .resource-thumb img { transform: scale(1.05); }
.resource-content { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
/* Titre de la ressource : utilise Heading Color */
.resource-content h3 { font-family: 'Lexend', sans-serif; font-size: 1.25rem; color: var(--heading-color); margin: 0 0 0.5rem 0; }
.resource-content p { font-family: 'Lexend', sans-serif; font-size: 0.95rem; color: var(--text-color); line-height: 1.5; margin-bottom: 1.5rem; flex-grow: 1; opacity: 0.85; }
.resource-btn { display: block; text-align: center; background-color: var(--primary-color); color: #FFFFFF; padding: 10px 15px; border-radius: 6px; text-decoration: none; font-weight: 500; transition: background 0.3s; }
/* Survol bouton : en dark mode, texte foncé sur fond clair pour lisibilité */
.resource-btn:hover { background-color: var(--accent-color); color: #122420; }

/* PROCHAINEMENT */
.resource-item.coming-soon { cursor: default; opacity: 1; }
.resource-item.coming-soon:hover { transform: none; box-shadow: 0 4px 12px var(--shadow); }
.resource-item.coming-soon .resource-thumb { background: rgba(220, 220, 220, 0.1); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--light-border); }
.resource-item.coming-soon .resource-thumb span { font-size: 4rem; opacity: 0.5; filter: blur(0.5px); }
.resource-item.coming-soon .resource-content { text-align: center; color: var(--text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; }
.resource-item.coming-soon h3 { margin-bottom: 10px; color: var(--text-color); opacity: 0.7; }

@media (max-width: 900px) {
  .resources-intro-wrapper { flex-direction: column; align-items: center; }
  .breathing-widget-square { width: 100%; max-width: 280px; flex: auto; }
}
@media (max-width: 768px) {
  .resources-container { padding: 0; margin-top: 1rem; }
  .resources-container h1, .resources-intro-wrapper { margin-left: 1.5rem; margin-right: 1.5rem; }
  #resourcesList { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 1rem; padding: 0.5rem 1.5rem 2rem 1.5rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #resourcesList::-webkit-scrollbar { display: none; }
  .resource-item { flex: 0 0 70%; max-width: 280px; scroll-snap-align: center; }
}