/*======================================================
VARIABLES ET CONFIGURATION GLOBALE
======================================================*/
:root {
    --primary: #0D2F6F;
    --primary-light: #1E5BB8;
    --secondary: #D4AF37;
    
    --bg: #F4F7FB;
    --surface: #FFFFFF;
    
    --text: #10233F;
    --text-light: #5E6D84;
    
    --success: #20B15A;
    --danger: #E53E3E;
    
    --radius: 26px;
    --radius-small: 16px;
    
    --shadow-xs: 0 8px 18px rgba(0,0,0,.05);
    --shadow-sm: 0 15px 35px rgba(0,0,0,.08);
    --shadow-md: 0 25px 55px rgba(0,0,0,.12);
    --shadow-lg: 0 45px 80px rgba(0,0,0,.18);
    
    --transition: .35s cubic-bezier(.2,.8,.2,1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--text);
    overflow-x: hidden;
}

/* Barre de progression de lecture */
#readingProgress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    z-index: 1000;
    width: 0%;
    transition: width 0.1s ease-out;
}

/*======================================================
MAIN ET STRUCTURE
======================================================*/
.qrdc-app {
    width: min(1500px, 95%);
    margin: auto;
    padding-top: 60px;
    padding-bottom: 80px;
}

section {
    margin: 100px 0;
}

.title {
    text-align: center;
    margin-bottom: 65px;
}

.title span {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 50px;
    background: #EAF2FF;
    color: var(--primary);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.title h2 {
    font-size: 2.6rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.title p {
    max-width: 850px;
    margin: auto;
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--text-light);
}

/*======================================================
BOUTONS
======================================================*/
.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 38px;
    border-radius: 60px;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: white;
    color: var(--primary);
    border: 2px solid #DCE7F8;
}

.btn-secondary:hover {
    background: var(--primary);
    color: white;
}

/* Effet Ripple */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: rippleAnim 0.7s linear;
    pointer-events: none;
}

@keyframes rippleAnim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/*=========================================================
HERO SECTION
=========================================================*/
/*=========================================================
HERO PREMIUM 2026
=========================================================*/

.hero{

    position:relative;
    
    display:flex;
    
    justify-content:flex-end;
    
    align-items:center;
    
    min-height:760px;
    
    padding:70px;
    
    border-radius:40px;
    
    overflow:hidden;
    
    isolation:isolate;
    
    background:
    
    linear-gradient(
    
    90deg,
    
    rgba(5,18,45,.05) 0%,
    
    rgba(255,255,255,.10) 30%,
    
    rgba(255,255,255,.72) 58%,
    
    rgba(255,255,255,.96) 75%,
    
    #ffffff 100%
    
    ),
    
    url("images/qrdc/qrdc-hero.png");
    
    background-size:cover;
    
    background-position:center;
    
    background-repeat:no-repeat;
    
    box-shadow:
    
    0 45px 90px rgba(15,35,80,.12);
    
    }
    .hero::before{

        content:"";
        
        position:absolute;
        
        inset:0;
        
        background:
        
        radial-gradient(
        
        circle at 18% 38%,
        
        rgba(30,91,184,.15),
        
        transparent 28%
        
        ),
        
        radial-gradient(
        
        circle at 70% 22%,
        
        rgba(212,175,55,.14),
        
        transparent 18%
        
        ),
        
        radial-gradient(
        
        circle at 40% 82%,
        
        rgba(30,91,184,.08),
        
        transparent 30%
        
        );
        
        mix-blend-mode:screen;
        
        animation:
        
        heroLight 14s linear infinite;
        
        pointer-events:none;
        
        }
        .hero::after{

            content:"";
            
            position:absolute;
            
            inset:0;
            
            background:
            
            linear-gradient(
            
            135deg,
            
            transparent,
            
            rgba(255,255,255,.08),
            
            transparent
            
            );
            
            background-size:220% 220%;
            
            animation:
            
            glassMove 12s linear infinite;
            
            pointer-events:none;
            
            }
            .hero-left{

                position:relative;
                
                z-index:5;
                
                width:min(610px,46%);
                
                padding:55px;
                
                border-radius:36px;
                
                background:
                
                rgba(255,255,255,.42);
                
                backdrop-filter:
                
                blur(22px);
                
                -webkit-backdrop-filter:
                
                blur(22px);
                
                border:
                
                1px solid rgba(255,255,255,.55);
                
                box-shadow:
                
                0 35px 80px rgba(13,47,111,.14);
                
                overflow:hidden;
                
                animation:
                
                panelEnter .8s cubic-bezier(.2,.8,.2,1);
                
                }

                .hero-left::before{

                    content:"";
                    
                    position:absolute;
                    
                    left:-120px;
                    
                    top:-120px;
                    
                    width:260px;
                    
                    height:260px;
                    
                    border-radius:50%;
                    
                    background:
                    
                    radial-gradient(
                    
                    circle,
                    
                    rgba(212,175,55,.18),
                    
                    transparent 72%
                    
                    );
                    
                    filter:blur(18px);
                    
                    animation:
                    
                    goldAura 8s ease-in-out infinite;
                    
                    }
                    .hero-left::after{

                        content:"";
                        
                        position:absolute;
                        
                        right:-150px;
                        
                        bottom:-150px;
                        
                        width:320px;
                        
                        height:320px;
                        
                        border-radius:50%;
                        
                        background:
                        
                        radial-gradient(
                        
                        circle,
                        
                        rgba(30,91,184,.18),
                        
                        transparent 70%
                        
                        );
                        
                        filter:blur(24px);
                        
                        animation:
                        
                        blueAura 10s ease-in-out infinite;
                        
                        }
                        .hero-left>*:first-child{

                            display:inline-flex;
                            
                            align-items:center;
                            
                            gap:12px;
                            
                            padding:13px 24px;
                            
                            border-radius:999px;
                            
                            background:
                            
                            linear-gradient(
                            
                            135deg,
                            
                            #ffffff,
                            
                            #EDF4FF
                            
                            );
                            
                            font-size:.82rem;
                            
                            font-weight:800;
                            
                            letter-spacing:1.3px;
                            
                            text-transform:uppercase;
                            
                            color:var(--primary);
                            
                            position:relative;
                            
                            overflow:hidden;
                            
                            box-shadow:
                            
                            0 12px 25px rgba(13,47,111,.08);
                            
                            margin-bottom:26px;
                            
                            }
                            .hero-left>*:first-child::before{

                                content:"";
                                
                                position:absolute;
                                
                                left:-120%;
                                
                                top:0;
                                
                                width:70%;
                                
                                height:100%;
                                
                                background:
                                
                                linear-gradient(
                                
                                90deg,
                                
                                transparent,
                                
                                rgba(255,255,255,.95),
                                
                                transparent
                                
                                );
                                
                                transform:skewX(-28deg);
                                
                                animation:
                                
                                badgeMove 4s linear infinite;
                                
                                }
    /*=========================================================
CONTENU HERO PREMIUM
=========================================================*/

