/* =========================================================
   CSA Tir Bonaparte
   Page publique : Demande d'essai
   Fichier : assets/css/demande-essai.css
========================================================= */

:root{
    --de-bg:#f3f0e8;
    --de-paper:#fffdf8;
    --de-dark:#111820;
    --de-dark-2:#1b2630;
    --de-gold:#cfa542;
    --de-gold-dark:#9e7825;
    --de-red:#b93a2e;
    --de-text:#20282f;
    --de-muted:#66717a;
    --de-line:#e6dfd0;
    --de-soft:#f8f4e9;
    --de-success:#e8f5ec;
    --de-success-text:#235f3b;
    --de-error:#fff0ee;
    --de-error-text:#8c3128;
    --de-shadow:0 18px 50px rgba(10,17,24,.10);
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--de-bg);
}

/* ---------------------------------------------------------
   Conteneur de page
--------------------------------------------------------- */

.section-shell{
    width:min(1180px, calc(100% - 32px));
    margin-left:auto;
    margin-right:auto;
}

/* ---------------------------------------------------------
   Styles communs
--------------------------------------------------------- */

.section-kicker{
    margin:0 0 10px;
    color:var(--de-gold-dark);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.14em;
}

.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:0 22px;
    border-radius:12px;
    border:1px solid transparent;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

.button:hover{
    transform:translateY(-1px);
}

.button--gold{
    background:var(--de-gold);
    color:#111;
    box-shadow:0 10px 22px rgba(207,165,66,.20);
}

.button--gold:hover{
    background:#d7b55e;
}

.button--outline{
    border-color:rgba(255,255,255,.28);
    background:rgba(255,255,255,.06);
    color:#fff;
}

.button--outline:hover{
    background:rgba(255,255,255,.12);
}

/* ---------------------------------------------------------
   Hero
--------------------------------------------------------- */

.trial-hero{
    padding:28px 0 34px;
    background:
        radial-gradient(
            circle at 12% 10%,
            rgba(207,165,66,.13),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #0f1720 0%,
            #121c26 100%
        );
}

.trial-hero__grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(420px,.95fr);
    gap:0;
    overflow:hidden;
    border:1px solid rgba(207,165,66,.38);
    border-radius:28px;
    background:#101820;
    box-shadow:0 26px 70px rgba(0,0,0,.24);
}

.trial-hero__content{
    padding:48px 44px;
    color:#fff;
    background:
        radial-gradient(
            circle at 12% 12%,
            rgba(207,165,66,.13),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(15,23,32,.98),
            rgba(18,28,38,.96)
        );
}

.trial-hero__content .section-kicker{
    color:#e5c87c;
}

.trial-hero h1{
    margin:0 0 18px;
    color:#fff;
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(42px,5vw,68px);
    line-height:1.03;
    font-weight:700;
}

.trial-hero h1 span{
    color:var(--de-gold);
}

.trial-hero__lead{
    max-width:650px;
    margin:0;
    color:#dce2e8;
    font-size:19px;
    line-height:1.65;
}

.trial-hero__highlights{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin:28px 0;
}

.trial-hero__highlights article{
    padding:17px 18px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:16px;
    background:rgba(255,255,255,.055);
}

.trial-hero__highlights strong{
    display:block;
    margin-bottom:7px;
    color:#fff;
    font-size:14px;
}

.trial-hero__highlights span{
    display:block;
    color:#cbd3db;
    font-size:13px;
    line-height:1.55;
}

.trial-hero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.trial-hero__visual{
    position:relative;
    min-height:560px;
    margin:0;
    background:#1a222b;
}

.trial-hero__visual img{
    width:100%;
    height:100%;
    min-height:560px;
    object-fit:cover;
    display:block;
}

.trial-hero__visual::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(
            180deg,
            rgba(8,12,17,.06),
            rgba(8,12,17,.18)
        );
}

.trial-hero__visual figcaption{
    position:absolute;
    z-index:2;
    left:24px;
    right:24px;
    bottom:24px;
    padding:17px 18px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:16px;
    background:rgba(15,23,32,.82);
    backdrop-filter:blur(8px);
    color:#fff;
}

.trial-hero__visual figcaption strong{
    display:block;
    margin-bottom:5px;
    color:#fff;
    font-size:15px;
}

.trial-hero__visual figcaption span{
    color:#d5dce2;
    font-size:13px;
    line-height:1.5;
}

/* ---------------------------------------------------------
   Introduction
--------------------------------------------------------- */

.trial-intro{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:42px;
    padding-top:54px;
    padding-bottom:32px;
}

.trial-intro__heading h2{
    margin:0;
    color:var(--de-dark);
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(34px,4vw,50px);
    line-height:1.12;
}

.trial-intro__heading h2 span{
    color:var(--de-gold-dark);
}

.trial-intro__text{
    padding-top:20px;
}

