/* Les Éclairs — défis express (DL-ECL-03/04/05/07)
   Règles produit : pas de classement, pas de streak, pas de ton culpabilisant. */

:root {
  --eclair-radius: var(--radius-md, 10px);
  --eclair-border: var(--color-border, #e0e0e0);
  --eclair-surface: var(--color-surface, #ffffff);
  --eclair-muted: var(--color-text-muted, #666666);
  --eclair-accent: var(--color-accent, #6c63ff);
}

/* Teinte par famille (fond du visuel quand l'illustration n'existe pas encore) */
.eclair-fam--observation { --fam: #e6f0ff; }
.eclair-fam--geste { --fam: #efe7ff; }
.eclair-fam--contrainte { --fam: #e4f6ee; }
.eclair-fam--couleur { --fam: #fff0dc; }
.eclair-fam--imagination { --fam: #ffe7f0; }
.eclair-fam--pour-rire { --fam: #fff7cc; }
.eclair-fam--autre { --fam: #eeeeee; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Grille de cartes ---------- */
.eclairs-subtitle { margin: 0 0 1rem; color: var(--eclair-muted); }

.eclairs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  transition: opacity 0.15s ease;
}
.eclairs-grid.is-shuffling { opacity: 0; }

.eclair-card {
  display: flex; flex-direction: column;
  background: var(--eclair-surface);
  border: 1px solid var(--eclair-border);
  border-radius: var(--eclair-radius);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.eclair-card:hover, .eclair-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.eclair-card:focus-visible { outline: 3px solid var(--eclair-accent); outline-offset: 2px; }

.eclair-card__visual {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; background: var(--fam, #eeeeee);
}
.eclair-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eclair-card__emoji { font-size: 3rem; line-height: 1; }
.eclair-card__duree {
  position: absolute; top: 0.5rem; left: 0.5rem;
  background: rgba(0, 0, 0, 0.75); color: #fff;
  font-size: 0.8rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px;
}
.eclair-card__body { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.75rem 0.9rem 0.9rem; }
.eclair-card__consigne { font-weight: 600; line-height: 1.35; }
.eclair-card__famille { font-size: 0.8rem; color: var(--eclair-muted); }

.eclair-card--skeleton { pointer-events: none; }
.eclair-card--skeleton .eclair-card__visual { background: #ececec; }
.eclair-card--skeleton .eclair-card__body::before,
.eclair-card--skeleton .eclair-card__body::after {
  content: ''; display: block; height: 0.8rem; border-radius: 4px; background: #ececec;
}
.eclair-card--skeleton .eclair-card__body::after { width: 55%; }

.eclairs-home__footer { margin-top: 1rem; }
.eclairs-status { min-height: 1.2rem; margin: 0.5rem 0 0; color: var(--eclair-muted); font-size: 0.9rem; }

/* Mobile : grille 2 x 3 compacte, pas de carrousel (un carrousel cacherait 4 cartes sur 6) */
@media (max-width: 640px) {
  .eclairs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .eclair-card__famille { display: none; }
  .eclair-card__emoji { font-size: 2.2rem; }
  .eclair-card__body { padding: 0.55rem 0.65rem 0.7rem; }
  .eclair-card__consigne { font-size: 0.88rem; }
}

@media (prefers-reduced-motion: reduce) {
  .eclairs-grid, .eclair-card { transition: none; }
  .eclair-card:hover, .eclair-card:focus-visible { transform: none; }
}

/* ---------- Catalogue /eclairs ---------- */
.eclairs-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 1.25rem; }
.eclairs-filter {
  background: transparent; border: 1px solid var(--eclair-border); border-radius: 999px;
  padding: 0.4rem 1rem; font-size: 0.9rem; cursor: pointer; color: inherit;
}
.eclairs-filter[aria-pressed='true'] {
  background: var(--eclair-accent); border-color: var(--eclair-accent); color: #fff;
}
.eclairs-count { color: var(--eclair-muted); margin: 0 0 0.75rem; }
.eclairs-mur { margin-top: 2.5rem; }
.eclairs-mur__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.6rem; }
.eclairs-mur__item { display: block; border-radius: var(--eclair-radius); overflow: hidden; border: 1px solid var(--eclair-border); }
.eclairs-mur__item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

/* ---------- Page Éclair ---------- */
.eclair-back { display: inline-block; margin-bottom: 1rem; }
.eclair-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: center;
  padding: 1.25rem;
}
.eclair-hero__visual {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3;
  background: var(--fam, #eeeeee); border-radius: var(--eclair-radius); overflow: hidden;
}
.eclair-hero__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eclair-hero__emoji { font-size: 6rem; line-height: 1; }
.eclair-hero__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.5rem; }
.eclair-pill {
  background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 0.85rem; font-weight: 600;
  padding: 0.15rem 0.7rem; border-radius: 999px;
}
.eclair-pill--soft { background: var(--fam, #eeeeee); color: inherit; }
.eclair-hero h1 { margin: 0.25rem 0 0.5rem; font-size: 1.6rem; }
.eclair-hero__consigne { font-size: 1.2rem; line-height: 1.45; margin: 0; }

.eclair-timer, .eclair-actions, .eclair-signup, .eclair-result { margin-top: 1.25rem; padding: 1.25rem; text-align: center; }
.eclair-timer__title { margin: 0 0 0.5rem; font-size: 1rem; }
.eclair-timer__display { font-size: 3rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: 0.25rem 0 0.75rem; }
.eclair-timer__actions, .eclair-actions__buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.eclair-actions__buttons:focus-within label[for='eclair-file'] { outline: 3px solid var(--eclair-accent); outline-offset: 2px; }
.eclair-actions__public { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; margin-top: 0.5rem; font-size: 0.95rem; }
.eclair-actions__hint { margin: 0.75rem 0 0; color: var(--eclair-muted); font-size: 0.9rem; }
.eclair-status { min-height: 1.4rem; margin: 0.75rem 0 0; }
.eclair-status--error { color: #b3261e; }
.eclair-signup { text-align: left; }
.eclair-signup label { display: block; margin: 0.5rem 0 0.25rem; font-weight: 600; }
.eclair-signup input[type='email'] { width: 100%; max-width: 380px; padding: 0.55rem 0.7rem; border: 1px solid var(--eclair-border); border-radius: 8px; font: inherit; }
.eclair-signup .btn { margin-top: 0.75rem; }
.eclair-result__links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; justify-content: center; margin-top: 0.75rem; }

@media (max-width: 640px) {
  .eclair-hero { grid-template-columns: 1fr; }
  .eclair-hero__emoji { font-size: 4rem; }
  .eclair-timer__display { font-size: 2.4rem; }
}

/* ---------- Carnet ---------- */
.carnet-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; margin: 1rem 0; }
.carnet-day {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  padding: 0.6rem 0.2rem; border: 1px solid var(--eclair-border); border-radius: var(--eclair-radius);
  background: var(--eclair-surface); font-size: 0.85rem;
}
.carnet-day__mark { font-size: 1.4rem; line-height: 1; min-height: 1.4rem; }
.carnet-day--fait { background: #fff4c2; border-color: #e6c200; }
.carnet-day--aujourdhui { outline: 2px solid var(--eclair-accent); outline-offset: 1px; }
.carnet-summary { font-size: 1.05rem; margin: 0.5rem 0; }
.carnet-total { color: var(--eclair-muted); margin: 0.25rem 0 1.5rem; }
.carnet-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; margin: 1rem 0 2rem; padding: 0; list-style: none; }
.carnet-badge {
  padding: 0.9rem; border: 1px solid var(--eclair-border); border-radius: var(--eclair-radius);
  text-align: center; background: var(--eclair-surface);
}
.carnet-badge--obtenu { background: #fff4c2; border-color: #e6c200; }
.carnet-badge__icon { display: block; font-size: 1.6rem; }
.carnet-badge__etat { display: block; font-size: 0.8rem; color: var(--eclair-muted); margin-top: 0.25rem; }
.carnet-cal { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 14px); grid-auto-columns: 14px; gap: 3px; margin: 0.75rem 0; overflow-x: auto; padding-bottom: 0.25rem; }
.carnet-cal__cell { width: 14px; height: 14px; border-radius: 3px; background: #ececec; }
.carnet-cal__cell--1 { background: #ffd84d; }
.carnet-cal__cell--2 { background: #f5a300; }
.carnet-recents { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
.carnet-recent { margin: 0; }
.carnet-recent img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--eclair-radius); border: 1px solid var(--eclair-border); }
.carnet-recent figcaption { font-size: 0.85rem; margin-top: 0.3rem; color: var(--eclair-muted); }