.hero h1{

    margin:18px 0 24px;
    
    font-size:4.6rem;
    
    font-weight:900;
    
    line-height:.95;
    
    letter-spacing:-3px;
    
    color:#0D2F6F;
    
    max-width:650px;
    
    position:relative;
    
    animation:titleReveal .9s ease both;
    
    }
    
    .hero h1::after{
    
    content:"";
    
    display:block;
    
    margin-top:22px;
    
    width:110px;
    
    height:6px;
    
    border-radius:999px;
    
    background:
    
    linear-gradient(
    
    90deg,
    
    #D4AF37,
    
    #FFD76A,
    
    transparent
    
    );
    
    animation:lineGrow .9s ease .4s both;
    
    }
    
    .hero h2{
    
    margin-bottom:18px;
    
    font-size:1.9rem;
    
    font-weight:700;
    
    color:#2155A5;
    
    letter-spacing:-.5px;
    
    animation:fadeUp .8s ease .15s both;
    
    }
    
    .hero p{
    
    font-size:1.08rem;
    
    line-height:2;
    
    color:#4C5D75;
    
    max-width:560px;
    
    margin-bottom:34px;
    
    animation:fadeUp .8s ease .3s both;
    
    }
    .hero-features{

        display:flex;
        
        flex-wrap:wrap;
        
        gap:16px;
        
        margin:38px 0;
        
        }
        
        .hero-features>*{
        
        display:flex;
        
        align-items:center;
        
        gap:12px;
        
        padding:14px 20px;
        
        border-radius:999px;
        
        background:
        
        rgba(255,255,255,.76);
        
        border:1px solid rgba(255,255,255,.55);
        
        backdrop-filter:blur(12px);
        
        box-shadow:
        
        0 14px 32px rgba(13,47,111,.09);
        
        font-weight:700;
        
        transition:.35s;
        
        cursor:default;
        
        }
        
        .hero-features>*:hover{
        
        transform:
        
        translateY(-8px)
        
        scale(1.04);
        
        box-shadow:
        
        0 25px 45px rgba(13,47,111,.14);
        
        }
        .hero-features i{

            width:42px;
            
            height:42px;
            
            display:flex;
            
            justify-content:center;
            
            align-items:center;
            
            border-radius:50%;
            
            background:
            
            linear-gradient(
            
            135deg,
            
            #0D2F6F,
            
            #2D6BD7
            
            );
            
            color:white;
            
            font-size:1rem;
            
            flex:none;
            
            box-shadow:
            
            0 12px 20px rgba(13,47,111,.18);
            
            }
            .hero-buttons{

                display:flex;
                
                flex-wrap:wrap;
                
                gap:22px;
                
                margin-top:46px;
                
                }
                
                .hero-buttons a{
                
                position:relative;
                
                overflow:hidden;
                
                }
                
                .hero-buttons a::before{
                
                content:"";
                
                position:absolute;
                
                left:-130%;
                
                top:0;
                
                width:65%;
                
                height:100%;
                
                background:
                
                linear-gradient(
                
                90deg,
                
                transparent,
                
                rgba(255,255,255,.85),
                
                transparent
                
                );
                
                transform:skewX(-28deg);
                
                transition:.8s;
                
                }
                
                .hero-buttons a:hover::before{
                
                left:220%;
                
                }
                
                .hero-buttons .btn-primary{
                
                padding:20px 42px;
                
                box-shadow:
                
                0 18px 45px rgba(13,47,111,.20);
                
                }
                
                .hero-buttons .btn-primary:hover{
                
                transform:
                
                translateY(-6px)
                
                scale(1.03);
                
                }
                
                .hero-buttons .btn-secondary{
                
                padding:20px 38px;
                
                background:rgba(255,255,255,.78);
                
                backdrop-filter:blur(10px);
                
                }
                @keyframes titleReveal{

                    from{
                    
                    opacity:0;
                    
                    transform:
                    
                    translateY(45px);
                    
                    }
                    
                    to{
                    
                    opacity:1;
                    
                    transform:none;
                    
                    }
                    
                    }
                    
                    @keyframes fadeUp{
                    
                    from{
                    
                    opacity:0;
                    
                    transform:
                    
                    translateY(30px);
                    
                    }
                    
                    to{
                    
                    opacity:1;
                    
                    transform:none;
                    
                    }
                    
                    }
                    
                    @keyframes lineGrow{
                    
                    from{
                    
                    width:0;
                    
                    opacity:0;
                    
                    }
                    
                    to{
                    
                    width:110px;
                    
                    opacity:1;
                    
                    }
                    
                    }
                    
                    @keyframes heroLight{
                    
                    0%{
                    
                    transform:translateX(-4%) translateY(0);
                    
                    }
                    
                    50%{
                    
                    transform:translateX(5%) translateY(-3%);
                    
                    }
                    
                    100%{
                    
                    transform:translateX(-4%) translateY(0);
                    
                    }
                    
                    }
                    
                    @keyframes glassMove{
                    
                    0%{
                    
                    background-position:0% 50%;
                    
                    }
                    
                    100%{
                    
                    background-position:220% 50%;
                    
                    }
                    
                    }
                    
                    @keyframes panelEnter{
                    
                    from{
                    
                    opacity:0;
                    
                    transform:
                    
                    translateX(70px)
                    
                    scale(.96);
                    
                    }
                    
                    to{
                    
                    opacity:1;
                    
                    transform:none;
                    
                    }
                    
                    }
                    
                    @keyframes goldAura{
                    
                    0%,100%{
                    
                    transform:scale(.9);
                    
                    }
                    
                    50%{
                    
                    transform:scale(1.25);
                    
                    }
                    
                    }
                    
                    @keyframes blueAura{
                    
                    0%,100%{
                    
                    transform:scale(1);
                    
                    }
                    
                    50%{
                    
                    transform:scale(1.3);
                    
                    }
                    
                    }
                    
                    @keyframes badgeMove{
                    
                    0%{
                    
                    left:-130%;
                    
                    }
                    
                    100%{
                    
                    left:230%;
                    
                    }
                    
                    }

