/* ================================================================
   commandes.css — Les Lames de la Rose
   Styles spécifiques à la page de commande / configurateur.

   TABLE DES MATIÈRES
   ------------------------------------------------------------------
   1.  Introduction de page
   2.  Layout principal (configurateur + récapitulatif)
   3.  En-tête d'étape (badge numéro + titre)
   4.  État verrouillé des étapes
   5.  Grille d'options (cartes sélectionnables)
   6.  Carte d'option (couteau ou manche)
   7.  Pastille couleur bois
   8.  Étape 3 : gravure (toggle + aperçu + champ texte)
   9.  Récapitulatif sticky (colonne droite)
   10. Modale de confirmation du devis
   11. Media queries (≤ 900px)
================================================================ */


/* ----------------------------------------------------------------
   1. INTRODUCTION DE PAGE
   Texte centré entre la bannière et le configurateur.
---------------------------------------------------------------- */
.order-intro {
  text-align: center;
  padding: 4rem 4rem 2rem;
  border-bottom: 1px solid var(--border);
}

.order-intro-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: rgba(240, 235, 227, 0.55);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.9;
}


/* ----------------------------------------------------------------
   2. LAYOUT PRINCIPAL
   Grille 2 colonnes : étapes (large) | récapitulatif (fixe).
   La colonne récapitulatif est "sticky" : elle reste visible
   pendant que l'utilisateur fait défiler les étapes.
---------------------------------------------------------------- */
.configurator-layout {
  display: grid;
  /* 1fr pour les étapes, 340px fixe pour le récapitulatif */
  grid-template-columns: 1fr 340px;
  gap: 0;
  align-items: start;        /* Les deux colonnes démarrent en haut */
  padding: 0 0 6rem;
}

/* Colonne des étapes */
.configurator-steps {
  border-right: 1px solid var(--border);
}


/* ----------------------------------------------------------------
   3. EN-TÊTE D'ÉTAPE
   Badge numéro doré + label + titre.
---------------------------------------------------------------- */

/* Section d'une étape */
.config-step {
  padding: 4rem;
  border-bottom: 1px solid var(--border);
  transition: opacity 0.4s ease;
}

/* Ligne horizontale : badge | label + titre */
.step-header {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

/* Badge circulaire avec le numéro de l'étape */
.step-badge {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  min-width: 48px;
  padding-top: 0.2rem;
  /* Séparation droite dorée */
  border-right: 1px solid var(--border);
  padding-right: 1.5rem;
  opacity: 0.8;
}

/* Titre de l'étape */
.step-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.3rem;
}

/* Précision affichée à droite du titre de l'étape des manches */
.handle-availability-note {
  max-width: 390px;
  margin: 0 0 0 auto;
  padding-left: 2rem;
  align-self: center;
  color: var(--white-dim);
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.65;
  text-align: right;
}


/* ----------------------------------------------------------------
   4. ÉTAT VERROUILLÉ DES ÉTAPES
   Une étape "locked" est visuellement grisée et ses options
   sont non-cliquables. Le JS retire cette classe quand l'étape
   précédente est complétée.
---------------------------------------------------------------- */

/* Étape verrouillée : opacité réduite + curseur par défaut */
.config-step.locked {
  opacity: 0.4;
  pointer-events: none;     /* Désactive tous les clics dans l'étape */
}

/* Cache les options quand l'étape est verrouillée */
.config-step.locked .options-grid,
.config-step.locked .engraving-content {
  display: none;
}

/* Message "Sélectionnez d'abord…" visible uniquement si verrouillé */
.config-step.locked .step-locked-msg {
  display: flex;             /* Affiché quand locked */
}

/* Cache le message dès que l'étape est déverrouillée */
.config-step:not(.locked) .step-locked-msg {
  display: none;
}

/* Style du message de verrouillage */
.step-locked-msg {
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--white-dim);
  font-style: italic;
  margin-top: 1rem;
}


/* ----------------------------------------------------------------
   5. GRILLE D'OPTIONS
   3 cartes côte à côte pour choisir couteau ou manche.
---------------------------------------------------------------- */
.options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;                  /* Joints très fins entre les cartes */
}


