/* ======================================================
   HERO
====================================================== */

.prof-page{

    color:#fff;

    background:

        radial-gradient(circle at left center,
            rgba(160,20,10,.30) 0%,
            transparent 35%),

        radial-gradient(circle at right top,
            rgba(110,10,10,.18) 0%,
            transparent 35%),

        linear-gradient(
            110deg,
            #4a0907 0%,
            #1a0808 35%,
            #0d0d0d 65%,
            #070707 100%
        );
}

.prof-hero{
    position:relative;
    height:420px;

    background:
    linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.72)),
    radial-gradient(circle at top left,#8c120c 0%,transparent 45%),
    url("/images/accueil/champion.jpg");

    background-size:cover;
    background-position:center top;
    display:flex;
    align-items:center;
}

.prof-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,
    rgba(0,0,0,.75) 0%,
    rgba(0,0,0,.35) 60%,
    rgba(0,0,0,.75) 100%);
}

.prof-container{

    position:relative;
    z-index:2;

    width:min(1200px,90%);
    margin:auto;
}

.hero-kicker{

    color:#d83b2d;
    text-transform:uppercase;
    letter-spacing:3px;
    font-weight:700;
}

.prof-hero h1{

    font-size:72px;
    font-weight:900;
    margin:15px 0;
    line-height:.95;
}

.prof-hero h1 span{

    display:block;
    color:#d83b2d;
}

.prof-hero p{

    width:520px;
    max-width:100%;
    color:#ddd;
    font-size:20px;
}


/* ======================================================
   SECTION
====================================================== */

.prof-section{

    width:min(1460px,94%);
    margin:auto;
    padding:90px 0;
}


/* ======================================================
   GRID
====================================================== */

.prof-grid{

    display:grid;

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

    gap:32px;

    align-items:start;
}

/* ======================================================
   CARD
====================================================== */

.coach-card{

    position:relative;

    background:#131313;

    border-radius:18px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.06);

    transition:.35s;

    display:flex;
    flex-direction:column;

    align-self:start;
}

.coach-card:focus-visible{

    outline:2px solid #d83b2d;
    outline-offset:4px;
}

.coach-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 20px 40px rgba(0,0,0,.35),
        0 0 25px rgba(220,45,35,.25);
}


/* IMAGE */

.coach-photo{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    background:#181818;
}

.coach-photo img{

    width:100%;

    height:auto;

    display:block;

    transition:.5s;

    border-radius:12px;
}

.coach-card:hover .coach-photo img{

    transform:scale(1.03);
}

.coach-details{

    position:absolute;
    z-index:4;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:38px 32px;

    background:
        linear-gradient(180deg,rgba(7,7,7,.38) 0%,rgba(7,7,7,.92) 43%,#090909 100%),
        radial-gradient(circle at right top,rgba(216,59,45,.28),transparent 40%);

    opacity:0;
    visibility:hidden;
    transform:translateY(14px);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease;
}

.coach-card:hover .coach-details,
.coach-card:focus-within .coach-details{

    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.coach-details-kicker{

    color:#ff6256;
    font-size:12px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.coach-details h3{

    margin:10px 0 22px;
    color:#fff;
    font-size:27px;
    font-weight:900;
}

.coach-details ul{

    display:grid;
    gap:13px;
    margin:0;
    padding:0;
    list-style:none;
}

.coach-details li{

    display:flex;
    align-items:flex-start;
    gap:11px;
    color:#e5e5e5;
    font-size:14px;
    line-height:1.45;
}

.coach-details li i{

    margin-top:4px;
    color:#d83b2d;
    font-size:9px;
}

.coach-biography{
    max-height:330px;
    padding-right:10px;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:#d83b2d rgba(255,255,255,.08);
}

.coach-biography p{
    margin:0 0 14px;
    color:#e5e5e5;
    font-size:13px;
    line-height:1.55;
}

.coach-biography p:last-child{
    margin-bottom:0;
}

.coach-biography::-webkit-scrollbar{
    width:5px;
}

.coach-biography::-webkit-scrollbar-thumb{
    border-radius:10px;
    background:#d83b2d;
}

.coach-details-hint{

    margin-top:24px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.13);
    color:#9d9d9d;
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}


/* TEXTE */

.coach-body{

    padding:24px;
}

.coach-body h2{

    margin:0;

    font-size:30px;

    font-weight:800;

    line-height:1.15;
}

.coach-grade{

    display:inline-block;

    margin-top:14px;

    padding:6px 14px;

    border-radius:50px;

    background:#d83b2d;

    color:white;

    font-size:12px;

    letter-spacing:1px;

    text-transform:uppercase;

    font-weight:700;
}

.coach-palmares{

    margin-top:20px;

    color:#cfcfcf;

    line-height:1.7;

    font-size:15px;
}

.coach-body a{

    margin-top:20px;

    display:inline-block;

    color:#d83b2d;

    text-decoration:none;

    font-weight:700;

    transition:.3s;
}

.coach-body a:hover{

    color:#fff;
}
/* ======================================================
   BAS DE PAGE
====================================================== */

.prof-bottom{

    width:min(1300px,92%);
    margin:80px auto;

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:40px;
}

.prof-values{

    background:#121212;

    padding:60px;

    border-radius:18px;
}

.prof-values h2{

    font-size:42px;

    margin-bottom:15px;
}

.prof-values p{

    color:#cfcfcf;

    margin-bottom:45px;
}


/* ======================================================
   VALUES
====================================================== */

.value-grid{

    display:grid;

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

    gap:25px;
}

.value-grid div{

    background:#1a1a1a;

    border-radius:15px;

    padding:30px;

    text-align:center;

    transition:.3s;
}

.value-grid div:hover{

    transform:translateY(-5px);

    background:#d83b2d;
}

.value-grid div{

    font-size:34px;
}

.value-grid h4{

    margin-top:20px;

    font-size:18px;

    font-weight:700;
}


/* ======================================================
   CONTACT
====================================================== */

.prof-contact{

    border-radius:18px;

    padding:50px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    background:linear-gradient(135deg,#d83b2d,#8e2117);
}

.prof-contact h2{

    font-size:38px;

    margin-bottom:20px;
}

.prof-contact p{

    color:#f5f5f5;

    line-height:1.8;

    margin-bottom:35px;
}

.prof-contact .bt-btn{

    align-self:flex-start;

    background:white;

    color:#b62518;

    padding:16px 28px;

    border-radius:10px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;
}

.prof-contact .bt-btn:hover{

    transform:translateY(-3px);

    background:#000;

    color:white;
}


/* ======================================================
   RESPONSIVE
====================================================== */

@media(max-width:992px){

.prof-grid{

    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;
}

.prof-bottom{

    grid-template-columns:1fr;
}

.value-grid{

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

.prof-hero{

    height:340px;
}

.prof-hero h1{

    font-size:56px;
}

}

@media(max-width:650px){

.prof-grid{

    grid-template-columns:1fr;
}

.prof-hero{

    height:300px;
}

.prof-hero h1{

    font-size:42px;
}

.prof-section{

    padding:60px 0;
}

.value-grid{

    grid-template-columns:1fr;
}

.coach-photo{

    height:340px;
}

.coach-details{

    position:static;
    padding:26px;
    background:#0d0d0d;
    border-top:1px solid rgba(216,59,45,.28);
    opacity:1;
    visibility:visible;
    transform:none;
}

.prof-values{

    padding:35px;
}

.prof-contact{

    padding:35px;
}

}