/* ═══════════════════════════════════════════════════════════════════════════
   Pré-panier et confirmation.

   Un tunnel de paiement n'est pas une page de vente : pas de héros, pas de
   bandeau jaune plein hauteur, rien qui distraie. Le jaune revient seulement
   sur le récapitulatif — l'endroit où l'on veut que l'œil retombe.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── En-tête dépouillé : on ne propose plus d'aller ailleurs ─────────────── */
.entete--nu .entete__barre {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.entete__etape {
  margin: 0 auto 0 1.25rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-doux);
}
.entete__retour {
  margin-left: auto;
  font-size: .9rem;
  font-weight: 500;
  color: var(--encre-doux);
  text-decoration: none;
  border-bottom: 1px solid rgb(35 21 15 / .22);
}
.entete__retour:hover { color: var(--encre); border-bottom-color: var(--encre); }
@media (max-width: 34rem) {
  .entete__etape { display: none; }
}

.cmd { padding-block: clamp(1.75rem, 5vw, 3rem) clamp(3rem, 8vw, 5rem); }

.cmd-alerte {
  margin: 0 0 1.75rem;
  padding: .85rem 1rem;
  background: #fff4d6;
  border: 1px solid #f0cf7e;
  border-radius: .7rem;
  font-size: .92rem;
  line-height: 1.5;
}

.cmd-tete { max-width: 40rem; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.cmd-tete h1 {
  font-size: clamp(1.75rem, 4.4vw, 2.7rem);
  line-height: 1.06;
  margin: 0 0 .7rem;
  text-wrap: balance;
}
.cmd-tete h1 em {
  font-style: normal;
  color: var(--prune);
}

/* ── Deux colonnes : le formulaire, et le récapitulatif qui suit ─────────── */
.cmd-grille {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (min-width: 64rem) {
  .cmd-grille { grid-template-columns: minmax(0, 1fr) 21.5rem; }
  .cmd-recap { position: sticky; top: 5.5rem; }
}

.cmd-corps { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); min-width: 0; }

.cmd-bloc {
  background: #fff;
  border: 1px solid rgb(35 21 15 / .1);
  border-radius: 1rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
}
.cmd-bloc__titre {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 .35rem;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}
.cmd-bloc__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  background: var(--miel);
  color: var(--encre);
  font-size: .88rem;
  font-weight: 700;
}
.cmd-bloc__sous {
  margin: 0 0 1.1rem;
  padding-left: 2.4rem;
  font-size: .9rem;
  color: var(--encre-doux);
}

