/* ==========================================================
   MobileRachat : retouches visuelles du site public
   Chargé après legsm_v2.css et Bootstrap 5, sur toutes les pages (layout.html.twig et layout-v2.html.twig).
   Même charte : vert #0A9343, fond #F8FAFC, police Inter. Supprimer ce fichier rend l'ancien affichage.
   ========================================================== */

:root {
  --mr-green: #0A9343;
  --mr-green-dark: #087A37;
  --mr-green-soft: #E7F5EC;
  --mr-text: #1F2933;
  --mr-muted: #5B5D62;
  --mr-border: #E2E8F0;
  --mr-bg: #F8FAFC;
  --mr-red: #B94A48;
  --mr-radius: 12px;
}

html, body { overflow-x: clip; }
body { color: var(--mr-text); }

/* ---------- En-tête ---------- */
nav#navbar {
  box-sizing: border-box;
  max-width: 100%;
  box-shadow: 0 1px 0 var(--mr-border), 0 4px 16px rgba(15, 23, 42, .04);
}
nav#navbar ul.navlist > li > a {
  position: relative;
  font-weight: 500;
  color: var(--mr-text);
  padding: 6px 0;
}
nav#navbar ul.navlist > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--mr-green);
  transform: scaleX(0);
  transition: transform .2s;
}
nav#navbar ul.navlist > li > a:hover { color: var(--mr-green); }
nav#navbar ul.navlist > li > a:hover::after { transform: scaleX(1); }
nav#navbar > p {
  margin: 0;
  font-size: .85rem;
  color: var(--mr-muted);
}
nav#navbar > p a { color: var(--mr-green); }
nav#navbar .icon-row a svg { transition: transform .15s; }
nav#navbar .icon-row a:hover svg { transform: translateY(-1px); }

/* ---------- En-tête fixe : le contenu commence juste sous lui, quelle que soit sa hauteur ----------
   --mr-header-h est mise à jour par navbar.html.twig (hauteur réelle de la barre) */
main.main-space { margin-top: var(--mr-header-h, 108px) !important; display: flow-root; }
header .main-banner { margin-top: var(--mr-header-h, 106px) !important; }

/* ordinateur : barre sur une seule ligne, même avec « Bonjour …, Se déconnecter » */
@media (min-width: 984px) {
  nav#navbar {
    flex-wrap: nowrap;
    column-gap: 24px;
    justify-content: space-between;
    padding: 14px 24px;
  }
  nav#navbar a#brand img { width: auto !important; height: 64px !important; }
  nav#navbar div#leftMenu.sidebar { margin: 0 !important; flex: 0 1 auto; }
  nav#navbar ul.navlist { padding-left: 0; flex-wrap: nowrap; }
  nav#navbar ul.navlist > li { margin-left: 18px; white-space: nowrap; }
  nav#navbar ul.navlist > li:first-child { margin-left: 0; }
  nav#navbar ul.navlist > li > a,
  .nav-brands-menu summary { font-size: 16px; }
  nav#navbar > p { max-width: 170px; line-height: 1.35; }
  nav#navbar .icon-row { flex: none; }
}
@media (min-width: 984px) and (max-width: 1240px) {
  nav#navbar { column-gap: 16px; padding: 12px 16px; }
  nav#navbar a#brand img { height: 52px !important; }
  nav#navbar ul.navlist > li { margin-left: 12px; }
  nav#navbar ul.navlist > li > a,
  .nav-brands-menu summary { font-size: 15px; }
  nav#navbar > p { display: none; }
}

@media (min-width: 769px) and (max-width: 983px) {
  nav#navbar ul.navlist > li > a,
  .nav-brands-menu summary { font-size: 15px !important; white-space: nowrap; }
  nav#navbar > p { display: none; }
}