/*======================================================
STATISTIQUES
======================================================*/
.numbers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.numbers article {
    background: white;
    border-radius: 28px;
    padding: 40px 25px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.numbers article:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
}

.numbers span{

display:block;

font-size:3rem;

font-weight:800;

color:var(--primary);

margin-bottom:10px;

font-variant-numeric:tabular-nums;

transition:transform .35s ease,color .35s ease;

}

.numbers article.visible span{

animation:numberPop .7s cubic-bezier(.2,.8,.2,1);

}

@keyframes numberPop{

0%{

opacity:0;

transform:translateY(20px) scale(.75);

}

55%{

transform:translateY(-6px) scale(1.08);

}

100%{

opacity:1;

transform:none;

}

}

.numbers small {
    font-size: .95rem;
    color: var(--text-light);
    font-weight: 600;
}

/*======================================================
CONCEPT
======================================================*/
.concept-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.concept article {
    background: var(--surface);
    padding: 40px 30px;
    border-radius: 28px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.concept article:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-md);
}

.concept article i {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    border-radius: 50%;
    font-size: 1.8rem;
    color: white;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    box-shadow: 0 12px 25px rgba(30,91,184,.25);
}

.concept h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.concept p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 0.95rem;
}

/*======================================================
CATALOGUE & LIVRES
======================================================*/
.catalogue {
    background: white;
    padding: 60px;
    border-radius: 36px;
    box-shadow: var(--shadow-md);
}

.catalog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.catalog-search input {
    width: 380px;
    max-width: 100%;
    padding: 18px 24px;
    border: 2px solid #EAEFF8;
    border-radius: 60px;
    background: #F9FBFF;
    font-size: .95rem;
    outline: none;
    transition: var(--transition);
}

.catalog-search input:focus {
    border-color: var(--primary-light);
    background: white;
    box-shadow: 0 0 0 4px rgba(30,91,184,.1);
}

#categorieFilters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 45px;
}

#categorieFilters button {
    padding: 12px 22px;
    border: none;
    border-radius: 50px;
    background: #EEF4FD;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
}

#categorieFilters button:hover,
#categorieFilters button.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    box-shadow: 0 8px 20px rgba(30,91,184,.25);
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 35px;
}

/*======================================================
CARTE QRDC PREMIUM
======================================================*/

.qrdc-book{

position:relative;

display:flex;

flex-direction:column;

background:#fff;

border-radius:30px;

overflow:hidden;

border:1px solid rgba(13,47,111,.08);

box-shadow:

0 20px 45px rgba(13,47,111,.08);

transition:.45s cubic-bezier(.2,.8,.2,1);

}

.qrdc-book::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

135deg,

rgba(30,91,184,.04),

transparent 40%,

rgba(212,175,55,.05)

);

opacity:0;

transition:.45s;

pointer-events:none;

}

.qrdc-book:hover{

transform:translateY(-12px);

box-shadow:

0 35px 70px rgba(13,47,111,.16);

}

.qrdc-book:hover::before{

opacity:1;

}

.book-cover{

position:relative;

height:360px;

display:flex;

justify-content:center;

align-items:flex-end;

padding-bottom:25px;

background:

linear-gradient(180deg,#EEF5FF,#FDFEFF);

overflow:hidden;

}

.book-cover::before{

content:"";

position:absolute;

width:260px;

height:260px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(30,91,184,.14),

transparent 70%);

filter:blur(10px);

}

.book-cover img{

    width:245px;

    max-width:82%;

    height:auto;

    object-fit:contain;

    filter:

        drop-shadow(
            0 30px 45px rgba(0,0,0,.28)
        );

    transition:

        transform .45s,

        filter .45s;

    z-index:2;

}

.qrdc-book:hover .book-cover img{

    transform:

        translateY(-10px)

        scale(1.08)

        rotate(-2deg);

    filter:

        drop-shadow(
            0 45px 60px rgba(0,0,0,.35)
        );

}
.book-cover::after{

    content:"";

    position:absolute;

    bottom:18px;

    width:220px;

    height:28px;

    border-radius:50%;

    background:

        rgba(0,0,0,.12);

    filter:blur(12px);

    z-index:1;

}

