/* ============================================================
   ARGANE \002014 Configurateur \0000ab parcours guid\0000e9 \0000bb (composant partag\0000e9)
   ------------------------------------------------------------
   C\000153ur de styles du configurateur guid\0000e9 (.guide / .guide-step /
   .guide-options / .guide-result / progress / \0000e9cran r\0000e9sultat).
   Source UNIQUE pour index.html et
   Quelle machine vous correspond.html. Inclure dans le <head> :
       <link rel="stylesheet" href="components/argane-configurateur.css" />
   (Les ajustements responsive sp\0000e9cifiques \0000e0 chaque page restent
    dans leur feuille inline.)
   ============================================================ */
.guide{
  padding:clamp(80px, 9vw, 160px) 0;
  background:var(--paper);
  color:var(--forge);
  position:relative;
}
.guide .wrap{position:relative}
.guide .section-head{
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap:48px;
  margin-bottom:72px;
  align-items:end;
}
.section-head--solo{
  display:block !important;
  grid-template-columns:none !important;
}
.guide h2{
  letter-spacing:-0.035em;
}
.guide h2 em{
  display:block;
  font-family:var(--ff-body);
  font-style:italic;
  font-weight:300;
  font-size:0.5em;
  letter-spacing:-0.01em;
  color:var(--ardoise);
  margin-top:14px;
  line-height:1.2;
  text-wrap:balance;
}
.guide-lead{
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.55;
  color:var(--acier);
  max-width:46ch;
  margin:0;
}
.guide-eye{color:var(--ardoise);}
.guide-eye::before{background:var(--ardoise);}

.guide-board{
  background:var(--forge);
  color:var(--paper);
  padding:clamp(36px, 4.5vw, 72px) clamp(28px, 4vw, 64px);
  display:flex;
  flex-direction:column;
  gap:clamp(48px, 6vw, 88px);
  min-height:580px;
  position:relative;
  border-radius:clamp(8px, 1vw, 12px);
  overflow:hidden;
}
/* Grille technique subtile en fond du board pour donner de la profondeur */
.guide-board::before{
  content:"";
  position:absolute; inset:0;
  /* grille de fond retir\0000e9e */
  pointer-events:none;
}

/* Bloc 2 colonnes sous la progress bar */
.guide-body{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:2fr 1fr; /* questionnaire / r\0000e9sultat = 2/3, "Votre s\0000e9lection" = 1/3 */
  gap:clamp(40px, 5vw, 80px);
}
.guide-steps,
.guide-result{position:relative; z-index:1;}

.guide-steps{display:flex; flex-direction:column; gap:40px;}