.trial-intro__text p{
    margin:0 0 16px;
    color:var(--de-muted);
    font-size:16px;
    line-height:1.75;
}

.trial-intro__text strong{
    color:var(--de-dark);
}

/* ---------------------------------------------------------
   Cartes Plomb / Balle
--------------------------------------------------------- */

.trial-path{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
    padding-bottom:42px;
}

.trial-card{
    overflow:hidden;
    border:1px solid var(--de-line);
    border-radius:24px;
    background:var(--de-paper);
    box-shadow:var(--de-shadow);
}

.trial-card__media{
    position:relative;
    margin:0;
    height:300px;
    overflow:hidden;
    background:#17212b;
}

.trial-card__media::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(10,14,19,.04),
            rgba(10,14,19,.18)
        );
}

.trial-card__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .45s ease;
}

.trial-card:hover .trial-card__media img{
    transform:scale(1.025);
}

.trial-card__body{
    position:relative;
    padding:28px;
}

.trial-card__number{
    position:absolute;
    top:-23px;
    right:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--de-dark);
    color:var(--de-gold);
    border:3px solid var(--de-paper);
    font-size:16px;
    font-weight:900;
}

.trial-card__tag{
    margin:0 0 9px;
    color:var(--de-gold-dark);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.trial-card h3{
    margin:0 0 12px;
    color:var(--de-dark);
    font-family:Georgia, "Times New Roman", serif;
    font-size:28px;
}

.trial-card p{
    margin:0 0 16px;
    color:var(--de-muted);
    line-height:1.68;
}

.trial-card ul{
    margin:0;
    padding-left:20px;
    color:#3e474e;
    line-height:1.75;
}

.trial-card li + li{
    margin-top:3px;
}

/* ---------------------------------------------------------
   Conseil du club
--------------------------------------------------------- */

.trial-advice{
    padding:44px 0;
    background:
        linear-gradient(
            135deg,
            rgba(207,165,66,.10),
            rgba(255,255,255,.55)
        ),
        #ebe5d8;
    border-top:1px solid #ddd3bd;
    border-bottom:1px solid #ddd3bd;
}

.trial-advice__grid{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:26px;
    align-items:stretch;
}

.trial-advice__content{
    padding:34px;
    border:1px solid #e2d8c3;
    border-radius:24px;
    background:var(--de-paper);
    box-shadow:var(--de-shadow);
}

.trial-advice__content h2{
    margin:0 0 16px;
    color:var(--de-dark);
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(32px,3.4vw,46px);
    line-height:1.14;
}

.trial-advice__content > p{
    margin:0 0 24px;
    color:var(--de-muted);
    line-height:1.72;
}

.trial-advice__steps{
    display:grid;
    gap:12px;
}

.trial-advice__steps div{
    display:grid;
    grid-template-columns:44px 1fr;
    grid-template-areas:
        "num title"
        "num text";
    gap:3px 12px;
    align-items:center;
    padding:14px 16px;
    border:1px solid #eadfc6;
    border-radius:15px;
    background:#fbf6e9;
}

.trial-advice__steps span{
    grid-area:num;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--de-dark);
    color:var(--de-gold);
    font-weight:900;
}

.trial-advice__steps strong{
    grid-area:title;
    color:var(--de-dark);
    font-size:14px;
}

.trial-advice__steps small{
    grid-area:text;
    color:var(--de-muted);
    font-size:12px;
    line-height:1.45;
}

.trial-advice__visual{
    margin:0;
    overflow:hidden;
    border-radius:24px;
    background:#111820;
    box-shadow:var(--de-shadow);
}

.trial-advice__visual img{
    width:100%;
    height:100%;
    min-height:100%;
    object-fit:cover;
    display:block;
}

/* ---------------------------------------------------------
   Formulaire
--------------------------------------------------------- */

.trial-form-section{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:26px;
    padding-top:46px;
    padding-bottom:56px;
    align-items:start;
}

.trial-form-info,
.trial-form-card{
    border:1px solid var(--de-line);
    border-radius:24px;
    background:var(--de-paper);
    box-shadow:var(--de-shadow);
}

.trial-form-info{
    padding:28px;
}

.trial-form-info h2,
.trial-form-card h2{
    margin:0 0 12px;
    color:var(--de-dark);
    font-family:Georgia, "Times New Roman", serif;
    font-size:32px;
}

.trial-form-info > p{
    margin:0;
    color:var(--de-muted);
    line-height:1.68;
}

.trial-form-info figure{
    overflow:hidden;
    margin:22px 0 18px;
    border-radius:18px;
    background:#18222c;
}

.trial-form-info figure img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
}

.trial-form-info__notice{
    display:grid;
    gap:5px;
    padding:15px 16px;
    border:1px solid #e1c978;
    border-radius:14px;
    background:#fff8df;
    color:#6e5519;
}

.trial-form-info__notice strong{
    font-size:14px;
}

.trial-form-info__notice span{
    font-size:13px;
    line-height:1.5;
}