.book-badge{

position:absolute;

top:22px;

right:22px;

z-index:10;

padding:9px 18px;

border-radius:999px;

background:

linear-gradient(135deg,#D4AF37,#FFD86E);

font-size:.70rem;

font-weight:800;

letter-spacing:.8px;

box-shadow:

0 12px 25px rgba(212,175,55,.35);

}

.book-body{

display:flex;

flex-direction:column;

padding:28px;

gap:16px;

flex:1;

}

.book-category{

display:inline-flex;

align-self:flex-start;

padding:8px 18px;

border-radius:999px;

background:#EEF5FF;

font-size:.72rem;

font-weight:800;

color:#0D2F6F;

letter-spacing:.5px;

}

.book-title{

font-size:1.75rem;

font-weight:900;

line-height:1.2;

color:#0D2F6F;

}

.book-description{

line-height:1.8;

color:#667085;

flex:1;

}

.book-meta{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

margin-top:8px;

}

.meta-item{

padding:18px;

border-radius:18px;

background:#F7FAFF;

text-align:center;

transition:.35s;

}

.meta-item:hover{

background:#EDF4FF;

transform:translateY(-3px);

}

.meta-item strong{

display:block;

font-size:1.45rem;

font-weight:900;

color:#0D2F6F;

}

.meta-item span{

font-size:.72rem;

font-weight:700;

text-transform:uppercase;

color:#73809B;

margin-top:4px;

}

.book-actions{

display:flex;

flex-direction:column;

gap:14px;

margin-top:10px;

}

.book-paper,

.book-online{

display:flex;

justify-content:center;

align-items:center;

gap:12px;

height:56px;

border:none;

border-radius:18px;

font-weight:800;

font-size:.95rem;

cursor:pointer;

transition:.35s;

text-decoration:none;

position:relative;

overflow:hidden;

}

.book-paper{

background:#EEF4FD;

color:#0D2F6F;

}

.book-paper:hover{

background:#DCEAFF;

transform:translateY(-3px);

}

.book-online{

background:

linear-gradient(

135deg,

#0D2F6F,

#1E5BB8

);

color:white;

box-shadow:

0 18px 35px rgba(13,47,111,.22);

}

.book-online:hover{

transform:

translateY(-4px)

scale(1.02);

box-shadow:

0 28px 45px rgba(13,47,111,.30);

}

.book-online::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:70%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.7),

transparent

);

transform:skewX(-25deg);

transition:.8s;

}

.book-online:hover::before{

left:220%;

}

.book-protection{

display:flex;

justify-content:center;

align-items:center;

gap:8px;

margin-top:8px;

padding-top:14px;

border-top:1px solid #EEF2F8;

font-size:.76rem;

color:#75829A;

}

/*======================================================
ABONNEMENTS
======================================================*/
.subscriptions {
    padding: 80px 60px;
    background: linear-gradient(180deg, #F9FBFF, #EEF4FD);
    border-radius: 40px;
    box-shadow: var(--shadow-md);
}

.subscription-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.plan {
    position: relative;
    background: white;
    padding: 40px;
    border-radius: 30px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 2px solid transparent;
}

.plan:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.plan.popular {
    border-color: var(--secondary);
    transform: scale(1.03);
}

.plan-duration {
    display: inline-flex;
    padding: 8px 18px;
    border-radius: 50px;
    background: #EDF5FF;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.plan h3 {
    font-size: 2rem;
    margin-bottom: 12px;
    font-weight: 800;
}

.plan p {
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 30px;
    font-size: 0.95rem;
}

.popular-badge {
    position: absolute;
    top: 20px;
    right: -35px;
    padding: 8px 45px;
    background: var(--secondary);
    color: #111;
    font-weight: 800;
    font-size: .68rem;
    transform: rotate(45deg);
    box-shadow: var(--shadow-xs);
}

/*======================================================
VERSION PAPIER & GARANTIES
======================================================*/
.printed-book {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
    background: white;
    padding: 70px;
    border-radius: 40px;
    box-shadow: var(--shadow-md);
}

.printed-left span {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--secondary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.printed-left h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-weight: 800;
}

.printed-left p {
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 30px;
}

.printed-left ul {
    list-style: none;
    margin-bottom: 35px;
}

.printed-left li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    font-weight: 600;
}

.printed-left i {
    color: var(--success);
}

.printed-card {
    height: 380px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, var(--primary), #0B2355);
    box-shadow: 0 30px 60px rgba(13,47,111,.3);
}

.printed-card i {
    font-size: 7rem;
    color: white;
}

/*======================================================
GARANTIES & SÉCURITÉ (Ajouté pour correspondre au HTML)
======================================================*/
.security-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.security article {
    background: var(--surface);
    padding: 40px 30px;
    border-radius: 28px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.security article:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-md);
}

.security article i {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    border-radius: 50%;
    font-size: 1.8rem;
    color: white;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    box-shadow: 0 12px 25px rgba(30,91,184,.25);
}

.security h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.security p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 0.95rem;
}

/*======================================================
FAQ (Ajouté pour correspondre au HTML)
======================================================*/
.faq-list {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq details {
    background: white;
    padding: 24px 30px;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid #EFEFEF;
}

.faq details[open] {
    box-shadow: var(--shadow-md);
}

.faq summary {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary);
    cursor: pointer;
    outline: none;
}

.faq p {
    margin-top: 15px;
    color: var(--text-light);
    line-height: 1.8;
}