/* ===== Progress \002014 version moderne : indicateur d'\0000e9tape + 4 segments ===== */
.guide-progress{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:18px;
  width:100%;
}
.guide-progress-meta{
  display:flex;
  align-items:baseline;
  gap:14px;
  font-family:var(--ff-body);
}
.guide-progress-meta .step-counter{
  display:inline-flex;
  align-items:baseline;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.04em;
}
.guide-progress-meta .d-num{
  color:var(--braise);
  font-size:32px;
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.guide-progress-meta .step-total{
  color:rgba(250,250,250,0.30);
  font-size:14px;
  margin-left:2px;
  font-variant-numeric:tabular-nums;
}
.guide-progress-meta .step-divider{
  color:rgba(250,250,250,0.25);
  font-size:14px;
}
.guide-progress-meta .d-label{
  font-size:14px;
  letter-spacing:0.02em;
  color:var(--paper);
  font-weight:500;
}

/* Les 4 segments \002014 r\0000e9initialise compl\0000e8tement les anciens styles */
.guide-progress-bars{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
}
.guide-progress-bars > span{
  position:relative;
  display:block;
  height:4px;
  width:auto;
  border:0;
  border-radius:2px;
  background:rgba(250,250,250,0.10);
  font-size:0; /* neutralise le ::before/::after */
  color:transparent;
  transform:none !important;
  box-shadow:none !important;
  transition:background .35s ease;
}
.guide-progress-bars > span::before,
.guide-progress-bars > span::after{content:none !important;}
.guide-progress-bars > span.done{
  background:var(--paper);
}
.guide-progress-bars > span.active{
  background:var(--braise);
  box-shadow:0 0 0 0 transparent !important;
}
/* Subtile pulsation sur le segment actif */
.guide-progress-bars > span.active::after{
  content:"" !important;
  position:absolute;
  inset:0;
  border-radius:2px;
  background:var(--braise);
  opacity:0.5;
  animation:guidePulse 1.6s ease-in-out infinite;
}
@keyframes guidePulse{
  0%, 100%{opacity:0.4; transform:scaleX(1);}
  50%{opacity:0.15; transform:scaleX(1);}
}

/* Progress mobile \002014 n'appara\0000eet que sous 768px (cach\0000e9 par d\0000e9faut) */
.guide-progress-mobile{
  display:none;
  position:relative;
  z-index:1;
  align-items:baseline;
  gap:12px;
  font-family:var(--ff-body);
  font-size:13px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--paper);
}
.guide-progress-mobile .m-num{
  background:var(--braise);
  color:var(--paper);
  padding:6px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.10em;
}
.guide-progress-mobile .m-sep{color:rgba(250,250,250,0.30);}
.guide-progress-mobile .m-label{font-weight:500;}

/* ===== \0000c9tape ===== */
.guide-step{
  display:none;
}
.guide-step.active{display:block; animation:fadein .4s ease;}
@keyframes fadein{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}

.guide-step .label{
  font-family:var(--ff-body);
  font-size:11px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--ardoise);
  margin-bottom:18px;
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.guide-step .label .num{
  /* Badge num\0000e9ro modernis\0000e9 */
  background:rgba(238,39,55,0.12);
  color:var(--braise);
  padding:4px 10px;
  border-radius:999px;
  font-size:10px;
  letter-spacing:0.18em;
}
.guide-step .step-lead{
  font-family:var(--ff-body);
  font-style:italic;
  font-weight:300;
  font-size:15px;
  line-height:1.55;
  color:rgba(250,250,250,0.65);
  max-width:60ch;
  margin:0 0 32px;
}
.guide-step h3{
  font-size:clamp(28px, 3vw, 42px);
  line-height:1.05;
  margin-bottom:16px;
  letter-spacing:-0.025em;
  font-weight:500;
  color:var(--paper);
}

/* ===== Options modernis\0000e9es ===== */
.guide-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.guide-options.grid-3{grid-template-columns:repeat(3, 1fr);}
.guide-option{
  position:relative;
  text-align:left;
  padding:22px 24px;
  border:0;
  background:rgba(250,250,250,0.04);
  color:var(--paper);
  display:flex;
  flex-direction:column;
  gap:8px;
  border-radius:10px;
  cursor:pointer;
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
  overflow:hidden;
}
/* Indicateur radio (cercle vide en coin) */
.guide-option::after{
  content:"";
  position:absolute;
  top:18px; right:18px;
  width:18px; height:18px;
  border:1.5px solid rgba(250,250,250,0.30);
  border-radius:50%;
  background:transparent;
  transition:all .25s ease;
}
.guide-option:hover{
  background:rgba(250,250,250,0.07);
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,0.25);
}
.guide-option:hover::after{border-color:rgba(250,250,250,0.55);}
.guide-option.sel{
  background:rgba(238,39,55,0.10);
  box-shadow:
    inset 0 0 0 1.5px var(--braise),
    0 12px 28px rgba(238,39,55,0.15);
  transform:translateY(-2px);
}
.guide-option.sel::after{
  /* Cercle plein Braise + tick */
  background:var(--braise);
  border-color:var(--braise);
  /* Le tick via une 2e pseudo n'est pas possible, on utilise un mask SVG */
  background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2012%2012%27%3E%3Cpath%20d=%27M3%206.5l2%202%204-5%27%20stroke=%27%23F4F1EA%27%20stroke-width=%271.6%27%20fill=%27none%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E);
  background-repeat:no-repeat;
  background-position:center;
}
.guide-option strong{
  font-family:var(--ff-body);
  font-size:17px;
  font-weight:500;
  letter-spacing:-0.01em;
  padding-right:32px; /* place pour le radio */
}
.guide-option small{
  color:rgba(250,250,250,0.55);
  font-size:13px;
  line-height:1.5;
}
.guide-option.sel small{color:rgba(250,250,250,0.75);}

