/* ---------- trois faces au lieu de deux ---------- */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--deep-line);border:1px solid var(--deep-line)}
.duo--trois{grid-template-columns:repeat(3,minmax(0,1fr))}
.face{background:var(--deep);padding:clamp(24px,3vw,34px)}
.face .k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-2);font-weight:700}
.face strong{display:block;margin:12px 0 14px;font-size:clamp(18px,2.1vw,22px);
  font-weight:700;letter-spacing:-.026em;line-height:1.18}
.face .quoi{font-size:14.5px;color:var(--deep-mut);line-height:1.66}
.face .quoi b{color:var(--on-deep)}

/* ---------- le relevé du cas réel ---------- */
.releve--large{margin-top:6px}
.releve--large .titre{padding:15px 22px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.releve--large dl{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line)}
.releve--large dl div{background:var(--surface);padding:20px 22px;
  display:flex;flex-direction:column;gap:8px}
.releve--large dt{font-size:13px;color:var(--muted);line-height:1.4}
.releve--large dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-.035em;line-height:1}
.releve--large dd.jade{color:var(--accent-txt)}
.releve--large .note{padding:16px 22px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);line-height:1.6}

/* ---------- les deux trouvailles ---------- */
.trouv{margin-top:clamp(26px,3.4vw,40px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.trouv .t{background:var(--surface);padding:clamp(24px,3vw,34px)}
.trouv .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-txt);font-weight:700}
.trouv h3{margin:12px 0 14px;font-size:clamp(18px,2vw,21px);line-height:1.2}
.trouv p{font-size:14.5px;color:var(--muted);line-height:1.68;margin-bottom:12px}
.trouv p:last-child{margin-bottom:0}
.trouv b{color:var(--ink);font-weight:700}
.trouv .mise{padding:12px 15px;background:#FDF7EC;border-left:2.5px solid #B8862B;
  color:#6B4A12;font-size:13.5px}

/* ---------- les cinq étapes ---------- */
.jours{margin:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.jours .j{background:var(--surface);padding:18px 22px;
  display:grid;grid-template-columns:minmax(0,92px) minmax(0,1fr);gap:22px;align-items:start}
.jours .d{font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent-txt);padding-top:3px}
.jours div{font-size:14.5px;color:var(--muted);line-height:1.66}
.jours b{color:var(--ink);font-weight:700}

/* ---------- la liste du livrable ---------- */
.prose-liste{list-style:none;margin:24px 0 30px;padding:0;display:grid;gap:11px}
.prose-liste li{position:relative;padding-left:19px;
  font-size:15px;color:var(--muted);line-height:1.6}
.prose-liste li::before{content:"";position:absolute;left:0;top:9px;
  width:6px;height:6px;background:var(--accent)}

.prose-liste--deux{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:11px clamp(24px,4vw,56px);margin-bottom:0}

/* ---------- les trois formats ----------
   Une seule carte est sombre : celle qu'on recommande. Les deux autres
   restent parfaitement lisibles — on met en avant, on ne dévalorise pas. */
.offres{margin-top:clamp(28px,3.6vw,44px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,20px);align-items:start}

.of{background:var(--surface);border:1px solid var(--line);
  padding:clamp(24px,2.8vw,32px);display:flex;flex-direction:column;height:100%}
/* deux lignes réservées : sinon un intitulé qui passe à la ligne
   décale son prix et les trois montants ne s'alignent plus */
.of .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-txt);display:block;line-height:1.5;
  min-height:calc(2 * 1.5em)}
.of .k em{font-style:normal;color:var(--muted)}
.of .montant{margin:14px 0 8px;font-family:var(--mono);
  font-variant-numeric:tabular-nums;letter-spacing:-.04em;line-height:1}
.of .montant .n{font-size:clamp(34px,4.4vw,48px);font-weight:600}
.of .montant .u{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0}
.of .cond{font-size:13.5px;color:var(--muted);line-height:1.55}
.of ul{list-style:none;margin:22px 0 24px;padding:22px 0 0;display:grid;gap:11px;
  border-top:1px solid var(--line-soft)}
/* puce en position absolue, jamais en flexbox : un <b> à l'intérieur
   d'un li en display:flex devient un élément de flex et part en colonne */
.of li{position:relative;padding-left:19px;
  font-size:13.8px;color:var(--muted);line-height:1.55}
.of li::before{content:"";position:absolute;left:0;top:7px;
  width:6px;height:6px;background:var(--accent)}
.of li b{color:var(--ink);font-weight:700}
/* ce que l'offre ne contient pas : dit, pas caché */
.of li.non::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
.of li.non{color:var(--muted);opacity:.82}
.of .btn-row{margin-top:auto}
.of .btn{width:100%}
.of .fin{margin-top:16px;font-size:12.5px;color:var(--muted);line-height:1.55}

.of--phare{background:var(--deep);color:var(--on-deep);border-color:var(--deep)}
.of--phare .k{color:var(--accent-2)}
.of--phare .k em{color:var(--deep-mut)}
.of--phare .cond,.of--phare li{color:var(--deep-mut)}
.of--phare .montant .u{color:var(--deep-mut)}
.of--phare ul{border-top-color:var(--deep-line)}
.of--phare li b{color:var(--on-deep)}
.of--phare .fin{color:var(--accent-2)}

.offres-note{margin-top:clamp(20px,2.4vw,28px);font-size:14px;color:var(--muted);
  line-height:1.65;max-width:74ch}
.offres-note b{color:var(--ink);font-weight:700}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .duo--trois{grid-template-columns:minmax(0,1fr)}
  .releve--large dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offres{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .trouv{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .duo{grid-template-columns:minmax(0,1fr)}
  .releve--large dl{grid-template-columns:minmax(0,1fr)}
  .jours .j{grid-template-columns:minmax(0,1fr);gap:8px}
}