.abonnements
{
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    gap:25px;

}

.abonnement
{
    position: relative;
    width:600px;
    height:90%;
 
    box-shadow: 0 5px 20px rgba(0,0,0,.1);
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    padding:20px 20px 30px;
    border-radius:8px;
    transition: .3s;

   /* overflow: hidden;
    overflow-y: scroll;
    height:650px;*/


  
}

.product200
{
    position: relative;
    width:800px;
    height:90%;
 
    box-shadow: 0 5px 20px rgba(0,0,0,.1);
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    padding:20px 20px 30px;

    transition: .3s;

   /* overflow: hidden;
    overflow-y: scroll;
    height:650px;*/

}


.product:hover
{
    transform:translateY(-15px);
    
}

.product a
{
    font-size: 0.959em;
    line-height: 10px;
    font-family: 'Times New Roman', Times, serif;
   
}

.subs-btn
{
  width:100%;
  box-shadow:0 5px 10px rgba(0,0,0,0.2);
  font-family: 'Times New Roman', Times, serif;
  background-color: black;
  color: white;
  height: 40px;
  border-radius: 4px;
}
.card-bod
{  
  display: flex;
  justify-content: center;

}

#email-error
{
    position: absolute;
    font-size: 16px;
    font-weight: 400;
    color: red;
}

.btn
{
    box-sizing: border-box; 
}