/* ===== Pied : Pr\0000e9c\0000e9dent / Continuer \002014 boutons syst\0000e8me .btn align\0000e9s ===== */
.guide-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:auto;
  padding-top:36px;
  gap:16px;
}
/* La fl\0000e8che gauche garde le m\0000eame tracking de translate au hover */
.guide-foot .btn:hover .arrow-left{transform:translateX(-5px);}

/* ----- Skip link (haut droit) \002014 utilise .btn .btn-secondary ----- */
.guide-head-right{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:24px;
}
.guide-skip{
  align-self:flex-end;
}

/* Conteneur question (aria-live) */
.guide-stage{position:relative;}

/* ===== R\0000e9cap droite \002014 panneau carte moderne ===== */
.guide-result{
  border-left:0;
  padding:0;
  display:flex;
  flex-direction:column;
}
.guide-result .result-recap{
  display:flex;
  flex-direction:column;
  padding:32px;
  background:rgba(250,250,250,0.04);
  border:0;
  border-radius:12px;
}
.recap-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  margin-bottom:24px;
}
.recap-head h4{margin:0;}
.recap-modify{
  font-family:var(--ff-body);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--braise);
  cursor:pointer;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(238,39,55,0.10);
  transition:background .2s ease;
}
.recap-modify:hover{background:rgba(238,39,55,0.18);}

.guide-result h4{
  font-size:11px;
  font-family:var(--ff-body);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.20em;
  color:rgba(250,250,250,0.55);
}
.guide-summary{display:flex; flex-direction:column; gap:0;}
.guide-sumrow{
  display:grid;
  grid-template-columns: 14px 110px 1fr;
  align-items:center;
  gap:14px;
  padding:14px 0;
  border-bottom:0;
  position:relative;
}
.guide-sumrow:last-child{border-bottom:0;}
/* Pastille de statut \0000e0 gauche de chaque ligne */
.guide-sumrow::before{
  content:"";
  width:8px; height:8px;
  border-radius:50%;
  background:transparent;
  border:1.5px solid rgba(250,250,250,0.25);
  transition:all .25s ease;
  justify-self:center;
}
/* Quand la valeur n'est plus pending \002192 ligne valid\0000e9e */
.guide-sumrow:has(dd:not(.pending))::before{
  background:var(--braise);
  border-color:var(--braise);
  box-shadow:0 0 0 3px rgba(238,39,55,0.15);
}
.guide-sumrow dt{
  font-family:var(--ff-body);
  font-size:10px;
  letter-spacing:0.20em;
  text-transform:uppercase;
  color:rgba(250,250,250,0.70);
}
.guide-sumrow dd{
  margin:0;
  font-family:var(--ff-body);
  font-size:17px;
  letter-spacing:-0.01em;
  color:var(--paper);
}
.guide-sumrow dd.pending{
  color:rgba(250,250,250,0.60);
  font-family:var(--ff-body);
  font-style:italic;
  font-size:14px;
  font-weight:300;
}

