/* ============================================================
   comparatif.css — section "Seul ou accompagné ?" :
   une to-do list que HM AUTO barre tâche par tâche.
   À charger après style.css.
   ============================================================ */
.corvee-section { background: var(--white); padding: 110px 0; }
.corvee-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items: center; }

/* ---- Texte ---- */
.corvee-texte h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.06; }
.corvee-texte h2 em { font-style: italic; color: var(--red); font-weight: 700; }
.corvee-lead { margin-top: 22px; font-size: 17px; line-height: 1.6; color: #4a4a50; max-width: 460px; }

/* Interrupteur */
.corvee-switch {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin-top: 34px;
  background: var(--cream); border: 1px solid var(--border); border-radius: 40px; padding: 4px;
}
.corvee-btn {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  padding: 12px 22px; border-radius: 40px; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: var(--gray); transition: color .3s ease; white-space: nowrap;
}
.corvee-btn.actif { color: #fff; }
.corvee-curseur {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 40px;
  background: var(--ink); transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), background .3s ease;
}
.corvee-switch.mode-hm .corvee-curseur { transform: translateX(100%); background: var(--red); }

/* Compteur */
.corvee-compteur { display: flex; align-items: center; gap: 14px; margin: 26px 0 32px; }
.corvee-compteur strong {
  font-family: var(--font-serif); font-size: 76px; line-height: .9; color: var(--ink);
  min-width: 1ch; font-variant-numeric: tabular-nums; transition: color .3s ease;
}
.corvee-switch.mode-hm ~ .corvee-compteur strong { color: var(--red); }
.corvee-compteur span { font-size: 14px; line-height: 1.3; color: var(--gray); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }

/* ---- Le carnet ---- */
.corvee-carnet {
  position: relative; background: #fffdf8; border: 1px solid var(--border); border-radius: 4px;
  padding: 0 0 10px 0; box-shadow: 0 24px 50px rgba(40, 30, 10, .10);
  /* lignes de cahier + marge rouge */
  background-image:
    linear-gradient(90deg, transparent 54px, rgba(193, 0, 0, .25) 54px, rgba(193, 0, 0, .25) 55px, transparent 55px);
}
.corvee-carnet-tete {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 20px 26px 16px 72px; border-bottom: 2px solid var(--ink);
}
.corvee-carnet-tete strong { font-family: var(--font-serif); font-size: 19px; }
.corvee-carnet-tete span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); transition: color .3s; }
.mode-hm .corvee-carnet-tete span { color: var(--red); }

.corvee-liste { list-style: none; margin: 0; padding: 0; }
.corvee {
  position: relative; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 14px;
  padding: 13px 22px 13px 20px; border-bottom: 1px solid #ece7da;
  transition: opacity .4s ease, background .4s ease;
}
.corvee p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink); padding-left: 22px; }
.corvee small { display: block; font-size: 12.5px; color: var(--gray); margin-top: 2px; }
.corvee-alerte { color: var(--red) !important; font-weight: 600; }
.corvee-alerte::before { content: "⚠ "; }

/* Case à cocher dessinée */
.corvee-case { width: 18px; height: 18px; border: 1.5px solid #bdb6a4; border-radius: 3px; position: relative; }
.corvee-case::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid var(--red); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0);
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * .12s);
}

/* Étiquette "qui s'en occupe" */
.corvee-qui { position: relative; display: grid; justify-items: end; }
.corvee-qui b {
  grid-area: 1 / 1; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 3px; white-space: nowrap; transition: opacity .3s ease, transform .3s ease;
  transition-delay: calc(var(--i) * .12s);
}
.q-vous { background: #efebe0; color: var(--ink); }
.q-hm { background: var(--red); color: #fff; opacity: 0; transform: translateY(6px); }
.q-vous-hm { background: var(--ink); }

/* Trait de feutre rouge qui barre la tâche (ligne par ligne) */
.corvee:not(.reste) .t {
  background-image: linear-gradient(transparent 52%, rgba(193, 0, 0, .85) 52%, rgba(193, 0, 0, .85) 66%, transparent 66%);
  background-repeat: no-repeat; background-size: 0% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .45s cubic-bezier(.6, 0, .3, 1), color .4s ease;
  transition-delay: calc(var(--i) * .12s);
}

/* Les 2 tâches qui restent : cachées en mode "Seul" */
.corvee.reste { display: grid; max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden; border-bottom-width: 0; }

/* ---- Mode "Avec HM AUTO" ---- */
.mode-hm .corvee:not(.reste) .t { background-size: 100% 100%; color: var(--gray-light); }
.mode-hm .corvee:not(.reste) small { opacity: .5; }
.mode-hm .corvee:not(.reste) .corvee-case::after { transform: rotate(45deg) scale(1); }
.mode-hm .corvee:not(.reste) .corvee-case { border-color: var(--red); }
.mode-hm .corvee .q-vous { opacity: 0; transform: translateY(-6px); }
.mode-hm .corvee .q-hm { opacity: 1; transform: none; }
.mode-hm .corvee.reste {
  max-height: 90px; padding-top: 13px; padding-bottom: 13px; opacity: 1; border-bottom-width: 1px;
  background: #fff6f6; transition: max-height .5s ease 1.1s, padding .5s ease 1.1s, opacity .4s ease 1.3s;
}
.corvee.reste p { font-weight: 600; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .corvee-grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 560px) {
  .corvee-section { padding: 80px 0; }
  .corvee-carnet { background-image: none; }
  .corvee-carnet-tete { padding: 18px 18px 14px; }
  .corvee { grid-template-columns: 20px 1fr; padding: 12px 16px; row-gap: 6px; }
  .corvee p { padding-left: 0; font-size: 14.5px; }
  .corvee-qui { grid-column: 2; justify-items: start; }
  .corvee-compteur strong { font-size: 60px; }
  .corvee-btn { padding: 11px 16px; }
}