/* ---------- Menu « Revendre mon mobile » par marques ---------- */
nav#navbar ul.navlist { align-items: center; }
nav#navbar li.nav-brands { position: relative; }
.nav-brands-menu summary {
  list-style: none;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  color: var(--mr-green);
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.nav-brands-menu summary::-webkit-details-marker { display: none; }
.nav-brands-menu summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .15s;
}
.nav-brands-menu[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.nav-brands-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: -16px;
  z-index: 30;
  width: 520px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--mr-border);
  border-radius: var(--mr-radius);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .14);
}
.nav-brands-title {
  margin: 0 0 10px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mr-muted);
}
.nav-brands-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 12px;
}
.nav-brands-panel li { margin: 0 !important; padding: 0 !important; line-height: 1.3; }
.nav-brands-panel ul a {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: .95rem !important;
  color: var(--mr-text) !important;
  text-decoration: none;
}
.nav-brands-panel ul a:hover { background: var(--mr-green-soft); color: var(--mr-green) !important; }
.nav-brands-all {
  display: inline-block;
  margin-top: 12px;
  padding-top: 10px;
  font-size: .9rem !important;
  font-weight: 600;
  color: var(--mr-green) !important;
  text-decoration: none;
}

/* ---------- Choix de la marque (accueil) ---------- */
.mr-brands {
  max-width: 1100px;
  margin: 48px auto 0;
  padding: 0 16px;
}
.mr-brands h2 { margin-bottom: 24px !important; }
.mr-brands-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.mr-brands-grid > li { flex: 0 0 160px; }
.mr-brand-tile {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  background: #fff;
  border: 1px solid var(--mr-border);
  border-radius: var(--mr-radius);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mr-brand-tile:hover {
  border-color: var(--mr-green);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
  transform: translateY(-2px);
}
.mr-brand-logo { height: 48px; display: flex; align-items: center; justify-content: center; }
.mr-brand-logo img { max-height: 48px; max-width: 120px; object-fit: contain; }
.mr-brand-name { font-size: 1.15rem; font-weight: 700; color: var(--mr-text); text-align: center; }
.mr-brand-count { font-size: .8rem; color: var(--mr-muted); }
.mr-brands-more { margin-top: 16px; }
.mr-brands-more summary {
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  color: var(--mr-green);
  list-style: none;
  padding: 8px;
}
.mr-brands-more summary::-webkit-details-marker { display: none; }
.mr-brands-more[open] summary { margin-bottom: 12px; }
.mr-brands-grid--small { gap: 10px; }
.mr-brands-grid--small > li { flex-basis: 130px; }
.mr-brands-grid--small .mr-brand-tile { padding: 12px 10px; }
.mr-brands-grid--small .mr-brand-logo { height: 36px; }
.mr-brands-grid--small .mr-brand-logo img { max-height: 36px; }
.mr-brands-grid--small .mr-brand-name { font-size: 1rem; }

/* ---------- Listes de modèles : titre + barre de marques ---------- */
.mr-list-head {
  max-width: 1100px;
  margin: 32px auto 8px;
  padding: 0 16px;
}
.mr-list-head h2 {
  margin: 0 0 16px !important;
}
.mr-brand-chips ul {
  list-style: none;
  margin: 0;
  padding: 2px 0 8px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.mr-brand-chips li { flex: none; }
.mr-brand-chips a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--mr-border);
  border-radius: 999px;
  background: #fff;
  font-size: .9rem;
  font-weight: 500;
  color: var(--mr-text);
  text-decoration: none;
  white-space: nowrap;
}
.mr-brand-chips a:hover { border-color: var(--mr-green); color: var(--mr-green); }
.mr-brand-chips a.active {
  background: var(--mr-green);
  border-color: var(--mr-green);
  color: #fff;
  font-weight: 600;
}
.mr-list-sub { margin: -8px 0 14px; color: var(--mr-muted); text-align: center; }