/* ===== \0000c9tat R\0000c9SULTAT \002014 colonne gauche fade, mise en page 2 colonnes ===== */
.guide-steps.fade-out{
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.guide-board.done .guide-steps{display:none;}
/* En mode r\0000e9sultat, on masque aussi l'indicateur d'\0000e9tape (compteur + segments) */
.guide-board.done .guide-progress,
.guide-board.done .guide-progress-mobile{display:none;}
.guide-board.done .guide-result{
  border-left:0;
  padding-left:0;
}
.guide-board.done .guide-reco-full{
  margin-top:0;
  padding-top:0;
  border-top:0;
}
.guide-reco-full{
  margin-top:48px;
  padding-top:0;
  border-top:0;
}
.reco-eyebrow{
  font-family:var(--ff-body);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.20em;
  text-transform:uppercase;
  color:var(--braise);
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-bottom:24px;
}
.reco-eyebrow::before{
  content:"";
  width:40px; height:1px;
  background:var(--braise);
  display:inline-block;
}
.reco-title{
  font-family:var(--ff-display);
  font-weight:500;
  font-size:clamp(36px, 4.2vw, 56px);
  letter-spacing:-0.035em;
  line-height:0.98;
  margin:0 0 12px;
}
.reco-title .machine{color:var(--paper);}
.reco-subtitle{
  font-family:var(--ff-body);
  font-style:italic;
  font-weight:300;
  color:var(--ardoise);
  font-size:clamp(16px, 1.4vw, 20px);
  letter-spacing:-0.005em;
  margin-bottom:24px;
}
.reco-desc{
  color:var(--paper);
  font-size:15px;
  line-height:1.6;
  max-width:64ch;
  margin-bottom:40px;
}
.reco-specs{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  padding:0;
  border:0;
  margin-bottom:36px;
}
.reco-specs > div small{
  font-family:var(--ff-body);
  font-size:10px;
  letter-spacing:0.20em;
  text-transform:uppercase;
  color:var(--ardoise);
  display:block;
  margin-bottom:8px;
}
.reco-specs > div strong{
  font-family:var(--ff-body);
  font-size:clamp(18px, 1.4vw, 22px);
  font-weight:500;
  letter-spacing:-0.015em;
}
.reco-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}
.reco-alt{
  font-family:var(--ff-body);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ardoise);
  padding:8px 0;
  margin-left:auto;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.reco-alt:hover{color:var(--paper); border-color:var(--ink-15);}

/* Toast erreur */
.guide-toast{
  position:absolute;
  bottom:96px;
  left:50%;
  transform:translateX(-50%);
  background:var(--braise);
  color:var(--paper);
  font-family:var(--ff-body);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.06em;
  padding:14px 24px;
  border-radius:999px;
  white-space:nowrap;
  z-index:5;
  box-shadow:0 12px 28px rgba(238,39,55,0.30);
  animation:toastIn .25s ease both;
}
@keyframes toastIn{
  from{opacity:0; transform:translate(-50%, 6px);}
  to{opacity:1; transform:translate(-50%, 0);}
}

/* ============================================================
   RESPONSIVE \002014 Configurateur guid\0000e9 (source unique)
   ------------------------------------------------------------
   Le board passe en une colonne ; le pied Pr\0000e9c\0000e9dent/Continuer
   partage la largeur (jamais coup\0000e9) ; la r\0000e9cap \0000ab Votre s\0000e9lection \0000bb
   empile libell\0000e9 et valeur. Tablette \0022641024, t\0000e9l\0000e9phone \002264768.
   ============================================================ */
