/* ====== Thème Renostyles ====== */
.rsw{
  --bg:#ffffff; --ink:#0c0c0c; --muted:#6b7280; --line:#e7e7e9;
  --primary:#F19605; /* orange Renostyles */
  --primary-weak: rgba(255,106,0,.12);
  --ok:#0e9f6e; --err:#b91c1c;
}
.rsw *{box-sizing:border-box}
.rsw-form{max-width:1060px;margin:24px auto;padding:28px;border-radius:18px;
  background:var(--bg);box-shadow:0 14px 40px rgba(0,0,0,.08)}
/* Stepper */
.rsw-steps{list-style:none;display:flex;gap:10px;padding:0;margin:0 0 22px}
.rsw-steps li{position:relative;padding:10px 14px 10px 34px;border-radius:999px;
  background:#f6f6f8;color:#3b3b3f;font-weight:700;font-size:14px}
.rsw-steps li::before{content:"";position:absolute;left:12px;top:50%;width:10px;height:10px;border-radius:50%;
  background:#cfcfd4;transform:translateY(-50%)}
.rsw-steps li.active{background:var(--primary);color:#fff}
.rsw-steps li.active::before{background:#fff}
.rsw-steps li.done{background:var(--primary-weak);color:#792f00}
.rsw-step{display:none}.rsw-step.active{display:block}

/* Grids */
.rsw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rsw-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rsw-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rsw-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}

/* Cartes / choix */
.rsw-card,.rsw-pick{display:flex;align-items:center;gap:12px;padding:20px;border:1px solid var(--line);
  border-radius:14px;background:#fbfbfc;cursor:pointer;transition:.2s}
.rsw-card:hover,.rsw-pick:hover{border-color:#ffd0b2;background:#fff}
.rsw-card input,.rsw-pick input{accent-color:var(--primary)}

/* Pills délais */
.rsw-pill{display:inline-block}
.rsw-pill input{display:none}
.rsw-pill span{display:inline-block;padding:10px 14px;border:1px solid var(--line);
  border-radius:999px;cursor:pointer;font-weight:600}
.rsw-pill input:checked + span{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-weak)}

/* Inputs */
.rsw input[type="text"],.rsw input[type="email"],.rsw input[type="tel"],.rsw textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;outline:none;background:#fff}
.rsw input:focus,.rsw textarea:focus{border-color:#ffb585;box-shadow:0 0 0 4px var(--primary-weak)}

/* Navigation */
.rsw-nav{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.rsw button,.rsw .rsw-submit{background:var(--primary);color:#fff;border:none;padding:12px 18px;
  border-radius:12px;cursor:pointer;font-weight: 500}
.rsw .rsw-prev{background:#efeff3;color:#111}

/* Statuts */
.rsw .rsw-status{margin-top:14px;color:var(--muted)}
.rsw .rsw-status.ok{color:var(--ok)}
.rsw .rsw-status.error{color:var(--err)}

/* Autocomplétion adresse */
.rsw-suggest{position:relative}
.rsw-suggest-list{position:absolute;z-index:20;left:0;right:0;top:100%;margin-top:6px;max-height:260px;overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.10)}
.rsw-suggest-item{padding:10px 12px;cursor:pointer}
.rsw-suggest-item:hover,.rsw-suggest-item.active{background:#f9f5f2}

/* Responsive */
@media (max-width:900px){
  .rsw-grid{grid-template-columns:repeat(2,1fr)}
  .rsw-grid-3{grid-template-columns:repeat(2,1fr)}
  .rsw-grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .rsw-grid,.rsw-grid-3,.rsw-grid-4{grid-template-columns:1fr}
}
/* Anti-spam honeypot : présent dans le DOM mais invisible */
.rsw .rsw-hp{
  position:absolute !important;
  left:-10000px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  overflow:hidden !important;
  clip:rect(1px,1px,1px,1px) !important;
  clip-path: inset(50%) !important;
  white-space:nowrap !important;
  pointer-events:none !important;
}
/* 1) Cacher complètement le honeypot (évite la barre blanche) */
input.rsw-hp { display:none !important; }

/* 2) Stepper plus fluide sur mobile */
@media (max-width: 640px){
  .rsw-steps{ flex-wrap:wrap; gap:8px; }
  .rsw-steps li{ padding:8px 10px 8px 28px; font-size:13px; }
  .rsw-grid-2, .rsw-grid-3, .rsw-grid-4{ grid-template-columns:1fr; }
  .rsw-card, .rsw-pick{ padding:16px; }
  /* CTA sticky en bas */
  .rsw-nav{
    position: sticky; bottom: 8px; z-index: 5;
    padding-top: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,0), #fff 40%);
  }
  .rsw-nav .rsw-prev{ display:none; }
  .rsw-nav .rsw-next, .rsw-nav .rsw-submit{ width:100%; border-radius:14px; }
}
/* ====== Formulaire plus large (style print) ====== */
.rsw-form{
  max-width: 1280px;   /* avant 1000/1060 */
  padding: 32px;       /* un peu plus d'air */
}

/* ====== Étape 1 : grosses cartes ====== */
.rsw-step[data-step="1"] .rsw-grid-2{
  gap: 24px;
  margin-top: 24px;
  margin-bottom: 28px;   /* espace au-dessus du bouton */
}
.rsw-step[data-step="1"] .rsw-card{
  padding: 28px;
  min-height: 140px;
  font-size: 18px;
}

/* ====== Étape 2 : grosses tuiles produits, 2 colonnes ====== */
.rsw-step[data-step="2"] .rsw-grid{
  grid-template-columns: repeat(2, minmax(0,1fr)); /* plus grand */
  gap: 20px;
  margin-top: 8px;
}
.rsw-step[data-step="2"] .rsw-pick{
  padding: 28px;
  min-height: 170px;     /* look "carte" */
}
.rsw-step[data-step="2"] .rsw-pick span{
  display:block;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
}

/* ====== Espacement avant le bouton Continuer (toutes étapes) ====== */
.rsw-step .rsw-nav{
  margin-top: 28px;      /* espace net entre sélections et CTA */
}

/* ====== Responsive ====== */
@media (max-width: 900px){
  .rsw-form{ padding: 24px; }
  .rsw-step[data-step="2"] .rsw-grid{ grid-template-columns:1fr; }
  .rsw-step[data-step="1"] .rsw-card{ min-height: auto; }
}
@media (max-width: 480px){
  .rsw-form{ padding: 20px; }
  .rsw-step[data-step="2"] .rsw-pick{ min-height: 140px; }
}/* ====== Formulaire large & plus haut ====== */
.rsw-form{ max-width: 1280px; padding: 36px; }
.rsw-step[data-step="1"] .rsw-grid-2{ gap:28px; margin:24px 0 30px; }
.rsw-step[data-step="1"] .rsw-card{ padding:30px; min-height:160px; font-size:20px; }
.rsw-step .rsw-nav{ margin-top: 30px; }

/* ====== Desktop : stepper en chevrons ====== */
.rsw-steps--chevrons{ display:flex; gap:16px; padding:0; margin:0 0 24px; list-style:none; }
.rsw-steps--chevrons li{
  position:relative; padding:16px 28px 16px 36px; font-weight: 500; color:#111; background:#f3f5f7;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%);
}
.rsw-steps--chevrons li:first-child{ clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 0 100%, 0 0); padding-left:22px; }
.rsw-steps--chevrons li::after{
  content: attr(data-sub); display:block; font-weight:600; color:#818a97; margin-top:2px;
}
.rsw-steps--chevrons li.active{ background:#111; color:#fff; }
.rsw-steps--chevrons li.active::after{ color:#e5e7eb; }
.rsw-steps--chevrons li.done{ background:#e9eef9; color:#1b2b6a; }
.rsw-steps--chevrons li.done::after{ color:#6b7aa6; }

/* ====== Mobile : cercle de progression ====== */
.rsw-mobile-head{ display:none; align-items:center; gap:12px; margin-bottom:18px; }
.rsw-circle{ --deg:90deg; width:56px; height:56px; border-radius:50%;
  background: conic-gradient(#111 var(--deg), #edf0f4 0);
  position:relative; display:grid; place-items:center;
}
.rsw-circle::after{ content:""; position:absolute; width:40px; height:40px; border-radius:50%; background:#fff; }
.rsw-circle__label{ position:relative; font-weight: 500; font-size:14px; }
.rsw-mobile-title{ margin:0; font-size:20px; font-weight: 500; }
.rsw-mobile-sub{ margin:2px 0 0; color:#6b7280; }

/* ====== Responsive ====== */
@media (max-width: 900px){
  .rsw-steps--chevrons{ display:none; }
  .rsw-mobile-head{ display:flex; }
  .rsw-form{ padding: 24px; }
  .rsw-step[data-step="1"] .rsw-card{ min-height:auto; font-size:18px; }
}
@media (max-width: 480px){
  .rsw-form{ padding: 20px; }
  .rsw-circle{ width:52px; height:52px; }
  .rsw-circle::after{ width:36px; height:36px; }
  .rsw-circle__label{ font-size:13px; }
}
/* Palette Renostyles */
.rsw{
  --primary:#F19605;           /* orange actif */
  --primary-soft:#fff1e7;      /* passif (très clair) */
  --primary-border:#ffd3b7;    /* bordures passif */
  --ink:#0c0c0c;
}

/* Form plus grand */
.rsw-form{ max-width:1280px; padding:36px; }

/* Stepper: bords droits, pleine largeur, colonnes égales */
.rsw-steps--tabs{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:12px; list-style:none; margin:0 0 26px; padding:0;
}
.rsw-steps--tabs li{
  background:var(--primary-soft);
  border:1px solid var(--primary-border);
  border-radius:12px;
  padding:14px 16px;
  font-weight: 500; color:var(--ink);
}
.rsw-steps--tabs li > span{ /* sous-titre */
  display:block; margin-top:2px; font-weight:600; color:#6b7280;
}
.rsw-steps--tabs li.active{
  background:var(--primary); border-color:var(--primary); color:#fff;
}
.rsw-steps--tabs li.active > span{ color:#fff; opacity:.85; }
.rsw-steps--tabs li.done{
  background:#ffe5d3; border-color:#ffc9a8; color:#7a3a00;
}

/* Cartes HÉRO avec icônes */
.rsw-cards-hero .rsw-card{ padding:28px; min-height:150px; }
.rsw-card-contents{ display:flex; align-items:center; gap:18px; }
.rsw-ico{ width:44px; height:44px; display:inline-flex; color:#7b7b7b; }
.rsw-label{ font-size:18px; font-weight:500; line-height:1.3; }

/* Accentuer l'icône quand sélectionné */
.rsw-card input:checked + .rsw-card-contents .rsw-ico{ color:var(--primary); }

/* Boutons nav */
.rsw .rsw-prev{
  background:#eff1f3; color:#111; border:1px solid #e5e7eb;
}
.rsw .rsw-prev:hover{ background:#e9ecef; }
.rsw .rsw-next{ background:var(--primary); }
.rsw-step[data-step="1"] .rsw-prev{ display:none; } /* pas de précédent à l'étape 1 */

/* Espace avant CTA */
.rsw-step .rsw-nav{ margin-top:30px; }

/* Responsive */
@media (max-width:980px){
  .rsw-steps--tabs{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .rsw-steps--tabs{ grid-template-columns:1fr; }
  .rsw-form{ padding:24px; }
  .rsw-label{ font-size:16px; }
  .rsw-ico{ width:38px; height:38px; }
  .rsw .rsw-prev{ display:none; }          /* mobile : CTA unique */
  .rsw .rsw-nav{ position:sticky; bottom:8px; background:linear-gradient(180deg,transparent,#fff 40%); }
  .rsw .rsw-next{ width:100%; border-radius:14px; }
}
/* --- 1) Stepper : enlever le petit rond et uniformiser --- */
.rsw-steps li::before,
.rsw-steps--tabs li::before{ content:none !important; display:none !important; }

.rsw-steps--tabs{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:12px; list-style:none; margin:0 0 26px; padding:0;
}
.rsw-steps--tabs li{
  background:var(--primary-soft);
  border:1px solid var(--primary-border);
  border-radius:12px;
  padding:14px 16px;
  display:flex; flex-direction:column; justify-content:center;  /* hauteur uniforme */
  min-height:64px;
  font-weight: 500; color:var(--ink);
}
.rsw-steps--tabs li > span{ margin-top:2px; font-weight:600; color:#6b7280; }
.rsw-steps--tabs li.active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.rsw-steps--tabs li.active > span{ color:#fff; opacity:.85; }
.rsw-steps--tabs li.done{ background:#ffe5d3; border-color:#ffc9a8; color:#7a3a00; }

/* --- 2) Étape 3 : espacer les blocs --- */
.rsw-step[data-step="3"] .rsw-grid-3{         /* Adresse / CP / Ville */
  margin-bottom: 18px;
}
.rsw-step[data-step="3"] p{                    /* "Quand souhaitez-vous..." */
  margin: 4px 0 10px;
}
.rsw-step[data-step="3"] p + .rsw-grid-4{     /* Les 4 boutons mois */
  margin-bottom: 18px;                         /* espace au-dessus du textarea */
}
.rsw-step[data-step="3"] textarea{
  margin-top: 4px;
}

/* --- 3) Un peu plus d'air général --- */
.rsw-step .rsw-nav{ margin-top: 30px; }

/* --- 4) Mobile --- */
@media (max-width:520px){
  .rsw-steps--tabs{ grid-template-columns:1fr; }
  .rsw-steps--tabs li{ min-height:56px; }
  .rsw .rsw-nav{
    position:sticky; bottom:8px; z-index:5;
    background:linear-gradient(180deg, rgba(255,255,255,0), #fff 40%);
    display:flex; gap:8px; margin-top:22px;
  }
  .rsw .rsw-prev, .rsw .rsw-next, .rsw .rsw-submit{ flex:1; border-radius:14px; }
}
/* Étape 1 : déjà présent (.rsw-ico) – on grossit un peu l’icône */
.rsw-ico { width:44px; height:44px; display:inline-flex; color:#7b7b7b; }
.rsw-card input:checked + .rsw-card-contents .rsw-ico { color:var(--primary); }

/* Étape 2 : tuiles avec pictos images */
.rsw-pick--withicon{
  align-items:center;
  gap:16px;
}
.rsw-picto{
  width:56px; min-width:56px; height:56px;
  display:grid; place-items:center;
  background:#fff; border:1px solid var(--primary-border);
  border-radius:12px; overflow:hidden;
}
.rsw-picto img{ display:block; width:100%; height:100%; object-fit:contain; }
.rsw-title{ font-size:20px; font-weight: 500; line-height:1.25; }

.rsw-pick input:checked + .rsw-picto,
.rsw-pick input:checked ~ .rsw-picto{ border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-weak); }
.rsw-pick input:checked ~ .rsw-title { color:#111; }

/* Responsive */
@media (max-width: 900px){
  .rsw-picto{ width:48px; min-width:48px; height:48px; }
  .rsw-title{ font-size:18px; }
}
@media (max-width: 520px){
  .rsw-picto{ width:44px; min-width:44px; height:44px; }
  .rsw-title{ font-size:17px; }
}
/* Mobile : cacher le stepper en tuiles */
@media (max-width: 900px){
  .rsw-steps--tabs{ display:none !important; }
  .rsw-mobile-head{ display:flex !important; } /* on garde le cercle */
}