/* ============================================================
   RÉPARATION — Design accordéon complet
   Template: template-reparation.php
   ============================================================ */

/* ====== HERO ====== */
.phs-repair-hero {
  background: #111;
  padding: 56px 24px 48px;
  text-align: center;
}
.phs-repair-hero-inner {
  max-width: 560px;
  margin: 0 auto;
}
.phs-repair-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(48, 209, 88, 0.12);
  color: #34d058;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.phs-repair-hero h1 {
  color: white;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 10px;
}
.phs-repair-hero p {
  color: rgba(255,255,255,0.45);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* ====== FORM SECTION ====== */
.phs-repair-form-section {
  background: #f7f7f8;
  padding: 40px 24px 60px;
}
.phs-repair-form-wrap {
  max-width: 780px;
  margin: 0 auto;
}

/* ====== REASSURANCE ====== */
.phs-repair-reassurance {
  padding: 56px 24px;
  background: white;
}
.phs-repair-reassurance-inner {
  max-width: 700px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}
.phs-rr-icon {
  color: #0071e3;
  margin-bottom: 10px;
}
.phs-repair-reassurance-item h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 4px;
}
.phs-repair-reassurance-item p {
  font-size: 0.82rem;
  color: #888;
  margin: 0;
}

/* ============================================================
   GRS PLUGIN OVERRIDES
   ============================================================ */