/*======================================================
CTA FINAL (Ajouté pour correspondre au HTML)
======================================================*/
.bottom-cta {
    background: linear-gradient(135deg, var(--primary), #0B2355);
    color: white;
    padding: 80px 60px;
    border-radius: 40px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.bottom-cta h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: white;
}

.bottom-cta p {
    max-width: 750px;
    margin: 0 auto 40px;
    font-size: 1.1rem;
    line-height: 1.8;
    opacity: 0.9;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.bottom-cta .btn-secondary {
    background: transparent;
    color: white;
    border-color: rgba(255, 255, 255, 0.4);
}

.bottom-cta .btn-secondary:hover {
    background: white;
    color: var(--primary);
}
/*======================================================
MODALE ABONNEMENTS
======================================================*/

.subscription-modal{

    position:fixed;
    
    inset:0;
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    padding:30px;
    
    opacity:0;
    
    visibility:hidden;
    
    pointer-events:none;
    
    transition:.35s;
    
    z-index:5000;
    
    }
    
    .subscription-modal.open{
    
    opacity:1;
    
    visibility:visible;
    
    pointer-events:auto;
    
    }
    
    .modal-overlay{
    
    position:absolute;
    
    inset:0;
    
    background:rgba(5,18,45,.55);
    
    backdrop-filter:blur(8px);
    
    -webkit-backdrop-filter:blur(8px);
    
    }
    
    .modal-window{
    
    position:relative;
    
    width:min(560px,95%);
    
    background:rgba(255,255,255,.94);
    
    backdrop-filter:blur(25px);
    
    -webkit-backdrop-filter:blur(25px);
    
    border-radius:32px;
    
    padding:45px;
    
    box-shadow:
    
    0 45px 90px rgba(0,0,0,.22);
    
    animation:modalOpen .45s cubic-bezier(.2,.8,.2,1);
    
    z-index:2;
    
    }
    
    .modal-close{
    
    position:absolute;
    
    right:18px;
    
    top:18px;
    
    width:46px;
    
    height:46px;
    
    border:none;
    
    border-radius:50%;
    
    background:#EEF4FD;
    
    color:var(--primary);
    
    font-size:1.2rem;
    
    cursor:pointer;
    
    transition:.3s;
    
    }
    
    .modal-close:hover{
    
    background:var(--primary);
    
    color:#fff;
    
    transform:rotate(90deg);
    
    }
    
    .modal-header{
    
    text-align:center;
    
    margin-bottom:35px;
    
    }
    
    .modal-header span{
    
    display:inline-block;
    
    padding:8px 18px;
    
    border-radius:999px;
    
    background:#EEF4FD;
    
    color:var(--primary);
    
    font-size:.78rem;
    
    font-weight:700;
    
    text-transform:uppercase;
    
    letter-spacing:1px;
    
    margin-bottom:18px;
    
    }
    
    .modal-header h2{
    
    font-size:2.2rem;
    
    font-weight:800;
    
    margin-bottom:15px;
    
    color:var(--primary);
    
    }
    
    .modal-header p{
    
    color:var(--text-light);
    
    line-height:1.8;
    
    }
    
    .modal-content{
    
    display:grid;
    
    gap:16px;
    
    margin-bottom:35px;
    
    }
    
    .modal-feature{
    
    display:flex;
    
    align-items:center;
    
    gap:16px;
    
    padding:18px 20px;
    
    background:#F8FBFF;
    
    border-radius:18px;
    
    }
    
    .modal-feature i{
    
    width:44px;
    
    height:44px;
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    border-radius:50%;
    
    background:linear-gradient(
    
    135deg,
    
    var(--primary),
    
    var(--primary-light)
    
    );
    
    color:white;
    
    flex:none;
    
    }
    
    .modal-footer{
    
    display:flex;
    
    justify-content:center;
    
    }
    
    .modal-footer .btn-primary{
    
    width:100%;
    
    padding:20px;
    
    }
    
    @keyframes modalOpen{
    
    from{
    
    opacity:0;
    
    transform:
    
    translateY(40px)
    
    scale(.92);
    
    }
    
    to{
    
    opacity:1;
    
    transform:none;
    
    }
    
    }
/*======================================================
RESPONSIVE DESIGN
======================================================*/
@media(max-width:1100px){

    .hero{
    
    grid-template-columns:1fr;
    
    row-gap:40px;
    
    }
    
    .hero-right{
    
    order:1;
    
    justify-content:center;
    
    }
    
    .hero-left{
    
    order:2;
    
    text-align:center;
    
    }
    
    .hero-book{
    
    transform:scale(1);
    
    max-width:850px;
    
    }
    
    .hero-features{

        display:flex;
        
        flex-wrap:wrap;
        
        gap:16px;
        
        margin:32px 0;
        
        }
        
        .hero-features>*{
        
        padding:13px 20px;
        
        border-radius:999px;
        
        background:rgba(255,255,255,.82);
        
        backdrop-filter:blur(10px);
        
        box-shadow:
        
        0 12px 26px rgba(13,47,111,.08);
        
        transition:.35s;
        
        }
        
        .hero-features>*:hover{
        
        transform:translateY(-6px);
        
        box-shadow:
        
        0 20px 40px rgba(13,47,111,.12);
        
        }
    
    .hero-buttons{

        display:flex;
        
        gap:18px;
        
        margin-top:38px;
        
        flex-wrap:wrap;
        
        }
        .hero::after{

            content:"";
            
            position:absolute;
            
            left:0;
            
            top:0;
            
            right:0;
            
            bottom:0;
            
            background:
            
            radial-gradient(
            
            circle at 20% 45%,
            
            rgba(20,60,160,.12),
            
            transparent 42%
            
            );
            
            pointer-events:none;
            
            }
    
    }

@media (max-width: 768px) {
    .hero h1{

        font-size:4.3rem;
        
        font-weight:900;
        
        line-height:1.02;
        
        letter-spacing:-2px;
        
        margin-bottom:22px;
        
        background:
        
        linear-gradient(
        
        180deg,
        
        #0D2F6F,
        
        #2E66C8
        
        );
        
        -webkit-background-clip:text;
        
        -webkit-text-fill-color:transparent;
        
        animation:titleReveal .8s ease;
        
        }
        .hero h1::after{

            content:"";
            
            display:block;
            
            width:90px;
            
            height:5px;
            
            margin-top:18px;
            
            border-radius:999px;
            
            background:
            
            linear-gradient(
            
            90deg,
            
            var(--secondary),
            
            transparent
            
            );
            
            }
    .numbers, .concept-grid, .security-grid, .subscription-grid, .books-grid {
        grid-template-columns: 1fr;
    }
    .catalogue, .subscriptions, .printed-book, .bottom-cta {
        padding: 30px 20px;
    }
}
@keyframes heroPanel{

    from{
    
    opacity:0;
    
    transform:
    
    translateX(70px)
    
    scale(.96);
    
    }
    
    to{
    
    opacity:1;
    
    transform:none;
    
    }
    
    }
    
    @keyframes panelGlow{
    
    0%,100%{
    
    transform:scale(.9);
    
    opacity:.45;
    
    }
    
    50%{
    
    transform:scale(1.2);
    
    opacity:1;
    
    }
    
    }
    
    @keyframes badgeShine{
    
    0%{
    
    left:-140%;
    
    }
    
    100%{
    
    left:220%;
    
    }
    
    }
    
    @keyframes titleReveal{
    
    from{
    
    opacity:0;
    
    transform:
    
    translateY(28px);
    
    }
    
    to{
    
    opacity:1;
    
    transform:none;
    
    }
    
    }
    /*======================================================
APPARITION DES SECTIONS
======================================================*/

section{

    opacity:0;
    
    transform:translateY(70px);
    
    transition:
    
    opacity .8s ease,
    
    transform .8s cubic-bezier(.2,.8,.2,1);
    
    }
    
    section.visible{
    
    opacity:1;
    
    transform:none;
    
    }
/*======================================================
PAGE PAIEMENT
======================================================*/

/*======================================================
PAGE PAIEMENT
======================================================*/

.payment-page{

    width:100%;

    min-height:100vh;

    padding:70px 20px;

    background:linear-gradient(135deg,#F4F7FB,#EEF3FA);

    display:flex;

    justify-content:center;

}

.payment-card{

    width:min(920px,100%);

    background:#FFF;

    border-radius:34px;

    padding:48px;

    box-shadow:0 35px 80px rgba(15,35,80,.12);

}

.payment-card>h1{

    color:var(--primary);

    font-size:2rem;

    font-weight:800;

    margin-bottom:10px;

}

.payment-card>p{

    color:var(--text-light);

    margin-bottom:35px;

}

.payment-layout{

    display:flex;

    flex-direction:column;

    gap:32px;

}

.payment-customer{

    padding:28px;

    background:#FFF;

    border:1px solid #E7EEF8;

    border-radius:22px;

    box-shadow:var(--shadow-xs);

}

.payment-customer h2{

    color:var(--primary);

    font-size:1.3rem;

    font-weight:800;

    margin-bottom:22px;

}

.payment-form{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    margin-bottom:8px;

    color:var(--primary);

    font-weight:700;

}

.form-group input{

    height:54px;

    padding:0 18px;

    border:2px solid #E5EDF8;

    border-radius:14px;

    background:#F9FBFF;

    font-size:.95rem;

    transition:.30s;

}

.form-group input:focus{

    outline:none;

    border-color:var(--primary-light);

    background:#FFF;

    box-shadow:0 0 0 4px rgba(30,91,184,.08);

}

/*==========================
RÉSUMÉ
==========================*/

.summary-title{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--primary);

    font-size:1.35rem;

    font-weight:800;

}

.summary-title i{

    color:var(--secondary);

}

.payment-summary{

    background:#F8FBFF;

    border:1px solid #E6EEF8;

    border-radius:24px;

    padding:30px;

}

.payment-summary>div{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

    border-bottom:1px solid #E7EDF7;

}

.payment-summary>div:last-child{

    border-bottom:none;

}

.payment-summary strong{

    color:var(--primary);

    font-weight:700;

}

.payment-summary span{

    font-size:1rem;

    font-weight:700;

    color:#203656;

}

.payment-total{

    margin-top:26px;

    padding:28px;

    border-radius:20px;

    text-align:center;

    background:linear-gradient(135deg,var(--primary),var(--primary-light));

    color:#FFF;

    box-shadow:0 20px 40px rgba(13,47,111,.18);

}

.payment-total small{

    display:block;

    opacity:.9;

    margin-bottom:8px;

    letter-spacing:1px;

}

.payment-total strong{

    display:block;

    color:#FFF;

    font-size:2rem;

    font-weight:800;

}
/*==========================================================
MODALE DE VERIFICATION DU PAIEMENT
==========================================================*/

.payment-modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(10,18,40,.55);

    backdrop-filter:blur(8px);

    z-index:9999;

    animation:fadeModal .25s ease;

}

.payment-modal-content{

    width:min(96%,760px);
    max-height:92vh;

    overflow-y:auto;

    background:#fff;

    border-radius:28px;

    padding:42px;

    box-shadow:0 35px 90px rgba(0,0,0,.22);

    animation:zoomModal .30s ease;

}

.payment-modal-content h2{

    margin:0 0 25px;

    color:#153B8A;

    font-size:28px;

    font-weight:700;

}

.payment-modal-content p{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 18px;

    margin:12px 0;

    background:#F4F7FC;

    border-radius:14px;

    font-size:16px;

}

.payment-modal-content strong{

    color:#16386D;

}

.payment-modal-content span{

    font-weight:600;

    color:#1A1A1A;

}

#paymentProof{

    width:100%;

    margin-top:22px;

    padding:14px;

    border:2px dashed #C8D5F0;

    border-radius:14px;

    background:#FAFCFF;

    cursor:pointer;

}