/* filtre par modèle (sans la capacité) */
.mr-family-filter {
  margin-top: 14px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--mr-border);
  border-radius: var(--mr-radius);
}
.mr-family-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.mr-family-head label { font-weight: 700; margin: 0; }
.mr-family-head input {
  flex: 1 1 240px;
  max-width: 360px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #CBD2DA;
  border-radius: 8px;
  font-size: .95rem;
}
.mr-family-head input:focus { outline: none; border-color: var(--mr-green); box-shadow: 0 0 0 3px rgba(10, 147, 67, .15); }
.mr-family-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mr-family-list li.is-extra { display: none; }
.mr-family-filter.is-expanded .mr-family-list li.is-extra,
.mr-family-filter.is-searching .mr-family-list li.is-extra { display: list-item; }
.mr-family-list li[hidden] { display: none !important; }
.mr-family-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--mr-border);
  border-radius: 8px;
  background: var(--mr-bg);
  font-size: .88rem;
  color: var(--mr-text);
  text-decoration: none;
  white-space: nowrap;
}
.mr-family-list a span {
  font-size: .75rem;
  color: var(--mr-muted);
  background: #fff;
  border-radius: 999px;
  padding: 0 6px;
}
.mr-family-list a:hover { border-color: var(--mr-green); color: var(--mr-green); }
.mr-family-list a.active { background: var(--mr-green-soft); border-color: var(--mr-green); color: var(--mr-green); font-weight: 600; }
.mr-family-more {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mr-green);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
}
.mr-family-none { margin: 10px 0 0; color: var(--mr-muted); font-size: .9rem; }

.mr-list-empty {
  max-width: 1100px;
  margin: 8px auto 0;
  padding: 24px 16px;
  text-align: center;
  color: var(--mr-muted);
}
.mr-list-empty strong { color: var(--mr-text); }

/* ---------- Bandeau de recherche (accueil, listes) ---------- */
header .main-banner {
  position: relative;
  isolation: isolate;
}
header .main-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 30, 20, .45), rgba(10, 30, 20, .25));
}
header .main-banner > .row {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: 900px;
  padding: 0 16px;
}
header .main-banner h1 {
  font-weight: 700;
  letter-spacing: -.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
header .main-banner .container-search {
  height: 52px;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
header .main-banner .container-search input {
  height: 100%;
  border: 0;
  padding: 0 16px;
  font-size: 1rem;
  outline: none;
}
header .main-banner .container-search button {
  background-color: var(--mr-green) !important;
  border: 0;
  min-width: 56px;
}
header .main-banner .container-search button svg { fill: #fff; }

/* ---------- Titres de section ---------- */
main section > h2 { letter-spacing: .5px; }

/* ---------- Comment ça marche (accueil) ---------- */
.mr-steps {
  max-width: 1100px;
  margin: 48px auto 56px;
  padding: 0 16px;
}
.mr-steps h2 { margin-bottom: 28px !important; }
.mr-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  counter-reset: mrstep;
  list-style: none;
  padding: 0;
  margin: 0;
}
.mr-steps-grid li {
  position: relative;
  background: #fff;
  border: 1px solid var(--mr-border);
  border-radius: var(--mr-radius);
  padding: 22px 22px 22px 72px;
  counter-increment: mrstep;
}
.mr-steps-grid li::before {
  content: counter(mrstep);
  position: absolute;
  left: 20px;
  top: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--mr-green-soft);
  color: var(--mr-green);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mr-steps-grid strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 4px;
}
.mr-steps-grid p {
  margin: 0;
  color: var(--mr-muted);
  font-size: .92rem;
  line-height: 1.5;
}
.mr-steps-more {
  text-align: center;
  margin: 16px 0 0;
}
.mr-steps-more a { color: var(--mr-green); font-weight: 600; }

/* ---------- Cartes modèles (accueil, liste par marque, recherche) ---------- */
.product-container,
.service-container {
  transition: box-shadow .2s, transform .2s;
}
:is(section#reventes, section#last-recovery, section#handset-list, section#search) .product-container:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}
.resell-button,
a.resell-button {
  border-radius: 8px;
  font-weight: 600;
  background-color: var(--mr-green) !important;
}
.resell-button:hover,
a.resell-button:hover { background-color: var(--mr-green-dark) !important; color: #fff !important; }
.product-container .product-price,
section#form-search .product-price { color: var(--mr-green) !important; font-weight: 700; }

/* ---------- Pied de page ---------- */
footer { border-top: 1px solid var(--mr-border); }
section#footer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(280px, auto);
  gap: 32px;
  max-width: 1240px;
  margin: 32px auto 0;
  padding: 0 16px;
}
section#footer .wrapper-footer {
  width: auto !important;
  text-align: left;
}
section#footer .wrapper-footer h5,
section#footer .wrapper-footer .title-footer {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 12px;
  text-align: left !important;
}
footer ul.navlist { margin-top: 0; }
footer ul.navlist li { margin: 0 0 6px; }
footer ul.navlist li a:hover { color: var(--mr-green); }
section#footer-row-2 { margin-top: 32px; }

