/* Page de commande ChampyStore — couleurs de la marque (violet / or). */
:root {
    --violet: #24105F;
    --violet-clair: #784DFD;
    --or: #FFC047;
    --vert: #16A34A;
    --texte: #1C1832;
    --discret: #5F5B7A;
    --fond: #F4F3FA;
    --bord: #E4E2F0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--fond);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--texte);
}

.bandeau {
    background: linear-gradient(135deg, #3a1f8f, var(--violet) 60%, #170a40);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.marque { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 18px; }
.marque img { width: 36px; height: 36px; object-fit: contain; }
.lien-tarifs { color: #D9D4FF; text-decoration: none; font-size: 14px; }
.lien-tarifs:hover { color: #fff; text-decoration: underline; }

.page { width: 100%; display: flex; justify-content: center; padding: 40px 20px 60px; }

.container { width: 1200px; max-width: 100%; display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; }

.left, .resume {
    background: #fff;
    border-radius: 18px;
    border: 1px solid var(--bord);
    box-shadow: 0 15px 40px rgba(36, 16, 95, .07);
}

.left { padding: 36px; }

h1 { font-size: 32px; color: var(--violet); margin-bottom: 10px; }

.subtitle { color: var(--discret); margin-bottom: 28px; line-height: 1.6; }

.etape { font-size: 17px; color: var(--violet); margin: 26px 0 12px; }

/* Cartes de plans */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.carte-plan { position: relative; cursor: pointer; }
.carte-plan input, .choix-duree input { position: absolute; opacity: 0; }

.contenu-plan {
    display: block;
    height: 100%;
    border: 2px solid var(--bord);
    border-radius: 14px;
    padding: 18px 18px 14px;
    transition: .2s;
}

.carte-plan:hover .contenu-plan { border-color: #C9BEFF; }
.carte-plan input:checked + .contenu-plan { border-color: var(--violet-clair); background: #F6F3FF; box-shadow: 0 0 0 4px rgba(120, 77, 253, .12); }
.carte-plan input:focus-visible + .contenu-plan { outline: 3px solid var(--violet-clair); }

.nom-plan { display: block; font-size: 20px; font-weight: 800; color: var(--violet); }
.nom-plan em { font-style: normal; font-size: 11px; font-weight: 700; background: var(--or); color: var(--violet); border-radius: 100px; padding: 2px 8px; vertical-align: middle; margin-left: 6px; }
.prix-plan { display: block; margin-top: 8px; color: var(--discret); }
.prix-plan strong { font-size: 24px; color: var(--texte); }
.sous-prix { display: block; font-size: 13px; color: var(--discret); margin-bottom: 10px; }

.contenu-plan ul { list-style: none; border-top: 1px solid var(--bord); padding-top: 10px; }
.contenu-plan li { font-size: 14px; padding: 4px 0 4px 22px; position: relative; }
.contenu-plan li::before { content: "✓"; position: absolute; left: 0; color: var(--vert); font-weight: 800; }

/* Durée */
.durees { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choix-duree { position: relative; cursor: pointer; }
.choix-duree span {
    display: block; border: 2px solid var(--bord); border-radius: 12px; padding: 14px 16px;
    font-weight: 700; transition: .2s;
}
.choix-duree small { display: block; font-weight: 500; font-size: 13px; color: var(--discret); margin-top: 3px; }
.choix-duree input:checked + span { border-color: var(--violet-clair); background: #F6F3FF; }
.choix-duree input:focus-visible + span { outline: 3px solid var(--violet-clair); }

/* Formulaire */
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 7px; font-weight: 600; font-size: 14px; }
.form-group input {
    width: 100%; padding: 14px; border: 1px solid #D5D0EA; border-radius: 10px; font-size: 15px; transition: .2s;
}
.form-group input:focus { outline: none; border-color: var(--violet-clair); box-shadow: 0 0 0 4px rgba(120, 77, 253, .15); }

#btnPayer {
    width: 100%; padding: 17px; margin-top: 10px; background: var(--vert); color: #fff; border: none;
    border-radius: 12px; font-size: 18px; font-weight: 700; cursor: pointer; transition: .25s;
}
#btnPayer:hover { filter: brightness(1.08); transform: translateY(-1px); }
#btnPayer:disabled { opacity: .7; cursor: wait; transform: none; }

/* Résumé */
.resume { position: sticky; top: 24px; padding: 30px; }
.resume::before {
    content: ""; display: block; height: 8px; border-radius: 20px; margin-bottom: 22px;
    background: linear-gradient(90deg, var(--violet-clair), var(--or));
}
.resume h2 { margin-bottom: 22px; color: var(--violet); }
.ligne { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: 15px; }
.ligne span { color: var(--discret); }
.ligne strong { text-align: right; }
.resume hr { margin: 22px 0; border: 0; border-top: 1px solid var(--bord); }
.prix { text-align: center; font-size: 36px; color: var(--violet); font-weight: 800; }
.economie { text-align: center; color: var(--vert); font-weight: 600; font-size: 14px; min-height: 20px; margin: 6px 0 18px; }
.secure { text-align: center; line-height: 1.9; color: var(--discret); font-size: 14px; }

@media (max-width: 1000px) {
    .container { grid-template-columns: 1fr; }
    .resume { position: relative; top: 0; }
}

@media (max-width: 640px) {
    .page { padding: 20px 14px 40px; }
    .left, .resume { padding: 22px 18px; }
    h1 { font-size: 26px; }
    .plans, .durees, .deux { grid-template-columns: 1fr; }
    .prix { font-size: 30px; }
    .lien-tarifs { display: none; }
}