/************************************************************
 * 0) RESET & BASE
 ************************************************************/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; scroll-behavior: smooth; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5; color: #222; background-color: #fff;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/************************************************************
 * 1) TYPO
 ************************************************************/
h1 { font-weight: 700; margin-bottom: 1rem; }
p  { margin-bottom: 1rem; }
a  { color: #0044cc; text-decoration: none; word-break: break-word; }
a:hover { text-decoration: underline; }
.bold { font-weight: bold; }

/************************************************************
 * 2) LAYOUT GLOBAL
 ************************************************************/
.page {
  margin-inline: auto;
  padding-inline: clamp(12px, 4vw, 24px);
  padding-block: 2rem;
}

.hide {display: none;}

/************************************************************
 * 3) COMPOSANTS (communs)
 ************************************************************/
/* Boutons */
button { margin: 0.5rem; padding: 0.5rem 1rem; font-size: 1rem; cursor: pointer; }

/* Medias */
img { display: block; max-width: 100%; height: auto; margin-inline: auto; }

/* Grille utilitaire (ex. cartes Klee/Kandinsky) */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }

/* Slider */
.slider-container { margin: 1.5em 0; position: relative; text-align: center; user-select: none; }
.slider-track { width: 100%; height: 6px; background: #ccc; border-radius: 3px; position: relative; cursor: pointer; }
.slider-track.hide { background: #ffffff; }
input[type="range"] {
  width: 100%; position: absolute; top: -6px; left: 0; height: 6px;
  background: #ccc; accent-color: #ccc; color: #ccc;
}
.labels, .amounts { display: flex; justify-content: space-between; font-weight: bold; margin-top: .1em; }
.amounts, .labels { font-size: 1.2rem; }

input[type="text"] { padding: 8px 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 6px; outline: none; transition: all 0.2s ease; }
input[type="text"]:focus { border-color: #007acc; box-shadow: 0 0 4px rgba(0, 122, 204, 0.3); }

/* Liste de dates */
.options { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1rem; }

/* On cache le radio natif */
.options input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

/* Style du label comme une carte cliquable */
.options label { display: flex; align-items: center; gap: 0.6rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 9999px; padding: 0.45rem 0.8rem 0.45rem 0.6rem; cursor: pointer; transition: 0.15s ease-out; }

/* Le faux rond radio */
.options label::before { content: ""; width: 1.1rem; height: 1.1rem; border: 2px solid #cbd5f5; border-radius: 9999px; background: white; box-shadow: inset 0 0 0 2px white; transition: 0.15s ease-out; }

/* Survol */
.options label:hover { border-color: #94a3b8; background: #f8fafc; }

/* Focus clavier sur l’input */
.options input[type="radio"]:focus-visible + label { outline: 3px solid rgba(59, 130, 246, 0.35); outline-offset: 3px; }

/* Quand c'est coché */
.options input[type="radio"]:checked + label { border-color: #4f46e5; background: rgba(79, 70, 229, 0.05); color: #111827; font-weight: 500; }

/* Le rond plein quand c’est coché */
.options input[type="radio"]:checked + label::before { border-color: #4f46e5; background: radial-gradient(circle, #4f46e5 0, #4f46e5 40%, white 43%, white 100%); box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

/************************************************************
 * 4) SPÉCIFIQUES COMMUNS (si besoin)
 ************************************************************/

/************************************************************
 * 5) RESPONSIVE COMMUN
 ************************************************************/
@media (max-width: 360px) {
  .grid-2 { grid-template-columns: 1fr; }
}