:root{
    /* Palette conservée */
    --bg:#c6ede3;
    --card:#111827;
    --muted:#94a3b8;
    --text:#e5e7eb;
    --accent:#0fd3a0;
    --highlight:#eab308;
  }
  
  /* Base */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    color:var(--text);
    background:var(--bg);
  }
  
  /* Conteneur */
  .container{
    max-width:980px;
    margin:0 auto;
    padding:24px 16px;
  }
  
  /* En-tête */
  header h1{margin:0 0 6px; color:#002d82}
  header p{margin:0 0 16px; color:#234a92}
  
  /* Cartes (sections bleues) */
  section{
    background:#0033a0;              /* bleu principal */
    border:2px solid var(--accent);   /* vert accentué */
    border-radius:12px;
    padding:14px 14px 10px;
    margin-bottom:14px;
  }
  
  /* 1) Facturation: compacter la zone (supprime l’espace vide) */
  section.billing{
    padding:10px 14px;               /* moins de padding vertical */
    margin-bottom:12px;
  }
  .billing fieldset{
    border:none; padding:0; margin:0; /* supprime marges par défaut */
    display:flex;
    align-items:center;
    gap:10px 14px;
    flex-wrap:wrap;                  /* évite les retours trop hauts */
  }
  .billing legend{
    margin:0; padding:0;
    font-weight:700;
  }
  .billing label{display:flex; gap:8px; align-items:center}
  .billing input{accent-color: var(--highlight)}
  
  /* 2) Tableau modules: montrer tous les chiffres sans coupe */
  .modules-list{
    display:grid;
    /* Colonnes de prix dimensionnées sur le contenu (pas de coupe) */
    grid-template-columns: 1fr max-content max-content;
    gap:8px 16px;
    align-items:center;
  
    /* Permettre un léger défilement horizontal si l’écran est très étroit */
    overflow-x:auto;
  }
  .modules-list .header{
    font-weight:700;
    color:#cfe0ff;
    padding-bottom:4px;
    border-bottom:1px dashed rgba(255,255,255,0.35);
    margin-bottom:6px;
  }
  .module{
    padding:6px 0;
    border-bottom:1px dashed rgba(255,255,255,0.25);
  }
  .module:last-child{border-bottom:none}
  
  .row-left{
    display:flex; align-items:center; gap:8px; min-width:0;
  }
  .price{
    text-align:right;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;              /* empêche le retour à la ligne */
    letter-spacing:.1px;             /* améliore la lisibilité */
    padding-left:6px;
  }
  .muted{color:#d8e3ff; font-size:.95rem}
  
  /* Mise en évidence de la colonne active (pilotée par le JS) */
  .price.active, .header.active{
    color:var(--highlight);
    font-weight:700;
  }
  
  /* Règles */
  .rules ul{margin:4px 0 8px 18px; color:#cfe0ff}
  
  /* Récapitulatif */
  .summary-grid{
    display:grid;
    grid-template-columns: 1fr auto;
    gap:8px 12px;
    align-items:center;
  }
  .total-label{font-weight:700}
  .total-amount{
    font-weight:800;
    font-size:1.15rem;
    color:var(--accent);
  }
  
  /* Détails */
  .details summary{cursor:pointer; color:#cfe0ff}
  .details ul{margin:8px 0 0 18px}
  
  /* Actions */
  .actions{
    display:flex;
    gap:12px;
    align-items:center;
    margin-top:12px;
    justify-content:center;
  }
  button{
    background:var(--accent);
    color:#00214d;
    border:1px solid rgba(15,211,160,0.55);
    border-radius:10px;
    padding:10px 14px;
    font-weight:700;
    cursor:pointer;
  }
  button:hover{background:#0cc697}
  #shareMsg{color:#cfe0ff}
  
  /* Pied de page */
  footer{color:#234a92; text-align:center; margin-top:6px}
  /* Met le montant Total HT en jaune et en gras */
#totalHT {
    color: var(--highlight);
    font-weight: 800;
  }
/* Libellé "Total HT" en jaune, non gras (cellule à gauche) */
.summary-grid > div:has(+ #totalHT) {
    color: var(--highlight);
    font-weight: normal; /* ou 400 */
  }  
  /* Libellé "Total TTC" en vert (cellule à gauche) */
  .summary-grid .total-label {
    color: var(--accent);
  }