/* ----------------------------------------------------------------
   6. CARTE D'OPTION (couteau ou manche)
   Chaque carte est un <button> pour l'accessibilité clavier.
---------------------------------------------------------------- */
.option-card {
  /* Reset du bouton */
  background: var(--dark-card);
  border: 1px solid var(--border);
  color: var(--white);
  cursor: pointer;
  text-align: left;
  padding: 1.8rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
  /* Transitions sur le fond et la bordure */
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Survol : légère illumination */
.option-card:hover {
  background: #1c1a17;
  border-color: rgba(201, 168, 76, 0.35);
}

/* Carte sélectionnée : bordure dorée pleine + fond légèrement doré */
.option-card.selected {
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.07);
}

/* Reflet doré en coin supérieur gauche sur la carte sélectionnée */
.option-card.selected::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--gold);
}

/* Zone d'illustration SVG du couteau/manche */
.option-illustration {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.option-illustration svg {
  width: 100%;
  height: 100%;
}

/*
 * Les illustrations des choix Couteau et Bijou sont volontairement masquées.
 * Seules les illustrations de la sous-catégorie des manches restent visibles.
 */
#category-options .category-illustration,
#method-options .category-illustration,
#knife-options .option-illustration,
#jewelry-options .option-illustration,
.engraving-preview {
  display: none;
}

/* Photographie détourée du modèle de lame proposé. */
.knife-model-image {
  display: block;
  width: 100%;
  height: 105px;
  margin-bottom: 0.75rem;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.45));
  transition: transform 0.35s ease, filter 0.35s ease;
}

#knife-options .option-card:hover .knife-model-image,
#knife-options .option-card.selected .knife-model-image {
  transform: scale(1.035);
  filter: drop-shadow(0 9px 11px rgba(0, 0, 0, 0.58)) brightness(1.06);
}

/* Nom de l'option */
.option-name {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 0.3rem;
}

/* Description courte */
.option-desc {
  font-size: 0.78rem;
  color: rgba(240, 235, 227, 0.5);
  line-height: 1.7;
  flex-grow: 1;              /* Pousse le prix en bas de la carte */
}

/* Prix de l'option */
.option-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  color: var(--gold);
  font-weight: 300;
  margin-top: 0.5rem;
}

/* Icône de coche (visible uniquement quand .selected) */
.option-check {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 22px;
  height: 22px;
  /* Invisible par défaut */
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Coche visible et à taille normale si sélectionné */
.option-card.selected .option-check {
  opacity: 1;
  transform: scale(1);
}


/* ----------------------------------------------------------------
   7. PASTILLE COULEUR BOIS
   Petit carré coloré représentant la teinte du bois du manche.
---------------------------------------------------------------- */
.wood-swatch {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  border: 1px solid rgba(201, 168, 76, 0.3);
  margin-bottom: 0.3rem;
  flex-shrink: 0;
}

/* Photos réelles des essences, pivotées pour présenter les plaquettes à l'horizontale. */
.handle-photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid rgba(201, 168, 76, 0.22);
  background: #0b0a08;
}

.handle-photo-frame img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%;
  height: 133.334%;
  object-fit: cover;
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 0.45s ease, filter 0.35s ease;
}

.option-card:hover .handle-photo-frame img,
.option-card.selected .handle-photo-frame img {
  transform: translate(-50%, -50%) rotate(90deg) scale(1.035);
  filter: saturate(1.08) contrast(1.04);
}

.option-illustration--custom {
  color: var(--gold);
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.4rem;
}

.custom-quote-badge {
  display: inline-block;
  margin-top: 0.7rem;
  color: var(--gold);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.custom-handle-field {
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(201, 168, 76, 0.4);
  background: rgba(201, 168, 76, 0.045);
}

.custom-handle-field label {
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.custom-handle-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  background: var(--dark-card);
  color: var(--white);
  font: 0.88rem 'Raleway', sans-serif;
  outline: none;
}

.custom-handle-field input:focus {
  border-color: var(--gold);
}

.custom-handle-field p {
  margin: 0;
  color: var(--white-dim);
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.65;
}


/* ----------------------------------------------------------------
   8. ÉTAPE 3 : GRAVURE
---------------------------------------------------------------- */

/* Contenu de l'étape gravure */
.engraving-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Toggle Oui/Non pour la gravure */
.engraving-toggle {
  display: flex;
  gap: 2px;
}

/* Bouton individuel du toggle */
.engrave-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white-dim);
  background: var(--dark-card);
  border: 1px solid var(--border);
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.engrave-btn:hover {
  color: var(--white);
  border-color: rgba(201, 168, 76, 0.35);
}