@media (max-width: 1023.98px){
  .guide-board{padding:clamp(24px, 4vw, 44px) clamp(18px, 4vw, 36px);}
  .guide-body{grid-template-columns:1fr; gap:44px;}
  .guide-result{border-left:0; padding-left:0; padding-top:32px;}
  .guide-options.grid-3{grid-template-columns:repeat(2, 1fr);}
  .reco-specs{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width: 767.98px){
  /* Options : une par ligne */
  .guide-options,
  .guide-options.grid-3{grid-template-columns:1fr;}

  /* Pied : les deux boutons partagent la largeur, sans d\0000e9bordement */
  .guide-foot{gap:12px;}
  .guide-foot .btn{flex:1 1 0; min-width:0; padding-left:16px; padding-right:16px;}

  /* R\0000e9cap \0000ab Votre s\0000e9lection \0000bb : puce + (libell\0000e9 au-dessus de la valeur) */
  .guide-sumrow{grid-template-columns:14px 1fr; gap:4px 12px; align-items:start;}
  .guide-sumrow::before{grid-row:1; grid-column:1; margin-top:5px;}
  .guide-sumrow dt{grid-row:1; grid-column:2;}
  .guide-sumrow dd{grid-row:2; grid-column:2;}

  /* R\0000e9cap finale resserr\0000e9e */
  .reco-specs{grid-template-columns:1fr 1fr;}

  /* Option : indicateur radio un peu plus proche du bord */
  .guide-option{padding:20px 20px;}
  .guide-option::after{top:16px; right:16px;}
}
/* Option sans résultat : grisée ET non cliquable (identique sur toutes les
   pages qui embarquent ce composant — accueil et balayeuses). */
.guide-option.is-disabled{ opacity:0.32; pointer-events:none; filter:grayscale(0.5); cursor:default; }
.guide-option.is-disabled .opt-count{ color:rgba(250,250,250,0.38); }

/* ---- Écran résultats : grille de cartes + variante sur fond Forge ---- */
.reco-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:start; }
@media (max-width:900px){ .reco-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .reco-cards{ grid-template-columns:1fr; } }
.guide-board .prod-card{ background:rgba(250,250,250,0.04); border-color:var(--ink-10); }
.guide-board .prod-card.is-link:hover{ box-shadow:0 20px 44px rgba(0,0,0,0.35); border-color:rgba(250,250,250,0.38); }
.guide-board .prod-card .pc-pos{ color:var(--ardoise); }
.guide-board .prod-card .pc-name{ color:var(--paper); }
.guide-board .prod-card .pc-spec b{ color:var(--paper); }
.guide-board .prod-card .pc-spec small{ color:rgba(250,250,250,0.62); }
.guide-board .prod-card .pc-chassis span{ color:rgba(250,250,250,0.88); background:rgba(250,250,250,0.06); }
.guide-board .prod-card .pc-foot{ color:var(--paper); border-top-color:var(--ink-10); }
.guide-board .prod-card .pc-foot.muted{ color:rgba(250,250,250,0.5); }
.guide-board .prod-card .pc-img{ background:transparent; }

/* Compteur du récapitulatif : le grand nombre se détache du reste par un
   filet, et « Votre sélection » respire. */
.guide-count{ display:flex; align-items:baseline; gap:12px; padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--ink-10); }
.guide-count .c-num{ font-family:var(--ff-display); font-weight:500; letter-spacing:-0.03em; font-size:42px; line-height:1; color:var(--braise); font-variant-numeric:tabular-nums; }
.guide-count .c-label{ font-family:var(--ff-body); font-size:13px; color:rgba(250,250,250,0.62); letter-spacing:0.01em; }

/* ---- Écran résultats : en-tête ---- */
.reco-results-head{ margin-bottom:30px; }
.reco-results-head h3{ font-family:var(--ff-display); font-weight:500; font-size:clamp(26px,2.6vw,40px); line-height:1.02; letter-spacing:-0.03em; color:var(--paper); margin:0 0 10px; }
.reco-results-head h3 .n{ color:var(--braise); }
.reco-results-head .reco-models{ opacity:.55; font-weight:400; }
.reco-results-head .mention{ font-family:var(--ff-body); font-size:13px; font-style:italic; color:rgba(250,250,250,0.62); margin:0; }
.reco-fallback-msg{ font-family:var(--ff-body); font-size:14px; line-height:1.5; color:var(--paper); margin:0 0 26px; padding:16px 20px; background:rgba(238,39,55,0.10); border-left:2px solid var(--braise); border-radius:0 10px 10px 0; }