/* ---------- Fenêtre « Comment choisir le bon état ? » ---------- */
#transaction-functional.state-guide {
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  width: min(1040px, calc(100vw - 32px)) !important;
  height: auto;
  max-height: calc(100vh - 32px);
  margin: 0 !important;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .25);
  font-family: 'Inter', sans-serif;
}
#transaction-functional .modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--mr-border);
}
#transaction-functional .modal-header h3 {
  display: block;
  margin: 0 0 6px !important;
  padding: 0;
  font-family: 'Inter', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: normal;
  text-align: left;
  color: var(--mr-text);
}
#transaction-functional .modal-header p { margin: 0; color: var(--mr-muted); font-size: .92rem; }
#transaction-functional .modal-body {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding: 20px 24px;
}
.state-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.state-guide-col {
  border: 1px solid var(--mr-border);
  border-top: 4px solid var(--mr-green);
  border-radius: 10px;
  padding: 16px;
  background: #fff;
}
.state-guide-col--ok { border-top-color: #3B82C4; }
.state-guide-col--ko { border-top-color: #E8A33D; }
.state-guide-col h4 {
  margin: 0 0 4px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--mr-text);
}
.state-guide-short { margin: 0 0 12px; font-size: .88rem; font-weight: 600; color: var(--mr-muted); }
.state-guide-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.state-guide-col li {
  position: relative;
  padding-left: 22px;
  font-size: .88rem;
  line-height: 1.45;
  color: #3E4650;
}
.state-guide-col li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--mr-green);
  border-bottom: 2px solid var(--mr-green);
  transform: rotate(-45deg);
}
.state-guide-col--ok li::before { border-color: #3B82C4; }
.state-guide-col--ko li::before {
  width: 10px;
  height: 10px;
  top: 4px;
  border: 0;
  transform: none;
  background:
    linear-gradient(45deg, transparent 43%, #C77A12 43%, #C77A12 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, #C77A12 43%, #C77A12 57%, transparent 57%);
}
.state-guide-note {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--mr-bg);
  font-size: .85rem;
  color: var(--mr-muted);
}
#transaction-functional .modal-footer {
  background: #fff;
  padding: 14px 24px;
  border-top: 1px solid var(--mr-border);
  display: flex;
  justify-content: flex-end;
}
#transaction-functional .modal-footer .main-button { width: auto; min-width: 160px; margin: 0; padding: 0 20px; }
@media (max-width: 760px) {
  #transaction-functional.state-guide { width: calc(100vw - 16px) !important; max-height: calc(100vh - 16px); }
  .state-guide-grid { grid-template-columns: 1fr; }
  #transaction-functional .modal-header,
  #transaction-functional .modal-body { padding-left: 16px; padding-right: 16px; }
  #transaction-functional .modal-body { max-height: calc(100vh - 290px); }
  #transaction-functional .modal-footer .main-button { width: 100%; }
}

/* ==========================================================
   Parcours de reprise (Transaction/new, success)
   ========================================================== */
main.funnel {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding: 32px 16px 64px;
  font-family: 'Inter', sans-serif;
}