/* Bouton actif du toggle : bordure dorée + texte blanc */
.engrave-btn.active {
  color: var(--white);
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.07);
}

.engraving-locations {
  padding: 1.25rem;
  border: 1px solid var(--border);
  background: rgba(201, 168, 76, 0.025);
}

.engraving-location-title {
  margin: 0 0 0.85rem;
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.engraving-location-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.engraving-location-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  background: var(--dark-card);
  color: var(--white-dim);
  font-family: 'Raleway', sans-serif;
  cursor: pointer;
  transition: all 0.25s ease;
}

.engraving-location-btn span {
  color: var(--gold);
  font-size: 0.72rem;
}

.engraving-location-btn:hover,
.engraving-location-btn.active {
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.08);
  color: var(--white);
}

.engraving-location-hint {
  margin: 0.75rem 0 0;
  color: var(--white-dim);
  font-size: 0.72rem;
  font-style: italic;
}

/* Tag prix dans le bouton ("Inclus" ou "+ 10 €") */
.engrave-price-tag {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.9rem;
  color: var(--gold);
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
}

/* Zone d'aperçu du couteau complet */
.engraving-preview {
  background: var(--dark-card);
  border: 1px solid var(--border);
  padding: 2rem;
  text-align: center;
}

/* SVG de l'aperçu couteau */
.preview-knife {
  width: 100%;
  max-width: 380px;
  height: auto;
}

/* Légende sous l'aperçu */
.preview-label {
  font-size: 0.72rem;
  color: rgba(240, 235, 227, 0.35);
  font-style: italic;
  margin-top: 0.8rem;
  font-family: 'Cormorant Garamond', serif;
}

/* Champ texte de la gravure */
.engraving-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Label du champ avec indication de limite */
.engraving-field label {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

/* "max. 20 caractères" en gris */
.engraving-field label span {
  color: var(--white-dim);
  font-size: 0.6rem;
  text-transform: none;
  letter-spacing: 0;
  font-family: 'Raleway', sans-serif;
}

/* Input de la gravure */
.engraving-field input {
  background: var(--dark-card);
  border: 1px solid var(--border);
  color: var(--white);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  padding: 0.8rem 1rem;
  outline: none;
  transition: border-color 0.3s;
  letter-spacing: 0.06em;
}

.engraving-field input:focus {
  border-color: var(--gold);
}

.engraving-field input::placeholder {
  color: rgba(158, 150, 137, 0.35);
  font-style: italic;
}

/* Note explicative sous le champ */
.engraving-hint {
  font-size: 0.76rem;
  color: rgba(240, 235, 227, 0.4);
  font-style: italic;
  line-height: 1.6;
}


/* ----------------------------------------------------------------
   9. RÉCAPITULATIF STICKY (colonne droite)
   Reste visible pendant le scroll grâce à position: sticky.
---------------------------------------------------------------- */
.order-summary {
  /* sticky : reste en vue quand on scrolle les étapes */
  position: sticky;
  top: 90px;                 /* 70px (nav) + 20px d'air */
  padding: 0;
  align-self: start;
}

/* Panneau intérieur du récapitulatif */
.summary-inner {
  padding: 2.5rem;
  background: var(--dark-card);
  border-left: 1px solid var(--border);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Titre "Récapitulatif" */
.summary-title {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.2rem;
}

/* Séparateur doré du récapitulatif */
.summary-divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 1.5rem;
}

/* Liste des lignes de récapitulatif */
.summary-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}

/* Ligne individuelle : label | valeur | prix */
.summary-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5rem;
  align-items: baseline;
  /* Animation d'apparition */
  animation: fadeUp 0.35s ease forwards;
}

