/* ================================================================
   IBC COMPONENTS — Bibliothèque de composants partagée
   Utilisée par tous les templates article (chaussage, renforcement,
   prévention, alimentation, et toutes les futures pages).

   Chargée via functions.php sur is_page() || is_singular()
   ================================================================ */

/* ──────────────────────────────────────────────────────────────
   SCROLL-REVEAL
   ────────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .75s cubic-bezier(.22,.61,.36,1),
              transform .75s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal[data-delay="4"] { transition-delay: .4s; }
.reveal[data-delay="5"] { transition-delay: .5s; }
.reveal[data-delay="6"] { transition-delay: .6s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* ──────────────────────────────────────────────────────────────
   UTILITAIRES COMMUNS
   ────────────────────────────────────────────────────────────── */

/* Titre de section centré Bebas */
.chss-section-title,
.ibc-section-title {
  font-family: var(--font-bebas);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--ibc-noir);
  text-align: center;
  margin: 0 0 40px;
  letter-spacing: 1px;
}

/* Citation inline (exposant rouge) */
.chss-cite,
.ibc-cite {
  color: var(--ibc-rouge);
  font-size: .75em;
  vertical-align: super;
  font-family: var(--font-body);
  font-weight: 600;
}

/* Divider SVG */
.ibc-divider { display: block; line-height: 0; margin: 0; overflow: hidden; }
.ibc-divider svg { display: block; width: 100%; height: 60px; }

/* Full-width content wrapper */
.ibc-page-content,
.chss-content,
.ibc-prevention-content,
.ibc-renf-wrap { width: 100%; }
.ibc-page-content > *,
.chss-content > *,
.ibc-prevention-content > *,
.ibc-renf-wrap > * { max-width: 100% !important; }


/* ──────────────────────────────────────────────────────────────
   GRILLES DE CARDS  (chss-*)
   ────────────────────────────────────────────────────────────── */
