/* Soyons Sport, calculateurs et tableau des categories d'age.
   S'appuie sur les variables de soyons-sport.css. */

.ssc-calc {
  background: var(--papier, #fff);
  border: 1px solid var(--bord, #e2e8e6);
  border-radius: var(--rayon, 12px);
  margin: 1.6rem 0 2rem;
  box-shadow: var(--ombre, 0 6px 20px rgba(27, 39, 51, .07));
  overflow: hidden;
  font-family: inherit;
}
.ssc-calc-title {
  margin: 0;
  padding: .85rem 1.4rem;
  background: var(--accent, #0b6e4f);
  color: #fff;
  font-family: var(--titre, inherit);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.ssc-intro {
  color: var(--encre-douce, #56657a);
  font-size: .92rem;
  margin: 1.1rem 1.4rem 0;
}
.ssc-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem 1.2rem;
  padding: 1.1rem 1.4rem 1.2rem;
}
.ssc-field { display: flex; flex-direction: column; gap: .35rem; }
.ssc-field label {
  font-size: .88rem;
  font-weight: 700;
  color: var(--encre, #1b2733);
}
.ssc-input-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--papier, #fff);
  border: 1px solid #cfd9d5;
  border-radius: var(--rayon-petit, 8px);
  padding: .1rem .8rem;
  min-height: 48px;
  transition: border-color .15s, box-shadow .15s;
}
.ssc-input-row:focus-within {
  border-color: var(--accent, #0b6e4f);
  box-shadow: 0 0 0 3px rgba(11, 110, 79, .15);
}
.ssc-input-row input {
  border: 0;
  background: transparent;
  padding: .55rem 0;
  font-size: 1.05rem;
  width: 100%;
  outline: none;
  color: var(--encre, #1b2733);
}
.ssc-unit {
  font-size: .85rem;
  color: var(--encre-douce, #56657a);
  white-space: nowrap;
  padding-left: .6rem;
  border-left: 1px solid var(--bord, #e2e8e6);
}
.ssc-field select {
  background: var(--papier, #fff);
  border: 1px solid #cfd9d5;
  border-radius: var(--rayon-petit, 8px);
  padding: .6rem .8rem;
  min-height: 48px;
  font-size: 1rem;
  color: var(--encre, #1b2733);
  width: 100%;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2356657a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  padding-right: 2rem;
}
.ssc-field select:focus { border-color: var(--accent, #0b6e4f); outline: none; box-shadow: 0 0 0 3px rgba(11, 110, 79, .15); }
.ssc-btn {
  grid-column: 1 / -1;
  background: var(--signal, #f26a1b);
  color: #fff;
  border: 0;
  border-radius: var(--rayon-petit, 8px);
  min-height: 50px;
  padding: .85rem 1.25rem;
  font-family: var(--titre, inherit);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.ssc-btn:hover {
  background: var(--signal-fonce, #d4560c);
  box-shadow: 0 4px 14px rgba(242, 106, 27, .3);
}
.ssc-result {
  margin: 0 1.4rem 1.4rem;
  background: var(--accent-clair, #e7f3ee);
  border: 1px solid #cfe7dc;
  border-radius: var(--rayon-petit, 8px);
  padding: 1.1rem 1.3rem;
  font-size: .98rem;
  color: var(--encre, #1b2733);
}
.ssc-result:empty { display: none; }
.ssc-result h4 {
  margin: 0 0 .5rem;
  font-family: var(--titre, inherit);
  font-size: 1rem;
  color: var(--accent-fonce, #084d38);
}
.ssc-result .ssc-big {
  font-family: var(--titre, inherit);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--accent, #0b6e4f);
  display: block;
  margin: .25rem 0;
}
.ssc-result table {
  width: 100%;
  border-collapse: collapse;
  margin-top: .6rem;
  font-size: .95rem;
  background: var(--papier, #fff);
  border-radius: 6px;
  overflow: hidden;
}
.ssc-result th, .ssc-result td {
  padding: .45rem .6rem;
  text-align: left;
  border-bottom: 1px solid #d9ebe3;
}
.ssc-result th { background: #d9ebe3; font-weight: 600; }
.ssc-result tr:last-child td { border-bottom: 0; }
.ssc-tag {
  display: inline-block;
  background: var(--accent, #0b6e4f);
  color: #fff;
  padding: .15rem .6rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  margin-left: .5rem;
}
.ssc-tag--good { background: #2a8f47; }
.ssc-tag--warn { background: #c56a06; }
.ssc-tag--bad  { background: #c4332b; }
.ssc-note {
  display: block;
  margin-top: .5rem;
  color: var(--encre-douce, #56657a);
  font-size: .85rem;
  font-style: italic;
}
@media (max-width: 600px) {
  .ssc-calc-title { padding: .8rem 1.1rem; }
  .ssc-intro { margin-inline: 1.1rem; }
  .ssc-form { grid-template-columns: 1fr; padding-inline: 1.1rem; }
  .ssc-result { margin-inline: 1.1rem; }
}

/* Tableau recapitulatif des categories d'age */
.ss-table-categories {
  margin: 2rem 0;
  background: var(--papier, #fff);
  border: 1px solid var(--bord, #e2e8e6);
  border-radius: var(--rayon, 12px);
  padding: 1.4rem;
  overflow-x: auto;
  box-shadow: var(--ombre, none);
}
.ss-table-categories h3 {
  margin: 0 0 1rem;
  color: var(--encre, #1b2733);
  font-size: 1.15rem;
}
.ss-cat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
.ss-cat-table th, .ss-cat-table td {
  padding: .6rem .75rem;
  text-align: left;
  border-bottom: 1px solid var(--bord, #e2e8e6);
}
.ss-cat-table th {
  background: var(--accent, #0b6e4f);
  color: #fff;
  font-weight: 700;
}
.ss-cat-table tbody tr:nth-child(even) { background: var(--papier-doux, #f5f8f7); }
.ss-cat-table tbody tr:hover { background: var(--signal-clair, #fff1e8); }
.ss-cat-table td strong { color: var(--signal-fonce, #d4560c); }
@media (max-width: 600px) {
  .ss-cat-table { font-size: .85rem; }
  .ss-cat-table th, .ss-cat-table td { padding: .45rem .5rem; }
}

/* Le calculateur vit dans .prose : on neutralise les marges du texte courant. */
.prose .ssc-calc-title { margin: 0; font-size: 1rem; }
.prose .ssc-intro { margin: 1.1rem 1.4rem 0; }
.prose .ssc-result p { margin: 0 0 .5rem; }
@media (max-width: 600px) {
  .prose .ssc-intro { margin-inline: 1.1rem; }
}