/* Intitulé de la ligne (ex: "Couteau") */
.summary-line-label {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white-dim);
}

/* Nom du choix (ex: "Couteau Boucher") */
.summary-line-value {
  font-size: 0.82rem;
  color: var(--white);
  text-align: right;
}

/* Prix de la ligne */
.summary-line-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  color: var(--gold);
  font-weight: 300;
  min-width: 50px;
  text-align: right;
}

/* Message vide avant toute sélection */
.summary-empty {
  font-size: 0.8rem;
  color: rgba(158, 150, 137, 0.45);
  font-style: italic;
  line-height: 1.8;
  text-align: center;
  padding: 1.5rem 0;
  flex-grow: 1;
}

/* Zone du total */
.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.8rem;
  animation: fadeUp 0.35s ease forwards;
}

.summary-total-label {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white-dim);
}

/* Montant total en grand */
.summary-total-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
}

/* Bouton "Demander le devis" */
.btn-devis {
  width: 100%;
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--gold);
  border: none;
  padding: 1rem;
  cursor: pointer;
  transition: background 0.3s ease, opacity 0.3s ease;
  margin-top: auto;          /* Pousse le bouton en bas du panneau */
}

.btn-devis:hover:not(:disabled) {
  background: var(--gold-light);
}

/* Bouton désactivé : grisé et non-cliquable */
.btn-devis:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: var(--gold);
}


/* ----------------------------------------------------------------
   10. MODALE DE CONFIRMATION DU DEVIS
   Overlay sombre + fenêtre centrée.
---------------------------------------------------------------- */

/* Fond sombre de la modale (couvre toute la page) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 8, 0.85);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  /* Invisible par défaut */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(6px);
}

/* Modale visible : classe ajoutée par le JS */
.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Fenêtre de la modale */
.modal {
  background: var(--dark-card);
  border: 1px solid var(--border);
  padding: 3rem;
  max-width: 560px;
  width: 100%;
  position: relative;
  /* Glisse depuis le bas au déclenchement */
  transform: translateY(20px);
  transition: transform 0.35s ease;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-overlay.open .modal {
  transform: translateY(0);
}

/* Bouton × de fermeture */
.modal-close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
  padding: 0.3rem;
}

.modal-close:hover {
  opacity: 1;
}

/* En-tête de la modale */
.modal-header h2 {
  font-family: 'Cinzel', serif;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.4rem;
}

/* Récapitulatif dans la modale */
.modal-recap {
  background: rgba(201, 168, 76, 0.05);
  border: 1px solid var(--border);
  padding: 1.2rem 1.5rem;
  margin-bottom: 2rem;
  font-size: 0.84rem;
  color: rgba(240, 235, 227, 0.7);
  line-height: 1.9;
}

/* Ligne de récap dans la modale */
.modal-recap-line {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0;
}

.modal-recap-line span:first-child {
  color: var(--white-dim);
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  align-self: center;
}

.modal-recap-line span:last-child {
  color: var(--white);
}

/* Total dans le récap modale */
.modal-recap-total {
  border-top: 1px solid var(--border);
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  display: flex;
  justify-content: space-between;
}

.modal-recap-total strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  color: var(--gold);
  font-weight: 300;
}

/* Formulaire dans la modale */
.modal-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.modal-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Réutilise les styles .form-group de pages.css */

/* Bouton de soumission dans la modale */
.modal-submit {
  width: 100%;
  padding: 1rem;
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  margin-top: 0.5rem;
}

/* Étoile rouge pour champ obligatoire */
.required-star {
  color: #c0392b;
  margin-left: 2px;
}

/* Styles de champ (dupliqués depuis pages.css pour la modale) */
.modal-form .form-group label {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.modal-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.modal-form input,
.modal-form textarea {
  background: rgba(10, 9, 8, 0.5);
  border: 1px solid var(--border);
  color: var(--white);
  font-family: 'Raleway', sans-serif;
  font-size: 0.88rem;
  padding: 0.8rem 1rem;
  outline: none;
  transition: border-color 0.3s;
  width: 100%;
}

.modal-form input:focus,
.modal-form textarea:focus {
  border-color: var(--gold);
}

.modal-form input::placeholder,
.modal-form textarea::placeholder {
  color: rgba(158, 150, 137, 0.4);
}

.modal-form .cgv-consent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--white-dim);
  font-family: 'Raleway', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0;
  line-height: 1.6;
  text-transform: none;
  cursor: pointer;
}