/* Container principal — transparent */
.grs-reparation-container {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Cacher le titre du plugin (le hero le remplace) */
.grs-form-title {
  display: none !important;
}

/* Cacher les originaux immédiatement pour éviter le flash */
.grs-reparation-container > .grs-form-steps,
.grs-reparation-container > .grs-form-container {
  display: none !important;
}

/* ====== ACCORDÉON (généré par reparation.js) ====== */
.grs-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Panel = 1 bloc = step header + contenu */
.grs-acc-panel {
  background: white;
  border: 1.5px solid #e2e4e7;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
.grs-acc-panel.active {
  border-color: #0071e3;
  box-shadow: 0 2px 16px rgba(0,113,227,0.07);
}
.grs-acc-panel:not(.active) {
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.grs-acc-panel:not(.active):hover {
  opacity: 0.75;
  border-color: #bbb;
}

/* Step header dans le panel — FORCE row (le plugin met column) */
.grs-accordion .grs-acc-panel .grs-step,
.grs-acc-panel .grs-step {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  width: 100% !important;
  cursor: default;
}

/* Supprimer pseudo-éléments du plugin (les lignes entre steps) */
.grs-accordion .grs-step::before,
.grs-accordion .grs-step::after,
.grs-accordion .grs-step:not(:last-child)::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Séparateur quand panel ouvert */
.grs-acc-panel.active .grs-step {
  border-bottom: 1px solid #eee !important;
}

/* Numéro de l'étape */
.grs-step-number {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  transition: all 0.3s ease !important;
  background: #f0f0f2 !important;
  border: 2px solid #e2e4e7 !important;
  color: #bbb !important;
}
.grs-acc-panel.active .grs-step-number {
  background: #0071e3 !important;
  border-color: #0071e3 !important;
  color: white !important;
}
/* Step complété (le plugin met .completed ou on détecte via JS) */
.grs-acc-panel.completed .grs-step-number {
  background: #34c759 !important;
  border-color: #34c759 !important;
  color: white !important;
}

/* Label */
.grs-step-label {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: #bbb !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.grs-acc-panel.active .grs-step-label { color: #1d1d1f !important; }
.grs-acc-panel.completed .grs-step-label { color: #666 !important; }

/* Body (contenu dépliable) */
.grs-acc-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 20px;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease 0.05s,
              padding 0.3s ease;
}
.grs-acc-body.open {
  opacity: 1;
  padding: 4px 20px 24px;
  overflow: visible;
  max-height: none !important;
}

/* Form-step à l'intérieur — pas de cadre supplémentaire */
.grs-acc-body .grs-form-step {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: block !important;
}

/* Titres dans les étapes */
.grs-acc-body .grs-form-step h3 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #1d1d1f !important;
  text-align: center !important;
  margin: 8px 0 20px !important;
}

/* ====== CARTES MARQUES ====== */
.grs-marques-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)) !important;
  gap: 10px !important;
}
.grs-marque-card {
  background: #f8f9fa !important;
  border: 2px solid transparent !important;
  border-radius: 12px !important;
  padding: 16px 8px 12px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
.grs-marque-card:hover {
  border-color: #0071e3 !important;
  background: white !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}
.grs-marque-card.selected {
  border-color: #0071e3 !important;
  background: #f0f7ff !important;
  box-shadow: 0 0 0 3px rgba(0,113,227,0.08) !important;
}
.grs-marque-card .grs-marque-logo img,
.grs-marque-card img {
  max-height: 36px !important;
  width: auto !important;
  max-width: 56px !important;
  object-fit: contain !important;
  margin: 0 !important;
}
.grs-marque-name {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #555 !important;
}

/* ====== MODÈLES ====== */
.grs-modeles-container { margin: 0 !important; }
.grs-categorie-section { margin-bottom: 16px !important; }
.grs-categorie-title {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #888 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 0 10px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid #eee !important;
}
.grs-modeles-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 10px !important;
}
.grs-modele-card {
  background: #f8f9fa !important;
  border: 2px solid transparent !important;
  border-radius: 10px !important;
  padding: 12px 10px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.grs-modele-card:hover {
  border-color: #0071e3 !important;
  background: white !important;
}
.grs-modele-card.selected {
  border-color: #0071e3 !important;
  background: #f0f7ff !important;
}
.grs-modele-name {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #333 !important;
}
.grs-modele-image img {
  max-height: 50px !important;
  width: auto !important;
  object-fit: contain !important;
  margin-bottom: 6px !important;
}

/* ====== ÉTAPE 3 — NOUVEAU LAYOUT ====== */
/* Ordre: Appareil → Couleurs → Pannes (2 cols) → Total */

/* Forcer le layout en colonne (supprimer la grille 2 colonnes) */
.grs-options-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Couleurs en PREMIER (avant les pannes via order) */
.grs-couleur-container {
  order: -1 !important;
  margin-bottom: 20px !important;
}
.grs-couleur-container h4 {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #888 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 10px !important;
}
.grs-couleurs-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 !important;
  align-items: center !important;
}
.grs-couleur-item {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  padding: 8px 14px !important;
  border: 2px solid #e2e4e7 !important;
  border-radius: 50px !important;
  transition: all 0.2s !important;
  background: white !important;
  width: auto !important;
  float: none !important;
}
.grs-couleur-item:hover { border-color: #bbb !important; }
.grs-couleur-item.selected {
  border-color: #0071e3 !important;
  background: #f0f7ff !important;
}
.grs-couleur-circle {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(0,0,0,0.1) !important;
  flex-shrink: 0 !important;
}
.grs-couleur-name {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #555 !important;
}
.grs-couleur-item.selected .grs-couleur-name { color: #0071e3 !important; }

/* Force inline layout — override tout ce que le plugin met */
.grs-couleur-container .grs-couleurs-list,
.grs-couleur-container > div {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.grs-couleur-container .grs-couleurs-list > *,
.grs-couleur-container > div > * {
  display: inline-flex !important;
  width: auto !important;
  flex: none !important;
}

/* Pannes en grille 2 colonnes */
.grs-pannes-container h4 {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #888 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 10px !important;
}
.grs-pannes-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}
.grs-panne-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  background: #f8f9fa !important;
  border: 2px solid transparent !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.grs-panne-item:hover {
  border-color: #0071e3 !important;
  background: white !important;
}
.grs-panne-item.selected {
  border-color: #0071e3 !important;
  background: #f0f7ff !important;
}
.grs-panne-checkbox {
  width: 18px !important;
  height: 18px !important;
  accent-color: #0071e3 !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}
.grs-panne-info {
  flex: 1 !important;
  min-width: 0 !important;
}
.grs-panne-name {
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #333 !important;
  cursor: pointer !important;
  display: block !important;
}
.grs-panne-description {
  font-size: 0.72rem !important;
  color: #999 !important;
  margin-top: 2px !important;
}
.grs-panne-price {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #0071e3 !important;
  white-space: nowrap !important;
  display: block !important;
  margin-top: 4px !important;
}

/* ====== SELECTED DEVICE ====== */
.grs-selected-device {
  background: #f0f7ff !important;
  border: 1px solid rgba(0,113,227,0.12) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
}
.grs-selected-device h4 {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #0071e3 !important;
  margin: 0 !important;
}

/* ====== TOTAL ====== */
.grs-total-container {
  margin-top: 24px !important;
  padding: 18px 20px !important;
  background: #f8f9fa !important;
  border: 1px solid #e2e4e7 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.grs-total-price h4 {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: #333 !important;
  margin: 0 !important;
}
#grs-price-total {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: #0071e3 !important;
}

/* ====== BOUTONS ====== */
.grs-back-button { margin-bottom: 16px !important; }
.grs-btn-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 8px 16px !important;
  background: #f0f0f2 !important;
  color: #555 !important;
  border: 1px solid #e2e4e7 !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}
.grs-btn-back:hover { background: #e2e4e7 !important; color: #333 !important; }

.grs-btn-primary,
#grs-submit-repair {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 14px 32px !important;
  background: #0071e3 !important;
  color: white !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.grs-btn-primary:hover,
#grs-submit-repair:hover {
  background: #005bb5 !important;
  box-shadow: 0 4px 12px rgba(0,113,227,0.25) !important;
}
.grs-btn-primary:disabled,
#grs-submit-repair:disabled {
  background: #ccc !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Loading spinner */
.grs-loading {
  text-align: center !important;
  padding: 32px !important;
  color: #999 !important;
}
.grs-spinner {
  width: 28px !important;
  height: 28px !important;
  border: 3px solid #e2e4e7 !important;
  border-top-color: #0071e3 !important;
  border-radius: 50% !important;
  animation: grs-spin 0.6s linear infinite !important;
  margin: 0 auto 10px !important;
}
@keyframes grs-spin { to { transform: rotate(360deg); } }

/* Options container — override supprimé, géré dans la section ÉTAPE 3 */

/* ====== FALLBACK — si JS ne charge pas, garder le design original lisible ====== */
.grs-form-steps {
  display: flex !important;
  gap: 0 !important;
  margin-bottom: 20px !important;
  background: white !important;
  border-radius: 12px !important;
  border: 1px solid #e2e4e7 !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.grs-step {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px !important;
  border-right: 1px solid #e2e4e7 !important;
  background: transparent !important;
  opacity: 0.5 !important;
  transition: all 0.3s !important;
}
.grs-step:last-child { border-right: none !important; }
.grs-step.active { opacity: 1 !important; background: #f0f7ff !important; }
.grs-step::before, .grs-step::after { display: none !important; }

.grs-form-step {
  background: white !important;
  border: 1px solid #e2e4e7 !important;
  border-radius: 12px !important;
  padding: 24px !important;
  margin-bottom: 16px !important;
}

/* Quand l'accordéon est créé par JS, cacher les originaux */
.grs-accordion ~ .grs-form-steps,
.grs-accordion ~ .grs-form-container {
  display: none !important;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 768px) {
  .phs-repair-hero { padding: 44px 20px 36px; }
  .phs-repair-hero h1 { font-size: 1.4rem; }
  .phs-repair-form-section { padding: 24px 16px 40px; }
  .phs-repair-reassurance-inner { grid-template-columns: 1fr; gap: 20px; }
  .grs-marques-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .grs-modeles-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .grs-pannes-list { grid-template-columns: 1fr !important; }
  .grs-acc-body.open { padding: 4px 16px 20px; }
}
@media (max-width: 480px) {
  .grs-marques-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .grs-acc-panel .grs-step { padding: 14px 16px !important; }
  .grs-step-number { width: 34px !important; height: 34px !important; min-width: 34px !important; font-size: 13px !important; }
}