/* étapes */
.funnel-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}
.funnel-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  color: var(--mr-muted);
  text-align: center;
}
.funnel-steps li::before {
  content: "";
  position: absolute;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--mr-border);
}
.funnel-steps li:first-child::before { display: none; }
.funnel-steps li.done::before,
.funnel-steps li.current::before { background: var(--mr-green); }
.funnel-steps-dot {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--mr-border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.funnel-steps-dot svg { width: 16px; height: 16px; }
.funnel-steps li.done .funnel-steps-dot { background: var(--mr-green); border-color: var(--mr-green); color: #fff; }
.funnel-steps li.current { color: var(--mr-text); font-weight: 600; }
.funnel-steps li.current .funnel-steps-dot { border-color: var(--mr-green); color: var(--mr-green); box-shadow: 0 0 0 5px var(--mr-green-soft); }

/* mise en page : formulaire + récapitulatif */
.funnel-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.funnel-main { display: grid; gap: 20px; min-width: 0; }
section.funnel-step {
  display: block !important;
  margin: 0 !important;
  width: 100% !important;
}
.funnel-card {
  background: #fff;
  border: 1px solid var(--mr-border);
  border-radius: var(--mr-radius);
  padding: 24px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.funnel .funnel-title {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--mr-text);
  text-align: left;
  margin: 0 0 6px !important;
  padding: 0;
}
.funnel .funnel-title--small {
  font-size: 1rem;
  margin: 22px 0 10px !important;
}
.funnel-subtitle {
  color: var(--mr-muted);
  margin: 0 0 18px;
  font-size: .95rem;
}
.funnel-link {
  display: inline-block;
  margin-top: 12px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--mr-green);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  cursor: pointer;
}
.funnel-link:hover { text-decoration: underline; color: var(--mr-green-dark); }
.funnel-link--muted { color: var(--mr-muted); font-weight: 500; }

/* choix (état, envoi, paiement) */
.funnel-options { display: grid; gap: 10px; }
.funnel-options--inline { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.funnel .funnel-option {
  width: auto !important;
  font-size: 1rem !important;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  border: 1.5px solid var(--mr-border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 400;
  transition: border-color .15s, background-color .15s;
}
.funnel .funnel-option:hover { border-color: #B9C3CF; }
.funnel .funnel-option input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--mr-green);
}
.funnel .funnel-option:has(input:checked) {
  border-color: var(--mr-green);
  background: var(--mr-green-soft);
}
.funnel-option-body { display: flex; flex-direction: column; gap: 2px; }
.funnel-option-body strong { font-weight: 600; }
.funnel-option-body small { color: var(--mr-muted); font-size: .85rem; line-height: 1.45; }
.funnel-option--compact { padding: 10px 12px; }

/* champs */
.funnel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}
.funnel .funnel-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: auto !important;
  margin: 0 !important;
}
.funnel .funnel-field--wide { grid-column: 1 / -1; }
.funnel .funnel-field label,
.funnel-login label {
  font-size: .9rem !important;
  font-weight: 600 !important;
  color: var(--mr-text);
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}
.funnel .funnel-field input[type=text],
.funnel .funnel-field input[type=email],
.funnel .funnel-field input[type=password],
.funnel .funnel-field input[type=tel],
.funnel .funnel-field input:not([type]),
.funnel .funnel-field select,
.funnel-login input[type=email],
.funnel-login input[type=password] {
  width: 100% !important;
  max-width: 100%;
  height: 44px !important;
  padding: 0 12px;
  border: 1px solid #CBD2DA;
  border-radius: 8px;
  background: #fff;
  font-size: 1rem;
  color: var(--mr-text);
  margin: 0 !important;
  box-shadow: none;
}
.funnel .funnel-field input:focus,
.funnel .funnel-field select:focus,
.funnel-login input:focus {
  outline: none;
  border-color: var(--mr-green);
  box-shadow: 0 0 0 3px rgba(10, 147, 67, .15);
}
.funnel .funnel-field small { color: var(--mr-muted); font-size: .8rem; line-height: 1.4; }
.funnel .funnel-field code { color: var(--mr-text); background: var(--mr-bg); padding: 1px 4px; border-radius: 4px; }
.funnel-date, .funnel-date > div { display: flex; gap: 8px; }
.funnel-date select { flex: 1; min-width: 0; }
.funnel .error input,
.funnel .error select { border-color: var(--mr-red) !important; }
.funnel .error ul,
.funnel .help-block,
.funnel-main ul:not([class]) li {
  color: var(--mr-red);
}
.funnel .error ul { list-style: none; padding: 0; margin: 2px 0 0; font-size: .85rem; }
.funnel .help-block { font-size: .85rem; }

