/* ============================================================
 * Simulateur Carte Grise — Styles inspirés service-public.fr
 * ============================================================ */

/* ── Variables ── */
#scg-app {
  --scg-blue:       #000091;
  --scg-blue-light: #e8edff;
  --scg-blue-dark:  #00006e;
  --scg-green:      #18753c;
  --scg-green-bg:   #b8fec9;
  --scg-red:        #ce0500;
  --scg-red-bg:     #ffe9e9;
  --scg-grey:       #6a6a6a;
  --scg-grey-light: #f0f0f0;
  --scg-border:     #cecece;
  --scg-text:       #1e1e1e;
  --scg-radius:     4px;
  --scg-font:       'Marianne', 'Arial', sans-serif;
}

/* ── Container ── */
#scg-app {
  font-family:    var(--scg-font);
  color:          var(--scg-text);
  max-width:      760px;
  margin:         0 auto;
  padding:        0;
  font-size:      16px;
  line-height:    1.5;
}

/* ── Header ── */
.scg-header {
  background:    var(--scg-blue);
  color:         #fff;
  padding:       24px 28px;
  border-radius: var(--scg-radius) var(--scg-radius) 0 0;
}

.scg-title {
  font-size:   1.35rem;
  font-weight: 700;
  margin:      0 0 8px 0;
  line-height: 1.3;
}

.scg-intro {
  margin:    0;
  font-size: 0.92rem;
  opacity:   0.9;
}

/* ── Formulaire ── */
#scg-form {
  background:    #fff;
  border:        1px solid var(--scg-border);
  border-top:    none;
  padding:       24px 28px;
  border-radius: 0 0 var(--scg-radius) var(--scg-radius);
}

/* ── Champ ── */
.scg-field {
  margin-bottom: 20px;
}

.scg-field:last-child {
  margin-bottom: 0;
}

.scg-label {
  display:       block;
  font-weight:   600;
  font-size:     0.95rem;
  margin-bottom: 6px;
  color:         var(--scg-text);
}

.scg-optional {
  font-weight: 400;
  color:       var(--scg-grey);
  font-size:   0.88rem;
}

.scg-hint {
  margin:    4px 0 0 0;
  font-size: 0.82rem;
  color:     var(--scg-grey);
}

/* ── Select ── */
.scg-select-wrap {
  position: relative;
  display:  inline-block;
  width:    100%;
  max-width: 480px;
}

.scg-select-wrap::after {
  content:        '▾';
  position:       absolute;
  right:          12px;
  top:            50%;
  transform:      translateY(-50%);
  pointer-events: none;
  color:          var(--scg-blue);
  font-size:      1rem;
}

.scg-select {
  appearance:    none;
  -webkit-appearance: none;
  width:         100%;
  padding:       10px 40px 10px 12px;
  border:        2px solid var(--scg-border);
  border-radius: var(--scg-radius);
  font-size:     0.95rem;
  font-family:   var(--scg-font);
  color:         var(--scg-text);
  background:    #fff;
  cursor:        pointer;
  transition:    border-color 0.15s;
}

.scg-select:focus {
  outline:      none;
  border-color: var(--scg-blue);
  box-shadow:   0 0 0 3px rgba(0, 0, 145, 0.15);
}

/* ── Input ── */
.scg-input-wrap {
  display:     flex;
  align-items: center;
  gap:         8px;
  max-width:   300px;
}

.scg-input {
  width:         100%;
  padding:       10px 12px;
  border:        2px solid var(--scg-border);
  border-radius: var(--scg-radius);
  font-size:     0.95rem;
  font-family:   var(--scg-font);
  color:         var(--scg-text);
  transition:    border-color 0.15s;
}

.scg-input:focus {
  outline:      none;
  border-color: var(--scg-blue);
  box-shadow:   0 0 0 3px rgba(0, 0, 145, 0.15);
}

.scg-unit {
  font-size:   0.9rem;
  color:       var(--scg-grey);
  white-space: nowrap;
  font-weight: 500;
}

/* ── Bouton Calculer ── */
.scg-btn {
  display:       inline-block;
  padding:       12px 28px;
  background:    var(--scg-blue);
  color:         #fff;
  border:        none;
  border-radius: var(--scg-radius);
  font-size:     1rem;
  font-weight:   700;
  font-family:   var(--scg-font);
  cursor:        pointer;
  transition:    background 0.15s;
  margin-top:    8px;
}

.scg-btn:hover {
  background: var(--scg-blue-dark);
}

.scg-btn:focus {
  outline:    none;
  box-shadow: 0 0 0 3px rgba(0, 0, 145, 0.3);
}

/* ── Séparateur entre champs ── */
#scg-form .scg-field + .scg-field:not(.scg-hidden) {
  padding-top:  20px;
  border-top:   1px solid var(--scg-grey-light);
}

/* ── Résultat ── */
#scg-result {
  margin-top: 24px;
}

.scg-result-box {
  background:    #fff;
  border:        2px solid var(--scg-blue);
  border-radius: var(--scg-radius);
  overflow:      hidden;
}

.scg-result-title {
  background:  var(--scg-blue);
  color:       #fff;
  margin:      0;
  padding:     14px 20px;
  font-size:   1.05rem;
  font-weight: 700;
}

/* ── Tableau résultat ── */
.scg-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.92rem;
}

.scg-table thead tr {
  background:  var(--scg-blue-light);
}