#paymentProof:hover{

    border-color:#1E4EA8;

}

.payment-modal-content button{

    margin-top:24px;

}

.payment-modal-content .btn-primary,

.payment-modal-content .btn-secondary{

    width:48%;

}

.payment-modal-content .btn-secondary{

    margin-left:4%;

}

@keyframes fadeModal{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes zoomModal{

    from{

        opacity:0;

        transform:scale(.92);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@media(max-width:650px){

    .payment-modal-content{

        padding:25px;

    }

    .payment-modal-content p{

        flex-direction:column;

        align-items:flex-start;

        gap:6px;

    }

    .payment-modal-content .btn-primary,

    .payment-modal-content .btn-secondary{

        width:100%;

        margin:15px 0 0;

    }

}
/*==========================================================
AMÉLIORATIONS PREMIUM DE LA MODALE
==========================================================*/

.modal-icon{

    width:90px;

    height:90px;

    margin:0 auto 20px;

    border-radius:50%;

    background:linear-gradient(135deg,#1E4EA8,#153B8A);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:40px;

    box-shadow:0 15px 35px rgba(30,78,168,.30);

}

.modal-subtitle{

    text-align:center;

    color:#667085;

    margin-bottom:28px;

    line-height:1.6;

}

.payment-info-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

    margin-bottom:28px;

}

.info-card{

    background:#F8FAFD;

    border:1px solid #E3EBF8;

    border-radius:18px;

    padding:20px;

    text-align:center;

    transition:.30s;

}

.info-card:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 30px rgba(21,59,138,.12);

    border-color:#1E4EA8;

}

.info-card i{

    font-size:26px;

    color:#1E4EA8;

    margin-bottom:12px;

}

.info-card small{

    display:block;

    color:#7B8798;

    margin-bottom:8px;

}

.info-card strong{

    display:block;

    color:#16386D;

    font-size:18px;

}

.upload-zone{

    border:2px dashed #C7D6F4;

    border-radius:22px;

    background:#FAFCFF;

    padding:38px 20px;

    text-align:center;

    cursor:pointer;

    transition:.30s;

    display:block;

}

.upload-zone:hover{

    border-color:#1E4EA8;

    background:#F4F8FF;

    transform:scale(1.01);

}

.upload-zone i{

    font-size:48px;

    color:#1E4EA8;

    margin-bottom:18px;

}

.upload-zone h3{

    margin:0;

    color:#153B8A;

}

.upload-zone span{

    display:block;

    margin-top:10px;

    color:#6B7280;

    font-size:15px;

}

#selectedFile{

    margin-top:18px;

    text-align:center;

    font-weight:600;

    color:#16386D;

    min-height:24px;

}

.modal-buttons{

    display:flex;

    gap:18px;

    margin-top:30px;

}

.modal-buttons button{

    flex:1;

}

.modal-buttons .btn-primary{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

}

@media(max-width:768px){

    .payment-info-grid{

        grid-template-columns:1fr;

    }

    .modal-buttons{

        flex-direction:column;

    }

}
/*======================================================
CARTE DE RÉSULTAT PREMIUM
======================================================*/

.payment-result{

    margin-top:32px;

    border-radius:28px;

    overflow:hidden;

    background:#FFF;

    box-shadow:
        0 20px 45px rgba(20,40,90,.10);

    animation:fadeIn .35s ease;

}

.payment-result.success{

    border:2px solid #22C55E;

}

.payment-result.error{

    border:2px solid #EF4444;

}

.result-header{

    padding:32px;

    text-align:center;

    color:white;

}

.payment-result.success .result-header{

    background:
    linear-gradient(135deg,#16A34A,#22C55E);

}

.payment-result.error .result-header{

    background:
    linear-gradient(135deg,#DC2626,#EF4444);

}

.result-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:44px;

    margin-bottom:18px;

}

.result-header h3{

    margin:0;

    font-size:28px;

    font-weight:800;

    color:white;

}

.result-subtitle{

    margin-top:8px;

    opacity:.95;

    font-size:15px;

}

.result-body{

    padding:28px;

}

.result-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.result-item{

    background:#F7FAFF;

    border:1px solid #E4ECF8;

    border-radius:18px;

    padding:18px;

}

.result-item small{

    display:block;

    color:#6B7280;

    margin-bottom:8px;

    font-size:13px;

}

.result-item strong{

    display:block;

    color:#153B8A;

    font-size:17px;

}

.result-reason{

    margin-bottom:18px;

    padding:20px;

    border-radius:18px;

    background:#F5F8FD;

    border-left:5px solid #1E4EA8;

    line-height:1.8;

}           
#selectedFile{

    margin-top:15px;

    text-align:center;

    color:#16386D;

    font-weight:600;

}

#selectedFile i{

    color:#20B15A;

    margin-right:8px;

}
.selected-file{

    margin-top:18px;

    padding:16px;

    border:2px dashed #D8E3F8;

    border-radius:16px;

    display:flex;

    align-items:center;

    gap:16px;

    background:white;

}