.funnel-recap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 0;
}
.funnel-recap div { min-width: 0; }
.funnel-recap dt { font-size: .8rem; color: var(--mr-muted); font-weight: 500; }
.funnel-recap dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.funnel-recap--stacked { grid-template-columns: 1fr; }
.funnel-recap-price { color: var(--mr-green); font-size: 1.2rem; }

/* encadrés */
.funnel-note {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--mr-bg);
  font-size: .9rem;
}
.funnel-note--info {
  background: #EEF5FC;
  border: 1px solid #CFE0F3;
}
.funnel-note--info strong { color: #1D4F86; }
.funnel-note p { margin: 6px 0 0; color: var(--mr-muted); line-height: 1.5; }
.funnel-note-contact { font-size: .82rem; }
.funnel-hint { margin: 12px 0 0; font-size: .88rem; color: var(--mr-muted); }
.funnel-warning { color: var(--mr-red); }
.funnel-warning-box {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: #FBEAEA;
  color: #8E2F2D;
  font-size: .88rem;
  line-height: 1.5;
}
.funnel-bank {
  margin: 4px 0 6px;
  padding: 16px;
  border: 1px solid var(--mr-border);
  border-radius: 10px;
  background: var(--mr-bg);
}
.funnel-terms {
  margin: 20px 0 0 !important;
  width: auto !important;
}
.funnel-terms label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .92rem !important;
  font-weight: 400 !important;
  margin: 0;
}
.funnel-terms input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--mr-green); flex: none; }

/* boutons */
.funnel-actions { margin-top: 22px; display: flex; justify-content: flex-end; }
.funnel-actions--split { justify-content: space-between; align-items: center; }
.funnel .funnel-btn,
.funnel-login .funnel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 200px;
  width: auto !important;
  height: 48px;
  margin: 0 !important;
  padding: 0 24px;
  border: 1.5px solid var(--mr-green);
  border-radius: 8px;
  background: var(--mr-green);
  color: #fff;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s;
}
.funnel .funnel-btn:hover { background: var(--mr-green-dark); color: #fff; }
.funnel .funnel-btn--outline,
.funnel-login .funnel-btn--outline { background: #fff; color: var(--mr-green); }
.funnel .funnel-btn--outline:hover { background: var(--mr-green-soft); color: var(--mr-green); }
.funnel .funnel-btn--small { height: 40px; min-width: 0; font-size: .9rem !important; padding: 0 16px; }

/* récapitulatif */
.funnel-summary {
  position: sticky;
  top: 140px;
  background: #fff;
  border: 1px solid var(--mr-border);
  border-radius: var(--mr-radius);
  padding: 20px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.funnel-summary-title {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mr-muted);
  margin: 0 0 12px;
}
.funnel-summary-product { display: flex; gap: 14px; align-items: center; }
.funnel-summary-product img {
  width: 64px;
  height: 80px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--mr-bg);
  flex: none;
}
.funnel-summary-model { font-weight: 700; margin: 0; }
.funnel-summary-state { margin: 2px 0 0; font-size: .88rem; color: var(--mr-muted); }
.funnel-summary-price {
  margin: 16px 0 0;
  padding: 14px 0;
  border-top: 1px solid var(--mr-border);
  border-bottom: 1px solid var(--mr-border);
}
.funnel-summary-price span { display: block; font-size: .85rem; color: var(--mr-muted); }
.funnel-summary-price strong {
  display: block;
  font-size: 2rem;
  line-height: 1.2;
  color: var(--mr-green);
}
.funnel-summary-price strong.withoutprice { font-size: 1.3rem; color: var(--mr-muted); }
.funnel-summary-price p { margin: 4px 0 0; font-size: .85rem; color: var(--mr-muted); }
.funnel-summary-points {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  font-size: .85rem;
  color: var(--mr-muted);
}
.funnel-summary-points li { position: relative; padding-left: 20px; margin-bottom: 6px; }
.funnel-summary-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--mr-green);
  border-bottom: 2px solid var(--mr-green);
  transform: rotate(-45deg);
}
.funnel-summary-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* connexion client existant (étape 2) */
.funnel-login {
  max-width: calc(100% - 344px);
  margin: 0 0 20px;
  background: #fff;
  border: 1px solid var(--mr-border);
  border-radius: var(--mr-radius);
}
.funnel-login summary {
  padding: 14px 20px;
  cursor: pointer;
  font-weight: 600;
  list-style-position: inside;
}
.funnel-login summary span { font-weight: 400; color: var(--mr-muted); font-size: .9rem; margin-left: 6px; }
.funnel-login form { padding: 0 20px 20px; }
.funnel-login .funnel-link { margin-top: 0; }

