/* Texte accentué (utilisé partout) */
.text-accent {
    color: var(--accent-color) !important;
  }
  
  /* Bouton plein en accent */
  .btn-accent {
    background-color: var(--accent-color) !important;
    border: 1px solid var(--accent-color) !important;
    color: #fff !important;
    transition: all .2s;
  }
  
  /* Bouton accent : hover → outlined */
  /*
  .btn-accent:hover,
  .btn-accent:focus {
    background-color: #fff !important;
    color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    text-decoration: none !important;
  }
    */

  /* Bouton outline en accent */
.btn-outline-accent {
    background-color: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    transition: all .2s;
  }
  
  /* Hover/focus → fond accent, texte blanc */
  .btn-outline-accent:hover,
  .btn-outline-accent:focus {
    background-color: var(--accent-color);
    color: #fff;
    text-decoration: none;
  }
  
  /* Badge prix non cliquable */
  .btn-accent-disabled {
    background-color: var(--accent-color);
    color: #fff;
    border: none;
    pointer-events: none;
    cursor: default;
  }
  
  /* En-tête de card accentué */
  .bg-accent {
    background-color: var(--accent-color) !important;
    color: #fff;
  }
  
  .pkg-card {
    background-color: #fff;
    color: inherit;
    border: 2px solid var(--accent-color);
    transition: transform .2s, background-color .2s, color .2s, box-shadow .2s;
    cursor: pointer;
  }
  
  .pkg-card:hover,
  .pkg-card:focus {
    transform: scale(1.02);
    background-color: var(--accent-color);
    color: #fff;
    /* bordure garde son épaisseur initiale */
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  }
  
  /* H4 blanc par défaut */
.pkg-card .card-header h4.text-white {
    color: #fff;
  }
  
  /* H4 accent-color au hover/focus */
  .pkg-card:hover .card-header h4.text-white,
  .pkg-card:focus .card-header h4.text-white {
    color: var(--accent-color) !important;
  }
  /* H4 accent-color au hover/focus */
  .pkg-card:hover .card-header,
  .pkg-card:focus .card-header {
    background-color: #fff !important;
  }
  
  
  /* Inversion de couleur du badge prix */
  .pkg-card:hover .btn-accent-disabled,
  .pkg-card:focus .btn-accent-disabled {
    background-color: #fff;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
  }
  
  /* Inversion de couleur du footer */
  .pkg-card:hover .card-footer,
  .pkg-card:focus .card-footer {
    background-color: #fff;
    color: var(--accent-color);
  }
  
  /* Quand le radio est coché, on inverse la carte entière */
.pkg-card input[type="radio"]:checked + .card-header {
    background-color: #fff !important;
    color: var(--accent-color) !important;
  }

  /* H4 accent-color au hover/focus */
  .pkg-card input[type="radio"]:checked + .card-header h4.text-white,
  .pkg-card input[type="radio"]:checked + .card-header h4.text-white {
    color: var(--accent-color) !important;
  }
  
  .pkg-card input[type="radio"]:checked ~ .card-body {
    background-color: var(--accent-color) !important;
    color: #fff !important;
  }
  
  .pkg-card input[type="radio"]:checked ~ .card-body .btn-accent-disabled {
    background-color: #fff !important;
    color: var(--accent-color) !important;
    border: 1px solid var(--accent-color) !important;
  }
  
  .pkg-card input[type="radio"]:checked ~ .card-footer {
    background-color: #fff !important;
    color: var(--accent-color) !important;
  }
  
  /* Et on renforce la bordure accentuée */
  .pkg-card input[type="radio"]:checked {
    /* pas d’effet visuel sur l’input lui-même */
  }
  
  .pkg-card input[type="radio"]:checked ~ .card-header,
  .pkg-card input[type="radio"]:checked ~ .card-body,
  .pkg-card input[type="radio"]:checked ~ .card-footer {
    /* la bordure reste accentuée, donc rien à changer ici si pas de border-width modifié */
    border-color: var(--accent-color) !important;
  }
  
  .d-none {
    display: none !important;
  }