.modal-form .cgv-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 0.15rem;
  padding: 0;
  accent-color: var(--gold);
  cursor: pointer;
}

.modal-form .cgv-consent input[type="checkbox"].error {
  outline: 1px solid #c0392b;
  outline-offset: 2px;
}

.cgv-consent a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.modal-form input.error,
.modal-form textarea.error {
  border-color: #c0392b;
}

.modal-form textarea {
  resize: vertical;
  min-height: 80px;
}

/* Message de succès après envoi */
.modal-success {
  text-align: center;
  padding: 2rem 1rem;
}

.modal-success svg {
  margin-bottom: 1.5rem;
}

.modal-success h3 {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.modal-success p {
  font-size: 0.85rem;
  color: rgba(240, 235, 227, 0.6);
  line-height: 1.85;
}


/* ----------------------------------------------------------------
   11. MEDIA QUERIES (≤ 900px)
---------------------------------------------------------------- */
@media (max-width: 900px) {

  #step-handle .step-header {
    flex-wrap: wrap;
  }

  .handle-availability-note {
    flex-basis: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 0 4.5rem;
    text-align: left;
  }

  /* Layout en colonne unique : récap passe sous les étapes */
  .configurator-layout {
    grid-template-columns: 1fr;
  }

  /* Le récap n'est plus sticky sur mobile */
  .order-summary {
    position: static;
    border-top: 1px solid var(--border);
  }

  .summary-inner {
    border-left: none;
  }

  .config-step {
    padding: 2.5rem 1.5rem;
  }

  .order-intro {
    padding: 2.5rem 1.5rem 1.5rem;
  }

  /* Options en 1 colonne sur très petit écran */
  .options-grid {
    grid-template-columns: 1fr;
  }

  /* Formulaire modale en colonne */
  .modal-form-row {
    grid-template-columns: 1fr;
  }

  .modal {
    padding: 2rem 1.5rem;
  }
}


/* ----------------------------------------------------------------
   11B. ÉTAPE 0 — CARTES DE CATÉGORIE (Couteau / Bijou)
---------------------------------------------------------------- */
.category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.category-card {
  background: var(--dark-card);
  border: 1px solid var(--border);
  color: var(--white);
  cursor: pointer;
  text-align: left;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.category-card:hover {
  background: #1c1a17;
  border-color: rgba(201, 168, 76, 0.35);
}

.category-card.selected {
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.07);
}

/* Filet doré gauche sur la carte sélectionnée */
.category-card.selected::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: var(--gold);
}

.category-card .category-illustration {
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.category-card .category-illustration svg {
  width: 100%;
  height: 100%;
}

.category-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex-grow: 1;
}

.category-name {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.category-desc {
  font-size: 0.82rem;
  color: rgba(240, 235, 227, 0.5);
  line-height: 1.75;
  flex-grow: 1;
}

/* Lien "Configurer →" */
.category-cta {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.8rem;
  transition: gap 0.3s;
}

.cta-arrow {
  transition: transform 0.3s;
  display: inline-block;
}

.category-card:hover .cta-arrow {
  transform: translateX(4px);
}

/* ----------------------------------------------------------------
   11C. RÉCAP — ligne style bijou
---------------------------------------------------------------- */
.summary-line--style {
  grid-template-columns: auto 1fr;
  align-items: start;
}

.summary-line-value--italic {
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.88rem;
  color: rgba(240, 235, 227, 0.6);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----------------------------------------------------------------
   11D. PARCOURS BIJOU — étape style
---------------------------------------------------------------- */
.style-content {
  display: flex;
  flex-direction: column;
}

.accessory-gallery-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.accessory-gallery-title {
  grid-column: 1 / -1;
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.accessory-gallery-item {
  display: none;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--dark-card);
}

.accessory-gallery-item.active {
  display: block;
}

.accessory-gallery-image-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}

.accessory-gallery-item img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.accessory-gallery-image-button:hover img,
.accessory-gallery-image-button:focus-visible img {
  transform: scale(1.035);
  filter: brightness(1.08);
}

.accessory-gallery-item figcaption {
  padding: 0.8rem 1rem;
  color: var(--white-dim);
  font-size: 0.78rem;
  font-style: italic;
}

.accessory-gallery-link {
  grid-column: 1 / -1;
  justify-self: start;
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.accessory-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  background: rgba(5, 5, 4, 0.94);
  backdrop-filter: blur(5px);
}

.accessory-lightbox.open {
  display: flex;
}

.accessory-lightbox-content {
  max-width: min(1100px, 90vw);
  max-height: 88vh;
  margin: 0;
  text-align: center;
}

.accessory-lightbox-content img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  margin: 0 auto;
  object-fit: contain;
  border: 1px solid var(--border);
}