/* confirmation */
section#form-success.funnel-success {
  display: grid !important;
  gap: 20px;
  align-items: stretch !important;
  margin: 0 !important;
}
.funnel-success .funnel-title--small { margin-top: 0 !important; margin-bottom: 14px !important; }
.funnel-success-head { text-align: center; padding: 32px 24px; }
.funnel-success-head .funnel-title { text-align: center; }
.funnel-success-icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--mr-green-soft);
  color: var(--mr-green);
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.funnel-success-icon svg { width: 28px; height: 28px; }
.funnel-success-head .funnel-subtitle { margin: 0; }
.funnel-success-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}
.funnel-next {
  list-style: none;
  counter-reset: next;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}
.funnel-next li {
  position: relative;
  counter-increment: next;
  padding-left: 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.funnel-next li::before {
  content: counter(next);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mr-green-soft);
  color: var(--mr-green);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.funnel-next li span { color: var(--mr-muted); font-size: .92rem; }
.funnel-next li .funnel-btn { margin-top: 6px !important; }
.funnel-next-error strong { color: var(--mr-red); }

/* ---------- Panier ---------- */
.funnel-page-head { margin-bottom: 20px; }
.basket-list { display: grid; gap: 14px; }
.basket-item {
  display: flex;
  align-items: center;
  gap: 20px;
}
.basket-item img {
  width: 72px;
  height: 90px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--mr-bg);
  flex: none;
}
.basket-item-body { flex: 1; min-width: 0; }
.basket-item-model { font-weight: 700; font-size: 1.1rem; margin: 0; }
.basket-item-price { margin: 4px 0 0; color: var(--mr-green); font-size: 1.4rem; font-weight: 700; }
.basket-item-price span { font-size: .85rem; font-weight: 500; color: var(--mr-muted); }
.basket-item-price--none { color: var(--mr-muted); font-size: 1rem; }
.basket-item-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.basket-item-actions .funnel-link { margin-top: 0; }
.funnel-empty { text-align: center; padding: 40px 24px; color: var(--mr-muted); }
.funnel-empty-icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--mr-green-soft);
  color: var(--mr-green);
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.funnel-empty-icon svg { width: 26px; height: 26px; }
.funnel-empty-title { font-weight: 700; color: var(--mr-text); font-size: 1.1rem; margin-bottom: 4px; }
.funnel-empty .funnel-btn { margin-top: 14px !important; }

/* ---------- Formulaires du site (contact, connexion, réparation, espace pro…) ---------- */
:is(section#form-repair, section#form-reprise, section#form-contact, section#form-count:not(.account)) .form-container {
  border: 1px solid var(--mr-border);
  border-radius: var(--mr-radius);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
  padding: 28px;
}
:is(section#form-repair, section#form-reprise, section#form-contact, section#form-count:not(.account)) label {
  font-size: .92rem;
  font-weight: 600;
  color: var(--mr-text);
  margin-bottom: 6px;
}
:is(section#form-repair, section#form-reprise, section#form-contact, section#form-count:not(.account)) :is(input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input:not([type]), select) {
  height: 44px !important;
  padding: 0 12px !important;
  border: 1px solid #CBD2DA !important;
  border-radius: 8px !important;
  background-color: #fff;
  font-size: 1rem !important;
  max-width: 100%;
}
:is(section#form-repair, section#form-reprise, section#form-contact, section#form-count:not(.account)) textarea {
  border: 1px solid #CBD2DA;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 1rem;
  max-width: 100%;
}
:is(section#form-repair, section#form-reprise, section#form-contact, section#form-count) :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--mr-green) !important;
  box-shadow: 0 0 0 3px rgba(10, 147, 67, .15);
}
.main-button {
  border-radius: 8px;
  height: 46px;
  font-weight: 600;
  border: 1.5px solid var(--mr-green);
  transition: background-color .15s, color .15s;
}
.main-button:hover {
  background-color: var(--mr-green-dark) !important;
  color: #fff !important;
}
section#form-contact .text-alert p,
section#form-contact .text-alert {
  border-radius: 10px;
}