/* ── Travaux issus de l'audit ───────────────────────────────────────────── */
.travaux { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.travail {
  display: flex;
  gap: .7rem;
  padding: .7rem .85rem;
  background: var(--papier);
  border-radius: .7rem;
  border-left: 3px solid #e0b34e;
}
.travail--critique { border-left-color: #b4452c; }
.travail__txt { display: grid; gap: .3rem; min-width: 0; }

/* Le constat : c'est le problème, il porte la marque de gravité — pas une
   coche verte, qui laisserait croire que le point est déjà réglé. */
.travail__pb {
  position: relative;
  padding-left: 1.35rem;
  font-size: .93rem;
}
.travail__pb::before {
  content: "";
  position: absolute;
  left: 0; top: .2em;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: #e0b34e no-repeat center/.65rem .65rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323150f' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 16.6v.4'/%3E%3C/svg%3E");
}
.travail--critique .travail__pb::before {
  background-color: #b4452c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 16.6v.4'/%3E%3C/svg%3E");
}

/* La réparation : c'est ce qu'on livre, elle porte la coche. */
.travail__fix {
  position: relative;
  padding-left: 1.35rem;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--encre-doux);
}
.travail__fix::before {
  content: "";
  position: absolute;
  left: 0; top: .22em;
  width: 1rem; height: 1rem;
  background: no-repeat center/.95rem .95rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c5a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.5 4.5L19.5 6.5'/%3E%3C/svg%3E");
}

/* ── Périodicité ────────────────────────────────────────────────────────── */
.periode {
  display: inline-flex;
  gap: .25rem;
  margin: 0 0 1.2rem;
  padding: .25rem;
  background: var(--papier);
  border: 1px solid rgb(35 21 15 / .1);
  border-radius: 999px;
}
.periode__opt { position: relative; }
.periode__opt input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.periode__opt span {
  display: block;
  padding: .5rem 1rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--encre-doux);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.periode__opt span b { font-weight: 700; color: #0b5c43; }
.periode__opt input:checked + span {
  background: var(--prune);
  color: #fff8e7;
}
.periode__opt input:checked + span b { color: var(--miel-clair); }
.periode__opt input:focus-visible + span {
  outline: 2px solid var(--encre);
  outline-offset: 2px;
}

/* ── Cartes de formule ──────────────────────────────────────────────────── */
.offres { display: grid; gap: .8rem; }
@media (min-width: 46rem) {
  .offres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.offre { position: relative; display: block; min-width: 0; }
.offre input {
  position: absolute;
  top: .9rem; left: .9rem;
  width: 1.15rem; height: 1.15rem;
  accent-color: var(--prune);
  cursor: pointer;
}
.offre__cadre {
  display: grid;
  gap: .5rem;
  height: 100%;
  padding: .9rem .9rem 1rem 2.6rem;
  background: #fff;
  border: 1.5px solid rgb(35 21 15 / .14);
  border-radius: .85rem;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.offre:hover .offre__cadre { border-color: rgb(35 21 15 / .34); }
.offre input:checked ~ .offre__cadre {
  border-color: var(--prune);
  background: #fffdf7;
  box-shadow: 0 0 0 3px rgb(35 21 15 / .12);
}
.offre input:focus-visible ~ .offre__cadre {
  outline: 2px solid var(--encre);
  outline-offset: 2px;
}
.offre__tete { display: grid; gap: .3rem; }
.offre__nom { font-weight: 700; font-size: 1.02rem; }
.offre__badge {
  justify-self: start;
  padding: .18rem .5rem;
  border-radius: .4rem;
  background: var(--prune);
  color: var(--miel-clair);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.3;
}
.offre__badge--pale { background: var(--miel); color: var(--encre); }
.offre__pour { font-size: .84rem; color: var(--encre-doux); }
.offre__prix { display: flex; align-items: baseline; gap: .3rem; }
.offre__prix b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.offre__prix span { font-size: .78rem; color: var(--encre-doux); }
.offre__liste { display: grid; gap: .22rem; margin-top: .15rem; }
.offre__ligne {
  font-size: .82rem;
  line-height: 1.35;
  color: var(--encre-doux);
  padding-left: .95rem;
  position: relative;
}
.offre__ligne::before {
  content: "";
  position: absolute;
  left: 0; top: .48em;
  width: .34rem; height: .34rem;
  border-radius: 50%;
  background: var(--miel);
  box-shadow: inset 0 0 0 1px rgb(35 21 15 / .28);
}
.offre__ligne--plus { font-style: italic; }
.offres__pied { margin: 1rem 0 0; font-size: .86rem; color: var(--encre-doux); }

/* ── Champs ─────────────────────────────────────────────────────────────── */
.champs { display: grid; gap: 1rem; }
@media (min-width: 40rem) {
  .champs { grid-template-columns: 1fr 1fr; }
  .champ--large { grid-column: 1 / -1; }
}
.champ {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
}
.champ label { font-size: .86rem; font-weight: 600; }
.champ__opt {
  font-weight: 400;
  font-size: .78rem;
  color: var(--encre-doux);
}
.champ input, .champ textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  color: var(--encre);
  background: var(--papier);
  border: 1.5px solid rgb(35 21 15 / .14);
  border-radius: .65rem;
  padding: .72rem .85rem;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.champ textarea { resize: vertical; min-height: 3.4rem; }
.champ input:hover, .champ textarea:hover { border-color: rgb(35 21 15 / .3); }
.champ input:focus-visible, .champ textarea:focus-visible {
  outline: none;
  background: #fff;
  border-color: var(--prune);
  box-shadow: 0 0 0 3px rgb(35 21 15 / .14);
}
.champ__aide, .champ__err { font-size: .79rem; line-height: 1.4; }
.champ__aide { color: var(--encre-doux); }
.champ__err { min-height: 1rem; font-weight: 600; color: #9e1f2e; }
.champ:has(.champ__err:not(:empty)) input {
  border-color: #9e1f2e;
  background: #fdf1f1;
}

/* ── Récapitulatif ──────────────────────────────────────────────────────── */
.recap {
  background: linear-gradient(168deg, var(--miel-clair), var(--miel));
  border-radius: 1rem;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  box-shadow: 0 18px 40px -26px rgb(35 21 15 / .45);
}
.recap__titre {
  margin: 0 0 .9rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgb(35 21 15 / .62);
}
.recap__etab {
  margin: 0 0 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgb(35 21 15 / .18);
  display: grid;
  gap: .12rem;
}
.recap__etab b { font-size: 1.02rem; line-height: 1.25; }
.recap__etab span { font-size: .82rem; color: rgb(35 21 15 / .68); }

.recap__lignes { margin: 0 0 .9rem; display: grid; gap: .5rem; }
.recap__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  font-size: .9rem;
}
.recap__ligne dt { margin: 0; color: rgb(35 21 15 / .78); }
.recap__ligne dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.recap__zero { color: #0b5c43; }
.recap__ligne--remise dd { color: #0b5c43; }

.recap__total {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  flex-wrap: wrap;
  margin: 0 0 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid rgb(35 21 15 / .22);
}
.recap__total-lib { font-size: .84rem; color: rgb(35 21 15 / .7); width: 100%; }
.recap__total b {
  font-size: clamp(1.9rem, 4vw, 2.3rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.recap__ttc { font-size: .8rem; font-weight: 600; color: rgb(35 21 15 / .7); }

.recap__erreur {
  margin: .75rem 0 0;
  padding: .6rem .75rem;
  background: #fdeaea;
  border: 1px solid #f0b9b9;
  border-radius: .55rem;
  font-size: .86rem;
  color: #8d1c29;
}
.recap__gages {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: .42rem;
}
.recap__gages li {
  position: relative;
  padding-left: 1.3rem;
  font-size: .84rem;
  line-height: 1.4;
  color: rgb(35 21 15 / .82);
}
.recap__gages li::before {
  content: "";
  position: absolute;
  left: 0; top: .16em;
  width: .95rem; height: .95rem;
  background: no-repeat center/.95rem .95rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323150f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.5 4.5L19.5 6.5'/%3E%3C/svg%3E");
}
.recap__legal {
  margin: 1rem 0 0;
  font-size: .76rem;
  line-height: 1.45;
  color: rgb(35 21 15 / .66);
}
.recap__legal a { color: inherit; }

/* ── Page de confirmation ───────────────────────────────────────────────── */
.cmd--fin { padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(3rem, 8vw, 5rem); }
.fin h1 {
  font-size: clamp(1.8rem, 4.6vw, 2.8rem);
  line-height: 1.05;
  margin: 0 0 .7rem;
  text-wrap: balance;
}
.fin__pic {
  width: 3.1rem; height: 3.1rem;
  margin: 0 0 1.1rem;
  border-radius: 50%;
  background: var(--vert, #0e7c5a) no-repeat center/1.7rem 1.7rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.5 4.5L19.5 6.5'/%3E%3C/svg%3E");
}
.fin__pic--pause {
  background: var(--miel) no-repeat center/1.5rem 1.5rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323150f' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M9 6v12M15 6v12'/%3E%3C/svg%3E");
}
.fin__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }

.fin-recap {
  margin: 1.8rem 0 0;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid rgb(35 21 15 / .1);
  border-radius: .85rem;
  display: grid;
  gap: .6rem;
}
.fin-recap > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}
.fin-recap dt { margin: 0; font-size: .88rem; color: var(--encre-doux); }
.fin-recap dd { margin: 0; font-size: .94rem; text-align: right; }
.fin-recap__ht { display: block; font-size: .78rem; color: var(--encre-doux); }

.fin__st { margin: 2.2rem 0 .9rem; font-size: 1.15rem; }
.fin-etapes { margin: 0; padding-left: 1.4rem; display: grid; gap: .6rem; }
.fin-etapes li { font-size: .94rem; line-height: 1.5; color: var(--encre-doux); }
.fin-etapes li b { color: var(--encre); }
.fin-etapes li::marker { color: var(--prune); font-weight: 700; }
.fin__note {
  margin: 1.9rem 0 0;
  padding: .9rem 1rem;
  background: var(--papier);
  border-radius: .7rem;
  font-size: .88rem;
  line-height: 1.5;
}

/* Bandeau d'environnement de test. Volontairement voyant : confondre un
   paiement d'essai avec une vraie vente coûte plus cher qu'un bandeau laid. */
.cmd-test {
  margin: 0 0 1.5rem;
  padding: .7rem .9rem;
  background: repeating-linear-gradient(135deg, #23150f, #23150f 12px, #2f1e16 12px, #2f1e16 24px);
  color: #ffe8be;
  border-radius: .6rem;
  font-size: .84rem;
  line-height: 1.5;
}
.cmd-test code {
  background: rgb(255 255 255 / .14);
  padding: .1rem .35rem;
  border-radius: .3rem;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: .03em;
}

/* ── Offre de lancement dans le récapitulatif ─────────────────────────
   La remise est une LIGNE du décompte, et le retour au tarif plein est
   écrit sous le total : le client doit voir les deux avant de payer. */
.recap__ligne--offre dt { font-weight: 700; }
.recap__ligne--offre dd { font-weight: 800; color: #0e7c5a; }
.recap__apres {
  margin: 0.6rem 0 0; padding: 0.6rem 0.75rem;
  background: #fff8e7; border: 1px solid #23150f; border-radius: 0.6rem;
  font-size: 0.84rem; line-height: 1.4; color: #23150f;
}

/* Prix habituel barré et retour au tarif, sur les cartes de formule :
   la carte doit raconter la même chose que le récapitulatif de droite. */
.offre__barre {
  margin-right: 0.35rem; opacity: 0.55; font-weight: 700;
  text-decoration-color: #ffc02e; text-decoration-thickness: 2px;
}
.offre__apres {
  display: block; margin-top: 0.15rem;
  font-size: 0.76rem; font-weight: 600; opacity: 0.7;
}

/* ── Encarts de prix : de l'air ───────────────────────────────────────
   Le « puis X € après N mois » vivait DANS le bloc `.offre__prix`, qui
   est une ligne en flex : il devenait un élément de flex et cassait le
   prix sur trois lignes. Il est maintenant sorti du bloc. */
.offre__cadre { gap: .55rem; }
.offre__prix { flex-wrap: wrap; row-gap: .1rem; align-items: baseline; }
.offre__prix b { line-height: 1.1; }
.offre__apres {
  display: block; margin: -.15rem 0 .1rem;
  font-size: .76rem; font-weight: 600; line-height: 1.35;
  color: var(--encre-doux);
}
.offre__liste { margin-top: .35rem; gap: .3rem; }
.offre__ligne { line-height: 1.4; }

/* ── Comparatif déplié ────────────────────────────────────────────── */
.offres__comparer { margin: .9rem 0 0; text-align: center; }
.offres__lien {
  background: none; border: 0; padding: .3rem .2rem; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--encre);
  border-bottom: 2px solid var(--miel);
}
.offres__lien:hover { border-bottom-color: var(--encre); }

.comparatif { margin-top: 1rem; }
.comparatif__defiler { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparatif__t {
  width: 100%; border-collapse: collapse; min-width: 34rem;
  font-size: .86rem; background: #fff;
  border: 1px solid var(--trait); border-radius: .8rem; overflow: hidden;
}
.comparatif__t th, .comparatif__t td {
  padding: .55rem .7rem; text-align: left;
  border-bottom: 1px solid rgb(35 21 15 / .1);
}
.comparatif__t thead th {
  background: var(--papier-2, #fff8e7); vertical-align: bottom;
  border-bottom: 2px solid var(--trait);
}
.comparatif__t tbody th { font-weight: 500; }
.comparatif__t td { text-align: center; width: 7.5rem; }
.comparatif__t tbody tr:nth-child(even) { background: rgb(35 21 15 / .025); }
.comparatif__nom { display: block; font-weight: 800; }
.comparatif__prix { display: block; margin-top: .15rem; }
.comparatif__prix s { opacity: .5; margin-right: .25rem; }
.comparatif__prix b { font-size: 1.15rem; }
.comparatif__prix small { display: block; font-weight: 500; opacity: .7; }
.comparatif__apres { display: block; margin-top: .1rem; font-size: .72rem; opacity: .75; }
.comparatif__oui { color: #0e7c5a; font-weight: 800; }
.comparatif__non { opacity: .35; }
.comparatif__pied { margin: .7rem 0 0; font-size: .8rem; color: var(--encre-doux); text-align: center; }

/* ── Nom de domaine : saisie, extension, verdict ──────────────────────
   Le verdict s'affiche sous le champ et ne bloque jamais l'envoi : une
   API tierce en panne ne doit pas coûter une vente. */
.dom-ligne { display: flex; gap: .5rem; align-items: stretch; }
.dom-ligne input { flex: 1 1 auto; min-width: 0; }
.dom-ligne select { flex: 0 0 auto; width: auto; padding-inline: .6rem; }
.dom-etat {
  display: block; min-height: 1.15rem; margin-top: .35rem;
  font-size: .84rem; font-weight: 600; line-height: 1.35;
}
.dom-etat--libre   { color: #0e7c5a; }
.dom-etat--pris    { color: #9e1f2e; }
.dom-etat--inconnu,
.dom-etat--attente { color: var(--encre-doux); font-weight: 500; }
.dom-deja {
  display: flex; gap: .5rem; align-items: center;
  margin-top: .4rem; font-size: .86rem; font-weight: 600;
}
.dom-deja input { width: auto; }

/* ── Enseigne trop longue : points de suspension, jamais de retour ────
   Les raisons sociales Google sont parfois interminables
   (« Société Rémoise de Rénovation à reims, plomberie, électricité… ») :
   118 des 500 dépassent 24 caractères. Sur téléphone, elles débordaient
   de l'écran — `h1 em` porte `white-space: nowrap` depuis l'accueil, où
   l'`em` n'est qu'un mot. On tronque proprement plutôt que d'envelopper. */
.cmd-tete h1 { min-width: 0; }
.cmd-tete h1 em {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}