.file-preview{

    width:80px;

    height:80px;

    border-radius:12px;

    background:#EEF4FF;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    flex-shrink:0;

}

.file-preview img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.file-preview i{

    font-size:38px;

    color:#1D4EA5;

}

.file-info{

    flex:1;

}

.file-info strong{

    display:block;

    color:#16386D;

    margin-bottom:6px;

}

.file-info small{

    color:#666;

}
/*======================================================
BOUTONS APRÈS VÉRIFICATION
======================================================*/

.result-actions{

    display:flex;

    gap:18px;

    margin-top:28px;

    width:100%;

    animation:fadeIn .35s ease;

}

.result-actions>*{

    flex:1;

}

.result-actions .btn-primary,
.result-actions .btn-secondary{

    height:58px;

    border-radius:18px;

    font-size:15px;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    text-decoration:none;

    transition:.30s;

}

.result-actions .btn-primary{

    background:linear-gradient(135deg,#123F92,#1F63D8);

    color:#FFF;

    border:none;

    box-shadow:0 12px 30px rgba(18,63,146,.28);

}

.result-actions .btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:0 20px 38px rgba(18,63,146,.35);

}

.result-actions .btn-secondary{

    background:#FFF;

    color:#153B8A;

    border:2px solid #D9E5FA;

}

.result-actions .btn-secondary:hover{

    background:#153B8A;

    color:#FFF;

    border-color:#153B8A;

    transform:translateY(-3px);

}

.result-actions i{

    font-size:16px;

}
@media(max-width:700px){

    .payment-modal-content{

        width:96%;

        padding:28px;

    }

    .result-actions{

        flex-direction:column;

    }

}
/*======================================================
RÉSUMÉ DE LA COMMANDE
======================================================*/

.summary-title{

    display:flex;

    align-items:center;

    gap:12px;

    margin:35px 0 20px;

    color:var(--primary);

    font-size:1.35rem;

    font-weight:800;

}

.summary-title i{

    color:var(--secondary);

}

.payment-summary{

    background:#F8FBFF;

    border:1px solid #E6EEF9;

    border-radius:22px;

    padding:25px;

}

.payment-summary>div{

    display:grid;

    grid-template-columns:180px 1fr;

    gap:20px;

    align-items:center;

    padding:18px 0;

    border-bottom:1px solid #E7EDF7;

}

.payment-summary>div:last-child{

    border-bottom:none;

}

.payment-summary strong{

    color:var(--primary);

}

.payment-summary span{

    font-weight:700;

    color:var(--text);

}

.payment-total{

    margin-top:18px;

    padding:25px;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    text-align:center;

    color:white;

    box-shadow:var(--shadow-md);

}

.payment-total small{

    display:block;

    margin-bottom:10px;

    letter-spacing:2px;

    font-size:.8rem;

    opacity:.9;

}

.payment-total strong{

    display:block;

    font-size:2rem;

    font-weight:800;

}
/*======================================================
INFORMATIONS DU REQUÉRANT
======================================================*/

.payment-customer{

    margin:35px 0;

    padding:28px;

    background:#FFFFFF;

    border:1px solid #E6EEF9;

    border-radius:22px;

    box-shadow:var(--shadow-xs);

}