/* ---------- Pages légales (CGA, CGU, CGV, mentions, confidentialité) ---------- */
.legal-page {
  max-width: 880px;
  margin: 0 auto;
  padding: calc(var(--mr-header-h, 120px) + 32px) 20px 64px;
  color: var(--mr-text);
  font-family: 'Inter', sans-serif;
}
.legal-page main { margin: 0 !important; padding: 0 !important; display: block !important; width: auto !important; background: none; }
.legal-page h1 {
  margin: 0 0 28px !important;
  font-family: 'Inter', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  text-align: left !important;
  line-height: 1.2;
}
.legal-page h2 {
  display: block !important;
  margin: 36px 0 12px !important;
  padding-top: 20px;
  border-top: 1px solid var(--mr-border);
  font-family: 'Inter', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: normal;
  text-align: left;
}
.legal-page h3,
.legal-page section .mentions-title-article {
  display: block;
  margin: 24px 0 8px !important;
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem !important;
  font-weight: 700;
  letter-spacing: normal;
  text-align: left;
  color: var(--mr-text);
}
.legal-page section,
.legal-page .preambule {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
.legal-page p,
.legal-page li {
  font-size: .97rem;
  line-height: 1.7;
  color: #3E4650;
  text-align: left;
}
.legal-page ul { padding-left: 22px; }
.legal-page a { color: var(--mr-green); }

/* ---------- Mobile ---------- */
@media (max-width: 983px) {
  .nav-brands-panel { position: static; width: auto; box-shadow: none; border: 0; padding: 8px 0 0; }
  .nav-brands-panel ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-brands-title { display: none; }
}

@media (max-width: 900px) {
  .funnel-layout,
  .funnel-success-grid { grid-template-columns: 1fr; }
  .funnel-summary { position: static; order: -1; }
  .funnel-login { max-width: none; }
  section#footer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  section#footer ul.navlist { align-items: flex-start !important; padding: 0 !important; }
  section#footer ul.navlist li a { font-size: .9rem !important; }
  section#footer .social-media { justify-content: flex-start !important; }
  section#footer .wrapper-footer:last-child { grid-column: 1 / -1; }
  :is(section#how_its_working, section#service, section#team, section#repair) .grid-container { width: 100% !important; max-width: 100%; padding: 0 16px; grid-template-columns: minmax(0, 1fr) !important; }
  :is(section#how_its_working, section#service, section#team, section#repair) .grid-item { width: auto !important; max-width: 100%; }
}

@media (max-width: 640px) {
  main.funnel { padding: 20px 12px 48px; }
  .funnel-card { padding: 18px 16px; }
  .funnel-steps li { font-size: .72rem; }
  .funnel-grid,
  .funnel-recap { grid-template-columns: 1fr; }
  .funnel-actions,
  .funnel-actions--split { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
  .funnel .funnel-btn { width: 100% !important; }
  .funnel-summary { padding: 16px; }
  .funnel-summary-points { display: none; }
  .funnel-summary-price strong { font-size: 1.6rem; }
  .mr-steps-grid { grid-template-columns: 1fr; }
  .mr-brands-grid > li { flex-basis: calc(50% - 7px); }
  .mr-brands-grid--small > li { flex-basis: calc(50% - 5px); }
  .basket-item { flex-wrap: wrap; }
  .basket-item-actions { width: 100%; }
  .legal-page h1 { font-size: 1.6rem; }
  :is(section#form-repair, section#form-reprise, section#form-contact, section#form-count:not(.account)) .form-container { width: calc(100% - 24px) !important; padding: 20px; }
  nav#navbar .brand { width: auto !important; flex: 1 1 auto !important; margin: 0 !important; justify-content: center; }
  nav#navbar a#brand img { width: 190px !important; height: auto !important; }
  header .main-banner h1 { font-size: 1.7rem; }
}