.scg-table th {
  padding:    10px 16px;
  text-align: left;
  font-weight: 700;
  font-size:   0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color:       var(--scg-blue);
}

.scg-table tbody tr:nth-child(even) {
  background: #f9f9f9;
}

.scg-table tbody tr:hover {
  background: var(--scg-blue-light);
}

.scg-td-code {
  padding:     10px 16px;
  font-weight: 700;
  color:       var(--scg-blue);
  white-space: nowrap;
  width:       60px;
}

.scg-td-label {
  padding:   10px 16px;
  color:     var(--scg-text);
}

.scg-td-label small {
  color:     var(--scg-grey);
  font-size: 0.82rem;
}

.scg-td-montant {
  padding:    10px 16px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.scg-total-row {
  background:  var(--scg-blue-light) !important;
  border-top:  2px solid var(--scg-blue);
}

.scg-total-row td {
  padding:   12px 16px;
  font-size: 1.05rem;
}

.scg-total-row .scg-td-montant {
  font-size:   1.15rem;
  font-weight: 700;
  color:       var(--scg-blue);
}

/* ── Gratuit ── */
.scg-gratuit {
  padding:    32px;
  text-align: center;
  border:     2px solid var(--scg-green) !important;
}

.scg-result-icon {
  font-size:   2.5rem;
  color:       var(--scg-green);
  margin-bottom: 12px;
}

.scg-gratuit h3 {
  color:  var(--scg-green);
  margin: 0 0 8px;
}

/* ── Disclaimer résultat ── */
.scg-disclaimer-result {
  margin:    0;
  padding:   12px 16px;
  font-size: 0.82rem;
  color:     var(--scg-grey);
  background: #fafafa;
  border-top: 1px solid var(--scg-border);
}

/* ── Erreur ── */
.scg-error-box {
  margin-top:    16px;
  padding:       12px 16px;
  background:    var(--scg-red-bg);
  border:        1px solid var(--scg-red);
  border-radius: var(--scg-radius);
  color:         var(--scg-red);
  font-size:     0.92rem;
}

/* ── Utilitaire ── */
.scg-hidden {
  display: none !important;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .scg-header,
  #scg-form {
    padding: 16px;
  }

  .scg-title {
    font-size: 1.1rem;
  }

  .scg-select-wrap,
  .scg-input-wrap {
    max-width: 100%;
  }

  .scg-table th,
  .scg-td-code,
  .scg-td-label,
  .scg-td-montant {
    padding: 8px 10px;
    font-size: 0.82rem;
  }

  .scg-table th:first-child,
  .scg-td-code {
    display: none;
  }
}

/* ── Radio buttons ── */
.scg-radio-group {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-top:     4px;
}

.scg-radio-label {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  cursor:      pointer;
  font-size:   0.95rem;
  line-height: 1.4;
}

.scg-radio-label input[type="radio"] {
  margin-top:  3px;
  flex-shrink: 0;
  accent-color: var(--scg-blue);
  width:  18px;
  height: 18px;
  cursor: pointer;
}

.scg-radio-label:hover {
  color: var(--scg-blue);
}

/* ── Fix couleur texte inputs (override thème) ── */
#scg-app .scg-input,
#scg-app .scg-select,
#scg-app input[type="number"],
#scg-app input[type="date"],
#scg-app input[type="text"] {
  color:            #1e1e1e !important;
  background-color: #ffffff !important;
  -webkit-text-fill-color: #1e1e1e !important;
}

#scg-app .scg-input::placeholder {
  color: #929292 !important;
  -webkit-text-fill-color: #929292 !important;
}

/* ── Montant zéro affiché en gris ── */
.scg-zero {
  color: var(--scg-grey) !important;
}

/* ── Date input ── */
#scg-app input[type="date"] {
  max-width:   200px;
  padding:     10px 12px;
  font-size:   0.95rem;
  font-family: var(--scg-font);
  border:      2px solid var(--scg-border);
  border-radius: var(--scg-radius);
  cursor: pointer;
}

#scg-app input[type="date"]:focus {
  outline:      none;
  border-color: var(--scg-blue);
  box-shadow:   0 0 0 3px rgba(0,0,145,0.15);
}

/* ── Radio inline (Oui / Non sur une ligne) ── */
.scg-radio-inline {
  flex-direction: row !important;
  gap: 24px !important;
}

/* ── Ligne commission ── */
.scg-row-comm td {
  background:  #fff8e1 !important;
  font-weight: 600;
}
.scg-row-comm .scg-td-code {
  color: #b8860b !important;
}
.scg-row-comm .scg-td-montant {
  color: #b8860b !important;
}

/* ── Bouton Ajouter au panier ── */
.scg-cart-wrap {
  margin-top: 16px;
  padding:    16px;
  background: #f0f5ff;
  border:     1px solid var(--scg-blue);
  border-radius: var(--scg-radius);
  display:    flex;
  align-items: center;
  gap:        16px;
  flex-wrap:  wrap;
}

.scg-btn-cart {
  background: var(--scg-green) !important;
  font-size:  1rem;
}

.scg-btn-cart:hover {
  background: #145c2f !important;
}

.scg-cart-success {
  color:     var(--scg-green);
  font-size: 0.92rem;
}

.scg-cart-success a {
  color:           var(--scg-green);
  font-weight:     600;
  text-decoration: underline;
}

.scg-cart-error {
  color:     var(--scg-red);
  font-size: 0.92rem;
}