.payment-customer h2{

    margin-bottom:22px;

    color:var(--primary);

    font-size:1.35rem;

    font-weight:800;

}

.payment-form{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    margin-bottom:8px;

    font-weight:700;

    color:var(--primary);

}

.form-group input{

    padding:16px 18px;

    border:2px solid #E6EEF9;

    border-radius:14px;

    background:#F9FBFF;

    font-size:1rem;

    transition:.3s;

}

.form-group input:focus{

    outline:none;

    border-color:var(--primary-light);

    background:#FFFFFF;

    box-shadow:0 0 0 4px rgba(30,91,184,.10);

}

@media(max-width:768px){

    .payment-form{

        grid-template-columns:1fr;

    }

}
/*======================================================
VALIDATION DES CHAMPS
======================================================*/

.field-error{

    display:block;

    min-height:20px;

    margin-top:8px;

    color:var(--danger);

    font-size:.82rem;

    font-weight:600;

}

.form-group.error input{

    border-color:var(--danger);

    background:#FFF7F7;

    box-shadow:0 0 0 4px rgba(229,62,62,.10);

}

.form-group.success input{

    border-color:var(--success);

}
/*======================================================
MOYENS DE PAIEMENT
======================================================*/

.payment-methods{

    margin-top:35px;

}

.payment-methods h2{

    margin-bottom:24px;

    color:var(--primary);

    font-size:1.35rem;

    font-weight:800;

}

.method-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(130px,1fr));

    gap:18px;

}

.payment-method{

    position:relative;

    min-height:170px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:14px;

    padding:22px;

    background:#FFF;

    border:2px solid #E7EEF8;

    border-radius:22px;

    cursor:pointer;

    transition:.30s;

}

.payment-method:hover{

    transform:translateY(-6px);

    border-color:var(--primary-light);

    box-shadow:0 18px 40px rgba(13,47,111,.10);

}

.payment-method.active{

    border-color:var(--secondary);

    background:#FFFBEF;

}

.payment-method.active::after{

    content:"✓";

    position:absolute;

    top:12px;

    right:12px;

    width:28px;

    height:28px;

    border-radius:50%;

    background:#20B15A;

    color:#FFF;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

}

.payment-method img{

    width:64px;

    height:64px;

    object-fit:contain;

}

.payment-bank-icon{

    font-size:3rem;

    color:var(--primary);

}

.payment-method span{

    text-align:center;

    font-size:.9rem;

    font-weight:700;

    color:var(--primary);

}

.payment-actions{

    display:flex;

    justify-content:flex-end;

    gap:18px;

    margin-top:32px;

    flex-wrap:wrap;

}

.payment-actions .btn-primary,

.payment-actions .btn-secondary{

    min-width:180px;

}
/*======================================================
CHOIX DE LA FORMULE D'ABONNEMENT
======================================================*/

#subscriptionChooser{

    margin:25px 0 35px;

    padding:40px;

    border-radius:30px;

    background:
    linear-gradient(135deg,#ffffff,#F5F9FF);

    border:1px solid #E4ECF9;

    box-shadow:
    0 25px 60px rgba(13,47,111,.08);

    animation:chooserAppear .7s cubic-bezier(.2,.8,.2,1);

}

#subscriptionChooser h2{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    margin-bottom:32px;

    font-size:2rem;

    font-weight:800;

    color:var(--primary);

    text-align:center;

}

#subscriptionChooser h2 i{

    color:var(--secondary);

    font-size:2rem;

    animation:crownFloat 3s ease-in-out infinite;

}

.chooser-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}

.chooser-plan{

    position:relative;

    overflow:hidden;

    border:none;

    cursor:pointer;

    padding:34px 20px;

    border-radius:24px;

    background:

    linear-gradient(135deg,#0D2F6F,#245FC0);

    color:#FFF;

    transition:.40s cubic-bezier(.2,.8,.2,1);

    box-shadow:

    0 18px 40px rgba(13,47,111,.18);

}

.chooser-plan::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:70%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.75),

    transparent

    );

    transform:skewX(-25deg);

}

.chooser-plan:hover::before{

    animation:shine .9s;

}

.chooser-plan:hover{

    transform:

    translateY(-12px)

    scale(1.04);

    box-shadow:

    0 35px 60px rgba(13,47,111,.30);

}

.chooser-plan strong{

    display:block;

    font-size:1.45rem;

    font-weight:800;

    margin-bottom:18px;

}

.chooser-plan span{

    display:block;

    font-size:.95rem;

    opacity:.95;

    line-height:1.7;

}

.chooser-plan:nth-child(2){

    background:

    linear-gradient(135deg,#D4AF37,#FFD86E);

    color:#14284D;

    transform:scale(1.05);

}

.chooser-plan:nth-child(2)::after{

    content:"LE PLUS POPULAIRE";

    position:absolute;

    top:18px;

    right:-45px;

    width:170px;

    text-align:center;

    padding:7px 0;

    font-size:.65rem;

    font-weight:800;

    background:#FFF;

    color:#D4AF37;

    transform:rotate(45deg);

    box-shadow:0 8px 20px rgba(0,0,0,.10);

}

.chooser-plan:nth-child(3){

    background:

    linear-gradient(135deg,#1F7A52,#31B96F);

}

@keyframes chooserAppear{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes crownFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

@keyframes shine{

    from{

        left:-120%;

    }

    to{

        left:220%;

    }

}

@media(max-width:900px){

    .chooser-grid{

        grid-template-columns:1fr;

    }

    .chooser-plan:nth-child(2){

        transform:none;

    }

}
/*==========================================================
MISE EN ÉVIDENCE DU CATALOGUE
==========================================================*/

.catalogue{

    transition:
        box-shadow .45s,
        transform .45s;

}

.catalogue-highlight{

    animation:
        cataloguePulse
        1.4s ease;

}

@keyframes cataloguePulse{

    0%{

        transform:scale(1);

        box-shadow:none;

    }

    30%{

        transform:scale(1.01);

        box-shadow:

            0 0 0 10px rgba(13,71,161,.12),

            0 15px 45px rgba(13,71,161,.18);

    }

    100%{

        transform:scale(1);

        box-shadow:none;

    }

}