.accessory-lightbox-content figcaption {
  padding-top: 1rem;
  color: var(--white-dim);
  font-size: 0.85rem;
}

.accessory-lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  border: 0;
  background: none;
  color: var(--gold);
  font-size: 2.4rem;
  font-weight: 200;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 720px) {
  .accessory-gallery-preview {
    grid-template-columns: 1fr;
  }

  .accessory-lightbox {
    padding: 1.25rem;
  }
}

.style-tags-label {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.style-tags-label span {
  color: var(--white-dim);
  font-size: 0.6rem;
  letter-spacing: 0;
  text-transform: none;
  font-family: 'Raleway', sans-serif;
}

.style-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.style-tag {
  font-family: 'Raleway', sans-serif;
  font-size: 0.78rem;
  color: var(--white-dim);
  background: transparent;
  border: 1px solid var(--border);
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: all 0.25s ease;
}

.style-tag:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.05);
}

.style-tag.used {
  color: var(--gold);
  border-color: rgba(201, 168, 76, 0.4);
  background: rgba(201, 168, 76, 0.08);
  opacity: 0.65;
}

.style-content textarea {
  background: var(--dark-card);
  border: 1px solid var(--border);
  color: var(--white);
  font-family: 'Raleway', sans-serif;
  font-size: 0.88rem;
  padding: 1rem;
  outline: none;
  transition: border-color 0.3s;
  resize: vertical;
  min-height: 130px;
  line-height: 1.7;
  width: 100%;
  box-sizing: border-box;
}

.style-content textarea:focus { border-color: var(--gold); }
.style-content textarea::placeholder {
  color: rgba(158, 150, 137, 0.4);
  font-style: italic;
}

.style-content .form-group label {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.5rem;
}

.style-char-count {
  font-size: 0.72rem;
  color: rgba(158, 150, 137, 0.4);
  text-align: right;
  margin-top: 0.4rem;
  font-style: italic;
}

.style-char-count.near-limit { color: var(--gold); }

.style-note {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.8rem;
  color: rgba(240, 235, 227, 0.4);
  font-style: italic;
  line-height: 1.7;
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--border);
  background: rgba(201, 168, 76, 0.03);
}

/* 2 colonnes pour les options bijou */
.options-grid--2col {
  grid-template-columns: 1fr 1fr !important;
}

/* ── Mobile : category-grid en colonne ── */
@media (max-width: 900px) {
  .category-grid       { grid-template-columns: 1fr; }
  .options-grid--2col  { grid-template-columns: 1fr !important; }
}

/* ----------------------------------------------------------------
   BADGES MÉTHODE DE FABRICATION
   Petites étiquettes affichées sous la description des cartes
   "Enlèvement de matière" et "Forgé" pour résumer leurs
   caractéristiques clés (Précision, Unique, Artisanal…).
---------------------------------------------------------------- */

/* Conteneur des badges */
.method-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
  margin-bottom: 0.4rem;
}

/* Badge individuel */
.method-badge {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(201, 168, 76, 0.3);
  padding: 0.25rem 0.6rem;
  background: rgba(201, 168, 76, 0.05);
}

/* Badge sur carte sélectionnée : contraste renforcé */
.category-card.selected .method-badge {
  border-color: rgba(201, 168, 76, 0.55);
  background: rgba(201, 168, 76, 0.1);
}