.abonne
{
  height:650px;
}


 
    /* ========================================
   SECTION ABONNEMENTS - RESPONSIVE CSS
   ======================================== */

    /* Container principal */
    .subscription-container {
        width: 100%;
        max-width: 100%;
        padding: 15px;
    }

    /* ========================================
   GROUPE DE RÉGION
   ======================================== */

    .region-group {
        background-color: #ffffff;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 25px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        transition: box-shadow 0.3s ease;
    }

    .region-group:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    /* En-tête de la région */
    .region-header {
        border-bottom: 2px solid #e9ecef;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

    .region-title {
        font-family: 'Times New Roman', Times, serif;
        font-size: 18px;
        font-weight: 700;
        color: #2c3e50;
        margin: 0;
        letter-spacing: 0.3px;
    }

    /* ========================================
   OPTIONS D'ABONNEMENT
   ======================================== */

    .subscription-options {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .subscription-item {
        width: 100%;
        transition: transform 0.2s ease;
    }

    .subscription-item:hover {
        transform: translateX(5px);
    }

    /* Label cliquable */
    .subscription-label {
        display: block;
        cursor: pointer;
        margin: 0;
        padding: 12px 15px;
        border-radius: 6px;
        background-color: #f8f9fa;
        transition: all 0.3s ease;
        border: 1px solid transparent;
    }

    .subscription-label:hover {
        background-color: #e9ecef;
        border-color: #dee2e6;
    }

    /* Label actif (quand radio est sélectionné) */
    .subscription-label:has(input:checked) {
        background-color: #e3f2fd;
        border-color: #2196F3;
        box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
    }

    /* ========================================
   CONTENU DE L'ABONNEMENT (FLEXBOX)
   ======================================== */

    .subscription-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
    }

    /* Durée */
    .subscription-duration {
        font-family: 'Times New Roman', Times, serif;
        font-size: 15px;
        font-weight: 500;
        color: #2c3e50;
        white-space: nowrap;
        flex-shrink: 0;
        min-width: 100px;
    }

    /* Points de liaison (dots) */
    .subscription-dots {
        flex-grow: 1;
        min-width: 50px;
        height: 1px;
        position: relative;
        margin: 0 10px;
    }

    .dots-line {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background-image: repeating-linear-gradient(to right,
                #bdc3c7,
                #bdc3c7 3px,
                transparent 3px,
                transparent 8px);
    }

    /* Prix */
    .subscription-price {
        font-family: 'Times New Roman', Times, serif;
        font-size: 15px;
        font-weight: 600;
        color: #27ae60;
        white-space: nowrap;
        flex-shrink: 0;
        min-width: 80px;
        text-align: right;
    }

    /* Radio button */
    .subscription-radio {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
    }

    .subscription-radio .form-check-input {
        cursor: pointer;
        width: 20px;
        height: 20px;
        margin: 0;
        border: 2px solid #bdc3c7;
        transition: all 0.2s ease;
    }

    .subscription-radio .form-check-input:hover {
        border-color: #2196F3;
        transform: scale(1.1);
    }

    .subscription-radio .form-check-input:checked {
        background-color: #2196F3;
        border-color: #2196F3;
    }

    /* ========================================
   RESPONSIVE - TABLETTES (768px et moins)
   ======================================== */

    @media (max-width: 768px) {
        .subscription-container {
            padding: 10px;
        }

        .region-group {
            padding: 15px;
            margin-bottom: 20px;
        }

        .region-title {
            font-size: 16px;
        }

        .subscription-label {
            padding: 10px 12px;
        }

        .subscription-duration,
        .subscription-price {
            font-size: 14px;
        }

        .subscription-duration {
            min-width: 90px;
        }

        .subscription-price {
            min-width: 70px;
        }

        .subscription-dots {
            margin: 0 8px;
            min-width: 40px;
        }
    }

    /* ========================================
   RESPONSIVE - MOBILES (576px et moins)
   ======================================== */

    @media (max-width: 576px) {
        .subscription-container {
            padding: 8px;
        }

        .region-group {
            padding: 12px;
            margin-bottom: 15px;
        }

        .region-title {
            font-size: 15px;
        }

        .subscription-options {
            gap: 10px;
        }

        .subscription-label {
            padding: 8px 10px;
        }

        .subscription-content {
            gap: 6px;
        }

        .subscription-duration {
            font-size: 13px;
            min-width: 75px;
        }

        .subscription-price {
            font-size: 13px;
            min-width: 60px;
        }

        .subscription-dots {
            margin: 0 5px;
            min-width: 30px;
        }

        .dots-line {
            background-image: repeating-linear-gradient(to right,
                    #bdc3c7,
                    #bdc3c7 2px,
                    transparent 2px,
                    transparent 6px);
        }

        .subscription-radio .form-check-input {
            width: 18px;
            height: 18px;
        }
    }

    /* ========================================
   RESPONSIVE - TRÈS PETITS MOBILES (400px et moins)
   ======================================== */

    @media (max-width: 400px) {
        .subscription-container {
            padding: 5px;
        }

        .region-group {
            padding: 10px;
        }

        .region-title {
            font-size: 14px;
        }

        .subscription-label {
            padding: 6px 8px;
        }

        .subscription-duration {
            font-size: 12px;
            min-width: 65px;
        }

        .subscription-price {
            font-size: 12px;
            min-width: 55px;
        }

        .subscription-dots {
            min-width: 20px;
            margin: 0 4px;
        }

        .subscription-radio .form-check-input {
            width: 16px;
            height: 16px;
        }
    }

    /* ========================================
   ÉTATS ET ANIMATIONS
   ======================================== */

    /* Focus pour accessibilité */
    .subscription-radio .form-check-input:focus {
        outline: 2px solid #2196F3;
        outline-offset: 2px;
        box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
    }

    /* Animation de sélection */
    @keyframes pulseCheck {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.1);
        }
    }

    .subscription-radio .form-check-input:checked {
        animation: pulseCheck 0.3s ease;
    }

    /* ========================================
   AMÉLIORATION VISUELLE (OPTIONNEL)
   ======================================== */
 

    /* Effet de hover sur tout l'item */
    .subscription-item:hover .subscription-duration {
        color: #000000;
    }

    .subscription-item:hover .subscription-price {
        color: #c2b280;
        transform: scale(1.05);
    }

    /* ========================================
   IMPRESSION (PRINT STYLES)
   ======================================== */

    @media print {
        .subscription-container {
            padding: 0;
        }

        .region-group {
            box-shadow: none;
            page-break-inside: avoid;
            border: 1px solid #ddd;
        }

        .subscription-label:hover {
            background-color: #f8f9fa;
        }

        .subscription-radio .form-check-input {
            border: 2px solid #000;
        }
    }

    /* ========================================
   MODE SOMBRE (OPTIONNEL)
   ======================================== */

    @media (prefers-color-scheme: dark) {
        .region-group {
            background-color: #2c3e50;
        }

        .region-title {
            color: #ecf0f1;
        }

        .subscription-label {
            background-color: #34495e;
            color: #ecf0f1;
        }

        .subscription-label:hover {
            background-color: #3d566e;
        }

        .subscription-duration {
            color: #ecf0f1;
        }

        .subscription-price {
            color: #000000;
        }

        .dots-line {
            background-image: repeating-linear-gradient(to right,
                    #7f8c8d,
                    #7f8c8d 3px,
                    transparent 3px,
                    transparent 8px);
        }
    }