:root{
  --cm-bordeaux:#6F0025;
  --cm-gray:#F7F7F7;
  --cm-dark:#1A1A1A;
  --header-h: 180px; /* adapte selon la hauteur de ton header sticky */
}


/* applique un offset à tout élément ciblé par une ancre */
[id]::before {
  content: "";
  display: block;
  height: var(--header-h);
  margin-top: calc(-1 * var(--header-h));
  pointer-events: none;
  visibility: hidden;
}


.cmnse{
  background:var(--cm-gray);
  border-radius:16px;
  padding:24px;
}

.cmnse .cm-title{ margin:0 0 6px; }
.cmnse .cm-intro{ margin:0 0 14px; }

.cmnse .cm-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:10px;
}

/* CARD de choix */
.cmnse .cm-choice{
  background:#fff;
  border:1px solid #eee;
  border-radius:10px;
  padding:10px 12px;
  display:flex;
  gap:10px;
  align-items:center;
  cursor:pointer;
  transition:border-color .2s, box-shadow .2s;
}
.cmnse .cm-choice:hover{
  border-color:var(--cm-bordeaux);
  box-shadow:0 4px 16px rgba(111,0,37,.08);
}

/* CHECKBOX custom */
.cmnse .cm-choice input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:20px;height:20px;
  border:2px solid var(--cm-bordeaux);
  border-radius:6px;
  background:#fff;
  position:relative;
  margin:0;
  flex-shrink:0;
  transition:all .2s;
}
.cmnse .cm-choice input[type="checkbox"]:hover{
  border-color:var(--cm-dark);
}
.cmnse .cm-choice input[type="checkbox"]:checked{
  background:var(--cm-bordeaux);
  border-color:var(--cm-bordeaux);
}
.cmnse .cm-choice input[type="checkbox"]:checked::after{
  content:"✓";
  position:absolute;
  color:#fff;
  font-size:14px;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  line-height:1;
}

/* Actions */
.cmnse .cm-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}
.cmnse .cm-btn{
  border:none;
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
}
.cmnse .cm-btn--primary{
  background:var(--cm-bordeaux);
  color:#fff;
}
.cmnse .cm-btn--ghost{
  background:#fff;
  border:1px solid #ddd;
}

/* Résultats */
.cmnse .cm-result{
  margin-top:12px;
  padding:12px;
  border:1px dashed var(--cm-bordeaux);
  border-radius:10px;
  background:#fff;
}
.cmnse .cm-tags{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;
}
.cmnse .cm-tag{
  background:#f0e6ea;
  color:var(--cm-bordeaux);
  border-radius:999px;
  padding:4px 10px;
  font-size:.92rem;
}
.cmnse .cm-links{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;
}
.cmnse .cm-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;border-radius:999px;background:#fff;
  border:1px solid #eee;text-decoration:none;color:inherit;
}
.cmnse .cm-pill:hover{ border-color:var(--cm-bordeaux); }

.cmnse .cm-cta{
  display:inline-block;background:var(--cm-bordeaux);
  color:#fff;padding:10px 16px;border-radius:999px;
  text-decoration:none;margin-top:12px;
}

/* Accessibilité focus */
.cmnse .cm-choice input[type="checkbox"]:focus-visible{
  outline:2px solid #000; outline-offset:2px;
}
.cmnse .cm-btn:focus-visible,
.cmnse .cm-pill:focus-visible,
.cmnse .cm-cta:focus-visible{
  outline:3px solid rgba(111,0,37,.4); outline-offset:2px;
}

/* Responsive tweaks */
@media (max-width:480px){
  .cmnse{ padding:18px; }
}