.trial-form-card{
    padding:30px;
}

.trial-form-card header{
    margin-bottom:22px;
}

.trial-form-card header > p:last-child{
    margin:0;
    color:var(--de-muted);
    font-size:14px;
}

.trial-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.trial-field{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.trial-field--full{
    grid-column:1 / -1;
}

.trial-field label{
    color:var(--de-dark);
    font-size:13px;
    font-weight:800;
}

.trial-field input,
.trial-field select{
    width:100%;
    min-height:50px;
    padding:0 13px;
    border:1px solid #d6d0c4;
    border-radius:12px;
    background:#fff;
    color:#161b20;
    font:inherit;
}

.trial-field input:focus,
.trial-field select:focus{
    outline:3px solid rgba(207,165,66,.18);
    border-color:var(--de-gold);
}

.trial-form-note{
    margin-top:18px;
    padding:15px 16px;
    border:1px solid #d9dfe4;
    border-radius:14px;
    background:#f6f8fa;
    color:#4f5a63;
    font-size:13px;
    line-height:1.55;
}

.trial-form-note strong{
    color:var(--de-dark);
}

/* ---------------------------------------------------------
   Alertes
--------------------------------------------------------- */

.trial-alert{
    display:grid;
    gap:7px;
    margin:0 0 20px;
    padding:16px 18px;
    border-radius:14px;
    font-size:14px;
    line-height:1.55;
}

.trial-alert strong{
    font-size:15px;
}

.trial-alert span{
    display:block;
}

.trial-alert ul{
    margin:4px 0 0;
    padding-left:20px;
}

.trial-alert--success{
    border:1px solid #aed0b9;
    background:var(--de-success);
    color:var(--de-success-text);
}

.trial-alert--error{
    border:1px solid #e5b8b1;
    background:var(--de-error);
    color:var(--de-error-text);
}

/* ---------------------------------------------------------
   Consentement / confidentialité / anti-spam
--------------------------------------------------------- */

.trial-consent{
    display:flex;
    align-items:flex-start;
    gap:11px;
    margin-top:18px;
    padding:15px 16px;
    border:1px solid #e3dbce;
    border-radius:14px;
    background:#faf7f0;
    color:#4d565e;
    font-size:13px;
    line-height:1.55;
    cursor:pointer;
}

.trial-consent input{
    flex:0 0 auto;
    width:18px;
    height:18px;
    min-height:0;
    margin:2px 0 0;
    accent-color:var(--de-gold);
}

.trial-privacy{
    margin:12px 0 0;
    color:#737b83;
    font-size:12px;
    line-height:1.55;
}

.trial-privacy a{
    color:#87671f;
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:2px;
}

.trial-form-submit{
    width:100%;
    margin-top:18px;
    border:0;
}

.trial-honeypot{
    position:absolute !important;
    left:-10000px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */

@media (max-width:1050px){

    .trial-hero__grid,
    .trial-intro,
    .trial-advice__grid,
    .trial-form-section{
        grid-template-columns:1fr;
    }

    .trial-hero__visual{
        min-height:420px;
    }

    .trial-hero__visual img{
        min-height:420px;
    }

    .trial-intro__text{
        padding-top:0;
    }
}

@media (max-width:780px){

    .section-shell{
        width:min(100% - 22px, 1180px);
    }

    .trial-hero{
        padding-top:16px;
    }

    .trial-hero__grid{
        border-radius:20px;
    }

    .trial-hero__content{
        padding:30px 22px;
    }

    .trial-hero h1{
        font-size:42px;
    }

    .trial-hero__lead{
        font-size:17px;
    }

    .trial-hero__highlights,
    .trial-path,
    .trial-form-grid{
        grid-template-columns:1fr;
    }

    .trial-hero__visual,
    .trial-hero__visual img{
        min-height:330px;
    }

    .trial-intro{
        gap:20px;
        padding-top:38px;
    }

    .trial-intro__heading h2{
        font-size:34px;
    }

    .trial-path{
        gap:18px;
    }

    .trial-card__media{
        height:230px;
    }

    .trial-card__body{
        padding:24px 20px;
    }

    .trial-advice{
        padding:32px 0;
    }

    .trial-advice__content,
    .trial-form-info,
    .trial-form-card{
        padding:22px;
    }

    .trial-advice__content h2,
    .trial-form-info h2,
    .trial-form-card h2{
        font-size:29px;
    }

    .trial-advice__visual img{
        min-height:300px;
    }

    .trial-field--full{
        grid-column:auto;
    }
}

@media (max-width:520px){

    .trial-hero__actions{
        flex-direction:column;
    }

    .trial-hero__actions .button{
        width:100%;
    }

    .trial-hero__visual figcaption{
        left:14px;
        right:14px;
        bottom:14px;
    }

    .trial-advice__steps div{
        grid-template-columns:38px 1fr;
    }

    .trial-form-submit{
        min-height:54px;
    }
}