.chss-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.chss-cards-grid--4col { grid-template-columns: repeat(4, 1fr); }
.chss-cards-grid--2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1000px) { .chss-cards-grid--4col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .chss-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  {
  .chss-cards-grid,
  .chss-cards-grid--4col,
  .chss-cards-grid--2col { grid-template-columns: 1fr; }
}

/* ── Card standard ── */
.chss-card {
  background: white;
  border-radius: 14px;
  padding: 28px 24px;
  border-top: 4px solid var(--card-color, var(--ibc-rouge));
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.08);
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex;
  flex-direction: column;
}
.chss-card:hover { transform: translateY(-5px); box-shadow: 0 4px 16px rgba(0,0,0,.10), 0 12px 32px rgba(0,0,0,.12); }
.chss-card__icon  { font-size: 2.2rem; margin-bottom: 14px; }
.chss-card__title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--ibc-noir); margin-bottom: 10px; line-height: 1.4; }
.chss-card__text  { font-family: var(--font-body); font-size: .9rem; line-height: 1.65; color: #444; flex: 1; }
.chss-card__refs  { font-family: var(--font-body); font-size: .75rem; color: #888; background: #F2F0EB; display: inline-block; padding: 2px 8px; border-radius: 20px; margin-top: 12px; }

/* ── Card standard ── */
.chss-crit-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.09);
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex;
  flex-direction: column;
}
.chss-crit-card:hover { transform: translateY(-6px); box-shadow: 0 6px 20px rgba(0,0,0,.10), 0 18px 40px rgba(0,0,0,.13); }
/* Header coloré */
.chss-crit-card__head {
  background: var(--card-color, var(--ibc-rouge)) !important;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
/* Cercle décoratif discret en fond du header */
.chss-crit-card__head::after {
  content: '';
  position: absolute;
  right: -20px; top: -20px;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  pointer-events: none;
}
.chss-crit-card__head-icon { font-size: 2rem; flex-shrink: 0; line-height: 1; background: transparent !important; }
/* Wrapper texte (label + nom) — background transparent pour ne pas couvrir la couleur du header */
.chss-crit-card__head-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; background: transparent !important; }
/* Petit surtitle (ex : "Phase N3", "Hormone anabolique") */
.chss-crit-card__head-label {
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255,255,255,.65);
  line-height: 1;
}
/* Titre principal de la card */
.chss-crit-card__head-name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: white;
  line-height: 1.25;
}
.chss-crit-card__head-num { font-family: var(--font-bebas); font-size: 1.6rem; color: rgba(255,255,255,.2); flex-shrink: 0; }
/* Corps */
.chss-crit-card__body { padding: 22px 24px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.chss-crit-card__desc { font-family: var(--font-body); font-size: .92rem; line-height: 1.7; color: #444; margin: 0; }
.chss-crit-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.chss-crit-card__list li { font-family: var(--font-body); font-size: .87rem; color: #555; padding-left: 18px; position: relative; line-height: 1.55; }
.chss-crit-card__list li::before { content: '▸'; position: absolute; left: 0; color: var(--card-color, var(--ibc-rouge)); font-size: .72rem; top: 4px; }
.chss-crit-card__note { font-family: var(--font-body); font-size: .83rem; color: var(--card-color, var(--ibc-rouge)); font-weight: 600; margin: 0; padding-top: 10px; border-top: 1px solid var(--ibc-border-soft); margin-top: auto; }
/* Bandeau verdict (fond coloré en bas de card) */
.chss-crit-card__verdict {
  background: var(--card-color, var(--ibc-rouge));
  color: white;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 11px 24px;
  margin-top: auto;
  border-radius: 0 0 16px 16px;
}
/* Variante warning (fond clair, texte coloré) */
.chss-crit-card__warning {
  background: var(--card-bg, #FFF5F5);
  border-left: 3px solid var(--card-color, var(--ibc-rouge));
  color: #333;
  font-family: var(--font-body);
  font-size: .83rem;
  line-height: 1.6;
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
}
.chss-crit-card__warning strong { color: var(--card-color, var(--ibc-rouge)); }
.chss-crit-card__refs { font-family: var(--font-body); font-size: .75rem; color: #999; }


/* ──────────────────────────────────────────────────────────────
   BALANCE (comparateur bicolore)  (chss-*)
   ────────────────────────────────────────────────────────────── */
.chss-balance {
  display: flex;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.10);
  max-width: 860px;
  margin: 0 auto;
}
.chss-balance__side { flex: 1; padding: 32px 28px; }
.chss-balance__side--high { background: #EFF6FF; border-top: 5px solid #2563EB; }
.chss-balance__side--low  { background: #F0FDF4; border-top: 5px solid #16A34A; }
.chss-balance__sep { width: 56px; display: flex; align-items: center; justify-content: center; background: var(--ibc-noir); color: white; font-family: var(--font-bebas); font-size: 1.1rem; letter-spacing: 2px; writing-mode: vertical-rl; flex-shrink: 0; }
.chss-balance__label { font-family: var(--font-bebas); font-size: 1.1rem; letter-spacing: 1px; margin-bottom: 4px; }
.chss-balance__side--high .chss-balance__label { color: #2563EB; }
.chss-balance__side--low  .chss-balance__label { color: #16A34A; }
.chss-balance__mm  { font-family: var(--font-body); font-size: .8rem; color: #888; margin-bottom: 16px; }
.chss-balance__sub { font-family: var(--font-body); font-size: .8rem; color: #888; margin-bottom: 16px; }
.chss-balance__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.chss-balance__list li { font-family: var(--font-body); font-size: .9rem; color: #444; padding-left: 20px; position: relative; line-height: 1.5; }
.chss-balance__side--high .chss-balance__list li::before { content: '▸'; position: absolute; left: 0; color: #2563EB; font-size: .75rem; top: 3px; }
.chss-balance__side--low  .chss-balance__list li::before { content: '▸'; position: absolute; left: 0; color: #16A34A; font-size: .75rem; top: 3px; }
/* Variante alimentation : pro=rouge / anti=vert */
.chss-balance__side--pro  { background: #FFF5F5; border-top: 5px solid var(--ibc-rouge); }
.chss-balance__side--anti { background: #F0FDF4; border-top: 5px solid #16A34A; }
.chss-balance__side--pro  .chss-balance__label { color: var(--ibc-rouge); }
.chss-balance__side--anti .chss-balance__label { color: #16A34A; }
.chss-balance__side--pro  .chss-balance__list li::before { content: '✗ '; position: absolute; left: 0; color: var(--ibc-rouge); font-weight: 700; }
.chss-balance__side--anti .chss-balance__list li::before { content: '✓ '; position: absolute; left: 0; color: #16A34A; font-weight: 700; }
@media (max-width: 640px) {
  .chss-balance { flex-direction: column; }
  .chss-balance__sep { writing-mode: horizontal-tb; padding: 10px; width: auto; height: 40px; font-size: 1rem; }
}


/* ──────────────────────────────────────────────────────────────
   ALERTE
   ────────────────────────────────────────────────────────────── */
.chss-alert { display: flex; align-items: flex-start; gap: 14px; background: #FFF7ED; border-left: 4px solid #EA580C; border-radius: 0 12px 12px 0; padding: 18px 22px; max-width: 860px; margin: 0 auto; }
.chss-alert__icon { font-size: 1.5rem; flex-shrink: 0; }
.chss-alert__text { font-family: var(--font-body); font-size: .95rem; line-height: 1.7; color: #444; margin: 0; }
.chss-alert__text strong { color: #EA580C; }


/* ──────────────────────────────────────────────────────────────
   FAQ (accordion details/summary)
   ────────────────────────────────────────────────────────────── */
.chss-faq,
.ibc-faq { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }

.chss-faq details,
.ibc-faq  details {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.07);
  border-top: 3px solid var(--faq-color, var(--ibc-rouge));
  transition: box-shadow .3s;
}
.chss-faq details:hover,
.ibc-faq  details:hover,
.chss-faq details[open],
.ibc-faq  details[open] { box-shadow: 0 4px 16px rgba(0,0,0,.10); }

.chss-faq summary,
.ibc-faq  summary {
  padding: 20px 24px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: #0D0D0D;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  user-select: none;
}
.chss-faq summary::-webkit-details-marker,
.ibc-faq  summary::-webkit-details-marker { display: none; }

.chss-faq__icon,
.ibc-faq__icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--faq-color, var(--ibc-rouge));
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1;
  transition: transform .25s;
}
.chss-faq details[open] summary .chss-faq__icon,
.ibc-faq  details[open] summary .ibc-faq__icon { transform: rotate(45deg); }

/* Fallback : icône vide → affiche '+' via CSS (ex: page prévention) */
.chss-faq__icon:empty::before,
.ibc-faq__icon:empty::before { content: '+'; }

/* Force l'icône toujours à droite du summary,
   quelle que soit sa position dans le DOM (ex: technique-de-course met l'icône en premier) */
.chss-faq summary .chss-faq__icon,
.ibc-faq  summary .ibc-faq__icon { order: 9; margin-left: auto; flex-shrink: 0; }

/* Corps FAQ : cible aussi le <div> sans classe (pattern utilisé dans ~10 pages) */
.chss-faq__body,
.chss-faq details > div,
.ibc-faq  details > div,
.chss-faq details p,
.ibc-faq  details p {
  padding: 0 24px 20px;
  margin: 0;
  font-family: var(--font-body);
  font-size: .95rem;
  color: #444;
  line-height: 1.8;
  border-top: 1px solid var(--ibc-border-soft);
}
/* Le <p> à l'intérieur du <div> sans classe ne doit pas re-ajouter la border */
.chss-faq details > div > p,
.ibc-faq  details > div > p {
  border-top: none;
  padding: 0;
}


/* ──────────────────────────────────────────────────────────────
   TIPS (checklist)
   ────────────────────────────────────────────────────────────── */
.chss-tips { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.chss-tip {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: white;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.07);
  border-left: 4px solid var(--ibc-rouge);
}
.chss-tip__icon  { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.chss-tip__title { font-family: var(--font-heading); font-size: .95rem; font-weight: 700; color: var(--ibc-noir); margin-bottom: 4px; }
.chss-tip__text  { font-family: var(--font-body); font-size: .9rem; color: #555; line-height: 1.65; margin: 0; }
.chss-tip__ref   { font-size: .75rem; color: var(--ibc-rouge); vertical-align: super; }


/* ──────────────────────────────────────────────────────────────
   CONCLUSION (dégradé sombre)
   ────────────────────────────────────────────────────────────── */
.chss-conclusion {
  background: linear-gradient(135deg, var(--ibc-noir) 0%, #2a2a2a 100%);
  border-radius: 16px;
  padding: 48px;
  position: relative;
  overflow: hidden;
  max-width: 900px !important; /* !important : override le max-width:100%!important de .ibc-page-content > * quand la card est enfant direct */
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 56px !important; /* marge-bas systématique sous le résumé (ne force plus margin-top:0, pour laisser les pages ajouter un espacement au-dessus via style inline) */
}
.chss-conclusion::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(200,16,46,.15);
}
.chss-conclusion__pretitle { font-family: var(--font-bebas); font-size: .95rem; letter-spacing: 3px; color: var(--ibc-rouge); margin-bottom: 10px; position: relative; z-index: 1; }
.chss-conclusion__title    { font-family: var(--font-bebas); font-size: clamp(1.6rem, 3vw, 2.2rem); color: white; margin-bottom: 18px; position: relative; z-index: 1; }
.chss-conclusion__text     { font-family: var(--font-body); font-size: 1rem; line-height: 1.8; color: rgba(255,255,255,.85); position: relative; z-index: 1; margin: 0; }
.chss-conclusion__text strong { color: white; }
@media (max-width: 640px) { .chss-conclusion { padding: 28px; } }


/* ──────────────────────────────────────────────────────────────
   RÉFÉRENCES VANCOUVER
   ────────────────────────────────────────────────────────────── */
.chss-refs {
  background: white;
  border: 1px solid #E8E4DF;
  border-radius: 14px;
  overflow: hidden;
  max-width: 860px;
  margin: 0 auto;
}
.chss-refs__header {
  background: var(--ibc-noir);
  padding: 18px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: white;
}
.chss-refs__list {
  padding: 24px 28px;
  margin: 0;
  counter-reset: refs-counter;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chss-refs__list li {
  font-family: var(--font-body);
  font-size: .85rem;
  color: #555;
  line-height: 1.65;
  padding-left: 32px;
  position: relative;
  counter-increment: refs-counter;
}
.chss-refs__list li::before { content: counter(refs-counter) '.'; position: absolute; left: 0; color: var(--ibc-rouge); font-weight: 700; font-size: .85rem; width: 24px; }
.chss-refs__list li em { font-style: italic; }


/* ──────────────────────────────────────────────────────────────
   COMPOSANTS PRÉVENTION  (gen-*)
   ────────────────────────────────────────────────────────────── */

/* Balance allostatique stress/récup */
.gen-balance { display: flex; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,.10); max-width: 900px; margin: 0 auto; }
.gen-balance__side { flex: 1; padding: 36px 28px; display: flex; flex-direction: column; gap: 12px; }
.gen-balance__side--stress { background: #FFF5F5; border-top: 5px solid var(--ibc-rouge); }
.gen-balance__side--recup  { background: #F0FAF4; border-top: 5px solid #007A3D; }
.gen-balance__icon  { font-size: 2.2rem; margin-bottom: 4px; }
.gen-balance__title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--ibc-noir); margin-bottom: 8px; }
.gen-balance__list  { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.gen-balance__list li { font-family: var(--font-body); font-size: .9rem; color: #444; line-height: 1.5; padding-left: 20px; position: relative; }
.gen-balance__list li::before { content: '\25b8'; position: absolute; left: 0; color: var(--ibc-rouge); font-size: .75rem; top: 3px; }
.gen-balance__side--recup .gen-balance__list li::before { color: #007A3D; }
.gen-balance__sep { width: 60px; display: flex; align-items: center; justify-content: center; background: var(--ibc-noir); color: white; font-family: var(--font-bebas); font-size: 1.4rem; letter-spacing: 2px; writing-mode: vertical-rl; flex-shrink: 0; }
@media (max-width: 640px) {
  .gen-balance { flex-direction: column; }
  .gen-balance__sep { writing-mode: horizontal-tb; padding: 12px; width: auto; height: 44px; font-size: 1rem; }
}

/* Grille cards prévention */
.gen-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gen-cards-grid--2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .gen-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .gen-cards-grid, .gen-cards-grid--2col { grid-template-columns: 1fr; } }

.gen-card { background: white; border-radius: 14px; padding: 28px 24px; border-top: 4px solid var(--card-color, var(--ibc-rouge)); box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.08); transition: transform .3s ease, box-shadow .3s ease; display: flex; flex-direction: column; }
.gen-card:hover { transform: translateY(-5px); box-shadow: 0 4px 16px rgba(0,0,0,.10), 0 12px 32px rgba(0,0,0,.12); }
.gen-card__icon  { font-size: 2rem; margin-bottom: 14px; }
.gen-card__title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--ibc-noir); margin-bottom: 12px; }
.gen-card__text  { font-family: var(--font-body); font-size: .9rem; line-height: 1.65; color: #444; flex: 1; margin-bottom: 18px; }
.gen-card__link  { font-family: var(--font-body); font-size: .875rem; font-weight: 600; color: var(--card-color, var(--ibc-rouge)); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; margin-top: auto; transition: gap .2s; }
.gen-card__link:hover { gap: 8px; }

/* Conclusion prévention */
.gen-conclusion { background: linear-gradient(135deg, var(--ibc-noir) 0%, #2a2a2a 100%); border-radius: 16px; padding: 48px; position: relative; overflow: hidden; max-width: 900px !important; margin: 0 auto 56px !important; }
.gen-conclusion::before { content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; border-radius: 50%; background: rgba(200,16,46,.15); }
.gen-conclusion__eyebrow { font-family: var(--font-bebas); font-size: .85rem; letter-spacing: 3px; color: var(--ibc-rouge); text-transform: uppercase; position: relative; z-index: 1; display: block; margin-bottom: 10px; }
.gen-conclusion__title { font-family: var(--font-bebas); font-size: clamp(1.7rem, 3vw, 2.3rem); color: #fff; margin: 0 0 28px; letter-spacing: 1px; position: relative; z-index: 1; }
.gen-conclusion__text { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.8; color: rgba(255,255,255,.88); position: relative; z-index: 1; margin: 24px 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); }
.gen-conclusion__text strong { color: white; }
@media (max-width: 640px) { .gen-conclusion { padding: 28px; } }


/* ──────────────────────────────────────────────────────────────
   COMPOSANTS RENFORCEMENT  (ibc-renf-*)
   ────────────────────────────────────────────────────────────── */

.ibc-renf-section-title { font-family: var(--font-bebas); font-size: clamp(2rem, 4vw, 3rem); color: var(--ibc-noir); text-align: center; margin: 0 0 40px; letter-spacing: 1px; }

/* Grille objectifs */
.ibc-renf-goals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; }
@media (max-width: 700px) { .ibc-renf-goals-grid { grid-template-columns: 1fr; } }

.ibc-renf-goal-card { background: white; border-radius: 14px; padding: 28px 24px; text-align: center; border-top: 4px solid var(--card-color, var(--ibc-rouge)); box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.08); transition: transform .3s ease, box-shadow .3s ease; }
.ibc-renf-goal-card:hover { transform: translateY(-5px); box-shadow: 0 4px 16px rgba(0,0,0,.10), 0 12px 32px rgba(0,0,0,.12); }
.ibc-renf-goal-card__icon  { font-size: 2.4rem; margin-bottom: 14px; display: block; }
.ibc-renf-goal-card__title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--ibc-noir); margin-bottom: 12px; line-height: 1.4; }
.ibc-renf-goal-card__refs  { font-family: var(--font-body); font-size: .75rem; color: #888; background: #F2F0EB; display: inline-block; padding: 2px 8px; border-radius: 20px; }

/* Grille muscles */
.ibc-renf-muscles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; }
@media (max-width: 960px) { .ibc-renf-muscles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ibc-renf-muscles-grid { grid-template-columns: 1fr; } }

.ibc-renf-muscle-card { background: white; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.08); transition: transform .3s ease, box-shadow .3s ease; display: flex; flex-direction: column; }
.ibc-renf-muscle-card:hover { transform: translateY(-5px); box-shadow: 0 4px 16px rgba(0,0,0,.10), 0 12px 32px rgba(0,0,0,.12); }
.ibc-renf-muscle-card__head { background: var(--card-color, var(--ibc-rouge)); padding: 18px 22px; display: flex; align-items: center; gap: 12px; }
.ibc-renf-muscle-card__head-icon { font-size: 1.8rem; flex-shrink: 0; }
.ibc-renf-muscle-card__head-name { font-family: var(--font-heading); font-size: .95rem; font-weight: 700; color: white; line-height: 1.3; flex: 1; }
.ibc-renf-muscle-card__head-num  { font-family: var(--font-bebas); font-size: 1.4rem; color: rgba(255,255,255,.3); flex-shrink: 0; }
.ibc-renf-muscle-card__body { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; }
.ibc-renf-muscle-card__role { font-family: var(--font-body); font-size: .85rem; color: #555; line-height: 1.6; margin-bottom: 14px; font-style: italic; }
.ibc-renf-muscle-card__exo-label { font-family: var(--font-heading); font-size: .75rem; font-weight: 700; color: var(--ibc-noir); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.ibc-renf-muscle-card__exo-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ibc-renf-muscle-card__exo-list li { font-family: var(--font-body); font-size: .85rem; color: #333; line-height: 1.5; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.ibc-renf-muscle-card__exo-name { padding-left: 14px; position: relative; flex: 1; }
.ibc-renf-muscle-card__exo-name::before { content: '\25b8'; position: absolute; left: 0; color: var(--card-color, var(--ibc-rouge)); font-size: .7rem; top: 3px; }
.ibc-renf-muscle-card__exo-sets { font-family: var(--font-bebas); font-size: .85rem; color: var(--card-color, var(--ibc-rouge)); background: var(--card-bg, #FFF5F5); padding: 2px 8px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
.ibc-renf-muscle-card__note { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ibc-border-soft); font-family: var(--font-body); font-size: .8rem; color: #555; line-height: 1.5; font-style: italic; }

/* Illustration exercices (dans __body, avant __role) */
.ibc-renf-muscle-card__image-link { display: block; border-radius: 10px; overflow: hidden; margin-bottom: 16px; position: relative; }
.ibc-renf-muscle-card__image { display: block; width: 100%; height: auto; border-radius: 10px; transition: transform .35s ease; }
.ibc-renf-muscle-card__image-link:hover .ibc-renf-muscle-card__image { transform: scale(1.03); }
.ibc-renf-muscle-card__image-link::after { content: '🔍 Agrandir'; position: absolute; bottom: 8px; right: 8px; background: rgba(13,13,13,.72); color: #fff; font-family: var(--font-body); font-size: .68rem; padding: 3px 9px; border-radius: 20px; opacity: 0; transition: opacity .25s ease; }
.ibc-renf-muscle-card__image-link:hover::after { opacity: 1; }

/* Séances programme */
.ibc-renf-program-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 900px; margin: 0 auto 48px; }
@media (max-width: 640px) { .ibc-renf-program-grid { grid-template-columns: 1fr; } }
.ibc-renf-session-card { background: white; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.08); }
.ibc-renf-session-card__head { background: var(--session-color, var(--ibc-rouge)); padding: 18px 24px; }
.ibc-renf-session-card__head-label { font-family: var(--font-bebas); font-size: 1rem; color: rgba(255,255,255,.6); letter-spacing: 1px; display: block; margin-bottom: 2px; }
.ibc-renf-session-card__head-title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: white; }
.ibc-renf-session-card__body { padding: 20px 24px; }
.ibc-renf-session-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ibc-renf-session-card__list li { font-family: var(--font-body); font-size: .9rem; color: #333; line-height: 1.5; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ibc-renf-session-card__exo { padding-left: 16px; position: relative; flex: 1; }
.ibc-renf-session-card__exo::before { content: '\25b8'; position: absolute; left: 0; color: var(--session-color, var(--ibc-rouge)); font-size: .7rem; top: 3px; }
.ibc-renf-session-card__sets { font-family: var(--font-bebas); font-size: .85rem; color: var(--session-color, var(--ibc-rouge)); background: #FFF5F5; padding: 2px 8px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }

/* Calendrier semaine */
.ibc-renf-week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; max-width: 900px; margin: 0 auto; }
@media (max-width: 700px) { .ibc-renf-week-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 440px) { .ibc-renf-week-grid { grid-template-columns: repeat(2, 1fr); } }
.ibc-renf-week-day { background: white; border-radius: 10px; padding: 16px 8px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.06); transition: transform .2s ease; }
.ibc-renf-week-day:hover { transform: translateY(-3px); }
.ibc-renf-week-day--renf { background: var(--ibc-rouge); }
.ibc-renf-week-day--rest { background: #E8E6E1; }
.ibc-renf-week-day__label    { font-family: var(--font-bebas); font-size: .78rem; color: #999; letter-spacing: .5px; margin-bottom: 8px; display: block; }
.ibc-renf-week-day--renf .ibc-renf-week-day__label { color: rgba(255,255,255,.6); }
.ibc-renf-week-day__icon     { font-size: 1.4rem; display: block; margin-bottom: 6px; }
.ibc-renf-week-day__activity { font-family: var(--font-body); font-size: .72rem; color: #444; line-height: 1.4; font-weight: 600; }
.ibc-renf-week-day--renf .ibc-renf-week-day__activity { color: white; }
.ibc-renf-week-day--rest .ibc-renf-week-day__activity { color: #777; }

/* Tips renforcement */
.ibc-renf-tips { background: linear-gradient(135deg, #FFF5F5 0%, #fff 100%); border-radius: 16px; padding: 40px 44px; border-left: 5px solid var(--ibc-rouge); max-width: 860px; margin: 0 auto; box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.08); }
.ibc-renf-tips__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.ibc-renf-tips__list li { display: flex; align-items: flex-start; gap: 16px; }
.ibc-renf-tips__list .tip-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; }
.ibc-renf-tips__list .tip-text { font-family: var(--font-body); font-size: .95rem; color: #333; line-height: 1.65; }
.ibc-renf-tips__list .tip-text strong { color: var(--ibc-noir); }
.ibc-renf-tips__list .tip-ref { font-size: .72rem; color: #888; background: #F2F0EB; display: inline-block; padding: 1px 7px; border-radius: 20px; margin-left: 6px; vertical-align: middle; }
@media (max-width: 640px) { .ibc-renf-tips { padding: 28px 22px; } }

/* Conclusion renforcement */
.ibc-renf-conclusion { background: linear-gradient(135deg, var(--ibc-noir) 0%, #2a2a2a 100%); border-radius: 16px; padding: 48px; position: relative; overflow: hidden; max-width: 900px !important; margin: 0 auto 56px !important; }
.ibc-renf-conclusion::before { content: ''; position: absolute; top: -40px; right: -40px; width: 220px; height: 220px; border-radius: 50%; background: rgba(200,16,46,.15); pointer-events: none; }
.ibc-renf-conclusion__title { font-family: var(--font-bebas); font-size: clamp(1.6rem, 3vw, 2.2rem); color: white; margin-bottom: 20px; position: relative; z-index: 1; letter-spacing: 1px; }
.ibc-renf-conclusion__text  { font-family: var(--font-body); font-size: 1rem; line-height: 1.8; color: rgba(255,255,255,.88); position: relative; z-index: 1; margin: 0; }
.ibc-renf-conclusion__text strong { color: #fff; }
@media (max-width: 640px) { .ibc-renf-conclusion { padding: 30px 24px; } }

/* ============================================================
   Frise verticale — page "Modalités d'entraînement"
   ============================================================ */
.ibc-timeline { position: relative; padding-left: 60px; max-width: 860px; margin: 0 auto; }
.ibc-timeline::before {
  content: '';
  position: absolute;
  left: 22px; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom,
    var(--ibc-rouge) 0%,
    var(--ibc-rouge) 42%,
    #007A3D 42%,
    #007A3D 85%,
    #5B2D8E 85%,
    #5B2D8E 100%
  );
  border-radius: 3px;
}
.ibc-timeline__item { position: relative; margin-bottom: 36px; }
.ibc-timeline__item:last-child { margin-bottom: 0; }
.ibc-timeline__dot {
  position: absolute;
  left: -60px; top: 22px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--tl-color, var(--ibc-rouge));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--tl-color, var(--ibc-rouge));
  z-index: 2;
  transition: transform .3s ease;
}
.ibc-timeline__item:hover .ibc-timeline__dot { transform: scale(1.1); }
.ibc-timeline__dot-num { font-family: var(--font-bebas); font-size: 1rem; color: #fff; letter-spacing: 1px; line-height: 1; }
.ibc-timeline__card {
  background: white;
  border-radius: 14px;
  padding: 28px 32px;
  border-left: 4px solid var(--tl-color, var(--ibc-rouge));
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.08);
  transition: transform .3s ease, box-shadow .3s ease;
}
.ibc-timeline__card:hover { transform: translateX(5px); box-shadow: 0 4px 16px rgba(0,0,0,.10), 0 12px 32px rgba(0,0,0,.12); }
.ibc-timeline__icon { font-size: 1.8rem; margin-bottom: 8px; }
.ibc-timeline__title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--ibc-noir); margin-bottom: 12px; }
.ibc-timeline__text { font-family: var(--font-body); font-size: .95rem; line-height: 1.75; color: #444; margin-bottom: 10px; }
.ibc-timeline__list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.ibc-timeline__list li { font-family: var(--font-body); font-size: .9rem; color: #444; line-height: 1.6; padding-left: 18px; position: relative; }
.ibc-timeline__list li::before { content: '\25b8'; position: absolute; left: 0; color: var(--tl-color, var(--ibc-rouge)); font-size: .75rem; top: 4px; }
.ibc-timeline__note { font-family: var(--font-body); font-size: .85rem; color: #666; font-style: italic; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ibc-border-soft); }
.ibc-timeline__badge { display: inline-flex; align-items: center; gap: 12px; border-radius: 10px; padding: 12px 20px; margin-top: 14px; }
.ibc-timeline__phase { position: relative; margin: 44px 0 36px -60px; padding-left: 60px; display: flex; align-items: center; gap: 12px; }
.ibc-timeline__phase-label { font-family: var(--font-bebas); font-size: 1rem; letter-spacing: 2px; color: #fff; background: var(--ibc-noir); padding: 7px 18px; border-radius: 20px; position: relative; z-index: 2; }
@media (max-width: 640px) {
  .ibc-timeline { padding-left: 44px; }
  .ibc-timeline::before { left: 16px; }
  .ibc-timeline__dot { left: -44px; width: 34px; height: 34px; top: 18px; }
  .ibc-timeline__dot-num { font-size: .8rem; }
  .ibc-timeline__card { padding: 20px; }
  .ibc-timeline__phase { margin-left: -44px; padding-left: 44px; }
}

/* ============================================================
   Références Vancouver — style commun à toutes les pages
   ============================================================ */
.ibc-references-section { background: var(--ibc-ivory); padding: 0 0 72px; }
.ibc-references { border: 1px solid #E5E0D8; border-radius: 14px; overflow: hidden; background: #fff; }
.ibc-references__header {
  display: flex; align-items: center; gap: 10px;
  background: var(--ibc-noir); color: #fff;
  padding: 16px 24px;
  font-family: var(--font-heading); font-size: .9rem; font-weight: 700; letter-spacing: .5px;
}
.ibc-references__header svg { opacity: .75; flex-shrink: 0; }
.ibc-references__list { margin: 0; padding: 20px 24px 20px 44px; display: flex; flex-direction: column; gap: 10px; }
.ibc-references__list li { font-family: var(--font-body); font-size: .85rem; line-height: 1.65; color: #555; }
.ibc-references__list li em { color: var(--ibc-noir); font-style: italic; }
.ibc-references__list li::marker { color: var(--ibc-rouge); font-weight: 700; font-family: var(--font-heading); }

/* ── Références renforcement — aligné visuellement sur .chss-refs ── */
.ibc-renf-refs {
  background: white;
  border: 1px solid #E8E4DF;
  border-radius: 14px;
  overflow: hidden;
  max-width: 860px;
  margin: 0 auto;
}
.ibc-renf-refs__title {
  background: var(--ibc-noir);
  padding: 18px 28px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: white;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Icône livre via CSS pour compenser l'absence de SVG dans le HTML */
.ibc-renf-refs__title::before {
  content: '📚';
  font-size: .95rem;
}
.ibc-renf-refs__list {
  padding: 24px 28px;
  margin: 0;
  counter-reset: ibc-refs;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ibc-renf-refs__list li {
  counter-increment: ibc-refs;
  font-family: var(--font-body);
  font-size: .85rem;
  color: #555;
  line-height: 1.65;
  padding-left: 32px;
  position: relative;
}
.ibc-renf-refs__list li::before {
  content: counter(ibc-refs) '.';
  position: absolute;
  left: 0;
  color: var(--ibc-rouge);
  font-weight: 700;
  font-size: .85rem;
  width: 24px;
}
.ibc-renf-refs__list li em { font-style: italic; }
@media (max-width: 640px) { .ibc-renf-refs { border-radius: 10px; } }


/* ──────────────────────────────────────────────────────────────
   COMPOSANTS MODALITÉS (gen-section-full, gen-ratio-badge, gen-card extras)
   ────────────────────────────────────────────────────────────── */
.gen-card__num  { font-family: var(--font-bebas); font-size: 2.8rem; line-height: 1; color: var(--card-color, var(--ibc-rouge)); margin-bottom: 8px; opacity: 0.2; }
.gen-card__list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.gen-card__list li { font-family: var(--font-body); font-size: .875rem; color: #444; line-height: 1.5; padding-left: 18px; position: relative; }
.gen-card__list li::before { content: '\25b8'; position: absolute; left: 0; color: var(--card-color, var(--ibc-rouge)); font-size: .75rem; top: 3px; }

.gen-section-full { background: white; border-radius: 16px; padding: 36px 40px; box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.08); border-left: 5px solid var(--section-color, var(--ibc-rouge)); max-width: 900px; margin: 0 auto; }
.gen-section-full__header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.gen-section-full__icon  { font-size: 2.2rem; }
.gen-section-full__num   { font-family: var(--font-bebas); font-size: 1.1rem; color: var(--section-color, var(--ibc-rouge)); background: #FFF5F5; padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
.gen-section-full__title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; color: var(--ibc-noir); }
.gen-section-full__text  { font-family: var(--font-body); font-size: .95rem; line-height: 1.75; color: #444; margin-bottom: 0; }
.gen-section-full__text + .gen-section-full__text { margin-top: 12px; }
.gen-section-full__list  { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 10px; }
.gen-section-full__list li { font-family: var(--font-body); font-size: .9rem; color: #444; line-height: 1.6; padding-left: 22px; position: relative; }
.gen-section-full__list li::before { content: '\25b8'; position: absolute; left: 0; color: var(--section-color, var(--ibc-rouge)); font-size: .8rem; top: 3px; }
.gen-section-full__sub   { font-family: var(--font-body); font-size: .85rem; color: #666; margin-top: 4px; display: block; font-style: italic; }
@media (max-width: 640px) { .gen-section-full { padding: 24px 20px; } }

.gen-ratio-badge { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ibc-rouge), #e8102c); color: white; font-family: var(--font-bebas); font-size: 1.8rem; padding: 10px 24px; border-radius: 12px; margin: 16px 0; letter-spacing: 1px; }

.gen-conclusion__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.gen-conclusion__list li { font-family: var(--font-body); font-size: 1rem; color: rgba(255,255,255,.9); line-height: 1.6; padding-left: 30px; position: relative; }
.gen-conclusion__list li::before { content: '✓'; position: absolute; left: 0; color: #4ADE80; font-size: .9rem; font-weight: 700; top: 1px; }

.ibc-mod-content { width: 100%; }
.ibc-mod-content > * { max-width: 100% !important; }


/* ──────────────────────────────────────────────────────────────
   TIMELINE VERTICALE (modalités d'entraînement)
   ────────────────────────────────────────────────────────────── */
.ibc-timeline { position: relative; padding-left: 60px; max-width: 860px; margin: 0 auto; }
.ibc-timeline::before {
  content: '';
  position: absolute;
  left: 22px; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom,
    var(--ibc-rouge) 0%, var(--ibc-rouge) 42%,
    #007A3D 42%, #007A3D 85%,
    #5B2D8E 85%, #5B2D8E 100%
  );
  border-radius: 3px;
}
.ibc-timeline__item { position: relative; margin-bottom: 36px; }
.ibc-timeline__item:last-child { margin-bottom: 0; }
.ibc-timeline__dot {
  position: absolute; left: -60px; top: 22px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--tl-color, var(--ibc-rouge));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--tl-color, var(--ibc-rouge));
  z-index: 2; transition: transform .3s ease;
}
.ibc-timeline__item:hover .ibc-timeline__dot { transform: scale(1.1); }
.ibc-timeline__dot-num { font-family: var(--font-bebas); font-size: 1rem; color: #fff; letter-spacing: 1px; line-height: 1; }
.ibc-timeline__card {
  background: white; border-radius: 14px; padding: 28px 32px;
  border-left: 4px solid var(--tl-color, var(--ibc-rouge));
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.08);
  transition: transform .3s ease, box-shadow .3s ease;
}
.ibc-timeline__card:hover { transform: translateX(5px); box-shadow: 0 4px 16px rgba(0,0,0,.10), 0 12px 32px rgba(0,0,0,.12); }
.ibc-timeline__icon { font-size: 1.8rem; margin-bottom: 8px; }
.ibc-timeline__title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--ibc-noir); margin-bottom: 12px; }
.ibc-timeline__text { font-family: var(--font-body); font-size: .95rem; line-height: 1.75; color: #444; margin-bottom: 10px; }
.ibc-timeline__list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.ibc-timeline__list li { font-family: var(--font-body); font-size: .9rem; color: #444; line-height: 1.6; padding-left: 18px; position: relative; }
.ibc-timeline__list li::before { content: '\25b8'; position: absolute; left: 0; color: var(--tl-color, var(--ibc-rouge)); font-size: .75rem; top: 4px; }
.ibc-timeline__note { font-family: var(--font-body); font-size: .85rem; color: #666; font-style: italic; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ibc-border-soft); }
.ibc-timeline__badge { display: inline-flex; align-items: center; gap: 12px; border-radius: 10px; padding: 12px 20px; margin-top: 14px; }
.ibc-timeline__phase { position: relative; margin: 44px 0 36px -60px; padding-left: 60px; display: flex; align-items: center; gap: 12px; }
.ibc-timeline__phase-label { font-family: var(--font-bebas); font-size: 1rem; letter-spacing: 2px; color: #fff; background: var(--ibc-noir); padding: 7px 18px; border-radius: 20px; position: relative; z-index: 2; }
@media (max-width: 640px) {
  .ibc-timeline { padding-left: 44px; }
  .ibc-timeline::before { left: 16px; }
  .ibc-timeline__dot { left: -44px; width: 34px; height: 34px; top: 18px; }
  .ibc-timeline__dot-num { font-size: .8rem; }
  .ibc-timeline__card { padding: 20px; }
  .ibc-timeline__phase { margin-left: -44px; padding-left: 44px; }
} via CSS pour compenser l'absence de SVG dans le HTML */
.ibc-renf-refs__title::before {
  content: '📚';
  font-size: .95rem;
}
.ibc-renf-refs__list {
  padding: 24px 28px;
  margin: 0;
  counter-reset: ibc-refs;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ibc-renf-refs__list li {
  counter-increment: ibc-refs;
  font-family: var(--font-body);
  font-size: .85rem;
  color: #555;
  line-height: 1.65;
  padding-left: 32px;
  position: relative;
}
.ibc-renf-refs__list li::before {
  content: counter(ibc-refs) '.';
  position: absolute;
  left: 0;
  color: var(--ibc-rouge);
  font-weight: 700;
  font-size: .85rem;
  width: 24px;
}
@media (max-width: 640px) { .ibc-renf-refs { border-radius: 10px; } }